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

make Clay work with phone apps

Browse Source
This commit is contained in:
Keegan
2016-02-09 17:21:16 -08:00
parent d6caa1527b
commit 41334698bd
38 changed files with 655 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/scripts/components/color.js
+107
View File
@@ -0,0 +1,107 @@
'use strict';
module.exports = {
name: 'color',
template: require('../../templates/components/color.tpl'),
style: require('../../styles/clay/components/color.scss'),
manipulator: 'val',
defaults: {
label: ''
},
initialize: function(minified) {
var HTML = minified.HTML;
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.select('label').on('click', function(ev) {
if (!disabled) {
$picker.set('show'); // toggle visibility
}
});
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
@@ -0,0 +1,10 @@
'use strict';
module.exports = {
name: 'footer',
template: require('../../templates/components/footer.tpl'),
manipulator: 'html',
defaults: {
attributes: {}
}
};
src/scripts/components/heading.js
+11
View File
@@ -0,0 +1,11 @@
'use strict';
module.exports = {
name: 'heading',
template: require('../../templates/components/heading.tpl'),
manipulator: 'html',
defaults: {
attributes: {},
size: 4
}
};
src/scripts/components/index.js
+12
View File
@@ -0,0 +1,12 @@
'use strict';
module.exports = {
color: require('./color'),
footer: require('./footer'),
heading: require('./heading'),
input: require('./input'),
select: require('./select'),
submit: require('./submit'),
text: require('./text'),
toggle: require('./toggle')
};
src/scripts/components/input.js
+12
View File
@@ -0,0 +1,12 @@
'use strict';
module.exports = {
name: 'input',
template: require('../../templates/components/input.tpl'),
style: require('../../styles/clay/components/input.scss'),
manipulator: 'val',
defaults: {
label: '',
attributes: {}
}
};
src/scripts/components/select.js
+22
View File
@@ -0,0 +1,22 @@
'use strict';
module.exports = {
name: 'select',
template: require('../../templates/components/select.tpl'),
style: require('../../styles/clay/components/select.scss'),
manipulator: '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
@@ -0,0 +1,10 @@
'use strict';
module.exports = {
name: 'submit',
template: require('../../templates/components/submit.tpl'),
manipulator: 'val',
defaults: {
attributes: {}
}
};
src/scripts/components/text.js
+10
View File
@@ -0,0 +1,10 @@
'use strict';
module.exports = {
name: 'text',
template: require('../../templates/components/text.tpl'),
manipulator: 'html',
defaults: {
attributes: {}
}
};
src/scripts/components/toggle.js
+11
View File
@@ -0,0 +1,11 @@
'use strict';
module.exports = {
name: 'toggle',
template: require('../../templates/components/toggle.tpl'),
style: require('../../styles/clay/components/toggle.scss'),
manipulator: 'checked',
defaults: {
attributes: {}
}
};
src/scripts/config-page.js
+11 -4
View File
@@ -1,13 +1,20 @@
'use strict';
var $ = require('./vendor/minified/minified').$;
var _ = require('./vendor/minified/minified')._;
var minified = require('./vendor/minified');
var ClayConfig = require('./lib/clay-config');
var config = _.extend([], window.clayConfig || []);
var $ = minified.$;
var _ = minified._;
var config = _.extend([], window.clayConfig || []);
var settings = _.extend({}, window.claySettings || {});
var returnTo = window.returnTo || 'pebblejs://close#';
var customFn = window.customFn || function() {};
var clayComponents = window.clayComponents || {};
_.eachObj(clayComponents, function(key, component) {
ClayConfig.registerComponent(component);
});
var $mainForm = $('#main-form');
var clayConfig = new ClayConfig(settings, config, $mainForm);
@@ -27,7 +34,7 @@ clayConfig.on(clayConfig.EVENTS.AFTER_BUILD, function() {
});
// Run the custom function in the context of the ClayConfig
customFn.call(clayConfig);
customFn.call(clayConfig, minified);
// Now that we have given the dev's custom code to run and attach listeners,
// we build the config
src/scripts/lib/clay-config.js
+5 -5
View File
@@ -9,12 +9,12 @@
* @property {string} [id]
* @property {string} [label]
* @property {object} [attributes]
* @property {array} [options]
* @property {array} [items]
* @property {Array} [options]
* @property {Array} [items]
*/
var HTML = require('../vendor/minified/minified').HTML;
var _ = require('../vendor/minified/minified')._;
var HTML = require('../vendor/minified').HTML;
var _ = require('../vendor/minified')._;
var ClayItem = require('./clay-item');
var utils = require('../lib/utils');
var ClayEvents = require('./clay-events');
@@ -39,7 +39,7 @@ function ClayConfig(settings, config, $rootContainer) {
/**
* Add item(s) to the config
* @param {Clay~ConfigItem|array} item
* @param {Clay~ConfigItem|Array} item
* @param {M} $container
* @return {void}
*/
src/scripts/lib/clay-events.js
+2 -2
View File
@@ -1,7 +1,7 @@
'use strict';
var $ = require('../vendor/minified/minified').$;
var _ = require('../vendor/minified/minified')._;
var $ = require('../vendor/minified').$;
var _ = require('../vendor/minified')._;
/**
* Attaches event methods to the context.
src/scripts/lib/clay-item.js
+1 -1
View File
@@ -1,7 +1,7 @@
'use strict';
var componentRegistry = require('./component-registry');
var minified = require('../vendor/minified/minified');
var minified = require('../vendor/minified');
var utils = require('../lib/utils');
var ClayEvents = require('./clay-events');
src/scripts/vendor/autoprefixify.js
Vendored
+54
View File
@@ -0,0 +1,54 @@
var path = require('path');
var through = require('through');
var postcss = require('postcss');
var autoprefixer = require('autoprefixer');
var requireFromString = require('require-from-string');
/**
* Stringifies the content
* @param {string} content
* @returns {string}
*/
function stringify (content) {
return 'module.exports = ' + JSON.stringify(content) + ';\n';
}
module.exports = function (file, options) {
/**
* The function Browserify will use to transform the input.
* @param {string} file
* @returns {stream}
*/
function browserifyTransform (file) {
var extensions = ['.css', '.sass', '.scss', '.less'];
var chunks = [];
if (extensions.indexOf(path.extname(file)) === -1) {
return through();
}
var write = function (buffer) {
chunks.push(buffer);
};
var end = function () {
var contents = requireFromString(Buffer.concat(chunks).toString('utf8'));
contents = postcss([autoprefixer(options)]).process(contents).css;
this.queue(stringify(contents));
this.queue(null);
};
return through(write, end);
}
if (typeof file !== 'string') {
// Factory: return a function.
// Set options variable here so it is ready for when browserifyTransform
// is called. Note: first argument is the options.
options = file;
return browserifyTransform;
} else {
return browserifyTransform(file);
}
};
src/scripts/vendor/minified/minified.js → src/scripts/vendor/minified.js
Vendored
View File