Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

JS style cleanup

  • Loading branch information...
commit 1535b941bc283e54cc8d58cae8fab771fb177de6 1 parent 4df19cf
Eric Bidelman ebidel authored

Showing 1 changed file with 177 additions and 180 deletions. Show diff stats Hide diff stats

  1. +177 180 src/components-polyfill.js
357 src/components-polyfill.js
@@ -5,224 +5,221 @@ var scope = scope || {};
5 5 var SCRIPT_SHIM = ['(function(){\n', 1, '\n}).call(this.element);'];
6 6
7 7 if (!window.WebKitShadowRoot) {
8   - console.error('Shadow DOM support is required.');
9   - return;
  8 + console.error('Shadow DOM support is required.');
  9 + return;
10 10 }
11 11
12 12
13   -scope.HTMLElementElement = function(name, tagName, declaration)
14   -{
15   - this.name = name;
16   - this.extends = tagName;
17   - this.lifecycle = this.lifecycle.bind(declaration);
  13 +scope.HTMLElementElement = function(name, tagName, declaration) {
  14 + this.name = name;
  15 + this.extends = tagName;
  16 + this.lifecycle = this.lifecycle.bind(declaration);
18 17 }
19 18
20 19 scope.HTMLElementElement.prototype = {
21   - __proto__: HTMLElement.prototype,
22   - lifecycle: function(dict)
23   - {
24   - this.created = dict.created || nil;
25   - this.inserted = dict.inserted || nil;
26   - this.attributeChanged = dict.attributeChanged || nil;
27   -
28   - // TODO: Implement remove lifecycle methods.
29   - //this.removed = dict.removed || nil;
30   - }
  20 + __proto__: HTMLElement.prototype,
  21 + lifecycle: function(dict) {
  22 + this.created = dict.created || nil;
  23 + this.inserted = dict.inserted || nil;
  24 + this.attributeChanged = dict.attributeChanged || nil;
  25 +
  26 + // TODO: Implement remove lifecycle methods.
  27 + //this.removed = dict.removed || nil;
  28 + }
31 29 };
32 30
33 31
34   -scope.Declaration = function(name, tagName)
35   -{
36   - this.elementPrototype = Object.create(this.prototypeFromTagName(tagName));
37   - this.element = new scope.HTMLElementElement(name, tagName, this);
38   - this.element.generatedConstructor = this.generateConstructor();
39   - // Hard-bind the following methods to "this":
40   - this.morph = this.morph.bind(this);
  32 +scope.Declaration = function(name, tagName) {
  33 + this.elementPrototype = Object.create(this.prototypeFromTagName(tagName));
  34 + this.element = new scope.HTMLElementElement(name, tagName, this);
  35 + this.element.generatedConstructor = this.generateConstructor();
  36 + // Hard-bind the following methods to "this":
  37 + this.morph = this.morph.bind(this);
41 38 }
42 39
43 40 scope.Declaration.prototype = {
44   - generateConstructor: function()
45   - {
46   - var tagName = this.element.extends;
47   - var created = this.created;
48   - var extended = function()
49   - {
50   - var element = document.createElement(tagName);
51   - extended.prototype.__proto__ = element.__proto__;
52   - element.__proto__ = extended.prototype;
53   - created.call(element);
54   - }
55   - extended.prototype = this.elementPrototype;
56   - return extended;
57   - },
58   - evalScript: function(script)
59   - {
60   - //FIXME: Add support for external js loading.
61   - SCRIPT_SHIM[1] = script.textContent;
62   - eval(SCRIPT_SHIM.join(''));
63   - },
64   - addTemplate: function(template)
65   - {
66   - this.template = template;
67   -
68   - },
69   - morph: function(element)
70   - {
71   - // FIXME: We shouldn't be updating __proto__ like this on each morph.
72   - this.element.generatedConstructor.prototype.__proto__ = document.createElement(this.element.extends);
73   - element.__proto__ = this.element.generatedConstructor.prototype;
74   - var shadowRoot = this.createShadowRoot(element);
75   -
76   - // Fire created event.
77   - this.created && this.created.call(element, shadowRoot);
78   - this.inserted && this.inserted.call(element, shadowRoot);
79   -
80   - // Setup mutation observer for attribute changes.
81   - if (this.attributeChanged) {
82   - var observer = new WebKitMutationObserver(function(mutations) {
83   - mutations.forEach(function(m) {
84   - this.attributeChanged(m.attributeName, m.oldValue,
85   - m.target.getAttribute(m.attributeName));
86   - }.bind(this));
87   - }.bind(this));
88   -
89   - // TOOD: spec isn't clear if it's changes to the custom attribute
90   - // or any attribute in the subtree.
91   - observer.observe(shadowRoot.host, {
92   - attributes: true,
93   - attributeOldValue: true
94   - });
95   - }
96   - },
97   - createShadowRoot: function(element)
98   - {
99   - if (!this.template) {
100   - return;
101   - }
102 41
103   - var shadowRoot = new WebKitShadowRoot(element);
104   - [].forEach.call(this.template.childNodes, function(node) {
105   - shadowRoot.appendChild(node.cloneNode(true));
106   - });
  42 + generateConstructor: function() {
  43 + var tagName = this.element.extends;
  44 + var created = this.created;
  45 + var extended = function() {
  46 + var element = document.createElement(tagName);
  47 + extended.prototype.__proto__ = element.__proto__;
  48 + element.__proto__ = extended.prototype;
  49 + created.call(element);
  50 + }
  51 + extended.prototype = this.elementPrototype;
  52 + return extended;
  53 + },
  54 +
  55 + evalScript: function(script) {
  56 + //FIXME: Add support for external js loading.
  57 + SCRIPT_SHIM[1] = script.textContent;
  58 + eval(SCRIPT_SHIM.join(''));
  59 + },
  60 +
  61 + addTemplate: function(template) {
  62 + this.template = template;
  63 + },
  64 +
  65 + morph: function(element) {
  66 + // FIXME: We shouldn't be updating __proto__ like this on each morph.
  67 + this.element.generatedConstructor.prototype.__proto__ = document.createElement(this.element.extends);
  68 + element.__proto__ = this.element.generatedConstructor.prototype;
  69 + var shadowRoot = this.createShadowRoot(element);
  70 +
  71 + // Fire created event.
  72 + this.created && this.created.call(element, shadowRoot);
  73 + this.inserted && this.inserted.call(element, shadowRoot);
  74 +
  75 + // Setup mutation observer for attribute changes.
  76 + if (this.attributeChanged) {
  77 + var observer = new WebKitMutationObserver(function(mutations) {
  78 + mutations.forEach(function(m) {
  79 + this.attributeChanged(m.attributeName, m.oldValue,
  80 + m.target.getAttribute(m.attributeName));
  81 + }.bind(this));
  82 + }.bind(this));
  83 +
  84 + // TOOD: spec isn't clear if it's changes to the custom attribute
  85 + // or any attribute in the subtree.
  86 + observer.observe(shadowRoot.host, {
  87 + attributes: true,
  88 + attributeOldValue: true
  89 + });
  90 + }
  91 + },
107 92
108   - return shadowRoot;
109   - },
110   - prototypeFromTagName: function(tagName)
111   - {
112   - return Object.getPrototypeOf(document.createElement(tagName));
  93 + createShadowRoot: function(element) {
  94 + if (!this.template) {
  95 + return;
113 96 }
  97 +
  98 + var shadowRoot = new WebKitShadowRoot(element);
  99 + [].forEach.call(this.template.childNodes, function(node) {
  100 + shadowRoot.appendChild(node.cloneNode(true));
  101 + });
  102 +
  103 + return shadowRoot;
  104 + },
  105 +
  106 + prototypeFromTagName: function(tagName) {
  107 + return Object.getPrototypeOf(document.createElement(tagName));
  108 + }
114 109 }
115 110
116 111
117   -scope.DeclarationFactory = function()
118   -{
119   - // Hard-bind the following methods to "this":
120   - this.createDeclaration = this.createDeclaration.bind(this);
  112 +scope.DeclarationFactory = function() {
  113 + // Hard-bind the following methods to "this":
  114 + this.createDeclaration = this.createDeclaration.bind(this);
121 115 }
122 116
123 117 scope.DeclarationFactory.prototype = {
124   - // Called whenever each Declaration instance is created.
125   - oncreate: null,
126   - createDeclaration: function(element)
127   - {
128   - var name = element.getAttribute('name');
129   - if (!name) {
130   - // FIXME: Make errors more friendly.
131   - console.error('name attribute is required.')
132   - return;
133   - }
134   - var tagName = element.getAttribute('extends');
135   - if (!tagName) {
136   - // FIXME: Make it work with any element.
137   - // FIXME: Make errors more friendly.
138   - console.error('extends attribute is required.');
139   - return;
140   - }
141   - var constructorName = element.getAttribute('constructor');
142   - var declaration = new scope.Declaration(name, tagName, constructorName);
143   - if (constructorName)
144   - window[constructorName] = declaration.element.generatedConstructor;
145   -
146   - [].forEach.call(element.querySelectorAll('script'), declaration.evalScript, declaration);
147   - var template = element.querySelector('template');
148   - template && declaration.addTemplate(template);
149   - this.oncreate && this.oncreate(declaration);
  118 + // Called whenever each Declaration instance is created.
  119 + oncreate: null,
  120 +
  121 + createDeclaration: function(element) {
  122 + var name = element.getAttribute('name');
  123 + if (!name) {
  124 + // FIXME: Make errors more friendly.
  125 + console.error('name attribute is required.')
  126 + return;
  127 + }
  128 + var tagName = element.getAttribute('extends');
  129 + if (!tagName) {
  130 + // FIXME: Make it work with any element.
  131 + // FIXME: Make errors more friendly.
  132 + console.error('extends attribute is required.');
  133 + return;
  134 + }
  135 + var constructorName = element.getAttribute('constructor');
  136 + var declaration = new scope.Declaration(name, tagName, constructorName);
  137 + if (constructorName) {
  138 + window[constructorName] = declaration.element.generatedConstructor;
150 139 }
  140 +
  141 + [].forEach.call(element.querySelectorAll('script'), declaration.evalScript,
  142 + declaration);
  143 + var template = element.querySelector('template');
  144 + template && declaration.addTemplate(template);
  145 + this.oncreate && this.oncreate(declaration);
  146 + }
151 147 }
152 148
153 149
154   -scope.Parser = function()
155   -{
156   - this.parse = this.parse.bind(this);
  150 +scope.Parser = function() {
  151 + this.parse = this.parse.bind(this);
157 152 }
158 153
159 154 scope.Parser.prototype = {
160   - // Called for each element that's parsed.
161   - onparse: null,
162   - parse: function(string)
163   - {
164   - var doc = document.implementation.createHTMLDocument();
165   - doc.body.innerHTML = string;
166   - [].forEach.call(doc.querySelectorAll('element'), function(element) {
167   - this.onparse && this.onparse(element);
168   - }, this);
169   -
170   - }
  155 + // Called for each element that's parsed.
  156 + onparse: null,
  157 +
  158 + parse: function(string) {
  159 + var doc = document.implementation.createHTMLDocument();
  160 + doc.body.innerHTML = string;
  161 + [].forEach.call(doc.querySelectorAll('element'), function(element) {
  162 + this.onparse && this.onparse(element);
  163 + }, this);
  164 + }
171 165 }
172 166
173 167
174   -scope.Loader = function()
175   -{
176   - this.start = this.start.bind(this);
  168 +scope.Loader = function() {
  169 + this.start = this.start.bind(this);
177 170 }
178 171
179 172 scope.Loader.prototype = {
180   - // Called for each loaded declaration.
181   - onload: null,
182   - onerror: null,
183   - start: function()
184   - {
185   - [].forEach.call(document.querySelectorAll('link[rel=components]'), function(link) {
186   - this.load(link.href);
187   - }, this);
188   - },
189   - load: function(url)
190   - {
191   - var request = new XMLHttpRequest();
192   - var loader = this;
193   -
194   - request.open('GET', url);
195   - request.addEventListener('readystatechange', function(e) {
196   - if(request.readyState === 4){
197   - if ( request.status >= 200 && request.status < 300 || request.status === 304 ){
198   - loader.onload && loader.onload(request.response);
199   - } else {
200   - loader.onerror && loader.onerror(request.status, request);
201   - }
202   - }
203   - });
204   - request.send();
205   - }
  173 + // Called for each loaded declaration.
  174 + onload: null,
  175 + onerror: null,
  176 +
  177 + start: function() {
  178 + [].forEach.call(document.querySelectorAll('link[rel=components]'), function(link) {
  179 + this.load(link.href);
  180 + }, this);
  181 + },
  182 +
  183 + load: function(url) {
  184 + var request = new XMLHttpRequest();
  185 + var loader = this;
  186 +
  187 + request.open('GET', url);
  188 + request.addEventListener('readystatechange', function(e) {
  189 + if (request.readyState === 4) {
  190 + if (request.status >= 200 && request.status < 300 || request.status === 304) {
  191 + loader.onload && loader.onload(request.response);
  192 + } else {
  193 + loader.onerror && loader.onerror(request.status, request);
  194 + }
  195 + }
  196 + });
  197 + request.send();
  198 + }
206 199 }
207 200
208   -scope.run = function()
209   -{
210   - var loader = new scope.Loader();
211   - document.addEventListener('DOMContentLoaded', loader.start);
212   - var parser = new scope.Parser();
213   - loader.onload = parser.parse;
214   - loader.onerror = function(status, resp){
215   - console.error("Unable to load component: Status " + status + " - " + resp.statusText);
216   - };
217   - var factory = new scope.DeclarationFactory();
218   - parser.onparse = factory.createDeclaration;
219   - factory.oncreate = function(declaration) {
220   - [].forEach.call(document.querySelectorAll(declaration.element.extends + '[is=' + declaration.element.name + ']'), declaration.morph);
221   - }
  201 +scope.run = function() {
  202 + var loader = new scope.Loader();
  203 + document.addEventListener('DOMContentLoaded', loader.start);
  204 + var parser = new scope.Parser();
  205 + loader.onload = parser.parse;
  206 + loader.onerror = function(status, resp) {
  207 + console.error("Unable to load component: Status " + status + " - " +
  208 + resp.statusText);
  209 + };
  210 +
  211 + var factory = new scope.DeclarationFactory();
  212 + parser.onparse = factory.createDeclaration;
  213 + factory.oncreate = function(declaration) {
  214 + [].forEach.call(document.querySelectorAll(
  215 + declaration.element.extends + '[is=' + declaration.element.name +
  216 + ']'), declaration.morph);
  217 + }
222 218 }
223 219
224   -if (!scope.runManually)
225   - scope.run();
  220 +if (!scope.runManually) {
  221 + scope.run();
  222 +}
226 223
227 224 function nil() {}
228 225

0 comments on commit 1535b94

Please sign in to comment.
Something went wrong with that request. Please try again.