CriticalDepsMirror/clay
1
0
Fork 0
mirror of https://github.com/pebble-dev/clay.git synced 2026-08-28 04:46:57 -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
.eslintrc
+1 -3
View File
@@ -5,9 +5,7 @@
"browser": true
},
"globals": {
"Pebble": true,
"$": true,
"t": true
"Pebble": true
},
"rules" : {
"new-cap": [0],
dist/clay.js
Vendored
+481
View File
File diff suppressed because one or more lines are too long
package.json
+6 -5
View File
@@ -1,6 +1,6 @@
{
"name": "pebble-clay",
"version": "1.0.0",
"version": "0.1.0",
"description": "Pebble Config Framework",
"main": "dist/clay.js",
"directories": {
@@ -8,14 +8,14 @@
},
"scripts": {
"test-travis": "./node_modules/.bin/karma start ./test/karma.conf.js --single-run --browsers chromeTravisCI && ./node_modules/.bin/eslint ./",
"test-debug": "export DEBUG=true; ./node_modules/.bin/karma start ./test/karma.conf.js --no-single-run",
"test-debug": "DEBUG=true && ./node_modules/.bin/karma start ./test/karma.conf.js --no-single-run",
"test": "./node_modules/.bin/karma start ./test/karma.conf.js --single-run",
"lint": "./node_modules/.bin/eslint ./",
"build": "gulp"
},
"repository": {
"type": "git",
"url": "git+https://github.com/keegan-lillo/pebble-clay.git"
"url": "git+https://github.com/pebble/clay.git"
},
"keywords": [
"Pebble",
@@ -24,10 +24,11 @@
"author": "Keegan Lillo",
"license": "GPL",
"bugs": {
"url": "https://github.com/keegan-lillo/pebble-clay/issues"
"url": "https://github.com/pebble/clay/issues"
},
"homepage": "https://github.com/keegan-lillo/pebble-clay#readme",
"homepage": "https://github.com/pebble/clay#readme",
"devDependencies": {
"pebble-clay-components": "git+https://github.com/pebble/clay-components.git#master",
"browserify": "^13.0.0",
"browserify-istanbul": "^0.2.1",
"chai": "^3.4.1",
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);
});
src/styles/config-page.scss
-6
View File
@@ -3,9 +3,3 @@
@import "partials/reset";
@import "fonts";
@import "base";
@import "items/color";
@import "items/toggle";
@import "items/input";
@import "items/select";
@import "items/button";
src/styles/items/_button.scss
-61
View File
@@ -1,61 +0,0 @@
@import "../partials/vars";
.item-button {
}
button,
.button {
@include font-pfdin(medium);
text-transform: uppercase;
background-color: $color-gray-4;
border-radius: $border-radius;
font-size: 1rem;
line-height: 1;
border: none;
display: block;
color: $color-white;
min-width: 12rem;
text-align: center;
margin: 0 auto;
-webkit-tap-highlight-color: rgba(0,0,0,0);
padding: $button-padding;
.platform-ios & {
padding: $button-padding-ios;
}
&:disabled {
background-color: $color-gray-3;
color: $color-gray-8;
}
&:not(:disabled):active {
background-color: $color-gray-8;
}
&.orange, &[type="submit"] {
background-color: $color-orange;
&:disabled {
background-color: $color-orange-dark;
color: $color-gray-3;
}
&:not(:disabled):active {
background-color: $color-red;
}
}
&.light-grey {
background-color: $color-gray-5;
}
}
a.button {
text-decoration: none;
color: $color-white;
}
src/styles/items/_color.scss
-91
View File
@@ -1,91 +0,0 @@
@import "../partials/vars";
.item-color {
.value {
width: $small-component-width;
height: $base-height;
border-radius: $base-height / 2;
box-shadow: $box-shadow-small-components;
}
input:disabled ~ .value,
input:disabled ~ .label {
opacity: 0.25;
}
.picker-wrap {
left: 0;
top: 0;
top: 0;
right: 0;
bottom: 0;
position: fixed;
padding: 1rem;
background: rgba(0,0,0,0.7);
opacity: 0;
transition: opacity 70ms ease-in 175ms;
pointer-events: none;
z-index: 100;
.picker {
padding: 1rem;
background: $color-gray-11;
border-radius: $border-radius;
}
&.show {
transition-delay: 0ms;
pointer-events: auto;
opacity: 1;
}
}
.color-box-wrap {
box-sizing: border-box;
position: relative;
height: 0;
width: 100%;
padding: 0 0 100% 0; // overridden with inline style
margin: 0.6em 0 0em;
.color-box-container {
position: absolute;
height: 99.97%;
width: 100%;
left: 0;
top: 0;
.color-box {
float:left;
cursor: pointer;
-webkit-tap-highlight-color: rgba(0,0,0,0);
&.rounded-tl {
border-top-left-radius: $border-radius;
}
&.rounded-tr {
border-top-right-radius: $border-radius;
}
&.rounded-bl {
border-bottom-left-radius: $border-radius;
}
&.rounded-br {
border-bottom-right-radius: $border-radius;
}
&.selected {
transform: scale(1.15);
border-radius: $border-radius;
box-shadow: #111 0 0 0.24rem;
position: relative;
z-index: 100;
}
}
}
}
}
src/styles/items/_input.scss
-43
View File
@@ -1,43 +0,0 @@
@import "../partials/vars";
@import "../partials/mixins";
.item-input {
display: block;
.label {
padding-bottom: $item-spacing-v;
}
.input {
position: relative;
min-width: 100%;
margin-top: $item-spacing-v;
margin-left: 0;
}
input {
display:block;
width: 100%;
background: $color-gray-2;
border-radius: $border-radius;
padding: $item-spacing-v / 2 $item-spacing-h / 2;
border: none;
vertical-align: baseline;
color: $color-white;
font-size: inherit;
@include placeholder {
color: $color-gray-8;
}
&:focus {
@include placeholder {
color: $color-gray-6;
}
border: none;
box-shadow: none ;
}
}
}
src/styles/items/_select.scss
-36
View File
@@ -1,36 +0,0 @@
@import "../vendor/bourbon/bourbon";
@import "../partials/vars";
.item-select {
position: relative;
.value {
$triangle-size: 0.85rem;
position: relative;
padding-right: $triangle-size + 0.25rem;
&:after {
content: "";
position: absolute;
right: 0;
top: 50%;
margin-top: -0.1rem;
@include triangle($triangle-size, $color-gray-10, down);
}
}
select {
opacity: 0;
position: absolute;
display: block;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: #000;
width: 100%;
border: none;
margin:0;
padding:0;
}
}
src/styles/items/_toggle.scss
-51
View File
@@ -1,51 +0,0 @@
@import "../partials/vars";
.item-toggle {
$slide-height: $base-height * 0.75;
$slide-width: $small-component-width;
$marker-diameter: $base-height;
input {
display: none; // @todo make sure this doesnt mess up interactivity on iOS
}
.graphic {
display: inline-block;
position: relative;
.slide {
display:block;
border-radius: $slide-height;
height: $slide-height;
width: $slide-width;
background: $color-gray-1;
transition: background-color 150ms linear;
}
.marker {
background: $color-gray-10;
width: $marker-diameter;
height: $marker-diameter;
border-radius: $marker-diameter;
position: absolute;
left: 0;
display: block;
top: ($marker-diameter - $slide-height) / 2 * -1;
transition: transform 150ms linear;
box-shadow: $box-shadow-small-components;
}
}
input:checked + .graphic {
.slide {
background: $color-orange-dark;
}
.marker {
background: $color-orange;
transform: translateX($slide-width - $marker-diameter);
}
}
}
src/templates/components/color.tpl
-15
View File
@@ -1,15 +0,0 @@
<label class="item item-color">
<input
data-manipulator-target
type="hidden"
/>
<span class="label">{{{label}}}</span>
<span class="value"></span>
<div class="picker-wrap">
<div class="picker">
<div class="color-box-wrap">
<div class="color-box-container"></div>
</div>
</div>
</div>
</label>
src/templates/components/footer.tpl
-6
View File
@@ -1,6 +0,0 @@
<div
data-manipulator-target
class="item-container-footer"
{{each attributes}} {{this.key}}="{{this.value}}" {{/each}}
>
</div>
src/templates/components/heading.tpl
-3
View File
@@ -1,3 +0,0 @@
<div class="item item-heading">
<h{{size}} data-manipulator-target {{each key: attributes}}{{key}}="{{this}}"{{/each}}></h{{size}}>
</div>
src/templates/components/input.tpl
-9
View File
@@ -1,9 +0,0 @@
<label class="item item-input">
<span class="label">{{{label}}}</span>
<span class="input">
<input
data-manipulator-target
{{each key: attributes}}{{key}}="{{this}}"{{/each}}
/>
</span>
</label>
src/templates/components/select.tpl
-9
View File
@@ -1,9 +0,0 @@
<label class="item item-select">
<span class="label">{{{label}}}</span>
<span class="value"></span>
<select data-manipulator-target>
{{each options}}
<option value="{{this.value}}" class="item-select-option">{{this.label}}</option>
{{/each}}
</select>
</label>
src/templates/components/submit.tpl
-9
View File
@@ -1,9 +0,0 @@
<div class="item item-button">
<button
data-manipulator-target
type="submit"
{{each key: attributes}}{{key}}="{{this}}"{{/each}}
>
{{{label}}}
</button>
</div>
src/templates/components/text.tpl
-3
View File
@@ -1,3 +0,0 @@
<div class="item item-text">
<p data-manipulator-target {{each key: attributes}}{{key}}="{{this}}"{{/each}}></p>
</div>
src/templates/components/toggle.tpl
-14
View File
@@ -1,14 +0,0 @@
<label class="item item-toggle">
<span class="label">{{{label}}}</span>
<span class="input">
<input
data-manipulator-target
type="checkbox"
{{each key: attributes}}{{key}}="{{this}}"{{/each}}
/>
<span class="graphic">
<span class="slide"></span>
<span class="marker"></span>
</span>
</span>
</label>
test/fixture.js
+5 -5
View File
@@ -10,11 +10,11 @@ var idCounter = 0;
var componentRegistry = require('../src/scripts/lib/component-registry');
// add some components to the registry to test
componentRegistry.text = require('../src/scripts/components/text');
componentRegistry.input = require('../src/scripts/components/input');
componentRegistry.toggle = require('../src/scripts/components/toggle');
componentRegistry.footer = require('../src/scripts/components/footer');
componentRegistry.select = require('../src/scripts/components/select');
ClayConfig.registerComponent(require('pebble-clay-components/dist/components/text'));
ClayConfig.registerComponent(require('pebble-clay-components/dist/components/input'));
ClayConfig.registerComponent(require('pebble-clay-components/dist/components/toggle'));
ClayConfig.registerComponent(require('pebble-clay-components/dist/components/footer'));
ClayConfig.registerComponent(require('pebble-clay-components/dist/components/select'));
/**
* @param {string|{}} config
test/karma-debug.conf.js
+87
View File
@@ -0,0 +1,87 @@
'use strict';
// Karma configuration
// Generated on Mon Jan 25 2016 15:19:28 GMT-0800 (PST)
module.exports = function(config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '..',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['browserify', 'mocha'],
browserify: {
debug: true,
plugin: [
[
'sourcemapify',
{ root: '/Users/keegan/eclipse_workspace/pebble-clay' }
]
],
transform: [
[
'stringify',
{ extensions: ['.html', '.tpl'] }
],
'deamdify'
]
},
// list of files / patterns to load in the browser
files: [
'test/spec/**/*.js'
],
// list of files to exclude
exclude: [],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
'test/spec/**/*.js': ['browserify']
},
// Which plugins to enable
plugins: [
'karma-chrome-launcher',
'karma-mocha',
'karma-mocha-reporter',
'karma-browserify'
],
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress', 'mocha'],
// web server port
port: 9877,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN
// || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['Chrome'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: true,
// Concurrency level
// how many browser should be started simultaneous
concurrency: Infinity
});
};
test/spec/lib/clay-config.js
+3 -1
View File
@@ -2,7 +2,7 @@
var assert = require('chai').assert;
var sinon = require('sinon');
var textComponent = require('../../../src/scripts/components/text');
var textComponent = require('pebble-clay-components/dist/components/text');
var componentRegistry = require('../../../src/scripts/lib/component-registry');
var checkReadOnly = require('../../test-utils').checkReadOnly;
var fixtures = require('../../fixture');
@@ -128,6 +128,8 @@ describe('ClayConfig', function() {
clayConfig.build();
});
// @todo test for validation
});
describe('.build()', function() {