updates

2025-12-17 03:48:58 +02:00
parent 1620c941ee
commit a6b9923929
1 changed files with 47 additions and 45 deletions
@@ -3,67 +3,69 @@ import { El } from "../../utils/dom";

 export class Cancelable {

-    /**
-    * Cancelable, Construct
-    */
-    constructor(target, events) {
+	/**
+	* Cancelable, Construct
+	*/
+	constructor(target, events) {

-        let that = this;
+		this.target = target;
+		this.events = events || {};

-        this.target = target;
+		if (target.dxData('cancelable')) {
+			return;
+		}

-        events = events || {};
+		target.dxData('cancelable', this);

-        target.dxData('cancelable', this);
+		this.iconHandler = El('i', { className: 'icon-right icon-clear hide' });

-        this.iconHandler = El('i', { className: 'icon-right icon-clear hide' });
+		let elType = target.tagName.toLowerCase();

-        let elType = target.tagName.toLowerCase();
+		if (elType == 'select' || (elType == 'input' && target.type == 'text')) {
 			
-        if (elType == 'select' || (elType == 'input' && target.type == 'text')) {
+			const val = this.target.dxVal();

-            let val = this.target.dxVal();
+			this.emptyVal = '';

-            let emptyVal = '';
+			if (elType == 'select' && target.dxFind('option[value="0"]')) {
+				this.emptyVal = '0';
+			}

-            if (elType == 'select' && target.dxFind('option[value="0"]')) {
-                emptyVal = '0';
-            }
+			this.iconHandler.classList.toggle('hide', val == this.emptyVal);
 			
-            this.iconHandler.classList.toggle('hide', val == emptyVal);
+			target.after(this.iconHandler);

-            target.after(this.iconHandler);
+			target.dxOn(elType == 'input' ? 'input.cancelable changed.cancelable' : 'change.cancelable', (_, t) => this.iconHandler.classList.toggle('hide', t.dxVal() == this.emptyVal));

-            target.dxOn(elType == 'input' ? 'input.cancelable changed.cancelable' : 'change.cancelable', function() {
-                that.iconHandler.classList.toggle('hide', this.dxVal() == emptyVal);
-            });
+			this.iconHandler.dxOn('click', _ => this.clear());
+		}
+	}

-            this.iconHandler.dxOn('click', function() {
+	/**
+	* Cancelble, Clear Value
+	*/
+	clear() {

-                target.dxVal(emptyVal);
+		this.target.value = this.emptyVal;

-                if ('value' in that.target.dataset) {
-                    that.target.dataset.value = '';
-                }
+		if ('value' in this.target.dataset) {
+			this.target.dataset.value = '';
+		}

-                that.iconHandler.classList.add('hide');
+		this.iconHandler.classList.add('hide');

-                that.target.dxTrigger('clear');
-                Ut.trigger(events.onClear, that);
-            });
-        }
-    }
+		this.target.dxTrigger('clear');
+		Ut.trigger(this.events.onClear, this);
+	}

-    /**
-    * Cancelble, Destroy
-    */
-    destroy() {
+	/**
+	* Cancelble, Destroy
+	*/
+	destroy() {
 		
-        this.target.dxOff('input.cancelable change.cancelable');
-        this.target.dxRemoveData('cancelable');
+		this.target.dxOff('input.cancelable change.cancelable');
+		this.target.dxRemoveData('cancelable');

-        this.iconHandler.remove();
-        
-        return this.target;
-    }
+		this.iconHandler.remove();
+	}
 }