Convert notes to use percentages instead of exact coordinates

- This allows for the note boxes to be easily resized
-- Now resizing the note container resizes all of the note boxes
-- The z-index and position values had to be adjusted for this
--- So that the note/preview boxes were still visible
--- So that the image was selectable with right clicks
- All of the inner box styles have been moved to the outer box
-- Now the inner box is only a container for the note body
- The always resize image option has been removed from user settings
-- The value still exists on the model for future rename/reuse
- The max width is set at 100% for responsive mode to fit the screen
This commit is contained in:
BrokenEagle
2020-03-03 20:18:22 +00:00
parent cded0f763b
commit e844a06e61
8 changed files with 126 additions and 173 deletions

View File

@@ -33,13 +33,8 @@ Post.initialize_all = function() {
this.initialize_favlist();
this.initialize_post_sections();
this.initialize_post_image_resize_links();
this.initialize_post_image_resize_to_window_link();
this.initialize_recommended();
this.initialize_ugoira_player();
if (CurrentUser.data("always-resize-images") || (Utility.meta("viewport") && (window.screen.width <= 660))) {
$("#image-resize-to-window-link").click();
}
}
if ($("#c-posts #a-show, #c-uploads #a-new").length) {
@@ -325,7 +320,6 @@ Post.expand_image = function(e) {
$notice.children().eq(0).hide();
$notice.children().eq(1).show(); // Loading message
Note.Box.scale_all();
$image.data("scale-factor", 1);
e.preventDefault();
}
@@ -357,45 +351,6 @@ Post.initialize_post_image_resize_links = function() {
}
}
Post.resize_image_to_window = function($img) {
var sidebar_width = 0;
var client_width = 0;
if (($img.data("scale-factor") === 1) || ($img.data("scale-factor") === undefined)) {
if ($(window).width() > 660) {
sidebar_width = $("#sidebar").width() || 0;
client_width = $(window).width() - sidebar_width - 75;
} else {
client_width = $(window).width() - 2;
}
if ($img.width() > client_width) {
var isVideo = $img.prop("tagName") === "VIDEO";
var width = isVideo ? $img.prop("width") : $img.data("original-width");
var height = isVideo ? $img.prop("height") : $img.data("original-height");
var ratio = client_width / width;
$img.data("scale-factor", ratio);
$img.css("width", width * ratio);
$img.css("height", height * ratio);
Post.resize_ugoira_controls();
}
} else {
$img.data("scale-factor", 1);
$img.width($img.data("original-width"));
$img.height($img.data("original-height"));
Post.resize_ugoira_controls();
}
Note.Box.scale_all();
}
Post.initialize_post_image_resize_to_window_link = function() {
$("#image-resize-to-window-link").on("click.danbooru", function(e) {
Post.resize_image_to_window($("#image"));
e.preventDefault();
});
}
Post.initialize_excerpt = function() {
$("#excerpt").hide();
@@ -460,6 +415,7 @@ Post.initialize_ugoira_player = function() {
let file_url = $("#image-container").data("file-url");
Ugoira.create_player(content_type, frames, file_url);
$(window).on("resize.danbooru.ugoira_scale", Post.resize_ugoira_controls);
}
};