parent
8163edc763
commit
11fc8e3a28
@ -1,3 +1,6 @@
|
|||||||
[submodule "themes/hugo-product-launch"]
|
[submodule "themes/hugo-product-launch"]
|
||||||
path = themes/hugo-product-launch
|
path = themes/hugo-product-launch
|
||||||
url = https://github.com/janraasch/hugo-product-launch.git
|
url = https://github.com/janraasch/hugo-product-launch.git
|
||||||
|
[submodule "hugo-universal-collapsible"]
|
||||||
|
path = hugo-universal-collapsible
|
||||||
|
url = git@git.gugelfrei.de:hugo/hugo-universal-collapsible.git
|
||||||
|
@ -0,0 +1 @@
|
|||||||
|
Subproject commit 8051bbbc88d84bf4b91e1e147a20c5b2728291db
|
@ -0,0 +1 @@
|
|||||||
|
../../hugo-universal-collapsible/layouts/shortcodes/collapse
|
@ -0,0 +1 @@
|
|||||||
|
../../hugo-universal-collapsible/layouts/shortcodes/collapse.html
|
@ -0,0 +1,20 @@
|
|||||||
|
.collapseAnchor {
|
||||||
|
text-decoration:none;
|
||||||
|
}
|
||||||
|
/* Might want to redo something similar to ensure the arrows look right */
|
||||||
|
/*.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 > .hugo-collapse-below {
|
||||||
|
position:absolute;
|
||||||
|
top:-999em;
|
||||||
|
left:-999em;
|
||||||
|
}
|
@ -0,0 +1,43 @@
|
|||||||
|
// 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;
|
||||||
|
var a = document.createElement('a');
|
||||||
|
wrap.append(a);
|
||||||
|
a.addEventListener('click', toggleCollapse, false);
|
||||||
|
a.className = 'collapseAnchor';
|
||||||
|
a.href="#"; /* without this it's not keyboard focusable */
|
||||||
|
wrap.classList.add('collapseWrap');
|
||||||
|
// check/set defaults just to be safe
|
||||||
|
if(!wrap.hasAttribute('data-text-open')) {
|
||||||
|
wrap.setAttribute('data-text-open', 'See Less ▲');
|
||||||
|
}
|
||||||
|
if(!wrap.hasAttribute('data-text-closed')) {
|
||||||
|
wrap.setAttribute('data-text-closed', 'See More ▼');
|
||||||
|
}
|
||||||
|
setName(a, wrap);
|
||||||
|
} // for hook
|
||||||
|
function toggleCollapse(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
currParent = e.currentTarget.parentNode;
|
||||||
|
currParent.classList.toggle('closed');
|
||||||
|
setName(e.currentTarget, currParent);
|
||||||
|
} // toggleCollapse
|
||||||
|
};
|
||||||
|
|
||||||
|
function setName(el, parent) {
|
||||||
|
if(parent.classList.contains('closed')) {
|
||||||
|
el.text = parent.getAttribute('data-text-closed');
|
||||||
|
} else {
|
||||||
|
el.text = parent.getAttribute('data-text-open');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if(document.readyState === "complete" ||
|
||||||
|
(document.readyState !== "loading" && !document.documentElement.doScroll)) {
|
||||||
|
callback();
|
||||||
|
} else {
|
||||||
|
document.addEventListener("DOMContentLoaded", callback);
|
||||||
|
}
|
Loading…
Reference in new issue