31:T5ef,pageMenu = (sections, config, { hashPrefix = '' } = {}) => { // organize const tree = organizeSections(sections); const menuDOM = html`

${[...tree.keys()].map(code => { if (code === 'hidden') return ''; // if the menu has children const link = `#${hashPrefix}${tree.get(code).length > 0 ? `${code}/${tree.get(code)[0]}` : `${code}`}` const label = config.menuSegmentLabels?.[code] || code; return htl.html.fragment`${label}` } )}

${[...tree.keys()].map(parent => { return htl.html.fragment`${ tree.get(parent).map(code => { const link = `#${hashPrefix}${`${parent}/${code}`}`; const label = config.menuSegmentLabels?.[code] || code; const topLayerNav = link.split("/")[0]; return html`${label}`; })}`; }) }

` updateMenu(menuDOM); return menuDOM; }32:T6c2,updateMenu = (dom = document) => { if (!dom.querySelectorAll) dom = document; // The top layer of the menu is always visible, but only one tab is highlighted [...dom.querySelectorAll(".nav-1")].forEach(nav => { const navHash = "#" + nav.href.split("#")[1].split("/")[0] if (window.location.hash.startsWith(navHash)) { nav.classList.add(...navActiveClasses); } else { nav.classList.remove(...navActiveClasses) } }); // The 2nd layer of menu only has the options relevant to the top layer // And then the specific section within that layer is highlighted [...dom.querySelectorAll(".nav-2")].forEach(nav => { const navHash = nav.href.split("#")?.[1] const topLayerNav = navHash.split("/")?.[0]; if (window.location.hash.length < 1) return; const topLayerWindow = window.location.hash.split('#')[1].split("/")[0]; console.log(topLayerNav, topLayerWindow) const nav2ActiveClasses = [...navActiveClasses, "text-on-brand"]; if (topLayerNav !== topLayerWindow) { nav.classList.add("hide") } else { nav.classList.remove("hide") if ("#" + navHash === window.location.hash) { nav.classList.add(...nav2ActiveClasses) } else { nav.classList.remove(...nav2ActiveClasses) } } }); // Due to Observablehq framing, the CSS :target selector for show/hide sections based on hash does not // work properly. So we manually toggle it. [...dom.querySelectorAll("[data-survey-section]")].forEach(section => { if (`#${section.id}` === window.location.hash) { section.style.display = "block"; } else { section.style.display = "none"; } }); if (isSurveyStandalone()) { scrollToTop(); } }33:T586,sectionsView = (questions, layout, config, sections, answers = new Map(), { hashPrefix = '', putFile, getFile } = {}) => { const cells = new Map([...questions.entries()].map(([id, q], index) => [id, createQuestion({ ...q, value: answers.get(id) }, index, { putFile, getFile })])); bindLogic(cells, layout) // We inject the views as just pure presentation const sectionViews = [...sections.keys()].map(sectionKey => sectionView(config, cells, sections, sectionKey, { hashPrefix })) // But we also want the questions inside the sections bound as a single flat list of questions. // It should be flat as we don't want layout information leaking into data access model, e.g. we don't want // moving a question to a different section to invalide persisted answers. let questionViews = sectionViews.reduce( (questions, section) => { // Copy over section propties (which are views of questions) into growing mega object of views) return Object.assign(questions, section) }, {} ) // Some questions are undefined if they cannot be looked up, we need to filter those out questionViews = Object.fromEntries(Object.entries(questionViews).filter(([k , v]) => v)); const container = view`

${sectionViews} ${/* put our questions as hidden view*/ ['_...', questionViews]}

` return container; }34:T723,sectionView = (config, cells, sections, sectionKey, { hashPrefix = '' } = {}) => { const suffix = sectionKey.split("/").pop(); const subtitle = config.menuSegmentLabels?.[suffix] || suffix; const orderedQuestions = sections.get(sectionKey).map(layoutRow => { let cell = cells.get(layoutRow.id) if (cell === undefined) { cell = md`Error question not-found for ${layoutRow.id}` } cell.id = layoutRow.id return cell; }); const pageKeys = paginationKeys(sections, sectionKey); const paginationEl = pagination({...pageKeys, hashPrefix}); // background-position-x is set to 4rem, which is approximate height of the header return view`

${['...', orderedQuestions.reduce((acc, q) => Object.defineProperty(acc, q.id, {value: q, enumerable: true}), {})]}

${paginationEl}

` }35:[{"id":"33cebc3bcc6c8598494ca08a90b80e7a2526ad85db05c3a269bf70fe037780dce7b5be9b4bc01074fd658daf96acc41879befe5f54936d31b34cd1e84b8b0915","href":"https://static.observableusercontent.com/files/33cebc3bcc6c8598494ca08a90b80e7a2526ad85db05c3a269bf70fe037780dce7b5be9b4bc01074fd658daf96acc41879befe5f54936d31b34cd1e84b8b0915","name":"core_intro@1.jpg","type":"image/jpeg","lastModified":1631608923190.16,"size":327188},{"id":"390c5d7c0d71733d1e63aa9c38d3ee3c68369f8ce17e265675ec13fd9b202001b3c38436a05c670719db7f7d592d18d1c8c43ab474256ba4196b918c9357e9d4","href":"https://static.observableusercontent.com/files/390c5d7c0d71733d1e63aa9c38d3ee3c68369f8ce17e265675ec13fd9b202001b3c38436a05c670719db7f7d592d18d1c8c43ab474256ba4196b918c9357e9d4","name":"core_mainstream@1.jpg","type":"image/jpeg","lastModified":1631608923248.405,"size":272119},{"id":"ee654aa3599162a8e97b92e233bf315e692d20e36de269fc814ec1e973b8f9f630a588b6a41955ec7b97635ec992ccdc87b607c235535a8b0ec8647cba36d482","href":"https://static.observableusercontent.com/files/ee654aa3599162a8e97b92e233bf315e692d20e36de269fc814ec1e973b8f9f630a588b6a41955ec7b97635ec992ccdc87b607c235535a8b0ec8647cba36d482","name":"core_operation@1.jpg","type":"image/jpeg","lastModified":1631608922919.553,"size":301698},{"id":"4a26433a3f2093cc51c4fbb4e58654accad20264701f61a42e69aa0ff5641cfded0676e595f3817a9160aea0be3775003ade6acb8a52e802172292df1bfb5def","href":"https://static.observableusercontent.com/files/4a26433a3f2093cc51c4fbb4e58654accad20264701f61a42e69aa0ff5641cfded0676e595f3817a9160aea0be3775003ade6acb8a52e802172292df1bfb5def","name":"intro@3.jpg","type":"image/jpeg","lastModified":1631609037489.013,"size":389722}] 2f:{"title":"Survey Slate | Styling","cells":[{"id":0,"value":"md`# Survey Slate | Styling\n\n_Exposing a method to take survey information and wrap it in HTML for display._\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1866,"value":"md`\n

👋 Welcome! This notebook is about **Survey Slate**—an [assemblage of Observable web-based notebooks](https://observablehq.com/collection/@categorise/survey-slate) allowing organizations to host custom surveys for end users on their own AWS infrastructure. Check out the [Technical Overview](https://observablehq.com/@categorise/surveyslate-docs) to get started! ✨

\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":310,"value":"md`test credentials for demoEditor\n~~~js\n{\n \"accessKeyId\": \"AKIAQO7DBPIFDAUBK4SL\",\n \"secretAccessKey\": \"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\"\n}\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"viewof manualCredentials","pinned":false,"hidden":false,"mode":"ojs"},{"id":321,"value":"saveCreds","pinned":false,"hidden":false,"mode":"ojs"},{"id":344,"value":"md`### Choose Survey Source for demo data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":288,"value":"viewof survey","pinned":false,"hidden":false,"mode":"ojs"},{"id":304,"value":"import {viewof manualCredentials, viewof survey, saveCreds, questions, layout, viewof surveyConfig, initialQuestionLoader, initialLayoutLoader, load_config, createQuestion, bindLogic} from '@categorise/surveyslate-designer-tools'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1126,"value":"import {styles as componentStyles, pagination} from '@categorise/survey-components'","pinned":false,"hidden":false,"mode":"ojs"},{"id":335,"value":"loaders = initialQuestionLoader, initialLayoutLoader, load_config","pinned":false,"hidden":false,"mode":"ojs"},{"id":1635,"value":"## Brand","pinned":false,"hidden":false,"mode":"md"},{"id":1742,"value":"viewof brand = Inputs.color({label: \"Brand Color\", value: mainColors[900]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1749,"value":"viewof accent = Inputs.color({label: \"Accent Color\", value: accentColors[900]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1760,"value":"viewof font = Inputs.textarea({label: \"Font Stack\", value: '\"Roboto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1634,"value":"// This config needs to be part of account or survey config\nbrandConfig = ({\n colors: {\n brand: brand, // or, provide and color hex code\n accent: accent, // or, provide and color hex code\n // The color of text which are usually displayed on top of the brand or accent colors.\n \"text-on-brand\": \"#ffffff\",\n },\n fonts: {\n \"brand-font\": font\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":387,"value":"md`### Config`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1079,"value":"script = ({\n hashPrefix = ''\n} = {}) => html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":1339,"value":"### Enable Javascript Snippet","pinned":false,"hidden":false,"mode":"md"},{"id":1346,"value":"enableJavascriptContent = md`⚠️ Javascript is required to run this application. Please enable Javascript on your browser to continue.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1343,"value":"enableJavasscriptSnippet = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":940,"value":"md`## Survey View`","pinned":false,"hidden":false,"mode":"ojs"},{"id":943,"value":"surveyView = (questions, layout, config, answers, options) => {\n const sections = d3.group(layout, d => d['menu'])\n const survey = view`\n ${custom_css()}\n ${header(sections, config, options)}\n

\n ${['...', sectionsView(questions, layout, config, sections, answers, options)]}\n

\n ${pageFooter()}\n `\n return survey;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":949,"value":"viewof exampleSurvey = surveyView(questions, layout.data, surveyConfig, new Map(), {\n hashPrefix: 'foo|'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":954,"value":"exampleSurvey","pinned":true,"hidden":false,"mode":"ojs"},{"id":190,"value":"md`#### Custom CSS`","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"custom_css = () => html`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1611,"value":"navActiveClasses = [\"bg-accent\", \"active\"] // 'active' not used for styling. It's retained just in case it is used JS","pinned":true,"hidden":false,"mode":"ojs"},{"id":714,"value":"md`## Body Header`","pinned":false,"hidden":false,"mode":"ojs"},{"id":720,"value":"header(d3.group(layout.data, d => d['menu']), surveyConfig, {\n layout: 'relative',\n hashPrefix: \"foo|\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":716,"value":"header = (sections, config, {\n hashPrefix = '',\n layout = \"sticky-top\"\n} = {}) => html`

\n${pageHeader([config.pageTitle])}\n\n${pageMenu(sections, config, {\n hashPrefix\n})}\n

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":630,"value":"md`## Menu`","pinned":false,"hidden":false,"mode":"ojs"},{"id":460,"value":"pageMenu(d3.group(layout.data, d => d['menu']), surveyConfig)","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":1800,"value":"organizeSections = (sections) => d3.rollup([...sections.keys()].map(path => path.split(\"/\")), (children) => children.map(child => child[1]).filter(_ => _), d => d[0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":580,"value":"addMenuBehaviour = {\n window.addEventListener('hashchange', updateMenu);\n invalidation.then(() => window.removeEventListener('hashchange', updateMenu));\n updateMenu()\n\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":549,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":1843,"value":"isSurveyStandalone = () => document.body.dataset.standaloneSurvey === \"true\";","pinned":true,"hidden":false,"mode":"ojs"},{"id":1811,"value":"scrollToTop = () => window.scrollTo(0,0);","pinned":true,"hidden":false,"mode":"ojs"},{"id":893,"value":"[...d3.group(layout.data, d => d['menu']).keys()]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1232,"value":"## Images","pinned":false,"hidden":false,"mode":"md"},{"id":1872,"value":"async function resolveObject(obj) {\n return Object.fromEntries(await Promise.all(\n Object.entries(obj).map(async ([k, v]) => [k, await v])\n ));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1272,"value":"images = resolveObject({\n \"mainstream\": FileAttachment(\"core_mainstream@1.jpg\").url(),\n \"operation\": FileAttachment(\"core_operation@1.jpg\").url(),\n \"intro\": FileAttachment(\"intro@3.jpg\").url(),\n \"default\": FileAttachment(\"core_intro@1.jpg\").url(),\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1237,"value":"function imageFor(section) {\n if (section.includes(\"mainstream\")) {\n return images.mainstream;\n } else if (section.includes(\"operation\")) {\n return images.operation;\n } else if (section.includes(\"intro\")) {\n return images.intro;\n } else {\n return images['default']\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":627,"value":"md`## Content\n\nNote you need a menu option selected for the example below to render\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":701,"value":"viewof sectionViewExample = sectionsView(questions, layout.data, surveyConfig, d3.group(layout.data, d => d['menu']))","pinned":true,"hidden":false,"mode":"ojs"},{"id":906,"value":"sectionViewExample","pinned":true,"hidden":false,"mode":"ojs"},{"id":84,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":911,"value":"viewof exampleSectionView = sectionView(surveyConfig, \n new Map([...questions.entries()].map(([id, q]) => [id, createQuestion(q)])), \n d3.group(layout.data, d => d['menu']),\n \"nolayout\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":916,"value":"exampleSectionView","pinned":true,"hidden":false,"mode":"ojs"},{"id":637,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":1793,"value":"paginationKeys = (sections, key) => {\n const tree = organizeSections(sections);\n const keys = [...tree.keys()].reduce((acc, parent) => {\n const subsections = tree.get(parent);\n if (subsections.length > 0) {\n return [\n ...acc,\n ...(subsections.map(sb => `${parent}/${sb}`))\n ]\n }\n return [...acc, parent];\n }, []);\n\n let previous;\n let next;\n\n const currentIndex = keys.findIndex(k => k === key);\n if (currentIndex > 0) {\n previous = keys[currentIndex - 1];\n }\n\n if (currentIndex < (keys.length - 1)) {\n next = keys[currentIndex + 1];\n }\n\n return {\n previous, next,\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":820,"value":"questions","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"md`\n---\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1694,"value":"{\n // Initialising styles for demos to work on this notebook\n initializeStyles()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1627,"value":"initializeStyles = () => tachyonsExt(brandConfig)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1816,"value":"## Styles for the demos in this notebook\n\nThese styles are to negate Observable styles overriding the component styles.","pinned":false,"hidden":false,"mode":"md"},{"id":1786,"value":"stylesForNotebooks = html`