Last active
April 19, 2017 05:43
-
-
Save stagfoo/467dab496939c0d472cb3adc47133daf to your computer and use it in GitHub Desktop.
ancient, a template and state setup for javascript 1.1
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| </head> | |
| <body> | |
| <div id="ancient"></div> | |
| <script src="index.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function ancient() { | |
| this.state = []; | |
| this.currentView; | |
| this.errorView; | |
| this.calls; | |
| this.updated; | |
| function cevent(name) { var ev = document.createEvent('Event'); ev.initEvent(name, true, true); return ev } | |
| this.events = { | |
| view: cevent('VIEW'), | |
| render: cevent('RENDER'), | |
| mutate: cevent('MUTATE'), | |
| callAPI: cevent('CALL_API'), | |
| storeAPI: cevent('STORE_API'), | |
| }; | |
| this.dispatch = function(event){ | |
| console.log('DISPATCH: '+event) | |
| document.querySelector(this.anchor).dispatchEvent(this.events[event]); | |
| } | |
| this.anchor = false; | |
| this.get = function (tag) { | |
| return document.querySelector(this.anchor + ' ' + tag); | |
| }; | |
| } | |
| ancient.prototype.view = function (name) { | |
| this.currentView = this.templates[name]; | |
| if (this.anchor !== false) { | |
| this.render(); | |
| this.dispatch('view') | |
| } | |
| }; | |
| ancient.prototype.bind = function (type, target, callback) { | |
| if (this.get(target)) { | |
| this.get(target).addEventListener(type, callback); | |
| } else { | |
| setTimeout(function () { | |
| this.get(target).addEventListener(type, callback); | |
| }, 3000); | |
| } | |
| }; | |
| ancient.prototype.use = function (settings) { | |
| this.state = settings.state; | |
| this.templates = settings.templates; | |
| this.errorView = settings.templates.error; | |
| this.calls = settings.network; | |
| }; | |
| ancient.prototype.callAPI = function (name, callback) { | |
| var set = this.calls[name]; | |
| var xhr = new XMLHttpRequest(); | |
| xhr.addEventListener('load', callback); | |
| xhr.open(set.method, set.url, true); | |
| xhr.withCredentials = true; | |
| xhr.send(null); | |
| this.dispatch('callAPI') | |
| }; | |
| ancient.prototype.mutate = function (l, d) { | |
| this.state[l] = d; | |
| this.dispatch('mutate') | |
| }; | |
| ancient.prototype.render = function (l) { | |
| if (this.anchor === false) { | |
| this.anchor = l; | |
| } | |
| if (this.currentView) { | |
| document.querySelector(this.anchor).innerHTML = this.currentView(this.state); | |
| } else { | |
| document.querySelector(this.anchor).innerHTML = this.errorView(this.state); | |
| } | |
| }; | |
| ancient.prototype.storeAPI = function (respond, namespace) { | |
| if (typeof this.state.respond !== 'object') { | |
| this.state.respond = {} | |
| } | |
| if (this.calls[namespace] !== true) { | |
| this.state.respond[namespace] = JSON.parse(respond); | |
| // document.querySelector(this.anchor).dispatchEvent(this.events.storeAPI); | |
| this.dispatch('storeAPI') | |
| this.calls[namespace] = true; | |
| console.log(namespace, 'UPDATED', this.state); | |
| } | |
| }; | |
| function remove(element) { | |
| element.parentNode.removeChild(element); | |
| } | |
| function removeAll(target) { | |
| target.forEach(function (element) { | |
| remove(element); | |
| }, this); | |
| } | |
| var app = new ancient(); | |
| function exampleView() { | |
| function afterCall() { | |
| app.storeAPI(this.responseText, 'example') | |
| //State Mutation | |
| var exampleState = app.state.respond['example'] | |
| app.mutate('example', exampleState.example) | |
| app.view('member'); | |
| //Display Changes | |
| // eg error or hide elements | |
| // Button Binding | |
| app.bind( | |
| 'click', | |
| '.example-button', | |
| function () { anotherView(); } | |
| ); | |
| } | |
| app.calls['example'] !== true ? app.callAPI('example', afterCall) : afterCall() | |
| } | |
| var s = [] | |
| var t = { | |
| 'default': topTemplate, | |
| 'top': topTemplate, | |
| 'member': memberTemplate, | |
| 'discover': discoverTemplate, | |
| 'error': function() { return null } | |
| } | |
| var n = { | |
| 'top': { | |
| "url": "", | |
| "method": "GET", | |
| 'xhrFields': { | |
| 'withCredentials': true | |
| } | |
| }, | |
| 'member': { | |
| "url": "", | |
| "method": "POST", | |
| 'xhrFields': { | |
| 'withCredentials': true | |
| } | |
| }, | |
| 'discover': {}, | |
| } | |
| app.use({ | |
| 'state':s, | |
| 'templates':t, | |
| 'network':n, | |
| }) | |
| app.render('#ancient'); | |
| exampleView(); |
Create a proper workflow using events
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Create Virutal Dom using
document.createElement('main').innerHTMLto convert the html into nodeList and mutate the javascript only version and then simply replace the whole appwrap createElement to shorter funk