CustomScrollView: own scrollbars logic taken to its own class

src/components/scrollview/customscrollview.coffee

@@ -0,0 +1,55 @@
+require('jquery-mousewheel') $
+
+JView                     = require './../../core/jview'
+KDCustomHTMLView          = require './../../core/customhtmlview'
+KDScrollTrack             = require './scrolltrack'
+KDCustomScrollViewWrapper = require './customscrollviewinner'
+
+module.exports = class KDCustomScrollView extends KDCustomHTMLView
+
+  constructor:(options = {}, data)->
+
+    options.naturalScroll   ?= yes
+    options.cssClass         = KD.utils.curry 'kdcustomscrollview', options.cssClass
+    options.mouseWheelSpeed ?= 3
+
+    super options, data
+
+    {mouseWheelSpeed} = @getOptions()
+
+    @wrapper = new KDCustomScrollViewWrapper {
+      tagName  : 'main'
+      mouseWheelSpeed
+    }
+
+    @verticalTrack   = new KDScrollTrack delegate : @wrapper
+    @horizontalTrack = new KDScrollTrack delegate : @wrapper, type : 'horizontal'
+    @wrapper.verticalThumb   = @verticalTrack.thumb
+    @wrapper.horizontalThumb = @horizontalTrack.thumb
+
+    @wrapper.on 'ScrollTrackShown',  (type)=> @setClass   "has-#{type}"
+    @wrapper.on 'ScrollTrackHidden', (type)=> @unsetClass "has-#{type}"
+
+
+  pistachio:->
+
+    """
+    {{> @wrapper}}
+    {{> @verticalTrack}}
+    {{> @horizontalTrack}}
+    """
+
+
+  viewAppended:->
+
+    JView::viewAppended.call this
+
+    @wrapper.observeMutations()
+
+    @wrapper.on 'MutationHappened', @verticalTrack.thumb.bound 'handleMutation'
+    @wrapper.on 'MutationHappened', @horizontalTrack.thumb.bound 'handleMutation'
+
+
+
+
+

src/components/scrollview/customscrollviewinner.coffee

@@ -0,0 +1,73 @@
+require('jquery-mousewheel') $
+KDCustomHTMLView = require './../../core/customhtmlview'
+KDScrollView     = require './scrollview'
+KDScrollThumb    = require './scrollthumb'
+KDScrollTrack    = require './scrolltrack'
+
+module.exports = class KDCustomScrollViewWrapper extends KDScrollView
+
+  scroll:(event)->
+
+    if @verticalThumb.beingDragged or @horizontalThumb.beingDragged
+      return KD.utils.stopDOMEvent event
+
+
+  mouseWheel:(event)->
+
+    super
+
+    {_delta, deltaFactor} = event
+
+    return  unless _delta
+
+    speed = deltaFactor or @getOptions().mouseWheelSpeed
+    x     = _delta.deltaX
+    y     = _delta.deltaY
+
+    resX  = if x isnt 0 and @getScrollWidth() > @getWidth()
+    then  @_scrollHorizontally {speed, velocity : x}
+    else  no
+    resY  = if y isnt 0 and @getScrollHeight() > @getHeight()
+    then  @_scrollVertically {speed, velocity : y}
+    else  no
+
+    stop  = if Math.abs(x) > Math.abs(y) then resX else resY
+
+    return !stop
+
+
+  _scrollVertically: do ->
+
+    lastPosition = 0
+
+    ({speed, velocity})->
+
+      stepInPixels = velocity * speed
+      actPosition  = @getScrollTop()
+      newPosition  = actPosition - stepInPixels
+      shouldStop   = if velocity > 0
+      then lastPosition > newPosition
+      else lastPosition < newPosition
+
+      @setScrollTop lastPosition = newPosition
+
+      return shouldStop
+
+  _scrollHorizontally: do ->
+
+    lastPosition = 0
+
+    ({speed, velocity})->
+
+      stepInPixels = velocity * speed
+      actPosition  = @getScrollLeft()
+      newPosition  = actPosition + stepInPixels
+      shouldStop   = if velocity < 0
+      then lastPosition >= newPosition
+      else lastPosition <= newPosition
+
+      @setScrollLeft lastPosition = newPosition
+
+      return shouldStop
+
+

src/components/scrollview/scrollthumb.coffee

@@ -5,14 +5,16 @@ module.exports = class KDScrollThumb extends KDView
   constructor:(options = {}, data)->
 
     options.type      or= 'vertical'
+    options.cssClass    = KD.utils.curry 'kdscrollthumb', options.cssClass
     options.draggable  ?=
-      axis        : if options.type is 'vertical' then 'y' else 'x'
-      containment : this
+      axis              : if options.type is 'vertical' then 'y' else 'x'
+      containment       : this
 
     super options, data
 
     {@type, @track} = @getOptions()
-    @view           = @track.getDelegate()
+
+    @view = @track.getDelegate()
 
     @on 'viewAppended', @bound 'calculateSize'
     @on 'DragInAction', @bound 'handleDrag'

src/components/scrollview/scrolltrack.coffee

@@ -1,8 +1,33 @@
-KDView = require './../../core/view.coffee'
+JView = require './../../core/jview'
 
-module.exports = class KDScrollTrack extends KDView
+module.exports = class KDScrollTrack extends JView
 
-  show:-> @unsetClass 'invisible'
+  constructor:(options = {}, data)->
 
-  hide:-> @setClass 'invisible'
+    options.type   or= 'vertical'
+    options.cssClass = KD.utils.curry "kdscrolltrack #{options.type}", options.cssClass
+
+    super options, data
+
+    {@type} = @getOptions()
+
+    @thumb = new KDScrollThumb
+      cssClass : 'kdscrollthumb'
+      type     : @type
+      track    : this
+
+
+  pistachio: -> "{{> @thumb}}"
+
+
+  show:->
+
+    @getDelegate().emit "ScrollTrackShown", @type
+    @unsetClass 'invisible'
+
+
+  hide:->
+
+    @getDelegate().emit "ScrollTrackHidden", @type
+    @setClass 'invisible'
 

src/themes/default/kd.scrollview.styl

@@ -7,20 +7,22 @@
 .kdscrollview
   overflow          auto
 
-  &.has-own-scrollbars
-    overflow        hidden !important
-    height          100%
 
-.own-scrollbars-wrapper
+.kdcustomscrollview
   overflow          hidden !important
   size              100% 100%
-  padding-right     15px
-  padding-bottom    15px
   borderBox()
   rel()
 
+  &.has-vertical
+    padding-right   15px
+
+  &.has-horizontal
+    padding-bottom  15px
+
   > .kdscrollview
-    height          auto
+    overflow        hidden !important
+    height          100%
 
   .kdscrolltrack
     right           0
@@ -29,13 +31,14 @@
     bg              color rgba(0, 0, 0, .1)
     abs()
 
-    &.ver
+    &.vertical
       top           0
       size          15px 100%
+
       .kdscrollthumb
         size        100% auto
 
-    &.hor
+    &.horizontal
       bottom        0
       size          100% 15px