JS linting, reliability improvements, and refreshing of cached DOM element for ufAlerts, ufCollection, ufForm, ufModal, and ufTable.

Author: Silic0nS0ldier

app/sprinkles/core/assets/local/core/js/uf-alerts.js

@@ -56,6 +56,9 @@
         this._defaults = defaults;
         this._name = pluginName;
 
+        // Detect changes to element attributes
+        this.$element.attrchange({ callback: function (event) { this.element = event.target; }.bind(this) });
+
         // Plugin variables
         this.alerts = [];
         this._newAlertsPromise = $.Deferred().resolve();
@@ -165,23 +168,23 @@
             if (this.alerts.length > 0) {
                 // Prepare template
                 var alertTemplate = Handlebars.compile(this._alertTemplateHtml, {noEscape: true});
-
+                var i;
                 // If agglomeration is enabled, set the container to the highest priority alert type
                 if (this.settings.agglomerate) {
                     // Holds generated agglomerated alerts
                     var alertMessage = "<ul>";
 
                     // Determine overall alert priority
                     var alertContainerType = "info";
-                    for (var i = 0; i < this.alerts.length; i++) {
+                    for (i = 0; i < this.alerts.length; i++) {
                         if (this._alertTypePriorities[this.alerts[i].type] > this._alertTypePriorities[alertContainerType]) {
                             alertContainerType = this.alerts[i].type;
                         }
                     }
 
                     // Compile each alert
                     var aggTemplate = Handlebars.compile("<li class=" + this.settings.alertMessageClass + ">{{ message }}</li>");
-                    for (var i = 0; i < this.alerts.length; i++) {
+                    for (i = 0; i < this.alerts.length; i++) {
                         alertMessage += aggTemplate(this.alerts[i]);
                     }
 
@@ -196,7 +199,7 @@
                 }
                 else {
                     // Compile each alert.
-                    for (var i = 0; i < this.alerts.length; i++) {
+                    for (i = 0; i < this.alerts.length; i++) {
                         alert = this.alerts[i];
 
                         // Inject icon
@@ -211,7 +214,7 @@
             this.$element.html(alertHtml);
 
             // Scroll to top of alert location is new alerts output, and auto scrolling is enabled
-            if (this.settings.scrollToTop && alertHtml != "") {
+            if (this.settings.scrollToTop && alertHtml !== "") {
                 // Don't scroll if already visible, unless scrollWhenVisible is true
                 if (!this._alertsVisible() || this.settings.scrollWhenVisible) {
                     $("html, body").animate({ scrollTop: this.$element.offset().top }, "fast");

app/sprinkles/core/assets/local/core/js/uf-collection.js

@@ -81,11 +81,13 @@
         var lateDefaults = {
             dropdownControl: this.$element.find('.js-select-new'),
             rowContainer: this.$element.find('tbody').first()
-        }
+        };
         this.settings = $.extend(true, {}, defaults, lateDefaults, options);
         this._defaults = defaults;
         this._name = pluginName;
 
+        // Detect changes to element attributes
+        this.$element.attrchange({ callback: function (event) { this.element = event.target; }.bind(this) });
 
         // Internal counter for adding rows to the collection.  Gets updated every time `addRow` is called.
         this._rownum = 0;

app/sprinkles/core/assets/local/core/js/uf-form.js

@@ -64,6 +64,9 @@
         this._defaults = defaults;
         this._name = pluginName;
 
+        // Detect changes to element attributes
+        this.$element.attrchange({ callback: function (event) { this.element = event.target; }.bind(this) });
+
         // Expose settings for 'onkeyup' until a better more event driven apporch is adopted.
         var settings = this.settings;
 
@@ -176,13 +179,6 @@
             }
         });
 
-        // Detect changes to element attributes
-        this.$element.attrchange({
-            callback: $.proxy(function (event) {
-                this.element = event.target;
-            }, this)
-        });
-
         return this;
     }
 
@@ -193,8 +189,9 @@
          */
         _urlencodeData: function(form) {
             // Serialize and post to the backend script in ajax mode
+            var serializedData;
             if (this.settings.binaryCheckboxes) {
-                var serializedData = form.find(':input').not(':checkbox').serialize();
+                serializedData = form.find(':input').not(':checkbox').serialize();
                 // Get unchecked checkbox values, set them to 0
                 form.find('input[type=checkbox]:enabled').each(function() {
                     if ($(this).is(':checked')) {
@@ -205,7 +202,7 @@
                 });
             }
             else {
-                var serializedData = form.find(':input').serialize();
+                serializedData = form.find(':input').serialize();
             }
 
             return serializedData;
@@ -223,7 +220,7 @@
                 var checkboxes = form.find('input[type=checkbox]:enabled');
                 // Feature detection. Several browsers don't support `set`
                 if (typeof formData.set !== 'function') {
-                    this.settings.msgTarget.ufAlerts("push", "danger", "Your browser is missing a required feature. This form will still attempt to submit, but if it fails, you'll need to use Chrome for desktop or FireFox for desktop.")
+                    this.settings.msgTarget.ufAlerts("push", "danger", "Your browser is missing a required feature. This form will still attempt to submit, but if it fails, you'll need to use Chrome for desktop or FireFox for desktop.");
                 }
                 else {
                     checkboxes.each(function() {

app/sprinkles/core/assets/local/core/js/uf-modal.js

@@ -25,6 +25,9 @@
         this._defaults = defaults;
         this._name = pluginName;
 
+        // Detect changes to element attributes
+        this.$element.attrchange({ callback: function (event) { this.element = event.target; }.bind(this) });
+
         // Plugin initalisation
         this.modal = null;