diff --git a/template/components/card.html b/template/components/card.html new file mode 100644 index 0000000..43090ac --- /dev/null +++ b/template/components/card.html @@ -0,0 +1,3 @@ +
+

{{ title }}

+
\ No newline at end of file diff --git a/template/components/toolbar.html b/template/components/toolbar.html new file mode 100644 index 0000000..83c3cfc --- /dev/null +++ b/template/components/toolbar.html @@ -0,0 +1,5 @@ +
+
+

{{ name }}

+
+
\ No newline at end of file diff --git a/template/index.html b/template/index.html new file mode 100644 index 0000000..c96b084 --- /dev/null +++ b/template/index.html @@ -0,0 +1,44 @@ + + + + + + + App Test + + + + + + + + + + + + + + + + +

홈임

+ home + test + + + +

아무고토 없음

+ home + test + + + + + + +

영어 지원 안함 ㅅㄱ

+ + + + + \ No newline at end of file diff --git a/template/lang/en-home.html b/template/lang/en-home.html new file mode 100644 index 0000000..dae8948 --- /dev/null +++ b/template/lang/en-home.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/template/lang/ko-home.html b/template/lang/ko-home.html new file mode 100644 index 0000000..542d7c7 --- /dev/null +++ b/template/lang/ko-home.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/template/style.css b/template/style.css new file mode 100644 index 0000000..9162cc3 --- /dev/null +++ b/template/style.css @@ -0,0 +1,8 @@ +body{ + margin: 0; +} + +.toolbar{ + display: flex; + justify-content: space-between; +} \ No newline at end of file diff --git a/template/wade.js b/template/wade.js new file mode 100644 index 0000000..0186125 --- /dev/null +++ b/template/wade.js @@ -0,0 +1,170 @@ +(()=>{ + /** + * + * @param {*} template template to bind + * @param {*} data data to put in the template + * @param {*} attribute Variables to be used in templates + * @returns + */ + const placeholders = (template, data, attribute) => { + 'use strict'; + template = typeof (template) === 'function' ? template() : template; + if (['string', 'number'].indexOf(typeof template) === -1) throw 'WADE DOM : please provide a valid template!'; + if (!data) return template; + template = template.replace(/\{\{([^}]+)\}\}/g, function (match) { + match = match.slice(2, -2); + attribute = new RegExp(`${attribute}\\.`,"g"); + if (match.match(attribute)) { + match = match.replace(attribute,""); + var sub = match.split('.'); + if (sub.length > 1) { + var temp = data; + + sub.forEach(function (item) { + var item = item.trim(); + if (!temp[item]) { + temp = '{{' + match.trim() + '}}'; + return; + } + temp = temp[item]; + }); + return eval(`data.${match.trim()}`); + }else { + if(match.match(/\[.*\]/g)){ + return eval(`data.${match.trim()}`); + }; + if (!data[match.trim()]){ + return '{{' + match.trim() + '}}' + }else{ + return data[match.trim()]; + }; + }; + }else{ + return data; + } + + }); + return template; + }; + + const createComponent = (name, path) => { + if(!name.match(/\-/g)){ + console.error(`WADE Framework Error : An error occurred because the specified name "${name}" does not contain a '-'.`); + }else{ + if(name.match(/wade|dom/g)){ + console.error(`WADE Framework Error : The name you specify "${name}" can be used as a reserved word and cause errors in the DOM element. (Reserved word : wade | dom)`); + }; + customElements.define(`${name}`, class extends HTMLElement { + connectedCallback() { + let props = ``; + this.getAttributeNames().forEach(prop => { + props += ` ${prop}="${this.getAttribute(prop)}"`; + }); + let component = ` + + `; + + this.outerHTML = component; + }; + }); + } + }; + + customElements.define('wade-import', class extends HTMLElement { + connectedCallback() { + this.outerHTML = ""; + createComponent(this.getAttribute('name'), this.getAttribute('src')) + + }; + }); + + customElements.define('wade-head', class extends HTMLElement { + connectedCallback() { + this.outerHTML = ""; + }; + }); + + customElements.define('wade-app', class extends HTMLElement { + connectedCallback() { + let lang = navigator.language || navigator.userLanguage; + if (lang.match(this.getAttribute('lang'))) { + document.querySelector('html').lang = lang; + this.outerHTML = this.innerHTML; + }else{ + this.outerHTML = ""; + } + }; + }); + + customElements.define('wade-for', class extends HTMLElement { + connectedCallback() { + let forData = new Function(`return ${this.getAttribute('data')}`)() + let HTML = ""; + let innerHTML = this.innerHTML; + + forData.forEach((e)=>{ + HTML += placeholders(innerHTML,e,this.getAttribute('in')); + }); + + this.outerHTML = HTML; + + }; + }); + + // Routes + customElements.define('wade-routes', class extends HTMLElement { + connectedCallback() { + this.outerHTML = `
${this.innerHTML}
`; + }; + }); + + customElements.define('wade-route', class extends HTMLElement { + connectedCallback() { + let path = window.location.pathname; + + if(path == this.getAttribute('path')){ + this.outerHTML = this.innerHTML; + }else{ + this.outerHTML = ""; + } + + document.querySelectorAll(`.wade-router[href^="/"]`).forEach(el => + el.addEventListener("click", evt => { + evt.preventDefault(); + const {pathname: path} = new URL(evt.target.href); + window.history.pushState({path}, path, path); + document.querySelector('.wade-routes').innerHTML = this.innerHTML; + }) + ); + + }; + }); + + customElements.define('wade-link', class extends HTMLElement { + connectedCallback() { + this.outerHTML = `${this.innerHTML}`; + }; + }); + +})(); \ No newline at end of file