sources: factor out 'Fetch source data' box into view component.

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)

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

app/components/source_data_component/source_data_component.html.erb

@@ -1,23 +1,21 @@
-<%# source %>
-
-<div id="source-info" class="p-4 mb-4">
-  <%= link_to "Fetch source data", source_path, id: "fetch-data-manual" %>
-  <%= spinner_icon(id: "source-info-loading") %>
+<div class="source-data p-4 mb-4">
+  <%= link_to "Fetch source data", source_path, class: "source-data-fetch" %>
+  <%= spinner_icon class: "source-data-loading" %>
 
   <% if @source.present? %>
-    <dl id="source-info-content">
-      <div id="source-info-artist">
+    <dl class="source-data-content">
+      <div class="source-data-artist">
         <dt>Artist</dt>
         <dd>
           <% if @source.artist_name.blank? %>
             <em>None</em>
           <% 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 %>
-              (<ul id="source-info-translated-artists">
+              (<ul class="source-data-translated-artists">
                 <% @source.artists.each do |artist| %>
                   <li><%= link_to artist.name, artist_path(artist), class: tag_class(artist.tag) %></li>
                 <% end %>
@@ -27,7 +25,7 @@
         </dd>
       </div>
 
-      <div id="source-info-tags">
+      <div class="source-data-tags">
         <dt>Tags</dt>
         <dd>
           <% if @source.tags.empty? %>
@@ -40,7 +38,7 @@
             </ul>
 
             <% if @source.image_urls.length > 1 %>
-              <p id="source-info-gallery-warning">Gallery. Tags may not apply to all images.</p>
+              <p class="source-data-gallery-warning">Gallery. Tags may not apply to all images.</p>
             <% end %>
           <% end %>
         </dd>

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;

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;
+  }
+}

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)

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);

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 »");

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 <textarea>, header, and related tags buttons. */
 #tags-container {
   max-width: 60rem;

app/views/artist_urls/update.js

@@ -1 +0,0 @@
-Danbooru.Upload.fetch_data_manual();

app/views/posts/partials/show/_edit.html.erb

@@ -4,7 +4,7 @@
   </div>
 <% end %>
 
-<%= render "sources/info" %>
+<%= render_source_data(nil) %>
 
 <%= edit_form_for(post, html: { id: "form" }) do |f| %>
   <%= f.input :tags_query, as: :hidden, input_html: { id: nil, name: "tags_query", value: params[:q] } %>

app/views/sources/show.js.erb

@@ -1,4 +1,4 @@
-$("#source-info").replaceWith("<%= j render "info", source: @source %>");
+$(".source-data").replaceWith("<%= j render_source_data(@source) %>");
 
 $(document).trigger("danbooru:update-source-data", {
   source: <%= raw @source.to_json %>,

app/views/uploads/new.html.erb

@@ -15,7 +15,7 @@
 
       <%= render "image" %>
       <%= render "related_posts", source: @source %>
-      <%= render "sources/info" %>
+      <%= render_source_data(nil) %>
 
       <div id="client-errors" class="error-messages ui-state-error ui-corner-all" style="display:none"></div>