diff options
author | Dennis Tang <dennis@dennistang.net> | 2018-09-06 07:27:39 +0000 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2018-09-06 07:27:39 +0000 |
commit | ec4ad656f03f6a648867cc70b3e076768615919c (patch) | |
tree | 1fbac0db493df06095acebaf32752682785f2577 /app/assets/javascripts/read_more.js | |
parent | d32cec18cac7042ee7a00426ce79f048b3add697 (diff) | |
download | gitlab-ce-ec4ad656f03f6a648867cc70b3e076768615919c.tar.gz |
Resolve "Improve project overview UI"
Diffstat (limited to 'app/assets/javascripts/read_more.js')
-rw-r--r-- | app/assets/javascripts/read_more.js | 41 |
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 }, + ); + }); +} |