diff options
Diffstat (limited to 'content/sparse_layout_generator/sparse_layout_generator.js')
| -rw-r--r-- | content/sparse_layout_generator/sparse_layout_generator.js | 132 |
1 files changed, 132 insertions, 0 deletions
diff --git a/content/sparse_layout_generator/sparse_layout_generator.js b/content/sparse_layout_generator/sparse_layout_generator.js new file mode 100644 index 0000000..bf82fdd --- /dev/null +++ b/content/sparse_layout_generator/sparse_layout_generator.js @@ -0,0 +1,132 @@ +/* + Generate simple yet clean single-page site(oids) + + Copyright © 2021 jahoti (jahoti@tilde.team) + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ + +function Sparse(navItems, opts) { + opts = opts || {}; + var width = opts.width || 20, + text = opts.text || 'black', + bg = opts.bgcolor || opts.background || 'yellow', + pagebg = opts.tabcolor || 'white'; + gap = opts.gap || '10px'; + + var body = document.createElement('body'), + nav = document.createElement('nav'), + style = document.createElement('style'); + + var link, activeLink, title; + + style.innerText = ` + body { + display: grid; + grid-column-gap: ${gap}; + column-gap: ${gap}; + grid-template-columns: ${width}%; + } + + nav { + grid-column: 1; + position: sticky; + top: 0; + } + + nav > a:not([href]) { + color: ${text}; + font-weight: bold; + } + + body, nav { background-color: ${bg}; } + body > * { grid-row: 1; } + body > *:not(nav) { background-color: ${pagebg} } + ` + + body.append(style); + body.append(nav); + + function onLinkClick(e) { + var link, section, title; + if (activeLink) { + link = activeLink.inactive + nav.replaceChild(link, activeLink); + for (pane of link.panes) body.removeChild(pane.parentNode); + + delete activeLink.inactive; + } + + link = e.target; + activeLink = document.createElement('span'); + activeLink.innerText = link.textContent; + activeLink.inactive = link; + nav.replaceChild(activeLink, link); + + link.panes.forEach((pane, i) => { + section = document.createElement('article'); + title = document.createElement('h1'); + + title.innerText = pane.docTitle; + section.style.gridColumn = (i + 2).toString(); + + if (pane.docTitleLink) { + let titleLink = document.createElement('a'); + + titleLink.href = pane.docTitleLink; + titleLink.append(title); + title = titleLink; + } + + section.append(title); + section.append(pane); + body.append(section); + }); + } + + document.title = navItems[0]; + + for (var item of navItems) { + link = document.createElement('a'); + if (typeof item === 'string') link.innerText = item; + else { + link.innerText = item.shift(); + if (link.textContent.startsWith('* ')) { + link.innerText = link.textContent.substr(2); + link.style.fontSize = '80%'; + } + + if (typeof item[0] === 'string' && item.length === 1) link.href = item[0]; + else { + link.onclick = onLinkClick; + link.href = '#'; + if (item.length === 2 && typeof item[1] === 'string') { + // Add a title link (if applicable) + item[0].docTitleLink = item.pop(); + } + + link.panes = item; + + // Add the title info + if (item.length === 1) item[0].docTitle = link.textContent; + } + } + + nav.append(link); + nav.append(document.createElement('br')); + } + + activeLink = null; + document.body.parentNode.replaceChild(body, document.body); + nav.querySelector('a[href]').click(); +}
\ No newline at end of file |