From c39fa24dd97f635d2fbf5485d4f555769d442eda Mon Sep 17 00:00:00 2001 From: Tony Lea Date: Wed, 7 Jun 2023 11:25:00 -0400 Subject: [PATCH] Adding updates to the data elements and adding the examples to the list --- data.json | 31 ++++++++++++++++++++++++++++++- index.html | 8 ++++++-- main.js | 51 ++++++++++++++++++++++++++++++++++++--------------- 3 files changed, 72 insertions(+), 18 deletions(-) diff --git a/data.json b/data.json index fde041e..7b0eb67 100644 --- a/data.json +++ b/data.json @@ -132,5 +132,34 @@ "text-input", "textarea", "pagination" - ] + ], + "examples" : { + "accordion" : ["01", "02"], + "alert" : ["01", "02"], + "badge" : ["01", "02", "03", "04"], + "banner" : ["01", "02"], + "breadcrumbs" : ["01", "02"], + "button" : ["01", "02", "03"], + "card" : ["01", "02", "03"], + "checkbox" : ["01", "02", "03"], + "command" : ["01", "02"], + "context-menu" : ["01", "02"], + "copy-to-clipboard" : ["01", "02"], + "date-picker" : ["01"], + "dropdown-menu" : ["01"], + "full-screen-menu" : ["01"], + "full-screen-modal" : ["01"], + "modal" : ["01", "02"], + "pagination" : ["01"], + "progress" : ["01"], + "slide-over" : ["01"], + "switch" : ["01"], + "table" : ["01", "02"], + "tabs" : ["01"], + "text-animation" : ["01", "02"], + "textarea-auto-resize" : ["01"], + "textarea" : ["01"], + "tooltip" : ["01", "02"], + "video" : ["01", "02"] + } } \ No newline at end of file diff --git a/index.html b/index.html index bd8d08f..d53eb9a 100644 --- a/index.html +++ b/index.html @@ -17,9 +17,13 @@

Getting Started

- +

Elements

- +
diff --git a/main.js b/main.js index 264ef87..e908881 100644 --- a/main.js +++ b/main.js @@ -4,7 +4,7 @@ * If not, load the list of elements and getting started items from the JSON file. */ document.addEventListener('DOMContentLoaded', function() { - const element = getQueryParameter('element'); + let element = getQueryParameter('element'); const start = getQueryParameter('start'); if(element || start){ document.getElementById('list').remove(); @@ -14,6 +14,11 @@ document.addEventListener('DOMContentLoaded', function() { let folderLocation = (element) ? 'elements' : 'getting-started'; let file = (element) ? element : start; if(element){ + + if(element.includes('-examples')){ + element = element.replace('-examples', '').split('/')[0]; + } + console.log(element); document.getElementById('content').className = data.container[element]; } else { document.getElementById('content').className = 'max-w-3xl p-10 prose'; @@ -27,8 +32,13 @@ document.addEventListener('DOMContentLoaded', function() { document.getElementById('content').remove(); load_file('./data.json', function(text){ let data = JSON.parse(text); - addItemsToList(data.elements, document.getElementById('elements'), 'element'); + addItemsToList(data.elements, document.getElementById('elements'), 'element', data.examples); addItemsToList(data.start, document.getElementById('gettingStarted'), 'start'); + + // for(let i=0; i < data.examples.length; i++){ + + // } + document.body.style = ''; }); } @@ -49,28 +59,39 @@ function getQueryParameter(parameter){ /** * Add element and getting started items from the JSON file to the html list */ -function addItemsToList(myObject, myList, param){ +function addItemsToList(myObject, myList, param, examples = null){ for (const key in myObject) { const listItem = document.createElement('li'); const link = document.createElement('a'); link.className = 'text-blue-500 underline'; link.href = '?' + param + '=' + key; link.textContent = myObject[key]; + listItem.appendChild(link); + + if(examples){ + if(examples[key]){ + let exampleList = document.createElement('ul'); + exampleList.classList.add('list-disc', 'pl-4'); + let exampleFiles = examples[key]; + for(let i=0; i < exampleFiles.length; i++){ + let exampleListItem = document.createElement('li'); + let exampleLink = document.createElement('a'); + exampleLink.className = 'text-blue-500 underline'; + exampleLink.href = '?' + param + '=' + key + '-examples/example-' + exampleFiles[i]; + exampleLink.textContent = 'Example ' + exampleFiles[i]; + + exampleListItem.appendChild(exampleLink); + exampleList.appendChild(exampleListItem); + + } + + listItem.appendChild(exampleList); + } + } + myList.appendChild(listItem); - // POSSIBLE TODO: Add click event to load content from HTML file, DYNAMIC PAGE LOAD INSTEAD OF FULL PAGE LOAD - // link.addEventListener('click', function(e){ - // e.preventDefault(); - // console.log(e.target.href); - // console.log('do magic'); - // get_element(e.target.href, function(text){ - // const parser = new DOMParser(); - // const doc = parser.parseFromString(text, 'text/html'); - // const bodyContent = doc.querySelector('body').innerHTML; - // console.log(bodyContent); - // }); - // }); } }