Rewrite the notes Javascript from a procedural style to an object-oriented style. Before the notes Javascript had a lot of problems: * There was hidden state everywhere, both locally and globally. We had state in global variables, in <meta> tags, in DOM data-* attributes (on multiple elements), and in jQuery .data() properties (which are different from data-* attributes, because they aren't visible in the DOM). * Local state was hard to reason about. There was lots of direct DOM manipulation in random places. Functions had to constantly pass around note ids and look up elements in the DOM to get the state. State was invisible because it was stored as jQuery .data() properties. It was hard to follow where state was stored, how it was initialized, and how it changed. * Global state was also a mess. There were a lot of global flags and variables only used in specific situations. Almost all of this state was unnecessary. Global state also prevented us from doing things like loading or unloading posts dynamically, or showing multiple posts with notes on the same page. * There was a lot of duplication of code, especially for placing notes, and for loading or saving new notes versus saved notes. Now the code is organized in an object-oriented fashion: * The Note class represents a single note. A post has a list of notes, and each note object has a Note.Box and a Note.Body. Together these objects encapsulate the note's state. * Notes have methods for doing things like placing note boxes, or showing and hiding note bodies, or creating, saving, or deleting notes. This makes the JS API cleaner. * Global state is kept to a minimum. This is one big patch because it was too hard to make these changes incrementally. There are a couple minor bugfixes, but the actual behavior of notes should remain unchanged. Bugfixes: * It was possible to enter translation mode, start dragging a new note, then press N to leave translation mode while still dragging the note. If you did this, then you would be stuck in translation mode and you couldn't stop dragging the note. * Placement of new notes is now pixel-perfect. Before when placing a note, the note would shift by 1-2 pixels. * Previewing an empty note didn't show the "Click to edit" message. Other noteworthy changes: * Most global state has been eliminated. There were a lot of flags and variables stored as global variables on `Danbooru.Note`. Most of these turned out to be either unnecessary or even unused. * Notes now have an explicit minimum size of 10x10 pixels. Before this limit was hardcoded and undocumented. * A lot of the note placement and note creation code has been simplified. * `Note.add()` and `Note.create()` have been refactored into `new Note()`. Before `Note.add` was used to load an existing note, while `Note.create` was used to create a new note. These did the same thing, but had slightly different behavior. * `Note.Box.scale()` and `Note.box.update_data_attributes` have been refactored into `Note.Box.place_note()`. Contrary to their names, these functions were actually both used to place notes.
168 lines
6.6 KiB
Plaintext
168 lines
6.6 KiB
Plaintext
<% page_title @post.presenter.humanized_essential_tag_string %>
|
|
<% meta_description "View this #{@post.image_width}x#{@post.image_height} #{number_to_human_size(@post.file_size)} image" %>
|
|
<% canonical_url post_url(@post, host: Danbooru.config.hostname) %>
|
|
<% atom_feed_tag "Comments for post ##{@post.id}", comments_url(:atom, search: { post_id: @post.id }) %>
|
|
|
|
<%= render "posts/partials/common/secondary_links" %>
|
|
|
|
<% content_for(:sidebar) do %>
|
|
<%= render "posts/partials/common/search", :path => posts_path, :tags => params[:q], :tags_dom_id => "tags" %>
|
|
|
|
<%= render "posts/partials/index/blacklist" %>
|
|
|
|
<section id="tag-list">
|
|
<%= @post.presenter.split_tag_list_html(current_query: params[:q], show_extra_links: policy(@post).show_extra_links?) %>
|
|
</section>
|
|
|
|
<section id="post-information">
|
|
<h2>Information</h2>
|
|
<%= render "posts/partials/show/information", :post => @post %>
|
|
</section>
|
|
|
|
<section id="post-options">
|
|
<h2>Options</h2>
|
|
<%= render "posts/partials/show/options", :post => @post %>
|
|
</section>
|
|
|
|
<section id="post-history">
|
|
<h2>History</h2>
|
|
<ul>
|
|
<li id="post-history-tags"><%= link_to "Tags", post_versions_path(search: { post_id: @post.id }) %></li>
|
|
<li id="post-history-pools"><%= link_to "Pools", pool_versions_path(search: { post_id: @post.id }) %></li>
|
|
<li id="post-history-notes"><%= link_to "Notes", note_versions_path(search: { post_id: @post.id }) %></li>
|
|
<li id="post-history-moderation"><%= link_to "Moderation", post_events_path(@post.id) %></li>
|
|
<li id="post-history-commentary"><%= link_to "Commentary", artist_commentary_versions_path(search: { post_id: @post.id }) %></li>
|
|
<li id="post-history-replacements"><%= link_to "Replacements", post_replacements_path(search: {post_id: @post.id }) %></li>
|
|
</ul>
|
|
</section>
|
|
<% end %>
|
|
|
|
<% content_for(:content) do %>
|
|
<% if @post.presenter.has_nav_links?(self) %>
|
|
<%= render "posts/partials/show/nav_links", :post => @post, :position => "top" %>
|
|
<% end %>
|
|
|
|
<%= render "posts/partials/show/notices", :post => @post %>
|
|
|
|
<%= 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? %>
|
|
<%= content_tag(:div, class: "fav-buttons fav-buttons-#{@post.is_favorited?}") do %>
|
|
<%= form_tag(favorites_path(post_id: @post.id), method: "post", id: "add-fav-button", "data-remote": true) do %>
|
|
<%= button_tag tag.i(class: "far fa-heart"), class: "ui-button ui-widget ui-corner-all", "data-disable-with": tag.i(class: "fas fa-spinner fa-spin") %>
|
|
<% end %>
|
|
|
|
<%= form_tag(favorite_path(@post.id), method: "delete", id: "remove-fav-button", "data-remote": true) do %>
|
|
<%= button_tag tag.i(class: "fas fa-heart"), class: "ui-button ui-widget ui-corner-all", "data-disable-with": tag.i(class: "fas fa-spinner fa-spin") %>
|
|
<% end %>
|
|
<% end %>
|
|
<% end %>
|
|
|
|
<section id="mark-as-translated-section">
|
|
<%= edit_form_for(@post, url: mark_as_translated_post_path(@post), method: :put) do |f| %>
|
|
<%= f.input :tags_query, as: :hidden, input_html: { id: nil, name: "tags_query", value: params[:q] } %>
|
|
<%= f.input :pool_id, as: :hidden, input_html: { id: nil, name: "pool_id", value: params[:pool_id] } %>
|
|
<%= f.input :favgroup_id, as: :hidden, input_html: { id: nil, name: "favgroup_id", value: params[:favgroup_id] } %>
|
|
|
|
<fieldset class="inline-fieldset">
|
|
<%= f.input :check_translation, as: :boolean, input_html: { checked: @post.has_tag?("check_translation") } %>
|
|
<%= f.input :partially_translated, as: :boolean, input_html: { checked: @post.has_tag?("partially_translated") } %>
|
|
</fieldset>
|
|
|
|
<%= f.submit "Mark as translated" %>
|
|
<% end %>
|
|
</section>
|
|
|
|
<% if @post.artist_commentary && @post.artist_commentary.any_field_present? %>
|
|
<div id="artist-commentary">
|
|
<%= render "artist_commentaries/show", :artist_commentary => @post.artist_commentary %>
|
|
</div>
|
|
<% end %>
|
|
|
|
<% if @post.presenter.has_nav_links?(self) %>
|
|
<%= render "posts/partials/show/nav_links", :post => @post, :position => "bottom" %>
|
|
<% end %>
|
|
|
|
<menu id="post-sections">
|
|
<li class="active"><a href="#comments">Comments</a></li>
|
|
|
|
<% if RecommenderService.available_for_post?(@post) %>
|
|
<li><a href="#recommended">Recommended</a></li>
|
|
<% end %>
|
|
|
|
<% if policy(@post).update? %>
|
|
<li><a href="#edit" id="post-edit-link" data-shortcut="e">Edit</a></li>
|
|
<% end %>
|
|
</menu>
|
|
|
|
<% if RecommenderService.available_for_post?(@post) %>
|
|
<section id="recommended" style="display: none;">
|
|
<p><em>Loading...</em></p>
|
|
</section>
|
|
<% end %>
|
|
|
|
<section id="comments">
|
|
<%= render "comments/partials/index/list", comments: @comments, post: @post, page: :post %>
|
|
</section>
|
|
|
|
<section id="notes" style="display: none;">
|
|
<% if @post.has_notes? %>
|
|
<%= render partial: "notes/note", collection: @post.notes.active %>
|
|
<% end %>
|
|
</section>
|
|
|
|
<% if policy(@post).update? %>
|
|
<section id="edit" style="display: none;">
|
|
<%= render "posts/partials/show/edit", :post => @post %>
|
|
</section>
|
|
<% end %>
|
|
<% end %>
|
|
|
|
<% if policy(Pool).create? %>
|
|
<div id="add-to-pool-dialog" title="Add to pool" style="display: none;">
|
|
<%= render "pool_elements/new" %>
|
|
</div>
|
|
<% end %>
|
|
|
|
<% if policy(ArtistCommentary).create_or_update? %>
|
|
<div id="add-commentary-dialog" title="Add artist commentary" style="display: none;">
|
|
<%= render "artist_commentaries/form", post: @post, artist_commentary: @post.artist_commentary || ArtistCommentary.new(post: @post) %>
|
|
</div>
|
|
<% end %>
|
|
|
|
<% if policy(FavoriteGroup).create? %>
|
|
<div id="add-to-favgroup-dialog" title="Add to favorite group" style="display: none;">
|
|
<%= render "favorite_groups/add_to_favgroup_dialog", :post => @post %>
|
|
</div>
|
|
<% end %>
|
|
|
|
<%= post_view_count_js %>
|
|
|
|
<% content_for(:html_header) do %>
|
|
<meta name="post-id" content="<%= @post.id %>">
|
|
<meta name="post-has-embedded-notes" content="<%= @post.has_embedded_notes? %>">
|
|
|
|
<% if policy(@post).visible? %>
|
|
<%= tag.meta property: "og:image", content: @post.open_graph_image_url %>
|
|
|
|
<% if @post.is_video? %>
|
|
<%= json_ld_video_data(@post) %>
|
|
<% end %>
|
|
<% end %>
|
|
|
|
<% if @post.twitter_card_supported? %>
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
|
|
<% if policy(@post).visible? %>
|
|
<%= tag.meta name: "twitter:image", content: @post.open_graph_image_url %>
|
|
<% end %>
|
|
<% end %>
|
|
|
|
<% if @post.rating == "e" %>
|
|
<meta name="rating" content="adult">
|
|
<% end %>
|
|
<% end %>
|