From d2e9d329024500ab6d4b7e3f4db7dbfc1c7be599 Mon Sep 17 00:00:00 2001 From: rohit Date: Thu, 14 Mar 2024 01:44:18 +0530 Subject: [PATCH] json page --- src/json.ts | 111 ++++++++++++++++++++ src/sections/guests.ts | 7 +- src/sections/schedule.ts | 5 +- src/templates/json.html | 215 +++++++++++++++++++++++++++++++++++++++ src/utils/jsonData.ts | 25 +++++ src/utils/toJson.ts | 131 ++++++++++++++++++++++++ 6 files changed, 488 insertions(+), 6 deletions(-) create mode 100644 src/json.ts create mode 100644 src/templates/json.html create mode 100644 src/utils/jsonData.ts create mode 100644 src/utils/toJson.ts diff --git a/src/json.ts b/src/json.ts new file mode 100644 index 0000000..7730e3a --- /dev/null +++ b/src/json.ts @@ -0,0 +1,111 @@ +import valueToHTML from "./utils/toJson"; +import {data} from "./utils/jsonData"; + +document.getElementById("json").innerHTML = valueToHTML(data); + +let collapsers, $selectedLI; + +function init() { + collapsers = document.querySelectorAll('#json .collapsible .collapsible') + + for (const $collapser of collapsers) { + const $parent = $collapser.parentElement + const id = Math.random().toString(36); + $parent.id = id + $parent.dataset.status = 'expanded' + $parent.onclick = e => { + onToggle(e, id, $collapser) + } + } + + const $copyPath = document.createElement('div') + $copyPath.className = 'copy-path' + + const $toolbox = document.createElement('div') + $toolbox.className = 'toolbox' + + const $expand = document.createElement('button') + $expand.id = 'expand_all' + $expand.textContent = '+' + + const $reduce = document.createElement('button') + $reduce.id = 'reduce_all' + $reduce.textContent = '-' + + $toolbox.append($expand) + $toolbox.append($reduce) + + document.body.append($toolbox) + document.body.onclick = onMouseClick + + $expand.onclick = onExpand + $reduce.onclick = onReduce +} + +function onToggle(e, id, $collapser) { + e.preventDefault() + e.stopPropagation() + const $parent = $collapser.parentElement + if ($parent.id === id) { + switch ($parent.dataset.status) { + case 'expanded': + reduce($collapser) + break + case 'reduced': + expand($collapser) + break + default: + $parent.dataset.status = 'expanded' + reduce($collapser) + } + } +} + +function onExpand() { + for (const $collapsed of collapsers) { + expand($collapsed) + } +} + +function expand($collapsed) { + const $parent = $collapsed.parentElement + if ($parent.dataset.status !== 'reduced') return + + $parent.classList.remove('collapsed') + $parent.dataset.status = 'expanded' +} + +function onReduce() { + for (const $collapsed of collapsers) { + reduce($collapsed) + } +} + +function reduce($collapsed) { + const $parent = $collapsed.parentElement + if ($parent.dataset.status !== 'expanded') return + + const $ellipsis = $parent.querySelector('.ellipsis') + if ($ellipsis) $ellipsis.dataset.value = `${$collapsed.childElementCount}` + $parent.classList.add('collapsed') + $parent.dataset.status = 'reduced' +} + +function getParentLI($element) { + if ($element && $element.tagName === 'LI') return $element + + while ($element && $element.tagName !== 'LI') { + $element = $element.parentElement + } + + return $element +} + +function onMouseClick(e) { + if ($selectedLI) $selectedLI.firstElementChild.classList.remove('selected') + + $selectedLI = getParentLI(e.target) + if ($selectedLI) $selectedLI.firstElementChild.classList.add('selected') +} + +init(); diff --git a/src/sections/guests.ts b/src/sections/guests.ts index 3149035..0a8a198 100644 --- a/src/sections/guests.ts +++ b/src/sections/guests.ts @@ -20,7 +20,7 @@ function makeCard(name = "", title = "", description = "", image = "/img/guests/ const cardsContainer = document.getElementById("guestCards"); -const guests = [ +export const Guests = [ ['Athira T J ', 'Data Associate', 'Reap Benefit', '/img/guests/athira.jpeg'], ['Akhila ', 'Co-Founder', 'Tech4Good Community', '/img/guests/akhila.jpeg'], ['Vidya ', 'Ex Data Scientist', 'Tech4Good Community', '/img/guests/vidya.jpeg'], @@ -32,6 +32,5 @@ const guests = [ ['G G'], ]; -cardsContainer.innerHTML = guests.map((row) => makeCard(...row)).join("\n"); - -export {}; +if (cardsContainer) + cardsContainer.innerHTML = Guests.map((row) => makeCard(...row)).join("\n"); diff --git a/src/sections/schedule.ts b/src/sections/schedule.ts index 19d78d2..473d8d7 100644 --- a/src/sections/schedule.ts +++ b/src/sections/schedule.ts @@ -85,7 +85,7 @@ function makeDay(day: string) {

${day}

- ${Schedule[day].map((event, i) => makeEvent(event, i+1)).join('')} + ${Schedule[day].map((event, i) => makeEvent(event, i + 1)).join('')}

` @@ -93,4 +93,5 @@ function makeDay(day: string) { const scheduleContainer = document.getElementById("scheduleContainer"); -scheduleContainer.innerHTML = Object.keys(Schedule).map(day => makeDay(day)).join(''); +if (scheduleContainer) + scheduleContainer.innerHTML = Object.keys(Schedule).map(day => makeDay(day)).join(''); diff --git a/src/templates/json.html b/src/templates/json.html new file mode 100644 index 0000000..6d33a72 --- /dev/null +++ b/src/templates/json.html @@ -0,0 +1,215 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + WMC + + +
+
+ + diff --git a/src/utils/jsonData.ts b/src/utils/jsonData.ts new file mode 100644 index 0000000..ba99cd8 --- /dev/null +++ b/src/utils/jsonData.ts @@ -0,0 +1,25 @@ +import {Guests} from "../sections/guests"; +import {Schedule} from "../sections/schedule"; + +export const data = { + WomenMakerCelebration: { + About: 'Join us for an inspiring day filled with learning, networking, and celebration. Registration is now open for March 23rd but will be subject to a shortlisting process to ensure a deeply engaging and personalized experience for all attendees.'.replaceAll(" ", "\n"), + Registration: { + Link: "https://airtable.com/app5Zrc5Yh9ThtD60/shrLIICJd6IC1RkKE", + Note: "Shortlisted attendees will be notified via email with further details.".replaceAll(" ", "\n") + }, + Why: { + Context: 'The Women Makers Celebration is not just a conference; it\'s a platform for creating an inclusive and diverse tech industry in Kerala and beyond. Our mission is to'.replaceAll(" ", "\n"), + Missions: [ + 'Inspire with stories from the successful Tink-Her-Hack initiative and other remarkable women in tech.'.replaceAll(" ", "\n"), + 'Educate through hands-on workshops and sessions led by industry experts.'.replaceAll(" ", "\n"), + 'Connect attendees with mentors, peers, and potential employers, fostering a vibrant community of women makers.'.replaceAll(" ", "\n") + ] + }, + Guests, + Schedule, + ContactUs:{ + Email: "hi@tinkerhub.org", + } + } +} diff --git a/src/utils/toJson.ts b/src/utils/toJson.ts new file mode 100644 index 0000000..895adb1 --- /dev/null +++ b/src/utils/toJson.ts @@ -0,0 +1,131 @@ +function htmlEncode(t: Object) { + if (t == null) return '' + + return t.toString() + .replace(/&/g, '&') + .replace(/"/g, '"') + .replace(//g, '>') + .replace(/ /g, ' ') +} + +function addComma(index: number, length: number) { + return index < length - 1 ? ',' : '' +} + +function decorateWithSpan(value: Object, className: string) { + return `${htmlEncode(value)}` +} + +export default function valueToHTML(value: Object) { + const type = value === null ? 'null' : typeof value + let output = '' + + switch (type) { + case 'object': + output += value && value.constructor === Array ? arrayToHTML(value) : objectToHTML(value) + + break + + case 'number': + output += decorateWithSpan(value, 'type-number') + + break + + case 'string': + if (/^(http|https):\/\/[^\s]+$/.test(value as string)) { + output += `${decorateWithSpan('"', 'type-string')}${htmlEncode(value)}${decorateWithSpan('"', 'type-string')}` + } else { + output += decorateWithSpan(`"${value}"`, 'type-string') + } + break + + case 'boolean': + output += decorateWithSpan(value, 'type-boolean') + break + + case 'undefined': + output += decorateWithSpan('undefined', 'type-undefined') + break + + case 'symbol': + output += decorateWithSpan(value.toString(), 'type-symbol') + break + + case 'function': + output += decorateWithSpan('function', 'type-function') + break + + case 'bigint': + output += decorateWithSpan(value.toString(), 'type-bigint') + break + + case 'null': + output += decorateWithSpan('null', 'type-null') + break + + default: + output += decorateWithSpan(type, 'type-other') + break + } + + // if (value == null) output += decorateWithSpan('null', 'type-null') + // else if (value && value.constructor === Array) + // output += arrayToHTML(value) + // else if (type === 'object') { + // output += objectToHTML(value) + // } else if (type === 'number') { + // output += decorateWithSpan(value, 'type-number') + // } else if (type === 'string') { + // if (/^(http|https):\/\/[^\s]+$/.test(value)) { + // output += decorateWithSpan('"', 'type-string') + + // '' + htmlEncode(value) + '' + + // decorateWithSpan('"', 'type-string') + // } else { + // output += decorateWithSpan('"' + value + '"', 'type-string') + // } + // } else if (type === 'boolean') { + // output += decorateWithSpan(value, 'type-boolean') + // } + + return output +} + +function arrayToHTML(json: unknown[]) { + const length = json.length + let output = '
[]' + + if (!hasContents) return '[ ]' + + return output +} + +function objectToHTML(json: Object) { + const keys = Object.keys(json) + const length = keys.length + + let output = '
{}' + if (!hasContents) return '{ }' + + return output +}