Merge pull request #99 from maxloginov/master

Added some new refresh() logic

Author: pablof7z

README.md

@@ -56,6 +56,14 @@ change `body` to some other selector.
 $('.container').chardinJs('start')
 ```
 
+You may also refresh instructions overlay any time to reflect whatever changes happened to the underlying page elements since the instructions overlay has been displayed.
+
+```Javascript
+var chardinOverlay = $('body').chardinJs('start');
+...
+chardinOverlay.refresh();
+```
+
 ## Methods
 
 ### .chardinJs('start')
@@ -92,6 +100,7 @@ Triggered when chardinJs is stopped.
  * [Maxim Syabro](https://github.com/syabro)
  * [nmeum](https://github.com/nmeum)
  * [printercu](https://github.com/printercu)
+ * [Max Loginov](https://github.com/maxloginov)
 
 ## Contributions
 
@@ -121,7 +130,3 @@ limitations under the License.
  [0]: https://github.com/heelhook/chardin.js/blob/master/chardinjs.css
  [1]: https://github.com/heelhook/chardin.js/blob/master/chardinjs.min.js
  [2]: https://github.com/heelhook
-
-
-[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/heelhook/chardin.js/trend.png)](https://bitdeli.com/free "Bitdeli Badge")
-

chardinjs.coffee

@@ -20,7 +20,7 @@ do ($ = window.jQuery, window) ->
 
     refresh: ()->
       if @._overlay_visible()
-        @._position_helper_layer(el) for el in @$el.find('*[data-intro]:visible')
+        @._position_helper_layer(el) for el in @$el.find('*[data-intro]')
       else
         return this
 
@@ -32,6 +32,8 @@ do ($ = window.jQuery, window) ->
       @$el.find('.chardinjs-show-element').removeClass('chardinjs-show-element')
       @$el.find('.chardinjs-relative-position').removeClass('chardinjs-relative-position')
 
+      $(el).data('helper_layer', null).data('tooltip_layer',null) for el in @$el.find('*[data-intro]')
+
       if window.removeEventListener
         window.removeEventListener "keydown", @_onKeyDown, true
       #IE
@@ -100,7 +102,15 @@ do ($ = window.jQuery, window) ->
     _position_helper_layer: (element) ->
       helper_layer = $(element).data('helper_layer')
       element_position = @._get_offset(element)
-      helper_layer.setAttribute "style", "width: #{element_position.width}px; height:#{element_position.height}px; top:#{element_position.top}px; left: #{element_position.left}px;"
+      if $(element).is(':visible') and helper_layer
+        # element is VISIBLE, helper_layer EXISTS
+        helper_layer.setAttribute "style", "display: block; width: #{element_position.width}px; height:#{element_position.height}px; top:#{element_position.top}px; left: #{element_position.left}px;"
+      if $(element).is(':visible') and !helper_layer
+        # element is INVISIBLE, helper_layer is NULL
+        @._show_element element
+      if !$(element).is(':visible') and helper_layer
+        # element is INVISIBLE, helper_layer EXISTS
+        helper_layer.setAttribute "style", "display: none; width: #{element_position.width}px; height:#{element_position.height}px; top:#{element_position.top}px; left: #{element_position.left}px;"
 
     _show_element: (element) ->
       element_position = @._get_offset(element)

chardinjs.css

@@ -20,7 +20,7 @@
   transition: all 0.3s ease-out; }
   .chardinjs-helper-layer.chardinjs-left {
     border-left: solid white 1px;
-    margin-left: -10px; }
+    padding-left: 10px; }
   .chardinjs-helper-layer.chardinjs-right {
     border-right: solid white 1px;
     padding-right: 10px; }

chardinjs.js

@@ -20,7 +20,7 @@
   color: white;
   @include transition(all 0.3s ease-out);
 
-  &.chardinjs-left { border-left: solid white 1px; margin-left: -10px; }
+  &.chardinjs-left { border-left: solid white 1px; padding-left: 10px; }
   &.chardinjs-right { border-right: solid white 1px; padding-right: 10px; }
   &.chardinjs-bottom { border-bottom: solid white 1px; padding-bottom: 10px; }
   &.chardinjs-top { border-top: solid white 1px; padding-top: 10px; }