diff --git a/.gitignore b/.gitignore index da42d6c..a27ab17 100644 --- a/.gitignore +++ b/.gitignore @@ -259,11 +259,6 @@ paket-files/ __pycache__/ *.pyc -#Ignore builds for the Competitrax WebApp -Source Code/Competitrax.WebApp/dev -Source Code/Competitrax.WebApp/dist -Source Code/Competitrax.WebApp/prod - -Source Code/Competitrax.Website/dev -Source Code/Competitrax.Website/dist -Source Code/Competitrax.Website/prod \ No newline at end of file +#Ignore builds for the web code +dev +prod \ No newline at end of file diff --git a/dev/framework.js b/dev/framework.js deleted file mode 100644 index fc50d97..0000000 --- a/dev/framework.js +++ /dev/null @@ -1,2 +0,0 @@ -class attribute{constructor(name,value){this.name=name,this.value=value}}class collection{constructor(items){this.siblings=[],this.children=[],this.attributes=[],this.classes=[],this.tagName=null,this.element=null;for(var i=0;ithis.onClassChanged(oldValue,newValue)):this.classes.push(items[i]);return this}div(...items){return this.siblings.push(new div(...items)),this}p(...items){return this.siblings.push(new p(...items)),this}construct(parent){parent||(parent=window.document.body),this.element=window.document.createElement(this.tagName),parent.appendChild(this.element);for(var i=0;ithis.onUpdateProperty(oldValue,newValue))}construct(parent){this.element=document.createTextNode(""),parent.appendChild(this.element)}onUpdateProperty(oldValue,newValue){this.element.nodeValue=newValue}}class property{constructor(){this.onPropertyChange=[],this._value=null}get value(){return this._value}set value(val){var old=this._value;this._value=val;for(var i=0;i Ignite-Html Test \ No newline at end of file diff --git a/src/WebComponentsPolyfill.js b/src/WebComponentsPolyfill.js new file mode 100644 index 0000000..a9f58c7 --- /dev/null +++ b/src/WebComponentsPolyfill.js @@ -0,0 +1,235 @@ +/** +@license @nocompile +Copyright (c) 2018 The Polymer Project Authors. All rights reserved. +This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt +The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt +Code distributed by Google as part of the polymer project is also +subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt +*/ +(function(){/* + + Copyright (c) 2016 The Polymer Project Authors. All rights reserved. + This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt + The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt + The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt + Code distributed by Google as part of the polymer project is also + subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt +*/ +'use strict';var q,aa="undefined"!=typeof window&&window===this?this:"undefined"!=typeof global&&null!=global?global:this,ba="function"==typeof Object.defineProperties?Object.defineProperty:function(a,b,c){a!=Array.prototype&&a!=Object.prototype&&(a[b]=c.value)};function ca(){ca=function(){};aa.Symbol||(aa.Symbol=da)}var da=function(){var a=0;return function(b){return"jscomp_symbol_"+(b||"")+a++}}(); +function ea(){ca();var a=aa.Symbol.iterator;a||(a=aa.Symbol.iterator=aa.Symbol("iterator"));"function"!=typeof Array.prototype[a]&&ba(Array.prototype,a,{configurable:!0,writable:!0,value:function(){return fa(this)}});ea=function(){}}function fa(a){var b=0;return ha(function(){return b"+this.innerHTML+""},set:function(a){if(this.parentNode){U.body.innerHTML=a;for(a=this.ownerDocument.createDocumentFragment();U.body.firstChild;)m.call(a,U.body.firstChild); +n.call(this.parentNode,a,this)}else throw Error("Failed to set the 'outerHTML' property on 'Element': This element has no parent node.");},configurable:!0})};p(a.prototype);Fc(a.prototype);a.b=function(c){c=b(c,"template");for(var d=0,e=c.length,f;d]/g, +l=function(a){switch(a){case "&":return"&";case "<":return"<";case ">":return">";case '"':return""";case "\u00a0":return" "}};xa=function(a){for(var b={},c=0;c";break a;case Node.TEXT_NODE:h=h.data;h=k&&of[k.localName]?h:h.replace(kb,l);break a;case Node.COMMENT_NODE:h="\x3c!--"+h.data+"--\x3e";break a;default:throw window.console.error(h),Error("not implemented");}}c+=h}return c}}if(c||v){a.a=function(a,b){var c=f.call(a,!1); +this.R&&this.R(c);b&&(m.call(c.content,f.call(a.content,!0)),lb(c.content,a.content));return c};var lb=function(c,d){if(d.querySelectorAll&&(d=b(d,"template"),0!==d.length)){c=b(c,"template");for(var e=0,f=c.length,g,h;e]/g;function mc(a){switch(a){case "&":return"&";case "<":return"<";case ">":return">";case '"':return""";case "\u00a0":return" "}}function nc(a){for(var b={},c=0;c";break a;case Node.TEXT_NODE:h=h.data;h=k&&pc[k.localName]?h:h.replace(lc,mc);break a;case Node.COMMENT_NODE:h="\x3c!--"+h.data+"--\x3e";break a;default:throw window.console.error(h), +Error("not implemented");}}c+=h}return c};var E={},H=document.createTreeWalker(document,NodeFilter.SHOW_ALL,null,!1),I=document.createTreeWalker(document,NodeFilter.SHOW_ELEMENT,null,!1);function rc(a){var b=[];H.currentNode=a;for(a=H.firstChild();a;)b.push(a),a=H.nextSibling();return b}E.parentNode=function(a){H.currentNode=a;return H.parentNode()};E.firstChild=function(a){H.currentNode=a;return H.firstChild()};E.lastChild=function(a){H.currentNode=a;return H.lastChild()};E.previousSibling=function(a){H.currentNode=a;return H.previousSibling()}; +E.nextSibling=function(a){H.currentNode=a;return H.nextSibling()};E.childNodes=rc;E.parentElement=function(a){I.currentNode=a;return I.parentNode()};E.firstElementChild=function(a){I.currentNode=a;return I.firstChild()};E.lastElementChild=function(a){I.currentNode=a;return I.lastChild()};E.previousElementSibling=function(a){I.currentNode=a;return I.previousSibling()};E.nextElementSibling=function(a){I.currentNode=a;return I.nextSibling()}; +E.children=function(a){var b=[];I.currentNode=a;for(a=I.firstChild();a;)b.push(a),a=I.nextSibling();return b};E.innerHTML=function(a){return qc(a,function(a){return rc(a)})};E.textContent=function(a){switch(a.nodeType){case Node.ELEMENT_NODE:case Node.DOCUMENT_FRAGMENT_NODE:a=document.createTreeWalker(a,NodeFilter.SHOW_TEXT,null,!1);for(var b="",c;c=a.nextNode();)b+=c.nodeValue;return b;default:return a.nodeValue}};var J={},sc=B.I,tc=[Node.prototype,Element.prototype,HTMLElement.prototype];function K(a){var b;a:{for(b=0;bd.assignedNodes.length&&(d.da=!0)}d.da&&(d.da=!1,Nd(this,b))}a=this.m;b=[];for(d=0;db.indexOf(c))||b.push(c);for(a=0;a "+b}))}a=a.replace(og,function(a,b,c){return'[dir="'+c+'"] '+b+", "+b+'[dir="'+c+'"]'});return{value:a,Sa:b,stop:f}}function mg(a,b){a=a.split(pg);a[0]+=b;return a.join(pg)} +function lg(a,b){var c=a.match(qg);return(c=c&&c[2].trim()||"")?c[0].match(rg)?a.replace(qg,function(a,c,f){return b+f}):c.split(rg)[0]===b?c:sg:a.replace(hg,b)}function tg(a){a.selector===ug&&(a.selector="html")}Tf.prototype.c=function(a){return a.match(kg)?this.b(a,vg):mg(a.trim(),vg)};aa.Object.defineProperties(Tf.prototype,{a:{configurable:!0,enumerable:!0,get:function(){return"style-scope"}}}); +var fg=/:(nth[-\w]+)\(([^)]+)\)/,vg=":not(.style-scope)",dg=",",ig=/(^|[\s>+~]+)((?:\[.+?\]|[^\s>+~=[])+)/g,rg=/[[.:#*]/,hg=":host",ug=":root",kg="::slotted",gg=new RegExp("^("+kg+")"),qg=/(:host)(?:\(((?:\([^)(]*\)|[^)(]*)+?)\))/,ng=/(?:::slotted)(?:\(((?:\([^)(]*\)|[^)(]*)+?)\))/,og=/(.*):dir\((?:(ltr|rtl))\)/,bg=".",pg=":",Yf="class",sg="should_not_match",Vf=new Tf;function wg(a,b,c,d){this.K=a||null;this.b=b||null;this.sa=c||[];this.T=null;this.X=d||"";this.a=this.H=this.O=null}function xg(a){return a?a.__styleInfo:null}function yg(a,b){return a.__styleInfo=b}wg.prototype.c=function(){return this.K};wg.prototype._getStyleRules=wg.prototype.c;function zg(a){var b=this.matches||this.matchesSelector||this.mozMatchesSelector||this.msMatchesSelector||this.oMatchesSelector||this.webkitMatchesSelector;return b&&b.call(this,a)}var Ag=navigator.userAgent.match("Trident");function Bg(){}function Cg(a){var b={},c=[],d=0;Kf(a,function(a){Dg(a);a.index=d++;a=a.B.cssText;for(var c;c=Ef.exec(a);){var e=c[1];":"!==c[2]&&(b[e]=!0)}},function(a){c.push(a)});a.b=c;a=[];for(var e in b)a.push(e);return a} +function Dg(a){if(!a.B){var b={},c={};Eg(a,c)&&(b.J=c,a.rules=null);b.cssText=a.parsedCssText.replace(Hf,"").replace(Cf,"");a.B=b}}function Eg(a,b){var c=a.B;if(c){if(c.J)return Object.assign(b,c.J),!0}else{c=a.parsedCssText;for(var d;a=Cf.exec(c);){d=(a[2]||a[3]).trim();if("inherit"!==d||"unset"!==d)b[a[1].trim()]=d;d=!0}return d}} +function Fg(a,b,c){b&&(b=0<=b.indexOf(";")?Gg(a,b,c):Qf(b,function(b,e,f,g){if(!e)return b+g;(e=Fg(a,c[e],c))&&"initial"!==e?"apply-shim-inherit"===e&&(e="inherit"):e=Fg(a,c[f]||f,c)||f;return b+(e||"")+g}));return b&&b.trim()||""} +function Gg(a,b,c){b=b.split(";");for(var d=0,e,f;d *"===f||"html"===f,h=0===f.indexOf(":host")&&!g;"shady"===c&&(g=f===e+" > *."+e||-1!==f.indexOf("html"),h=!g&&0===f.indexOf(e));"shadow"===c&&(g=":host > *"===f||"html"===f,h=h&&!g);if(g||h)c=e,h&&(b.G||(b.G=cg(Vf,b,Vf.b,a?bg+a:"",e)),c=b.G||e),d({Za:c,Wa:h,wb:g})}} +function Jg(a,b){var c={},d={},e=b&&b.__cssBuild;Kf(b,function(b){Ig(a,b,e,function(e){zg.call(a.kb||a,e.Za)&&(e.Wa?Eg(b,c):Eg(b,d))})},null,!0);return{Ya:d,Va:c}} +function Kg(a,b,c,d){var e=Sf(b),f=ag(e.is,e.X),g=new RegExp("(?:^|[^.#[:])"+(b.extends?"\\"+f.slice(0,-1)+"\\]":f)+"($|[.:[\\s>+~])");e=xg(b).K;var h=Lg(e,d);return Zf(b,e,function(b){var e="";b.B||Dg(b);b.B.cssText&&(e=Gg(a,b.B.cssText,c));b.cssText=e;if(!T&&!Mf(b)&&b.cssText){var k=e=b.cssText;null==b.za&&(b.za=Ff.test(e));if(b.za)if(null==b.ea){b.ea=[];for(var r in h)k=h[r],k=k(e),e!==k&&(e=k,b.ea.push(r))}else{for(r=0;r=m._useCount&&m.parentNode&&m.parentNode.removeChild(m));T?f.a?(f.a.textContent=e,d=f.a):e&&(d=Nf(e,h,a.shadowRoot,f.b)):d?d.parentNode|| +(Ag&&-1b&&-1==[34,35,60,62,63,96].indexOf(b)?a:encodeURIComponent(a)}function d(a){var b=a.charCodeAt(0);return 32b&&-1==[34,35,60,62,96].indexOf(b)?a:encodeURIComponent(a)}function e(a,e,g){function h(a){kb.push(a)}var k=e||"scheme start",v=0,p="",x=!1,U=!1,kb=[];a:for(;(void 0!=a[v-1]||0==v)&&!this.h;){var l=a[v];switch(k){case "scheme start":if(l&&r.test(l))p+= +l.toLowerCase(),k="scheme";else if(e){h("Invalid scheme.");break a}else{p="";k="no scheme";continue}break;case "scheme":if(l&&G.test(l))p+=l.toLowerCase();else if(":"==l){this.g=p;p="";if(e)break a;void 0!==m[this.g]&&(this.D=!0);k="file"==this.g?"relative":this.D&&g&&g.g==this.g?"relative or authority":this.D?"authority first slash":"scheme data"}else if(e){void 0!=l&&h("Code point not allowed in scheme: "+l);break a}else{p="";v=0;k="no scheme";continue}break;case "scheme data":"?"==l?(this.u="?", +k="query"):"#"==l?(this.C="#",k="fragment"):void 0!=l&&"\t"!=l&&"\n"!=l&&"\r"!=l&&(this.qa+=c(l));break;case "no scheme":if(g&&void 0!==m[g.g]){k="relative";continue}else h("Missing scheme."),f.call(this),this.h=!0;break;case "relative or authority":if("/"==l&&"/"==a[v+1])k="authority ignore slashes";else{h("Expected /, got: "+l);k="relative";continue}break;case "relative":this.D=!0;"file"!=this.g&&(this.g=g.g);if(void 0==l){this.i=g.i;this.s=g.s;this.j=g.j.slice();this.u=g.u;this.v=g.v;this.f=g.f; +break a}else if("/"==l||"\\"==l)"\\"==l&&h("\\ is an invalid code point."),k="relative slash";else if("?"==l)this.i=g.i,this.s=g.s,this.j=g.j.slice(),this.u="?",this.v=g.v,this.f=g.f,k="query";else if("#"==l)this.i=g.i,this.s=g.s,this.j=g.j.slice(),this.u=g.u,this.C="#",this.v=g.v,this.f=g.f,k="fragment";else{k=a[v+1];var F=a[v+2];if("file"!=this.g||!r.test(l)||":"!=k&&"|"!=k||void 0!=F&&"/"!=F&&"\\"!=F&&"?"!=F&&"#"!=F)this.i=g.i,this.s=g.s,this.v=g.v,this.f=g.f,this.j=g.j.slice(),this.j.pop();k= +"relative path";continue}break;case "relative slash":if("/"==l||"\\"==l)"\\"==l&&h("\\ is an invalid code point."),k="file"==this.g?"file host":"authority ignore slashes";else{"file"!=this.g&&(this.i=g.i,this.s=g.s,this.v=g.v,this.f=g.f);k="relative path";continue}break;case "authority first slash":if("/"==l)k="authority second slash";else{h("Expected '/', got: "+l);k="authority ignore slashes";continue}break;case "authority second slash":k="authority ignore slashes";if("/"!=l){h("Expected '/', got: "+ +l);continue}break;case "authority ignore slashes":if("/"!=l&&"\\"!=l){k="authority";continue}else h("Expected authority, got: "+l);break;case "authority":if("@"==l){x&&(h("@ already seen."),p+="%40");x=!0;for(l=0;l { + Object.defineProperty(this, propName, { + get: function () { + return this[`_${propName}`]; + }, + + set: function (value) { + this[`_${propName}`].value = value; + } + }); + })(props[i]); + } + } + + connectedCallback() { + this.template = new IgniteTemplate(); + this.template.element = this; + + this.render().construct(this); + } + + render() { + return null; + } +} + +export { + IgniteElement +}; \ No newline at end of file diff --git a/src/ignite-html.js b/src/ignite-html.js new file mode 100644 index 0000000..0a5d1d7 --- /dev/null +++ b/src/ignite-html.js @@ -0,0 +1,28 @@ +class IgniteProperty { + constructor() { + this.onPropertyChange = []; + this._value = null; + } + + get value() { + return this._value; + } + + set value(val) { + var old = this._value; + this._value = val; + + for (var i = 0; i < this.onPropertyChange.length; i++) { + this.onPropertyChange[i](old, val); + } + } +} + +class IgniteAttribute { + +} + +export { + IgniteProperty, + IgniteAttribute +}; \ No newline at end of file diff --git a/src/ignite-template.js b/src/ignite-template.js new file mode 100644 index 0000000..f035ba6 --- /dev/null +++ b/src/ignite-template.js @@ -0,0 +1,226 @@ +import { IgniteProperty, IgniteAttribute } from './ignite-html.js'; + +class IgniteTemplate { + constructor(items) { + this.siblings = []; + this.children = []; + this.attributes = {}; + this.classes = []; + this.tagName = null; + this.element = null; + this.properties = {}; + + if (items) { + for (var i = 0; i < items.length; i++) { + if (items[i] instanceof IgniteAttribute) { + this.attributes.push(items[i]); + } else if (items[i] instanceof IgniteProperty) { + this.children.push(new propertyObserver(items[i])); + } else { + this.children.push(items[i]); + } + } + } + } + + class(...items) { + for (var i = 0; i < items.length; i++) { + if (items[i] instanceof IgniteProperty) { + items[i].onPropertyChange.push((oldValue, newValue) => this.onClassChanged(oldValue, newValue)); + this.classes.push(items[i].value); + } else { + this.classes.push(items[i]); + } + } + + return this; + } + + attribute(name, value) { + if (value instanceof IgniteProperty) { + value.onPropertyChange.push((oldValue, newValue) => this.onAttributeChanged(oldValue, newValue, name)); + this.attributes[name] = value.value; + } else { + this.attributes[name] = value; + } + + return this; + } + + property(name, value) { + if (value instanceof IgniteProperty) { + value.onPropertyChange.push((oldValue, newValue) => this.onPropertyChanged(oldValue, newValue, name)); + this.properties[name] = value.value; + } else { + this.properties[name] = value; + } + + return this; + } + + child(...items) { + this.children = this.children.concat(items); + + return this; + } + + construct(parent) { + //Construct this element if we haven't already + if (!this.element) { + this.element = window.document.createElement(this.tagName); + parent.appendChild(this.element); + } + + //Set the classes on this element + for (var i = 0; i < this.classes.length; i++) { + if (this.classes[i] !== null && this.classes[i] !== undefined) { + this.element.classList.add(this.classes[i]); + } + } + + //Set the attributes on this element + var keys = Object.keys(this.attributes); + for (var i = 0; i < keys.length; i++) { + if (this.attributes[keys[i]] !== null && this.attributes[keys[i]] !== undefined) { + this.element.setAttribute(keys[i], this.attributes[keys[i]]); + } + } + + //Set the properties on this element + var keys = Object.keys(this.properties); + for (var i = 0; i < keys.length; i++) { + this.element[keys[i]] = this.properties[keys[i]]; + } + + //Construct the children under this element + for (var i = 0; i < this.children.length; i++) { + if (this.children[i] instanceof String || typeof this.children[i] === 'string') { + this.element.appendChild(document.createTextNode(this.children[i])); + } else if (this.children[i] instanceof IgniteTemplate || this.children[i].prototype instanceof IgniteTemplate) { + this.children[i].construct(this.element); + } + } + } + + onClassChanged(oldValue, newValue) { + console.log(`Class changed, oldValue: ${oldValue} newValue: ${newValue}`); + + if (oldValue !== null && oldValue !== undefined && oldValue !== "" && oldValue !== " ") { + this.element.classList.remove(oldValue); + } + + if (newValue !== null && newValue !== undefined && newValue !== "" && newValue !== " ") { + this.element.classList.add(newValue); + } + } + + onAttributeChanged(oldValue, newValue, attributeName) { + console.log(`Attribute changed, oldValue: ${oldValue} newValue: ${newValue} attribute: ${attributeName}`); + + if (newValue == null || newValue == undefined) { + this.element.removeAttribute(attributeName); + } else { + this.element.setAttribute(attributeName, newValue); + } + } + + onPropertyChanged(oldValue, newValue, propertyName) { + console.log(`Property changed, oldValue: ${oldValue} newValue: ${newValue} property: ${propertyName}`); + this.properties[propertyName] = newValue; + this.element[propertyName] = newValue; + } +} + +class div extends IgniteTemplate { + constructor(...items) { + super(items); + + this.tagName = "div"; + } +} + +class a extends IgniteTemplate { + constructor(...items) { + super(items); + + this.tagName = "a"; + } +} + +class html extends IgniteTemplate { + constructor(code) { + super([]); + this.code = code; + } + + construct(parent) { + if (!parent) { + parent = window.document.body; + } + + parent.insertAdjacentHTML('beforeend', this.code); + } +} + +class list extends IgniteTemplate { + constructor(list, forEach) { + super([]); + + if (list instanceof IgniteProperty) { + list.onPropertyChange.push((oldValue, newValue) => { + this.list = list.value; + this.construct(null); //If the list changed, reconstruct this template + }); + + this.list = list.value; + } else { + this.list = list; + } + + this.forEach = forEach; + this.elements = []; + } + + construct(parent) { + if (!this.element) { + this.element = window.document.createTextNode(""); //Use a textnode as our placeholder + parent.appendChild(this.element); + } + + //If we already have elements we created, destroy them. + if (this.elements.length > 0) { + for (var i = 0; i < this.elements.length; i++) { + this.elements[i].remove(); + } + this.elements = []; + } + + //Create a temporary container + var container = window.document.createElement("div"); + + //Construct all the items in our list and use the container + if (this.list) { + for (var i = 0; i < this.list.length; i++) { + this.forEach(this.list[i]).construct(container); + } + } + + //If we have any child nodes in the container, save the element, and add it after our placeholder + while (container.childNodes.length > 0) { + this.elements.push(container.childNodes[0]); + this.element.parentElement.insertBefore(container.childNodes[0], this.element); + } + + //Make sure we cleanup the container to be safe. + container.remove(); + container = null; + } +} + +export { + IgniteTemplate, + div, + html, + list, + a +}; \ No newline at end of file diff --git a/src/index.html b/src/index.html index 8a62316..ddb7b2b 100644 --- a/src/index.html +++ b/src/index.html @@ -12,6 +12,7 @@ - + + \ No newline at end of file diff --git a/src/main-app.js b/src/main-app.js new file mode 100644 index 0000000..979aedc --- /dev/null +++ b/src/main-app.js @@ -0,0 +1,27 @@ +import { IgniteElement } from './ignite-element.js'; +import { IgniteTemplate, div } from './ignite-template.js'; +import { Sheet } from './sheet.js'; + +class MainApp extends IgniteElement { + constructor() { + super(); + + this.title = "Default Title"; + this.name = "Default Name"; + this.href = "www.overrided.com"; + } + + properties() { + return [ + "title", + "name", + "href" + ]; + } + + render() { + return new Sheet().property("name", this.name).property("href", this.href); + } +} + +customElements.define("main-app", MainApp); \ No newline at end of file diff --git a/src/sheet.js b/src/sheet.js new file mode 100644 index 0000000..690d97e --- /dev/null +++ b/src/sheet.js @@ -0,0 +1,48 @@ +import { IgniteElement } from './ignite-element.js'; +import { IgniteTemplate, div, html, list, a } from './ignite-template.js'; + +class Sheet extends IgniteElement { + constructor() { + super(); + + this.show = false; + this.items = []; + this.href = "www.google.com"; + } + + properties() { + return [ + "show", + "name", + "items", + "href" + ]; + } + + render() { + return this.template + .class(this.show) + .child( + new div( + new html("

this is before

"), + new list(this.items, (item) => { + return new html(`

${item}

`) + }), + new html("

this is after

"), + new a("this is a link").attribute("href", this.href) + ) + ); + } +} + +class SheetTemplate extends IgniteTemplate { + constructor(...items) { + super(items); + + this.tagName = "md-sheet"; + } +} + +customElements.define("md-sheet", Sheet); + +export { SheetTemplate as Sheet }; \ No newline at end of file