Merge pull request #716 from schmidtk/fix-replace-jquery-resize

fix(resize): replace jquery.resize.js with css-element-queries

Author: schmidtk

externs/jquery-plugins.js

@@ -41,12 +41,6 @@ jQuery.prototype.modal;
  */
 jQuery.prototype.popover;
 
-/**
- * @param {function()} listener
- * @return {!jQuery}
- */
-jQuery.prototype.removeResize;
-
 /**
  * @param {(string|Object)=} opt_options
  * @param {string=} opt_key

externs/resizesensor.externs.js

@@ -0,0 +1,26 @@
+/**
+ * @externs
+ * @see https://github.com/marcj/css-element-queries
+ */
+
+/**
+ * Element resize sensor.
+ * @param {Element|jQuery|angular.JQLite} element The element(s).
+ * @param {Function} callback The callback.
+ * @constructor
+ */
+var ResizeSensor = function(element, callback) {};
+
+/**
+ * Detach a resize sensor.
+ * @param {Element|jQuery|angular.JQLite} element The element(s).
+ * @param {Function} callback The callback.
+ */
+ResizeSensor.detach = function(element, callback) {};
+
+/**
+ * Reset a resize sensor.
+ * @param {Element|jQuery|angular.JQLite} element The element(s).
+ * @param {Function} callback The callback.
+ */
+ResizeSensor.reset = function(element, callback) {};

index.js

@@ -96,7 +96,12 @@ const sharedResources = [
   {
     source: 'vendor/jquery',
     target: 'vendor/jquery',
-    scripts: ['jquery.event.drag-2.3.0.js', 'jquery.resize.js']
+    scripts: ['jquery.event.drag-2.3.0.js']
+  },
+  {
+    source: resolver.resolveModulePath('css-element-queries/src', __dirname),
+    target: 'vendor/css-element-queries',
+    scripts: ['ResizeSensor.js']
   },
   {
     source: 'vendor/jquery-ui',

karma.conf.js

@@ -44,7 +44,7 @@ module.exports = function(config) {
       {pattern: 'vendor/geomag/WMM.COF', watched: false, included: false, served: true},
       {pattern: 'vendor/geomag/cof2Obj.js', watched: false, included: true, served: true},
       {pattern: 'vendor/geomag/geomag.js', watched: false, included: true, served: true},
-      {pattern: 'vendor/jquery/jquery.resize.js', watched: false, included: true, served: true},
+      {pattern: resolver.resolveModulePath('css-element-queries/src/ResizeSensor.js'), watched: false, included: true, served: true},
       {pattern: resolver.resolveModulePath('jschardet/dist/jschardet.min.js'), watched: false, included: true, served: true},
       {pattern: resolver.resolveModulePath('oboe/dist/oboe-browser.min.js'), watched: false, included: true, served: true},
       {pattern: resolver.resolveModulePath('lolex/lolex.js', __dirname), watched: false, included: true, served: true},

package.json

@@ -287,6 +287,7 @@
     "cesium": "1.49.0",
     "compass-mixins": "^0.12.10",
     "crossfilter2": "^1.4.5",
+    "css-element-queries": "^1.2.1",
     "d3": "^3.5.17",
     "d3-tip": "=0.6.8",
     "file-saver": "^1.3.8",

src/os/ui/nav/navbarctrl.js

@@ -2,6 +2,7 @@ goog.provide('os.ui.NavBarCtrl');
 
 goog.require('goog.Disposable');
 goog.require('goog.events.Event');
+goog.require('os.ui');
 goog.require('os.ui.list');
 goog.require('os.ui.nav.EventType');
 
@@ -39,7 +40,7 @@ os.ui.NavBarCtrl = function($scope, $element) {
    * @private
    */
   this.resizeFn_ = this.onResize_.bind(this);
-  $element.resize(this.resizeFn_);
+  os.ui.resize(this.element, this.resizeFn_);
 
   $scope.$on('$destroy', this.dispose.bind(this));
 };
@@ -52,6 +53,10 @@ goog.inherits(os.ui.NavBarCtrl, goog.Disposable);
 os.ui.NavBarCtrl.prototype.disposeInternal = function() {
   os.ui.NavBarCtrl.base(this, 'disposeInternal');
 
+  if (this.element && this.resizeFn_) {
+    os.ui.removeResize(this.element, this.resizeFn_);
+  }
+
   this.scope = null;
   this.element = null;
 };

src/os/ui/slick/slickgrid.js

@@ -17,6 +17,7 @@ goog.require('ol.array');
 goog.require('os.data.ColumnDefinition');
 goog.require('os.events');
 goog.require('os.string');
+goog.require('os.ui');
 goog.require('os.ui.Module');
 goog.require('os.ui.column.columnManagerDirective');
 goog.require('os.ui.globalMenuDirective');
@@ -297,11 +298,10 @@ os.ui.slick.SlickGridCtrl = function($scope, $element, $compile) {
 
   if ($scope['resizeWith']) {
     this.container_ = $element.parents($scope['resizeWith']);
-    this.container_.resize(this.resizeFn);
+    os.ui.resize(this.container_, this.resizeFn);
   } else {
     // call the resize handler when the root element resizes
-    // note: this requires the jquery.resize.js vendor library to work properly
-    this.element.resize(this.resizeFn);
+    os.ui.resize(this.element, this.resizeFn);
   }
 
   /**
@@ -404,10 +404,10 @@ os.ui.slick.SlickGridCtrl.prototype.disposeInternal = function() {
   goog.dispose(this.resizeDelay);
 
   if (this.container_) {
-    this.container_.off('resize');
+    os.ui.removeResize(this.container_, this.resizeFn);
     this.container_ = null;
   } else {
-    this.element.off('resize');
+    os.ui.removeResize(this.element, this.resizeFn);
   }
 
   if (this.selectionModel_) {

src/os/ui/timeline/timeline.js

@@ -20,6 +20,7 @@ goog.require('os.time.TimeInstant');
 goog.require('os.time.TimelineController');
 goog.require('os.time.TimelineEventType');
 goog.require('os.time.timeline');
+goog.require('os.ui');
 goog.require('os.ui.Module');
 goog.require('os.ui.hist.IHistogramChart');
 goog.require('os.ui.timeline.Brush');
@@ -460,7 +461,7 @@ os.ui.timeline.TimelineCtrl = function($scope, $element, $timeout) {
    * @private
    */
   this.resizeFn_ = this.updateSize_.bind(this);
-  this.element_.resize(this.resizeFn_);
+  os.ui.resize(this.element_, this.resizeFn_);
 
   $scope.$on('$destroy', this.destroy_.bind(this));
 
@@ -545,7 +546,7 @@ os.ui.timeline.TimelineCtrl.prototype.destroyBrushCollection_ = function(brushCo
  */
 os.ui.timeline.TimelineCtrl.prototype.destroy_ = function() {
   if (this.element_ && this.resizeFn_) {
-    this.element_.removeResize(this.resizeFn_);
+    os.ui.removeResize(this.element_, this.resizeFn_);
     this.resizeFn_ = null;
   }
 

src/os/ui/ui.js

@@ -257,6 +257,35 @@ os.ui.sortDirectives_ = function(a, b) {
 };
 
 
+/**
+ * Listen to an element for size changes.
+ * @param {?(angular.JQLite|jQuery)} el The element.
+ * @param {?Function} fn The callback to remove.
+ */
+os.ui.resize = function(el, fn) {
+  if (el && fn) {
+    if (window.ResizeSensor) {
+      new ResizeSensor(el, fn);
+    } else {
+      goog.asserts.fail('The css-element-queries ResizeSensor library is not loaded. Element resize detection will ' +
+          'not work.');
+    }
+  }
+};
+
+
+/**
+ * Remove resize listener from an element.
+ * @param {?(angular.JQLite|jQuery)} el The element.
+ * @param {?Function} fn The callback to remove.
+ */
+os.ui.removeResize = function(el, fn) {
+  if (el && fn && window.ResizeSensor != null) {
+    ResizeSensor.detach(el, fn);
+  }
+};
+
+
 /**
  * Replace a directive already registered with Angular. The directive name and module should be identical to the
  * original.

src/os/ui/util/autoheight.js

@@ -97,12 +97,12 @@ os.ui.util.AutoHeightCtrl = function($scope, $element, $injector) {
 
   if (this.parent_) {
     // listen for parent size changes
-    this.parent_.resize(this.resizeFn_);
+    os.ui.resize(this.parent_, this.resizeFn_);
 
     // listen for sibling resize changes
     var siblings = /** @type {string} */ ($scope['siblings']);
     if (siblings) {
-      this.parent_.find(siblings).resize(this.resizeFn_);
+      os.ui.resize(this.parent_.find(siblings), this.resizeFn_);
     }
 
     // there are some situations where resize won't fire on creation, particularly when using IE or when swapping DOM
@@ -121,13 +121,11 @@ os.ui.util.AutoHeightCtrl = function($scope, $element, $injector) {
  */
 os.ui.util.AutoHeightCtrl.prototype.onDestroy_ = function() {
   if (this.parent_) {
-    this.parent_.removeResize(this.resizeFn_);
+    os.ui.removeResize(this.parent_, this.resizeFn_);
 
     var siblings = /** @type {string} */ (this.scope_['siblings']);
     if (siblings) {
-      try {
-        this.parent_.find(siblings).removeResize(this.resizeFn_);
-      } catch (e) {}
+      os.ui.removeResize(this.parent_.find(siblings), this.resizeFn_);
     }
 
     this.parent_ = null;

src/os/ui/util/autovheight.js

@@ -200,12 +200,12 @@ os.ui.util.AutoVHeightCtrl.prototype.addResizeListeners_ = function() {
 
     // add resize to common elements
     goog.object.getValues(os.ui.windowCommonElements).forEach(function(sibling) {
-      $(/** @type {string} */ (sibling)).resize(this.resizeFn_);
+      os.ui.resize($(/** @type {string} */ (sibling)), this.resizeFn_);
     }.bind(this));
 
     var siblings = /** @type {string} */ (this.scope_['siblings']);
     if (siblings) {
-      $(siblings).resize(this.resizeFn_);
+      os.ui.resize($(siblings), this.resizeFn_);
     }
   }
 };
@@ -224,16 +224,14 @@ os.ui.util.AutoVHeightCtrl.prototype.removeResizeListeners_ = function() {
     // add resize to common elements
     goog.object.getValues(os.ui.windowCommonElements).forEach(function(sibling) {
       if (this.resizeFn_) {
-        try {
-          $(/** @type {string} */ (sibling)).off(goog.events.EventType.RESIZE, this.resizeFn_);
-        } catch (e) {}
+        os.ui.removeResize($(/** @type {string} */ (sibling)), this.resizeFn_);
       }
-    }.bind(this));
+    }, this);
 
     var siblings = /** @type {string} */ (this.scope_['siblings']);
     if (siblings && this.resizeFn_) {
       try {
-        $(siblings).off(goog.events.EventType.RESIZE, this.resizeFn_);
+        os.ui.removeResize($(siblings), this.resizeFn_);
       } catch (e) {}
     }
   }

src/os/ui/util/offsetmargin.js

@@ -1,5 +1,6 @@
 goog.provide('os.ui.util.OffsetMarginCtrl');
 goog.provide('os.ui.util.offsetMarginDirective');
+
 goog.require('goog.Throttle');
 goog.require('os.config.ThemeSettingsChangeEvent');
 goog.require('os.ui');
@@ -100,12 +101,12 @@ os.ui.util.OffsetMarginCtrl.prototype.onDestroy_ = function() {
   }
 
   if (this.bufferTopElement_) {
-    this.bufferTopElement_.removeResize(this.resizeFn_);
+    os.ui.removeResize(this.bufferTopElement_, this.resizeFn_);
     this.bufferTopElement_ = null;
   }
 
   if (this.bufferBotElement_) {
-    this.bufferBotElement_.removeResize(this.resizeFn_);
+    os.ui.removeResize(this.bufferBotElement_, this.resizeFn_);
     this.bufferBotElement_ = null;
   }
 
@@ -123,8 +124,8 @@ os.ui.util.OffsetMarginCtrl.prototype.setWatchEl_ = function() {
   this.bufferTopElement_ = $(this.scope_['offsetTopEl']);
   this.bufferBotElement_ = $(this.scope_['offsetBotEl']);
   if (this.bufferTopElement_[0] && this.bufferBotElement_[0]) {
-    this.bufferTopElement_.resize(this.resizeFn_);
-    this.bufferBotElement_.resize(this.resizeFn_);
+    os.ui.resize(this.bufferTopElement_, this.resizeFn_);
+    os.ui.resize(this.bufferBotElement_, this.resizeFn_);
     this.onThrottleResize_();
   } else {
     this.bufferTopElement_ = null;

src/os/ui/util/punyparent.js

@@ -1,6 +1,9 @@
 goog.provide('os.ui.util.PunyParentCtrl');
 goog.provide('os.ui.util.punyParentDirective');
+
 goog.require('goog.Throttle');
+goog.require('goog.dom.ViewportSizeMonitor');
+goog.require('os.ui');
 goog.require('os.ui.Module');
 
 
@@ -50,20 +53,16 @@ os.ui.util.PunyParentCtrl = function($scope, $element) {
    */
   this.throttle_ = new goog.Throttle(this.onThrottleResize_, 200, this);
 
-  /**
-   * @type {Function}
-   * @private
-   */
-  this.resizeFn_ = this.onResize_.bind(this);
-
   /**
    * Keep track of our maximum child size. This prevents saying we have enough space after a resize already occured
    * @type {number}
    * @private
    */
   this.fullSize = 0;
 
-  $element.resize(this.resizeFn_);
+  var vsm = goog.dom.ViewportSizeMonitor.getInstanceForWindow();
+  vsm.listen(goog.events.EventType.RESIZE, this.onResize_, false, this);
+
   $scope.$on('$destroy', this.destroy_.bind(this));
 };
 
@@ -72,7 +71,9 @@ os.ui.util.PunyParentCtrl = function($scope, $element) {
  * @private
  */
 os.ui.util.PunyParentCtrl.prototype.destroy_ = function() {
-  this.element_.removeResize(this.resizeFn_);
+  var vsm = goog.dom.ViewportSizeMonitor.getInstanceForWindow();
+  vsm.unlisten(goog.events.EventType.RESIZE, this.onResize_, false, this);
+
   if (this.throttle_) {
     this.throttle_.dispose();
     this.throttle_ = null;

src/os/ui/window.js

@@ -16,6 +16,7 @@ goog.require('goog.events.KeyHandler');
 goog.require('goog.log');
 goog.require('ol.array');
 goog.require('os.array');
+goog.require('os.ui');
 goog.require('os.ui.Module');
 goog.require('os.ui.events.UIEvent');
 goog.require('os.ui.onboarding.contextOnboardingDirective');
@@ -824,7 +825,7 @@ os.ui.WindowCtrl = function($scope, $element, $timeout) {
 
     if (this.element && !this.resizeFn_) {
       this.resizeFn_ = this.onWindowResize_.bind(this);
-      this.element.resize(this.resizeFn_);
+      os.ui.resize(this.element, this.resizeFn_);
     }
   }.bind(this));
 };
@@ -863,7 +864,7 @@ os.ui.WindowCtrl.prototype.disposeInternal = function() {
   }
 
   if (this.element && this.resizeFn_) {
-    this.element.removeResize(this.resizeFn_);
+    os.ui.removeResize(this.element, this.resizeFn_);
     this.resizeFn_ = null;
   }
 

src/os/ui/wiz/wizardpreview.js

@@ -3,6 +3,7 @@ goog.provide('os.ui.wiz.wizardPreviewDirective');
 
 goog.require('os.data.ColumnDefinition');
 goog.require('os.im.mapping');
+goog.require('os.ui');
 goog.require('os.ui.Module');
 goog.require('os.ui.slick.slickGridDirective');
 goog.require('os.ui.slick.slickHeaderButtonDirective');
@@ -91,7 +92,7 @@ os.ui.wiz.WizardPreviewCtrl = function($scope, $element, $timeout) {
   if ($scope['resizeWith']) {
     this.resizeFn_ = this.resizePreview_.bind(this);
     this.container_ = $element.parents($scope['resizeWith']);
-    this.container_.resize(this.resizeFn_);
+    os.ui.resize(this.container_, this.resizeFn_);
     this.resizePreview_(500);
   }
 
@@ -108,7 +109,7 @@ os.ui.wiz.WizardPreviewCtrl = function($scope, $element, $timeout) {
 os.ui.wiz.WizardPreviewCtrl.prototype.destroy_ = function() {
   if (this.container_) {
     if (this.resizeFn_) {
-      this.container_.removeResize(this.resizeFn_);
+      os.ui.removeResize(this.container_, this.resizeFn_);
       this.resizeFn_ = null;
     }