commit 71eaf1cf2ec3e09418f1b267cf573e421a58c891 Author: Alex Date: Tue Apr 6 11:10:24 2021 +0100 Initial commit diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..a9a0413 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2021 Alexandru-Ioan Pop + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md new file mode 100644 index 0000000..36dc8f1 --- /dev/null +++ b/README.md @@ -0,0 +1,47 @@ +# hugo-universal-collapsible +A Hugo plugin for collapsible sections using only vanilla JavaScript and CSS. + +The tag is split into 2 sections - `above` and `below` the fold. +Arbitrarily complex Markdown and HTML content is supported in either section. You can even nest multiple collapsibles! + +# Installation +Copy the `layouts` and `static` folders to your Hugo site root. Ensure that the CSS and JS files are copied over to your output (`public`) folder when rendering. The expectation is that they will be accessible at `//collapse.`. This can be changed as needed in `collapse.html`. + +If one of the sections (`above`/`below`) contains HTML (e.g. from another shortcode), you might have to enable unsafe rendering in `config.toml` (depending on your Hugo version): + +``` +[markup] + [markup.goldmark] + [markup.goldmark.renderer] + unsafe = true +``` + +# Demo + +``` +{{< collapse >}} +{{< collapse/above >}} +The following section is too long... +{{< /collapse/above >}} +{{< collapse/below >}} +Lorem ipsum dolor sit amet, consectetur adipiscing elit. + + {{< collapse >}} + {{< collapse/above >}} + I'm nested! + {{< /collapse/above >}} + {{< collapse/below >}} + Aenean lacinia condimentum magna ac tincidunt. + {{< /collapse/below >}} + {{< /collapse >}} + +{{< /collapse/below >}} +{{< /collapse >}} +``` + +![demo](demo/demo.gif) + +Credit for JS/CSS: + +Jason Knight +https://levelup.gitconnected.com/collapsible-sections-with-or-without-javascript-3fd871955a9d diff --git a/demo/demo.gif b/demo/demo.gif new file mode 100644 index 0000000..9a24613 Binary files /dev/null and b/demo/demo.gif differ diff --git a/demo/demo.md b/demo/demo.md new file mode 100644 index 0000000..0e98289 --- /dev/null +++ b/demo/demo.md @@ -0,0 +1,18 @@ +{{< collapse >}} +{{< collapse/above >}} +The following section is too long... +{{< /collapse/above >}} +{{< collapse/below >}} +Lorem ipsum dolor sit amet, consectetur adipiscing elit. + + {{< collapse >}} + {{< collapse/above >}} + I'm nested! + {{< /collapse/above >}} + {{< collapse/below >}} + Aenean lacinia condimentum magna ac tincidunt. Donec odio tellus, accumsan eu nibh in, laoreet egestas velit. Nullam sed enim a est ultricies malesuada a in erat. Sed lacinia tortor at ultrices fringilla. Donec sollicitudin vehicula dapibus. Nullam sodales eget orci et viverra. Praesent feugiat sagittis metus. Quisque fringilla, orci eget pretium laoreet, purus neque tempor turpis, quis lobortis ligula lacus eu erat. Nunc sed elementum arcu. Fusce vestibulum risus malesuada congue sagittis. Etiam ac semper dui, ac pretium felis. + {{< /collapse/below >}} + {{< /collapse >}} + +{{< /collapse/below >}} +{{< /collapse >}} diff --git a/layouts/collapse.html b/layouts/collapse.html new file mode 100644 index 0000000..eda6330 --- /dev/null +++ b/layouts/collapse.html @@ -0,0 +1,9 @@ +
+ + {{ if not ($.Page.Scratch.Get "collapseLoaded") }} + {{ $.Page.Scratch.Set "collapseLoaded" 1 }} + + + {{ end}} + {{.Inner}} +
\ No newline at end of file diff --git a/layouts/collapse/above.html b/layouts/collapse/above.html new file mode 100644 index 0000000..593dbc6 --- /dev/null +++ b/layouts/collapse/above.html @@ -0,0 +1,3 @@ +
+ {{.Inner | markdownify }} +
\ No newline at end of file diff --git a/layouts/collapse/below.html b/layouts/collapse/below.html new file mode 100644 index 0000000..6bc1aeb --- /dev/null +++ b/layouts/collapse/below.html @@ -0,0 +1,3 @@ +
+ {{.Inner | markdownify }} +
\ No newline at end of file diff --git a/static/css/collapse.css b/static/css/collapse.css new file mode 100644 index 0000000..451968a --- /dev/null +++ b/static/css/collapse.css @@ -0,0 +1,25 @@ +.collapseAnchor { + text-decoration:none; + color:#EEEEFF; +} +.collapseAnchor:before { + content:"See Less"; +} +.collapseWrap.closed + .collapseAnchor:before { + content:"See More"; +} +.collapseAnchor:after { + content:"\25B2"; + display:inline-block; + padding:0.4em 0 0 0.3em; + vertical-align:top; + font-size:0.625em; +} +.collapseWrap.closed + .collapseAnchor:after { + content:"\25BC"; +} +.collapseWrap.closed > .collapseAfter ~ * { + position:absolute; + top:-999em; + left:-999em; +} \ No newline at end of file diff --git a/static/js/collapse.js b/static/js/collapse.js new file mode 100644 index 0000000..670f41f --- /dev/null +++ b/static/js/collapse.js @@ -0,0 +1,28 @@ +// Handler will be called when the DOM is fully loaded +// So the script can be placed anywhere on the page +var callback = function() { + var collapseHooks = document.getElementsByClassName('collapseAfter'); + for (var hook of collapseHooks) { + var + wrap = hook.parentNode, + a = wrap.parentNode.insertBefore( + document.createElement('a'), + wrap.nextSibling + ); + a.addEventListener('click', toggleCollapse, false); + a.className = 'collapseAnchor'; + a.href="#"; /* without this it's not keyboard focusable */ + wrap.classList.add('closed', 'collapseWrap'); + } // for hook + function toggleCollapse(e) { + e.preventDefault(); + e.currentTarget.previousElementSibling.classList.toggle('closed'); + } // toggleCollapse +}; + +if(document.readyState === "complete" || + (document.readyState !== "loading" && !document.documentElement.doScroll)) { + callback(); +} else { + document.addEventListener("DOMContentLoaded", callback); +}