Large collection of bug fixes and improvements.

.gitignore

@@ -1,2 +1,3 @@
 node_modules/*
-lib/*
+lib/*
+npm-debug.log*

Gruntfile.js

@@ -1,19 +1,24 @@
 module.exports = function(grunt){
     grunt.initConfig({
-        pkg: grunt.file.readJSON('bower.json'),
+        pkg: grunt.file.readJSON('package.json'),
         concat:{
             options: {
                 separator: ';'
             },
             dist:{
-                src:['src/*.js', 'lib/kineticjs/kinetic.min.js', 'lib/jquery.scrollTo/jquery.scrollTo.min.js'],
-                dest: '<%= pkg.name %>.js'
-            }
+                src:['src/*.js', 'node_modules/kinetic/kinetic.min.js', 'node_modules/jquery.scrollTo/jquery.scrollTo.min.js'],
+                dest: 'dist/enjoyhint.js'
+            },
+            all: {
+              src: ['node_modules/jquery/dist/jquery.min.js', 'dist/enjoyhint.js'],
+              dest: 'dist/all.js',
+            },
         },
         uglify: {
             main: {
                 files: {
-                    '<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
+                    'dist/enjoyhint.min.js': ['<%= concat.dist.dest %>'],
+                    'dist/all.min.js': ['<%= concat.all.dest %>']
                 }
             }
         },
@@ -31,7 +36,7 @@ module.exports = function(grunt){
         cssmin: {
             combine: {
                 files: {
-                    'enjoyhint.css': ['src/jquery.enjoyhint.css']
+                    'dist/enjoyhint.css': ['src/jquery.enjoyhint.css']
                 }
             }
         }

LICENSE.md

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2015 XB Software Ltd.
+Copyright (c) 2018 Darron Park.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,12 +1,16 @@
+[![npm version](https://badge.fury.io/js/enjoyhint.js.svg)](https://www.npmjs.com/package/enjoyhint.js)
+[![monthly](https://img.shields.io/npm/dm/enjoyhint.js.svg)](https://www.npmjs.com/package/enjoyhint.js)
+[![total](https://img.shields.io/npm/dt/enjoyhint.js.svg)](https://www.npmjs.com/package/enjoyhint.js)
+
+
 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.
-  
+
 #### 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)
+* [A guide on EnjoyHint](http://darron1217.github.io/enjoyhint.js/docs/index.html)
 
 #### Dependencies
 EnjoyHint require the following plugins and libs:
@@ -15,9 +19,9 @@ EnjoyHint require the following plugins and libs:
 * KineticJS v5.1.0 (included into js file)
 
 #### Installation
-You can install it through `bower` package manager:
+You can install it through `npm` package manager:
 ```
-bower install enjoyhint
+npm install enjoyhint.js
 ```
 Alternative way:
 - Download the latest version of EnjoyHint
@@ -34,8 +38,8 @@ Alternative way:
 //initialize instance
 var enjoyhint_instance = new EnjoyHint({});
 
-//simple config. 
-//Only one step - highlighting(with description) "New" button 
+//simple config.
+//Only one step - highlighting(with description) "New" button
 //hide EnjoyHint after a click on the button.
 var enjoyhint_script_steps = [
   {
@@ -53,7 +57,7 @@ enjoyhint_instance.run();
 #### Script Configuration
 The sequence of steps can be only linear for now. So, the script config is an array. Every element of this array is the config for some step.
 
-#### Example of script configuration 
+#### Example of script configuration
 Highlight some button and after you click on it, highlight some panel:
 ```javascript
 var enjoyhint_script_steps = [
@@ -66,8 +70,34 @@ var enjoyhint_script_steps = [
 ];
 ```
 
+#### Properties of instance configuration
+* `container` - scrollable container (default `body`)
+* `animation_time` - time between scroll animation and arrow render (default ms `800`)
+
+```javascript
+//initialize instance
+var enjoyhint_instance = new EnjoyHint({
+  container: '.main-panel'
+});
+```
+
+#### Events
+**Script Events**:
+* `onStart` - fires on the first step.
+* `onEnd` - fires after the last step in script.
+* `onSkip` - fires after user has clicked skip, or close.
+* `onNext` - fires at the start of each step.
+```javascript
+var enjoyhint_instance = new EnjoyHint({
+  onStart:function(){
+    //do something
+  }
+});
+```
+
 #### Properties of the step configuration
 * `"event selector" : "description"` - to describe a step you should set an event type, selecte element and add description for this element (hint)
+* `description
 * `keyCode` - the code of a button, which triggers the next EnjoyHint step upon a click. Defined by the “key” event. (“key #block” : “hello”).
 * `event_selector` - if you need to attach an event (that was set in "event" property) to other selector, you can use this one  
 * `timeout` - delay before the moment, when an element is highlighted   
@@ -96,38 +126,42 @@ var enjoyhint_script_steps = [
 
 
 #### Non-standard events:
-**auto** - for example, you need to click on the same button on the second step imediatelly after the first step and go to the next step after it. Then you can use "auto" in the "event_type" property and "click" in "event" property.
-* `custom` - this value is very usefull if you need to go to the next step by event in your app code. For example, you want to go to the next step only after some data have been loaded in your application. Then you should use the "custom" event_type and the "trigger" method of the EnjoyHint instance.  
+* `auto` - Triggers event on selector automatically, and continues to the next step.  For example, you need to click on the same button on the second step imediatelly after the first step and go to the next step after it. Then you can use "auto" in the "event_type" property and "click" in 'event' property.
 ```javascript
-//Example of using custom event_type
-$.get('/load/some_data', function(data){
-  //trigger method has only one argument: event_name.(equal to the value of event property in step config)
-  enjoyhint_instance.trigger('custom_event_name');
-});
-```  
-* `next` - when you set value of event_type to "next", you will see the "Next" btn on this step.
-* `key` - tells EnjoyHint to go to the next step when you click on the button defined by the keyCode
+enjoyhint_instance.set( [ {
+    'auto selector' : 'This is what happens when you click this button.',
+    event: 'click'
+} ] );
+```
+* `custom` - this value is very usefull if you need to go to the next step by event in your app code. For example, you want to go to the next step only after some data have been loaded in your application. Then you should use the "custom" event_type and the "trigger" method of the EnjoyHint instance.
+```javascript
+enjoyhint_instance.set( [ {
+    'custom selector' : 'This element is loading',
+    event: 'custom_event_name',
+    onBeforeStart: function () {
+        $.get('/load/some_data', function(data){
+          enjoyhint_instance.trigger('custom_event_name');
+        });
+    }
+} ] );
+```
+* `next` - Wait for next button to be pushed.
+* `key` - Wait for button defined by the `keyCode` step parameter to be triggered on element.
+
 
+#### Tour Methods
+* `stop()` - End script
+* `reRunScript(current_step)` - Restart script at current_step.
+* `set(steps_array)` - Set current steps configuration.
+* `setCurrentStep(current_step)` - Set the step to resume at.
+* `run()` - Run the current script.
+* `resume()` - Resume the script from the step where it was stopped.
+* `getCurrentStep()` - Returns the current step index.
+* `trigger( "next" | "skip" | custom_event_name )` - Trigger the relevant script action.
+* `previousStep()` - Go to the most recent valid step. Useful for implementing a back button.
 
-#### Methods
-* `set` - set current steps configuration. Arguments: config  
-* `run` - run the current script. Has no arguments  
-* `resume` - resume the script from the step where it was stopped. Has no arguments  
-* `getCurrentStep` - returns the current step index
-* `trigger` -  After writing this code you can either move to the next step or finish with EnjoyHint (next|skip)
 
 #### Events
-**Script Events**:
-* `onStart` - fires on the first step.
-* `onEnd` - fires after the last step in script.
-* `onSkip` - fires after user has clicked skip.
-```javascript
-var enjoyhint_instance = new EnjoyHint({
-  onStart:function(){
-    //do something
-  }
-});
-```
 **Step Events**:  
 * `onBeforeStart` - fires before the step is started.
 ```javascript
@@ -143,20 +177,38 @@ var enjoyhint_script_steps = [
 ];
 ```
 
-#### Release notes
+#### Changelogs
+
+##### 1.2.2
+* Prevent y axis overflow when hint is near the bottom of the screen
+* Add previousStep()
+* Make reRunScript work correctly (de-register event handlers)
+* Draw the arrow with a cubic path so that when the arrow turns sharply, it turns near it's head
+
+##### 1.2.1
+* Be more careful with calls to .off()
+* Improve Documentation
+* Add animation_time as a parameter
+* Allow .trigger() to trigger custom events
+
+##### 1.1.2
+* Add dist folder to improve build process
 
-##### v.3
+##### 1.1.1
+* Disable element click when next button shown
 
-* New and simplified description of EnjoyHint steps
-* Auto scroll to the element
-* Possibility to hide or display the buttons showNext, showSkip.
-* HTML usage allowed in description 
-* Destructor
-* Simplified property names 
-* Grunt  to compress and merge files 
-* New examples
-* You can learn the step you are on by the class enjoyhint-step-* ( where * stands for the step number).
+##### 1.1.0
+* Allow multiple run() on one instance
 
+##### 1.0.6
+* Fix `getBoundingClientRect()` error bug
+* Change label CSS text-align from `center` to `left`
 
+##### 1.0.5
+* Add instance option `container`
 
+##### 1.0.3
 
+* Fix auto scroll to the element
+* Fix demo page scroll error
+* Change z-indexes from 10xx to 20xx