Rename name variable. Update demo. Update test.

Author: dramoturg

bower.json

@@ -14,6 +14,6 @@
 	],
     "dependencies": {
 	  "dxjs": "devex-web-frontend/dxjs#^2.0.3",
-	  "dropdown": "devex-web-frontend/dropdown#empty-title-group"
+	  "dropdown": "devex-web-frontend/dropdown#^2.4.1"
     }
 }

src/js/colorpicker.js

@@ -124,56 +124,55 @@ var Colorpicker = (function(DX, window, document, undefined) {
 			};
 		}
 
-		function getColorGroups(colors) {
+		function getGroups(colors) {
 
-			var colorGroups = [];
+			var groups = [];
 
 			if (!colors || colors.length === 0) {
 				colorList = defaults.colorList;
-				colorGroups.push(createGroup(colorList));
+				groups.push(createGroup(colorList));
 			} else {
 				var colorsWithoutGroup = [];
 
-				colors.forEach(function(color) {
-					if (isObject(color) || isString(color)) {
-						var isItGroup = Array.isArray(color.colors);
+				colors.forEach(function(item) {
+					if (isObject(item) || isString(item)) {
+						var isItGroup = Array.isArray(item.colors);
 						if (isItGroup) {
-							colorGroups.push(color);
+							groups.push(item);
 						} else {
-							colorsWithoutGroup.push(color);
+							colorsWithoutGroup.push(item);
 						}
 					}
 				});
 
-				if (colorsWithoutGroup.length) {
-					colorGroups.unshift(
-						createGroup(colorsWithoutGroup)
-					);
-				}
+				groups.unshift(
+					createGroup(colorsWithoutGroup)
+				);
+
 			}
 
-			return removeEmptyColorGroup(colorGroups);
+			return removeEmptyGroups(groups);
 		}
 
 		/**
 		 * Remove  group without colors
-		 * @param {Array} colorGroups
+		 * @param {Array} groups
 		 * @returns {Array}
 		 */
-		function removeEmptyColorGroup(colorGroups) {
-			return colorGroups.filter(function(colorGroup) {
-				return colorGroup.colors.length > 0;
+		function removeEmptyGroups(groups) {
+			return groups.filter(function(group) {
+				return group.colors.length > 0;
 			});
 		}
 
 		/**
 		 * Get all colors from groups
-		 * @param {Array} colorGroups
+		 * @param {Array} groups
 		 * @returns {Array}
 		 */
-		function getAllColorsFromGroups(colorGroups) {
-			return colorGroups.reduce(function(colors, colorGroup) {
-				return colors.concat(colorGroup.colors);
+		function getAllColorsFromGroups(groups) {
+			return groups.reduce(function(colors, group) {
+				return colors.concat(group.colors);
 			},[]);
 		}
 
@@ -182,18 +181,20 @@ var Colorpicker = (function(DX, window, document, undefined) {
 		 * @param {Array} colors
 		 */
 		function setColorList(colors) {
-			var colorGroups = getColorGroups(colors);
-			colorGroups.forEach(function(colorGroup) {
-				colorGroup.colors = formatColors(colorGroup.colors);
+			var groups = getGroups(colors);
+			groups.forEach(function(group) {
+				group.colors = formatColors(group.colors);
 			});
-			allColors = getAllColorsFromGroups(colorGroups);
-
-			var dataForDropDown = prepareDataForDropDown(colorGroups);
-			dropDown.setDataList(dataForDropDown);
+			allColors = getAllColorsFromGroups(groups);
 
-			if (allColors.length) {
+			if (!allColors.length) {
+				setColorList(defaults.colorList);
+			} else {
+				var dataForDropDown = prepareDataForDropDown(groups);
+				dropDown.setDataList(dataForDropDown);
 				setColor(allColors[0]);
 			}
+
 		}
 
 		/**
@@ -215,15 +216,15 @@ var Colorpicker = (function(DX, window, document, undefined) {
 
 		/**
 		 * Get data for dropDown
-		 * @param  {{groupTitle:string, options:Array}[]} colorGroups
+		 * @param  {{groupTitle:string, options:Array}[]} groups
 		 * @returns {Array}
 		 */
-		function prepareDataForDropDown(colorGroups) {
+		function prepareDataForDropDown(groups) {
 
-			return colorGroups.map(function(colorGroup) {
+			return groups.map(function(group) {
 				return {
-					title: colorGroup.groupTitle || '',
-					options: colorGroup.colors.map(function(value) {
+					title: group.groupTitle || '',
+					options: group.colors.map(function(value) {
 						return {
 							value: value
 						};

test/html/default.case.html

@@ -23,46 +23,32 @@
 	<script>
 
 		Colorpicker.colorList = [
-			['#dasdasd','#dsadasd'],
-			'#FFFFFF', '#e5e5e5', '#cccccc', '#b5b5b5', '#999999', '#828282',
-			'#666666', '#4f4f4f', '#333333', '#1c1c1c', '#161412',
 			{
-				groupTitle: 'Basic and Studies',
-				colors: [
-					'#962d3e','#d9372c','#de7d2c','#ffc973','#d9d96c','#60994d',
-					'#79bd8f','#00b892','#348899','#14a0b3','#92c4e0'
-				]
-			},
-			'#ff6666','#ffaf66','#fffb66','#b8ff66','#66ff66','#66ffaf',
-			'#66fffb','#66beff','#6666ff','#bc66ff','#fb66ff',
-			{
-				groupTitle: 'Common',
-				colors: [
-					'#ff9999','#ffc799','#fffa99','#d3ff99','#99ff99','#66ffaf',
-					'#99fffa','#99d8ff','#9999ff','#cd99ff','#fa99ff',
-					'#ff6666','#ffaf66','#fffb66','#b8ff66','#66ff66','#66ffaf',
-					'#66fffb','#66beff','#6666ff','#bc66ff','#fb66ff',
-					'#cc2929','#cc7229','#ccc429','#85cc29','#29cc29','#29cc72',
-					'#29ccc4','#298ecc','#5e5ee5','#8b54cc','#c429cc',
-					'#a50000','#a54300','#998e00','#5a9900','#009900','#009941',
-					'#00998e','#006699','#4646af','#5f3c96','#8e0099'
-				]
+				groupTitle: 'test',
+				colors: []
 			}
 		];
 	</script>
 	<script type="text/javascript">
 		var colorPickers = [];
 		window.onload = function() {
 			var inputColorPicker = document.getElementById('Input_ColorPicker');
+			var inputColorPickerGroupWithoutTitle = document.getElementById('Input_ColorPicker_GroupWithoutTitle');
 			inputColorPicker.colorList = [
-				'#66fffb','#66beff','#6666ff','#bc66ff','#fb66ff',
 				{
 					groupTitle: 'Group 1',
 					colors: [
 						'#ffffff', '#e5e5e5', '#cccccc', '#b5b5b5', '#999999', '#828282'
 					]
 				}
 			];
+			inputColorPickerGroupWithoutTitle.colorList = [
+				{
+					colors: [
+						'#ffffff', '#e5e5e5', '#cccccc', '#b5b5b5', '#999999', '#828282'
+					]
+				}
+			];
 			Array.prototype.forEach.call(document.querySelectorAll('[data-colorpicker]'), function(input) {
 				colorPickers.push(new Colorpicker(input));
 			})
@@ -74,6 +60,10 @@
 	<legend>Color List from object Colorpicker.colorList</legend>
 	<input data-ng-model="default" data-colorpicker type="text" value=""/>
 </fieldset>
+<fieldset>
+	<legend>Color List with group without title</legend>
+	<input data-ng-model="default" data-colorpicker type="text" value="" id="Input_ColorPicker_GroupWithoutTitle"/>
+</fieldset>
 <fieldset>
 	<legend>Color List from property DOM Element</legend>
 	<input data-ng-model="default" data-colorpicker type="text" value="" id="Input_ColorPicker"/>

test/js/colorpicker.unit.spec.js

@@ -5,14 +5,15 @@ describe('Colorpicker', function() {
 	var elementTmpl = [
 		'<input  type="text" value="" id="test" />'
 	].join(''),
+	defaultColorList = ['#511717', '#000000', '#fefefe'],
 	colorPicker,
 	testElement;
 
 	beforeEach(function() {
 		document.body.innerHTML = elementTmpl;
 		testElement = document.getElementById('test');
 		window.DropDown = DropDownMock;
-		window.Colorpicker.colorList = ['#511717', '#000000', '#fefefe'];
+		window.Colorpicker.colorList = defaultColorList;
 	});
 
 	afterEach(function() {
@@ -24,61 +25,68 @@ describe('Colorpicker', function() {
 
 	describe('dropDownData', function() {
 
-		it('should create one group from colors without group', function() {
-			var dropDown,
-				dataList;
+		var dropDown,
+			dataList,
+			temp,
+			initColorPicker;
+
+		beforeEach(function(){
 
-			 new Colorpicker(testElement);
+			initColorPicker = function(colorList) {
+				colorList = colorList || defaultColorList;
+				window.Colorpicker.colorList = colorList;
+				new Colorpicker(testElement);
 
-			 dropDown = DropDown.___instance;
-			 dataList = dropDown.getDataList();
+				dropDown = DropDown.___instance;
+				dataList = dropDown.getDataList();
+			};
+
+			afterEach(function() {
+				window.Colorpicker.colorList = [];
+			});
 
-			 expect(dataList.length).toEqual(1);
-			 expect(dataList[0].title).toEqual('');
 		});
 
-		it('should create group with passed title' , function() {
-			window.Colorpicker.colorList = [{
-				groupTitle: 'test',
-				colors: ['#000', '#fff']
-			}];
+		it('should create one group from colors without group', function() {
 
-			new Colorpicker(testElement);
+			initColorPicker();
+
+			expect(dataList.length).toEqual(1);
+			expect(dataList[0].title).toEqual('');
+		});
 
-			dropDown = DropDown.___instance;
-			dataList = dropDown.getDataList();
+		it('should create group with passed title' , function() {
+			initColorPicker([
+				{
+					groupTitle: 'test',
+					colors: ['#000', '#fff']
+				}
+			]);
 			expect(dataList.length).toEqual(1);
 			expect(dataList[0].title).toEqual('test');
 
 		});
 
 		it('should not create group with blank colors', function() {
-			window.Colorpicker.colorList = [{
-				groupTitle: 'test',
-				colors: []
-			}];
-
-			new Colorpicker(testElement);
-
-			dropDown = DropDown.___instance;
-			dataList = dropDown.getDataList();
-			expect(dataList.length).toEqual(0);
+			initColorPicker([
+				'#000', '#fff',
+				{
+					groupTitle: 'test',
+					colors: []
+				}
+			]);
+			expect(dataList.length).toEqual(1);
 		});
 
 		it('should create the same number of groups from mixed config', function() {
-			window.Colorpicker.colorList = [
+			initColorPicker([
 				'#000', '#fff',
 				{
 					groupTitle: 'test',
 					colors: ['#000', '#fff']
 				},
 				'#000', '#fff'
-			];
-
-			new Colorpicker(testElement);
-
-			dropDown = DropDown.___instance;
-			dataList = dropDown.getDataList();
+			]);
 			expect(dataList.length).toEqual(2);
 		})