fix(onboarding): reposition popovers on screen resize

esarder · Oct 9, 2018 · 6c4cf14 · 6c4cf14
1 parent 3943864
commit 6c4cf14
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 22 deletions.
diff --git a/scss/os/_ngonboarding.scss b/scss/os/_ngonboarding.scss
@@ -1,8 +1,19 @@
+.c-ng-onboarding__container::before {
+  bottom: 0;
+  content: '';
+  left: 0;
+  opacity: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: $zindex-tooltip + 1 !important;
+}
+
 .c-ng-onboarding__popover {
   max-width: initial;
   top: inherit;
   // The highest zindex possible
-  z-index: $zindex-tooltip + 1 !important;
+  z-index: $zindex-tooltip + 2 !important;
 
   // Not a real bs class, but it uses bs-popover directiion for everything else. Just doesnt have centered
   &.bs-popover-centered {

diff --git a/src/os/ui/onboarding/ngonboarding.js b/src/os/ui/onboarding/ngonboarding.js
@@ -1,6 +1,8 @@
 goog.provide('os.ui.onboarding.NgOnboardingCtrl');
 goog.provide('os.ui.onboarding.ngOnboardingDirective');
 goog.require('goog.array');
+goog.require('goog.dom.ViewportSizeMonitor');
+goog.require('goog.events.EventType');
 goog.require('goog.object');
 goog.require('os.config.Settings');
 goog.require('os.ui.Module');
@@ -79,12 +81,18 @@ os.ui.onboarding.NgOnboardingCtrl = function($scope, $sce) {
   this['stepCount'] = $scope['steps'].length;
 
   $scope.$watch('index', this.onIndexChange_.bind(this));
+  $scope.$on('$destroy', this.destroy_.bind(this));
+
+  /**
+   * @type {?goog.dom.ViewportSizeMonitor}
+   * @private
+   */
+  this.vsm_ = new goog.dom.ViewportSizeMonitor();
+  this.vsm_.listen(goog.events.EventType.RESIZE, this.onResize_, false, this);
 
   if ($scope['steps'].length && !$scope['index']) {
     return $scope['index'] = 0;
   }
-
-  $scope.$on('$destroy', this.destroy_.bind(this));
 };
 
 
@@ -93,13 +101,18 @@ os.ui.onboarding.NgOnboardingCtrl = function($scope, $sce) {
  * @private
  */
 os.ui.onboarding.NgOnboardingCtrl.prototype.destroy_ = function() {
+  if (this.vsm_) {
+    this.vsm_.dispose();
+    this.vsm_ = null;
+  }
   this.sce_ = null;
   this.scope_ = null;
 };
 
 
 /**
  * Move to the next step.
+ * @export
  */
 os.ui.onboarding.NgOnboardingCtrl.prototype.next = function() {
   if (!this['lastStep']) {
@@ -108,26 +121,20 @@ os.ui.onboarding.NgOnboardingCtrl.prototype.next = function() {
     this.close();
   }
 };
-goog.exportProperty(
-    os.ui.onboarding.NgOnboardingCtrl.prototype,
-    'next',
-    os.ui.onboarding.NgOnboardingCtrl.prototype.next);
 
 
 /**
  * Move to the previous step.
+ * @export
  */
 os.ui.onboarding.NgOnboardingCtrl.prototype.previous = function() {
   this.scope_['index'] = this.scope_['index'] - 1;
 };
-goog.exportProperty(
-    os.ui.onboarding.NgOnboardingCtrl.prototype,
-    'previous',
-    os.ui.onboarding.NgOnboardingCtrl.prototype.previous);
 
 
 /**
  * Close onboarding.
+ * @export
  */
 os.ui.onboarding.NgOnboardingCtrl.prototype.close = function() {
   this.scope_['enabled'] = false;
@@ -136,23 +143,16 @@ os.ui.onboarding.NgOnboardingCtrl.prototype.close = function() {
     this.scope_['onFinishCallback']();
   }
 };
-goog.exportProperty(
-    os.ui.onboarding.NgOnboardingCtrl.prototype,
-    'close',
-    os.ui.onboarding.NgOnboardingCtrl.prototype.close);
 
 
 /**
  * Close onboarding and prevent others from being displayed.
+ * @export
  */
 os.ui.onboarding.NgOnboardingCtrl.prototype.stopShowing = function() {
   os.settings.set('onboarding.showOnboarding', false);
   this.close();
 };
-goog.exportProperty(
-    os.ui.onboarding.NgOnboardingCtrl.prototype,
-    'stopShowing',
-    os.ui.onboarding.NgOnboardingCtrl.prototype.stopShowing);
 
 
 /**
@@ -202,6 +202,21 @@ os.ui.onboarding.NgOnboardingCtrl.prototype.getElementHeight_ = function(element
 // };
 
 
+/**
+ * Handle window resize
+ * @private
+ */
+os.ui.onboarding.NgOnboardingCtrl.prototype.onResize_ = function() {
+  // reset the popover
+  var attributesToClear = ['top', 'right', 'bottom', 'left', 'position'];
+  attributesToClear.forEach(function(attr) {
+    this.scope_[attr] = null;
+  }, this);
+
+  this.setupPositioning_();
+};
+
+
 /**
  * Handle changes to the step index.
  * @param {?number} newVal The new index
@@ -277,10 +292,20 @@ os.ui.onboarding.NgOnboardingCtrl.prototype.setupPositioning_ = function() {
         left = null;
         right = null;
 
+        var windowWidth = $(window).width();
+        var popoverWidth = $('.js-onboarding__popover').outerWidth();
         if (this.scope_['position'] === 'right') {
           left = attachTo.offset().left + attachTo.outerWidth() + xMargin;
+          right = windowWidth - attachTo.offset().left + xMargin;
+          if (left + popoverWidth > windowWidth &&
+              right + popoverWidth < windowWidth) {
+            left = 'auto';
+            this.scope_['position'] = 'left';
+          } else {
+            right = null;
+          }
         } else if (this.scope_['position'] === 'left') {
-          right = $(window).width() - attachTo.offset().left + xMargin;
+          right = windowWidth - attachTo.offset().left + xMargin;
         } else if (this.scope_['position'] === 'top' || this.scope_['position'] === 'bottom') {
           left = attachTo.offset().left;
         }
@@ -301,6 +326,7 @@ os.ui.onboarding.NgOnboardingCtrl.prototype.setupPositioning_ = function() {
       if (!(this.scope_['top'] || this.scope_['bottom'])) {
         top = null;
         bottom = null;
+        var windowHeight = $(window).height();
         if (this.scope_['position'] === 'left' || this.scope_['position'] === 'right') {
           top = attachTo.offset().top;
 
@@ -309,8 +335,19 @@ os.ui.onboarding.NgOnboardingCtrl.prototype.setupPositioning_ = function() {
           }
         } else if (this.scope_['position'] === 'bottom') {
           top = attachTo.offset().top + attachTo.outerHeight() + yMargin;
+          var popoverHeight = $('.js-onboarding__popover').outerHeight();
+          if (
+              /* check if popover overflows bottom of window */
+              (top + popoverHeight > windowHeight) &&
+              /* check if popover on top would overflow top of window */
+              (popoverHeight - attachTo.offset().top + yMargin <= 0)) {
+            // switch to top
+            top = null;
+            this.scope_['position'] = 'top';
+            bottom = windowHeight - attachTo.offset().top + yMargin;
+          }
         } else if (this.scope_['position'] === 'top') {
-          bottom = $(window).height() - attachTo.offset().top + yMargin;
+          bottom = windowHeight - attachTo.offset().top + yMargin;
         }
 
         if (this.curStep_['yOffset']) {

diff --git a/views/onboarding/ngonboarding.html b/views/onboarding/ngonboarding.html
@@ -1,4 +1,4 @@
-<div ng-show="enabled">
+<div ng-show="enabled" class="c-ng-onboarding__container">
   <div class="modal-backdrop" ng-style="{opacity: overlayOpacity}" ng-show="overlay"></div>
   <div class="card js-onboarding__popover c-ng-onboarding__popover popover {{ngOnboardCtrl.positionClass}}" ng-style="{width: width, height: height, left: left, top: top, right: right, bottom: bottom}">
     <div class="popover-header" ng-class="{'no-title':!title}">