related tags: build html server-side instead of client-side.

This commit is contained in:
evazion
2018-10-12 21:18:15 -05:00
parent 5a05961bde
commit 4e2944ee06
13 changed files with 134 additions and 271 deletions

View File

@@ -2,7 +2,6 @@
import Utility from './utility'
import Hammer from 'hammerjs'
import RelatedTag from './related_tag.js.erb'
import Cookie from './cookie'
import Note from './notes'
import SavedSearch from './saved_searches'
@@ -85,11 +84,6 @@ Post.initialize_edit_dialog = function() {
Post.open_edit_dialog();
e.preventDefault();
});
$("#toggle-related-tags-link").on("click.danbooru", function(e) {
RelatedTag.toggle();
e.preventDefault();
});
}
Post.open_edit_dialog = function() {
@@ -102,14 +96,11 @@ Post.open_edit_dialog = function() {
$("#share").hide();
$("#post-sections li").removeClass("active");
$("#post-edit-link").parent("li").addClass("active");
$("#related-tags-container").show();
var $tag_string = $("#post_tag_string,#upload_tag_string");
$("div.input").has($tag_string).prevAll().hide();
$("#open-edit-dialog").hide();
$("#toggle-related-tags-link").show().click();
var dialog = $("<div/>").attr("id", "edit-dialog");
$("#form").appendTo(dialog);
dialog.dialog({
@@ -161,17 +152,19 @@ Post.open_edit_dialog = function() {
$tag_string.css({"resize": "none", "width": "100%"});
$tag_string.focus().selectEnd().height($tag_string[0].scrollHeight);
$(document).trigger("danbooru:show-post-edit-form");
$(document).trigger("danbooru:open-post-edit-dialog");
}
Post.close_edit_dialog = function(e, ui) {
$("#form").appendTo($("#c-posts #edit,#c-uploads #a-new"));
$("#edit-dialog").remove();
RelatedTag.show();
$("#toggle-related-tags-link").hide();
var $tag_string = $("#post_tag_string,#upload_tag_string");
$("div.input").has($tag_string).prevAll().show();
$("#open-edit-dialog").show();
$tag_string.css({"resize": "", "width": ""});
$(document).trigger("danbooru:close-post-edit-dialog");
}
Post.initialize_similar = function() {
@@ -439,9 +432,8 @@ Post.initialize_post_sections = function() {
$("#comments").hide();
$("#share").hide();
$("#post_tag_string").focus().selectEnd().height($("#post_tag_string")[0].scrollHeight);
$("#related-tags-button").trigger("click");
$("#fetch-data-manual").trigger("click");
$("#recommended").hide();
$(document).trigger("danbooru:show-post-edit-form");
} else if (e.target.hash === "#recommended") {
$("#comments").hide();
$("#edit").hide();

View File

@@ -1,22 +1,18 @@
import Upload from './uploads';
import Utility from './utility';
import Cookie from './cookie';
let RelatedTag = {};
RelatedTag.initialize_all = function() {
if ($("#c-posts #a-show").length || $("#c-uploads #a-new").length) {
this.initialize_buttons();
$("#upload_tag_string,#post_tag_string").on("keyup.danbooru.relatedTags", RelatedTag.update_selected);
$("#related-tags-container").on("click.danbooru", "#artist-related-tags-column a.del", RelatedTag.disable_artist_url)
}
}
RelatedTag.initialize_buttons = function() {
this.common_bind("#related-tags-button", "");
<% TagCategory.related_button_list.each do |category| %>
RelatedTag.common_bind("#related-<%= category %>-button", "<%= category %>"); // eslint-disable-line indent
<% end %>
RelatedTag.artists = [];
RelatedTag.translated_tags = [];
$(document).on("click.danbooru", ".related-tags-button", RelatedTag.on_click_related_tags_button);
$(document).on("click.danbooru", ".related-tags a.search-tag", RelatedTag.toggle_tag);
$(document).on("click.danbooru", "#show-related-tags-link, #hide-related-tags-link", RelatedTag.toggle);
$(document).on("keyup.danbooru.relatedTags", "#upload_tag_string, #post_tag_string", RelatedTag.update_selected);
$(document).on("danbooru:update-source-data", RelatedTag.on_update_source_data);
$(document).on("danbooru:show-post-edit-form", RelatedTag.on_show_post_edit_form);
$(document).on("danbooru:open-post-edit-dialog", RelatedTag.on_open_post_edit_dialog);
$(document).on("danbooru:close-post-edit-dialog", RelatedTag.on_close_post_edit_dialog);
}
RelatedTag.tags_include = function(name) {
@@ -24,20 +20,40 @@ RelatedTag.tags_include = function(name) {
return $.inArray(name.toLowerCase(), current) > -1;
}
RelatedTag.common_bind = function(button_name, category) {
$(button_name).on("click.danbooru", function(e) {
var $dest = $("#related-tags");
$dest.empty();
RelatedTag.build_recent_and_frequent($dest);
$dest.append("<em>Loading...</em>");
$.get("/related_tag.json", {
"query": RelatedTag.current_tag(),
"category": category
}, RelatedTag.process_response);
e.preventDefault();
RelatedTag.update_related_tags = function (category = "") {
$.get("/related_tag.js", {
"query": RelatedTag.current_tag(),
"category": category,
"translated_tags": RelatedTag.translated_tags.join(" "),
"artists": RelatedTag.artists.join(" "),
});
}
RelatedTag.on_open_post_edit_dialog = function(event) {
$("#related-tags-container").removeClass("visible").addClass("hidden");
}
RelatedTag.on_close_post_edit_dialog = function(event) {
$("#related-tags-container").removeClass("hidden").addClass("visible");
}
RelatedTag.on_show_post_edit_form = function(event) {
RelatedTag.update_related_tags();
$("#fetch-data-manual").click();
}
RelatedTag.on_click_related_tags_button = function (event) {
const category = $(event.target).data("category");
RelatedTag.update_related_tags(category);
$("#related-tags-container").removeClass("hidden").addClass("visible");
}
RelatedTag.on_update_source_data = function (event, source) {
Danbooru.RelatedTag.artists = source.artists.map(artist => artist.name);
Danbooru.RelatedTag.translated_tags = source.translated_tags.map(tag => tag[0]);
RelatedTag.update_related_tags();
}
RelatedTag.current_tag = function() {
// 1. abc def | -> def
// 2. abc def| -> def
@@ -86,11 +102,6 @@ RelatedTag.current_tag = function() {
return string.slice(a, b);
}
RelatedTag.process_response = function(data) {
RelatedTag.recent_search = data;
RelatedTag.build_all();
}
RelatedTag.update_selected = function(e) {
var current_tags = $("#upload_tag_string,#post_tag_string").val().toLowerCase().match(/\S+/g) || [];
var $all_tags = $("#related-tags a");
@@ -103,165 +114,6 @@ RelatedTag.update_selected = function(e) {
});
}
RelatedTag.build_all = function() {
if (RelatedTag.recent_search === null || RelatedTag.recent_search === undefined) {
return;
}
RelatedTag.show();
var query = RelatedTag.recent_search.query;
var related_tags = RelatedTag.recent_search.tags;
var wiki_page_tags = RelatedTag.recent_search.wiki_page_tags;
var other_wikis = RelatedTag.recent_search.other_wikis;
var $dest = $("#related-tags");
$dest.empty();
this.build_recent_and_frequent($dest);
$dest.append(this.build_html(query, related_tags, "general"));
this.build_translated($dest);
if (wiki_page_tags.length) {
$dest.append(RelatedTag.build_html("wiki:" + query, wiki_page_tags, "wiki"));
}
$.each(other_wikis, function(i, wiki) {
$dest.append(RelatedTag.build_html("wiki:" + wiki.title, wiki.wiki_page_tags, "otherwiki" + i.toString()));
});
if (RelatedTag.recent_artists) {
var tags = [];
if (RelatedTag.recent_artists.length === 0) {
tags.push([" none", 0]);
} else if (RelatedTag.recent_artists.length === 1) {
tags.push([RelatedTag.recent_artists[0].name, 1]);
if (RelatedTag.recent_artists[0].is_banned === true) {
tags.push(["BANNED_ARTIST", "banned"]);
}
$.each(RelatedTag.recent_artists[0].sorted_urls, function(i, url) {
var x = url.url;
if (!url.is_active) {
x = "-" + x;
}
tags.push([" " + x, 0]);
});
} else if (RelatedTag.recent_artists.length >= 10) {
tags.push([" none", 0]);
} else {
$.each(RelatedTag.recent_artists, function(i, artist) {
tags.push([artist.name, 1]);
});
}
$dest.append(RelatedTag.build_html("artist", tags, "artist", true));
}
}
RelatedTag.build_recent_and_frequent = function($dest) {
var recent_tags = Cookie.get("recent_tags_with_categories");
var favorite_tags = Cookie.get("favorite_tags_with_categories");
if (recent_tags.length) {
$dest.append(this.build_html("recent", this.other_tags(recent_tags), "recent"));
}
if (favorite_tags.length) {
$dest.append(this.build_html("frequent", this.other_tags(favorite_tags), "frequent"));
}
}
RelatedTag.other_tags = function(string) {
if (string && string.length) {
return $.map(string.match(/\S+ \d+/g), function(x, i) {
var submatch = x.match(/(\S+) (\d+)/);
return [[submatch[1], submatch[2]]];
});
} else {
return [];
}
}
RelatedTag.build_translated = function($dest) {
if (RelatedTag.translated_tags && RelatedTag.translated_tags.length) {
$dest.append(this.build_html("Translated Tags", RelatedTag.translated_tags, "translated"));
}
}
RelatedTag.build_html = function(query, related_tags, name, is_wide_column) {
if (query === null || query === "") {
return "";
}
query = query.replace(/_/g, " ");
var header = $("<em/>");
var match = query.match(/^wiki:(.+)/);
if (match) {
header.html($("<a/>").attr("href", "/wiki_pages?title=" + encodeURIComponent(match[1])).attr("target", "_blank").text(query));
} else {
header.text(query);
}
var $div = $("<div/>");
$div.attr("id", name + "-related-tags-column");
$div.addClass("tag-column");
if (is_wide_column) {
$div.addClass("wide-column");
}
var $ul = $("<ul/>");
$ul.append(
$("<li/>").append(
header
)
);
$.each(related_tags, function(i, tag) {
if (tag[0][0] !== " ") {
var $link = $("<a/>");
$link.text(tag[0].replace(/_/g, " "));
$link.addClass("tag-type-" + tag[1]);
$link.attr("href", "/posts?tags=" + encodeURIComponent(tag[0]));
$link.on("click.danbooru", RelatedTag.toggle_tag);
if (RelatedTag.tags_include(tag[0])) {
$link.addClass("selected");
}
$ul.append(
$("<li/>").append($link)
);
} else {
var text = tag[0];
var desc = "";
if (text.match(/^ -http/)) {
text = text.substring(1, 1000);
desc = text.replace(/^-https?:\/\//, "");
if (desc.length > 30) {
desc = desc.substring(0, 30) + "...";
}
$ul.append(
$("<li>").append(
$("<del>").text(desc)
)
);
} else if (text.match(/^ http/)) {
text = text.substring(1, 1000);
desc = text.replace(/^https?:\/\//, "");
if (desc.length > 30) {
desc = desc.substring(0, 30) + "...";
}
$ul.append(
$("<li>").append([
$("<a>").text(desc).attr("href", text).attr("target", "_blank"),
" ",
$("<a>").attr("href", text).addClass("del").append(
$("<i>").addClass("fas fa-minus-circle")
)
])
);
} else {
$ul.append($("<li/>").text(text));
}
}
});
$div.append($ul);
return $div;
}
RelatedTag.toggle_tag = function(e) {
var $field = $("#upload_tag_string,#post_tag_string");
var tag = $(e.target).html().replace(/ /g, "_").replace(/&gt;/g, ">").replace(/&lt;/g, "<").replace(/&amp;/g, "&");
@@ -281,46 +133,9 @@ RelatedTag.toggle_tag = function(e) {
e.preventDefault();
}
RelatedTag.toggle = function() {
if ($("#related-tags").is(":visible")) {
RelatedTag.hide();
} else {
RelatedTag.show();
$("#related-tags-button").trigger("click");
$("#find-artist-button").trigger("click");
}
}
RelatedTag.show = function() {
$("#related-tags").show()
$("#toggle-related-tags-link").text("«");
$("#edit-dialog").height("auto");
}
RelatedTag.hide = function() {
$("#related-tags").hide();
$("#toggle-related-tags-link").text("»");
}
RelatedTag.disable_artist_url = function(e) {
var url = e.currentTarget.href;
$.each(RelatedTag.recent_artists[0].sorted_urls, function(k, v) {
if (v.normalized_url === url || v.url === url) {
if (!confirm("This will mark the URL as inactive. Continue?")) {
return;
}
$.ajax("/artist_urls/" + v.id, {
method: "PUT",
data: {
artist_url: {
is_active: false
}
}
}).done(Upload.fetch_data_manual);
}
});
return false;
RelatedTag.toggle = function(e) {
$("#related-tags-container").toggleClass("visible hidden");
e.preventDefault();
}
$(function() {