posts: change #image-container, #note-container to classes.

Change #image-container and #note-container from IDs to classes. This is
necessary so that we can use one container element for both the image
container and the note container. This may break custom CSS and
userscripts.

app/javascript/src/javascripts/artist_commentaries.js

@@ -116,8 +116,8 @@ ArtistCommentary.fill_commentary = function(commentary) {
 // If the new description conflicts with the current description, merge them
 // by appending the new description onto the old one.
 ArtistCommentary.merge_commentaries = function(description, commentary) {
-  var post_source = $('#image-container').data().source;
-  var normalized_source = $("#image-container").data().normalizedSource;
+  var post_source = $('.image-container').data().source;
+  var normalized_source = $(".image-container").data().normalizedSource;
 
   if ((commentary.original_description && description) &&
       (commentary.original_description !== description)) {

app/javascript/src/javascripts/blacklists.js

@@ -159,7 +159,7 @@ Blacklist.apply_post = function(post) {
 };
 
 Blacklist.posts = function() {
-  return $(".post-preview, #image-container, #c-comments .post, .mod-queue-preview.post-preview");
+  return $(".post-preview, .image-container, #c-comments .post, .mod-queue-preview.post-preview");
 }
 
 Blacklist.post_match = function(post, entry) {

app/javascript/src/javascripts/notes.js

@@ -190,7 +190,7 @@ let Note = {
     },
 
     find: function(id) {
-      return $("#note-container div.note-box[data-id=" + id + "]");
+      return $(".note-container div.note-box[data-id=" + id + "]");
     },
 
     drag_stop: function(event) {
@@ -409,7 +409,7 @@ let Note = {
     },
 
     scale_all: function() {
-      const $container = $('#note-container');
+      const $container = $('.note-container');
       if ($container.length === 0) {
         return;
       }
@@ -425,7 +425,7 @@ let Note = {
     },
 
     toggle_all: function() {
-      var $note_container = $("#note-container");
+      var $note_container = $(".note-container");
       var is_hidden = ($note_container.css('visibility') === 'hidden');
 
       if (is_hidden) {
@@ -493,7 +493,7 @@ let Note = {
     },
 
     find: function(id) {
-      return $("#note-container div.note-body[data-id=" + id + "]");
+      return $(".note-container div.note-body[data-id=" + id + "]");
     },
 
     hide: function(id) {
@@ -502,7 +502,7 @@ let Note = {
     },
 
     hide_all: function() {
-      $("#note-container div.note-body").hide();
+      $(".note-container div.note-body").hide();
     },
 
     resize: function($note_body) {
@@ -854,7 +854,7 @@ let Note = {
         Note.create(x - offset.left, y - offset.top, w, h);
       }
 
-      $("#note-container").css('visibility', 'visible');
+      $(".note-container").css('visibility', 'visible');
       e.stopPropagation();
       e.preventDefault();
     },
@@ -994,8 +994,8 @@ let Note = {
     Note.Box.update_data_attributes($note_box);
     $note_box.addClass("unsaved");
     $note_body.html("<em>Click to edit</em>");
-    $("#note-container").append($note_box);
-    $("#note-container").append($note_body);
+    $(".note-container").append($note_box);
+    $(".note-container").append($note_body);
     Note.id += "x";
   },
 
@@ -1039,7 +1039,7 @@ let Note = {
         $article.html()
       );
     });
-    const $note_container = $("#note-container");
+    const $note_container = $(".note-container");
     $note_container.append(fragment);
     if (Note.embed) {
       Note.base_font_size = parseFloat(window.getComputedStyle($note_container[0]).fontSize);

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

@@ -61,7 +61,7 @@ Post.initialize_gestures = function() {
   if (!Utility.test_max_width(660)) {
     return;
   }
-  $("#image-container").css({overflow: "visible"});
+  $(".image-container").css({overflow: "visible"});
   var hasPrev = $(".paginator a[rel~=prev]").length;
   var hasNext = $(".paginator a[rel~=next]").length;
 
@@ -332,7 +332,7 @@ Post.view_large = function(e) {
 
   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.width($image.data("large-width"));
   $image.height($image.data("large-height"));
@@ -423,7 +423,7 @@ Post.initialize_ugoira_player = function() {
   if ($("#ugoira-controls").length) {
     let content_type = $("#image").data("ugoira-content-type");
     let frames = $("#image").data("ugoira-frames");
-    let file_url = $("#image-container").data("file-url");
+    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);

app/javascript/src/styles/common/blacklists.scss

@@ -40,6 +40,6 @@
   }
 }
 
-.post-preview.blacklisted-active, #image-container.blacklisted-active, #c-comments .post.blacklisted-active {
+.post-preview.blacklisted-active, .image-container.blacklisted-active, #c-comments .post.blacklisted-active {
   display: none !important;
 }

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

@@ -1,4 +1,4 @@
-div#note-container {
+.note-container {
   position: absolute;
 
   div.note-body {

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

@@ -337,7 +337,7 @@ div#c-posts {
       }
     }
 
-    #image-container {
+    .image-container {
       margin: 1em 0 0.5em;
     }
 

app/views/posts/show.html.erb

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