jaculabilis/danbooru
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

posts: add "view original" sidebar option.

Browse Source 
* Add a "View original" sidebar option.
* Rename the "View large" sidebar option to "View smaller".
* Remove the "Loading..." message when switching image sizes.
* Fix the V hotkey not working after using it once.
* Change #image-resize-link to .image-view-original link (note that
  there are two of these links now, one in the notice bar and one in the
  sidebar).
* Add a `data-post-current-image-size` attribute on the <body> element
  and use it to control visibility of links and notices.
This commit is contained in:
evazion
2020-03-26 04:34:15 -05:00
parent 87a51129b8
commit 1af6850c7c
6 changed files with 34 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/helpers/application_helper.rb
View File

@@ -297,7 +297,7 @@ module ApplicationHelper
can_approve_posts disable_categorized_saved_searches can_approve_posts disable_categorized_saved_searches
disable_mobile_gestures disable_post_tooltips enable_auto_complete disable_mobile_gestures disable_post_tooltips enable_auto_complete
enable_post_navigation enable_safe_mode hide_deleted_posts enable_post_navigation enable_safe_mode hide_deleted_posts
show_deleted_children style_usernames show_deleted_children style_usernames default_image_size
] + User::Roles.map { |role| :"is_#{role}?" } ] + User::Roles.map { |role| :"is_#{role}?" }
end end

29
app/javascript/src/javascripts/posts.js.erb
View File

@@ -306,22 +306,17 @@ Post.view_original = function(e) {
return; return;
} }
var $link = $(e.target);
var $image = $("#image"); var $image = $("#image");
var $notice = $("#image-resize-notice"); $image.attr("src", $(".image-container").data("file-url"));
$image.attr("src", $link.attr("href"));
$image.css("filter", "blur(8px)"); $image.css("filter", "blur(8px)");
$image.width($image.data("original-width")); $image.width($image.data("original-width"));
$image.height($image.data("original-height")); $image.height($image.data("original-height"));
$image.on("load.danbooru", function() { $image.on("load.danbooru", function() {
$image.css("animation", "sharpen 0.5s forwards"); $image.css("animation", "sharpen 0.5s forwards");
$notice.hide();
$("#post-option-view-large").show();
}); });
$notice.children().eq(0).hide();
$notice.children().eq(1).show(); // Loading message
Note.Box.scale_all(); Note.Box.scale_all();
e.preventDefault(); $("body").attr("data-post-current-image-size", "original");
return false;
} }
Post.view_large = function(e) { Post.view_large = function(e) {
@@ -331,20 +326,16 @@ Post.view_large = function(e) {
} }
var $image = $("#image"); var $image = $("#image");
var $notice = $("#image-resize-notice");
$image.attr("src", $(".image-container").data("large-file-url")); $image.attr("src", $(".image-container").data("large-file-url"));
$image.css("filter", "blur(8px)"); $image.css("filter", "blur(8px)");
$image.width($image.data("large-width")); $image.width($image.data("large-width"));
$image.height($image.data("large-height")); $image.height($image.data("large-height"));
$notice.children().eq(0).show();
$notice.children().eq(1).hide(); // Loading message
$image.on("load.danbooru", function() { $image.on("load.danbooru", function() {
$image.css("animation", "sharpen 0.5s forwards"); $image.css("animation", "sharpen 0.5s forwards");
$notice.show();
$("#post-option-view-large").hide();
}); });
Note.Box.scale_all(); Note.Box.scale_all();
e.preventDefault(); $("body").attr("data-post-current-image-size", "large");
return false;
} }
Post.toggle_fit_window = function(e) { Post.toggle_fit_window = function(e) {
@@ -355,16 +346,16 @@ Post.toggle_fit_window = function(e) {
}; };
Post.initialize_post_image_resize_links = function() { Post.initialize_post_image_resize_links = function() {
$("#image-resize-link").on("click.danbooru", Post.view_original); $(document).on("click.danbooru", ".image-view-original-link", Post.view_original);
$("#image-view-large-link").on("click.danbooru", Post.view_large); $(document).on("click.danbooru", ".image-view-large-link", Post.view_large);
$(document).on("click.danbooru", ".image-resize-to-window-link", Post.toggle_fit_window); $(document).on("click.danbooru", ".image-resize-to-window-link", Post.toggle_fit_window);
if ($("#image-resize-notice").length) { if ($("#image-resize-notice").length) {
Utility.keydown("v", "resize", function(e) { Utility.keydown("v", "resize", function(e) {
if ($("#image-resize-notice").is(":visible")) { if ($("body").attr("data-post-current-image-size") === "large") {
$("#image-resize-link").click(); Post.view_original();
} else { } else {
$("#image-view-large-link").click(); Post.view_large();
} }
}); });
} }

6
app/javascript/src/styles/specific/posts.scss
View File

@@ -433,6 +433,12 @@ div#c-posts {
} }
} }
body[data-post-current-image-size="large"] .image-view-large-link,
body[data-post-current-image-size="original"] .image-view-original-link,
body[data-post-current-image-size="original"] #image-resize-notice {
display: none;
}
div#c-post-versions, div#c-artist-versions { div#c-post-versions, div#c-artist-versions {
div#a-index { div#a-index {
a { a {

9
app/models/post.rb
View File

@@ -269,6 +269,11 @@ class Post < ApplicationRecord
def resize_percentage def resize_percentage
100 * large_image_width.to_f / image_width.to_f 100 * large_image_width.to_f / image_width.to_f
end end
# XXX
def current_image_size
has_large? && CurrentUser.default_image_size == "large" ? "large" : "original"
end
end end
module ApprovalMethods module ApprovalMethods
@@ -1764,6 +1769,10 @@ class Post < ApplicationRecord
save save
end end
def html_data_attributes
super + [:has_large?, :current_image_size]
end
def self.available_includes def self.available_includes
[:uploader, :updater, :approver, :parent, :upload, :artist_commentary, :flags, :appeals, :notes, :comments, :children, :approvals, :replacements, :pixiv_ugoira_frame_data] [:uploader, :updater, :approver, :parent, :upload, :artist_commentary, :flags, :appeals, :notes, :comments, :children, :approvals, :replacements, :pixiv_ugoira_frame_data]
end end

5
app/views/posts/partials/show/_notices.html.erb
View File

@@ -68,8 +68,7 @@
<% end %> <% end %>
<% if policy(post).visible? && post.has_large? && !post.is_ugoira? %> <% if policy(post).visible? && post.has_large? && !post.is_ugoira? %>
<div class="notice notice-small post-notice post-notice-resized" id="image-resize-notice" style="<%= CurrentUser.default_image_size == "original" ? "display: none;" : "" %>"> <div class="notice notice-small post-notice post-notice-resized" id="image-resize-notice">
<span>Resized to <%= number_to_percentage post.resize_percentage.floor, :precision => 0 %> of original (<%= link_to "view original", post.tagged_file_url, :id => "image-resize-link" %>)</span> Resized to <%= number_to_percentage post.resize_percentage.floor, precision: 0 %> of original (<%= link_to "view original", post.tagged_file_url, class: "image-view-original-link" %>)
<span style="display: none;">Loading...</span>
</div> </div>
<% end %> <% end %>

9
app/views/posts/partials/show/_options.html.erb
View File

@@ -4,9 +4,12 @@
<%= link_to "Resize to window", "#", class: "image-resize-to-window-link", "data-shortcut": "z" %> <%= link_to "Resize to window", "#", class: "image-resize-to-window-link", "data-shortcut": "z" %>
</li> </li>
<% end %> <% end %>
<% if post.visible? && post.has_large? && !post.is_ugoira? %> <% if policy(post).visible? && post.has_large? && !post.is_ugoira? %>
<li id="post-option-view-large" style="<%= CurrentUser.default_image_size == "original" ? "" : "display: none;" %>"> <li id="post-option-view-large">
<%= link_to "View large", post.tagged_large_file_url, id: "image-view-large-link" %> <%= link_to "View smaller", post.tagged_large_file_url, class: "image-view-large-link" %>
</li>
<li id="post-option-view-original">
<%= link_to "View original", post.tagged_file_url, class: "image-view-original-link" %>
</li> </li>
<% end %> <% end %>
<li id="post-option-find-similar"> <li id="post-option-find-similar">