Created
January 7, 2017 18:02
-
-
Save dallasread/641b1018c1d6e37fd73f567f13293fce to your computer and use it in GitHub Desktop.
CustomElement.js
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
var Generate = require('generate-js'), | |
events = require('events'), | |
Bars = require('bars'), | |
bars = new Bars(); | |
function removeEmptyObjects(data) { | |
for (var key in data) { | |
if (data[key]) { | |
if (typeof data[key] === 'object') { | |
if (data[key] instanceof Array) { | |
} else if (!Object.keys(data[key]).length) { | |
delete data[key]; | |
} else { | |
removeEmptyObjects(data[key]); | |
} | |
} | |
} | |
} | |
} | |
var CustomElement = Generate.generateFrom(events.EventEmitter, function CustomElement(config, options) { | |
var _ = this, | |
interactions = config.interactions, | |
partials = config.partials, | |
transforms = config.transforms, | |
template = config.template, | |
data = options.data || {}, | |
$ = options.$ || window.jQuery.noConflict(), | |
$element = $(options.$element || '<div>'); | |
delete config.interactions; | |
delete config.partials; | |
delete config.transforms; | |
delete config.template; | |
delete options.$; | |
delete options.$element; | |
delete options.data; | |
_.defineProperties({ | |
$element: $element, | |
$: $ | |
}); | |
_.defineProperties({ | |
writable: true | |
}, { | |
_data: data | |
}); | |
_.registerInteractions(interactions); | |
_.registerTransforms(transforms); | |
_.registerPartials(partials); | |
_.registerTemplate(template); | |
}); | |
CustomElement.definePrototype({ | |
update: function update() { | |
var _ = this; | |
_.dom.update(_._data); | |
}, | |
render: function render() { | |
var _ = this; | |
_.$element.html(''); | |
_.dom.update(_._data); | |
_.dom.appendTo(_.$element[0]); | |
} | |
}); | |
CustomElement.definePrototype({ | |
set: function set(key, value) { | |
this._data = typeof this._data === 'object' ? this._data : {}; | |
var _ = this, | |
splat = key.split(/\/|\./), | |
lastKey = splat.pop(), | |
obj = _._data; | |
for (var i = 0; i < splat.length; i++) { | |
if (typeof obj[splat[i]] !== 'object') { | |
obj[splat[i]] = {}; | |
} | |
obj = obj[splat[i]]; | |
} | |
obj[lastKey] = value; | |
_.update(); | |
return value; | |
}, | |
unset: function unset(key) { | |
this._data = typeof this._data === 'object' ? this._data : {}; | |
var _ = this, | |
splat = key.split(/\/|\./), | |
lastKey = splat.pop(), | |
obj = _._data; | |
for (var i = 0; i < splat.length; i++) { | |
if (typeof obj[splat[i]] !== 'object') { | |
obj[splat[i]] = {}; | |
} | |
obj = obj[splat[i]]; | |
} | |
delete obj[lastKey]; | |
removeEmptyObjects(_._data); | |
_.update(); | |
}, | |
get: function get(key) { | |
var _ = this, | |
splat = key.split(/\/|\./), | |
lastKey = splat.pop(), | |
obj = _._data; | |
for (var i = 0; i < splat.length; i++) { | |
obj = obj[splat[i]]; | |
if (!obj) return; | |
} | |
return obj[lastKey]; | |
} | |
}); | |
CustomElement.definePrototype({ | |
registerTemplate: function registerTemplate(template) { | |
var _ = this; | |
_.dom = bars.compile(template); | |
_.render(); | |
}, | |
registerInteractions: function registerInteractions(interactions) { | |
var _ = this, | |
$element = _.$element, | |
interaction, key; | |
for (key in interactions) { | |
interaction = interactions[key]; | |
if (interaction.target) { | |
$element.on(interaction.event, interaction.target, _.__eventAction(interaction)); | |
} else { | |
$element.on(interaction.event, _.__eventAction(interaction)); | |
} | |
} | |
}, | |
registerPartials: function registerPartials(partials) { | |
var _ = this, | |
key; | |
for (key in partials) { | |
bars.registerPartial(key, bars.compile(partials[key])); | |
} | |
}, | |
registerTransforms: function registerTransforms(transforms) { | |
var _ = this, | |
key; | |
for (key in transforms) { | |
bars.registerTransform(key, transforms[key]); | |
} | |
} | |
}) | |
CustomElement.definePrototype({ | |
__eventAction: function __eventAction(interaction) { | |
var _ = this; | |
return function action(event) { | |
return interaction.action.call(_, event, _.$(this)); | |
}; | |
} | |
}) | |
module.exports = CustomElement; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment