json-timeline
Version:
Generate Interactive Timelines stored in JSON Advents with Tags.
275 lines (231 loc) • 8.61 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSDoc: Source: views/renderAdvents.js</title>
<script src="scripts/prettify/prettify.js"> </script>
<script src="scripts/prettify/lang-css.js"> </script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>
<body>
<div id="main">
<h1 class="page-title">Source: views/renderAdvents.js</h1>
<section>
<article>
<pre class="prettyprint source linenums"><code>/**
* @module renderAdvents
*/
import { advents, tags } from './advents.js';
/**
* @constant
* @type {Object[][]}
* @name adventDomGroups
* @description Array of Advent Group and Advent DOMs
*/
const adventDomGroups = advents
// Map Each Advent in a Group to an Advent DOM
.map(group =>
group.map(advent => ({
advent,
adventDiv: renderAdvent(advent)
}))
)
// Map Each Group to an Advent Group DOM
.map(group => ({
group,
groupDom: renderAdventGroup(group)
}));
/**
* @function
* @name renderAdvent
* @description Render Advent DOM Object from Advent Object
* @param {Object} advent Advent Object
* @returns {HTMLElement} Advent DOM Object
*/
function renderAdvent(advent) {
// Advent div
const adventDiv = document.createElement('div');
adventDiv.classList.add('advent');
// Title p
const titleP = document.createElement('p');
titleP.classList.add('title');
titleP.classList.add('mono-text');
titleP.innerText = advent.title;
adventDiv.appendChild(titleP);
// Date p
const dateP = document.createElement('p');
dateP.classList.add('date');
dateP.classList.add('mono-text');
dateP.innerText = (
`${advent.start.month}/${advent.start.day}/${advent.start.year}` +
((advent.end === null)
? ''
: `-${advent.end.month}/${advent.end.day}/${advent.end.year}`)
);
adventDiv.appendChild(dateP);
// Tags p
const tagsP = document.createElement('p');
tagsP.classList.add('tags');
tagsP.classList.add('mono-text');
tagsP.innerText = `Tags:${advent.tags.join(',')}`;
adventDiv.appendChild(tagsP);
// Content p
const contentP = document.createElement('p');
contentP.classList.add('content');
contentP.classList.add('read-text');
contentP.innerText = advent.content;
adventDiv.appendChild(contentP);
return adventDiv;
}
/**
* @function
* @name renderAdventGroup
* @description Render Advent Group DOM Object from Advent Group
* @param {Object[]} group Advent Group
* @returns {HTMLElement} Advent Group DOM Object
*/
function renderAdventGroup(group) {
// Group div
const groupDiv = document.createElement('div');
groupDiv.classList.add('group');
// Date Toggle p
const dateToggleP = document.createElement('p');
dateToggleP.classList.add('group-date');
dateToggleP.classList.add('mono-text');
dateToggleP.addEventListener('click', toggleVisibility());
const { advent: { start: { month, day, year } } } = group[0];
const date = `${month}/${day}/${year}`;
dateToggleP.innerText = `${date} [▼]`;
groupDiv.appendChild(dateToggleP);
// Advents div
const adventsDiv = document.createElement('div');
adventsDiv.classList.add('advents');
adventsDiv.classList.add('hidden');
groupDiv.appendChild(adventsDiv);
return groupDiv;
}
/**
* @function
* @name renderTagToggles
* @description Render Tag Toggles from Tags
* @param {HTMLElement} target1 Target to render Tag Toggles
* @param {HTMLElement} target2 Target to render Timeline
*/
export function renderTagToggles(target1, target2) {
// Toggle Title p
const toggleTitle = document.createElement('p');
toggleTitle.classList.add('toggle-container-title');
toggleTitle.classList.add('mono-text');
toggleTitle.innerText = 'Tags [▼]';
toggleTitle.addEventListener('click', toggleVisibility());
target1.appendChild(toggleTitle);
// Toggle Container div
const toggleContainer = document.createElement('div');
toggleContainer.classList.add('toggles-container');
toggleContainer.classList.add('hidden');
target1.appendChild(toggleContainer);
// Add Tag Toggle per Tag Key
for (const key of tags.keys()) {
// Tag Toggle div
const tagToggleDiv = document.createElement('div');
tagToggleDiv.classList.add('toggle-container');
// Tag Toggle Checkbox input
const tagToggleCheck = document.createElement('input');
tagToggleCheck.setAttribute('type', 'checkbox');
tagToggleCheck.setAttribute('checked', true);
tagToggleCheck.classList.add('tag-toggle');
tagToggleCheck.addEventListener('click', () => {
tags.set(key, !tags.get(key));
renderTimeline(target2);
});
tagToggleDiv.appendChild(tagToggleCheck);
// Tag Toggle Label label
const tagToggleLabel = document.createElement('label');
tagToggleLabel.classList.add('tag-toggle-label');
tagToggleLabel.classList.add('mono-text');
tagToggleLabel.innerText = key;
tagToggleDiv.appendChild(tagToggleLabel);
toggleContainer.appendChild(tagToggleDiv);
}
}
/**
* @function
* @name toggleVisibility
* @description Creates Function to toggle Visibility of Element given a Find Function
* @param {Function} findFn Function to find Element to Toggle from Target
* @returns {Function} Function to toggle Visibility of Element
*/
function toggleVisibility(findFn = target => target.nextElementSibling) {
// Function to toggle Visibility
return function ({ target }) {
// Element to Toggle
const container = findFn(target);
const end = target.innerText.length - 3;
// Hide Element
if (target.innerText.endsWith('[▼]')) {
container.classList.remove('hidden');
target.innerText = `${target.innerText.slice(0, end)}[▲]`;
}
// Show Element
else {
container.classList.add('hidden');
target.innerText = `${target.innerText.slice(0, end)}[▼]`;
}
};
}
/**
* @function
* @name renderTimeline
* @description Render Timeline from Advent DOM Groups
* @param {HTMLElement} target Target to render Timeline
*/
export function renderTimeline(target) {
// Clear Timeline
removeChildren(target);
// For every Advent DOM Group
for (const { group, groupDom } of adventDomGroups) {
const [_, advents] = groupDom.children;
// Remove all Advents from Advent Group DOM
removeChildren(advents);
// Append Advent if some Tag is toggled
for (const { advent, adventDiv } of group) {
if (advent.tags.some(tag => tags.get(tag))) {
advents.appendChild(adventDiv);
}
}
// Append Advent Group DOM if not empty
if (advents.firstChild) {
target.appendChild(groupDom);
}
}
}
/**
* @function
* @name removeChildren
* @description Removes all children elements from Target Element
* @param {HTMLElement} element Target Element
*/
function removeChildren(element) {
while (element.firstChild) {
element.removeChild(element.firstChild);
}
}
</code></pre>
</article>
</section>
</div>
<nav>
<h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-advents.html">advents</a></li><li><a href="module-compareDates.html">compareDates</a></li><li><a href="module-groupAdvents.html">groupAdvents</a></li><li><a href="module-index.html">index</a></li><li><a href="module-isType.html">isType</a></li><li><a href="module-json-timeline.html">json-timeline</a></li><li><a href="module-loadAdvents.html">loadAdvents</a></li><li><a href="module-renderAdvents.html">renderAdvents</a></li><li><a href="module-schemas.html">schemas</a></li><li><a href="module-sortAdvents.html">sortAdvents</a></li><li><a href="module-validateSchema.html">validateSchema</a></li></ul>
</nav>
<br class="clear">
<footer>
Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.6</a> on Mon Dec 14 2020 23:14:56 GMT-0500 (Eastern Standard Time)
</footer>
<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>