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

only dispatch manipulator events if the state is actually changed.

Browse Source
This commit is contained in:
Keegan
2016-03-06 14:28:38 +11:00
parent bdcd820f7c
commit 069d4a80da
5 changed files with 104 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/scripts/components/select.js
+9 -2
View File
@@ -16,11 +16,18 @@ module.exports = {
var $value = self.$element.select('.value');
self.on('change', function() {
/**
* Updates the HTML value of the component to match the slected option's label
* @return {void}
*/
function setValueDisplay() {
var selectedIndex = self.$manipulatorTarget.get('selectedIndex');
var $options = self.$manipulatorTarget.select('option');
var value = $options[selectedIndex] && $options[selectedIndex].innerHTML;
$value.set('innerHTML', value);
});
}
setValueDisplay();
self.on('change', setValueDisplay);
}
};
src/scripts/lib/manipulators.js
+26 -6
View File
@@ -1,35 +1,45 @@
'use strict';
var _ = require('../vendor/minified')._;
/**
* @returns {ClayEvents}
* @returns {ClayItem|ClayEvents}
* @extends {ClayItem}
*/
function disable() {
if (this.$manipulatorTarget.get('disabled')) { return this; }
this.$element.set('+disabled');
this.$manipulatorTarget.set('disabled', true);
return this.trigger('disabled');
}
/**
* @returns {ClayEvents}
* @returns {ClayItem|ClayEvents}
* @extends {ClayItem}
*/
function enable() {
if (!this.$manipulatorTarget.get('disabled')) { return this; }
this.$element.set('-disabled');
this.$manipulatorTarget.set('disabled', false);
return this.trigger('enabled');
}
/**
* @returns {ClayEvents}
* @returns {ClayItem|ClayEvents}
* @extends {ClayItem}
*/
function hide() {
if (this.$element[0].classList.contains('hide')) { return this; }
this.$element.set('+hide');
return this.trigger('hide');
}
/**
* @returns {ClayEvents}
* @returns {ClayItem|ClayEvents}
* @extends {ClayItem}
*/
function show() {
if (!this.$element[0].classList.contains('hide')) { return this; }
this.$element.set('-hide');
return this.trigger('show');
}
@@ -40,6 +50,7 @@ module.exports = {
return this.$manipulatorTarget.get('innerHTML');
},
set: function(value) {
if (this.get() === value.toString(10)) { return this; }
this.$manipulatorTarget.set('innerHTML', value);
return this.trigger('change');
},
@@ -51,6 +62,7 @@ module.exports = {
return this.$manipulatorTarget.get('value');
},
set: function(value) {
if (this.get() === value.toString(10)) { return this; }
this.$manipulatorTarget.set('value', value);
return this.trigger('change');
},
@@ -64,6 +76,7 @@ module.exports = {
return this.$manipulatorTarget.get('checked') ? 1 : 0;
},
set: function(value) {
if (!this.get() === !value) { return this; }
this.$manipulatorTarget.set('checked', !!value);
return this.trigger('change');
},
@@ -77,6 +90,7 @@ module.exports = {
return this.$element.select('input:checked').get('value');
},
set: function(value) {
if (this.get() === value.toString(10)) { return this; }
this.$element
.select('input[value="' + value.replace('"', '\\"') + '"]')
.set('checked', true);
@@ -97,8 +111,12 @@ module.exports = {
},
set: function(values) {
var self = this;
self.$element.select('input').set('checked', false);
values = values || [];
if (_.equals(this.get(), values)) { return this; }
self.$element.select('input').set('checked', false);
values.map(function(value) {
self.$element
.select('input[value="' + value.replace('"', '\\"') + '"]')
@@ -120,8 +138,10 @@ module.exports = {
case 'number': value = value.toString(16); break;
case 'string': value = value.replace(/^#|^0x/, ''); break;
}
value = value || '000000';
this.$manipulatorTarget.set('value', value || '000000');
if (this.get() === parseInt(value, 16)) { return this; }
this.$manipulatorTarget.set('value', value);
return this.trigger('change');
},
disable: disable,
src/scripts/vendor/minified.js
Vendored
+53 -3
View File
@@ -1,8 +1,8 @@
// minified.js config start -- use this comment to re-create a configuration in the Builder
// - Only sections add, always, amdsupport, copyobj, dollardollar,
// - each, eachobj, error, extend, find, format, formathtml, get, ht, html,
// - isobject, off, on, ready, request, select, set, template, trigger, underscore,
// - wait.
// - each, eachobj, equals, error, extend, find, format, formathtml, get, ht,
// - html, isobject, off, on, ready, request, select, set, template, trigger,
// - underscore, wait.
// WARNING! This file is autogenerated from minified-master.js and others.
@@ -1550,6 +1550,53 @@ define('minified', function() {
*/
'each': listBind(each),
/*$
* @id equals
* @group LIST
* @requires
* @configurable default
* @name .equals()
* @altname _.equals()
* @syntax list.equals(otherObject)
* @syntax _.equals(thisObject, otherObject)
* @module UTIL
* Checks whether two values, lists or objects are equal in a deep comparison.
*
* First <var>equals()</var> checks whether it got a function as parameter.
* If yes, it will be invoked without arguments and <var>equals()</var> calls itself recursively with the function's result.
*
* Once both values are no functions anymore, the values will be evaluated, If the first value is...
* <ul><li>...<var>null</var> or <var>undefined</var>, they are only equal if the other one is also either <var>null</var> or <var>undefined</var>.</li>
* <li>...a value as defined by ##_.isValue(), but not a Date, they are equal if the other value is the same type and is equal according to the '==' operator.</li>
* <li>...a Date, they are equal if the other value is a Date representing the same time.</li>
* <li>...a list or array, they are equal if the other value is also either a list or an array, has the same number of items and all items equal the items of the other
* list at the same position. The equality of list items is determined recursively using the same rules, so you can also nest lists.</li>
* <li>...a function, it will be invoked without arguments and its return value is evaluated using these rules as if the value has been passed. </li>
* <li>...any other object, they are equal if they contain exactly the same keys (as defined by ##_.eachObj()) and all values are equal as determined using these rules
* recursively.</li>
* </ul>
*
* Please note that, according to the rules, a ##list#Minified list## is equal to an array, as long as their content is equal. <var>equals</var> does not
* differentiate between <var>null</var> and <var>undefined</var>.
*
* <var>equals</var> is commutative. If you swap the parameters, the result is the same as long as no functions are involved.
*
* @example Compare a list and an array:
* <pre>
* _.equals([1, 2, 3], _(1, 2, 3)); // returns true
* </pre>
*
* @example Same result, but with a list method:
* <pre>
* _(1, 2, 3).equals([1, 2, 3]); // returns true
* </pre>
*
* @param thisObject The first reference to evaluate.
* @param otherObject The second reference to evaluate.
* @return true if both references are equal. False otherwise.
*/
'equals': listBind(equals),
/*$
* @id find
* @group LIST
@@ -2626,6 +2673,9 @@ define('minified', function() {
// @condblock find
'find': find,
// @condend
// @condblock equals
'equals': equals,
// @condend
/*$
* @id copyobj
test/spec/components/select.js
+1 -1
View File
@@ -3,7 +3,7 @@
var assert = require('chai').assert;
var fixture = require('../../fixture');
describe('component - color', function() {
describe('component - select', function() {
it('sets the value display to the correct value on change', function() {
var clayConfig = fixture.clayConfig([
{
test/spec/lib/manipulators.js
+15 -8
View File
@@ -19,9 +19,10 @@ describe('manipulators', function() {
it('sets: "' + value + '" and gets: "' + expected + '" then triggers "change"',
function() {
var handlerSpy = sinon.spy();
var clayItem = fixture.clayItem(itemType);
var clayItem = fixture.clayConfig([itemType]).getAllItems()[0];
clayItem.on('change', handlerSpy);
clayItem.set(value);
clayItem.set(value);
assert.deepEqual(clayItem.get(), expected);
assert.strictEqual(handlerSpy.callCount, 1, 'handler not called once');
@@ -45,6 +46,7 @@ describe('manipulators', function() {
false
);
clayItem.disable();
clayItem.disable();
assert.strictEqual(
clayItem.$element[0].classList.contains('disabled'),
true
@@ -73,6 +75,7 @@ describe('manipulators', function() {
true
);
clayItem.enable();
clayItem.enable();
assert.strictEqual(
clayItem.$element[0].classList.contains('disabled'),
false
@@ -100,6 +103,7 @@ describe('manipulators', function() {
false
);
clayItem.hide();
clayItem.hide();
assert.strictEqual(
clayItem.$element[0].classList.contains('hide'),
true
@@ -127,6 +131,7 @@ describe('manipulators', function() {
true
);
clayItem.show();
clayItem.show();
assert.strictEqual(
clayItem.$element[0].classList.contains('hide'),
false
@@ -145,6 +150,7 @@ describe('manipulators', function() {
describe('val', function() {
testSetGet('input', 'test321');
testSetGet('input', 1234, '1234');
testDisable('input');
testEnable('input');
testShow('text');
@@ -152,10 +158,10 @@ describe('manipulators', function() {
});
describe('checked', function() {
testSetGet('toggle', true, 1);
testSetGet('toggle', 1);
testSetGet('toggle', false, 0);
testSetGet('toggle', 0);
testSetGet({type: 'toggle', defaultValue: 0}, true, 1);
testSetGet({type: 'toggle', defaultValue: 0}, 1);
testSetGet({type: 'toggle', defaultValue: 1}, false, 0);
testSetGet({type: 'toggle', defaultValue: 1}, 0);
testDisable('toggle');
testEnable('toggle');
testShow('toggle');
@@ -185,6 +191,7 @@ describe('manipulators', function() {
var item = {
type: 'checkboxgroup',
clayId: 1,
defaultValue: ['two'],
options: [
{ label: '1', value: 'one' },
{ label: '2', value: 'two' },
@@ -207,9 +214,9 @@ describe('manipulators', function() {
testSetGet('color', '0xFF0000', 0xff0000);
testSetGet('color', '#ff0000', 0xff0000);
testSetGet('color', 0xff0000, 0xff0000);
testSetGet('color', '', 0x000000);
testSetGet('color', false, 0x000000);
testSetGet('color', undefined, 0x000000);
testSetGet({type: 'color', defaultValue: 0x00ff00}, '', 0x000000);
testSetGet({type: 'color', defaultValue: 0x00ff00}, false, 0x000000);
testSetGet({type: 'color', defaultValue: 0x00ff00}, undefined, 0x000000);
testDisable('color');
testEnable('color');
testShow('color');