mirror of
https://github.com/pebble-dev/clay.git
synced 2026-08-29 13:26:59 -04:00
make Clay work with phone apps
This commit is contained in:
Keegan
+36
-22
@@ -11,6 +11,28 @@ var sass = require('gulp-sass');
|
||||
var sourceMaps = require('gulp-sourcemaps');
|
||||
var autoprefixer = require('gulp-autoprefixer');
|
||||
var sassify = require('sassify');
|
||||
var autoprefixify = require('./src/scripts/vendor/autoprefixify');
|
||||
|
||||
var sassIncludePaths = [].concat(
|
||||
require('bourbon').includePaths,
|
||||
'src/styles'
|
||||
);
|
||||
|
||||
var sassifyOptions = {
|
||||
base64Encode: false,
|
||||
sourceMap: false,
|
||||
sourceMapEmbed: false,
|
||||
sourceMapContents: false,
|
||||
outputStyle: 'compact',
|
||||
includePaths: sassIncludePaths
|
||||
};
|
||||
|
||||
var autoprefixerOptions = {
|
||||
browsers: ['Android 4', 'iOS 8'],
|
||||
cascade: false
|
||||
};
|
||||
|
||||
var stringifyOptions = ['.html', '.tpl'];
|
||||
|
||||
gulp.task('clean-js', function() {
|
||||
return del(['tmp/config-page.js']);
|
||||
@@ -18,7 +40,6 @@ gulp.task('clean-js', function() {
|
||||
|
||||
gulp.task('js', ['clean-js'], function() {
|
||||
return browserify('src/scripts/config-page.js', { debug: true })
|
||||
.transform(stringify(['.html', '.tpl']))
|
||||
.transform('deamdify')
|
||||
.bundle()
|
||||
.pipe(source('config-page.js'))
|
||||
@@ -31,11 +52,10 @@ gulp.task('clean-sass', function() {
|
||||
gulp.task('sass', ['clean-sass'], function() {
|
||||
gulp.src('./src/styles/config-page.scss')
|
||||
.pipe(sourceMaps.init())
|
||||
.pipe(sass().on('error', sass.logError))
|
||||
.pipe(autoprefixer({
|
||||
browsers: ['Android 4', 'iOS 8'],
|
||||
cascade: false
|
||||
}))
|
||||
.pipe(sass({
|
||||
includePaths: sassIncludePaths
|
||||
}).on('error', sass.logError))
|
||||
.pipe(autoprefixer(autoprefixerOptions))
|
||||
.pipe(sourceMaps.write('./'))
|
||||
.pipe(gulp.dest('tmp'));
|
||||
});
|
||||
@@ -56,8 +76,13 @@ gulp.task('inlineHtml', ['js', 'sass'], function() {
|
||||
});
|
||||
|
||||
gulp.task('clay', ['inlineHtml'], function() {
|
||||
return browserify('index.js', { debug: false })
|
||||
.transform(stringify(['.html', '.tpl']))
|
||||
return browserify('index.js', {
|
||||
debug: false,
|
||||
standalone: 'clay'
|
||||
})
|
||||
.transform(stringify(stringifyOptions))
|
||||
.transform(sassify, sassifyOptions)
|
||||
.transform(autoprefixify, autoprefixerOptions)
|
||||
.require(require.resolve('./index'), {expose: 'pebble-clay'})
|
||||
.bundle()
|
||||
.pipe(source('clay.js'))
|
||||
@@ -65,21 +90,10 @@ gulp.task('clay', ['inlineHtml'], function() {
|
||||
});
|
||||
|
||||
gulp.task('dev-js', ['js', 'sass'], function() {
|
||||
return browserify('dev/dev.js', { debug: true, global: true })
|
||||
.transform(stringify(['.html', '.tpl']), { global: true })
|
||||
return browserify('dev/dev.js', { debug: true })
|
||||
.transform(stringify(stringifyOptions))
|
||||
.transform('deamdify')
|
||||
.transform(sassify, {
|
||||
global: true,
|
||||
base64Encode: false,
|
||||
sourceMap: false,
|
||||
sourceMapEmbed: false,
|
||||
sourceMapContents: false,
|
||||
outputStyle: 'compact',
|
||||
includePaths: [].concat(
|
||||
require('bourbon').includePaths,
|
||||
'src/styles'
|
||||
)
|
||||
})
|
||||
.transform(sassify, sassifyOptions)
|
||||
.bundle()
|
||||
.pipe(source('dev.js'))
|
||||
.pipe(gulp.dest('./tmp/'));
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
'use strict';
|
||||
|
||||
var configPageHtml = require('./tmp/config-page.html');
|
||||
var toSource = require('tosource');
|
||||
var standardComponents = require('./src/scripts/components');
|
||||
|
||||
/**
|
||||
* @param {string} input
|
||||
@@ -56,16 +58,42 @@ function encodeDataUri(input) {
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {array} config - the Clay config
|
||||
* @param {Array} config - the Clay config
|
||||
* @param {function} [customFn] - custom code to run from the config page.
|
||||
* Will run with api as context
|
||||
* @constructor
|
||||
*/
|
||||
function Clay(config, customFn) {
|
||||
this.config = config;
|
||||
this.customFn = customFn || function() {};
|
||||
var self = this;
|
||||
|
||||
self.config = config;
|
||||
self.customFn = customFn || function() {};
|
||||
self.components = [];
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @param {Clay~ConfigItem|Array} item
|
||||
* @return {void}
|
||||
*/
|
||||
function _registerStandardComponents(item) {
|
||||
if (Array.isArray(item)) {
|
||||
item.forEach(function(item) {
|
||||
_registerStandardComponents(item);
|
||||
});
|
||||
} else if (item.type === 'section') {
|
||||
_registerStandardComponents(item.items);
|
||||
} else if (standardComponents[item.type]) {
|
||||
self.registerComponent(standardComponents[item.type]);
|
||||
}
|
||||
}
|
||||
|
||||
_registerStandardComponents(self.config);
|
||||
}
|
||||
|
||||
Clay.prototype.registerComponent = function(component) {
|
||||
this.components.push(component);
|
||||
};
|
||||
|
||||
/**
|
||||
* Generate the Data URI used by the config Page with settings injected
|
||||
* @param {string} returnTo - used while developing on desktop.
|
||||
@@ -80,19 +108,13 @@ Clay.prototype.generateUrl = function(returnTo) {
|
||||
settings = {};
|
||||
}
|
||||
|
||||
var strings = {
|
||||
customFn: this.customFn.toString().replace(/^.*?\{/, '{'),
|
||||
returnTo: returnTo || 'pebblejs://close#',
|
||||
config: JSON.stringify(this.config),
|
||||
settings: JSON.stringify(settings)
|
||||
};
|
||||
|
||||
// Show config page
|
||||
return encodeDataUri(configPageHtml
|
||||
.replace('$$CUSTOM_FN$$', strings.customFn)
|
||||
.replace('$$RETURN_TO$$', strings.returnTo)
|
||||
.replace('$$CONFIG$$', strings.config)
|
||||
.replace('$$SETTINGS$$', strings.settings)
|
||||
.replace('$$CUSTOM_FN$$', toSource(this.customFn))
|
||||
.replace('$$RETURN_TO$$', returnTo || 'pebblejs://close#')
|
||||
.replace('$$CONFIG$$', toSource(this.config))
|
||||
.replace('$$SETTINGS$$', toSource(settings))
|
||||
.replace('$$COMPONENTS$$', toSource(this.components))
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -29,6 +29,7 @@
|
||||
},
|
||||
"homepage": "https://github.com/pebble/clay#readme",
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^6.3.1",
|
||||
"bourbon": "^4.2.6",
|
||||
"browserify": "^13.0.0",
|
||||
"browserify-istanbul": "^0.2.1",
|
||||
@@ -54,9 +55,13 @@
|
||||
"karma-threshold-reporter": "^0.1.15",
|
||||
"mocha": "^2.3.4",
|
||||
"pebble-clay-components": "git+https://github.com/pebble/clay-components.git#master",
|
||||
"postcss": "^5.0.14",
|
||||
"require-from-string": "^1.1.0",
|
||||
"sassify": "^0.9.1",
|
||||
"sinon": "^1.17.3",
|
||||
"stringify": "^3.2.0",
|
||||
"through": "^2.3.8",
|
||||
"tosource": "^1.0.0",
|
||||
"vinyl-source-stream": "^1.1.0",
|
||||
"watchify": "^3.7.0"
|
||||
},
|
||||
|
||||
@@ -8,11 +8,12 @@
|
||||
window.returnTo = '$$RETURN_TO$$';
|
||||
window.clayConfig = $$CONFIG$$;
|
||||
window.claySettings = $$SETTINGS$$;
|
||||
window.customFn = function() $$CUSTOM_FN$$;
|
||||
window.customFn = $$CUSTOM_FN$$;
|
||||
window.clayComponents = $$COMPONENTS$$;
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<form id="main-form" class="inputs"></form>
|
||||
<script uglify src="../tmp/config-page.js"></script>
|
||||
<script src="../tmp/config-page.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -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;
|
||||
});
|
||||
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,10 @@
|
||||
'use strict';
|
||||
|
||||
module.exports = {
|
||||
name: 'footer',
|
||||
template: require('../../templates/components/footer.tpl'),
|
||||
manipulator: 'html',
|
||||
defaults: {
|
||||
attributes: {}
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,11 @@
|
||||
'use strict';
|
||||
|
||||
module.exports = {
|
||||
name: 'heading',
|
||||
template: require('../../templates/components/heading.tpl'),
|
||||
manipulator: 'html',
|
||||
defaults: {
|
||||
attributes: {},
|
||||
size: 4
|
||||
}
|
||||
};
|
||||
@@ -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')
|
||||
};
|
||||
@@ -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: {}
|
||||
}
|
||||
};
|
||||
@@ -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);
|
||||
});
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,10 @@
|
||||
'use strict';
|
||||
|
||||
module.exports = {
|
||||
name: 'submit',
|
||||
template: require('../../templates/components/submit.tpl'),
|
||||
manipulator: 'val',
|
||||
defaults: {
|
||||
attributes: {}
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,10 @@
|
||||
'use strict';
|
||||
|
||||
module.exports = {
|
||||
name: 'text',
|
||||
template: require('../../templates/components/text.tpl'),
|
||||
manipulator: 'html',
|
||||
defaults: {
|
||||
attributes: {}
|
||||
}
|
||||
};
|
||||
@@ -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: {}
|
||||
}
|
||||
};
|
||||
@@ -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
|
||||
|
||||
@@ -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}
|
||||
*/
|
||||
|
||||
@@ -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.
|
||||
|
||||
@@ -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');
|
||||
|
||||
|
||||
Vendored
+54
@@ -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);
|
||||
}
|
||||
};
|
||||
@@ -1,6 +1,5 @@
|
||||
@import "bourbon";
|
||||
@import "vars";
|
||||
@import "mixins";
|
||||
@import "clay";
|
||||
|
||||
html, body {
|
||||
@include font-pfdin(regular);
|
||||
|
||||
@@ -0,0 +1,91 @@
|
||||
@import "clay";
|
||||
|
||||
.component-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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
@import "clay";
|
||||
|
||||
.component-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 ;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
@import "bourbon";
|
||||
@import "clay";
|
||||
|
||||
.component-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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
@import "clay";
|
||||
|
||||
.component-toggle {
|
||||
|
||||
$slide-height: $base-height * 0.75;
|
||||
$slide-width: $small-component-width;
|
||||
$marker-diameter: $base-height;
|
||||
|
||||
input {
|
||||
display: none; // @todo make sure this doesn't 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);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,5 +1,4 @@
|
||||
@import "../vars";
|
||||
@import "../mixins";
|
||||
@import "clay";
|
||||
|
||||
button,
|
||||
.button {
|
||||
|
||||
Executable
+17
@@ -0,0 +1,17 @@
|
||||
<div class="component-color">
|
||||
<label class="component">
|
||||
<input
|
||||
data-manipulator-target
|
||||
type="hidden"
|
||||
/>
|
||||
<span class="label">{{{label}}}</span>
|
||||
<span class="value"></span>
|
||||
</label>
|
||||
<div class="picker-wrap">
|
||||
<div class="picker">
|
||||
<div class="color-box-wrap">
|
||||
<div class="color-box-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Executable
+5
@@ -0,0 +1,5 @@
|
||||
<div
|
||||
data-manipulator-target
|
||||
class="item-container-footer"
|
||||
{{each attributes}} {{this.key}}="{{this.value}}" {{/each}}
|
||||
></div>
|
||||
Executable
+3
@@ -0,0 +1,3 @@
|
||||
<div class="component component-heading">
|
||||
<h{{size}} data-manipulator-target {{each key: attributes}}{{key}}="{{this}}"{{/each}}></h{{size}}>
|
||||
</div>
|
||||
Executable
+9
@@ -0,0 +1,9 @@
|
||||
<label class="component component-input">
|
||||
<span class="label">{{{label}}}</span>
|
||||
<span class="input">
|
||||
<input
|
||||
data-manipulator-target
|
||||
{{each key: attributes}}{{key}}="{{this}}"{{/each}}
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
Executable
+9
@@ -0,0 +1,9 @@
|
||||
<label class="component component-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>
|
||||
Executable
+9
@@ -0,0 +1,9 @@
|
||||
<div class="component component-button">
|
||||
<button
|
||||
data-manipulator-target
|
||||
type="submit"
|
||||
{{each key: attributes}}{{key}}="{{this}}"{{/each}}
|
||||
>
|
||||
{{{label}}}
|
||||
</button>
|
||||
</div>
|
||||
@@ -0,0 +1,3 @@
|
||||
<div class="component component-text">
|
||||
<p data-manipulator-target {{each key: attributes}}{{key}}="{{this}}"{{/each}}></p>
|
||||
</div>
|
||||
Executable
+14
@@ -0,0 +1,14 @@
|
||||
<label class="component component-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>
|
||||
+3
-3
@@ -1,8 +1,8 @@
|
||||
'use strict';
|
||||
|
||||
var _ = require('../src/scripts/vendor/minified/minified')._;
|
||||
var $ = require('../src/scripts/vendor/minified/minified').$;
|
||||
var HTML = require('../src/scripts/vendor/minified/minified').HTML;
|
||||
var _ = require('../src/scripts/vendor/minified')._;
|
||||
var $ = require('../src/scripts/vendor/minified').$;
|
||||
var HTML = require('../src/scripts/vendor/minified').HTML;
|
||||
var ClayItem = require('../src/scripts/lib/clay-item');
|
||||
var ClayConfig = require('../src/scripts/lib/clay-config');
|
||||
var idCounter = 0;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
'use strict';
|
||||
|
||||
var assert = require('chai').assert;
|
||||
var _ = require('../../../src/scripts/vendor/minified/minified')._;
|
||||
var _ = require('../../../src/scripts/vendor/minified')._;
|
||||
var selectComponent = require('pebble-clay-components').select;
|
||||
var componentRegistry = require('../../../src/scripts/lib/component-registry');
|
||||
var checkReadOnly = require('../../test-utils').checkReadOnly;
|
||||
|
||||
@@ -2,8 +2,8 @@
|
||||
var sinon = require('sinon');
|
||||
var assert = require('chai').assert;
|
||||
var ClayEvents = require('../../../src/scripts/lib/clay-events');
|
||||
var $ = require('../../../src/scripts/vendor/minified/minified').$;
|
||||
var HTML = require('../../../src/scripts/vendor/minified/minified').HTML;
|
||||
var $ = require('../../../src/scripts/vendor/minified').$;
|
||||
var HTML = require('../../../src/scripts/vendor/minified').HTML;
|
||||
|
||||
/**
|
||||
* @extends ClayEvents
|
||||
|
||||
@@ -4,7 +4,7 @@ var assert = require('chai').assert;
|
||||
var sinon = require('sinon');
|
||||
var checkReadOnly = require('../../test-utils').checkReadOnly;
|
||||
var ClayItem = require('../../../src/scripts/lib/clay-item');
|
||||
var minified = require('../../../src/scripts/vendor/minified/minified');
|
||||
var minified = require('../../../src/scripts/vendor/minified');
|
||||
var clayItemFixture = require('../../fixture').clayItem;
|
||||
var configItemFixture = require('../../fixture').configItem;
|
||||
var componentRegistry = require('../../../src/scripts/lib/component-registry');
|
||||
|
||||
Reference in New Issue
Block a user