Merge pull request #2 from devex-web-frontend/feature/disabled_modifier

seems fine

Author: mankdev

src/js/colorpicker.js

@@ -15,6 +15,7 @@ var Colorpicker = (function(DX, window, document, undefined) {
 	var event = DX.Event,
 		CN_COLORPICKER = 'colorPicker',
 		M_OPEN = 'opened',
+		M_DISABLED = 'disabled',
 		CN_COLORPICKER_LABEL = CN_COLORPICKER + '--label',
 		CN_COLORPICKER_VALUE = CN_COLORPICKER + '--value',
 		defaultColors = {
@@ -79,7 +80,9 @@ var Colorpicker = (function(DX, window, document, undefined) {
 			});
 			initListeners();
 			setColorListHandler();
-
+			if (disabled) {
+				setDisabled();
+			}
 			DX.Event.trigger(input, Colorpicker.E_CREATED, {
 				detail: {
 					block: block,
@@ -103,7 +106,6 @@ var Colorpicker = (function(DX, window, document, undefined) {
 
 		function initAppearance() {
 			var parent = DX.Dom.getParent(input);
-
 			block = DX.Dom.createElement('div', {
 				className: CN_COLORPICKER,
 				innerHTML: DX.Tmpl.process(config.INNER_TMPL, config)
@@ -277,10 +279,12 @@ var Colorpicker = (function(DX, window, document, undefined) {
 		function setDisabled() {
 			hideDropDown();
 			disabled = true;
+			DX.Bem.addModifier(block, M_DISABLED);
 		}
 
 		function setEnabled() {
 			disabled = false;
+			DX.Bem.removeModifier(block, M_DISABLED);
 		}
 
 		/**

test/js/colorpicker.unit.spec.js

@@ -3,11 +3,11 @@
  */
 describe('Colorpicker', function() {
 	var elementTmpl = [
-		'<input  type="text" value="" id="test" />'
-	].join(''),
-	defaultColorList = ['#511717', '#000000', '#fefefe'],
-	colorPicker,
-	testElement;
+			'<input  type="text" value="" id="test" />'
+		].join(''),
+		defaultColorList = ['#511717', '#000000', '#fefefe'],
+		colorPicker,
+		testElement;
 
 	beforeEach(function() {
 		document.body.innerHTML = elementTmpl;
@@ -22,12 +22,41 @@ describe('Colorpicker', function() {
 		window.Colorpicker.colorList = [];
 	});
 
+	describe('disabled', function() {
+
+		var getDisabled;
+
+		beforeEach(function(){
+			testElement.disabled  = true;
+			getDisabled = function() {
+				return  document.querySelectorAll('.colorPicker-disabled');
+			}
+		});
+
+		it('should has modifier `disabled` if input has attribute `disabled`', function() {
+			new Colorpicker(testElement);
+			expect(getDisabled().length).toEqual(1)
+		});
+
+		it('sholud remove  modifier `disabled` on method `setEnabled`', function() {
+			var colorPicker = new Colorpicker(testElement);
+			colorPicker.setEnabled();
+			expect(getDisabled().length).toEqual(0)
+		});
+
+		it('sholud add  modifier `disabled` on method `setDisabled`', function() {
+			test.disabled = false;
+			var colorPicker = new Colorpicker(testElement);
+			colorPicker.setDisabled();
+			expect(getDisabled().length).toEqual(1)
+		})
+
+	});
 
 	describe('dropDownData', function() {
 
 		var dropDown,
 			dataList,
-			temp,
 			initColorPicker;
 
 		beforeEach(function(){