posts: add back "resize to window" link.

* Add back "Resize to window" link.
* Add Z shortcut for resize to window link (mnemonic: Z for zoom image).
* Resize images to screen width by default on both desktop and mobile.
* Make it so that notes are nested directly inside the .image-container
  element with the image, instead of inside a separate .note-container
  element. This means .image-container and .note-container are now the
  same element. This is so that the size of the .note-container is
  driven by the size of the image, which ensures that notes are
  automatically resized as the image is resized.

app/javascript/src/javascripts/notes.js

@@ -414,8 +414,6 @@ let Note = {
         return;
       }
       let $image = $("#image");
-      $container.height($image.height());
-      $container.width($image.width());
       if (Note.embed) {
         let large_width = parseFloat($image.data('large-width'));
         let ratio = $image.width() / large_width;
@@ -843,15 +841,13 @@ let Note = {
     },
 
     create_note: function(e, x, y, w, h) {
-      var offset = $("#image").offset();
-
       if (w > 9 || h > 9) { /* minimum note size: 10px */
         if (w <= 9) {
           w = 10;
         } else if (h <= 9) {
           h = 10;
         }
-        Note.create(x - offset.left, y - offset.top, w, h);
+        Note.create(x, y, w, h);
       }
 
       $(".note-container").css('visibility', 'visible');
@@ -907,18 +903,18 @@ let Note = {
         }
         if (Note.TranslationMode.Drag.dragging) {
           if (Note.TranslationMode.Drag.dragDistanceX >= 0) {
-            Note.TranslationMode.Drag.x = Note.TranslationMode.Drag.dragStartX;
+            Note.TranslationMode.Drag.x = Note.TranslationMode.Drag.dragStartX - offset.left;
             Note.TranslationMode.Drag.w = Note.TranslationMode.Drag.dragDistanceX;
           } else {
-            Note.TranslationMode.Drag.x = Note.TranslationMode.Drag.dragStartX + Note.TranslationMode.Drag.dragDistanceX;
+            Note.TranslationMode.Drag.x = Note.TranslationMode.Drag.dragStartX - offset.left + Note.TranslationMode.Drag.dragDistanceX;
             Note.TranslationMode.Drag.w = -Note.TranslationMode.Drag.dragDistanceX;
           }
 
           if (Note.TranslationMode.Drag.dragDistanceY >= 0) {
-            Note.TranslationMode.Drag.y = Note.TranslationMode.Drag.dragStartY;
+            Note.TranslationMode.Drag.y = Note.TranslationMode.Drag.dragStartY - offset.top;
             Note.TranslationMode.Drag.h = Note.TranslationMode.Drag.dragDistanceY;
           } else {
-            Note.TranslationMode.Drag.y = Note.TranslationMode.Drag.dragStartY + Note.TranslationMode.Drag.dragDistanceY;
+            Note.TranslationMode.Drag.y = Note.TranslationMode.Drag.dragStartY - offset.top + Note.TranslationMode.Drag.dragDistanceY;
             Note.TranslationMode.Drag.h = -Note.TranslationMode.Drag.dragDistanceY;
           }
 

app/javascript/src/javascripts/posts.js.erb

@@ -300,7 +300,7 @@ Post.initialize_favlist = function() {
   });
 }
 
-Post.expand_image = function(e) {
+Post.view_original = function(e) {
   if (Utility.test_max_width(660)) {
     // Do the default behavior (navigate to image)
     return;
@@ -347,9 +347,17 @@ Post.view_large = function(e) {
   e.preventDefault();
 }
 
+Post.toggle_fit_window = function(e) {
+  $("#image").toggleClass("fit-width");
+  Note.Box.scale_all();
+  Post.resize_ugoira_controls();
+  e.preventDefault();
+};
+
 Post.initialize_post_image_resize_links = function() {
-  $("#image-resize-link").on("click.danbooru", Post.expand_image);
+  $("#image-resize-link").on("click.danbooru", Post.view_original);
   $("#image-view-large-link").on("click.danbooru", Post.view_large);
+  $(document).on("click.danbooru", ".image-resize-to-window-link", Post.toggle_fit_window);
 
   if ($("#image-resize-notice").length) {
     Utility.keydown("v", "resize", function(e) {

app/javascript/src/styles/base/020_base.scss

@@ -151,6 +151,16 @@ ul.list-inline {
   }
 }
 
+.fit-width {
+  max-width: 100%;
+  height: auto !important;
+}
+
+.fit-height {
+  max-height: 90vh;
+  height: auto !important;
+}
+
 .mobile-only {
   display: none;
   @media (max-width: 660px) { display: initial; }

app/javascript/src/styles/specific/notes.scss

@@ -1,5 +1,6 @@
 .note-container {
-  position: absolute;
+  display: inline-block;
+  position: relative;
 
   div.note-body {
     position: absolute;

app/javascript/src/styles/specific/posts.scss

@@ -341,12 +341,6 @@ div#c-posts {
       margin: 1em 0 0.5em;
     }
 
-    /* This ensures the image appears above the note container, but beneath any notes. */
-    #image {
-      position: relative;
-      z-index: 50;
-    }
-
     .pool-name, .search-name {
       word-wrap: break-word;
     }

app/javascript/src/styles/specific/z_responsive.scss

@@ -92,11 +92,6 @@
     }
   }
 
-  img#image {
-    max-width: 100%;
-    height: auto;
-  }
-
   .user-disable-cropped-false {
     article.post-preview {
       width: 33.3%;

app/views/posts/partials/show/_image.html.erb

@@ -1,3 +1,3 @@
 <% if policy(post).visible? %>
-  <%= image_tag(post.file_url_for(CurrentUser.user), :width => post.image_width_for(CurrentUser.user), :height => post.image_height_for(CurrentUser.user), :id => "image", "data-original-width" => post.image_width, "data-original-height" => post.image_height, "data-large-width" => post.large_image_width, "data-large-height" => post.large_image_height, "data-tags" => post.tag_string, :alt => post.presenter.humanized_essential_tag_string, "data-uploader" => post.uploader.name, "data-rating" => post.rating, "data-flags" => post.status_flags, "data-parent-id" => post.parent_id, "data-has-children" => post.has_children?, "data-has-active-children" => post.has_active_children?, "data-score" => post.score, "data-fav-count" => post.fav_count, "itemprop" => "contentUrl") %>
+  <%= image_tag(post.file_url_for(CurrentUser.user), width: post.image_width_for(CurrentUser.user), height: post.image_height_for(CurrentUser.user), id: "image", class: "fit-width", "data-original-width": post.image_width, "data-original-height": post.image_height, "data-large-width": post.large_image_width, "data-large-height": post.large_image_height, "data-tags": post.tag_string, alt: post.presenter.humanized_essential_tag_string, "data-uploader": post.uploader.name, "data-rating": post.rating, "data-flags": post.status_flags, "data-parent-id": post.parent_id, "data-has-children": post.has_children?, "data-has-active-children": post.has_active_children?, "data-score": post.score, "data-fav-count": post.fav_count, "itemprop": "contentUrl") %>
 <% end %>

app/views/posts/partials/show/_options.html.erb

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

app/views/posts/partials/show/_ugoira_original.html.erb

@@ -2,6 +2,7 @@
   :canvas,
   nil,
   :id => "image",
+  :class => "fit-width",
   :width => post.image_width,
   :height => post.image_height,
   "data-original-width" => post.image_width,

app/views/posts/partials/show/_ugoira_webm.html.erb

@@ -1,3 +1,3 @@
-<%= content_tag(:video, nil, :id => "image", :width => post.image_width, :height => post.image_height, :autoplay => true, :loop => true, :controls => "controls", :src => post.tagged_large_file_url) %>
+<%= content_tag(:video, nil, id: "image", class: "fit-width", width: post.image_width, height: post.image_height, autoplay: true, loop: true, controls: "controls", src: post.tagged_large_file_url) %>
 
 <p><%= link_to "Save this video (right click and save)", post.tagged_large_file_url %> | <%= link_to "View original", post_path(post, :original => 1) %></p>

app/views/posts/partials/show/_video.html.erb

@@ -1,7 +1,7 @@
 <% if post.is_ugoira? %>
-  <%= content_tag(:video, nil, :id => "image", :width => post.image_width, :height => post.image_height, :autoplay => true, :loop => true, :controls => "controls", :src => post.tagged_large_file_url) %>
+  <%= content_tag(:video, nil, id: "image", class: "fit-width", width: post.image_width, height: post.image_height, autoplay: true, loop: true, controls: "controls", src: post.tagged_large_file_url) %>
   <p><%= link_to "Save this video (right click and save)", post.tagged_large_file_url %></p>
 <% else %>
-  <%= content_tag(:video, nil, :id => "image", :width => post.image_width, :height => post.image_height, :autoplay => true, :loop => true, :controls => "controls", :src => post.tagged_file_url) %>
+  <%= content_tag(:video, nil, id: "image", class: "fit-width", width: post.image_width, height: post.image_height, autoplay: true, loop: true, controls: "controls", src: post.tagged_file_url) %>
   <p><%= link_to "Save this video (right click and save)", post.tagged_file_url %></p>
 <% end %>

app/views/posts/show.html.erb

@@ -50,10 +50,9 @@
 
   <%= render "posts/partials/show/notices", :post => @post %>
 
-  <%= content_tag(:section, { class: "image-container" }.merge(PostPresenter.data_attributes(@post))) do -%>
-    <div class="note-container"></div>
-    <div id="note-preview"></div>
+  <%= content_tag(:section, class: "image-container note-container", **PostPresenter.data_attributes(@post)) do -%>
     <%= render "posts/partials/show/embedded", post: @post %>
+    <div id="note-preview"></div>
   <% end -%>
 
   <% if policy(Favorite).create? %>