[Posts] Standardize thumbnail attributes (#684)

Thumbnails used to have four different sets of data-attributes depending on how they were displayed.

app/controllers/concerns/deferred_posts.rb

@@ -9,7 +9,7 @@ module DeferredPosts
 
   def deferred_posts
     Post.includes(:uploader).where(id: deferred_post_ids.to_a).find_each.reduce({}) do |post_hash, p|
-      post_hash[p.id] = p.minimal_attributes
+      post_hash[p.id] = p.thumbnail_attributes
       post_hash
     end
   end

app/decorators/posts_decorator.rb

@@ -23,28 +23,7 @@ class PostsDecorator < ApplicationDecorator
   end
 
   def data_attributes
-    post = object
-    attributes = {
-        "data-id" => post.id,
-        "data-has-sound" => post.has_tag?("video_with_sound", "flash_with_sound"),
-        "data-tags" => post.tag_string,
-        "data-rating" => post.rating,
-        "data-flags" => post.status_flags,
-        "data-uploader-id" => post.uploader_id,
-        "data-uploader" => post.uploader_name,
-        "data-file-ext" => post.file_ext,
-        "data-score" => post.score,
-        "data-fav-count" => post.fav_count,
-        "data-is-favorited" => post.favorited_by?(CurrentUser.user.id)
-    }
-
-    if post.visible?
-      attributes["data-file-url"] = post.file_url
-      attributes["data-large-file-url"] = post.large_file_url
-      attributes["data-preview-file-url"] = post.preview_file_url
-    end
-
-    attributes
+    { data: object.thumbnail_attributes }
   end
 
   def cropped_url(options)

app/javascript/src/javascripts/blacklists.js

@@ -238,7 +238,7 @@ Blacklist.postMatch = function (post, entry) {
     uploader_id: $post.data("uploader-id"),
     user: $post.data("uploader").toString().toLowerCase(),
     flags: $post.data("flags"),
-    is_fav: $post.data("is-favorited"),
+    is_favorited: $post.data("is-favorited"),
   };
   return Blacklist.postMatchObject(post_data, entry);
 };
@@ -272,7 +272,7 @@ Blacklist.postMatchObject = function (post, entry) {
   tags.push(`user:${post.user}`);
   tags.push(`height:${post.height}`);
   tags.push(`width:${post.width}`);
-  if (post.is_fav)
+  if (post.is_favorited)
     tags.push("fav:me");
   $.each(post.flags.match(/\S+/g) || [], function (i, v) {
     tags.push(`status:${v}`);

app/javascript/src/javascripts/thumbnails.js

@@ -4,61 +4,74 @@ import LS from "./local_storage";
 const Thumbnails = {};
 
 Thumbnails.initialize = function () {
-  const clearPlaceholder = function (post) {
-    if (post.hasClass("thumb-placeholder-link")) {
-      post.removeClass("thumb-placeholder-link");
-    } else {
-      post.empty();
-    }
-  };
   const postsData = window.___deferred_posts || {};
   const posts = $(".post-thumb.placeholder, .thumb-placeholder-link");
   const DAB = LS.get("dab") === "1";
-  $.each(posts, function (i, post) {
-    const p = $(post);
-    const postID = p.data("id");
+
+  for (const post of posts) {
+    const $post = $(post);
+
+    // Placeholder is valid
+    const postID = $post.data("id");
     if (!postID) {
-      clearPlaceholder(p);
+      clearPlaceholder($post);
       return;
     }
+
+    // Data exists for this post
     const postData = postsData[postID];
     if (!postData) {
-      clearPlaceholder(p);
+      clearPlaceholder($post);
       return;
     }
+
+    // Building the element
+    const thumbnail = $("<div>")
+      .addClass("post-thumbnail blacklistable")
+      .toggleClass("dtext", $post.hasClass("thumb-placeholder-link"));
+    for (const key in postData)
+      thumbnail.attr("data-" + key.replace(/_/g, "-"), postData[key]);
+
+    const link = $("<a>")
+      .attr("href", `/posts/${postData.id}`)
+      .appendTo(thumbnail);
+
+    $("<img>")
+      .attr({
+        src: postData["preview_url"] || "/images/deleted-preview.png",
+        height: postData["preview_url"] ? postData["preview_height"] : 150,
+        width: postData["preview_url"] ? postData["preview_width"] : 150,
+        title: `Rating: ${postData.rating}\r\nID: ${postData.id}\r\nStatus: ${postData.flags}\r\nDate: ${postData["created_at"]}\r\n\r\n${postData.tags}`,
+        alt: postData.tags,
+        class: "post-thumbnail-img",
+      })
+      .appendTo(link);
+
+    // Disgusting implementation of the blacklist
+    if (!DAB) {
       let blacklist_hit_count = 0;
-    $.each(Blacklist.entries, function (j, entry) {
-      if (Blacklist.postMatchObject(postData, entry)) {
+      for (const entry of Blacklist.entries) {
+        if (!Blacklist.postMatchObject(postData, entry))
+          continue;
         entry.hits += 1;
         blacklist_hit_count += 1;
       }
-    });
-    const newTag = $("<div>");
-    const blacklisted = DAB ? false : blacklist_hit_count > 0;
-    for (const key in postData) {
-      newTag.attr("data-" + key.replace(/_/g, "-"), postData[key]);
+
+      if (blacklist_hit_count > 0)
+        thumbnail.addClass("blacklisted");
+    }
+
+    $post.replaceWith(thumbnail);
+  }
+
+  function clearPlaceholder (post) {
+    if (post.hasClass("thumb-placeholder-link"))
+      post.removeClass("thumb-placeholder-link");
+    else post.empty();
   }
-    newTag.attr("class", blacklisted ? "post-thumbnail blacklisted" : "post-thumbnail");
-    if (p.hasClass("thumb-placeholder-link"))
-      newTag.addClass("dtext");
-    const img = $("<img>");
-    img.attr("src", postData.preview_url || "/images/deleted-preview.png");
-    img.attr({
-      height: postData.preview_url ? postData.preview_height : 150,
-      width: postData.preview_url ? postData.preview_width : 150,
-      title: `Rating: ${postData.rating}\r\nID: ${postData.id}\r\nStatus: ${postData.status}\r\nDate: ${postData.created_at}\r\n\r\n${postData.tags}`,
-      alt: postData.tags,
-      class: "post-thumbnail-img",
-    });
-    const link = $("<a>");
-    link.attr("href", `/posts/${postData.id}`);
-    link.append(img);
-    newTag.append(link);
-    p.replaceWith(newTag);
-  });
 };
 
-$(document).ready(function () {
+$(() => {
   Thumbnails.initialize();
   $(window).on("e621:add_deferred_posts", (_, posts) => {
     window.___deferred_posts = window.___deferred_posts || {};

app/models/post.rb

@@ -1408,31 +1408,39 @@ class Post < ApplicationRecord
       list
     end
 
-    def minimal_attributes
-      preview_dims = preview_dimensions
-      hash = {
-          status: status,
-          flags: status_flags,
-          file_ext: file_ext,
+    def thumbnail_attributes
+      attributes = {
         id: id,
-          created_at: created_at,
-          rating: rating,
-          preview_width: preview_dims[1],
-          width: image_width,
-          preview_height: preview_dims[0],
-          height: image_height,
+        flags: status_flags,
         tags: tag_string,
-          score: score,
+        rating: rating,
+        file_ext: file_ext,
+
+        width: image_width,
+        height: image_height,
+        size: file_size,
+
+        created_at: created_at,
+        uploader: uploader_name,
         uploader_id: uploader_id,
-          uploader: uploader_name
+
+        score: score,
+        fav_count: fav_count,
+        is_favorited: favorited_by?(CurrentUser.user.id),
+
+        pools: pool_ids,
       }
 
       if visible?
-        hash[:md5] = md5
-        hash[:preview_url] = preview_file_url
-        hash[:cropped_url] = crop_file_url
+        attributes[:md5] = md5
+        attributes[:preview_url] = preview_file_url
+        attributes[:large_url] = large_file_url
+        attributes[:file_url] = file_url
+        attributes[:preview_width] = preview_dimensions[1]
+        attributes[:preview_height] = preview_dimensions[0]
       end
-      hash
+
+      attributes
     end
 
     def status

app/presenters/post_presenter.rb

@@ -105,31 +105,9 @@ class PostPresenter < Presenter
   end
 
   def self.data_attributes(post, include_post: false)
-    attributes = {
-        "data-id" => post.id,
-        "data-has-sound" => post.has_tag?("video_with_sound", "flash_with_sound"),
-        "data-tags" => post.tag_string,
-        "data-rating" => post.rating,
-        "data-width" => post.image_width,
-        "data-height" => post.image_height,
-        "data-flags" => post.status_flags,
-        "data-score" => post.score,
-        "data-file-ext" => post.file_ext,
-        "data-uploader-id" => post.uploader_id,
-        "data-uploader" => post.uploader_name,
-        "data-is-favorited" => post.favorited_by?(CurrentUser.user.id)
-    }
-
-    if post.visible?
-      attributes["data-md5"] = post.md5
-      attributes["data-file-url"] = post.file_url
-      attributes["data-large-file-url"] = post.large_file_url
-      attributes["data-preview-file-url"] = post.preview_file_url
-    end
-
-    attributes["data-post"] = post_attribute_attribute(post).to_json if include_post
-
-    attributes
+    attributes = post.thumbnail_attributes
+    attributes[:post] = post_attribute_attribute(post).to_json if include_post
+    { data: attributes }
   end
 
   def self.post_attribute_attribute(post)