CriticalDepsMirror/clay
1
0
Fork 0
mirror of https://github.com/pebble-dev/clay.git synced 2026-08-30 13:56:58 -04:00
Code Issues Packages Projects Releases Wiki Activity

strip out components into separate repo

Browse Source
This commit is contained in:
Keegan
2016-02-09 17:19:33 -08:00
parent 66f2b05129
commit 80982c8e6d
31 changed files with 620 additions and 589 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/scripts/components/color.js
-107
View File
@@ -1,107 +0,0 @@
'use strict';
var HTML = require('../vendor/minified/minified').HTML;
module.exports = {
name: 'color',
template: require('../../templates/components/color.tpl'),
manipulator: require('../lib/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/components/footer.js
-10
View File
@@ -1,10 +0,0 @@
'use strict';
module.exports = {
name: 'footer',
template: require('../../templates/components/footer.tpl'),
manipulator: require('../lib/manipulators').html,
defaults: {
attributes: {}
}
};
src/scripts/components/heading.js
-11
View File
@@ -1,11 +0,0 @@
'use strict';
module.exports = {
name: 'heading',
template: require('../../templates/components/heading.tpl'),
manipulator: require('../lib/manipulators').html,
defaults: {
attributes: {},
size: 4
}
};
src/scripts/components/input.js
-11
View File
@@ -1,11 +0,0 @@
'use strict';
module.exports = {
name: 'input',
template: require('../../templates/components/input.tpl'),
manipulator: require('../lib/manipulators').val,
defaults: {
label: '',
attributes: {}
}
};
src/scripts/components/select.js
-21
View File
@@ -1,21 +0,0 @@
'use strict';
module.exports = {
name: 'select',
template: require('../../templates/components/select.tpl'),
manipulator: require('../lib/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/components/submit.js
-10
View File
@@ -1,10 +0,0 @@
'use strict';
module.exports = {
name: 'submit',
template: require('../../templates/components/submit.tpl'),
manipulator: require('../lib/manipulators').val,
defaults: {
attributes: {}
}
};
src/scripts/components/text.js
-10
View File
@@ -1,10 +0,0 @@
'use strict';
module.exports = {
name: 'text',
template: require('../../templates/components/text.tpl'),
manipulator: require('../lib/manipulators').html,
defaults: {
attributes: {}
}
};
src/scripts/components/toggle.js
-10
View File
@@ -1,10 +0,0 @@
'use strict';
module.exports = {
name: 'toggle',
template: require('../../templates/components/toggle.tpl'),
manipulator: require('../lib/manipulators').checked,
defaults: {
attributes: {}
}
};
src/scripts/config-page.js
+8 -8
View File
@@ -15,14 +15,14 @@ var clayConfig = new ClayConfig(settings, config, $mainForm);
clayConfig.on(clayConfig.EVENTS.BEFORE_BUILD, function() {
// register components here
this.registerComponent(require('./components/heading'));
this.registerComponent(require('./components/text'));
this.registerComponent(require('./components/footer'));
this.registerComponent(require('./components/input'));
this.registerComponent(require('./components/color'));
this.registerComponent(require('./components/select'));
this.registerComponent(require('./components/toggle'));
this.registerComponent(require('./components/submit'));
this.registerComponent(require('pebble-clay-components/dist/components/heading'));
this.registerComponent(require('pebble-clay-components/dist/components/text'));
this.registerComponent(require('pebble-clay-components/dist/components/footer'));
this.registerComponent(require('pebble-clay-components/dist/components/input'));
this.registerComponent(require('pebble-clay-components/dist/components/color'));
this.registerComponent(require('pebble-clay-components/dist/components/select'));
this.registerComponent(require('pebble-clay-components/dist/components/toggle'));
this.registerComponent(require('pebble-clay-components/dist/components/submit'));
});
clayConfig.on(clayConfig.EVENTS.AFTER_BUILD, function() {
src/scripts/lib/clay-config.js
+22 -14
View File
@@ -19,6 +19,7 @@ var ClayItem = require('./clay-item');
var utils = require('../lib/utils');
var ClayEvents = require('./clay-events');
var componentStore = require('./component-registry');
var manipulators = require('./manipulators');
/**
* @extends ClayEvents
@@ -154,20 +155,8 @@ function ClayConfig(settings, config, $rootContainer) {
return _settings;
};
/**
* 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;
};
// @todo maybe don't do this and force the static method
self.registerComponent = ClayConfig.registerComponent;
/**
* Build the config page. This must be run before any of the get methods can be run
@@ -189,4 +178,23 @@ function ClayConfig(settings, config, $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 {string|{}} 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
*/
ClayConfig.registerComponent = function(component) {
var _component = _.copyObj(component);
if (typeof _component.manipulator === 'string') {
_component.manipulator = manipulators[component.manipulator];
}
componentStore[_component.name] = _component;
};
module.exports = ClayConfig;
src/scripts/lib/clay-item.js
+7 -7
View File
@@ -14,14 +14,14 @@ var ClayEvents = require('./clay-events');
function ClayItem(config) {
var self = this;
var _itemType = componentRegistry[config.type];
var _component = componentRegistry[config.type];
if (!_itemType) {
if (!_component) {
throw new Error('the component: ' + config.type + ' is not registered. ' +
'Make sure to register it with ClayConfig.registerComponent()');
}
var _templateData = _.extend({}, _itemType.defaults, config);
var _templateData = _.extend({}, _component.defaults, config);
/** @type {string|null} */
self.id = config.id || null;
@@ -33,7 +33,7 @@ function ClayItem(config) {
self.config = config;
/** @type {M} */
self.$element = HTML(_.formatHtml(_itemType.template, _templateData));
self.$element = HTML(_.formatHtml(_component.template, _templateData));
/** @type {M} */
self.$manipulatorTarget = self.$element.select('[data-manipulator-target]');
@@ -48,8 +48,8 @@ function ClayItem(config) {
* @returns {ClayItem}
*/
self.initialize = function() {
if (typeof _itemType.initialize === 'function') {
_itemType.initialize.apply(self, arguments);
if (typeof _component.initialize === 'function') {
_component.initialize.apply(self, arguments);
}
return self;
};
@@ -58,7 +58,7 @@ function ClayItem(config) {
ClayEvents.call(self, self.$manipulatorTarget);
// attach the manipulator methods to the clayItem
_.eachObj(_itemType.manipulator, function(methodName, method) {
_.eachObj(_component.manipulator, function(methodName, method) {
self[methodName] = method.bind(self);
});