1.0.4

* better console
* scrolling support

bower.json

@@ -1,7 +1,8 @@
 {
   "name": "atrackt",
   "dependencies": {
-    "jquery": "~2.1.1"
+    "jquery": "~2.1.1",
+    "jquery.scrollTo": "~1.4.13"
   },
   "devDependencies": {
     "chai": "~1.9.1",

demo/index.html

@@ -31,6 +31,7 @@ <h2>3rd Set</h2>
 
   <!-- Dependencies -->
   <script type="text/javascript" src="../vendor/jquery/dist/jquery.js"></script>
+  <script type="text/javascript" src="../vendor/jquery.scrollTo/jquery.scrollTo.js"></script>
 
   <!-- Footer Libraries -->
   <script type="text/javascript" src="../lib/atrackt.js"></script>

lib/atrackt.console.css

@@ -16,8 +16,9 @@ body.atrackt-console {
     body.atrackt-console #atrackt-console table {
       text-align: left;
       width: 100%; }
-      body.atrackt-console #atrackt-console table tr.atrackt-console-active {
-        background-color: orange; }
       body.atrackt-console #atrackt-console table tr.error {
         color: white;
         background-color: red; }
+      body.atrackt-console #atrackt-console table tr.atrackt-console-active {
+        background-color: orange;
+        border: none; }

spec/index.html

@@ -12,6 +12,7 @@
 
     <!-- Testing Dependencies -->
     <script type="text/javascript" src="/vendor/jquery/dist/jquery.js"></script>
+    <script type="text/javascript" src="/vendor/jquery.scrollTo/jquery.scrollTo.js"></script>
     <script type="text/javascript" src="/vendor/mocha/mocha.js"></script>
     <script type="text/javascript" src="/vendor/chai/chai.js"></script>
     <script type="text/javascript" src="/vendor/sinon/lib/sinon.js"></script>

src/README.md

@@ -1,4 +1,8 @@
 ### CHANGE LOG
+###### 1.0.4
+* console loads after document ready and collects all existing element
+* console now has scrolling support on hover
+
 ###### 1.0.2
 * require/amd fix for the console
 * added support for binding arrays of objects

src/atrackt.console.coffee

@@ -11,10 +11,12 @@ https://github.com/brewster1134/atrackt
       define [
         'jquery'
         'atrackt'
+        'jquery.scrollTo'
       ], ($, Atrackt) ->
-        window.Atrackt = new(factory($, Atrackt.constructor))
+        $ ->
+          window.Atrackt = new(factory($, Atrackt.constructor))
     else
-      window.Atrackt = new(factory($, Atrackt.constructor))
+      window.Atrackt = new(factory(window.jQuery, window.Atrackt.constructor))
 ) @, ($, Atrackt) ->
 
   class AtracktConsole extends Atrackt
@@ -44,6 +46,8 @@ https://github.com/brewster1134/atrackt
       $('#atrackt-location', @$console).text @_getLocation()
       $('body').addClass('atrackt-console').prepend @$console
 
+      @_renderConsoleElements()
+
     # Override the custom class to just log tracking data to the console
     #
     setPlugin: (pluginName, plugin) ->
@@ -55,6 +59,22 @@ https://github.com/brewster1134/atrackt
         plugin.send = (data, options) ->
           console.log plugin.name, data, options
 
+    # Re-render console elements
+    #
+    _renderConsoleElements: ->
+      $('tbody', @$console).empty()
+
+      # Render global elements
+      for eventType, elements of @_elements
+        for element in elements
+          @_renderConsoleElement 'ALL', element, eventType
+
+      # Render all plugin elements
+      for pluginName, plugin of @plugins
+        for eventType, elements of plugin._elements
+          for element in elements
+            @_renderConsoleElement pluginName, element, eventType
+
     # Add console events to elements
     #
     _registerElement: (context, element, event) ->
@@ -70,6 +90,8 @@ https://github.com/brewster1134/atrackt
     # Add a single element to the console
     #
     _renderConsoleElement: (contextName, element, eventType) ->
+      self = @
+
       # Get element meta data
       trackObject = @_getTrackObject element, eventType
 
@@ -99,6 +121,17 @@ https://github.com/brewster1134/atrackt
       $rowEl.add($trackEl).hover ->
         $rowEl.addClass 'atrackt-console-active'
         $trackEl.addClass 'atrackt-console-active'
+
+        # scroll to hovered element
+        if $.scrollTo
+          if @ == $rowEl[0]
+            $.scrollTo $trackEl, 0,
+              offset:
+                top: -300
+          else if @ == $trackEl[0]
+            self.$console.scrollTo $rowEl, 0
+              offset:
+                top: -50
       , ->
         $rowEl.removeClass 'atrackt-console-active'
         $trackEl.removeClass 'atrackt-console-active'

src/atrackt.console.sass

@@ -23,8 +23,9 @@ body.atrackt-console
       width: 100%
 
       tr
-        &.atrackt-console-active
-          background-color: orange
         &.error
           color: white
           background-color: red
+        &.atrackt-console-active
+          background-color: orange
+          border: none