Merge pull request #69 from benmarch/ng-bootstrap-2

#65 and #67 only supporting angular bootstrap 2.x.x
benmarch · Aug 16, 2016 · c82b44e · c82b44e
2 parents ae4e649 + 4d5e1c2
commit c82b44e
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 53 deletions.
diff --git a/app/templates/tour-step-popup.html b/app/templates/tour-step-popup.html
@@ -1,13 +1,8 @@
-<div class="popover tour-step"
-     tooltip-animation-class="fade"
-     uib-tooltip-classes
-     ng-class="{ in: isOpen() }">
-    <div class="arrow"></div>
+<div class="arrow"></div>
 
-    <div class="popover-inner tour-step-inner">
-        <h3 class="popover-title tour-step-title" ng-bind="title" ng-if="title"></h3>
-        <div class="popover-content tour-step-content"
-             uib-tooltip-template-transclude="originScope().tourStep.config('templateUrl') || 'tour-step-template.html'"
-             tooltip-template-transclude-scope="originScope()"></div>
-    </div>
+<div class="popover-inner tour-step-inner">
+    <h3 class="popover-title tour-step-title" ng-bind="uibTitle" ng-if="uibTitle"></h3>
+    <div class="popover-content tour-step-content"
+         uib-tooltip-template-transclude="originScope().tourStep.config('templateUrl') || 'tour-step-template.html'"
+         tooltip-template-transclude-scope="originScope()"></div>
 </div>
diff --git a/app/tour-controller.js b/app/tour-controller.js
@@ -443,6 +443,7 @@
         self.pause = function () {
             return handleEvent(options.onPause).then(function () {
                 tourStatus = statuses.PAUSED;
+                uiTourBackdrop.hide();
                 return self.hideStep(getCurrentStep());
             }).then(function () {
                 self.emit('paused', getCurrentStep());

diff --git a/app/tour-step-directive.js b/app/tour-step-directive.js
@@ -135,21 +135,16 @@
 
     }]);
 
-    app.directive('tourStepPopup', ['TourConfig', 'smoothScroll', 'ezComponentHelpers', function (TourConfig, smoothScroll, ezComponentHelpers) {
+    app.directive('tourStepPopup', ['TourConfig', 'smoothScroll', 'ezComponentHelpers', '$uibPosition', function (TourConfig, smoothScroll, ezComponentHelpers, $uibPostion) {
         return {
-            restrict: 'EA',
-            replace: true,
-            scope: { title: '@', uibTitle: '@uibTitle', content: '@', placement: '@', animation: '&', isOpen: '&', originScope: '&'},
+            restrict: 'A',
+            scope: { uibTitle: '@', contentExp: '&', originScope: '&' },
             templateUrl: 'tour-step-popup.html',
             link: function (scope, element, attrs) {
                 var step = scope.originScope().tourStep,
                     ch = ezComponentHelpers.apply(null, arguments),
-                    scrollOffset = step.config('scrollOffset');
-
-                //UI Bootstrap name changed in 1.3.0
-                if (!scope.title && scope.uibTitle) {
-                    scope.title = scope.uibTitle;
-                }
+                    scrollOffset = step.config('scrollOffset'),
+                    isScrolling = false;
 
                 //for arrow styles, unfortunately UI Bootstrap uses attributes for styling
                 attrs.$set('uib-popover-popup', 'uib-popover-popup');
@@ -159,7 +154,7 @@
                     display: 'block'
                 });
 
-                element.addClass(step.config('popupClass'));
+                element.addClass([step.config('popupClass'), 'popover'].join(' '));
 
                 if (step.config('fixed')) {
                     element.css('position', 'fixed');
@@ -184,10 +179,16 @@
                     );
                 }
 
-                scope.$watch('isOpen', function (isOpen) {
-                    if (isOpen() && !step.config('orphan') && step.config('scrollIntoView')) {
+                scope.$watch(function () {
+                    var offset = $uibPostion.offset(element),
+                        isOpen = offset.width && offset.height;
+                    if (isOpen && !step.config('orphan') && step.config('scrollIntoView') && !isScrolling) {
+                        isScrolling = true;
                         smoothScroll(element[0], {
-                            offset: scrollOffset
+                            offset: scrollOffset,
+                            callbackAfter: function () {
+                                isScrolling = false;
+                            }
                         });
                     }
                 });

diff --git a/bower.json b/bower.json
@@ -19,7 +19,7 @@
     "test/"
   ],
   "dependencies": {
-    "angular-bootstrap": ">=0.14.3 <2.0.0",
+    "angular-bootstrap": ">=2.0.0",
     "ngSmoothScroll": "2.0.0",
     "angular-sanitize": ">=1.3",
     "ez-ng": "0.1.8",

diff --git a/dist/angular-ui-tour.js b/dist/angular-ui-tour.js
@@ -657,6 +657,7 @@
         self.pause = function () {
             return handleEvent(options.onPause).then(function () {
                 tourStatus = statuses.PAUSED;
+                uiTourBackdrop.hide();
                 return self.hideStep(getCurrentStep());
             }).then(function () {
                 self.emit('paused', getCurrentStep());
@@ -1239,21 +1240,16 @@
 
     }]);
 
-    app.directive('tourStepPopup', ['TourConfig', 'smoothScroll', 'ezComponentHelpers', function (TourConfig, smoothScroll, ezComponentHelpers) {
+    app.directive('tourStepPopup', ['TourConfig', 'smoothScroll', 'ezComponentHelpers', '$uibPosition', function (TourConfig, smoothScroll, ezComponentHelpers, $uibPostion) {
         return {
-            restrict: 'EA',
-            replace: true,
-            scope: { title: '@', uibTitle: '@uibTitle', content: '@', placement: '@', animation: '&', isOpen: '&', originScope: '&'},
+            restrict: 'A',
+            scope: { uibTitle: '@', contentExp: '&', originScope: '&' },
             templateUrl: 'tour-step-popup.html',
             link: function (scope, element, attrs) {
                 var step = scope.originScope().tourStep,
                     ch = ezComponentHelpers.apply(null, arguments),
-                    scrollOffset = step.config('scrollOffset');
-
-                //UI Bootstrap name changed in 1.3.0
-                if (!scope.title && scope.uibTitle) {
-                    scope.title = scope.uibTitle;
-                }
+                    scrollOffset = step.config('scrollOffset'),
+                    isScrolling = false;
 
                 //for arrow styles, unfortunately UI Bootstrap uses attributes for styling
                 attrs.$set('uib-popover-popup', 'uib-popover-popup');
@@ -1263,7 +1259,7 @@
                     display: 'block'
                 });
 
-                element.addClass(step.config('popupClass'));
+                element.addClass([step.config('popupClass'), 'popover'].join(' '));
 
                 if (step.config('fixed')) {
                     element.css('position', 'fixed');
@@ -1288,10 +1284,16 @@
                     );
                 }
 
-                scope.$watch('isOpen', function (isOpen) {
-                    if (isOpen() && !step.config('orphan') && step.config('scrollIntoView')) {
+                scope.$watch(function () {
+                    var offset = $uibPostion.offset(element),
+                        isOpen = offset.width && offset.height;
+                    if (isOpen && !step.config('orphan') && step.config('scrollIntoView') && !isScrolling) {
+                        isScrolling = true;
                         smoothScroll(element[0], {
-                            offset: scrollOffset
+                            offset: scrollOffset,
+                            callbackAfter: function () {
+                                isScrolling = false;
+                            }
                         });
                     }
                 });
@@ -1303,18 +1305,13 @@
 
 angular.module('bm.uiTour').run(['$templateCache', function($templateCache) {
   $templateCache.put("tour-step-popup.html",
-    "<div class=\"popover tour-step\"\n" +
-    "     tooltip-animation-class=\"fade\"\n" +
-    "     uib-tooltip-classes\n" +
-    "     ng-class=\"{ in: isOpen() }\">\n" +
-    "    <div class=\"arrow\"></div>\n" +
+    "<div class=\"arrow\"></div>\n" +
     "\n" +
-    "    <div class=\"popover-inner tour-step-inner\">\n" +
-    "        <h3 class=\"popover-title tour-step-title\" ng-bind=\"title\" ng-if=\"title\"></h3>\n" +
-    "        <div class=\"popover-content tour-step-content\"\n" +
-    "             uib-tooltip-template-transclude=\"originScope().tourStep.config('templateUrl') || 'tour-step-template.html'\"\n" +
-    "             tooltip-template-transclude-scope=\"originScope()\"></div>\n" +
-    "    </div>\n" +
+    "<div class=\"popover-inner tour-step-inner\">\n" +
+    "    <h3 class=\"popover-title tour-step-title\" ng-bind=\"uibTitle\" ng-if=\"uibTitle\"></h3>\n" +
+    "    <div class=\"popover-content tour-step-content\"\n" +
+    "         uib-tooltip-template-transclude=\"originScope().tourStep.config('templateUrl') || 'tour-step-template.html'\"\n" +
+    "         tooltip-template-transclude-scope=\"originScope()\"></div>\n" +
     "</div>\n" +
     "");
   $templateCache.put("tour-step-template.html",