diff --git a/app/components/application_component.rb b/app/components/application_component.rb index d92c68dd0..a0b7a072b 100644 --- a/app/components/application_component.rb +++ b/app/components/application_component.rb @@ -1,7 +1,6 @@ class ApplicationComponent < ViewComponent::Base - delegate :link_to_user, :time_ago_in_words_tagged, :format_text, :edit_icon, - :delete_icon, :undelete_icon, :flag_icon, :upvote_icon, :downvote_icon, - :link_icon, to: :helpers + delegate :link_to_user, :time_ago_in_words_tagged, :format_text, :external_link_to, :tag_class, to: :helpers + delegate :edit_icon, :delete_icon, :undelete_icon, :flag_icon, :upvote_icon, :downvote_icon, :link_icon, to: :helpers def policy(subject) Pundit.policy!(current_user, subject) diff --git a/app/components/source_data_component.rb b/app/components/source_data_component.rb new file mode 100644 index 000000000..848902c8d --- /dev/null +++ b/app/components/source_data_component.rb @@ -0,0 +1,10 @@ +# frozen_string_literal: true + +class SourceDataComponent < ApplicationComponent + attr_reader :source + delegate :spinner_icon, to: :helpers + + def initialize(source:) + @source = source + end +end diff --git a/app/views/sources/_info.html.erb b/app/components/source_data_component/source_data_component.html.erb similarity index 65% rename from app/views/sources/_info.html.erb rename to app/components/source_data_component/source_data_component.html.erb index 3131ecdf3..57f1c0981 100644 --- a/app/views/sources/_info.html.erb +++ b/app/components/source_data_component/source_data_component.html.erb @@ -1,23 +1,21 @@ -<%# source %> - -
- <%= link_to "Fetch source data", source_path, id: "fetch-data-manual" %> - <%= spinner_icon(id: "source-info-loading") %> +
+ <%= link_to "Fetch source data", source_path, class: "source-data-fetch" %> + <%= spinner_icon class: "source-data-loading" %> <% if @source.present? %> -
-
+
+
Artist
<% if @source.artist_name.blank? %> None <% else %> - <%= external_link_to @source.profile_url, @source.artist_name, id: "source-info-artist-profile" %> + <%= external_link_to @source.profile_url, @source.artist_name, class: "source-data-artist-profile" %> <% if @source.artists.empty? %> - (<%= link_to "Create new artist", new_artist_path(artist: { source: @source.canonical_url }), id: "source-info-create-new-artist" %>) + (<%= link_to "Create new artist", new_artist_path(artist: { source: @source.canonical_url }), class: "source-data-create-new-artist" %>) <% else %> - (
    + (
      <% @source.artists.each do |artist| %>
    • <%= link_to artist.name, artist_path(artist), class: tag_class(artist.tag) %>
      • <% end %> @@ -27,7 +25,7 @@
-
+
Tags
<% if @source.tags.empty? %> @@ -40,7 +38,7 @@ <% if @source.image_urls.length > 1 %> - +

Gallery. Tags may not apply to all images.

<% end %> <% end %>
diff --git a/app/components/source_data_component/source_data_component.js b/app/components/source_data_component/source_data_component.js new file mode 100644 index 000000000..64221339f --- /dev/null +++ b/app/components/source_data_component/source_data_component.js @@ -0,0 +1,23 @@ +class SourceDataComponent { + static initialize() { + $(document).on("change.danbooru", "#upload_source", SourceDataComponent.fetchData); + $(document).on("click.danbooru", ".source-data-fetch", SourceDataComponent.fetchData); + } + + static async fetchData(e) { + let url = $("#upload_source,#post_source").val(); + let ref = $("#upload_referer_url").val(); + + e.preventDefault(); + + if (/^https?:\/\//.test(url)) { + $(".source-data").addClass("loading"); + await $.get("/source.js", { url: url, ref: ref }); + $(".source-data").removeClass("loading"); + } + } +} + +$(document).ready(SourceDataComponent.initialize); + +export default SourceDataComponent; diff --git a/app/components/source_data_component/source_data_component.scss b/app/components/source_data_component/source_data_component.scss new file mode 100644 index 000000000..85585914a --- /dev/null +++ b/app/components/source_data_component/source_data_component.scss @@ -0,0 +1,20 @@ +div.source-data { + border-radius: 4px; + border: 1px solid var(--fetch-source-data-border-color); + + &:not(.loading) .source-data-loading { display: none; } + &.loading .source-data-content { display: none; } + &.loading .source-data-fetch { display: none; } + + ul { + display: inline-block; + } + + dt, dd, li { + display: inline; + } + + dt, .source-data-tags li { + margin-right: 1em; + } +} diff --git a/app/helpers/components_helper.rb b/app/helpers/components_helper.rb index b78d97273..7a5e9cd9b 100644 --- a/app/helpers/components_helper.rb +++ b/app/helpers/components_helper.rb @@ -23,6 +23,10 @@ module ComponentsHelper render PostNavbarComponent.new(post: post, **options) end + def render_source_data(source, **options) + render SourceDataComponent.new(source: source, **options) + end + # A simple vertical tag list with no post counts. Used in related tags. def render_simple_tag_list(tag_names, **options) tags = TagListComponent.tags_from_names(tag_names) diff --git a/app/javascript/src/javascripts/related_tag.js b/app/javascript/src/javascripts/related_tag.js index 393c991a7..b2dbc15cc 100644 --- a/app/javascript/src/javascripts/related_tag.js +++ b/app/javascript/src/javascripts/related_tag.js @@ -1,4 +1,4 @@ -import Uploads from './uploads.js.erb'; +import SourceDataComponent from '../../../components/source_data_component/source_data_component.js'; import Utility from './utility'; let RelatedTag = {}; @@ -17,7 +17,7 @@ RelatedTag.initialize_all = function() { // Initialize the recent/favorite/translated/artist tag columns once, the first time the related tags are shown. $(document).one("danbooru:show-related-tags", RelatedTag.initialize_recent_and_favorite_tags); - $(document).one("danbooru:show-related-tags", Uploads.fetch_data_manual); + $(document).one("danbooru:show-related-tags", SourceDataComponent.fetchData); // Show the related tags automatically when the "Edit" tab is opened, or by default on the uploads page. $(document).on("danbooru:open-post-edit-tab", RelatedTag.show); diff --git a/app/javascript/src/javascripts/uploads.js.erb b/app/javascript/src/javascripts/uploads.js.erb index 305c4ef2d..0b07f98d9 100644 --- a/app/javascript/src/javascripts/uploads.js.erb +++ b/app/javascript/src/javascripts/uploads.js.erb @@ -14,8 +14,6 @@ Upload.IQDB_HIGH_SIMILARITY = 70; Upload.initialize_all = function() { if ($("#c-uploads,#c-posts").length) { Utility.keydown("return", "submit", Upload.submit_form, "#upload_tag_string, #post_tag_string"); - $("#upload_source").on("change.danbooru", Upload.fetch_data_manual); - $(document).on("click.danbooru", "#fetch-data-manual", Upload.fetch_data_manual); } if ($("#c-uploads").length) { @@ -159,18 +157,6 @@ Upload.update_scale = function() { } } -Upload.fetch_data_manual = function(e) { - var url = $("#upload_source,#post_source").val(); - var ref = $("#upload_referer_url").val(); - - if (/^https?:\/\//.test(url)) { - $("#source-info").addClass("loading"); - $.get("/source.js", { url: url, ref: ref }).always(resp => $("#source-info").removeClass("loading")); - } - - e.preventDefault(); -} - Upload.toggle_commentary = function() { if ($(".artist-commentary").is(":visible")) { $("#toggle-artist-commentary").text("show ยป"); diff --git a/app/javascript/src/styles/specific/posts.scss b/app/javascript/src/styles/specific/posts.scss index 51c90fddf..057e7121e 100644 --- a/app/javascript/src/styles/specific/posts.scss +++ b/app/javascript/src/styles/specific/posts.scss @@ -221,30 +221,6 @@ div#c-post-versions, div#c-artist-versions { } } -div#c-posts, div#c-uploads { - /* Fetch source data box */ - div#source-info { - border-radius: 4px; - border: 1px solid var(--fetch-source-data-border-color); - - &:not(.loading) #source-info-loading { display: none; } - &.loading #source-info-content { display: none; } - &.loading #fetch-data-manual { display: none; } - - ul { - display: inline-block; - } - - dt, dd, li { - display: inline; - } - - dt, #source-info-tags li { - margin-right: 1em; - } - } -} - /* Container for the tag edit