Add: Toggleable selftext/description

nilfoer · Jul 20, 2024 · 1f184e8 · 1f184e8
1 parent e879c42
commit 1f184e8
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 6 deletions.
diff --git a/gwaripper_webGUI/static/gwaripper.js b/gwaripper_webGUI/static/gwaripper.js
@@ -59,4 +59,20 @@ $(document).ready(function() {
             }
         });
     });
+    $('.text-toggle').click(function(event) {
+        let self = $(event.currentTarget)
+        let text_container = self.next();
+        self.hide();
+        text_container.show();
+    });
+    $('.toggle-text-container').click(function(event) {
+        let self = $(event.currentTarget)
+        let toggle_text = self.prev();
+        let selection = window.getSelection();
+        if(selection.toString().length === 0) {
+            // only when not selecting text
+            self.hide();
+            toggle_text.show();
+        }
+    });
 });
diff --git a/gwaripper_webGUI/static/style.css b/gwaripper_webGUI/static/style.css
@@ -498,6 +498,12 @@ select:-webkit-autofill:focus {
 .upvote-icon {
     color: #e8e8e8;
 }
+.text-toggle {
+    display: none;
+}
+.toggle-text-container {
+    display: block;
+}
 input[type=submit] {
     border: none;
     color: #fff;

diff --git a/gwaripper_webGUI/templates/components/entry_expandable.html b/gwaripper_webGUI/templates/components/entry_expandable.html
@@ -54,19 +54,25 @@
                 <br/><br/>
                 <h2><b>Selftext:</b></h2>
                 {% if entry.reddit_selftext %}
-                    {% for ln in entry.reddit_selftext.strip().splitlines() %}
-                        {{ ln }}<br/>
-                    {% endfor %}
+                    <a class="text-toggle">Click to toggle...</a>
+                    <div class="toggle-text-container">
+                        {% for ln in entry.reddit_selftext.strip().splitlines() %}
+                            {{ ln }}<br/>
+                        {% endfor %}
+                    </div>
                 {% else %}
                     <span title="Press the text icon on the right to try to embed it from disk!">
                         Missing or not in DB!</span><br/>
                 {% endif %}
                 <br/><br/>
                 <h2><b>Description:</b></h2>
                 {% if entry.description %}
-                    {% for ln in entry.description.splitlines() %}
-                        {{ ln }}<br/>
-                    {% endfor %}
+                    <a class="text-toggle">Click to toggle...</a>
+                    <div class="toggle-text-container">
+                        {% for ln in entry.description.splitlines() %}
+                            {{ ln }}<br/>
+                        {% endfor %}
+                    </div>
                 {% else %}
                     Missing!<br/>
                 {% endif %}