diff --git a/src/framework.js b/src/framework.js deleted file mode 100644 index 5f289b3..0000000 --- a/src/framework.js +++ /dev/null @@ -1,168 +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; i < items.length; i++) { - if (items[i] instanceof attribute) { - this.attributes.push(items[i]); - } else if (items[i] instanceof property) { - 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 property) { - items[i].onPropertyChange.push((oldValue, newValue) => this.onClassChanged(oldValue, newValue)); - } else { - this.classes.push(items[i]); - } - } - - return this; - } - - div(...items) { - this.siblings.push(new div(...items)); - return this; - } - - p(...items) { - this.siblings.push(new p(...items)); - return this; - } - - construct(parent) { - if (!parent) { - parent = window.document.body; - } - - this.element = window.document.createElement(this.tagName); - parent.appendChild(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 collection || this.children[i].prototype instanceof collection || this.children[i].prototype.constructor === collection) { - this.children[i].construct(this.element); - } - } - - for (var i = 0; i < this.siblings.length; i++) { - if (this.siblings[i] instanceof String || typeof this.siblings[i] === 'string') { - this.parent.appendChild(document.createTextNode(this.siblings[i])); - } else if (this.siblings[i] instanceof collection || this.siblings[i].prototype instanceof collection || this.siblings[i].prototype.constructor === collection) { - this.siblings[i].construct(parent); - } - } - } - - onClassChanged(oldValue, newValue) { - console.log(`Class changed, oldValue: ${oldValue} newValue: ${newValue}`); - - if (oldValue && oldValue !== "" && oldValue !== " ") { - this.element.classList.remove(oldValue); - } - - if (newValue && newValue !== "" && newValue !== " ") { - this.element.classList.add(newValue); - } - } -} - -class div extends collection { - constructor(...items) { - super(items); - - this.tagName = "div"; - } -} - -class p extends collection { - constructor(...items) { - super(items); - - this.tagName = "p"; - } -} - -class h1 extends collection { - constructor(...items) { - super(items); - - this.tagName = "h1"; - } -} - -class propertyObserver extends collection { - constructor(property) { - super([]); - - this.property = property; - this.property.onPropertyChange.push((oldValue, newValue) => this.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 < this.onPropertyChange.length; i++) { - this.onPropertyChange[i](old, val); - } - } -} - -var prop = new property(); -var classProp = new property(); - -console.log("Property:"); -console.log(prop); - -console.log("Class Property:"); -console.log(classProp); - -var test = new div( - new h1("I am a heading").class(classProp), - new p(prop) -).div(new p("This is content")); - - -test.construct(window.document.body); - - -console.log(test); diff --git a/src/index.html b/src/index.html index 6911349..7d0a821 100644 --- a/src/index.html +++ b/src/index.html @@ -14,7 +14,7 @@ - + \ No newline at end of file diff --git a/src/WebComponentsPolyfill.js b/src/web-components-polyfill.js similarity index 100% rename from src/WebComponentsPolyfill.js rename to src/web-components-polyfill.js