kd-scrollview - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

component.json

 {
-	"name": "scrollview",
-	"description": "scrollview module",
-	"version": "0.1.1",
-	"dependencies": {
-		"kdmodules/mutation-summary": "*",
-		"kdmodules/jquery-mousewheel": "^3.1.12",
-		"kdmodules/core": "^0.1.0"
-	},
-	"scripts": [
-		"index.coffee",
-		"CustomScrollView.coffee",
-		"CustomScrollViewWrapper.coffee",
-		"ScrollThumb.coffee",
-		"ScrollTrack.coffee",
-		"ScrollView.coffee"
-	],
-	"license": "MIT",
-	"repository": "kdmodules/scrollview",
-	"keywords": [
-		"kd",
-		"scrollview",
-		"koding",
-		"kdmodules",
-		"kdapp",
-		"coffeescript",
-		"kdjs"
-	]
+  "name": "scrollview",
+  "description": "scrollview module",
+  "version": "0.1.2",
+  "dependencies": {
+    "kdmodules/mutation-summary": "*",
+    "kdmodules/jquery-mousewheel": "^3.1.12",
+    "kdmodules/core": "^0.1.0"
+  },
+  "scripts": [
+    "index.coffee",
+    "CustomScrollView.coffee",
+    "CustomScrollViewWrapper.coffee",
+    "ScrollThumb.coffee",
+    "ScrollTrack.coffee",
+    "ScrollView.coffee"
+  ],
+  "license": "MIT",
+  "repository": "kdmodules/scrollview",
+  "keywords": [
+    "kd",
+    "scrollview",
+    "koding",
+    "kdmodules",
+    "kdapp",
+    "coffeescript",
+    "kdjs"
+  ]
 }

CustomScrollView.coffee

 
+{KDCustomHTMLView} = require 'core'
+
 window.MutationSummary    = require 'mutation-summary'
-KDCustomHTMLView          = require 'core/CustomHTMLView'
 KDScrollTrack             = require './ScrollTrack'
@@ -94,2 +95,94 @@ KDCustomScrollViewWrapper = require './CustomScrollViewWrapper'
     @verticalTrack.unsetClass 'out'
-    @horizontalTrack.unsetClass 'out'
+    @horizontalTrack.unsetClass 'out'
+window.MutationSummary    = require 'mutation-summary'
+KDScrollTrack             = require './ScrollTrack'
+KDCustomScrollViewWrapper = require './CustomScrollViewWrapper'
+
+module.exports = class KDCustomScrollView extends KDCustomHTMLView
+
+  constructor: (options = {}, data) ->
+
+    options.bind             = KD.utils.curry 'mouseenter mouseleave', options.bind
+    options.cssClass         = KD.utils.curry 'kdcustomscrollview', options.cssClass
+    options.mouseWheelSpeed ?= 3
+
+    super options, data
+
+    {mouseWheelSpeed, lazyLoadThreshold, wrapperClass} = @getOptions()
+
+    @listenWindowResize()  if options.offscreenIndicatorClassName?
+
+    Wrapper = wrapperClass or KDCustomScrollViewWrapper
+
+    @wrapper = new Wrapper {
+      tagName  : 'main'
+      lazyLoadThreshold
+      mouseWheelSpeed
+      scroll:
+        if options.offscreenIndicatorClassName?
+        then @bound 'updateOffscreenIndicators'
+    }
+
+    @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}"
+
+    @on 'mouseenter', @bound 'showTracks'
+    @on 'mouseleave', @bound 'hideTracks'
+
+  _windowDidResize: ->
+    @updateOffscreenIndicators()
+
+  updateOffscreenIndicators: ->
+    wrapperEl = @wrapper.getElement()
+    { offscreenIndicatorClassName } = @getOptions()
+    { above, below } = [].slice.call(
+      wrapperEl.getElementsByClassName(offscreenIndicatorClassName))
+        .reduce (memo, child) ->
+          [_, y] = KD.utils.relativeOffset child, wrapperEl
+          if y < wrapperEl.scrollTop
+            memo.above.push child
+          else if y > wrapperEl.scrollTop + wrapperEl.offsetHeight
+            memo.below.push child
+          return memo
+        , { above: [], below: [] }
+    if above.length > 0
+      @emit 'OffscreenItemsAbove', above
+    else
+      @emit 'NoOffscreenItemsAbove'
+    if below.length > 0
+      @emit 'OffscreenItemsBelow', below
+    else
+      @emit 'NoOffscreenItemsBelow'
+
+  viewAppended: ->
+
+    @addSubView @wrapper
+    @addSubView @verticalTrack
+    @addSubView @horizontalTrack
+
+    @wrapper.observeMutations()
+
+    @wrapper.on 'MutationHappened', =>
+      @verticalTrack.thumb.reset()
+      @horizontalTrack.thumb.reset()
+
+  intent = null
+
+  hideTracks: ->
+
+    intent = KD.utils.wait 1000, =>
+      @verticalTrack.setClass 'out'
+      @horizontalTrack.setClass 'out'
+
+
+  showTracks: ->
+
+    KD.utils.killWait intent  if intent
+
+    @verticalTrack.unsetClass 'out'
+    @horizontalTrack.unsetClass 'out'

CustomScrollViewWrapper.coffee

 
-KDCustomHTMLView = require 'core/CustomHTMLView'
+{KDCustomHTMLView} = require 'core'
+
 KDScrollView     = require './ScrollView'
@@ -74,1 +75,74 @@ KDScrollThumb    = require './ScrollThumb'
       return shouldStop
+
+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
+
+    {deltaX, deltaY, deltaFactor} = event
+
+    speed = deltaFactor or @getOptions().mouseWheelSpeed or 1
+    x     = -deltaX
+    y     = -deltaY
+
+    resX  = if x isnt 0 and @getScrollWidth() > @horizontalThumb.getTrackSize()
+    then  @_scrollHorizontally {speed, velocity : x}
+    else  no
+    resY  = if y isnt 0 and @getScrollHeight() > @verticalThumb.getTrackSize()
+    then  @_scrollVertically {speed, velocity : y}
+    else  no
+
+    stop  = if Math.abs(x) > Math.abs(y) then resX else resY
+
+    KD.utils.stopDOMEvent event  unless stop
+
+    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
+

package.json

 {
-	"name": "kd-scrollview",
-	"version": "0.1.1",
-	"description": "scrollview module for kd",
-	"main": "index.coffee",
-	"scripts": {
-		"test": "echo \"Error: no test specified\" && exit 1"
-	},
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/kdmodules/scrollview.git"
-	},
-	"keywords": [
-		"kd",
-		"scrollview",
-		"koding",
-		"kdmodules",
-		"kdapp",
-		"coffeescript",
-		"kdjs"
-	],
-	"author": "Koding <[e-mail]>",
-	"license": "MIT",
-	"bugs": {
-		"url": "https://github.com/kdmodules/scrollview/issues"
-	},
-	"homepage": "https://github.com/kdmodules/scrollview",
-	"dependencies": {
-		"kd-shim-mutation-summary": "*",
-		"kd-shim-jquery-mousewheel": "^3.1.12",
-		"kd-core": "^0.1.0"
-	},
-	"browser": {
-		"mutation-summary": "kd-shim-mutation-summary",
-		"jquery-mousewheel": "kd-shim-jquery-mousewheel",
-		"core": "kd-core"
-	},
-	"devDependencies": {}
+  "name": "kd-scrollview",
+  "version": "0.1.2",
+  "description": "scrollview module for kd",
+  "main": "index.coffee",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/kdmodules/scrollview.git"
+  },
+  "keywords": [
+    "kd",
+    "scrollview",
+    "koding",
+    "kdmodules",
+    "kdapp",
+    "coffeescript",
+    "kdjs"
+  ],
+  "author": "Koding <[e-mail]>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/kdmodules/scrollview/issues"
+  },
+  "homepage": "https://github.com/kdmodules/scrollview",
+  "dependencies": {
+    "kd-shim-mutation-summary": "*",
+    "kd-shim-jquery-mousewheel": "^3.1.12",
+    "kd-core": "^0.1.0"
+  },
+  "browser": {
+    "mutation-summary": "kd-shim-mutation-summary",
+    "jquery-mousewheel": "kd-shim-jquery-mousewheel",
+    "core": "kd-core"
+  },
+  "devDependencies": {}
 }

ScrollThumb.coffee

 
-KDView = require 'core/View'
+{KDView} = require 'core'
 
+
 module.exports = class KDScrollThumb extends KDView
@@ -138,1 +139,138 @@
   _windowDidResize: -> @reset()
+
+
+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
+
+    super options, data
+
+    {@type, @track} = @getOptions()
+
+    @view = @track.getDelegate()
+
+    @on 'viewAppended', @bound 'calculateSize'
+    @on 'DragInAction', @bound 'handleDrag'
+    @view.on 'scroll',  @bound 'calculatePosition'
+
+    @listenWindowResize()
+
+
+  resetSizes: ->
+
+    @size       = null
+    @trackSize  = null
+    @scrollSize = null
+
+
+  reset: ->
+
+    @resetSizes()
+    @calculateSize()
+    @calculatePosition()
+
+
+  handleDrag: ->
+
+    size        = @getSize()
+    offset      = @getOffset()
+    thumbDiff   = @getSize(yes) - @size # in case of given min-height/width with css
+    trackSize   = @getTrackSize() - thumbDiff
+    availOffset = trackSize - size
+    ratio       = Math.min Math.max(0, offset/availOffset), 1
+
+    if @isVertical()
+    then @view.setScrollTop  (@view.getScrollHeight() - trackSize) * ratio
+    else @view.setScrollLeft (@view.getScrollWidth()  - trackSize) * ratio
+
+
+  isVertical: -> @type is 'vertical'
+
+
+  getTrackSize: ->
+
+    if @trackSize then @trackSize
+    else if @isVertical()
+    then @track.getHeight()
+    else @track.getWidth()
+
+
+  setSize: (size) ->
+
+    if @isVertical()
+    then @setHeight size
+    else @setWidth size
+    @size = size
+
+
+  getSize: (force) ->
+
+    if @size and not force then @size
+    else if @isVertical()
+    then @getHeight()
+    else @getWidth()
+
+
+  setOffset: (offset) ->
+
+    @setStyle if @isVertical()
+    then top  : offset
+    else left : offset
+
+
+  getOffset: ->
+
+    if @isVertical()
+    then @getY() - @track.getY()
+    else @getX() - @track.getX()
+
+
+  getScrollOffset: ->
+
+    if @isVertical()
+    then @view.getScrollTop()
+    else @view.getScrollLeft()
+
+
+  getScrollSize: ->
+
+    if @scrollSize then @scrollSize
+    else if @isVertical()
+    then @view.getScrollHeight()
+    else @view.getScrollWidth()
+
+
+  calculateSize: ->
+
+    @trackSize  = @getTrackSize()
+    @scrollSize = @getScrollSize()
+
+    @setTrackVisibility()
+    @setSize @trackSize * @trackSize / @scrollSize
+
+
+  calculatePosition: (event) ->
+
+    ratio     = @getScrollOffset() / @getScrollSize()
+    thumbDiff = @getSize(yes) - @size # in case of given min-height/width with css
+    trackSize = @getTrackSize()
+    @setTrackVisibility()
+    @setOffset (trackSize - thumbDiff) * ratio
+
+
+  setTrackVisibility: ->
+
+    if @trackSize >= @scrollSize
+    then @track.hide()
+    else @track.show()
+
+  # I assume, this would fire a lot
+  # we may throttle this in case - SY
+  _windowDidResize: -> @reset()
+

ScrollTrack.coffee

 
-KDView = require 'core/View'
+{KDView} = require 'core'
+
 KDScrollThumb = require './ScrollThumb'
@@ -54,1 +55,54 @@
 
+
+KDScrollThumb = require './ScrollThumb'
+
+module.exports = class KDScrollTrack extends KDView
+
+  constructor:(options = {}, data)->
+
+    options.type   or= 'vertical'
+    options.cssClass = KD.utils.curry "kdscrolltrack #{options.type} out", options.cssClass
+
+    super options, data
+
+    {@type} = @getOptions()
+
+    @scrollView = @getDelegate()
+
+    @addSubView @thumb = new KDScrollThumb
+      cssClass : 'kdscrollthumb'
+      type     : @type
+      track    : this
+
+
+  click: (event) ->
+
+    return  unless 'kdscrolltrack' in event.target.classList
+
+    thumbSize = @thumb.getSize yes
+
+    if @type is 'vertical'
+      scrollHeight = @scrollView.getScrollHeight()
+      offset = event.originalEvent.layerY or event.offsetY
+      @scrollView.scrollTo
+        top : (offset - thumbSize / 2) / @getHeight() * scrollHeight
+
+    else
+      scrollWidth = @scrollView.getScrollWidth()
+      offset = event.originalEvent.layerX or event.offsetX
+      @scrollView.scrollTo
+        left : (offset - thumbSize / 2) / @getWidth() * scrollWidth
+
+
+  show:->
+
+    @getDelegate().emit 'ScrollTrackShown', @type
+    @unsetClass 'invisible'
+
+
+  hide:->
+
+    @getDelegate().emit 'ScrollTrackHidden', @type
+    @setClass 'invisible'
+
+

ScrollView.coffee

 
+{KDView} = require 'core'
+
 require('jquery-mousewheel') $
 
-KDView = require 'core/View'
 
@@ -93,1 +94,93 @@ module.exports = class KDScrollView extends KDView
     return yes
+
+require('jquery-mousewheel') $
+
+
+module.exports = class KDScrollView extends KDView
+
+  constructor: (options = {}, data) ->
+
+    options.bind     = KD.utils.curry 'mousewheel scroll', options.bind
+    options.cssClass = KD.utils.curry 'kdscrollview', options.cssClass
+
+    super options, data
+
+    @stopScrolling = no
+
+
+  hasScrollBars: -> @hasVerticalScrollBars() or @hasHorizontalScrollBars()
+
+  hasVerticalScrollBars: -> @getScrollHeight() > @getHeight()
+
+  hasHorizontalScrollBars: -> @getScrollWidth() > @getWidth()
+
+  getScrollHeight: -> @getElement().scrollHeight
+
+  getScrollWidth: -> @getElement().scrollWidth
+
+  getScrollTop: -> @getElement().scrollTop
+
+  getScrollLeft: -> @getElement().scrollLeft
+
+  setScrollHeight: (val) -> @getElement().scrollHeight = val
+
+  setScrollWidth: (val) -> @getElement().scrollWidth = val
+
+  setScrollTop: (val) -> @getElement().scrollTop = val
+
+  setScrollLeft: (val) -> @getElement().scrollLeft = val
+
+
+  scrollTo: (options, callback) ->
+
+    { top, left, duration } = options
+
+    top      or= 0
+    left     or= 0
+
+    if duration?
+      @$().animate
+        scrollTop  : top
+        scrollLeft : left
+      , duration
+      , callback
+    else
+      @setScrollTop top
+      @setScrollLeft left
+      callback?()
+
+
+  scrollToBottom: -> @scrollTo top : @getScrollHeight() - @getHeight()
+
+
+  scrollToSubView: (subView) ->
+
+    viewTop       = @getY()
+    viewHeight    = @getHeight()
+    viewScrollTop = @getScrollTop()
+    subViewTop    = subView.getY()
+    subViewHeight = subView.getHeight()
+    subViewRelTop = subViewTop - viewTop + viewScrollTop
+
+    # subview is in visible area
+    if subViewTop - viewTop + subViewHeight < viewHeight and subViewTop - viewTop >= 0
+      # subview is in visible area
+      return
+
+    # subview is above visible area
+    else if subViewTop - viewTop < 0
+      @scrollTo top : subViewRelTop
+
+    # subview is below visible area
+    else if subViewTop - viewTop + subViewHeight > viewHeight
+      @scrollTo top : subViewRelTop - viewHeight + subViewHeight
+
+
+  isAtBottom: -> @getScrollTop() + @getHeight() >= @getScrollHeight()
+
+  mouseWheel: ->
+
+    return no  if @stopScrolling
+
+    return yes
+

New alerts

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Fixed alerts

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Improved metrics

Total package byte prevSize

25935

70.68%

No dependency changes