Adding updates to the data elements and adding the examples to the list
This commit is contained in:
parent
adb058d313
commit
c39fa24dd9
31
data.json
31
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"]
|
||||
}
|
||||
}
|
@ -17,9 +17,13 @@
|
||||
<svg class="w-auto h-6 mb-5" viewBox="0 0 355 99" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M119.1 87V66.4h19.8c34.3 0 34.2-49.5 0-49.5-11 0-22 .1-33 .1v70h13.2zm19.8-32.7h-19.8V29.5h19.8c16.8 0 16.9 24.8 0 24.8zm32.6-30.5c0 9.5 14.4 9.5 14.4 0s-14.4-9.5-14.4 0zM184.8 87V37.5h-12.2V87h12.2zm22.8 0V61.8c0-7.5 5.1-13.8 12.6-13.8 7.8 0 11.9 5.7 11.9 13.2V87h12.2V61.1c0-15.5-9.3-24.2-20.9-24.2-6.2 0-11.2 2.5-16.2 7.4l-.8-6.7h-10.9V87h12.1zm72.1 1.3c7.5 0 16-2.6 21.2-8l-7.8-7.7c-2.8 2.9-8.7 4.6-13.2 4.6-8.6 0-13.9-4.4-14.7-10.5h38.5c1.9-20.3-8.4-30.5-24.9-30.5-16 0-26.2 10.8-26.2 25.8 0 15.8 10.1 26.3 27.1 26.3zM292 56.6h-26.6c1.8-6.4 7.2-9.6 13.8-9.6 7 0 12 3.2 12.8 9.6zm41.2 32.1c14.1 0 21.2-7.5 21.2-16.2 0-13.1-11.8-15.2-21.1-15.8-6.3-.4-9.2-2.2-9.2-5.4 0-3.1 3.2-4.9 9-4.9 4.7 0 8.7 1.1 12.2 4.4l6.8-8c-5.7-5-11.5-6.5-19.2-6.5-9 0-20.8 4-20.8 15.4 0 11.2 11.1 14.6 20.4 15.3 7 .4 9.8 1.8 9.8 5.2 0 3.6-4.3 6-8.9 5.9-5.5-.1-13.5-3-17-6.9l-6 8.7c7.2 7.5 15 8.8 22.8 8.8z" id="a"></path></defs><g fill="none" fill-rule="evenodd"><g fill="currentColor"><path d="M19.742 49h28.516L68 83H0l19.742-34z"></path><path d="M26 69h14v30H26V69zM4 50L33.127 0 63 50H4z"></path></g><g fill-rule="nonzero"><use fill="currentColor" xlink:href="#a"></use><use fill="currentColor" xlink:href="#a"></use></g></g></svg>
|
||||
<a id="back" href="/" class="hidden text-blue-500 underline">← Back</a>
|
||||
<h2 id="start" class="mb-1 font-bold text-neutral-900">Getting Started</h2>
|
||||
<ul id="gettingStarted" class="space-y-0.5 font-medium mb-5"></ul>
|
||||
<ul id="gettingStarted" class="space-y-1 font-medium mb-5">
|
||||
<li><a class="text-blue-500 underline" href="?start=introduction">Introduction</a></li>
|
||||
<li><a class="text-blue-500 underline" href="?start=how-to-use">How To Use</a></li>
|
||||
<li><a class="text-blue-500 underline" href="?start=contribution">Contribution</a></li>
|
||||
</ul>
|
||||
<h2 id="title" class="mb-1 font-bold text-neutral-900">Elements</h2>
|
||||
<ul id="elements" class="space-y-0.5 font-medium"></ul>
|
||||
<ul id="elements" class="space-y-1 font-medium"></ul>
|
||||
</div>
|
||||
<div id="content"></div>
|
||||
<script src="./main.js"></script>
|
||||
|
51
main.js
51
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);
|
||||
// });
|
||||
// });
|
||||
}
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user