Skip to content

Instantly share code, notes, and snippets.

@thomaswilburn
Created Feb 14, 2022
Embed
What would you like to do?
NYC COVID flowchart excerpts
// wrapper for document.querySelector and document.querySelectorAll
var $ = require("./lib/qsa");
var container = $.one(".flowchart-container");
// config is injected from the ArchieML doc
var config = window.flowchartConfig;
// this function adds a block based on the ID
var placeFlowchartItem = function(id, from = null) {
// if you clicked on a box, remove any following blocks
// this lets you jump back up several flowchart steps
if (from) {
while (from.nextElementSibling) from.nextElementSibling.remove();
}
// get the template for this item, and clone it
var template = $.one(`template#${id}`);
var cloned = template.content.cloneNode(true).querySelector(".flowchart-item");
container.append(cloned);
// set the focus only if the user manually clicked
if (from) {
cloned.focus();
}
}
// delegated listener
var onChangeContainer = function(e) {
// check for button clicks
var block = e.target.closest(".flowchart-item");
var chosen = $.one("input:checked", block);
var target = chosen.value;
// insert a block after the clicked item
placeFlowchartItem(target, block);
// visually flag that these buttons have been activated
var buttonContainer = $.one(".choices", block);
buttonContainer.classList.add("chosen");
}
container.addEventListener("change", onChangeContainer);
// insert the starting block
placeFlowchartItem(config.starting);
<!-- this file is an EJS template, similar to a Ruby or PHP template file -->
<div id="" class="graphic">
<!-- container for the actual flowchart -->
<div class="flowchart-container">
<!-- here we output the template tags for each blog -->
<% for (var [key, entry] of Object.entries(TEXT.parsed.flowchart)) { %>
<template id="<%= key %>">
<div class="flowchart-item" tabindex="-1">
<% if (entry.headline) { %>
<h2><%= entry.headline %></h2>
<% } %>
<%= entry.text ? t.renderMarkdown(entry.text) : "" %>
<% if (entry.choices) { %>
<div class="choices">
<% for (var c of entry.choices) { %>
<input
value="<%= c.goto %>"
type="radio"
id="<%= key %>-<%= c.goto %>"
name="<%= key %>-choices" />
<label for="<%= key %>-<%= c.goto %>"><%= c.label %></label>
<% } %>
</div>
<% } %>
</div>
</template>
<% } %>
<!-- flowchart blocks will be placed here via JS -->
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment