Merge pull request #140 from AndVikVin/fixes

Fixes

Author: AndVikVin

src/enjoyhint.js

@@ -17,8 +17,8 @@
     var $event_element;
     var that = this;
     var _options = configs || {};
-    var BTN_NEXT_TEXT = _options.btnNextText || "Next";
-    var BTN_SKIP_TEXT = _options.btnSkipText || "Skip";
+    var BTN_NEXT_TEXT = _options.btnNextText;
+    var BTN_SKIP_TEXT = _options.btnSkipText;
 
     var SHAPE_BACKGROUND_COLOR = _options.backgroundColor || "rgba(0,0,0,0.6)";
 
@@ -55,7 +55,9 @@
         onNextClick: function() {
           nextStep();
         },
-  
+        onPrevClick: function(){
+          prevStep();
+        },
         onSkipClick: function() {
           options.onSkip();
           skipAll();
@@ -85,30 +87,34 @@
     };
 
     function hideCurrentHint(){
-      $body.enjoyhint('render_circle', []);
-      $('#enjoyhint_label').remove();
-      $('#enjoyhint_arrpw_line').remove();
-      $body.enjoyhint('hide_next');
-      $body.enjoyhint('hide_skip');
+      $body.enjoyhint("render_circle", []);
+      $("#enjoyhint_label").remove();
+      $("#enjoyhint_arrpw_line").remove();
+      $body.enjoyhint("hide_prev");
+      $body.enjoyhint("hide_next");
+      $body.enjoyhint("hide_skip");
     };
-  
+
     var stepAction = function() {
       if (!(data && data[current_step])) {
         $body.enjoyhint("hide");
         options.onEnd();
         destroyEnjoy();
         return;
       }
-  
+      
       options.onNext();
 
       var $enjoyhint = $(".enjoyhint");
 
       $enjoyhint.removeClass("enjoyhint-step-" + current_step);
       $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];
+
+      var scrollSpeed = step_data.scrollAnimationSpeed;
 
       if (
         step_data.onBeforeStart &&
@@ -142,25 +148,30 @@
         setTimeout(function() {
           that.clear();
         }, 250);
-  
+
         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});
         }
+        else {
+          // if previous button has been clicked and element are in viewport to prevent custom step scrollAnimationSpeed set scrollSpeed to default
+          scrollSpeed = 250;
+        }
 
         setTimeout(function() {
           var $element = $(step_data.selector);
           var event = makeEventName(step_data.event);
-  
           $body.enjoyhint("show");
-          $body.enjoyhint("hide_next");
           $event_element = $element;
 
           if (step_data.event_selector) {
             $event_element = $(step_data.event_selector);
           }
-  
+          
+          $event_element.off(event)
+          $element.off("keydown");
+
           if (!step_data.event_type && step_data.event == "key") {
             $element.keydown(function(event) {
               if (event.which == step_data.keyCode) {
@@ -170,18 +181,23 @@
             });
           }
 
-          if (step_data.showNext == true) {
-            $body.enjoyhint("show_next");
+          if (step_data.showNext !== true) {
+            $body.enjoyhint("hide_next");
           }
-  
+          
+          $body.enjoyhint("hide_prev");
+
+          if(current_step !== 0) {
+            $body.enjoyhint("show_prev");
+          }
+          
+
           if (step_data.showSkip == false) {
             $body.enjoyhint("hide_skip");
           } else {
             $body.enjoyhint("show_skip");
           }
 
-          if (step_data.showSkip == true) {
-          }
 
           if (step_data.nextButton) {
             var $nextBtn = $(".enjoyhint_next_btn");
@@ -208,12 +224,9 @@
                   case "click":
                     break;
                 }
-  
                 current_step++;
                 stepAction();
-  
                 return;
-                break;
 
               case "custom":
                 on(step_data.event, function() {
@@ -235,12 +248,10 @@
               }
 
               current_step++;
-              $(this).off(event);
-  
               stepAction(); // clicked
             });
           }
-  
+
           var max_habarites = Math.max(
             $element.outerWidth(),
             $element.outerHeight()
@@ -280,14 +291,20 @@
           }
 
           $body.enjoyhint("render_label_with_shape", shape_data, that.stop);
-        }, step_data.scrollAnimationSpeed + 20 || 270);
+          
+        }, scrollSpeed + 20 || 270);
       }, timeout);
     };
 
     var nextStep = function() {
       current_step++;
       stepAction();
     };
+
+    var prevStep = function() {
+      current_step--;
+      stepAction();
+    };
 
     var skipAll = function() {
       var step_data = data[current_step];

src/jquery.enjoyhint.css

@@ -74,6 +74,60 @@
     border-color 0.3s cubic-bezier(0, 0, 0, 0);
 }
 
+.enjoyhint_prev_btn {
+  min-width: 100px;
+  position: absolute;
+  z-index: 1012;
+  /*display: none;*/
+  pointer-events: all;
+  -webkit-box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  height: 40px;
+  cursor: pointer;
+  margin: 0 auto;
+  border: 2px solid rgb(30, 205, 151);
+  -webkit-border-radius: 40px;
+  border-radius: 40px;
+  font: normal normal normal 17px/40px "Advent Pro", Helvetica, sans-serif;
+  color: rgb(30, 205, 151);
+  text-align: center;
+  -o-text-overflow: clip;
+  text-overflow: clip;
+  letter-spacing: 1px;
+  background: rgba(0, 0, 0, 0);
+  -webkit-transition: background-color 0.3s cubic-bezier(0, 0, 0, 0),
+    color 0.3s cubic-bezier(0, 0, 0, 0), width 0.3s cubic-bezier(0, 0, 0, 0),
+    border-width 0.3s cubic-bezier(0, 0, 0, 0),
+    border-color 0.3s cubic-bezier(0, 0, 0, 0);
+  -moz-transition: background-color 0.3s cubic-bezier(0, 0, 0, 0),
+    color 0.3s cubic-bezier(0, 0, 0, 0), width 0.3s cubic-bezier(0, 0, 0, 0),
+    border-width 0.3s cubic-bezier(0, 0, 0, 0),
+    border-color 0.3s cubic-bezier(0, 0, 0, 0);
+  -o-transition: background-color 0.3s cubic-bezier(0, 0, 0, 0),
+    color 0.3s cubic-bezier(0, 0, 0, 0), width 0.3s cubic-bezier(0, 0, 0, 0),
+    border-width 0.3s cubic-bezier(0, 0, 0, 0),
+    border-color 0.3s cubic-bezier(0, 0, 0, 0);
+  transition: background-color 0.3s cubic-bezier(0, 0, 0, 0),
+    color 0.3s cubic-bezier(0, 0, 0, 0), width 0.3s cubic-bezier(0, 0, 0, 0),
+    border-width 0.3s cubic-bezier(0, 0, 0, 0),
+    border-color 0.3s cubic-bezier(0, 0, 0, 0);
+}
+
+.enjoyhint_prev_btn:hover {
+  color: rgba(255, 255, 255, 1);
+  background: rgb(30, 205, 151);
+}
+
+.enjoyhint_prev_btn:active {
+  border: 2px solid rgba(33, 224, 163, 1);
+  background: rgba(33, 224, 163, 1);
+  -webkit-transition: none;
+  -moz-transition: none;
+  -o-transition: none;
+  transition: none;
+}
+
 .enjoyhint_next_btn:hover {
   color: rgba(255, 255, 255, 1);
   background: rgb(30, 205, 151);
@@ -319,8 +373,11 @@
 }
 
 .enjoy_hint_label {
+  display: inline-block;
+  max-width: 80%;
   position: absolute;
   overflow: hidden;
+  text-align: center;
   color: white;
   z-index: 107;
   font-size: 22px;
@@ -330,6 +387,38 @@
   transition: opacity 400ms cubic-bezier(0.42, 0, 0.58, 1);
 }
 
+@media (max-width : 640px){
+  .enjoy_hint_label {
+    font-size: 16px;
+  }
+
+  .enjoyhint_next_btn {
+    font-size : 200%;
+    color : #FFF;
+    line-height : 1.2em;
+    min-width: 0px;
+    width: 35px;
+    height: 35px;
+    -webkit-border-radius : 50%;
+    border-radius : 50%;
+  }
+
+  .enjoyhint_prev_btn {
+    font-size : 200%;
+    color : #FFF;
+    line-height : 1.2em;
+    min-width: 0px;
+    width: 35px;
+    height: 35px;
+    -webkit-border-radius : 50%;
+    border-radius : 50%;
+  }
+
+  .enjoyhint_skip_btn {
+    display: none;
+  }
+}
+
 div.kineticjs-content {
   position: absolute !important;
 }
@@ -340,7 +429,6 @@ div.kineticjs-content {
 
 .enjoy_hint_label {
   display: inline-block;
-  min-width: 200px;
   text-align: center;
   max-width: 80%;
 }