CriticalDepsMirror/clay
1
0
Fork 0
mirror of https://github.com/pebble-dev/clay.git synced 2026-08-31 06:16:51 -04:00
Code Issues Packages Projects Releases Wiki Activity

refactor components to be in a registry.

Browse Source
This commit is contained in:
Keegan
2016-02-01 14:56:47 -08:00
parent 7e3dbfa148
commit bca1975d8e
22 changed files with 126 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/scripts/lib/clay-config.js
+18 -2
View File
@@ -18,6 +18,7 @@ var _ = require('../vendor/minified/minified')._;
var ClayItem = require('./clay-item');
var utils = require('../lib/utils');
var ClayEvents = require('./clay-events');
var componentStore = require('./component-registry');
/**
* @extends ClayEvents
@@ -89,8 +90,20 @@ function ClayConfig(settings, config, $rootContainer) {
return _settings;
};
// attach event methods
ClayEvents.call(self, $rootContainer);
/**
* Register a component to Clay. This must be called prior to .build();
* @param {{}} component - the clay component to register
* @param {string} component.name - the name of the component
* @param {string} component.template - HTML template to use for the component
* @param {{}} component.manipulator - methods to attach to the component
* @param {function} component.manipulator.set - set manipulator method
* @param {function} component.manipulator.get - get manipulator method
* @param {{}} component.defaults - template defaults
* @param {function} [component.initialize] - method to scaffold the component
*/
self.registerComponent = function(component) {
componentStore[component.name] = component;
};
self.build = function() {
self.trigger(self.EVENTS.BEFORE_BUILD);
@@ -99,6 +112,9 @@ function ClayConfig(settings, config, $rootContainer) {
self.trigger(self.EVENTS.AFTER_BUILD);
};
// attach event methods
ClayEvents.call(self, $rootContainer);
/**
* Add item(s) to the config
* @param {Clay~ConfigItem|array} items
src/scripts/lib/clay-events.js
+9 -3
View File
@@ -23,11 +23,14 @@ function ClayEvents($eventTarget) {
* @returns {object}
*/
self.on = function(events, handler) {
var _events = events.split(' ').map(function(event) {
return '|' + event.replace(/^\|/, '');
}).join(' ');
var self = this;
_eventProxies[handler] = function() {
handler.apply(self, arguments);
};
$eventTarget.on(events, _eventProxies[handler]);
$eventTarget.on(_events, _eventProxies[handler]);
return self;
};
@@ -41,12 +44,15 @@ function ClayEvents($eventTarget) {
* @returns {object}
*/
self.one = function(events, handler) {
var _events = events.split(' ').map(function(event) {
return '|' + event.replace(/^\|/, '');
}).join(' ');
var self = this;
_eventProxies[handler] = function(event) {
handler.apply(self, arguments);
$.off(_eventProxies[handler]);
};
$eventTarget.on(events, _eventProxies[handler]);
$eventTarget.on(_events, _eventProxies[handler]);
return self;
};
@@ -70,7 +76,7 @@ function ClayEvents($eventTarget) {
* @returns {object}
*/
self.trigger = function(name, eventObj) {
$eventTarget.trigger(name);
$eventTarget.trigger(name, eventObj);
return self;
};
}
src/scripts/lib/clay-item.js
+2 -2
View File
@@ -1,6 +1,6 @@
'use strict';
var itemTypes = require('./items');
var componentRegistry = require('./component-registry');
var _ = require('../vendor/minified/minified')._;
var HTML = require('../vendor/minified/minified').HTML;
var utils = require('../lib/utils');
@@ -14,7 +14,7 @@ var ClayEvents = require('./clay-events');
function ClayItem(config) {
var self = this;
var _itemType = itemTypes[config.type];
var _itemType = componentRegistry[config.type];
var _templateData = _.extend({}, _itemType.defaults, config);
/** @type {string|null} */
src/scripts/lib/component-registry.js
Executable
+4
View File
@@ -0,0 +1,4 @@
'use strict';
// module is blank because we dynamically add components
module.exports = {};
src/scripts/lib/items.js
-13
View File
@@ -1,13 +0,0 @@
'use strict';
module.exports = {
heading: require('./items/heading'),
text: require('./items/text'),
footer: require('./items/footer'),
input: require('./items/input'),
color: require('./items/color'),
select: require('./items/select'),
toggle: require('./items/toggle'),
radiogroup: require('./items/radiogroup'),
submit: require('./items/submit')
};
src/scripts/lib/items/color.js
-106
View File
@@ -1,106 +0,0 @@
'use strict';
var HTML = require('../../vendor/minified/minified').HTML;
module.exports = {
template: require('../../../templates/items/color.tpl'),
manipulator: require('../manipulators').val,
defaults: {
label: ''
},
initialize: function() {
var self = this;
/* eslint-disable comma-spacing, no-multi-spaces, max-len,
standard/array-bracket-even-spacing */
var layout = self.config.layout || [
[false , false , '#55FF00', '#AAFF55', false , '#FFFF55', '#FFFFAA', false , false ],
[false , '#AAFFAA', '#55FF55', '#00FF00', '#AAFF00', '#FFFF00', '#FFAA55', '#FFAAAA', false ],
['#55FFAA', '#00FF55', '#00AA00', '#55AA00', '#AAAA55', '#AAAA00', '#FFAA00', '#FF5500', '#FF5555'],
['#AAFFFF', '#00FFAA', '#00AA55', '#55AA55', '#005500', '#555500', '#AA5500', '#FF0000', '#FF0055'],
[false , '#55AAAA', '#00AAAA', '#005555', '#FFFFFF', '#000000', '#AA5555', '#AA0000', false ],
['#55FFFF', '#00FFFF', '#00AAFF', '#0055AA', '#AAAAAA', '#555555', '#550000', '#AA0055', '#FF55AA'],
['#55AAFF', '#0055FF', '#0000FF', '#0000AA', '#000055', '#550055', '#AA00AA', '#FF00AA', '#FFAAFF'],
[false , '#5555AA', '#5555FF', '#5500FF', '#5500AA', '#AA00FF', '#FF00FF', '#FF55FF', false ],
[false , false , false , '#AAAAFF', '#AA55FF', '#AA55AA', false , false , false ]
];
/* eslint-enable */
var grid = '';
var itemWidth = 100 / layout[0].length;
var itemHeight = 100 / layout.length;
var $elem = self.$element;
for (var i = 0; i < layout.length; i++) {
for (var j = 0; j < layout[i].length; j++) {
var color = layout[i][j] || 'transparent';
var selectable = (color !== 'transparent' ? ' selectable' : '');
var roundedTL = (i === 0 && j === 0) || i === 0 && !layout[i][j - 1] ||
!layout[i][j - 1] && !layout[i - 1][j] ?
' rounded-tl' :
'';
var roundedTR = i === 0 && !layout[i][j + 1] ||
!layout[i][j + 1] && !layout[i - 1][j] ?
' rounded-tr ' :
'';
var roundedBL = (i === layout.length - 1 && j === 0) ||
i === layout.length - 1 && !layout[i][j - 1] ||
!layout[i][j - 1] && !layout[i + 1][j] ?
' rounded-bl' :
'';
var roundedBR = i === layout.length - 1 && !layout[i][j + 1] ||
!layout[i][j + 1] && !layout[i + 1][j] ?
' rounded-br' :
'';
grid += '<i ' +
'class="color-box ' + selectable + roundedTL + roundedTR + roundedBL +
roundedBR + '" ' +
'data-value="' + color.replace(/^#/, '0x').toLowerCase() + '" ' +
'style="' +
'width:' + itemWidth + '%; ' +
'height:' + itemHeight + '%; ' +
'background:' + color + ';">' +
'</i>';
}
}
$elem.select('.color-box-container').add(HTML(grid));
var $valueDisplay = $elem.select('.value');
var $picker = $elem.select('.picker-wrap');
var disabled = self.$manipulatorTarget.get('disabled');
$elem.on('click', function(ev) {
if (!disabled) {
$picker.set('show');
}
});
self.on('|change', function() {
var value = self.get().replace(/^0x/, '').toLowerCase();
$valueDisplay.set('$background-color', '#' + value);
$elem.select('.color-box').set('-selected');
$elem.select('.color-box[data-value="0x' + value + '"]').set('+selected');
});
$elem.select('.color-box.selectable').on('click', function(ev) {
self.set(ev.target.dataset.value);
$picker.set('-show');
});
self.on('disabled', function() {
disabled = true;
});
self.on('enabled', function() {
disabled = false;
});
}
};
src/scripts/lib/items/footer.js
-9
View File
@@ -1,9 +0,0 @@
'use strict';
module.exports = {
template: require('../../../templates/items/footer.tpl'),
manipulator: require('../manipulators').html,
defaults: {
attributes: {}
}
};
src/scripts/lib/items/heading.js
-10
View File
@@ -1,10 +0,0 @@
'use strict';
module.exports = {
template: require('../../../templates/items/heading.tpl'),
manipulator: require('../manipulators').html,
defaults: {
attributes: {},
size: 4
}
};
src/scripts/lib/items/input.js
-10
View File
@@ -1,10 +0,0 @@
'use strict';
module.exports = {
template: require('../../../templates/items/input.tpl'),
manipulator: require('../manipulators').val,
defaults: {
label: '',
attributes: {}
}
};
src/scripts/lib/items/radiogroup.js
-10
View File
@@ -1,10 +0,0 @@
'use strict';
module.exports = {
template: require('../../../templates/items/radiogroup.tpl'),
manipulator: require('../manipulators').radiogroup,
defaults: {
label: '',
options: []
}
};
src/scripts/lib/items/select.js
-20
View File
@@ -1,20 +0,0 @@
'use strict';
module.exports = {
template: require('../../../templates/items/select.tpl'),
manipulator: require('../manipulators').val,
defaults: {
label: '',
options: []
},
initialize: function() {
var self = this;
var $value = self.$element.select('.value');
self.on('change', function(ev) {
var value = self.$manipulatorTarget.select('option:checked').get('innerHTML');
$value.set('innerHTML', value);
});
}
};
src/scripts/lib/items/submit.js
-9
View File
@@ -1,9 +0,0 @@
'use strict';
module.exports = {
template: require('../../../templates/items/submit.tpl'),
manipulator: require('../manipulators').val,
defaults: {
attributes: {}
}
};
src/scripts/lib/items/text.js
-9
View File
@@ -1,9 +0,0 @@
'use strict';
module.exports = {
template: require('../../../templates/items/text.tpl'),
manipulator: require('../manipulators').html,
defaults: {
attributes: {}
}
};
src/scripts/lib/items/toggle.js
-9
View File
@@ -1,9 +0,0 @@
'use strict';
module.exports = {
template: require('../../../templates/items/toggle.tpl'),
manipulator: require('../manipulators').checked,
defaults: {
attributes: {}
}
};