Merge branch 'master' of https://github.com/xbsoftware/enjoyhint

Author: blackazaru

README.md

@@ -4,7 +4,9 @@ EnjoyHint
 
 EnjoyHint is free software distributed under the terms of MIT license.
 
-Check out this [issue tracker demo with EnjoyHint](http://xbsoftware.com/products/enjoyhint/) and a [TODO app demo](http://xbsoftware.github.io/enjoyhint/) ([downloadable package](http://xbsoftware.github.io/enjoyhint/enjoyhint_todo_demo.zip))
+#### 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)
 
 #### Dependencies
 EnjoyHint require the following plugins and libs:
@@ -37,17 +39,15 @@ var enjoyhint_instance = new EnjoyHint({});
 //hide EnjoyHint after a click on the button.
 var enjoyhint_script_steps = [
   {
-    selector:'.new_btn',//jquery selector
-    event:'click',
-    description:'Click the "New" button to start creating your project'
+    'click .new_btn' : 'Click the "New" button to start creating your project'
   }  
 ];
 
 //set script config
-enjoyhint_instance.setScript(enjoyhint_script_steps);
+enjoyhint_instance.set(enjoyhint_script_steps);
 
 //run Enjoyhint script
-enjoyhint_instance.runScript();
+enjoyhint_instance.run();
 ```
 
 #### Script Configuration
@@ -58,34 +58,44 @@ Highlight some button and after you click on it, highlight some panel:
 ```javascript
 var enjoyhint_script_steps = [
   {
-    selector:    '.some_btn',//jquery selector
-    event:       'click',
-    description: 'Click on this btn'
+    'click .some_btn' : 'Click on this btn'
   },  
   {
-    selector:    '.some_panel',//jquery selector
-    event:       'click',
-    description: 'Click on this panel'
+    'click .some_panel' : 'Click on this panel'
   }  
 ];
 ```
 
 #### Properties of the step configuration
-* `selector` - jquery selector of the DOM-element, that will be highlighted  
-* `event` - a jquery event that is set for the element defined in the selector. When it fires, the next step is triggered.   
-* `key_code` - key code for any "key*" event. Event fires only if key code of the pressed key is equal to this property.    
+* `"event selector" : "description"` - to describe a step you should set an event type, selecte element and add description for this element (hint)
+* `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  
-* `description` - description for the highlighted element  
 * `timeout` - delay before the moment, when an element is highlighted   
-* `shape` - shape for highlighting (circle|rect)  
+* `shape` - shape for highlighting (circle|rect)
+* `radius` -  if the shape of "circle" is specified, we can set the radius.
 * `margin` - margin for the highlight shape (for Ex.:10)  
 * `top` - top margin for the shape of "rect" type  
 * `right` - right margin for the shape of "rect" type  
 * `bottom` - bottom margin for the shape of "rect" type  
-* `left` - left margin for the shape of "rect" type  
-* `event_type` - type of event that will get you to the next step(auto|custom|next)
+* `left` - left margin for the shape of "rect" type
+* `scrollAnimationSpeed` - sets the auto scroll speed (ms).
+* `nextButton` - allows applying its classes and names for the button Nеxt.
+* `skipButton` - allows applying its classes and names for the button Skip. For the example :
+```javascript
+	var options = {
+                    "next #block": 'Hello.',
+                    "nextButton" : {className: "myNext", text: "NEXT"},
+                    "skipButton" : {className: "mySkip", text: "SKIP"},
+
+                }
+  ```
+* `showSkip` - shows or hides the Skip button (true|false)
+* `showNext` - shows or hides the Next button (true|false)
+
 
-#### Event Types descriptions:
+
+
+#### 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.  
 ```javascript
@@ -96,11 +106,13 @@ $.get('/load/some_data', function(data){
 });
 ```  
 * `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
+
 
 #### Methods
-* `setScript` - set current steps configuration. Arguments: config  
-* `runScript` - run the current script. Has no arguments  
-* `resumeScript` - resume the script from the step where it was stopped. Has no arguments  
+* `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  
 
 #### Events
@@ -128,3 +140,21 @@ var enjoyhint_script_steps = [
   }
 ];
 ```
+
+#### Release notes
+
+##### v.3
+
+* 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).
+
+
+
+