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,21 +234,37 @@
                                 {{ highlight.created_at|date('M j') }}
                             </small>
                         </div>
-                        <div class="highlight-content-compact">
+
-                            {% if highlight.context %}
+                        {% if highlight.context %}
-                                {% set htmlContext = highlight.context|markdown_to_html %}
+                            {% set htmlContext = highlight.context|markdown_to_html %}
-                                {% if highlight.content in highlight.context %}
+                            {% if highlight.content in highlight.context %}
-                                    {% set wrapper = '<mark class="highlight-mark-compact">' ~ highlight.content ~ '</mark>' %}
+                                {% set wrapper = '<mark class="highlight-mark-compact">' ~ highlight.content ~ '</mark>' %}
-                                    {% set rendered = htmlContext|replace({ (highlight.content): wrapper }) %}
+                                {% set rendered = htmlContext|replace({ (highlight.content): wrapper }) %}
-                                    {{ rendered|raw }}
+                                {{ rendered|raw }}
-                                {% else %}
-                                    <div class="context-text-compact">{{ htmlContext|raw }}</div>
-                                    <mark class="highlight-mark-compact">{{ highlight.content }}</mark>
-                                {% endif %}
                             {% else %}
+                                <div class="context-text-compact">{{ htmlContext|raw }}</div>
                                 <mark class="highlight-mark-compact">{{ highlight.content }}</mark>
                             {% endif %}
-                        </div>
+                        {% else %}
+                            {% 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>