- Author:
- Andrea Giammarchi
- Twitter:
- @
- GitHub:
- WebReflection
- Facebook:
- Google+:
- +
- Reddit:
- /r/0
- Pouet:
- Website:
- webreflection.co.uk
- Compo:
- pure
- Demo link:
- https://js1k.com/2016-elemental/demo/2419
- Shortlink:
- https://js1k.com/2419
- Blog post:
- please update here!
- Bytes:
- 1024
- Chars:
- 1024
- Submission
var CE=function(c,p){var m=c.create,n=m(null),q=c.defineProperty,r=c.getOwnPropertyDescriptor,d=c.getOwnPropertyNames,e=c.getOwnPropertySymbols,t=e?function(a){return d(a).concat(e(a))}:d;return function(a){for(var b,c,d,h,g,k={},e=t(a),f=function(u){q(k,u,{enumerable:!0,writable:!0,value:r(a,b)})},l=0;l<e.length;l++)switch(b=e[l],b.toLowerCase()){case "name":c=a[b];break;case "stylesheet":g=a[b];break;case "extends":d="function"==typeof a[b]?a[b].prototype:a[b];break;case "constructor":h=a[b];f("createdCallback");
break;case "onattached":f("attachedCallback");break;case "onchanged":f("attributeChangedCallback");break;case "ondetached":f("detachedCallback");break;default:f(b)}g&&(k.createdCallback.value=function(){if(!(g in n)){var a=this.ownerDocument||document,b=g,c=a.head,a=a.createElement("link");a.rel="stylesheet";a.type="text/css";a.href=b;n[b]=c.insertBefore(a,c.lastChild)}h&&h.apply(this,arguments)});return document.registerElement(c||"ce-"+ ++p,{prototype:m(d||HTMLElement.prototype,k)})}}(Object,0);
- Description
- JS1K version of my DOMClass library. CustomElements for everyone.
This demo shows nothing but it creates a CE function capable of registering any CustomElement in a straight forward way, like it's already possible with the DOMClass utlity.
* simplified callbacks names
* the ability to smart lazy-load at runtime stylesheets per class
* automatic name generation
* basic extends functionality fo ruser defined classes
Example:
```js
var MyComponent = CE({
// optional, generated at runtime otherwise
name: 'my-component',
// optional, it loads only when the first <my-component> is created
styleSheet: 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'
// alias for createdCallback
constructor: function () {
console.log('created', arguments);
},
// alias for other not-so friendly methods
onAttached: function () {
console.log('attached', arguments);
},
onDetached: function () {
console.log('detached', arguments);
},
onChanged: function () {
console.log('attribute changed', arguments);
}
});
```
- Base64 encoded
dmFyIENFPWZ1bmN0aW9uKGMscCl7dmFyIG09Yy5jcmVhdGUsbj1tKG51bGwpLHE9Yy5kZWZpbmVQcm9wZXJ0eSxyPWMuZ2V0T3duUHJvcGVydHlEZXNjcmlwdG9yLGQ9Yy5nZXRPd25Qcm9wZXJ0eU5hbWVzLGU9Yy5nZXRPd25Qcm9wZXJ0eVN5bWJvbHMsdD1lP2Z1bmN0aW9uKGEpe3JldHVybiBkKGEpLmNvbmNhdChlKGEpKX06ZDtyZXR1cm4gZnVuY3Rpb24oYSl7Zm9yKHZhciBiLGMsZCxoLGcsaz17fSxlPXQoYSksZj1mdW5jdGlvbih1KXtxKGssdSx7ZW51bWVyYWJsZTohMCx3cml0YWJsZTohMCx2YWx1ZTpyKGEsYil9KX0sbD0wO2w8ZS5sZW5ndGg7bCsrKXN3aXRjaChiPWVbbF0sYi50b0xvd2VyQ2FzZSgpKXtjYXNlICJuYW1lIjpjPWFbYl07YnJlYWs7Y2FzZSAic3R5bGVzaGVldCI6Zz1hW2JdO2JyZWFrO2Nhc2UgImV4dGVuZHMiOmQ9ImZ1bmN0aW9uIj09dHlwZW9mIGFbYl0/YVtiXS5wcm90b3R5cGU6YVtiXTticmVhaztjYXNlICJjb25zdHJ1Y3RvciI6aD1hW2JdO2YoImNyZWF0ZWRDYWxsYmFjayIpOw0KYnJlYWs7Y2FzZSAib25hdHRhY2hlZCI6ZigiYXR0YWNoZWRDYWxsYmFjayIpO2JyZWFrO2Nhc2UgIm9uY2hhbmdlZCI6ZigiYXR0cmlidXRlQ2hhbmdlZENhbGxiYWNrIik7YnJlYWs7Y2FzZSAib25kZXRhY2hlZCI6ZigiZGV0YWNoZWRDYWxsYmFjayIpO2JyZWFrO2RlZmF1bHQ6ZihiKX1nJiYoay5jcmVhdGVkQ2FsbGJhY2sudmFsdWU9ZnVuY3Rpb24oKXtpZighKGcgaW4gbikpe3ZhciBhPXRoaXMub3duZXJEb2N1bWVudHx8ZG9jdW1lbnQsYj1nLGM9YS5oZWFkLGE9YS5jcmVhdGVFbGVtZW50KCJsaW5rIik7YS5yZWw9InN0eWxlc2hlZXQiO2EudHlwZT0idGV4dC9jc3MiO2EuaHJlZj1iO25bYl09Yy5pbnNlcnRCZWZvcmUoYSxjLmxhc3RDaGlsZCl9aCYmaC5hcHBseSh0aGlzLGFyZ3VtZW50cyl9KTtyZXR1cm4gZG9jdW1lbnQucmVnaXN0ZXJFbGVtZW50KGN8fCJjZS0iKyArK3Ase3Byb3RvdHlwZTptKGR8fEhUTUxFbGVtZW50LnByb3RvdHlwZSxrKX0pfX0oT2JqZWN0LDApOw==
- Original source
var DOMClass = (function (O,o) {
/*! (C) Andrea Giammarchi */
var
create = O.create,
css = create(null),
dP = O.defineProperty,
gOPD = O.getOwnPropertyDescriptor,
gOPN = O.getOwnPropertyNames,
gOPS = O.getOwnPropertySymbols,
ownKeys = gOPS ?
function (object) {
return gOPN(object).concat(gOPS(object));
} :
gOPN,
loadCSS = function (document, href) {
var
head = document.head,
link = document.createElement('link')
;
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = href;
css[href] = head.insertBefore(link, head.lastChild);
}
;
return function DOMClass(description) {
for (var
k, name, xtends,
constructor,
stylesheet,
descriptors = {},
keys = ownKeys(description),
set = function (s) {
dP(descriptors, s, {
enumerable: true,
writable: true,
value: gOPD(description, k)
});
},
i = 0; i < keys.length; i++
) {
k = keys[i];
switch (k.toLowerCase()) {
case 'name': name = description[k]; break;
case 'stylesheet': stylesheet = description[k]; break;
case 'extends':
xtends = typeof description[k] === 'function' ?
description[k].prototype : description[k];
break;
case 'constructor': constructor = description[k];
set('createdCallback'); break;
case 'onattached': set('attachedCallback'); break;
case 'onchanged': set('attributeChangedCallback'); break;
case 'ondetached': set('detachedCallback'); break;
default: set(k); break;
}
}
if (stylesheet) {
descriptors.createdCallback.value = function () {
if (!(stylesheet in css))
loadCSS(this.ownerDocument || document, stylesheet);
if (constructor) constructor.apply(this, arguments);
};
}
return document.registerElement(
name || ('zero-dom-class-'+ ++o),
{prototype: create(xtends || HTMLElement.prototype, descriptors)}
);
};
}(Object, 0));
