Skip to content

Commit

Permalink
Refactor js into separate file
Browse files Browse the repository at this point in the history
  • Loading branch information
dpilafian committed Apr 28, 2024
1 parent be6c51a commit edf3379
Show file tree
Hide file tree
Showing 3 changed files with 71 additions and 60 deletions.
22 changes: 20 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,23 +17,40 @@
"metrication",
"units-of-measure"
],
"jshintConfig": {
"esversion": 11,
"strict": "implied",
"eqeqeq": true,
"undef": true,
"unused": true,
"varstmt": true,
"browser": true,
"node": true,
"globals": {
"dna": false
}
},
"runScriptsConfig": {
"clean": [
"rimraf docs"
],
"generated": [
"replacer src/website/article --ext=.html --content={{lt}}li{{gt}}{{lt}}a{{space}}href{{equals}}{[webRoot]}/article/{{file.folder}}{{gt}}{{articleTitle}}{{lt}}/a{{gt}}{{lt}}/li{{gt}} src/templates/generated --find=[webRoot] --replacement={webRoot} --concat=articles.html"
],
"lint": [
"jshint src"
],
"build": [
"copy-file src/cname.txt docs/CNAME",
"copy-folder src/website/graphics docs/graphics",
"copy-folder src/website/article docs/article --ext=.png,.jpg",
"copy-file src/website/app.js docs/app.js",
"lessc src/website/style.less docs/style.css",
"replacer src/website --ext=.html docs"
]
},
"scripts": {
"pretest": "run-scripts clean generated build",
"pretest": "run-scripts clean lint generated build",
"test": "html-validator docs '--ignore=Section lacks heading.'",
"preinteractive": "npm test",
"interactive": "browser-sync . --startPath docs --files docs"
Expand All @@ -44,11 +61,12 @@
"copy-file-util": "~1.2",
"copy-folder-util": "~1.1",
"dna-engine": "~3.1",
"jshint": "~2.13",
"less": "~4.2",
"replacer-util": "~1.3",
"rimraf": "~5.0",
"run-scripts-util": "~1.2",
"w3c-html-validator": "~1.7",
"w3c-html-validator": "~1.8",
"web-ignition": "~2.1"
}
}
59 changes: 1 addition & 58 deletions src/templates/doc-begin.html
Original file line number Diff line number Diff line change
Expand Up @@ -37,64 +37,7 @@
<link rel=stylesheet href={{webRoot}}/style.css>
<script defer src=https://cdn.jsdelivr.net/npm/dna-engine@{{package.dependencies.dna-engine|version}}/dist/dna-engine.min.js></script>
<script defer src=https://cdn.jsdelivr.net/npm/web-ignition@{{package.dependencies.web-ignition|version}}/dist/lib-x.min.js></script>
<script data-on-load=app.start>
const app = {
restoreChecklist(checklistElem) {
const checklist = JSON.parse(globalThis.localStorage.getItem('checklist'));
const setCheckbox = (li) =>
li.querySelector('input[type=checkbox]').checked = checklist[li.id];
if (checklist)
[...checklistElem.children].forEach(setCheckbox);
},
saveChecklist(checklistElem) {
const tasks = [...checklistElem.querySelectorAll('li')];
const isChecked = (li) => li.querySelector('input[type=checkbox]').checked;
const checklist = Object.fromEntries(tasks.map(li => [li.id, isChecked(li)]));
globalThis.localStorage.setItem('checklist', JSON.stringify(checklist));
},
setupArticlePage() {
// <div id=article-nav>
// <i data-icon=circle-left></i>
// <i data-icon=circle-right></i>
// <ul><li><a href=../../article/go-metric>Go Metric<a><li>...
// </div>
const container = globalThis.document.getElementById('article-nav');
const articles = [...container.querySelectorAll('ul >li >a')];
const header = 'main >section:first-child >h2';
const title = globalThis.document.querySelector(header).textContent;
const index = articles.findIndex(article => article.textContent === title);
const configure = (button, index) => {
button.setAttribute('data-href', articles[index]?.getAttribute('href'));
button.setAttribute('title', articles[index]?.textContent);
button.classList.add(index > -1 && index < articles.length ? 'show' : 'hide');
};
configure(container.children[0], index - 1); //previous article
configure(container.children[1], index + 1); //next article
container.classList.add('show');
},
start() {
if (globalThis.location.href.includes('/article/'))
app.setupArticlePage();
const checklistElem = globalThis.document.querySelector('.to-do-checklist');
if (checklistElem)
app.restoreChecklist(checklistElem);
// Link Menu HTML example:
// <nav id=link-menu><a href=.>Home</a><a href=about>About</a></nav>
const linkMenu = globalThis.document.getElementById('link-menu');
const setCurrentPage = () => {
const pageName = globalThis.location.pathname
.replace(/index.[a-z]*$/, '').replace(/\/$/, '').replace(/.*\//, '');
const active = linkMenu.querySelector(`a[href$="${pageName}"]`);
const isDefaultPage = /(\/|index\.[a-z]*)$/.test(globalThis.location.href);
const onHomePage = linkMenu.children[0].getAttribute('href') === '.' && isDefaultPage;
const current = onHomePage ? linkMenu.firstElementChild : active;
current?.classList.add('current');
}
if (linkMenu)
setCurrentPage();
},
};
</script>
<script defer src={{webRoot}}/app.js></script>
</head>
<body>

Expand Down
50 changes: 50 additions & 0 deletions src/website/app.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
// Think Metric

const app = {
restoreChecklist(listElem) {
// Set checklist task items according to previously saved values.
const checklist = JSON.parse(globalThis.localStorage.getItem('checklist'));
const setCheckbox = (li) =>
li.querySelector('input[type=checkbox]').checked = checklist[li.id];
if (checklist)
[...listElem.children].forEach(setCheckbox);
},
saveChecklist(checklistElem) {
// Record current status of checklist tasks to Local Storage.
const tasks = [...checklistElem.querySelectorAll('li')];
const isChecked = (li) => li.querySelector('input[type=checkbox]').checked;
const checklist = Object.fromEntries(tasks.map(li => [li.id, isChecked(li)]));
globalThis.localStorage.setItem('checklist', JSON.stringify(checklist));
},
setupArticlePage() {
// <div id=article-nav>
// <i data-icon=circle-left></i>
// <i data-icon=circle-right></i>
// <ul><li><a href=../../article/go-metric>Go Metric<a><li>...
// </div>
const container = globalThis.document.getElementById('article-nav');
const articles = [...container.querySelectorAll('ul >li >a')];
const header = 'main >section:first-child >h2';
const title = globalThis.document.querySelector(header).textContent;
const index = articles.findIndex(article => article.textContent === title);
const configure = (button, index) => {
button.setAttribute('data-href', articles[index]?.getAttribute('href'));
button.setAttribute('title', articles[index]?.textContent);
button.classList.add(index > -1 && index < articles.length ? 'show' : 'hide');
};
configure(container.children[0], index - 1); //previous article
configure(container.children[1], index + 1); //next article
container.classList.add('show');
},
start() {
console.log('Think Metric');
console.log('🇺🇸 Americans for Metrication 🇺🇸');
if (globalThis.location.href.includes('/article/'))
app.setupArticlePage();
const checklistElem = globalThis.document.querySelector('ol.to-do-checklist');
if (checklistElem)
app.restoreChecklist(checklistElem);
},
};

dna.dom.onReady(app.start);

0 comments on commit edf3379

Please sign in to comment.