Render "Fetch source data" box html server-side.

Instead of calling /sources.json and rendering the "Fetch source data"
box client-side in Javascript, call /sources.js so we can render the
html server-side.
This commit is contained in:
evazion
2018-09-07 16:51:00 -05:00
parent b1a9337897
commit 056fe365f2
6 changed files with 86 additions and 92 deletions

View File

@@ -1,5 +1,5 @@
class SourcesController < ApplicationController
respond_to :json, :xml
respond_to :js, :json, :xml
def show
@source = Sources::Strategies.find(params[:url], params[:ref])

View File

@@ -40,6 +40,7 @@ export { default as PostModeMenu } from '../src/javascripts/post_mode_menu.js';
export { default as PostTooltip } from '../src/javascripts/post_tooltips.js';
export { default as RelatedTag } from '../src/javascripts/related_tag.js.erb';
export { default as Shortcuts } from '../src/javascripts/shortcuts.js';
export { default as Upload } from '../src/javascripts/uploads.js';
export { default as Utility } from '../src/javascripts/utility.js';
export { default as Ugoira } from '../src/javascripts/ugoira.js';

View File

@@ -1,12 +1,11 @@
import Post from './posts.js.erb'
import RelatedTag from './related_tag.js.erb'
let Upload = {};
Upload.initialize_all = function() {
if ($("#c-uploads,#c-posts").length) {
this.initialize_enter_on_tags();
this.initialize_info_manual();
$(document).on("click.danbooru", "#fetch-data-manual", Upload.fetch_data_manual);
}
if ($("#c-uploads").length) {
@@ -79,80 +78,10 @@ Upload.initialize_similar = function() {
}
Upload.initialize_info_bookmarklet = function() {
$("#upload_source").on("change.danbooru", function (e) {
$("#fetch-data-manual").click();
});
$("#upload_source").on("change.danbooru", Upload.fetch_data_manual);
$("#fetch-data-manual").click();
}
Upload.initialize_info_manual = function() {
$("#fetch-data-manual").on("click.danbooru", function(e) {
var source = $("#upload_source,#post_source").val();
var referer = $("#upload_referer_url").val();
if (/^https?:\/\//.test(source)) {
$("#source-info span#loading-data").show();
Upload.fetch_source_data(source, referer);
}
e.preventDefault();
});
}
Upload.fetch_source_data = function(url, referer_url) {
return $.getJSON("/source.json", { url: url, ref: referer_url })
.then(Upload.fill_source_info)
.catch(function(data) {
$("#source-info span#loading-data").html("Error: " + data.responseJSON.message)
});
}
Upload.fill_source_info = function(data) {
$("#source-tags").empty();
$.each(data.tags, function(i, v) {
$("<a>").attr("href", v[1]).text(v[0]).appendTo("#source-tags");
});
$("#source-artist-profile").attr("href", data.profile_url).text(data.artist_name);
RelatedTag.process_artist(data.artists);
RelatedTag.translated_tags = data.translated_tags;
RelatedTag.build_all();
if (data.artists.length === 0) {
var new_artist_params = $.param({
artist: {
name: data.unique_id,
other_names: data.artist_name,
url_string: $.uniqueSort([data.profile_url, data.normalized_for_artist_finder_url]).join("\n")
}
});
var link = $("<a>").attr("href", "/artists/new?" + new_artist_params).text("Create new artist");
$("#source-danbooru-artists").html(link);
} else {
var artistLinks = data.artists.map(function (artist) {
return $('<a class="tag-type-1">').attr("href", "/artists/" + artist.id).text(artist.name);
});
$("#source-danbooru-artists").html(artistLinks)
}
if (data.image_urls.length > 1) {
$("#gallery-warning").show();
} else {
$("#gallery-warning").hide();
}
$("#upload_artist_commentary_title").val(data.artist_commentary.dtext_title);
$("#upload_artist_commentary_desc").val(data.artist_commentary.dtext_description);
Upload.toggle_commentary();
$("#source-info span#loading-data").hide();
$("#source-info ul").show();
}
Upload.update_scale = function() {
var $image = $("#image");
var ratio = $image.data("scale-factor");
@@ -163,6 +92,18 @@ 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.initialize_image = function() {
var $image = $("#image");
if (!$image.length) {

View File

@@ -445,18 +445,20 @@ div#c-posts, div#c-uploads {
padding: 1em;
border: 1px solid #666;
p {
margin: 0;
&:not(.loading) #source-info-loading { display: none; }
&.loading #source-info-content { display: none; }
&.loading #fetch-data-manual { display: none; }
ul {
display: inline-block;
}
> ul {
display: none;
dt, dd, li {
display: inline;
}
.source-tags {
a {
margin-right: 1em;
}
}
dt, #source-info-tags li {
margin-right: 1em;
}
}
}

View File

@@ -1,11 +1,50 @@
<div id="source-info">
<p><%= link_to "Fetch source data", source_path(:format => "json"), :id => "fetch-data-manual" %></p>
<p><%= content_tag "span", "Loading source data...", :id => "loading-data", :style => "display: none;" %></p>
<p id="remote-size" style="display: none;"></p>
<p id="gallery-warning" style="display: none;"><%= content_tag "span", "Gallery. Tags may not apply to all images." %></p>
<%# source %>
<ul>
<li><strong>Artist</strong>: <a id="source-artist-profile"></a> (<span id="source-danbooru-artists"></span>)</li>
<li class="source-tags"><strong>Tags</strong>: <span id="source-tags"></span></li>
</ul>
<div id="source-info">
<%= link_to "Fetch source data", source_path, id: "fetch-data-manual" %>
<i id="source-info-loading" class="fas fa-spinner fa-spin"></i>
<% if @source.present? %>
<dl id="source-info-content">
<div id="source-info-artist">
<dt>Artist</dt>
<dd>
<% if @source.artist_name.blank? %>
<em>None</em>
<% else %>
<%= link_to @source.artist_name, @source.profile_url, id: "source-info-artist-profile" %>
<% if @source.artists.empty? %>
(<%= link_to "Create new artist", new_artist_path(artist: { name: @source.unique_id, other_names: @source.artist_name, url_string: [@source.profile_url, @source.normalize_for_artist_finder].uniq.sort.join("\n") }), id: "source-info-create-new-artist" %>)
<% else %>
(<ul id="source-info-translated-artists">
<% @source.artists.each do |artist| %>
<li><%= link_to artist.name, artist_path(artist), class: "tag-type-#{artist.category_name}" %></li>
<% end %>
</ul>)
<% end %>
<% end %>
</dd>
</div>
<div id="source-info-tags">
<dt>Tags</dt>
<dd>
<% if @source.tags.empty? %>
<em>None</em>
<% else %>
<ul>
<% @source.tags.each do |tag, href| %>
<li><%= link_to tag, href, rel: :nofollow %></li>
<% end %>
</ul>
<% if @source.image_urls.length > 1 %>
<p id="source-info-gallery-warning">Gallery. Tags may not apply to all images.</p>
<% end %>
<% end %>
</dd>
</li>
</dl>
<% end %>
</div>

View File

@@ -0,0 +1,11 @@
$("#source-info").replaceWith("<%= j render "info", source: @source %>");
Danbooru.RelatedTag.recent_artists = <%= raw @source.artists.to_json(include: :sorted_urls) %>;
Danbooru.RelatedTag.translated_tags = <%= raw @source.translated_tags.to_json %>;
Danbooru.RelatedTag.build_all();
if ($("#c-uploads #a-new").length) {
$("#upload_artist_commentary_title").val(<%= raw @source.dtext_artist_commentary_title.to_json %>);
$("#upload_artist_commentary_desc").val(<%= raw @source.dtext_artist_commentary_desc.to_json %>);
Danbooru.Upload.toggle_commentary();
}