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

add eslint and clean up code

Browse Source
This commit is contained in:
Keegan
2016-01-27 19:12:12 -08:00
parent 67d2258bb6
commit cdb855edaa
51 changed files with 292 additions and 2793 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/scripts/config-page.js
+6 -10
View File
@@ -2,28 +2,24 @@
var $ = require('./vendor/minified/minified').$;
var _ = require('./vendor/minified/minified')._;
var Api = require('./lib/api');
var ClayConfig = require('./lib/clay-config');
var config = _.extend([], window.clayConfig || []);
var settings = _.extend({}, window.claySettings || {});
var returnTo = window.returnTo || 'pebblejs://close#';
var customFn = window.customFn || function() {};
var api = new Api(settings);
var $mainForm = $('#main-form');
var clayConfig = new ClayConfig(settings, config, $mainForm);
function submit(event) {
_.each(api.itemsByAppKey, function(appKey, item) {
settings[appKey] = item.get();
});
// Set the return URL depending on the runtime environment
location.href = returnTo + encodeURIComponent(JSON.stringify(settings));
location.href =
returnTo + encodeURIComponent(JSON.stringify(clayConfig.getSettings()));
event.preventDefault();
return false;
}
api.addItem(config, $mainForm);
$mainForm.on('|submit', submit);
//$mainForm.on('submit', submit);
customFn.call(api);
customFn.call(clayConfig);
src/scripts/lib/api-item.js
-88
View File
@@ -1,88 +0,0 @@
'use strict';
var itemTypes = require('./items');
var $ = require('../vendor/minified/minified').$;
var _ = require('../vendor/minified/minified')._;
var HTML = require('../vendor/minified/minified').HTML;
function ApiItem(config) {
var self = this;
var eventProxies = {};
var itemType = itemTypes[config.type];
var templateData = _.extend({}, itemType.defaults, config);
var $element = HTML(_.formatHtml(itemType.template, templateData));
var $manipulatorTarget = $element.select('[data-manipulator-target]');
// this caters for situations where the manipulator target is the root element
if (!$manipulatorTarget.length) {
$manipulatorTarget = $element;
}
Object.defineProperties(self, {
id: {
value: config.id || null
},
appKey: {
value: config.appKey || null
},
config: {
value: config || null
},
$element: {
value: $element
},
$manipulatorTarget: {
value: $manipulatorTarget
},
on: {
value: function(events, handler) {
eventProxies[handler] = function() {
handler.apply(self, arguments);
};
return $manipulatorTarget.on(events, eventProxies[handler]);
}
},
one: {
value: function(events, handler) {
eventProxies[handler] = function(event) {
handler.apply(self, arguments);
$.off(eventProxies[handler]);
};
return $manipulatorTarget.on(events, eventProxies[handler]);
}
},
off: {
value: function(handler) {
return $.off(eventProxies[handler]);
}
},
trigger: {
value: $manipulatorTarget.trigger.bind($manipulatorTarget)
},
initialize: {
value: typeof itemType.initialize === 'function' ?
itemType.initialize.bind(self) :
function() {}
}
});
// attach the manipulator methods to the apiItem
_.eachObj(itemType.manipulator, function(methodName, method) {
Object.defineProperty(self, methodName, { value: method.bind(self) });
});
self.initialize();
}
module.exports = ApiItem;
src/scripts/lib/api.js
-95
View File
@@ -1,95 +0,0 @@
'use strict';
/**
* A Clay config Item
* @typedef {object} Clay~Item
* @property {string} type
* @property {string} appKey
* @property {string} id
* @property {string} content
* @property {string|boolean} default
* @property {string} label
* @property {object} attributes
* @property {Array} options
* @property {Array} items
*/
var HTML = require('../vendor/minified/minified').HTML;
var _ = require('../vendor/minified/minified')._;
var ApiItem = require('./api-item');
function Api(settings) {
var self = this;
var _items = [];
var _itemsById = {};
var _itemsByAppKey = {};
var _settings = _.copyObj(settings);
Object.defineProperties(self, {
getItemByAppKey: {
value: function(key) {
return _itemsByAppKey[key];
}
},
getItemById: {
value: function(key) {
return _itemsById[key];
}
},
getItemsByType: {
value: function(type) {
return _items.filter(function(item) {
return item.config.type === type;
});
}
},
getSettings: {
value: function() {
_.eachObj(_itemsByAppKey, function(appKey, item) {
_settings[appKey] = item.get();
});
return _settings;
}
},
addItem: {
value: function(item, $container) {
if (Array.isArray(item)) {
item.forEach(function(item) {
self.addItem(item, $container);
});
} else if (item.type === 'section') {
var $wrapper = HTML('<div class="section">');
$container.add($wrapper);
self.addItem(item.items, $wrapper);
} else {
var apiItem = new ApiItem(item);
if (item.id) {
_itemsById[item.id] = apiItem;
}
if (item.appKey) {
_itemsByAppKey[item.appKey] = apiItem;
}
_items.push(apiItem);
// set the value of the item via the manipulator to ensure consistency
var value = typeof _settings[item.appKey] !== 'undefined' ?
_settings[item.appKey] :
(item.value || '');
apiItem.set(value);
$container.add(apiItem.$element);
}
}
}
});
}
module.exports = Api;
src/scripts/lib/clay-config.js
+110
View File
@@ -0,0 +1,110 @@
'use strict';
/**
* A Clay config Item
* @typedef {object} Clay~ConfigItem
* @property {string} type
* @property {string|boolean|number} value
* @property {string} [appKey]
* @property {string} [id]
* @property {string} [label]
* @property {object} [attributes]
* @property {array} [options]
* @property {array} [items]
*/
var HTML = require('../vendor/minified/minified').HTML;
var _ = require('../vendor/minified/minified')._;
var ApiItem = require('./clay-item');
var utils = require('../lib/utils');
function ClayConfig(settings, config, $rootContainer) {
var self = this;
var _settings = _.copyObj(settings);
var _items = [];
var _itemsById = {};
var _itemsByAppKey = {};
/**
* @param {string} key
* @returns {ClayItem}
*/
self.getItemByAppKey = function(key) {
return _itemsByAppKey[key];
};
/**
* @param {string} key
* @returns {ClayItem}
*/
self.getItemById = function(key) {
return _itemsById[key];
};
/**
* @param {string} key
* @returns {[ClayItem]}
*/
self.getItemsByType = function(type) {
return _items.filter(function(item) {
return item.config.type === type;
});
};
/**
* @returns {object}
*/
self.getSettings = function() {
_.eachObj(_itemsByAppKey, function(appKey, item) {
_settings[appKey] = item.get();
});
return _settings;
};
/**
* Add item(s) to the config
* @param {Clay~ConfigItem|array} items
* @param {M} [$container]
*/
var _addItems = function(item, $container) {
if (Array.isArray(item)) {
item.forEach(function(item) {
_addItems(item, $container);
});
} else if (item.type === 'section') {
var $wrapper = HTML('<div class="section">');
$container.add($wrapper);
_addItems(item.items, $wrapper);
} else {
var apiItem = new ApiItem(item);
if (item.id) {
_itemsById[item.id] = apiItem;
}
if (item.appKey) {
_itemsByAppKey[item.appKey] = apiItem;
}
_items.push(apiItem);
// set the value of the item via the manipulator to ensure consistency
var value = typeof _settings[item.appKey] !== 'undefined' ?
_settings[item.appKey] :
(item.value || '');
apiItem.set(value);
$container.add(apiItem.$element);
}
};
// prevent external modifications of properties
utils.updateProperties(self, { writable: false, configurable: false });
// initialize the config
_addItems(config, $rootContainer);
}
module.exports = ClayConfig;
src/scripts/lib/clay-item.js
+116
View File
@@ -0,0 +1,116 @@
'use strict';
var itemTypes = require('./items');
var $ = require('../vendor/minified/minified').$;
var _ = require('../vendor/minified/minified')._;
var HTML = require('../vendor/minified/minified').HTML;
var utils = require('../lib/utils');
function ClayItem(config) {
var self = this;
var _eventProxies = {};
var _itemType = itemTypes[config.type];
var _templateData = _.extend({}, _itemType.defaults, config);
/** @type {string|null} */
self.id = config.id || null;
/** @type {string|null} */
self.appKey = config.appKey || null;
/** @type {object|null} */
self.config = config || null;
/** @type {M} */
self.$element = HTML(_.formatHtml(_itemType.template, _templateData));
/** @type {M} */
self.$manipulatorTarget = self.$element.select('[data-manipulator-target]');
// this caters for situations where the manipulator target is the root element
if (!self.$manipulatorTarget.length) {
self.$manipulatorTarget = self.$element;
}
/**
* Attach an event listener to the item. This proxies minified.js' on.
* If you are using a native event like "change", consider using "|change" instead
* as this will allow the native events to still work
* @see {@link http://minifiedjs.com/api/on.html|.on()}
* @param {string} events
* @param {function} handler
* @returns {ClayItem}
*/
self.on = function(events, handler) {
_eventProxies[handler] = function() {
handler.apply(self, arguments);
};
self.$manipulatorTarget.on(events, _eventProxies[handler]);
return self;
};
/**
* Attach an event listener to the item. This proxies minified.js' one.
* If you are using a native event like "change", consider using "|change" instead
* as this will allow the native events to still work
* @see {@link http://minifiedjs.com/api/one.html|.one()}
* @param {string} events
* @param {function} handler
* @returns {ClayItem}
*/
self.one = function(events, handler) {
_eventProxies[handler] = function(event) {
handler.apply(self, arguments);
$.off(_eventProxies[handler]);
};
self.$manipulatorTarget.on(events, _eventProxies[handler]);
return self;
};
/**
* Remove the given event handler.
* @see {@link http://minifiedjs.com/api/off.html|$.off()}
* @param {function} handler
* @returns {ClayItem}
*/
self.off = function(handler) {
return $.off(_eventProxies[handler]);
};
/**
* trigger an event. This proxies minified.js' trigger.
* @param {string} name - a single event name to trigger
* @param {object} eventObj - an object to pass to the event handler, provided the
* handler does not have custom arguments.
* @see {@link http://minifiedjs.com/api/trigger.html|.trigger()}
* @returns {ClayItem}
*/
self.trigger = function(name, eventObj) {
self.$manipulatorTarget.trigger(name, eventObj);
return self;
};
/**
* Run the initializer. This will automatically be run on item creation.
* @returns {ClayItem}
*/
self.initialize = function() {
if (typeof _itemType.initialize === 'function') {
_itemType.initialize.apply(self, arguments);
}
return self;
};
// attach the manipulator methods to the clayItem
_.eachObj(_itemType.manipulator, function(methodName, method) {
self[methodName] = method.bind(self);
});
self.initialize();
// prevent external modifications of properties
utils.updateProperties(self, { writable: false, configurable: false });
}
module.exports = ClayItem;
src/scripts/lib/items/color.js
-1
View File
@@ -29,7 +29,6 @@ module.exports = {
var grid = '';
var itemWidth = 100 / layout[0].length;
var itemHeight = 100 / layout.length;
var boxHeight = itemWidth * layout.length;
var $elem = self.$element;
for (var i = 0; i < layout.length; i++) {
src/scripts/lib/utils.js
+18
View File
@@ -0,0 +1,18 @@
'use strict';
/**
* Batch update all the properties of an object.
* @param {object} obj
* @param {object} descriptor
* @param {boolean} [descriptor.configurable]
* @param {boolean} [descriptor.enumerable]
* @param {*} [descriptor.value]
* @param {boolean} [descriptor.writable]
* @param {function} [descriptor.get]
* @param {function} [descriptor.set]
*/
module.exports.updateProperties = function(obj, descriptor) {
Object.getOwnPropertyNames(obj).forEach(function(prop) {
Object.defineProperty(obj, prop, descriptor);
});
};