From 069d4a80da7f9936e0d212ffc14fdcc28a5e925b Mon Sep 17 00:00:00 2001 From: Keegan Date: Sun, 6 Mar 2016 14:28:38 +1100 Subject: [PATCH] only dispatch manipulator events if the state is actually changed. --- src/scripts/components/select.js | 11 +++++-- src/scripts/lib/manipulators.js | 32 ++++++++++++++---- src/scripts/vendor/minified.js | 56 ++++++++++++++++++++++++++++++-- test/spec/components/select.js | 2 +- test/spec/lib/manipulators.js | 23 ++++++++----- 5 files changed, 104 insertions(+), 20 deletions(-) diff --git a/src/scripts/components/select.js b/src/scripts/components/select.js index ebd3229..09be191 100644 --- a/src/scripts/components/select.js +++ b/src/scripts/components/select.js @@ -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); } }; diff --git a/src/scripts/lib/manipulators.js b/src/scripts/lib/manipulators.js index 9f0000b..693e457 100755 --- a/src/scripts/lib/manipulators.js +++ b/src/scripts/lib/manipulators.js @@ -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, diff --git a/src/scripts/vendor/minified.js b/src/scripts/vendor/minified.js index 05b4061..a9816fb 100644 --- a/src/scripts/vendor/minified.js +++ b/src/scripts/vendor/minified.js @@ -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 equals() checks whether it got a function as parameter. + * If yes, it will be invoked without arguments and equals() 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... + * + * + * Please note that, according to the rules, a ##list#Minified list## is equal to an array, as long as their content is equal. equals does not + * differentiate between null and undefined. + * + * equals 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: + * 
+     *  _.equals([1, 2, 3], _(1, 2, 3));  // returns true
+     *
+ * + * @example Same result, but with a list method: + * 
+     *  _(1, 2, 3).equals([1, 2, 3]);  // returns true
+     *
+ * + * @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 diff --git a/test/spec/components/select.js b/test/spec/components/select.js index 86c7521..8ea8b2e 100644 --- a/test/spec/components/select.js +++ b/test/spec/components/select.js @@ -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([ { diff --git a/test/spec/lib/manipulators.js b/test/spec/lib/manipulators.js index 5dff85a..b38b2dd 100644 --- a/test/spec/lib/manipulators.js +++ b/test/spec/lib/manipulators.js @@ -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');