posts: refactor post previews to use ViewComponent.
Refactor the post preview html to use the ViewComponent framework. This lets us encapsulate all the HTML, CSS, and helper methods for a UI component in a single place. See https://viewcomponent.org.
This commit is contained in:
evazion
2
app/components/application_component.rb
Normal file
2
app/components/application_component.rb
Normal file
@@ -0,0 +1,2 @@
|
||||
class ApplicationComponent < ViewComponent::Base
|
||||
end
|
||||
116
app/components/post_preview_component.rb
Normal file
116
app/components/post_preview_component.rb
Normal file
@@ -0,0 +1,116 @@
|
||||
# frozen_string_literal: true
|
||||
|
||||
class PostPreviewComponent < ApplicationComponent
|
||||
with_collection_parameter :post
|
||||
|
||||
attr_reader :post, :tags, :show_deleted, :show_cropped, :link_target, :pool, :pool_id, :favgroup_id, :similarity, :recommended, :compact, :size, :current_user, :options
|
||||
delegate :external_link_to, :time_ago_in_words_tagged, to: :helpers
|
||||
|
||||
def initialize(post:, tags: "", show_deleted: false, show_cropped: true, link_target: post, pool: nil, pool_id: nil, favgroup_id: nil, similarity: nil, recommended: nil, compact: nil, size: nil, current_user: CurrentUser.user, **options)
|
||||
@post = post
|
||||
@tags = tags
|
||||
@show_deleted = show_deleted
|
||||
@show_cropped = show_cropped
|
||||
@link_target = link_target
|
||||
@pool = pool
|
||||
@pool_id = pool_id
|
||||
@favgroup_id = favgroup_id
|
||||
@similarity = similarity.round(1) if similarity.present?
|
||||
@recommended = recommended.round(1) if recommended.present?
|
||||
@compact = compact
|
||||
@size = post.file_size if size.present?
|
||||
@current_user = current_user
|
||||
@options = options
|
||||
end
|
||||
|
||||
def render?
|
||||
post.present? && post.visible?(current_user) && (!post.is_deleted? || show_deleted)
|
||||
end
|
||||
|
||||
def article_attrs(classes = nil)
|
||||
{ class: [classes, *preview_class].compact.join(" "), **data_attributes }
|
||||
end
|
||||
|
||||
def link_params
|
||||
link_params = {}
|
||||
|
||||
link_params["q"] = tags if tags.present? && !current_user.is_anonymous?
|
||||
link_params["pool_id"] = pool_id if pool_id
|
||||
link_params["favgroup_id"] = favgroup_id if favgroup_id
|
||||
|
||||
link_params
|
||||
end
|
||||
|
||||
def cropped_url
|
||||
if show_cropped && post.has_cropped? && !current_user.disable_cropped_thumbnails?
|
||||
post.crop_file_url
|
||||
else
|
||||
post.preview_file_url
|
||||
end
|
||||
end
|
||||
|
||||
def preview_dimensions
|
||||
# XXX work around ancient bad posts with null or zero dimensions.
|
||||
if post.image_width.to_i > 0 && post.image_height.to_i > 0
|
||||
downscale_ratio = Danbooru.config.small_image_width.to_f / [post.image_width, post.image_height].max
|
||||
|
||||
{
|
||||
width: [(downscale_ratio * post.image_width).floor, post.image_width].min,
|
||||
height: [(downscale_ratio * post.image_height).floor, post.image_height].min
|
||||
}
|
||||
else
|
||||
{ width: 0, height: 0 }
|
||||
end
|
||||
end
|
||||
|
||||
def tooltip
|
||||
"#{post.tag_string} rating:#{post.rating} score:#{post.score}"
|
||||
end
|
||||
|
||||
def preview_class
|
||||
klass = ["post-preview"]
|
||||
klass << "captioned" if pool || size || similarity || recommended
|
||||
klass << "post-status-pending" if post.is_pending?
|
||||
klass << "post-status-flagged" if post.is_flagged?
|
||||
klass << "post-status-deleted" if post.is_deleted?
|
||||
klass << "post-status-has-parent" if post.parent_id
|
||||
klass << "post-status-has-children" if post.has_visible_children?
|
||||
klass << "post-preview-compact" if compact
|
||||
klass
|
||||
end
|
||||
|
||||
def data_attributes
|
||||
attributes = {
|
||||
"data-id" => post.id,
|
||||
"data-has-sound" => post.has_tag?('video_with_sound|flash_with_sound'),
|
||||
"data-tags" => post.tag_string,
|
||||
"data-pools" => post.pool_string,
|
||||
"data-approver-id" => post.approver_id,
|
||||
"data-rating" => post.rating,
|
||||
"data-large-width" => post.large_image_width,
|
||||
"data-large-height" => post.large_image_height,
|
||||
"data-width" => post.image_width,
|
||||
"data-height" => post.image_height,
|
||||
"data-flags" => post.status_flags,
|
||||
"data-parent-id" => post.parent_id,
|
||||
"data-has-children" => post.has_children?,
|
||||
"data-score" => post.score,
|
||||
"data-views" => post.view_count,
|
||||
"data-fav-count" => post.fav_count,
|
||||
"data-pixiv-id" => post.pixiv_id,
|
||||
"data-file-ext" => post.file_ext,
|
||||
"data-source" => post.source,
|
||||
"data-uploader-id" => post.uploader_id,
|
||||
"data-normalized-source" => post.normalized_source,
|
||||
}
|
||||
|
||||
if post.visible?(current_user)
|
||||
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
|
||||
end
|
||||
end
|
||||
@@ -0,0 +1,47 @@
|
||||
<%= tag.article id: "post_#{post.id}", **article_attrs do -%>
|
||||
<%= link_to polymorphic_path(link_target, link_params) do -%>
|
||||
<picture>
|
||||
<%= tag.source media: "(max-width: 660px)", srcset: cropped_url -%>
|
||||
<%= tag.source media: "(min-width: 660px)", srcset: post.preview_file_url -%>
|
||||
<%= tag.img class: "has-cropped-#{post.has_cropped?}", src: post.preview_file_url, style: "min-width: #{preview_dimensions[:width]}px; min-height: #{preview_dimensions[:height]}px;", title: tooltip, alt: "post ##{post.id}" -%>
|
||||
</picture>
|
||||
<% end -%>
|
||||
<% if pool -%>
|
||||
<p class="desc">
|
||||
<%= link_to pool.pretty_name.truncate(80), pool %>
|
||||
</p>
|
||||
<% end -%>
|
||||
<% if similarity -%>
|
||||
<p class="desc">
|
||||
<% if post.source =~ %r!\Ahttps?://!i %>
|
||||
<%= external_link_to post.normalized_source, post.source_domain %>
|
||||
(<%= time_ago_in_words_tagged(post.created_at, compact: true) %>)
|
||||
<% else %>
|
||||
<%= time_ago_in_words_tagged(post.created_at, compact: true) %>
|
||||
<% end %>
|
||||
</p>
|
||||
<% end %>
|
||||
<% if size -%>
|
||||
<p class="desc">
|
||||
<%= link_to number_to_human_size(size), post.file_url %>
|
||||
(<%= post.image_width %>x<%= post.image_height %>)
|
||||
</p>
|
||||
<% end -%>
|
||||
<% if similarity -%>
|
||||
<p class="desc">
|
||||
<%= link_to "#{similarity}%", iqdb_queries_path(post_id: post.id) %> similarity
|
||||
</p>
|
||||
<% end -%>
|
||||
|
||||
<% if recommended -%>
|
||||
<p class="desc recommended">
|
||||
<%= link_to recommended_posts_path(search: { post_id: post.id }), class: "more-recommended-posts", "data-post-id": post.id do %>
|
||||
<%= post.fav_count %>
|
||||
|
||||
<i class="far fa-heart fa-xs"></i>
|
||||
|
||||
<br>more »
|
||||
<% end %>
|
||||
</p>
|
||||
<% end -%>
|
||||
<% end -%>
|
||||
@@ -0,0 +1,162 @@
|
||||
@import "../../javascript/src/styles/base/000_vars.scss";
|
||||
|
||||
article.post-preview {
|
||||
height: 154px;
|
||||
width: 154px;
|
||||
margin: 0 10px 10px 0;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&.captioned {
|
||||
height: auto;
|
||||
vertical-align: text-top;
|
||||
}
|
||||
|
||||
&.post-preview-compact {
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 80%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
&[data-tags~=animated]::before, &[data-file-ext=swf]::before, &[data-file-ext=webm]::before, &[data-file-ext=mp4]::before, &[data-file-ext=zip]::before {
|
||||
@include animated-icon;
|
||||
}
|
||||
|
||||
&[data-has-sound=true]::before {
|
||||
@include sound-icon;
|
||||
}
|
||||
}
|
||||
|
||||
/* Avoid dead space around thumbnails in tables. */
|
||||
table article.post-preview {
|
||||
height: auto;
|
||||
width: auto;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post-preview {
|
||||
img {
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
|
||||
&.post-status-has-children img {
|
||||
border-color: var(--preview-has-children-color);
|
||||
}
|
||||
|
||||
&.post-status-has-parent img {
|
||||
border-color: var(--preview-has-parent-color);
|
||||
}
|
||||
|
||||
&.post-status-has-children.post-status-has-parent img {
|
||||
border-color: var(--preview-has-children-color) var(--preview-has-parent-color) var(--preview-has-parent-color) var(--preview-has-children-color);
|
||||
}
|
||||
|
||||
&.post-status-deleted img {
|
||||
border-color: var(--preview-deleted-color);
|
||||
}
|
||||
|
||||
&.post-status-has-children.post-status-deleted img {
|
||||
border-color: var(--preview-has-children-color) var(--preview-deleted-color) var(--preview-deleted-color) var(--preview-has-children-color);
|
||||
}
|
||||
|
||||
&.post-status-has-parent.post-status-deleted img {
|
||||
border-color: var(--preview-has-parent-color) var(--preview-deleted-color) var(--preview-deleted-color) var(--preview-has-parent-color);
|
||||
}
|
||||
|
||||
&.post-status-has-children.post-status-has-parent.post-status-deleted img {
|
||||
border-color: var(--preview-has-children-color) var(--preview-deleted-color) var(--preview-deleted-color) var(--preview-has-parent-color);
|
||||
}
|
||||
|
||||
/* Pending and flagged posts have blue borders (except in the modqueue). */
|
||||
&.post-status-pending:not(.mod-queue-preview) img,
|
||||
&.post-status-flagged:not(.mod-queue-preview) img {
|
||||
border-color: var(--preview-pending-color);
|
||||
}
|
||||
|
||||
&.post-status-has-children.post-status-pending:not(.mod-queue-preview) img,
|
||||
&.post-status-has-children.post-status-flagged:not(.mod-queue-preview) img {
|
||||
border-color: var(--preview-has-children-color) var(--preview-pending-color) var(--preview-pending-color) var(--preview-has-children-color);
|
||||
}
|
||||
|
||||
&.post-status-has-parent.post-status-pending:not(.mod-queue-preview) img,
|
||||
&.post-status-has-parent.post-status-flagged:not(.mod-queue-preview) img {
|
||||
border-color: var(--preview-has-parent-color) var(--preview-pending-color) var(--preview-pending-color) var(--preview-has-parent-color);
|
||||
}
|
||||
|
||||
&.post-status-has-children.post-status-has-parent.post-status-pending:not(.mod-queue-preview) img,
|
||||
&.post-status-has-children.post-status-has-parent.post-status-flagged:not(.mod-queue-preview) img {
|
||||
border-color: var(--preview-has-children-color) var(--preview-pending-color) var(--preview-pending-color) var(--preview-has-parent-color);
|
||||
}
|
||||
}
|
||||
|
||||
/* Flagged posts have red borders for approvers. */
|
||||
body[data-current-user-can-approve-posts="true"] .post-preview {
|
||||
&.post-status-flagged img {
|
||||
border-color: var(--preview-flagged-color);
|
||||
}
|
||||
|
||||
&.post-status-has-children.post-status-flagged img {
|
||||
border-color: var(--preview-has-children-color) var(--preview-flagged-color) var(--preview-flagged-color) var(--preview-has-children-color);
|
||||
}
|
||||
|
||||
&.post-status-has-parent.post-status-flagged img {
|
||||
border-color: var(--preview-has-parent-color) var(--preview-flagged-color) var(--preview-flagged-color) var(--preview-has-parent-color);
|
||||
}
|
||||
|
||||
&.post-status-has-children.post-status-has-parent.post-status-flagged img {
|
||||
border-color: var(--preview-has-children-color) var(--preview-flagged-color) var(--preview-flagged-color) var(--preview-has-parent-color);
|
||||
}
|
||||
}
|
||||
|
||||
.post-preview.current-post {
|
||||
background-color: var(--preview-current-post-background);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 660px) {
|
||||
article.post-preview {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
|
||||
a {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 33.3vw;
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.user-disable-cropped-false {
|
||||
article.post-preview {
|
||||
width: 33.3%;
|
||||
height: 33.3vw;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 33.3vw;
|
||||
height: 33.3vw;
|
||||
|
||||
&.has-cropped-false {
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user