Upgrade to delite 0.9.5:

* Function name changes for preRender(), render(), and postRender(). * Remove explicit calls to connectedCallback() and disconnectedCallback(). * Fix Combobox instantiation per connectedCallback() changes in delite.
ibm-js · Mar 19, 2020 · c837ad1 · c837ad1
1 parent 707b156
commit c837ad1
Show file tree

Hide file tree

Showing 32 changed files with 62 additions and 84 deletions.
diff --git a/Accordion.js b/Accordion.js
@@ -117,7 +117,7 @@ define([
 
 		_numOpenPanels: 0,
 
-		postRender: function () {
+		afterInitializeRendering: function () {
 			this._panelList = [];
 
 			// Declarative case (panels specified declaratively inside the declarative Accordion).

diff --git a/BoilerplateTextbox.js b/BoilerplateTextbox.js
@@ -243,7 +243,7 @@ define([
 	 * by boilerplate text.
 	 *
 	 * The editable areas and boilerplate text are children of this widget and must exist by the time
-	 * `render()` completes.
+	 * `initializeRendering()` completes.
 	 */
 	var BoilerplateTextbox = register("d-boilerplate-textbox", [HTMLElement, Container, FormValueWidget], {
 		baseClass: "d-boilerplate-textbox",
@@ -255,7 +255,7 @@ define([
 			this.on("delite-deactivated", this.deactivatedHandler.bind(this));
 		},
 
-		postRender: function () {
+		afterInitializeRendering: function () {
 			this.on("input", this.nestedInputHandler.bind(this), this.containerNode);
 			this.on("change", this.nestedChangeHandler.bind(this), this.containerNode);
 			this.on("completed", this.completedHandler.bind(this), this.containerNode);

diff --git a/Button.js b/Button.js
@@ -94,15 +94,15 @@ define([
 			}.bind(this));
 		},
 
-		preRender: function () {
+		beforeInitializeRendering: function () {
 			// Get label from innerHTML, and then clear it since we are to put the label in a <span>
 			if (!this.label) {
 				this.label = this.textContent.trim();
 				this.innerHTML = "";
 			}
 		},
 
-		postRender: function () {
+		afterInitializeRendering: function () {
 			// Make SPACE/ENTER key cause button click event.
 			a11yclick(this);
 		},

diff --git a/Checkbox.js b/Checkbox.js
@@ -33,7 +33,7 @@ define([
 
 		template: template,
 
-		postRender: function () {
+		afterInitializeRendering: function () {
 			this._lbl4 = null;
 			this.on("click", this._inputClickHandler.bind(this), this.focusNode);
 			this.on("change", this._inputClickHandler.bind(this), this.focusNode);

diff --git a/Combobox.js b/Combobox.js
@@ -202,7 +202,7 @@ define([
 			};
 		}),
 
-		postRender: function () {
+		afterInitializeRendering: function () {
 			if (this._focusOnRender) {
 				this.focus();
 			}

diff --git a/Combobox/ComboPopup.js b/Combobox/ComboPopup.js
@@ -34,7 +34,7 @@ define([
 		// Whether or not to display the list.  Computed value.
 		showList: false,
 
-		postRender: function () {
+		afterInitializeRendering: function () {
 			this._showOrHideList();
 		},
 

diff --git a/Combobox/ComboboxAPI.js b/Combobox/ComboboxAPI.js
@@ -242,7 +242,7 @@ define([
 			}
 		},
 
-		preRender: function () {
+		beforeInitializeRendering: function () {
 			// If the control seems to contain JSON, then parse it as our data source.
 			if (!this.firstElementChild && this.textContent.trim()) {
 				var data = JSON.parse("[" + this.textContent + "]");
@@ -276,8 +276,8 @@ define([
 			};
 		}),
 
-		// If no list specified, then create default one.  Do it after arguments parsed but before
-		// template instantiated (simply because ComboPopup template references {{list.id}}.
+		// If no list specified, create default one.  Do before template instantiated,
+		// because ComboPopup template references {{list.id}}.
 		connectedCallback: dcl.before(function () {
 			if (!this.list) {
 				var regexp = /^(?!_)(\w)+(?=Attr$|Func$)/;
@@ -286,11 +286,14 @@ define([
 				};
 
 				// attributes
-				this._parsedAttributes.filter(function (attr) {
-					return regexp.test(attr.prop);
-				}).forEach(function (item) {
-					listArgs[item.prop] = item.value;
-				}.bind(this));
+				var attr, idx = 0;
+				while ((attr = this.attributes[idx++])) {
+					var name = attr.name.toLowerCase();	// note: will be lower case already except for IE9
+					var parsedAttr = this.parseAttribute(name, attr.value);
+					if (parsedAttr && regexp.test(parsedAttr.prop)) {
+						listArgs[parsedAttr.prop] = parsedAttr.value;
+					}
+				}
 
 				// properties
 				for (var prop in this) {

diff --git a/Combobox/ComboboxImplementation.js b/Combobox/ComboboxImplementation.js
@@ -90,14 +90,6 @@ define([
 					"radio" : "multiple";
 
 				this._initHandlers();
-
-				// TODO
-				// This is a workaround waiting for a proper mechanism (at the level
-				// of delite/Store - delite/StoreMap) to allow a store-based widget
-				// to delegate the store-related functions to a parent widget (delite#323).
-				if (!this.list.attached) {
-					this.list.connectedCallback();
-				}
 			}
 		},
 

diff --git a/DatePicker.js b/DatePicker.js
@@ -123,7 +123,7 @@ define([
 		 */
 		monthSelected: false,
 
-		postRender: function () {
+		afterInitializeRendering: function () {
 			// Create the DayPicker initially, and create MonthPicker and YearPicker on demand.
 			this.dayPicker = new DayPicker({
 				gridLabel: this.dayPickerLabel,

diff --git a/DatePicker/DayPicker.js b/DatePicker/DayPicker.js
@@ -175,7 +175,7 @@ define([
 			}
 		},
 
-		render: dcl.superCall(function (sup) {
+		initializeRendering: dcl.superCall(function (sup) {
 			return function () {
 				sup.apply(this, arguments);
 

diff --git a/DatePicker/MonthPicker.js b/DatePicker/MonthPicker.js
@@ -36,7 +36,7 @@ define([
 		 */
 		month: -1,
 
-		render: function () {
+		initializeRendering: function () {
 			// Make 3x4 grid of abbreviated month names (Jan, Feb, Mar, ...).
 			this.setAttribute("role", "grid");
 			var row;

diff --git a/ProgressBar.js b/ProgressBar.js
@@ -94,7 +94,7 @@ define([
 
 		template: template,
 
-		postRender: function () {
+		afterInitializeRendering: function () {
 			// TODO: move this code to the template
 			this.setAttribute("aria-valuemin", 0);
 		},

diff --git a/ProgressIndicator.js b/ProgressIndicator.js
@@ -134,7 +134,7 @@ define([
 
 		template: template,
 
-		postRender: function () {
+		afterInitializeRendering: function () {
 			this.lineNodeList = this.linesNode.querySelectorAll("line");
 			var symbolId = this.widgetId + "-symbol";
 			this.symbolNode.id = symbolId;

diff --git a/ResizeHandle.js b/ResizeHandle.js
@@ -62,7 +62,7 @@ define([
 		 */
 		resizeClass: "",
 
-		postRender: function () {
+		afterInitializeRendering: function () {
 			this.on("pointerdown", this._beginSizing.bind(this));
 		},
 

diff --git a/ResponsiveColumns.js b/ResponsiveColumns.js
@@ -59,7 +59,7 @@ define([
 			 */
 			screenClass: "",
 
-			preRender: function () {
+			beforeInitializeRendering: function () {
 				this._breakpoints = {};
 				this._layouts = [];
 				// A set of MediaQueryList

diff --git a/Select.js b/Select.js
@@ -141,7 +141,7 @@ define([
 			this.value = this.valueNode.value;
 		},
 
-		postRender: function () {
+		afterInitializeRendering: function () {
 			// To provide graphic feedback for focus, react to focus/blur events
 			// on the underlying native select. The CSS class is used instead
 			// of the focus pseudo-class because the browsers give the focus

diff --git a/SidePane.js b/SidePane.js
@@ -239,7 +239,7 @@ define([
 			resolve();
 		},
 
-		preRender: function () {
+		beforeInitializeRendering: function () {
 			this._transitionTiming = { "default": 0, "chrome": 20, "ios": 20, "android": 100, "ff": 100 };
 			for (var o in this._transitionTiming) {
 				if (has(o) && this._timing < this._transitionTiming[o]) {
@@ -248,7 +248,7 @@ define([
 			}
 		},
 
-		postRender: function () {
+		afterInitializeRendering: function () {
 			this._resetInteractions();
 			setVisibility(this, false);
 		},

diff --git a/Slider.js b/Slider.js
@@ -204,7 +204,7 @@ define([
 
 		template: template,
 
-		render: dcl.superCall(function (sup) {
+		initializeRendering: dcl.superCall(function (sup) {
 			return function () {
 				sup.call(this);
 				if (!this.valueNode.parentNode) {
@@ -378,7 +378,7 @@ define([
 			this.on("keyup", this.keyUpHandler.bind(this));
 		},
 
-		postRender: function () {
+		afterInitializeRendering: function () {
 			if (this.valueNode.value) { // INPUT value
 				// browser back button or value coded on INPUT
 				// the valueNode value has precedence over the widget markup value

diff --git a/StarRating.js b/StarRating.js
@@ -61,7 +61,7 @@ define([
 		_hovering: false,
 		_otherEventsHandles: [],
 
-		render: function () {
+		initializeRendering: function () {
 			this.focusNode = this.ownerDocument.createElement("div");
 			this.appendChild(this.focusNode);
 			// init WAI-ARIA attributes

diff --git a/SwapView.js b/SwapView.js
@@ -52,7 +52,7 @@ define([
 			this.on("keydown", this._keyDownHandler.bind(this));
 		},
 
-		render: function () {
+		initializeRendering: function () {
 			// we want to inherit from ViewStack's CSS (including transitions).
 			this.addClass("d-view-stack");
 		},

diff --git a/Switch.js b/Switch.js
@@ -39,7 +39,7 @@ define([
 
 		template: template,
 
-		postRender: function () {
+		afterInitializeRendering: function () {
 			this.on("pointerdown", this._pointerDownHandler.bind(this), this._knobGlassNode);
 			this.on("click", this._clickPreventer.bind(this), this._knobGlassNode);
 		},

diff --git a/ToasterMessage.js b/ToasterMessage.js
@@ -463,7 +463,6 @@ define([
 			} else {
 				wrapper.appendChild(this);
 			}
-			this.connectedCallback();
 
 			// starting timer
 			if (this.isExpirable()) {
@@ -538,7 +537,7 @@ define([
 			this._isRemoved = true;
 		},
 		template: template,
-		postRender: function () {
+		afterInitializeRendering: function () {
 			// TODO this should be done only if this.isDismissible()
 			// but at this stage this.isDismissible() ouput is wrong because members have not been initialized yet
 

diff --git a/Toggle.js b/Toggle.js
@@ -33,7 +33,7 @@ define([
 			this.checked = this._initState;
 		},
 
-		postRender: function () {
+		afterInitializeRendering: function () {
 			// CssState does not handle focused property any more
 			this.on("focus", function () {
 				this.addClass("d-focused");

diff --git a/ViewStack.js b/ViewStack.js
@@ -166,7 +166,7 @@ define([
 			};
 		}),
 
-		postRender: function () {
+		afterInitializeRendering: function () {
 			this._setChildrenVisibility();
 		},
 

diff --git a/docs/ScrollableContainer.md b/docs/ScrollableContainer.md
@@ -87,7 +87,7 @@ src="http://jsfiddle.net/ibmjs/RuqVK/embedded/result,js,html">
 By default, the scrolling capabilities are added to the widget's root node
 (that is, the widget itself). A sublcass of `deliteful/ScrollableContainer`
 can chose the node thanks to the property `scrollableNode`.
-This property must be set by the subclass at latest in its `render()`
+This property must be set by the subclass at latest in its `initializeRendering()`
 method.
 
 ### Scroll Direction
@@ -130,7 +130,7 @@ responsive manner. For details, see [`Interactions in delite/Scrollable`](/delit
 By default, the scrolling capabilities are added to the widget's root node
 (that is, the widget itself). A sublcass of `deliteful/ScrollableContainer`
 can chose the node thanks to the property `scrollableNode`.
-This property must be set by the subclass at latest in its `render()`
+This property must be set by the subclass at latest in its `initializeRendering()`
 method.
 
 *First use-case: creating a widget extending `deliteful/ScrollableContainer`*
@@ -140,7 +140,7 @@ define(["delite/register", "deliteful/ScrollableContainer", ...],
   function (register, Scrollable, ...) {
     return register("mywidget", [HTMLElement, ScrollableContainer, ...], {
       ...
-      render: dcl.superCall(function (sup) {
+      initializeRendering: dcl.superCall(function (sup) {
         return function () {
           // Create a child element:
           var myScrollableDiv = document.createElement("div");
@@ -168,7 +168,7 @@ define(["delite/register", "deliteful/ScrollableContainer", ...],
     // nor deliteful/ScrollableContainer
     return register("mywidget", [HTMLElement, ...], {
       ...
-      render: dcl.superCall(function (sup) {
+      initializeRendering: dcl.superCall(function (sup) {
         return function () {
           var scrollableNode =
             // or your own scrollable widget

diff --git a/list/List.js b/list/List.js
@@ -415,7 +415,7 @@ define([
 			}
 		},
 
-		postRender: function () {
+		afterInitializeRendering: function () {
 			// moving down to the containerNode any aria attribute that has been set to the root node.
 			for (var i = 0; i < this.attributes.length; i++) {
 				if (/^aria-/.test(this.attributes[i].name)) {
@@ -683,10 +683,6 @@ define([
 						this._getLastRenderer().item));
 				}
 			}
-			// start renderers
-			this.findCustomElements(this.containerNode).forEach(function (w) {
-				w.connectedCallback();
-			});
 		},
 
 		/**
@@ -736,17 +732,14 @@ define([
 				if (spec.addCategoryAfter) {
 					let categoryRenderer = this._createCategoryRenderer(spec.nodeRef.item);
 					this.containerNode.insertBefore(categoryRenderer, spec.nodeRef);
-					categoryRenderer.connectedCallback();
 				}
 			} else {
 				this.containerNode.appendChild(renderer);
 			}
 			if (spec.addCategoryBefore) {
 				let categoryRenderer = this._createCategoryRenderer(renderer.item);
 				this.containerNode.insertBefore(categoryRenderer, renderer);
-				categoryRenderer.connectedCallback();
 			}
-			renderer.connectedCallback();
 		},
 
 		/**
-Original file line number
+Diff line change
@@ Expand Up / @@ -166,7 +166,7 @@ define([ @@
     			};
     		}),
-    		postRender: function () {
+    		afterInitializeRendering: function () {
     			this._setChildrenVisibility();
     		},
@@ Expand Down @@