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

app/components/source_data_component/source_data_component.html.erb

@@ -0,0 +1,48 @@
+<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 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, class: "source-data-artist-profile" %>
+
+            <% if @source.artists.empty? %>
+              (<%= link_to "Create new artist", new_artist_path(artist: { source: @source.canonical_url }), class: "source-data-create-new-artist" %>)
+            <% else %>
+              (<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 %>
+              </ul>)
+            <% end %>
+          <% end %>
+        </dd>
+      </div>
+
+      <div class="source-data-tags">
+        <dt>Tags</dt>
+        <dd>
+          <% if @source.tags.empty? %>
+            <em>None</em>
+          <% else %>
+            <ul>
+              <% @source.tags.each do |tag, href| %>
+                <li><%= external_link_to href, tag %></li>
+              <% end %>
+            </ul>
+
+            <% if @source.image_urls.length > 1 %>
+              <p class="source-data-gallery-warning">Gallery. Tags may not apply to all images.</p>
+            <% end %>
+          <% end %>
+        </dd>
+      </li>
+    </dl>
+  <% end %>
+</div>

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