(Experimentally) use the Angular 1.5 compatible Switch

Tradeshift · May 9, 2018 · 66f121e · 66f121e
1 parent d254522
commit 66f121e
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 59 deletions.
diff --git a/docs/dist/sri.json b/docs/dist/sri.json
@@ -1,16 +1,16 @@
 {
   "@js": {
     "hashes": {
-      "sha384": "t8KYVqpP6WQJhORwTkvj9YiwcUcqi0uAmAtHJWgyUlFBwnO2kK6T0el3ymXYXucx"
+      "sha384": "mBCfKVgiYzOKrXdPgfOmE6pyMmKsRrTI1BFfGGD6xL3snHxNX2O4ctz4Le30oyhT"
     },
-    "integrity": "sha384-t8KYVqpP6WQJhORwTkvj9YiwcUcqi0uAmAtHJWgyUlFBwnO2kK6T0el3ymXYXucx",
+    "integrity": "sha384-mBCfKVgiYzOKrXdPgfOmE6pyMmKsRrTI1BFfGGD6xL3snHxNX2O4ctz4Le30oyhT",
     "path": "public/ts-10.0.23.min.js"
   },
   "@css": {
     "hashes": {
-      "sha384": "qVtE8d9ipWI+Vq7x7ICLUqD7z/nrhud1iocyqNf/rRxMwdXKv/JzAYf3L38ZvSxj"
+      "sha384": "ADVBXsEDpMrlyCl0JjT3PNVTFHO8E+oo/nc0nnB7ljMAmGtLvXvf8zqFRyLqkyCL"
     },
-    "integrity": "sha384-qVtE8d9ipWI+Vq7x7ICLUqD7z/nrhud1iocyqNf/rRxMwdXKv/JzAYf3L38ZvSxj",
+    "integrity": "sha384-ADVBXsEDpMrlyCl0JjT3PNVTFHO8E+oo/nc0nnB7ljMAmGtLvXvf8zqFRyLqkyCL",
     "path": "public/ts-10.0.23.min.css"
   }
 }
diff --git a/...m/spirits/ts.ui.SwitchSpirit.ANGULAR15.js → .../spirits/ts.ui.SwitchSpirit.OLDVERSION.js b/...m/spirits/ts.ui.SwitchSpirit.ANGULAR15.js → .../spirits/ts.ui.SwitchSpirit.OLDVERSION.js
@@ -1,5 +1,5 @@
 /**
- * REVISION OF THE SWITCH FOR ANGULAR 1.5, SEEMS IT BREAKS IN ANGULAR 1.3 THOUGH
+ * Spirit of the switch.
  * TODO (jmo@): Support swipe gestures on that switch!!!!!!!!!!!!!!!!!!!!!!!!!!!
  * @extends {ts.ui.FieldSpirit}
  * @using {string} tick
@@ -16,23 +16,27 @@ ts.ui.SwitchSpirit = (function using(tick, time) {
 		},
 
 		/**
-		 * Attaching to the DOM.
+		 * Attach to the DOM.
 		 */
 		onattach: function() {
 			this.super.onattach();
 			this.event.add('change');
-			this._createswitch();
+			this.css.add([
+				// TODO: update these classnames what with the new stylee!
+				ts.ui.CLASS_SWITCHBOX,
+				ts.ui.CLASS_ENGINE
+			]);
+			this._switch = this._createswitch();
 			this._synchronize(true);
-			this.tick.add(tick).start(tick, time);
-			this.css.add([ts.ui.CLASS_SWITCHBOX, ts.ui.CLASS_ENGINE]);
 		},
 
 		/**
-		 * Detaching from the DOM.
+		 * Syncrhonize on an interval so that we don't have to anticipate
+		 * all the strange stuff that Angular might do with our elements.
 		 */
-		ondetach: function() {
-			this.super.ondetach();
-			this.tick.remove(tick);
+		onready: function() {
+			this.super.onready();
+			this.tick.add(tick).start(tick, time);
 		},
 
 		/**
@@ -77,34 +81,27 @@ ts.ui.SwitchSpirit = (function using(tick, time) {
 		// Private .................................................................
 
 		/**
-		 * Snapshot checked status so that we know when it changes.
-		 * @type {boolean|null}
+		 * The switch DHTML thing.
+		 * @type {HTMLDivElement}
 		 */
-		_snapshot: null,
+		_switch: null,
 
 		/**
-		 * Fetch the switch element (and potentially create it).
-		 * @param {boolean} [create] - Create switch if it doesn't exist?
-		 * @returns {HTMLDivElement}
+		 * Snapshot checked status so that we know when it changes.
+		 * @type {boolean|null}
 		 */
-		_switch: function(create) {
-			if (create && !this._switch()) {
-				return this._createswitch();
-			} else {
-				var elm = this.dom.following(ts.ui.Spirit)[0];
-				return elm && elm.css.contains('ts-switcher') ? elm : null;
-			}
-		},
+		_snapshot: null,
 
 		/**
-		 * Inject the switch. Let's remove any potential existing 
-		 * switch, accounting for strange Angular quantum effects.
+		 * Inject the switch while accounting for strange Angular quantum effects.
 		 * @returns {ts.ui.Spirit}
 		 */
 		_createswitch: function() {
-			var html = ts.ui.switchonly.edbml();
-			this._switch() ? this._switch().dom.remove() : void 0;
-			return ts.ui.get(this.dom.after(this.dom.parseToNode(html)));
+			var oldswitch = this.dom.following(ts.ui.Spirit)[0];
+			if (oldswitch && oldswitch.css.contains('ts-switcher')) {
+				oldswitch.dom.remove();
+			}
+			return ts.ui.get(this.dom.after(this.dom.parseToNode(ts.ui.switchonly.edbml())));
 		},
 
 		/**
@@ -115,7 +112,7 @@ ts.ui.SwitchSpirit = (function using(tick, time) {
 		_synchronize: function(init) {
 			var checked = this.element.checked;
 			if (init || checked !== this._snapshot) {
-				this._switch(true).css.shift(checked, ts.ui.CLASS_CHECKED);
+				this._switch.css.shift(checked, ts.ui.CLASS_CHECKED);
 				this._snapshot = checked;
 				if (!init) {
 					this.action.dispatch(ts.ui.ACTION_SWITCH, checked);

diff --git a/src/runtime/js/ts.ui/forms/[email protected]/spirits/ts.ui.SwitchSpirit.js b/src/runtime/js/ts.ui/forms/[email protected]/spirits/ts.ui.SwitchSpirit.js
@@ -1,5 +1,5 @@
 /**
- * Spirit of the switch.
+ * REVISION OF THE SWITCH FOR ANGULAR 1.5, SEEMS IT BREAKS IN ANGULAR 1.3 THOUGH
  * TODO (jmo@): Support swipe gestures on that switch!!!!!!!!!!!!!!!!!!!!!!!!!!!
  * @extends {ts.ui.FieldSpirit}
  * @using {string} tick
@@ -16,27 +16,23 @@ ts.ui.SwitchSpirit = (function using(tick, time) {
 		},
 
 		/**
-		 * Attach to the DOM.
+		 * Attaching to the DOM.
 		 */
 		onattach: function() {
 			this.super.onattach();
 			this.event.add('change');
-			this.css.add([
-				// TODO: update these classnames what with the new stylee!
-				ts.ui.CLASS_SWITCHBOX,
-				ts.ui.CLASS_ENGINE
-			]);
-			this._switch = this._createswitch();
+			this._createswitch();
 			this._synchronize(true);
+			this.tick.add(tick).start(tick, time);
+			this.css.add([ts.ui.CLASS_SWITCHBOX, ts.ui.CLASS_ENGINE]);
 		},
 
 		/**
-		 * Syncrhonize on an interval so that we don't have to anticipate
-		 * all the strange stuff that Angular might do with our elements.
+		 * Detaching from the DOM.
 		 */
-		onready: function() {
-			this.super.onready();
-			this.tick.add(tick).start(tick, time);
+		ondetach: function() {
+			this.super.ondetach();
+			this.tick.remove(tick);
 		},
 
 		/**
@@ -80,28 +76,35 @@ ts.ui.SwitchSpirit = (function using(tick, time) {
 
 		// Private .................................................................
 
-		/**
-		 * The switch DHTML thing.
-		 * @type {HTMLDivElement}
-		 */
-		_switch: null,
-
 		/**
 		 * Snapshot checked status so that we know when it changes.
 		 * @type {boolean|null}
 		 */
 		_snapshot: null,
 
 		/**
-		 * Inject the switch while accounting for strange Angular quantum effects.
+		 * Fetch the switch element (and potentially create it).
+		 * @param {boolean} [create] - Create switch if it doesn't exist?
+		 * @returns {HTMLDivElement}
+		 */
+		_switch: function(create) {
+			if (create && !this._switch()) {
+				return this._createswitch();
+			} else {
+				var elm = this.dom.following(ts.ui.Spirit)[0];
+				return elm && elm.css.contains('ts-switcher') ? elm : null;
+			}
+		},
+
+		/**
+		 * Inject the switch. Let's remove any potential existing 
+		 * switch, accounting for strange Angular quantum effects.
 		 * @returns {ts.ui.Spirit}
 		 */
 		_createswitch: function() {
-			var oldswitch = this.dom.following(ts.ui.Spirit)[0];
-			if (oldswitch && oldswitch.css.contains('ts-switcher')) {
-				oldswitch.dom.remove();
-			}
-			return ts.ui.get(this.dom.after(this.dom.parseToNode(ts.ui.switchonly.edbml())));
+			var html = ts.ui.switchonly.edbml();
+			this._switch() ? this._switch().dom.remove() : void 0;
+			return ts.ui.get(this.dom.after(this.dom.parseToNode(html)));
 		},
 
 		/**
@@ -112,7 +115,7 @@ ts.ui.SwitchSpirit = (function using(tick, time) {
 		_synchronize: function(init) {
 			var checked = this.element.checked;
 			if (init || checked !== this._snapshot) {
-				this._switch.css.shift(checked, ts.ui.CLASS_CHECKED);
+				this._switch(true).css.shift(checked, ts.ui.CLASS_CHECKED);
 				this._snapshot = checked;
 				if (!init) {
 					this.action.dispatch(ts.ui.ACTION_SWITCH, checked);