[Posts] Add an option to disable wiki excerpts (#896)

app/helpers/icon_helper.rb

@@ -18,6 +18,10 @@ module IconHelper
     settings: %(<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/>),
     log_in: %(<path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" x2="3" y1="12" y2="12"/>),
 
+    # Utility
+    times: %(<path d="M18 6 6 18"/><path d="m6 6 12 12"/>),
+    reset: %(<path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/>),
+
     # Pagination
     chevron_left: %(<path d="m15 18-6-6 6-6"/>),
     chevron_right: %(<path d="m9 18 6-6-6-6"/>),

app/javascript/src/javascripts/post_search.js

@@ -42,17 +42,38 @@ PostSearch.initialize_input = function ($form) {
 
 PostSearch.initialize_wiki_preview = function ($preview) {
   let visible = LStorage.Posts.WikiExcerpt;
-  if (visible) $preview.addClass("open");
+  switch (visible) {
+    case 1: {
+      $preview.addClass("open");
+      break;
+    }
+    case 2: {
+      $preview.addClass("hidden");
+      break;
+    }
+  }
+
   window.setTimeout(() => { // Disable the rollout on first load
     $preview.removeClass("loading");
   }, 250);
 
+  // Toggle the excerpt box open / closed
   $($preview.find("h3.wiki-excerpt-toggle")).on("click", (event) => {
     event.preventDefault();
 
     visible = !visible;
     $preview.toggleClass("open", visible);
-    LStorage.Posts.WikiExcerpt = visible;
+    LStorage.Posts.WikiExcerpt = Number(visible);
+
+    return false;
+  });
+
+  // Hide the excerpt box entirely
+  $preview.find("button.wiki-excerpt-dismiss").on("click", (event) => {
+    event.preventDefault();
+
+    $preview.addClass("hidden");
+    LStorage.Posts.WikiExcerpt = 2;
 
     return false;
   });

app/javascript/src/javascripts/themes.js

@@ -34,9 +34,26 @@ Theme.initialize_selector = function () {
   }
 };
 
+Theme.initialize_buttons = function () {
+  if (!LStorage.isAvailable()) return;
+
+  $("#mascot-value").text(LStorage.Site.Mascot);
+  $("#mascot-reset").on("click", () => {
+    LStorage.Site.Mascot = 0;
+    $("#mascot-value").text(LStorage.Site.Mascot);
+  });
+
+  $("#wiki-excerpt-value").text(LStorage.Posts.WikiExcerpt);
+  $("#wiki-excerpt-reset").on("click", () => {
+    LStorage.Posts.WikiExcerpt = 1;
+    $("#wiki-excerpt-value").text(LStorage.Posts.WikiExcerpt);
+  });
+};
+
 $(() => {
-  if (Page.matches("static", "theme"))
+  if (!Page.matches("static", "theme")) return;
-    Theme.initialize_selector();
+  Theme.initialize_selector();
+  Theme.initialize_buttons();
 });
 
 export default Theme;

app/javascript/src/javascripts/utility/storage.js

@@ -86,8 +86,8 @@ LStorage.Posts = {
   /** @returns {number} ID of the user's selected set */
   Set: ["set", 0],
 
-  /** @returns {boolean} True if the wiki excerpt should be visible */
+  /** @returns {number} 0: collapsed / 1: visible / 2: permanently hidden */
-  WikiExcerpt: ["e6.posts.wiki", true],
+  WikiExcerpt: ["e6.posts.wiki", 1],
 
   /** @returns {boolean} True if the search should be displayed in fullscreen */
   Fullscreen: ["e6.posts.fusk", false],

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

@@ -7,6 +7,9 @@
   $button-background-hover: themed("color-section-lighten-10");
   $button-text-color: themed("color-text");
 
+  $button-stealth-color: themed("color-link");
+  $button-stealth-color-hover: themed("color-link-hover");
+
   display: flex;
   gap: st-value(100) / 4;
   border-radius: radius(025);
@@ -50,10 +53,14 @@
     padding: (st-value(100) / 2) 0;
 
     svg { background: $button-background; }
-    span { color: themed("color-link"); }
+    span { color: $button-stealth-color; }
     &:hover {
       svg { background: $button-background-hover; }
-      span { color: themed("color-link-hover"); }
+      span { color: $button-stealth-color-hover; }
     }
   }
+
+  &.icon {
+    padding: (st-value(100) / 2) 0;
+  }
 }

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

@@ -196,22 +196,26 @@ body.c-posts.a-index[data-st-fullscreen="true"] {
   background: themed("color-section");
   border-radius: 0.25rem;
 
+  &.hidden { display: none; }
+
   // header
   h3 {
+    display: flex;
+    align-items: center;
+
+    font-size: 1rem;
+    padding: 0.5rem;
+
     cursor: pointer;
-    padding: 0.5rem 1rem 0.5rem 1.5rem;
-
-    &::after {
-      @include font-awesome-icon;
-      content: unicode("f0da");
 
+    & > svg {
       transition: transform 0.25s;
 
-      position: absolute;
+      height: 1.5rem;
-      top: 0;
+      width: 1.5rem;
-      left: 0;
-      padding: 0.5rem;
     }
+
+    .wiki-excerpt-dismiss { margin-left: auto; }
   }
 
   // body
@@ -221,6 +225,7 @@ body.c-posts.a-index[data-st-fullscreen="true"] {
     background-clip: text;
     color: transparent;
 
+    min-height: 0rem;
     max-height: 0rem;
     max-width: 50rem;
     overflow: hidden;
@@ -268,9 +273,10 @@ body.c-posts.a-index[data-st-fullscreen="true"] {
   }
 
   &.open{
-    .wiki-excerpt-toggle::after { transform: rotate(90deg); }
+    .wiki-excerpt-toggle svg { transform: rotate(90deg); }
     .styled-dtext {
       max-height: 10rem;
+      min-height: 2rem;
     }
     .wiki-excerpt-readmore { visibility: visible; }
   }

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

@@ -1,12 +1,12 @@
 .theme-form {
   display: grid;
   grid-template-columns: 1fr;
-  gap: 0.5em 1em;
+  gap: 0.5rem 1rem;
 
   @include window-larger-than(30rem) {
     grid-template-columns: min-content auto;
     max-width: 30rem;
-    gap: 1em;
+    gap: 1rem;
     
     h3, br, p.theme-info { grid-column: 1 / -1; }
     label { text-align: right; }
@@ -17,3 +17,13 @@
   h3 { margin-top: 0.5em; }
   .hint { max-width: unset; }
 }
+
+.theme-variable-form {
+  display: grid;
+  grid-template-columns: auto min-content min-content;
+  gap: 0.5rem 1rem;
+  max-width: 30rem;
+
+  h3 { grid-column: 1 / -1;}
+  label, span { align-content: center}
+}

app/views/posts/partials/index/_posts.html.erb

@@ -1,7 +1,13 @@
 <div id="posts" class="post-index-gallery user-disable-cropped-<%= Danbooru.config.enable_image_cropping? && CurrentUser.user.disable_cropped_thumbnails? %>">
   <% if @wiki_text.present? %>
     <section class="wiki-excerpt loading">
-      <h3 role="button" class="wiki-excerpt-toggle"><%= @wiki_page.pretty_title %></h3>
+      <h3 role="button" class="wiki-excerpt-toggle">
+        <%= svg_icon(:chevron_right) %>
+        <span><%= @wiki_page.pretty_title %></span>
+        <button class="st-button icon wiki-excerpt-dismiss">
+          <%= svg_icon(:times) %>
+        </button>
+      </h3>
       <%= format_text(@wiki_text, allow_color: true, max_thumbs: 0) %>
       <a href="<%= wiki_page_path(@wiki_page) %>" class="wiki-excerpt-readmore"><span>Read More</span></a>
     </section>

app/views/static/theme.html.erb

@@ -75,6 +75,26 @@
   
 </div>
 
+
+<div class="simple_form theme-variable-form">
+  <h3>Variables</h3>
+
+  <label for="mascot-reset">Mascot</label>
+  <span id="mascot-value"></span>
+  <button class="st-button" id="mascot-reset">
+    <%= svg_icon(:reset) %>
+    Reset 
+  </button>
+
+  <label for="wiki-excerpt-reset">Wiki Excerpt</label>
+  <span id="wiki-excerpt-value"></span>
+  <button class="st-button" id="wiki-excerpt-reset">
+    <%= svg_icon(:reset) %>
+    Reset 
+  </button>
+
+</div>
+
 <% content_for(:page_title) do %>
   Themes
 <% end %>