Scroll selected container instead of the document.body

README.md

@@ -3,7 +3,21 @@ EnjoyHint
 **EnjoyHint** is a web-tool that provides the simplest way to create interactive tutorials and hints for your site or web-application. It can also be used to highlight and sign application elements.  
 
 EnjoyHint is free software distributed under the terms of MIT license.
-
+
+#### Improvements
+Comparing to the original library this version was modified to support more advanced scenarios:
+
+##### Added features
+* Pause tour until specified element becomes visible or event is triggered
+* Prevent user interaction within highlighted element
+* Ability to specify which container is being scrolled
+
+##### Fixed Issues
+* Next button not showing with 'click' and 'custom' events
+* OnSkip not called when skipping steps programmatically
+* Several steps can be skipped at once if triggered event is duplicated
+
+
 #### Demo
 * [TODO app demo](http://xbsoftware.github.io/enjoyhint/) ([downloadable package](http://xbsoftware.github.io/enjoyhint/enjoyhint_todo_demo.zip))
 * [A small guide on EnjoyHint](http://xbsoftware.github.io/enjoyhint/example1.html)
@@ -164,7 +178,18 @@ var enjoyhint_script_steps = [
 
 #### Release notes
 
-##### v.4
+##### v.4.1.0
+Improvements:
+* Disable user interaction within highlighted area (`preventEvents` step property)
+* Pause and hide overlay until element becomes visible or event is triggered (`pausedUntil` step property)
+* Specify which container should be scrolled (`elementToScroll` option)
+
+Bug Fixes:
+* Fixed Next button not showing
+* Fixed skippind steps when event is duplicated
+* Fixed OnSkip method not called when skipping steps programmatically
+
+##### v.4.x
 
 * Fixed label position bugs
 * Fixed arrow position bugs

bower.json

@@ -4,7 +4,7 @@
     "enjoyhint.js",
     "enjoyhint.css"
   ],
-  "version": "4.0.1",
+  "version": "4.1.0",
   "homepage": "https://github.com/xbsoftware/enjoyhint",
   "authors": [
     "XB Software"

enjoyhint.js

@@ -23,15 +23,18 @@
     var SHAPE_BACKGROUND_COLOR = _options.backgroundColor || "rgba(0,0,0,0.6)";
 
     var body = "body"; // TODO: Is it possible case when we need to define enjoyhint somewhere else?
+    var elementAvailableEventName = "enjoyhint-element-available";
 
     var defaults = {
       onStart: function() {},
 
       onEnd: function() {},
 
       onSkip: function() {},
-
-      onNext: function() {}
+
+      onNext: function () { },
+
+      elementToScroll: document.body
     };
 
     var options = $.extend(defaults, _options);
@@ -62,7 +65,8 @@
           options.onSkip();
           skipAll();
         },
-        fill: SHAPE_BACKGROUND_COLOR
+        fill: SHAPE_BACKGROUND_COLOR,
+        elementToScroll: options.elementToScroll
       });
     };
 
@@ -97,7 +101,7 @@
       $body.enjoyhint("hide_skip");
     };
 
-    var stepAction = function() {
+    var stepAction = function(unpause) {
       if (!(data && data[current_step])) {
         $body.enjoyhint("hide");
         options.onEnd();
@@ -113,9 +117,63 @@
       $enjoyhint.removeClass("enjoyhint-step-" + (current_step + 1));
       $enjoyhint.removeClass("enjoyhint-step-" + (current_step + 2));
       $enjoyhint.addClass("enjoyhint-step-" + (current_step + 1));
-  
+
       var step_data = data[current_step];
 
+      $body.off(elementAvailableEventName);
+
+      //loops waiting until specified element becomes visible
+      var waitUntilAvailable = function (selector, interval) {
+        if (interval == null)
+          interval = 150; 
+
+        var triggerIfAvailable = function () {
+             if ($(selector).is(":visible")) {
+                 $body.trigger(elementAvailableEventName);
+             }
+             else {
+                 setTimeout(triggerIfAvailable, interval)
+             }
+         };
+
+         setTimeout(triggerIfAvailable, 0);
+      }
+
+      //if pausedUntil was specified, hide current overlay and wait until specified event occurs
+      if (!unpause && step_data.pausedUntil != null && step_data.pausedUntil.event != null) {
+            //hide current overlay during waiting time
+            $body.enjoyhint("hide");
+
+           //if 'available' event was chosen wait for the custom event, which is triggered when the element becomes visible
+            if (step_data.pausedUntil.event === 'available') {
+                $body.on(elementAvailableEventName, function () {
+                    stepAction(true);      //restart the step without pause
+                    $body.off(elementAvailableEventName);
+                });
+
+                //check if element is available every 150ms
+                waitUntilAvailable(step_data.pausedUntil.selector);
+            }
+            else {
+                //delay the actual action until 'the event' happens on body or selector
+                if (step_data.pausedUntil.selector == null) {
+                  on(step_data.pausedUntil.event, function () {
+                      stepAction(true);     //restart the step without pause
+                      off(step_data.pausedUntil.event);
+                  });
+                }
+                else {
+                  $(step_data.pausedUntil.selector).on(step_data.pausedUntil.event, function () {
+                      stepAction(true);     //restart the step without pause
+                      $(step_data.pausedUntil.selector).off(step_data.pausedUntil.event)
+                  });
+                }
+            }
+
+            //the rest of the logic will be executed whenever the step is restarted
+            return;
+      }
+
       var scrollSpeed = step_data.scrollAnimationSpeed;
 
       if (
@@ -154,7 +212,7 @@
         var isHintInViewport = $(step_data.selector).get(0).getBoundingClientRect();
         if(isHintInViewport.top < 0 || isHintInViewport.bottom > (window.innerHeight || document.documentElement.clientHeight)){
             hideCurrentHint();
-            $(document.body).scrollTo(step_data.selector, step_data.scrollAnimationSpeed || 250, {offset: -200});
+            $(options.elementToScroll).scrollTo(step_data.selector, step_data.scrollAnimationSpeed || 250, {offset: -200});
         }
         else {
           // if previous button has been clicked and element are in viewport to prevent custom step scrollAnimationSpeed set scrollSpeed to default
@@ -186,6 +244,9 @@
           if (step_data.showNext !== true) {
             $body.enjoyhint("hide_next");
           }
+          else {
+            $body.enjoyhint("show_next");
+          }
 
           $body.enjoyhint("hide_prev");
 
@@ -255,13 +316,20 @@
                 break;
             }
           } else {
-            $event_element.on(event, function(e) {
-              if (step_data.keyCode && e.keyCode != step_data.keyCode) {
-                return;
-              }
-
-              current_step++;
-              stepAction(); // clicked
+              var alreadyTriggered = false;
+              $event_element.one(event, function (e) {    //one should ensure that event is handled only once, but that's not always enough
+                  if (alreadyTriggered)                   //make sure that the step is not changed twice handling the same event
+                      return;
+
+                  alreadyTriggered = true;                
+                  if (step_data.keyCode && e.keyCode != step_data.keyCode) {
+                    return;
+                  }
+
+                  $event_element.off(event);              //unregister the event
+
+                  current_step++;
+                  stepAction();                           //move to the next step
             });
           }
 
@@ -292,7 +360,8 @@
             left: step_data.left,
             right: step_data.right,
             margin: step_data.margin,
-            scroll: step_data.scroll
+            scroll: step_data.scroll,
+            preventEvents: step_data.preventEvents
           };
 
           var customBtnProps = {
@@ -403,6 +472,7 @@
 
         case "skip":
           skipAll();
+          options.onSkip();
           break;
 
         default: $body.trigger(makeEventName(event_name, true));
@@ -767,7 +837,7 @@
 
           doit = setTimeout(function() {
             if(boundingClientRect.top < 0 || boundingClientRect.bottom > (window.innerHeight || document.documentElement.clientHeight)){
-              $(document.body).scrollTo(that.stepData.enjoyHintElementSelector, 150, {offset: -200, onAfter:renderAfterResize});
+              $(that.options.elementToScroll).scrollTo(that.stepData.enjoyHintElementSelector, 150, {offset: -200, onAfter:renderAfterResize});
             }
             else renderAfterResize();
           }, 150);
@@ -1103,16 +1173,27 @@
             .appendTo(that.enjoyhint);
         };
 
-        that.disableEventsNearRect = function(rect) {
+        that.disableEventsNearRect = function(rect, alsoDisableRect) {
+          var top = rect.top;
+          var left = rect.left;
+          var right = rect.right;
+          var bottom = rect.bottom;
+
+          //to disable events also within highlighted rectable, simply remove the gap
+          if (alsoDisableRect === true) {
+              top = bottom;
+              right = left;
+          }
+
           $top_dis_events
-            .css({
-              top: "0",
-              left: "0"
-            })
-            .height(rect.top);
+          .css({
+            top: "0",
+            left: "0"
+          })
+          .height(top);
 
           $bottom_dis_events.css({
-            top: rect.bottom + "px",
+              top: bottom + "px",
             left: "0"
           });
 
@@ -1121,11 +1202,11 @@
               top: "0",
               left: 0 + "px"
             })
-            .width(rect.left);
+            .width(left);
 
           $right_dis_events.css({
             top: "0",
-            left: rect.right + "px"
+              left: right + "px"
           });
         };
 
@@ -1437,10 +1518,10 @@
             else {
               distance = initial_distance;
               ver_button_position = initial_ver_position;
-			  that.$next_btn.html(customBtnProps.nextButton && customBtnProps.nextButton.text ? 
-					customBtnProps.nextButton.text : 'Next');
-			  that.$prev_btn.html(customBtnProps.prevButton && customBtnProps.prevButton.text ? 
-					customBtnProps.prevButton.text : 'Previous');
+              that.$next_btn.html(customBtnProps.nextButton && customBtnProps.nextButton.text ? 
+                  customBtnProps.nextButton.text : 'Next');
+              that.$prev_btn.html(customBtnProps.prevButton && customBtnProps.prevButton.text ? 
+                  customBtnProps.prevButton.text : 'Previous');
             }
 
             that.$prev_btn.css({
@@ -1481,7 +1562,7 @@
             bottom: shape_data.bottom,
             left: shape_data.left,
             right: shape_data.right
-          });
+          }, data.preventEvents);
 
           that.renderArrow({
             x_from: x_from,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "enjoyhint",
-  "version": "4.0.1",
+  "version": "4.1.0",
   "description": "Web-tool that provides the simplest way to create interactive tutorials and hints.",
   "main": "enjoyhint.js",
   "scripts": {