diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js index 6548ada3c..97e6c772e 100644 --- a/app/javascript/packs/application.js +++ b/app/javascript/packs/application.js @@ -34,7 +34,7 @@ export { default as Blip } from '../src/javascripts/blips.js'; export { default as Comment } from '../src/javascripts/comments.js'; export { default as Dtext } from '../src/javascripts/dtext.js'; export { default as Note } from '../src/javascripts/notes.js'; -export { default as Post } from '../src/javascripts/posts.js.erb'; +export { default as Post } from '../src/javascripts/posts.js'; export { default as PostModeMenu } from '../src/javascripts/post_mode_menu.js'; export { default as PostVersions } from '../src/javascripts/post_versions.js'; export { default as RelatedTag } from '../src/javascripts/related_tag.js'; diff --git a/app/javascript/src/javascripts/favorites.js b/app/javascript/src/javascripts/favorites.js index 6bf191154..e9da13217 100644 --- a/app/javascript/src/javascripts/favorites.js +++ b/app/javascript/src/javascripts/favorites.js @@ -1,4 +1,4 @@ -import Post from './posts.js.erb' +import Post from './posts' import Utility from './utility' import {SendQueue} from './send_queue' @@ -69,4 +69,3 @@ Favorite.destroy = function (post_id) { $(Favorite.initialize_actions); export default Favorite - diff --git a/app/javascript/src/javascripts/mod_queue.js b/app/javascript/src/javascripts/mod_queue.js index 9b6c04374..03ef561b9 100644 --- a/app/javascript/src/javascripts/mod_queue.js +++ b/app/javascript/src/javascripts/mod_queue.js @@ -1,5 +1,5 @@ import Utility from './utility' -import Post from './posts.js.erb' +import Post from './posts' let ModQueue = {}; diff --git a/app/javascript/src/javascripts/post_mode_menu.js b/app/javascript/src/javascripts/post_mode_menu.js index 52eb62c3e..100259e2c 100644 --- a/app/javascript/src/javascripts/post_mode_menu.js +++ b/app/javascript/src/javascripts/post_mode_menu.js @@ -1,6 +1,6 @@ import Utility from './utility' import LS from './local_storage' -import Post from './posts.js.erb' +import Post from './posts' import Favorite from './favorites' import PostSet from './post_sets' import TagScript from './tag_script' diff --git a/app/javascript/src/javascripts/post_sets.js b/app/javascript/src/javascripts/post_sets.js index 7ad148042..ffad5b16a 100644 --- a/app/javascript/src/javascripts/post_sets.js +++ b/app/javascript/src/javascripts/post_sets.js @@ -1,5 +1,5 @@ import {SendQueue} from './send_queue' -import Post from './posts.js.erb' +import Post from './posts' import LS from './local_storage' let PostSet = {}; diff --git a/app/javascript/src/javascripts/post_versions.js b/app/javascript/src/javascripts/post_versions.js index ac95b08e6..2ba134128 100644 --- a/app/javascript/src/javascripts/post_versions.js +++ b/app/javascript/src/javascripts/post_versions.js @@ -1,6 +1,6 @@ import Utility from './utility'; import {SendQueue} from "./send_queue"; -import Post from './posts.js.erb'; +import Post from './posts'; let PostVersion = {}; diff --git a/app/javascript/src/javascripts/posts.js.erb b/app/javascript/src/javascripts/posts.js similarity index 96% rename from app/javascript/src/javascripts/posts.js.erb rename to app/javascript/src/javascripts/posts.js index 03f4fae6d..7209a538c 100644 --- a/app/javascript/src/javascripts/posts.js.erb +++ b/app/javascript/src/javascripts/posts.js @@ -579,7 +579,9 @@ Post.resize_image = function (post, target_size) { Post.resize_notes(); } -Post.resize_to_internal = function(target_size) { +Post.resize_to = function(target_size) { + target_size = update_size_selector(target_size); + if ($("#image-container").hasClass("blacklisted-active-visible")) return; @@ -591,14 +593,6 @@ Post.resize_to_internal = function(target_size) { } } -Post.resize_to = function (target_size) { - if ($("#image-container").hasClass("blacklisted-active-visible")) - return; - - const selector = $("#image-resize-selector"); - select_or_fit(selector, target_size); - Post.resize_to_internal(selector.val()); -} function is_video(post) { switch (post.file.ext) { @@ -610,29 +604,28 @@ function is_video(post) { } } -function sorted_samples() { - let samples = Object.entries(Post.currentPost().sample.alternates); - samples = samples.filter((x) => x[0] !== 'original'); - return samples.sort((a, b) => (a[1].height * a[1].width) > (b[1].height * b[1].width) ? -1 : 1); -} - -function select_or_fit(parent, choice) { - const choices = parent.find("option"); +function update_size_selector(choice) { + const selector = $("#image-resize-selector"); + const choices = selector.find("option"); if(choice === "next") { - const index = parent[0].selectedIndex; - parent.val($(choices[(index+1) % choices.length]).val()); - return; + const index = selector[0].selectedIndex; + const next_choice = $(choices[(index + 1) % choices.length]).val(); + selector.val(next_choice); + return next_choice; } for (const item of choices) { if ($(item).val() == choice) { - parent.val(choice); - return; + selector.val(choice); + return choice; } } - parent.val('fit'); + selector.val("fit"); + return "fit"; } + function most_relevant_sample_size(post) { - const samples = sorted_samples(); + let samples = Object.entries(Post.currentPost().sample.alternates); + samples = samples.filter((x) => x[0] !== 'original'); if(samples.length === 0) { return 'fit'; } @@ -643,19 +636,6 @@ function most_relevant_sample_size(post) { return differences[0][0]; } -function fill_size_options(has_sample) { - const $sel = $("#image-resize-selector").empty(); - $sel.append($("").val("original").text("Original")); - $sel.append($("").val("fit").text("Fit (Horizontal)")); - $sel.append($("").val("fitv").text("Fit (Vertical)")); - if(has_sample) - $sel.append($("").val("large").text("Sample (800)")); - - for (const sample of sorted_samples()) { - $sel.append($("").val(sample[0]).text(`Sample (${sample[0]})`)); - } -} - Post.initialize_resize = function () { Post.initialize_change_resize_mode_link(); const post = Post.currentPost(); @@ -663,9 +643,6 @@ Post.initialize_resize = function () { return; const is_post_video = is_video(post); - - const $selector = $("#image-resize-selector"); - fill_size_options(!is_post_video && post?.sample?.has); if (!is_post_video) { const $image = $('img#image'); if ($image.length > 0 && $image[0]) { @@ -684,7 +661,8 @@ Post.initialize_resize = function () { image_size = most_relevant_sample_size(post); } Post.resize_to(image_size); - $selector.on('change', () => Post.resize_to_internal($selector.val())); + const $selector = $("#image-resize-selector"); + $selector.on('change', () => Post.resize_to($selector.val())); } Post.resize_cycle_mode = function(e) { diff --git a/app/javascript/src/javascripts/related_tag.js b/app/javascript/src/javascripts/related_tag.js index 2ddcc0948..98327fc2d 100644 --- a/app/javascript/src/javascripts/related_tag.js +++ b/app/javascript/src/javascripts/related_tag.js @@ -1,5 +1,5 @@ import Utility from './utility'; -import Post from './posts.js.erb'; +import Post from './posts'; let RelatedTag = {}; diff --git a/app/javascript/src/javascripts/tag_editor.vue b/app/javascript/src/javascripts/tag_editor.vue index 77d4b58bf..ae70a9683 100644 --- a/app/javascript/src/javascripts/tag_editor.vue +++ b/app/javascript/src/javascripts/tag_editor.vue @@ -30,7 +30,7 @@ import Vue from 'vue'; import relatedTags from './uploader_related.vue'; import tagPreview from './uploader_preview.vue'; - import Post from './posts.js.erb'; + import Post from './posts'; import Autocomplete from "./autocomplete.js.erb"; import Utility from "./utility.js"; diff --git a/app/javascript/src/javascripts/uploads.js b/app/javascript/src/javascripts/uploads.js index e926a9e0c..6a3482e7f 100644 --- a/app/javascript/src/javascripts/uploads.js +++ b/app/javascript/src/javascripts/uploads.js @@ -1,4 +1,4 @@ -import Post from './posts.js.erb' +import Post from './posts' let Upload = {}; diff --git a/app/views/posts/show.html.erb b/app/views/posts/show.html.erb index 380800fde..70a298862 100644 --- a/app/views/posts/show.html.erb +++ b/app/views/posts/show.html.erb @@ -108,7 +108,18 @@ <% end %> <% if !@post.force_original_size?(params[:original]) %> - | (Disabled: No JS) + | + Original + Fit (Horizontal) + Fit (Vertical) + <% if !@post.is_video? %> + Sample (<%= Danbooru.config.large_image_width %>px) + <% end %> + <% Danbooru.config.video_rescales.keys.each do |size| %> + <% next unless @post.has_sample_size?(size) %> + Sample (<%= size %>) + <% end %> + <% end %> diff --git a/app/views/users/edit.html.erb b/app/views/users/edit.html.erb index 8718392ac..297f6bac3 100644 --- a/app/views/users/edit.html.erb +++ b/app/views/users/edit.html.erb @@ -44,7 +44,7 @@ <%= f.input :comment_threshold, :hint => "Comments below this score will be hidden by default." %> - <%= f.input :default_image_size, :hint => "Show original image size, scaled to fit, scaled to fit vertically, or show resized #{Danbooru.config.large_image_width} pixel sample version.", :label => "Default image width", :collection => [["850px", "large"], ["scale to fit", "fit"], ["scale to fit vertically", "fitv"], ["original", "original"]], :include_blank => false %> + <%= f.input :default_image_size, :hint => "Show original image size, scaled to fit, scaled to fit vertically, or show resized #{Danbooru.config.large_image_width} pixel sample version.", :label => "Default image width", :collection => [["Original", "original"], ["Fit (Horizonal)", "fit"], ["Fit (Vertical)", "fitv"], ["Sample (#{Danbooru.config.large_image_width}px)", "large"]], :include_blank => false %> <%= f.input :per_page, :label => "Posts per page", :as => :select, :collection => (25..250), :include_blank => false %> diff --git a/config/danbooru_default_config.rb b/config/danbooru_default_config.rb index 58b9a1c53..e9329efe8 100644 --- a/config/danbooru_default_config.rb +++ b/config/danbooru_default_config.rb @@ -954,8 +954,10 @@ fart' false end + # Additional video samples will be generated in these dimensions if it makes sense to do so + # They will be available as additional scale options on applicable posts in the order they appear here def video_rescales - {'480p' => [640, 480], '720p' => [1280, 720]} + {'720p' => [1280, 720], '480p' => [640, 480]} end def image_rescales