sliding and tests

index.coffee

@@ -43,6 +43,59 @@
   if !window.console.log
     window.console.log = () ->
   $(document).ready () ->
+
+    #jQuery plugin for moving to the extremities of an element
+    do (jQuery) ->
+      $ = jQuery
+      $.fn.mouseextremes = (percent=10) ->
+
+        el = $ this
+        el.mousemove (e) ->
+          x = e.pageX - el.offset().left
+          y = e.pageY - el.offset().top
+
+          width = el.width()
+          height = el.height()
+
+          fromRight = (width - x) / width * 100
+          fromLeft = x / width * 100
+
+          fromTop = y / height * 100
+          fromBottom = (height - y) / height * 100 # or 100 - fromTop
+
+          false and console.log "
+          top #{fromTop}
+          bottom #{fromBottom}
+          left #{fromLeft}
+          right #{fromRight}
+          "
+          if fromTop <= percent
+            el.trigger("mouseextremetop", ["top"])
+          else
+            el.trigger "mousenotextremetop", ["top"]
+
+          if fromBottom <= percent
+            el.trigger "mouseextremebottom"
+          else
+            el.trigger "mousenotextremebottom"
+
+          if fromLeft <= percent
+            el.trigger "mouseextremeleft"
+          else
+            el.trigger "mousenotextremeleft"
+
+          if fromRight <= percent
+            el.trigger "mouseexremeright"
+          else
+            el.trigger "mousenotextremeright"
+
+          el.mouseleave ->
+            el.trigger "mousenotextremetop"
+            el.trigger "mousenotextremebottom"
+            el.trigger "mousenotextremeleft"
+            el.trigger "mousenotextremeright"
+
+
 
     #trying the Model View Presenter pattern
 
@@ -336,13 +389,32 @@
         $(@el).append @slideWrapper
         @panelCount = 0
         @currentPanel = 0
+        @slidingState = false # could be "up" or "down"
+        @slidingInterval = null
+        @el.mouseextremes()
+        @el.bind "mouseextremebottom", @handleMouseExtremeBottom 
+        @el.bind "mousenotextremebottom", @handleMouseNotExtremeBottom 
+
+
         return this
-      currentPanelEl: () =>
-        ret =  @el.find("[data-index='#{@currentPanel}']")
-        return ret
+      handleMouseNotExtremeBottom: =>
+        @slidingState = false
+        clearInterval @slidingInterval
+
+
+      handleMouseExtremeBottom: () =>
+        if @slidingState isnt false then return
+        @slidingState = "up"
+        clearInterval @slidingInterval
+        @slidingInterval = setInterval @slideUpSmall, 10
+
+      slideUpSmall: () =>
+        @currentPanelEl.css "top", @currentPanelEl.position().top - 1 + "px"
 
       goto: (index) ->
         @currentPanel = index
+        # could have also used a hash to find it instead of a dom lookup
+        @currentPanelEl = @el.find("[data-index='#{@currentPanel}']")
         if z.browser.webkit
           translateX =  (-1 * (index * @width)) 
           z(@slideWrapper[0]).anim "translateX" : translateX + "px"
@@ -405,7 +477,7 @@
       setImage: (url) ->
         @imageDisplayer.showImage url
       displayFirstImage: () =>
-        @thumbsView.currentPanelEl().find("img:first").click()
+        @thumbsView.currentPanelEl.find("img:first").click()
 
       addImage: (urls) ->
         return

test/qunit/test.coffee

@@ -2,8 +2,11 @@ $(document).ready () ->
 
   module("Slideshow")
 
-  test "The title should be 'Troy Brinkerhoff'", () ->
-    equal "Troy Brinkerhoff", document.title, "the title is what it should be"
+  asyncTest "The title should be 'Troy Brinkerhoff'", () ->
+    document.location.href = "#home"
+    _.wait 200, ->
+      equal "Troy Brinkerhoff", document.title, "the title is what it should be"
+      start()
 
   test "Should see Online Viewing", () ->
     equal 1, $('[href="http://troybrinkerhoff.com/onlineviewing/"]').length
@@ -35,12 +38,23 @@ $(document).ready () ->
         equal $('.left-slide-show-arrow').css("display"), "none"
         start()
 
-  test "panel should scroll when hovering over the bottom", ->
-    equal app.thumbsView.slideState, false
-    app.thumbsView.handleBottomHover()
-    equal app.thumbsView.slideState, true
-    app.thumbsView.handleNotBottomHover()
-    equal app.thumbsView.slideState, false
+  asyncTest "panel should scroll when hovering over the bottom", ->
+    document.location.href = "#galleries/portrait"
+    _.wait 200, ->
+      thumbsView = app.view.thumbsView
+      equal thumbsView.slidingState, false
+      thumbsView.handleMouseExtremeBottom()
+      equal thumbsView.slidingState, "up"
+      console.log thumbsView.currentPanelEl
+      topp = thumbsView.currentPanelEl.position().top
+      _.wait 100, ->
+        equal thumbsView.currentPanelEl.position().top < topp, 1
+        thumbsView.handleMouseNotExtremeBottom()
+        topp = thumbsView.currentPanelEl.position().top
+        equal thumbsView.slidingState, false
+        _.wait 100, ->
+          equal thumbsView.currentPanelEl.position().top, topp
+          start()
 
 
 

test/qunit/test.js

@@ -1,8 +1,12 @@
 (function() {
   $(document).ready(function() {
     module("Slideshow");
-    test("The title should be 'Troy Brinkerhoff'", function() {
-      return equal("Troy Brinkerhoff", document.title, "the title is what it should be");
+    asyncTest("The title should be 'Troy Brinkerhoff'", function() {
+      document.location.href = "#home";
+      return _.wait(200, function() {
+        equal("Troy Brinkerhoff", document.title, "the title is what it should be");
+        return start();
+      });
     });
     test("Should see Online Viewing", function() {
       return equal(1, $('[href="http://troybrinkerhoff.com/onlineviewing/"]').length);
@@ -36,12 +40,27 @@
         });
       });
     });
-    test("panel should scroll when hovering over the bottom", function() {
-      equal(app.thumbsView.slideState, false);
-      app.thumbsView.handleBottomHover();
-      equal(app.thumbsView.slideState, true);
-      app.thumbsView.handleNotBottomHover();
-      return equal(app.thumbsView.slideState, false);
+    asyncTest("panel should scroll when hovering over the bottom", function() {
+      document.location.href = "#galleries/portrait";
+      return _.wait(200, function() {
+        var thumbsView, topp;
+        thumbsView = app.view.thumbsView;
+        equal(thumbsView.slidingState, false);
+        thumbsView.handleMouseExtremeBottom();
+        equal(thumbsView.slidingState, "up");
+        console.log(thumbsView.currentPanelEl);
+        topp = thumbsView.currentPanelEl.position().top;
+        return _.wait(100, function() {
+          equal(thumbsView.currentPanelEl.position().top < topp, 1);
+          thumbsView.handleMouseNotExtremeBottom();
+          topp = thumbsView.currentPanelEl.position().top;
+          equal(thumbsView.slidingState, false);
+          return _.wait(100, function() {
+            equal(thumbsView.currentPanelEl.position().top, topp);
+            return start();
+          });
+        });
+      });
     });
     asyncTest("Clicking the left slideshow arrow should change the images", function() {
       var leftArrow;