D3Public
/
daux.io
8
0
Fork 0
Code Pull Requests Releases Activity

Compile daux's JavaScript. Lazy load Highlight.js

This commit is contained in:
Stéphane Goetz 2019-09-20 23:10:01 +02:00
parent 94893a2c7a
commit b06009ebbd
16 changed files with 273 additions and 188 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
Dockerfile
View File

@ -22,6 +22,7 @@ COPY bin/ /daux/bin/
COPY libs/ /daux/libs/
COPY templates/ /daux/templates/
COPY themes/ /daux/themes/
COPY _libraries/ /daux/_libraries/
COPY search/ /daux/search/
COPY global.json /daux/global.json
COPY index.php /daux/index.php

0
themes/daux/js/README.md → _libraries/README.md
View File

2
_libraries/highlight.pack.js Normal file
View File

File diff suppressed because one or more lines are too long

5
crafty.config.js
View File

@ -26,6 +26,11 @@ module.exports = {
runner: "rollup",
source: "src/js/search/index.js",
destination: "search/search.min.js"
},
theme_daux: {
runner: "rollup",
source: "src/js/theme_daux/index.js",
destination: "themes/daux/js/daux.min.js"
}
},
css: {

5
libs/Format/HTML/Generator.php
View File

@ -72,6 +72,11 @@ class Generator implements \Todaymade\Daux\Format\Base\Generator, LiveGenerator
$this->generateRecursive($this->daux->tree, $destination, $params, $output, $width, $params['html']['search']);
GeneratorHelper::copyRecursive(
$this->daux->local_base . DIRECTORY_SEPARATOR . '_libraries' . DIRECTORY_SEPARATOR,
$destination . DIRECTORY_SEPARATOR . '_libraries'
);
if ($params['html']['search']) {
GeneratorHelper::copyRecursive(
$this->daux->local_base . DIRECTORY_SEPARATOR . 'search' . DIRECTORY_SEPARATOR,

153
src/js/theme_daux/code_toggle.js Normal file
View File

@ -0,0 +1,153 @@
const codeBlocks = document.querySelectorAll(".s-content pre");
const toggleCodeSection = document.querySelector(".CodeToggler");
function setCodeBlockStyle(
codeBlockState,
toggleCodeBlockBtnList,
toggleCodeBlockBtnFloat,
toggleCodeBlockBtnBelow,
toggleCodeBlockBtnHide,
codeBlockView
) {
for (let a = 0; a < toggleCodeBlockBtnList.length; a++) {
toggleCodeBlockBtnList[a].classList.remove("Button--active");
}
let hidden;
switch (codeBlockState) {
case true: // Show code blocks below (flowed); checkbox
hidden = false;
break;
case false: // Hidden code blocks; checkbox
hidden = true;
break;
case 2: // Show code blocks inline (floated)
toggleCodeBlockBtnFloat.classList.add("Button--active");
codeBlockView.classList.add("Columns__right--float");
codeBlockView.classList.remove("Columns__right--full");
hidden = false;
break;
case 1: // Show code blocks below (flowed)
case "checked":
toggleCodeBlockBtnBelow.classList.add("Button--active");
codeBlockView.classList.remove("Columns__right--float");
codeBlockView.classList.add("Columns__right--full");
hidden = false;
break;
case 0: // Hidden code blocks
default:
toggleCodeBlockBtnHide.classList.add("Button--active");
codeBlockView.classList.remove("Columns__right--float");
codeBlockView.classList.add("Columns__right--full");
hidden = true;
break;
}
for (let a = 0; a < codeBlocks.length; a++) {
if (hidden) {
codeBlocks[a].classList.add("Hidden");
} else {
codeBlocks[a].classList.remove("Hidden");
}
}
try {
localStorage.setItem("codeBlockState", +codeBlockState);
} catch (e) {
// local storage operations can fail with the file:// protocol
}
}
function enableToggler() {
const toggleCodeBlockBtnList = toggleCodeSection.querySelectorAll(
".CodeToggler__button"
);
const toggleCodeBlockBtnSet = toggleCodeSection.querySelector(
".CodeToggler__button--main"
); // available when floating is disabled
const toggleCodeBlockBtnHide = toggleCodeSection.querySelector(
".CodeToggler__button--hide"
);
const toggleCodeBlockBtnBelow = toggleCodeSection.querySelector(
".CodeToggler__button--below"
);
const toggleCodeBlockBtnFloat = toggleCodeSection.querySelector(
".CodeToggler__button--float"
);
const codeBlockView = document.querySelector(".Columns__right");
const floating = document.body.classList.contains("with-float");
const setStyle = style => {
setCodeBlockStyle(
style,
toggleCodeBlockBtnList,
toggleCodeBlockBtnFloat,
toggleCodeBlockBtnBelow,
toggleCodeBlockBtnHide,
codeBlockView
);
};
if (floating) {
toggleCodeBlockBtnHide.addEventListener(
"click",
() => {
setStyle(0);
},
false
);
toggleCodeBlockBtnBelow.addEventListener(
"click",
() => {
setStyle(1);
},
false
);
toggleCodeBlockBtnFloat.addEventListener(
"click",
() => {
setStyle(2);
},
false
);
} else {
toggleCodeBlockBtnSet.addEventListener(
"change",
ev => {
setStyle(ev.target.checked);
},
false
);
}
let codeBlockState = null;
try {
codeBlockState = localStorage.getItem("codeBlockState");
} catch (e) {
// local storage operations can fail with the file:// protocol
}
if (codeBlockState) {
codeBlockState = parseInt(codeBlockState, 10);
} else {
codeBlockState = floating ? 2 : 1;
}
if (!floating) {
codeBlockState = !!codeBlockState;
}
setCodeBlockStyle(
codeBlockState,
toggleCodeBlockBtnList,
toggleCodeBlockBtnFloat,
toggleCodeBlockBtnBelow,
toggleCodeBlockBtnHide,
codeBlockView
);
}
if (toggleCodeSection) {
if (codeBlocks.length) {
enableToggler();
} else {
toggleCodeSection.classList.add("Hidden");
}
}

19
src/js/theme_daux/hamburger.js Normal file
View File

@ -0,0 +1,19 @@
const trigger = document.querySelector(".Collapsible__trigger");
if (trigger) {
const content = document.querySelector(".Collapsible__content");
trigger.addEventListener("click", ev => {
if (content.classList.contains("Collapsible__content--open")) {
content.style.height = 0;
content.classList.remove("Collapsible__content--open");
} else {
content.style.transitionDuration = `${Math.max(
content.scrollHeight,
150
)}ms`;
content.style.height = `${content.scrollHeight}px`;
content.classList.add("Collapsible__content--open");
}
});
}

12
src/js/theme_daux/highlight.js Normal file
View File

@ -0,0 +1,12 @@
const codeBlocks = document.querySelectorAll("pre > code:not(.hljs)");
if (codeBlocks.length) {
const head = document.getElementsByTagName("head")[0],
script = document.createElement("script");
script.type = "text/javascript";
script.async = true;
script.src = `${window.base_url}_libraries/highlight.pack.js`;
script.onload = function(src) {
[].forEach.call(codeBlocks, window.hljs.highlightBlock);
};
head.appendChild(script);
}

6
src/js/theme_daux/index.js Normal file
View File

@ -0,0 +1,6 @@
/** global localStorage, hljs */
import "./code_toggle.js";
import "./hamburger.js";
import "./highlight.js";
import "./menu.js";

62
src/js/theme_daux/menu.js Normal file
View File

@ -0,0 +1,62 @@
function setHeightToAuto(ev) {
if (ev.target.style.height !== "0px") {
ev.target.style.height = "auto";
}
ev.target.removeEventListener("transitionend", setHeightToAuto);
}
function toggleSubMenu(ev) {
if (ev.preventDefault !== undefined) {
ev.preventDefault();
}
const parent = ev.target.parentNode.parentNode;
const subNav = parent.querySelector("ul.Nav");
if (
ev.preventDefault !== undefined &&
parent.classList.contains("Nav__item--open")
) {
// Temporarily set the height so the transition can work.
subNav.style.height = `${subNav.scrollHeight}px`;
subNav.style.transitionDuration = `${Math.max(
subNav.scrollHeight,
150
)}ms`;
subNav.style.height = "0px";
parent.classList.remove("Nav__item--open");
} else {
if (ev.preventDefault === undefined) {
// When running at page load the transitions don't need to fire and
// the classList doesn't need to be altered.
subNav.style.height = "auto";
} else {
subNav.style.transitionDuration = `${Math.max(
subNav.scrollHeight,
150
)}ms`;
// After the transition finishes set the height to auto so child
// menus can expand properly.
subNav.addEventListener("transitionend", setHeightToAuto);
subNav.style.height = `${subNav.scrollHeight}px`;
parent.classList.add("Nav__item--open");
}
}
}
const navItems = document.querySelectorAll(
".Nav__item.has-children i.Nav__arrow"
);
// Go in reverse here because on page load the child nav items need to be
// opened first before their parents so the height on the parents can be
// calculated properly.
for (let i = navItems.length - 1, cur; i >= 0; i--) {
cur = navItems[i];
cur.addEventListener("click", toggleSubMenu);
if (cur.parentNode.parentNode.classList.contains("Nav__item--open")) {
toggleSubMenu({ target: cur });
}
}

5
templates/layout/00_layout.php
View File

@ -27,7 +27,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- JS -->
<script>document.documentElement.classList.remove('no-js');</script>
<script>
window.base_url = "<?php echo $base_url?>";
document.documentElement.classList.remove('no-js');
</script>
<!-- Font -->
<?php foreach ($params['theme']['fonts'] as $font) {

3
themes/daux/config.json
View File

@ -1,8 +1,7 @@
{
"favicon": "<theme_url>img/favicon.png",
"js": [
"<theme_url>js/highlight.pack.js",
"<theme_url>js/daux.js"
"<theme_url>js/daux.min.js"
],
"variants": {
"blue": {

182
themes/daux/js/daux.js
View File

@ -1,182 +0,0 @@
/** global localStorage, hljs */
if (hljs) {
hljs.initHighlightingOnLoad();
}
(function() {
var codeBlocks = document.querySelectorAll(".s-content pre");
var toggleCodeSection = document.querySelector(".CodeToggler");
if (!toggleCodeSection) {
return;
} else if (!codeBlocks.length) {
toggleCodeSection.classList.add("Hidden");
return;
}
var toggleCodeBlockBtnList = toggleCodeSection.querySelectorAll(".CodeToggler__button");
var toggleCodeBlockBtnSet = toggleCodeSection.querySelector(".CodeToggler__button--main"); // available when floating is disabled
var toggleCodeBlockBtnHide = toggleCodeSection.querySelector(".CodeToggler__button--hide");
var toggleCodeBlockBtnBelow = toggleCodeSection.querySelector(".CodeToggler__button--below");
var toggleCodeBlockBtnFloat = toggleCodeSection.querySelector(".CodeToggler__button--float");
var codeBlockView = document.querySelector(".Columns__right");
var floating = document.body.classList.contains("with-float");
function setCodeBlockStyle(codeBlockState) {
for (var a = 0; a < toggleCodeBlockBtnList.length; a++) {
toggleCodeBlockBtnList[a].classList.remove("Button--active");
}
switch (codeBlockState) {
case true: // Show code blocks below (flowed); checkbox
var hidden = false;
break;
case false: // Hidden code blocks; checkbox
var hidden = true;
break;
case 2: // Show code blocks inline (floated)
toggleCodeBlockBtnFloat.classList.add("Button--active");
codeBlockView.classList.add("Columns__right--float");
codeBlockView.classList.remove("Columns__right--full");
var hidden = false;
break;
case 1: // Show code blocks below (flowed)
case "checked":
toggleCodeBlockBtnBelow.classList.add("Button--active");
codeBlockView.classList.remove("Columns__right--float");
codeBlockView.classList.add("Columns__right--full");
var hidden = false;
break;
case 0: // Hidden code blocks
default:
toggleCodeBlockBtnHide.classList.add("Button--active");
codeBlockView.classList.remove("Columns__right--float");
codeBlockView.classList.add("Columns__right--full");
var hidden = true;
break;
}
for (var a = 0; a < codeBlocks.length; a++) {
if (hidden) {
codeBlocks[a].classList.add("Hidden");
} else {
codeBlocks[a].classList.remove("Hidden");
}
}
try {
localStorage.setItem("codeBlockState", +codeBlockState);
} catch (e) {
// local storage operations can fail with the file:// protocol
}
}
if (!floating) {
toggleCodeBlockBtnSet.addEventListener("change", function(ev) {setCodeBlockStyle(ev.target.checked);}, false);
} else {
toggleCodeBlockBtnHide.addEventListener("click", function() {setCodeBlockStyle(0);}, false);
toggleCodeBlockBtnBelow.addEventListener("click", function() {setCodeBlockStyle(1);}, false);
toggleCodeBlockBtnFloat.addEventListener("click", function() {setCodeBlockStyle(2);}, false);
}
try {
var codeBlockState = localStorage.getItem("codeBlockState");
} catch (e) {
// local storage operations can fail with the file:// protocol
var codeBlockState = null;
}
if (!codeBlockState) {
codeBlockState = floating ? 2 : 1;
} else {
codeBlockState = parseInt(codeBlockState);
}
if (!floating) {
codeBlockState = !!codeBlockState;
}
setCodeBlockStyle(codeBlockState);
})();
(function() {
function debounce(func, wait) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
};
var navItems = document.querySelectorAll('.Nav__item.has-children i.Nav__arrow');
function _toggleSubMenu(ev) {
if (ev.preventDefault !== undefined) {
ev.preventDefault();
}
var parent = ev.target.parentNode.parentNode;
var subNav = parent.querySelector('ul.Nav');
if (ev.preventDefault !== undefined && parent.classList.contains('Nav__item--open')) {
// Temporarily set the height so the transition can work.
subNav.style.height = subNav.scrollHeight + 'px';
subNav.style.transitionDuration = Math.max(subNav.scrollHeight, 150) + 'ms';
subNav.style.height = '0px';
parent.classList.remove('Nav__item--open');
} else {
if (ev.preventDefault !== undefined) {
subNav.style.transitionDuration = Math.max(subNav.scrollHeight, 150) + 'ms';
// After the transition finishes set the height to auto so child
// menus can expand properly.
subNav.addEventListener('transitionend', _setHeightToAuto);
subNav.style.height = subNav.scrollHeight + 'px';
parent.classList.add('Nav__item--open');
} else {
// When running at page load the transitions don't need to fire and
// the classList doesn't need to be altered.
subNav.style.height = 'auto';
}
}
}
function _setHeightToAuto(ev) {
if (ev.target.style.height !== '0px') {
ev.target.style.height = 'auto';
}
ev.target.removeEventListener('transitionend', _setHeightToAuto);
}
// Go in reverse here because on page load the child nav items need to be
// opened first before their parents so the height on the parents can be
// calculated properly.
for (var i = navItems.length - 1, cur; i >= 0; i--) {
cur = navItems[i];
cur.addEventListener('click', _toggleSubMenu);
if (cur.parentNode.parentNode.classList.contains('Nav__item--open')) {
_toggleSubMenu({ target: cur });
}
}
})();
(function() {
var trigger = document.querySelector('.Collapsible__trigger');
if (!trigger) {
return;
}
content = document.querySelector('.Collapsible__content');
trigger.addEventListener('click', function(ev) {
if (content.classList.contains('Collapsible__content--open')) {
content.style.height = 0;
content.classList.remove('Collapsible__content--open');
} else {
content.style.transitionDuration = Math.max(content.scrollHeight, 150) + 'ms';
content.style.height = content.scrollHeight + 'px';
content.classList.add('Collapsible__content--open');
}
});
})();

2
themes/daux/js/daux.min.js vendored Normal file
View File

@ -0,0 +1,2 @@
var e=document.querySelectorAll(".s-content pre"),t=document.querySelector(".CodeToggler");function a(t,a,o,l,n,s){for(var c=0;c<a.length;c++)a[c].classList.remove("Button--active");var i;switch(t){case!0:i=!1;break;case!1:i=!0;break;case 2:o.classList.add("Button--active"),s.classList.add("Columns__right--float"),s.classList.remove("Columns__right--full"),i=!1;break;case 1:case"checked":l.classList.add("Button--active"),s.classList.remove("Columns__right--float"),s.classList.add("Columns__right--full"),i=!1;break;case 0:default:n.classList.add("Button--active"),s.classList.remove("Columns__right--float"),s.classList.add("Columns__right--full"),i=!0}for(var r=0;r<e.length;r++)i?e[r].classList.add("Hidden"):e[r].classList.remove("Hidden");try{localStorage.setItem("codeBlockState",+t)}catch(e){}}t&&(e.length?function(){var e=t.querySelectorAll(".CodeToggler__button"),o=t.querySelector(".CodeToggler__button--main"),l=t.querySelector(".CodeToggler__button--hide"),n=t.querySelector(".CodeToggler__button--below"),s=t.querySelector(".CodeToggler__button--float"),c=document.querySelector(".Columns__right"),i=document.body.classList.contains("with-float"),r=function(t){a(t,e,s,n,l,c)};i?(l.addEventListener("click",(function(){r(0)}),!1),n.addEventListener("click",(function(){r(1)}),!1),s.addEventListener("click",(function(){r(2)}),!1)):o.addEventListener("change",(function(e){r(e.target.checked)}),!1);var d=null;try{d=localStorage.getItem("codeBlockState")}catch(e){}d=d?parseInt(d,10):i?2:1,i||(d=!!d),a(d,e,s,n,l,c)}():t.classList.add("Hidden"));var o=document.querySelector(".Collapsible__trigger");if(o){var l=document.querySelector(".Collapsible__content");o.addEventListener("click",(function(e){l.classList.contains("Collapsible__content--open")?(l.style.height=0,l.classList.remove("Collapsible__content--open")):(l.style.transitionDuration="".concat(Math.max(l.scrollHeight,150),"ms"),l.style.height="".concat(l.scrollHeight,"px"),l.classList.add("Collapsible__content--open"))}))}var n=document.querySelectorAll("pre > code:not(.hljs)");if(n.length){var s=document.getElementsByTagName("head")[0],c=document.createElement("script");c.type="text/javascript",c.async=!0,c.src="".concat(window.base_url,"_libraries/highlight.pack.js"),c.onload=function(e){[].forEach.call(n,window.hljs.highlightBlock)},s.appendChild(c)}function i(e){"0px"!==e.target.style.height&&(e.target.style.height="auto"),e.target.removeEventListener("transitionend",i)}function r(e){void 0!==e.preventDefault&&e.preventDefault();var t=e.target.parentNode.parentNode,a=t.querySelector("ul.Nav");void 0!==e.preventDefault&&t.classList.contains("Nav__item--open")?(a.style.height="".concat(a.scrollHeight,"px"),a.style.transitionDuration="".concat(Math.max(a.scrollHeight,150),"ms"),a.style.height="0px",t.classList.remove("Nav__item--open")):void 0===e.preventDefault?a.style.height="auto":(a.style.transitionDuration="".concat(Math.max(a.scrollHeight,150),"ms"),a.addEventListener("transitionend",i),a.style.height="".concat(a.scrollHeight,"px"),t.classList.add("Nav__item--open"))}for(var d,u=document.querySelectorAll(".Nav__item.has-children i.Nav__arrow"),h=u.length-1;h>=0;h--)(d=u[h]).addEventListener("click",r),d.parentNode.parentNode.classList.contains("Nav__item--open")&&r({target:d});
//# sourceMappingURL=daux.min.js.map

1
themes/daux/js/daux.min.js.map Normal file
View File

File diff suppressed because one or more lines are too long

3
themes/daux/js/highlight.pack.js
View File

File diff suppressed because one or more lines are too long