Resolve "Improve project overview UI"

1 files changed, 41 insertions, 0 deletions

diff --git a/app/assets/javascripts/read_more.js b/app/assets/javascripts/read_more.js
new file mode 100644
index 00000000000..d2d1ac8c76a
--- /dev/null
+++ b/app/assets/javascripts/read_more.js
@@ -0,0 +1,41 @@
+/**
+ * ReadMore
+ *
+ * Adds "read more" functionality to elements.
+ *
+ * Specifically, it looks for a trigger, by default ".js-read-more-trigger", and adds the class
+ * "is-expanded" to the previous element in order to provide a click to expand functionality.
+ *
+ * This is useful for long text elements that you would like to truncate, especially for mobile.
+ *
+ * Example Markup
+ * <div class="read-more-container">
+ *   <p>Some text that should be long enough to have to truncate within a specified container.</p>
+ *   <p>This text will not appear in the container, as only the first line can be truncated.</p>
+ *   <p>This should also not appear, if everything is working correctly!</p>
+ * </div>
+ * <button class="js-read-more-trigger">Read more</button>
+ *
+ */
+export default function initReadMore(triggerSelector = '.js-read-more-trigger') {
+  const triggerEls = document.querySelectorAll(triggerSelector);
+
+  if (!triggerEls) return;
+
+  triggerEls.forEach(triggerEl => {
+    const targetEl = triggerEl.previousElementSibling;
+
+    if (!targetEl) {
+      return;
+    }
+
+    triggerEl.addEventListener(
+      'click',
+      e => {
+        targetEl.classList.add('is-expanded');
+        e.target.remove();
+      },
+      { once: true },
+    );
+  });
+}