Highlights: toggle long context

assets/controllers/utility/show_more_controller.js

@@ -0,0 +1,19 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+    static targets = ["preview", "full", "button"];
+
+    toggle(event) {
+        event?.preventDefault?.();
+        if (this.fullTarget.style.display === "none") {
+            this.fullTarget.style.display = "";
+            this.previewTarget.style.display = "none";
+            this.buttonTarget.textContent = "Show less";
+        } else {
+            this.fullTarget.style.display = "none";
+            this.previewTarget.style.display = "";
+            this.buttonTarget.textContent = "Show more";
+        }
+    }
+}
+

templates/pages/article.html.twig

@@ -234,7 +234,7 @@
                                 {{ highlight.created_at|date('M j') }}
                             </small>
                         </div>
-                        <div class="highlight-content-compact">
+
                         {% if highlight.context %}
                             {% set htmlContext = highlight.context|markdown_to_html %}
                             {% if highlight.content in highlight.context %}
@@ -246,9 +246,25 @@
                                 <mark class="highlight-mark-compact">{{ highlight.content }}</mark>
                             {% endif %}
                         {% else %}
-                                <mark class="highlight-mark-compact">{{ highlight.content }}</mark>
-                            {% endif %}
+                            {% set charLimit = 450 %}
+                            {% set content = highlight.content %}
+                            {% if content|length > charLimit %}
+                                <div data-utility--show-more-target="preview">
+                                    {{ content|slice(0, charLimit) ~ '…' }}
+                                </div>
+                                <div data-utility--show-more-target="full" style="display:none;">
+                                    {{ content }}
                                 </div>
+                                <button type="button"
+                                        class="btn btn-link btn-sm p-0 mt-1"
+                                        data-utility--show-more-target="button"
+                                        data-action="utility--show-more#toggle">
+                                    Show more
+                                </button>
+                            {% else %}
+                                <mark class="highlight-mark-compact">{{ content }}</mark>
+                            {% endif %}
+                        {% endif %}
                     </div>
                 {% endfor %}
             </div>