},{"BaseComponent":3,"dom":"dom"}],5:[function(require,module,exports){
const BaseComponent = require('BaseComponent');
const dom = require('dom');
function setBoolean (node, prop) {
Object.defineProperty(node, prop, {
enumerable: true,
configurable: true,
get () {
if(node.hasAttribute(prop)){
return dom.normalize(node.getAttribute(prop));
}
return false;
},
set (value) {
if(value){
this.setAttribute(prop, '');
}else{
this.removeAttribute(prop);
}
}
});
}
function setProperty (node, prop) {
Object.defineProperty(node, prop, {
enumerable: true,
configurable: true,
get () {
return dom.normalize(this.getAttribute(prop));
},
set (value) {
this.setAttribute(prop, value);
}
});
}
function setObject (node, prop) {
Object.defineProperty(node, prop, {
enumerable: true,
configurable: true,
get () {
return this['__' + prop];
},
set (value) {
this['__' + prop] = value;
}
});
}
function setProperties (node) {
let props = node.props || node.properties;
if(props) {
props.forEach(function (prop) {
if(prop === 'disabled'){
setBoolean(node, prop);
}
else{
setProperty(node, prop);
}
});
}
}
function setBooleans (node) {
let props = node.bools || node.booleans;
if(props) {
props.forEach(function (prop) {
setBoolean(node, prop);
});
}
}
function setObjects (node) {
let props = node.objects;
if(props) {
props.forEach(function (prop) {
setObject(node, prop);
});
}
}
BaseComponent.addPlugin({
name: 'properties',
order: 10,
init: function (node) {
setProperties(node);
setBooleans(node);
},
preAttributeChanged: function (node, name, value) {
this[name] = dom.normalize(value);
if(!value && (node.bools || node.booleans || []).indexOf(name)){
node.removeAttribute(name);
}
}
});
},{"BaseComponent":3,"dom":"dom"}],6:[function(require,module,exports){
},{"BaseComponent":3,"dom":"dom"}],6:[function(require,module,exports){
const BaseComponent = require('BaseComponent');
const dom = require('dom');
var
lightNodes = {},
inserted = {};
function insert (node) {
if(inserted[node._uid] || !hasTemplate(node)){
return;
}
collectLightNodes(node);
insertTemplate(node);
inserted[node._uid] = true;
}
function collectLightNodes(node){
lightNodes[node._uid] = lightNodes[node._uid] || [];
while(node.childNodes.length){
lightNodes[node._uid].push(node.removeChild(node.childNodes[0]));
}
}
function hasTemplate (node) {
return !!node.getTemplateNode();
}
function insertTemplateChain (node) {
var templates = node.getTemplateChain();
templates.reverse().forEach(function (template) {
getContainer(node).appendChild(BaseComponent.clone(template));
});
insertChildren(node);
}
function insertTemplate (node) {
if(node.nestedTemplate){
insertTemplateChain(node);
return;
}
var
templateNode = node.getTemplateNode();
if(templateNode) {
node.appendChild(BaseComponent.clone(templateNode));
}
insertChildren(node);
}
function getContainer (node) {
var containers = node.querySelectorAll('[ref="container"]');
if(!containers || !containers.length){
return node;
}
return containers[containers.length - 1];
}
function insertChildren (node) {
var i,
container = getContainer(node),
children = lightNodes[node._uid];
if(container && children && children.length){
for(i = 0; i < children.length; i++){
container.appendChild(children[i]);
}
}
}
BaseComponent.prototype.getLightNodes = function () {
return lightNodes[this._uid];
};
BaseComponent.prototype.getTemplateNode = function () {
// caching causes different classes to pull the same template - wat?
//if(!this.templateNode) {
if (this.templateId) {
this.templateNode = dom.byId(this.templateId.replace('#',''));
}
else if (this.templateString) {
this.templateNode = dom.toDom('<template>' + this.templateString + '</template>');
}
//}
return this.templateNode;
};
BaseComponent.prototype.getTemplateChain = function () {
let
context = this,
templates = [],
template;
// walk the prototype chain; Babel doesn't allow using
// `super` since we are outside of the Class
while(context){
context = Object.getPrototypeOf(context);
if(!context){ break; }
// skip prototypes without a template
// (else it will pull an inherited template and cause duplicates)
if(context.hasOwnProperty('templateString') || context.hasOwnProperty('templateId')) {
template = context.getTemplateNode();
if (template) {
templates.push(template);
}
}
}
return templates;
};
BaseComponent.addPlugin({
name: 'template',
order: 20,
preConnected: function (node) {
insert(node);
}
});
},{"BaseComponent":3,"dom":"dom"}],7:[function(require,module,exports){
},{"dom":"dom","on":"on"}],4:[function(require,module,exports){
const BaseComponent = require('BaseComponent');
const dom = require('dom');
const alphabet = 'abcdefghijklmnopqrstuvwxyz'.split('');
const r = /\{\{\w*}}/g;
// TODO: switch to ES6 literals? Maybe not...
// FIXME: time current process
// Try a new one where meta data is created, instead of a template
function createCondition(name, value) {
// FIXME name?
value = value.replace(r, function (w) {
w = w.replace('{{', '').replace('}}', '');
return 'item["' + w + '"]';
});
console.log('createCondition', name, value);
return function (item) {
return eval(value);
};
}
function walkDom(node, refs) {
let item = {
node: node
};
refs.nodes.push(item);
if (node.attributes) {
for (let i = 0; i < node.attributes.length; i++) {
let
name = node.attributes[i].name,
value = node.attributes[i].value;
console.log(' ', name, value);
if (name === 'if') {
item.conditional = createCondition(name, value);
}
else if (/\{\{/.test(value)) {
// <div id="{{id}}">
refs.attributes = refs.attributes || {};
item.attributes = item.attributes || {};
item.attributes[name] = value;
// could be more than one??
// same with node?
refs.attributes[name] = node;
}
}
}
// should probably loop over childNodes and check text nodes for replacements
//
if (!node.children.length) {
if (/\{\{/.test(node.innerHTML)) {
// FIXME - innerHTML as value too naive
let prop = node.innerHTML.replace('{{', '').replace('}}', '');
item.text = item.text || {};
item.text[prop] = node.innerHTML;
refs[prop] = node;
}
return;
}
for (let i = 0; i < node.children.length; i++) {
walkDom(node.children[i], refs);
}
}
function updateItemTemplate(frag) {
let refs = {
nodes: []
};
walkDom(frag, refs);
return refs;
}
BaseComponent.prototype.renderList = function (items, container, itemTemplate) {
let
frag = document.createDocumentFragment(),
tmpl = itemTemplate || this.itemTemplate,
refs = tmpl.itemRefs,
clone,
defer;
function warn(name) {
clearTimeout(defer);
defer = setTimeout(function () {
console.warn('Attempted to set attribute from non-existent item property:', name);
}, 1);
}
items.forEach(function (item) {
let
ifCount = 0,
deletions = [];
refs.nodes.forEach(function (ref) {
//
// can't swap because the innerHTML is being changed
// can't clone because then there is not a node reference
//
let
value,
node = ref.node,
hasNode = true;
if (ref.conditional) {
if (!ref.conditional(item)) {
hasNode = false;
ifCount++;
// can't actually delete, because this is the original template
// instead, adding attribute to track node, to be deleted in clone
// then after, remove temporary attribute from template
ref.node.setAttribute('ifs', ifCount+'');
deletions.push('[ifs="'+ifCount+'"]');
}
}
if (hasNode) {
if (ref.attributes) {
Object.keys(ref.attributes).forEach(function (key) {
value = ref.attributes[key];
ref.node.setAttribute(key, item[key]);
//console.log('swap att', key, value, ref.node);
});
}
if (ref.text) {
Object.keys(ref.text).forEach(function (key) {
value = ref.text[key];
//console.log('swap text', key, item[key]);
node.innerHTML = value.replace(value, item[key])
});
}
}
});
clone = tmpl.cloneNode(true);
deletions.forEach(function (del) {
let node = clone.querySelector(del);
if(node) {
dom.destroy(node);
let tmplNode = tmpl.querySelector(del);
tmplNode.removeAttribute('ifs');
}
});
frag.appendChild(clone);
});
container.appendChild(frag);
//items.forEach(function (item) {
// Object.keys(item).forEach(function (key) {
// if(refs[key]){
// refs[key].innerHTML = item[key];
// }
// });
// if(refs.attributes){
// Object.keys(refs.attributes).forEach(function (name) {
// let node = refs.attributes[name];
// if(item[name] !== undefined) {
// node.setAttribute(name, item[name]);
// }else{
// warn(name);
// }
// });
// }
//
// clone = tmpl.cloneNode(true);
// frag.appendChild(clone);
//});
//container.appendChild(frag);
};
BaseComponent.addPlugin({
name: 'item-template',
order: 40,
preDomReady: function (node) {
node.itemTemplate = dom.query(node, 'template');
if (node.itemTemplate) {
node.itemTemplate.parentNode.removeChild(node.itemTemplate);
node.itemTemplate = BaseComponent.clone(node.itemTemplate);
node.itemTemplate.itemRefs = updateItemTemplate(node.itemTemplate);
}
}
});
module.exports = {
'item-template': true
};
},{"BaseComponent":3,"dom":"dom"}],5:[function(require,module,exports){