Merge pull request #1373 from hypothesis/1360-scrolling

Clean up scrolling and infinite stream

h/static/scripts/controllers.coffee

@@ -223,6 +223,15 @@ class App
         if current and next.$$route.originalPath is '/a/:id'
           $scope.reloadAnnotations()
 
+    $scope.loadMore = (number) ->
+      unless $scope.updater? then return
+      sockmsg =
+        messageType: 'more_hits'
+        moreHits: number
+
+      $scope.updater.then (sock) ->
+        sock.send(JSON.stringify(sockmsg))
+
     $scope.search.clear = ->
       $location.search('q', null)
 

h/static/scripts/directives.coffee

@@ -428,15 +428,12 @@ simpleSearch = ['$parse', ($parse) ->
             '''
 ]
 
-whenscrolled = ['$window', ($window) ->
+whenscrolled = ->
   link: (scope, elem, attr) ->
-    $window = angular.element($window)
-    $window.on 'scroll', ->
-      windowBottom = $window.height() + $window.scrollTop()
-      elementBottom = elem.offset().top + elem.height()
-      if elementBottom > 0 and elementBottom - windowBottom <= 0
+    elem.bind 'scroll', ->
+      {clientHeight, scrollHeight, scrollTop} = elem[0]
+      if scrollHeight - scrollTop <= clientHeight + 40
         scope.$apply attr.whenscrolled
-]
 
 
 angular.module('h.directives', ['ngSanitize'])

h/static/scripts/services.coffee

@@ -302,30 +302,6 @@ class Hypothesis extends Annotator
 
   _setupWrapper: ->
     @wrapper = @element.find('#wrapper')
-    .on 'mousewheel', (event, delta) ->
-      # prevent overscroll from scrolling host frame
-      # This is actually a bit tricky. Starting from the event target and
-      # working up the DOM tree, find an element which is scrollable
-      # and has a scrollHeight larger than its clientHeight.
-      # I've obsered that some styles, such as :before content, may increase
-      # scrollHeight of non-scrollable elements, and that there a mysterious
-      # discrepancy of 1px sometimes occurs that invalidates the equation
-      # typically cited for determining when scrolling has reached bottom:
-      #   (scrollHeight - scrollTop == clientHeight)
-      $current = $(event.target)
-      while $current.css('overflow') in ['hidden', 'visible']
-        $parent = $current.parent()
-        # Break out on document nodes
-        if $parent.get(0).nodeType == 9
-          event.preventDefault()
-          return
-        $current = $parent
-      scrollTop = $current[0].scrollTop
-      scrollEnd = $current[0].scrollHeight - $current[0].clientHeight
-      if delta > 0 and scrollTop == 0
-        event.preventDefault()
-      else if delta < 0 and scrollEnd - scrollTop <= 5
-        event.preventDefault()
     this
 
   _setupDocumentEvents: ->
@@ -333,6 +309,7 @@ class Hypothesis extends Annotator
       @host?.notify
         method: 'dragFrame'
         params: event.screenX
+    this
 
   # Override things not used in the angular version.
   _setupDynamicStyle: -> this

h/static/scripts/streamsearch.coffee

@@ -37,15 +37,6 @@ class StreamSearch
     $rootScope.applySort "Newest"
 
     $scope.openDetails = (annotation) ->
-    $scope.loadMore = (number) =>
-      # TODO: debounce
-      unless $scope.updater? then return
-      sockmsg =
-        messageType: 'more_hits'
-        moreHits: number
-
-      $scope.updater.then (sock) ->
-        sock.send(JSON.stringify(sockmsg))
 
 
 angular.module('h.streamsearch', imports, configure)

h/static/scripts/vendor/jquery.mousewheel.js

-/*! Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net)
- * Licensed under the MIT License (LICENSE.txt).
- *
- * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
- * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
- * Thanks to: Seamus Leahy for adding deltaX and deltaY
- *
- * Version: 3.0.6
- * 
- * Requires: 1.2.2+
- */
-
-(function($) {
-
-var types = ['DOMMouseScroll', 'mousewheel'];
-
-if ($.event.fixHooks) {
-    for ( var i=types.length; i; ) {
-        $.event.fixHooks[ types[--i] ] = $.event.mouseHooks;
-    }
-}
-
-$.event.special.mousewheel = {
-    setup: function() {
-        if ( this.addEventListener ) {
-            for ( var i=types.length; i; ) {
-                this.addEventListener( types[--i], handler, false );
-            }
-        } else {
-            this.onmousewheel = handler;
-        }
-    },
-    
-    teardown: function() {
-        if ( this.removeEventListener ) {
-            for ( var i=types.length; i; ) {
-                this.removeEventListener( types[--i], handler, false );
-            }
-        } else {
-            this.onmousewheel = null;
-        }
-    }
-};
-
-$.fn.extend({
-    mousewheel: function(fn) {
-        return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
-    },
-    
-    unmousewheel: function(fn) {
-        return this.unbind("mousewheel", fn);
-    }
-});
-
-
-function handler(event) {
-    var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;
-    event = $.event.fix(orgEvent);
-    event.type = "mousewheel";
-    
-    // Old school scrollwheel delta
-    if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta/120; }
-    if ( orgEvent.detail     ) { delta = -orgEvent.detail/3; }
-    
-    // New school multidimensional scroll (touchpads) deltas
-    deltaY = delta;
-    
-    // Gecko
-    if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
-        deltaY = 0;
-        deltaX = -1*delta;
-    }
-    
-    // Webkit
-    if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }
-    if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }
-    
-    // Add event and delta to the front of the arguments
-    args.unshift(event, delta, deltaX, deltaY);
-    
-    return ($.event.dispatch || $.event.handle).apply(this, args);
-}
-
-})(jQuery);

h/static/styles/app.scss

@@ -39,14 +39,23 @@ ol {
   border: 1px dashed $gray;
 }
 
+#wrapper {
+  padding: .72em;
+  text-align: center;
+
+  @include respond-to(tablets desktops) {
+    padding-bottom: 4em;
+  }
+}
+
 .content {
   margin: 0 auto;
-  padding: .72em;
+  text-align: left;
 
   @include respond-to(tablets desktops) {
-    padding: .72em 4em 4em;
     margin: auto;
     max-width: $break-medium;
+    padding: 0 4em;
   }
 
   & > header {

h/static/styles/common.scss

@@ -476,6 +476,7 @@ blockquote {
   @include border-radius(2px);
   background: $white;
   border: solid 1px $gray-lighter;
+  padding: 1em;
 }
 
 
@@ -576,7 +577,6 @@ blockquote {
 //Threaded discussion specific
 .thread {
   cursor: pointer;
-  padding: 1em;
   position: relative;
 
   & > * {

h/static/styles/topbar.scss

@@ -43,8 +43,7 @@ body {
   .inner {
     margin: 0 auto;
     max-width: $break-medium;
-    padding-left: 3.6em;
-    padding-right: 3.6em;
+    padding: 0 4em;
     position: relative;
 
     @include respond-to(wide-handhelds handhelds) {

karma.config.js

@@ -16,7 +16,6 @@ module.exports = function(config) {
     // list of files / patterns to load in the browser
     files: [
       'h/static/scripts/vendor/jquery-1.10.2.js',
-      'h/static/scripts/vendor/jquery.mousewheel.js',
       'h/static/scripts/vendor/angular.js',
       'h/static/scripts/vendor/angular-mocks.js',
       'h/static/scripts/vendor/angular-animate.js',