[Themes] Add a toggle for WikiExcerpt in theme settings (#914)

app/javascript/src/javascripts/post_search.js

@@ -71,7 +71,7 @@ PostSearch.initialize_controls = function () {
   let stickySearch = LStorage.Posts.StickySearch;
   $("#search-sticky").on("click", () => {
     stickySearch = !stickySearch;
-    $("body").attr("data-st-stickysearch", stickySearch);
+    $("body").attr("data-st-ssearch", stickySearch);
     LStorage.Posts.StickySearch = stickySearch;
   });
 };

app/javascript/src/javascripts/themes.js

@@ -3,18 +3,24 @@ import LStorage from "./utility/storage";
 
 const Theme = {};
 
-Theme.Values = ["Main", "Extra", "StickyHeader", "ForumNotif", "Palette", "Navbar", "Gestures"];
+Theme.Values = {
+  "Theme": ["Main", "Extra", "Palette", "StickyHeader", "Navbar", "Gestures", "ForumNotif"],
+  "Posts": ["WikiExcerpt", "StickySearch"],
+};
 
-for (const one of Theme.Values) {
+for (const [label, settings] of Object.entries(Theme.Values)) {
+  for (const one of settings) {
     Object.defineProperty(Theme, one, {
       get () { return LStorage.Theme[one]; },
       set (value) {
-      // No value checking, we die like men
-      LStorage.Theme[one] = value;
+        // This has the unintended side effect of setting
+        // attribute values that don't exist on the body.
+        LStorage[label][one] = value;
         $("body").attr("data-th-" + one.toLowerCase(), value);
       },
     });
   }
+}
 
 Theme.initialize_selector = function () {
   if (!LStorage.isAvailable()) {
@@ -24,11 +30,13 @@ Theme.initialize_selector = function () {
     return false;
   }
 
-  for (const one of Theme.Values) {
-    $("#theme_" + one.toLowerCase())
-      .val(LStorage.Theme[one] + "")
+  for (const [label, settings] of Object.entries(Theme.Values)) {
+    for (const one of settings)
+      $(`#${label}_${one}`)
+        .val(LStorage[label][one] + "")
         .on("change", (event) => {
           const data = event.target.value;
+          console.log("change", one, data);
           Theme[one] = data;
         });
   }
@@ -42,12 +50,6 @@ Theme.initialize_buttons = function () {
     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);
-  });
 };
 
 $(() => {

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

@@ -93,7 +93,7 @@ LStorage.Posts = {
   Fullscreen: ["e6.posts.fusk", false],
 
   /** @returns {boolean} True if the search should be displayed in fullscreen */
-  StickySearch: ["e6.posts.stickysearch", false],
+  StickySearch: ["e6.posts.ssearch", false],
 };
 StorageUtils.bootstrapMany(LStorage.Posts);
 

app/javascript/src/styles/views/posts/_posts.scss

@@ -13,7 +13,7 @@
   @include with-setting("fullscreen", "true") {
     @import "index/partials/fullscreen";
   }
-  @include with-setting("stickysearch", "true") {
+  @include with-setting("ssearch", "true") {
     @import "index/partials/sticky";
   }
 }

app/views/layouts/_theme_include.html.erb

@@ -12,7 +12,7 @@
 
       // Settings
       "st-fullscreen": localStorage.getItem("e6.posts.fusk") || false,
-      "st-stickysearch": localStorage.getItem("e6.posts.stickysearch") || false,
+      "st-ssearch": localStorage.getItem("e6.posts.ssearch") || false,
     };
 
     var b = document.body;

app/views/static/theme.html.erb

@@ -16,8 +16,8 @@
     This means that they will not persist across multiple devices, or in incognito mode.
   </p>
 
-    <label for="theme_main">Theme</label>
-    <select id="theme_main">
+    <label for="Theme_Main">Theme</label>
+    <select id="Theme_Main">
       <option value="hexagon">Hexagon</option>
       <option value="bloodlust">Bloodlust</option>
       <option value="pony">Pony</option>
@@ -25,8 +25,8 @@
       <option value="hotdog">Hotdog</option>
     </select>
 
-    <label for="theme_extra">Embellishments</label>
-    <select id="theme_extra">
+    <label for="Theme_Extra">Embellishments</label>
+    <select id="Theme_Extra">
       <option value="none">(None)</option>
       <option value="aurora">Aurora</option>
       <option value="autumn">Autumn</option>
@@ -37,42 +37,55 @@
       <option value="winter">Eternal Winter</option>
     </select>
 
-    <label for="theme_stickyheader">Sticky Header</label>
-    <select id="theme_stickyheader">
-      <option value="false">Disabled</option>
-      <option value="true">Enabled</option>
-    </select>
-
-    <label for="theme_forumnotif">Forum Activity Dot</label>
-    <select id="theme_forumnotif">
-      <option value="false">Disabled</option>
-      <option value="true">Enabled</option>
-    </select>
-
   <h3>Accessibility</h3>
-    <label for="theme_palette">Palette</label>
-    <select id="theme_palette">
+    <label for="Theme_Palette">Palette</label>
+    <select id="Theme_Palette">
       <option value="default">Default</option>
       <option value="deut">Protanopia & Deuteranopia</option>
       <option value="trit">Tritanopia</option>
     </select>
 
+  <h3>Features</h3>
+    <label for="Theme_ForumNotif">Forum Activity Dot</label>
+    <select id="Theme_ForumNotif">
+      <option value="false">Disabled</option>
+      <option value="true">Enabled</option>
+    </select>
+
+    <label for="Posts_WikiExcerpt">Wiki Excerpt</label>
+    <select id="Posts_WikiExcerpt">
+      <option value="0">Collapsed</option>
+      <option value="1">Expanded</option>
+      <option value="2">Disabled</option>
+    </select>
+
   <h3>Navigation</h3>
-    <label for="theme_navbar">Navbar location</label>
-    <select id="theme_navbar">
+    <label for="Theme_StickyHeader">Sticky Header</label>
+    <select id="Theme_StickyHeader">
+      <option value="false">Disabled</option>
+      <option value="true">Enabled</option>
+    </select>
+
+    <label for="Posts_StickySearch">Sticky Searchbar</label>
+    <select id="Posts_StickySearch">
+      <option value="false">Disabled</option>
+      <option value="true">Enabled</option>
+    </select>
+
+    <label for="Theme_Navbar">Navbar location</label>
+    <select id="Theme_Navbar">
       <option value="top">Top (default)</option>
       <option value="bottom">Bottom</option>
       <option value="both">Both</option>
       <option value="none">Off (not recommended)</option>
     </select>
 
-    <label for="theme_gestures">Mobile Gestures</label>
-    <select id="theme_gestures">
+    <label for="Theme_Gestures">Mobile Gestures</label>
+    <select id="Theme_Gestures">
       <option value="false">Disabled</option>
       <option value="true">Enabled</option>
     </select>
     <div class="hint">Swipe left for next page/image. Swipe right for previous page/image.</div>
-  
 </div>
 
 
@@ -85,14 +98,6 @@
     <%= 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 %>