Leverage native (or polyfilled) Promise, Element#classList, and Eleme…

…nt#matches. Refs ibm-js/delite#520.
ibm-js · Mar 11, 2020 · 1141368 · 1141368
1 parent 5f5df71
commit 1141368
Show file tree

Hide file tree

Showing 27 changed files with 2,528 additions and 198 deletions.
diff --git a/.jshintrc b/.jshintrc
@@ -66,7 +66,7 @@
 	"maxlen": 120,
 	"indent": 4,
 	"maxerr": 250,
-	"predef": [ "require", "requirejs", "define", "Intl", "intern" ],
+	"predef": [ "require", "requirejs", "define", "Intl", "intern", "Promise" ],
 	"quotmark": "double",
 	"maxcomplexity": 10
 }
diff --git a/Accordion.js b/Accordion.js
@@ -2,14 +2,12 @@
 define([
 	"dcl/dcl",
 	"ibm-decor/sniff",
-	"requirejs-dplugins/Promise!",
 	"delite/register",
-	"delite/classList",
 	"delite/DisplayContainer",
 	"./Accordion/AccordionHeader",
 	"./features",
 	"requirejs-dplugins/css!./Accordion/Accordion.css"
-], function (dcl, has, Promise, register, classList, DisplayContainer, AccordionHeader) {
+], function (dcl, has, register, DisplayContainer, AccordionHeader) {
 
 	function setVisibility(node, val) {
 		node.style.display = val ? "" : "none";
@@ -331,32 +329,34 @@ define([
 			if (params.hide) {
 				if (this._useAnimation()) {
 					// To avoid hiding the panel title bar on animation
-					classList.addClass(panel, "d-accordion-close-animation");
-					classList.removeClass(panel, "d-accordion-open-panel");
+					panel.classList.add("d-accordion-close-animation");
+					panel.classList.remove("d-accordion-open-panel");
 					panel.style.overflow = "hidden"; //To avoid scrollBar on animation
 					promise = listenAnimationEndEvent(panel).then(function () {
 						setVisibility(panel, panel.open);
-						classList.removeClass(panel, "d-accordion-close-animation");
+						panel.classList.remove("d-accordion-close-animation");
 						panel.style.overflow = "";
 					});
 				} else {
-					classList.removeClass(panel, "d-accordion-open-panel");
+					panel.classList.remove("d-accordion-open-panel");
 					setVisibility(panel, false);
 				}
 			} else {
 				if (this._useAnimation()) {
-					classList.addClass(panel, "d-accordion-open-animation");
+					panel.classList.add("d-accordion-open-animation");
 					setVisibility(panel, true);
 					panel.style.overflow = "hidden"; //To avoid scrollBar on animation
 					promise = listenAnimationEndEvent(panel).then(function () {
-						classList.addClass(panel, panel.open ? "d-accordion-open-panel" : "");
-						classList.removeClass(panel, "d-accordion-open-animation");
+						if (panel.open) {
+							panel.classList.add("d-accordion-open-panel");
+						}
+						panel.classList.remove("d-accordion-open-animation");
 
 						panel.style.overflow = "";
 						panel.style.minHeight = "";
 					});
 				} else {
-					classList.addClass(panel, "d-accordion-open-panel");
+					panel.classList.add("d-accordion-open-panel");
 					setVisibility(panel, true);
 				}
 			}

diff --git a/DatePicker/DayPicker.js b/DatePicker/DayPicker.js
@@ -2,15 +2,13 @@ define([
 	"dojo/i18n",
 	"dcl/dcl",
 	"delite/register",
-	"delite/classList",
 	"delite/KeyNav",
 	"../TimeBase",
 	"delite/handlebars!./DayPicker.html"
 ], function (
 	i18n,
 	dcl,
 	register,
-	classList,
 	KeyNav,
 	TimeBase,
 	template
@@ -250,12 +248,12 @@ define([
 
 				var today = this.grid.querySelector(".d-date-picker-today");
 				if (today) {
-					classList.removeClass(today, "d-date-picker-today");
+					today.classList.remove("d-date-picker-today");
 				}
 
 				var todayCell = this._dateToCell(new this.dateClassObj());
 				if (todayCell) {
-					classList.addClass(todayCell, "d-date-picker-today");
+					todayCell.classList.add("d-date-picker-today");
 				}
 			}
 
@@ -268,13 +266,13 @@ define([
 			if ("value" in oldVals || "dates" in oldVals) {
 				var selected = this.grid.querySelector(".d-date-picker-selected");
 				if (selected) {
-					classList.removeClass(selected, "d-date-picker-selected");
+					selected.classList.remove("d-date-picker-selected");
 				}
 
 				if (this.value && !isNaN(this.value)) {
 					var selectedCell = this._dateToCell(this.value);
 					if (selectedCell) {
-						classList.addClass(selectedCell, "d-date-picker-selected");
+						selectedCell.classList.add("d-date-picker-selected");
 					}
 				}
 			}
@@ -317,7 +315,7 @@ define([
 		 * @param {Date} date - The date displayed by this cell.
 		 */
 		styleGridCell: function (node, date) {
-			classList.toggleClass(node, "d-date-picker-other-month", date.getMonth() !== this.currentFocus.getMonth());
+			node.classList.toggle("d-date-picker-other-month", date.getMonth() !== this.currentFocus.getMonth());
 		},
 
 		/**

diff --git a/DatePicker/MonthPicker.js b/DatePicker/MonthPicker.js
@@ -1,11 +1,9 @@
 define([
 	"delite/register",
-	"delite/classList",
 	"delite/Widget",
 	"../TimeBase"
 ], function (
 	register,
-	classList,
 	Widget,
 	TimeBase
 ) {
@@ -71,14 +69,14 @@ define([
 				// If there's a selected month, then set the "d-date-picker-selected" class on it.
 				// Otherwise, set the "d-date-picker-today" class on the present month.
 				this.cells.forEach(function (cell) {
-					classList.removeClass(cell, "d-date-picker-selected d-date-picker-today");
+					cell.classList.remove("d-date-picker-selected", "d-date-picker-today");
 				});
 
 				if (this.month >= 0) {
-					classList.addClass(this.cells[this.month], "d-date-picker-selected");
+					this.cells[this.month].classList.add("d-date-picker-selected");
 				} else {
 					var presentMonth = (new this.dateClassObj()).getMonth();
-					classList.addClass(this.cells[presentMonth], "d-date-picker-today");
+					this.cells[presentMonth].classList.add("d-date-picker-today");
 				}
 			}
 		},

diff --git a/Gruntfile.js b/Gruntfile.js
@@ -98,4 +98,4 @@ module.exports = function (grunt) {
 	// Aliases
 	grunt.registerTask("default", ["less"]);
 	grunt.registerTask("jsdoc", "jsdoc-amddcl");
-};
+};
diff --git a/Panel.js b/Panel.js
@@ -46,4 +46,4 @@ define(["dcl/dcl",
 		 */
 		closedIconClass: ""
 	});
-});
+});
diff --git a/ProgressBar.js b/ProgressBar.js
@@ -2,11 +2,10 @@
 define([
 	"dcl/dcl",
 	"delite/register",
-	"delite/classList",
 	"delite/Widget",
 	"delite/handlebars!./ProgressBar/ProgressBar.html",
 	"requirejs-dplugins/css!./ProgressBar/ProgressBar.css"
-], function (dcl, register, classList, Widget, template) {
+], function (dcl, register, Widget, template) {
 	/**
 	 * A widget that displays the completion progress of a task.
 	 *
@@ -142,7 +141,7 @@ define([
 			this.msgNode.innerHTML = this.msgInvertNode.innerHTML =
 				this.formatMessage(this.position, this.value, this.max);
 			var hasExtMsg = this.displayExtMsg && this.position !== -1;
-			classList.toggleClass(this.msgNode, this.baseClass + "-msg-ext", hasExtMsg);
+			this.msgNode.classList.toggle(this.baseClass + "-msg-ext", hasExtMsg);
 			if (hasExtMsg) {
 				//set content value to be used by pseudo element d-progress-bar-msg-ext::after
 				this.msgNode.setAttribute("msg-ext", this.formatExtMsg(this.position, this.value, this.max));
@@ -155,7 +154,7 @@ define([
 			} else {
 				this.removeAttribute("aria-valuetext");
 			}
-			classList.toggleClass(this, this.baseClass + "-indeterminate", (this.position === -1));
+			this.classList.toggle(this.baseClass + "-indeterminate", (this.position === -1));
 		},
 
 		/**

diff --git a/ResponsiveColumns.js b/ResponsiveColumns.js
@@ -1,11 +1,10 @@
 /** @module deliteful/ResponsiveColumns */
 define([
 	"delite/register",
-	"delite/classList",
 	"delite/DisplayContainer",
 	"./channelBreakpoints",
 	"requirejs-dplugins/css!./ResponsiveColumns/ResponsiveColumns.css"
-], function (register, classList, DisplayContainer, channelBreakpoints) {
+], function (register, DisplayContainer, channelBreakpoints) {
 	/**
 	 * A container that lays out its children according to the screen width. This widget relies on CSS media queries
 	 * (http://www.w3.org/TR/css3-mediaqueries). You can define any number of screen classes by setting the breakpoints

diff --git a/Select.js b/Select.js
@@ -3,13 +3,12 @@ define([
 	"dcl/dcl",
 	"ibm-decor/sniff",
 	"delite/register",
-	"delite/classList",
 	"delite/FormWidget",
 	"delite/StoreMap",
 	"delite/Selection",
 	"delite/handlebars!./Select/Select.html",
 	"requirejs-dplugins/css!./Select/Select.css"
-], function (dcl, has, register, classList,
+], function (dcl, has, register,
 	FormWidget, StoreMap, Selection, template) {
 
 	/**
@@ -150,10 +149,10 @@ define([
 			// of the focus pseudo-class because the browsers give the focus
 			// to the underlying select, not to the widget.
 			this.on("focus", function (evt) {
-				classList.toggleClass(this, "d-select-focus", evt.type === "focus");
+				this.classList.toggle("d-select-focus", evt.type === "focus");
 			}.bind(this), this.valueNode);
 			this.on("blur", function (evt) {
-				classList.toggleClass(this, "d-select-focus", evt.type === "focus");
+				this.classList.toggle("d-select-focus", evt.type === "focus");
 			}.bind(this), this.valueNode);
 
 			// Keep delite/Selection's selectedItem/selectedItems in sync after

diff --git a/SidePane.js b/SidePane.js
@@ -3,12 +3,10 @@ define([
 	"dcl/dcl",
 	"ibm-decor/sniff",
 	"delite/register",
-	"delite/classList",
 	"delite/DisplayContainer",
-	"requirejs-dplugins/Promise!",
 	"requirejs-dplugins/css!./SidePane/SidePane.css"
 ],
-	function (dcl, has, register, classList, DisplayContainer, Promise) {
+	function (dcl, has, register, DisplayContainer) {
 		function prefix(v) {
 			return "-d-side-pane-" + v;
 		}
@@ -162,7 +160,7 @@ define([
 					if (animate) {
 						this.addClass(prefix("animate"));
 						if (nextElement) {
-							classList.addClass(nextElement, prefix("animate"));
+							nextElement.classList.add(prefix("animate"));
 						}
 					}
 
@@ -256,7 +254,7 @@ define([
 					.addClass(prefix(this.mode));
 
 				if (nextElement && this._visible) {
-					classList.toggleClass(nextElement, prefix("translated"), this.mode !== "overlay");
+					nextElement.classList.toggle(prefix("translated"), this.mode !== "overlay");
 				}
 
 				if (this.mode === "reveal" && !this._visible) {
@@ -276,8 +274,8 @@ define([
 				this.removeClass([prefix("start"), prefix("end")].join(" "))
 					.addClass(prefix(this.position));
 				if (nextElement && this._visible) {
-					classList.removeClass(nextElement, [prefix("start"), prefix("end")].join(" "));
-					classList.addClass(nextElement, prefix(this.position));
+					nextElement.classList.remove(prefix("start"), prefix("end"));
+					nextElement.classList.add(prefix(this.position));
 				}
 			},
 
@@ -292,8 +290,8 @@ define([
 				this.removeClass(prefix("animate"));
 
 				if (nextElement) {
-					classList.removeClass(nextElement, prefix("animate"));
-					classList.toggleClass(nextElement, "d-rtl", this.effectiveDir === "rtl");
+					nextElement.classList.remove(prefix("animate"));
+					nextElement.classList.toggle("d-rtl", this.effectiveDir === "rtl");
 				}
 
 				if ("mode" in props) {
@@ -312,7 +310,7 @@ define([
 					this.defer(function () {
 						this.addClass(prefix("animate"));
 						if (nextElement) {
-							classList.addClass(nextElement, prefix("animate"));
+							nextElement.classList.add(prefix("animate"));
 						}
 					}, this._timing);
 				}
@@ -327,9 +325,8 @@ define([
 					if (this.mode === "push" || this.mode === "reveal") {
 						var nextElement = getNextSibling(this);
 						if (nextElement) {
-							classList.removeClass(nextElement,
-								[prefix("nottranslated"), prefix("start"), prefix("end")].join(" "));
-							classList.addClass(nextElement, [prefix(this.position), prefix("translated")].join(" "));
+							nextElement.classList.remove(prefix("nottranslated"), prefix("start"), prefix("end"));
+							nextElement.classList.add(prefix(this.position), prefix("translated"));
 						}
 					}
 				}
@@ -339,16 +336,14 @@ define([
 				if (this._visible) {
 					this._visible = false;
 					this._opening = false;
-					classList.removeClass(this.ownerDocument.body, prefix("no-select"));
+					this.ownerDocument.body.classList.remove(prefix("no-select"));
 					this.removeClass(prefix("visible"))
 						.addClass(prefix("hidden"));
 					if (this.mode === "push" || this.mode === "reveal") {
 						var nextElement = getNextSibling(this);
 						if (nextElement) {
-							classList
-								.removeClass(nextElement,
-									[prefix("translated"), prefix("start"), prefix("end")].join(" "))
-								.addClass(nextElement, [prefix(this.position), prefix("nottranslated")].join(" "));
+							nextElement.classList.remove(prefix("translated"), prefix("start"), prefix("end"));
+							nextElement.classList.add(prefix(this.position), prefix("nottranslated"));
 						}
 					}
 				}
@@ -370,7 +365,7 @@ define([
 					this._moveHandle = this.on("pointermove", this._pointerMoveHandler.bind(this));
 					this._releaseHandle = this.on("pointerup", this._pointerUpHandler.bind(this));
 
-					classList.addClass(this.ownerDocument.body, prefix("no-select"));
+					this.ownerDocument.body.classList.add(prefix("no-select"));
 				}
 			},
 
@@ -407,7 +402,7 @@ define([
 
 			_pointerUpHandler: function () {
 				this._opening = false;
-				classList.removeClass(this.ownerDocument.body, prefix("no-select"));
+				this.ownerDocument.body.classList.remove(prefix("no-select"));
 				this._resetInteractions();
 			},
 

diff --git a/StarRating.js b/StarRating.js
@@ -2,11 +2,10 @@
 define([
 	"dcl/dcl",
 	"delite/register",
-	"delite/classList",
 	"delite/FormValueWidget",
 	"requirejs-dplugins/i18n!./StarRating/nls/StarRating",
 	"requirejs-dplugins/css!./StarRating/StarRating.css"
-], function (dcl, register, classList, FormValueWidget, messages) {
+], function (dcl, register, FormValueWidget, messages) {
 	/**
 	 * A widget that displays a rating, usually with stars, and that allows setting a different rating value
 	 * by touching the stars.
@@ -251,10 +250,10 @@ define([
 
 		_updateZeroArea: function () {
 			if (this.readOnly || !this.allowZero) {
-				classList.addClass(this._zeroSettingArea, "d-hidden");
+				this._zeroSettingArea.classList.add("d-hidden");
 				delete this.focusNode.value;
 			} else {
-				classList.removeClass(this._zeroSettingArea, "d-hidden");
+				this._zeroSettingArea.classList.remove("d-hidden");
 				// _zeroSettingArea might not fill the whole widget height
 				// so pointer events can land in the underlying focus node
 				this.focusNode.value = 0;
-Original file line number
+Diff line change
@@ Expand Up / @@ -46,4 +46,4 @@ define(["dcl/dcl", @@
     		 */
     		closedIconClass: ""
     	});
-    });
+    });