Fix #5308 - WidgetSubclassingMechanism not working with widgets that add EventListeners (or logic ?) in constructor (#5382)

* add EventListeners in the render() method instead of the constructor

* scrollable widget: add EventListeners in render() method instead of constructor +

... move logic from constructor to render()

* linkcatcher: add EventListeners in render() instead of constructor

* fieldmangler: add EventListeners in render() instead of constructor

* edit-bitmap: initialise editorOperations in render() instead of constructor

* list-widget: initialise storyviews in render() instead of constructor

* vars widget: execute Widget.call(this) in render() instead of constructor

... not shure what this should do

* Update fieldmangler.js

* Update edit-bitmap.js

* Update linkcatcher.js

* Update navigator.js

* Update scrollable.js

* Update list.js

* Update vars.js

core/modules/widgets/edit-bitmap.js

@@ -25,11 +25,6 @@ var LINE_WIDTH_TITLE = "$:/config/BitmapEditor/LineWidth",
 var Widget = require("$:/core/modules/widgets/widget.js").widget;
 
 var EditBitmapWidget = function(parseTreeNode,options) {
-	// Initialise the editor operations if they've not been done already
-	if(!this.editorOperations) {
-		EditBitmapWidget.prototype.editorOperations = {};
-		$tw.modules.applyMethods("bitmapeditoroperation",this.editorOperations);
-	}
 	this.initialise(parseTreeNode,options);
 };
 
@@ -43,6 +38,11 @@ Render this widget into the DOM
 */
 EditBitmapWidget.prototype.render = function(parent,nextSibling) {
 	var self = this;
+	// Initialise the editor operations if they've not been done already
+	if(!this.editorOperations) {
+		EditBitmapWidget.prototype.editorOperations = {};
+		$tw.modules.applyMethods("bitmapeditoroperation",this.editorOperations);
+	}
 	// Save the parent dom node
 	this.parentDomNode = parent;
 	// Compute our attributes

core/modules/widgets/fieldmangler.js

@@ -16,12 +16,6 @@ var Widget = require("$:/core/modules/widgets/widget.js").widget;
 
 var FieldManglerWidget = function(parseTreeNode,options) {
 	this.initialise(parseTreeNode,options);
-	this.addEventListeners([
-		{type: "tm-remove-field", handler: "handleRemoveFieldEvent"},
-		{type: "tm-add-field", handler: "handleAddFieldEvent"},
-		{type: "tm-remove-tag", handler: "handleRemoveTagEvent"},
-		{type: "tm-add-tag", handler: "handleAddTagEvent"}
-	]);
 };
 
 /*
@@ -33,6 +27,12 @@ FieldManglerWidget.prototype = new Widget();
 Render this widget into the DOM
 */
 FieldManglerWidget.prototype.render = function(parent,nextSibling) {
+	this.addEventListeners([
+		{type: "tm-remove-field", handler: "handleRemoveFieldEvent"},
+		{type: "tm-add-field", handler: "handleAddFieldEvent"},
+		{type: "tm-remove-tag", handler: "handleRemoveTagEvent"},
+		{type: "tm-add-tag", handler: "handleAddTagEvent"}
+	]);
 	this.parentDomNode = parent;
 	this.computeAttributes();
 	this.execute();

core/modules/widgets/linkcatcher.js

@@ -16,9 +16,6 @@ var Widget = require("$:/core/modules/widgets/widget.js").widget;
 
 var LinkCatcherWidget = function(parseTreeNode,options) {
 	this.initialise(parseTreeNode,options);
-	this.addEventListeners([
-		{type: "tm-navigate", handler: "handleNavigateEvent"}
-	]);
 };
 
 /*
@@ -30,6 +27,9 @@ LinkCatcherWidget.prototype = new Widget();
 Render this widget into the DOM
 */
 LinkCatcherWidget.prototype.render = function(parent,nextSibling) {
+	this.addEventListeners([
+		{type: "tm-navigate", handler: "handleNavigateEvent"}
+	]);
 	this.parentDomNode = parent;
 	this.computeAttributes();
 	this.execute();

core/modules/widgets/list.js

@@ -19,11 +19,6 @@ The list widget creates list element sub-widgets that reach back into the list w
 */
 
 var ListWidget = function(parseTreeNode,options) {
-	// Initialise the storyviews if they've not been done already
-	if(!this.storyViews) {
-		ListWidget.prototype.storyViews = {};
-		$tw.modules.applyMethods("storyview",this.storyViews);
-	}
 	// Main initialisation inherited from widget.js
 	this.initialise(parseTreeNode,options);
 };
@@ -37,6 +32,11 @@ ListWidget.prototype = new Widget();
 Render this widget into the DOM
 */
 ListWidget.prototype.render = function(parent,nextSibling) {
+	// Initialise the storyviews if they've not been done already
+	if(!this.storyViews) {
+		ListWidget.prototype.storyViews = {};
+		$tw.modules.applyMethods("storyview",this.storyViews);
+	}
 	this.parentDomNode = parent;
 	this.computeAttributes();
 	this.execute();

core/modules/widgets/navigator.js

@@ -18,6 +18,17 @@ var Widget = require("$:/core/modules/widgets/widget.js").widget;
 
 var NavigatorWidget = function(parseTreeNode,options) {
 	this.initialise(parseTreeNode,options);
+};
+
+/*
+Inherit from the base widget class
+*/
+NavigatorWidget.prototype = new Widget();
+
+/*
+Render this widget into the DOM
+*/
+NavigatorWidget.prototype.render = function(parent,nextSibling) {
 	this.addEventListeners([
 		{type: "tm-navigate", handler: "handleNavigateEvent"},
 		{type: "tm-edit-tiddler", handler: "handleEditTiddlerEvent"},
@@ -36,17 +47,6 @@ var NavigatorWidget = function(parseTreeNode,options) {
 		{type: "tm-unfold-all-tiddlers", handler: "handleUnfoldAllTiddlersEvent"},
 		{type: "tm-rename-tiddler", handler: "handleRenameTiddlerEvent"}
 	]);
-};
-
-/*
-Inherit from the base widget class
-*/
-NavigatorWidget.prototype = new Widget();
-
-/*
-Render this widget into the DOM
-*/
-NavigatorWidget.prototype.render = function(parent,nextSibling) {
 	this.parentDomNode = parent;
 	this.computeAttributes();
 	this.execute();

core/modules/widgets/scrollable.js

@@ -16,26 +16,6 @@ var Widget = require("$:/core/modules/widgets/widget.js").widget;
 
 var ScrollableWidget = function(parseTreeNode,options) {
 	this.initialise(parseTreeNode,options);
-	this.scaleFactor = 1;
-	this.addEventListeners([
-		{type: "tm-scroll", handler: "handleScrollEvent"}
-	]);
-	if($tw.browser) {
-		this.requestAnimationFrame = window.requestAnimationFrame ||
-			window.webkitRequestAnimationFrame ||
-			window.mozRequestAnimationFrame ||
-			function(callback) {
-				return window.setTimeout(callback, 1000/60);
-			};
-		this.cancelAnimationFrame = window.cancelAnimationFrame ||
-			window.webkitCancelAnimationFrame ||
-			window.webkitCancelRequestAnimationFrame ||
-			window.mozCancelAnimationFrame ||
-			window.mozCancelRequestAnimationFrame ||
-			function(id) {
-				window.clearTimeout(id);
-			};
-	}
 };
 
 /*
@@ -147,6 +127,26 @@ Render this widget into the DOM
 */
 ScrollableWidget.prototype.render = function(parent,nextSibling) {
 	var self = this;
+	this.scaleFactor = 1;
+	this.addEventListeners([
+		{type: "tm-scroll", handler: "handleScrollEvent"}
+	]);
+	if($tw.browser) {
+		this.requestAnimationFrame = window.requestAnimationFrame ||
+			window.webkitRequestAnimationFrame ||
+			window.mozRequestAnimationFrame ||
+			function(callback) {
+				return window.setTimeout(callback, 1000/60);
+			};
+		this.cancelAnimationFrame = window.cancelAnimationFrame ||
+			window.webkitCancelAnimationFrame ||
+			window.webkitCancelRequestAnimationFrame ||
+			window.mozCancelAnimationFrame ||
+			window.mozCancelRequestAnimationFrame ||
+			function(id) {
+				window.clearTimeout(id);
+			};
+	}
 	// Remember parent
 	this.parentDomNode = parent;
 	// Compute attributes and execute state

core/modules/widgets/vars.js

@@ -22,8 +22,6 @@ This widget allows multiple variables to be set in one go:
 var Widget = require("$:/core/modules/widgets/widget.js").widget;
 
 var VarsWidget = function(parseTreeNode,options) {
-	// Call the constructor
-	Widget.call(this);
 	// Initialise	
 	this.initialise(parseTreeNode,options);
 };
@@ -37,6 +35,8 @@ VarsWidget.prototype = Object.create(Widget.prototype);
 Render this widget into the DOM
 */
 VarsWidget.prototype.render = function(parent,nextSibling) {
+	// Call the constructor
+	Widget.call(this);
 	this.parentDomNode = parent;
 	this.computeAttributes();
 	this.execute();