Merge pull request #5 from Menesetsu/DXTF-4799

Added destroy() and removeListeners() methods.

Author: dramoturg

bower.json

@@ -14,6 +14,6 @@
 	],
     "dependencies": {
 	  "dxjs": "devex-web-frontend/dxjs#^2.0.3",
-	  "dropdown": "devex-web-frontend/dropdown#^2.5.0"
+	  "dropdown": "devex-web-frontend/dropdown#^2.9.0"
     }
 }

src/js/colorpicker.js

@@ -134,6 +134,33 @@ var Colorpicker = (function(DX) {
 			block.appendChild(input);
 		}
 
+		function removeAppearence() {
+			var parent = DX.Dom.getParent(block);
+			parent.insertBefore(input, block);
+			block.remove();
+		}
+
+
+		function destroy() {
+			removeListeners();
+			DX.Event.trigger(input, Colorpicker.E_DESTROYED);
+			removeAppearence();
+			dropDown.destroy();
+		}
+
+		function removeListeners() {
+			var dropDownEventTarget = dropDown.getEventTarget();
+
+			block.removeEventListener(DX.Event.TOUCH_CLICK, toggleDropDown, true);
+
+			dropDownEventTarget.removeEventListener(DropDown.E_SHOWN, setOpenedState, true);
+			dropDownEventTarget.removeEventListener(DropDown.E_HIDDEN, removeOpenedState, true);
+			dropDownEventTarget.removeEventListener(DropDown.E_CHANGED, dropDownIndexChangeHandler, true);
+
+			input.removeEventListener(Colorpicker.E_SET_COLOR_LIST, setColorListHandler);
+			input.removeEventListener(Colorpicker.E_SET_COLOR, setColorByInputValue);
+		}
+
 
 		function setColorListHandler() {
 			colorList = input.colorList || colorList || Colorpicker.colorList;
@@ -327,6 +354,12 @@ var Colorpicker = (function(DX) {
 		 */
 		this.setDisabled = setDisabled;
 
+		/**
+		 * Destroying colorpicker component and its dropdown
+		 * @method destroy
+		 */
+		this.destroy = destroy;
+
 		/**
 		 * Enables ColorPicker
 		 * @method setEnabled
@@ -359,6 +392,12 @@ var Colorpicker = (function(DX) {
  * @memberof Colorpicker
  */
 Colorpicker.E_CREATED = 'colorpicker:created';
+/** @constant
+ * @type {string}
+ * @default
+ * @memberof Colorpicker
+ */
+Colorpicker.E_DESTROYED = 'colorpicker:destroyed';
 /** @constant
  * @type {string}
  * @default

test/html/default.case.html

@@ -54,6 +54,8 @@
 		var colorPickers = [];
 		window.onload = function() {
 			var inputColorPicker = document.getElementById('Input_ColorPicker');
+			var buttonDestroyAll = document.getElementById('Button_DestroyAll');
+			var buttonInitAll  = document.getElementById('Button_InitAll');
 			var inputColorPickerGroupWithoutTitle = document.getElementById('Input_ColorPicker_GroupWithoutTitle');
 			inputColorPicker.colorList = [
 				{
@@ -70,9 +72,22 @@
 					]
 				}
 			];
-			Array.prototype.forEach.call(document.querySelectorAll('[data-colorpicker]'), function(input) {
-				colorPickers.push(new Colorpicker(input));
-			})
+
+			buttonInitAll.addEventListener('click', function() {
+				Array.prototype.forEach.call(document.querySelectorAll('[data-colorpicker]'), function(input) {
+					console.log('input', input);
+					colorPickers.push(new Colorpicker(input));
+				})
+			});
+
+			buttonDestroyAll.addEventListener('click', function() {
+				colorPickers.forEach(function(colorpicker) {
+					colorpicker.destroy();
+				});
+				colorPickers = [];
+			});
+
+
 		}
 	</script>
 </head>
@@ -93,5 +108,10 @@
 	<legend>Disabled</legend>
 	<input data-ng-model="default" data-colorpicker type="text" value=""  disabled />
 </fieldset>
+
+<button id="Button_InitAll">Init All</button>
+<button id="Button_DestroyAll">Destroy All</button>
+
+
 </body>
 </html>