Permalink
Browse files

Merge pull request #274 from koenbok/slider-update

SliderComponent Update
  • Loading branch information...
koenbok committed Dec 29, 2015
2 parents d8ac785 + e59f7b2 commit 209a50d2a1014b2644b33ab0522763ed7a53de34
Showing with 95 additions and 14 deletions.
  1. +3 −0 .gitignore
  2. +3 −0 extras/Studio.framer/framer/.bowerrc
  3. +89 −14 framer/Components/SliderComponent.coffee
View
@@ -12,6 +12,9 @@ lib
npm-debug.log
extras/Studio.framer/app.coffee
extras/Studio.framer/framer/config.json
extras/Studio.framer/framer/.bowerrc
extras/Studio.framer/framer/init.js
extras/Studio.framer/Icon
extras/Studio.framer/imported
extras/Studio.framer/app.js
test/phantomjs/tests.js
@@ -0,0 +1,3 @@
{
"directory" : "plugins"
}
@@ -17,6 +17,14 @@ valueForPoint(<n>)
animateToValue(value, animationOptions={})
"""
class Knob extends Layer
constructor: (options) ->
super options
@define "constrained", @simpleProperty("constrained", false)
class exports.SliderComponent extends Layer
constructor: (options={}) ->
@@ -27,7 +35,7 @@ class exports.SliderComponent extends Layer
options.height ?= 10
options.value ?= 0
@knob = new Layer
@knob = new Knob
backgroundColor: "#fff"
shadowY: 1, shadowBlur: 3
shadowColor: "rgba(0,0,0,0.35)"
@@ -38,32 +46,55 @@ class exports.SliderComponent extends Layer
width: 0, force2d: true
name: "fill"
@knobOverlay = new Layer
backgroundColor: null
name: "knobOverlay"
@sliderOverlay = new Layer
backgroundColor: null
name: "sliderOverlay"
super options
@knobSize = options.knobSize or 30
@knob.superLayer = @fill.superLayer = @
@knob.superLayer = @fill.superLayer = @knobOverlay.superLayer = @sliderOverlay.superLayer = @
# Set fill initially
if @width > @height
@fill.height = @height
else
@fill.width = @width
@fill.borderRadius = @borderRadius
# Link knobOverlay to knob
@knobOverlay.on Events.Move, ->
if @width > @height
@knob.x = @x
else
@knob.y = @y
@fill.borderRadius = @sliderOverlay.borderRadius = @borderRadius
@knob.draggable.enabled = true
@knob.draggable.overdrag = false
@knob.draggable.momentum = true
@knob.draggable.momentumOptions = {friction: 5, tolerance: 0.25}
@knob.draggable.bounce = false
@knob.draggable.propagateEvents = false
@knob.borderRadius = @knobSize / 2
@knobOverlay.borderRadius = (@knob.borderRadius * 2) + (@hitArea / 4)
# If hitArea isn't defined, remove the overlays
if not @hitArea
@knobOverlay.destroy()
@sliderOverlay.destroy()
@_updateFrame()
@_updateKnob()
@_updateFill()
@on("change:size", @_updateFrame)
@on("change:borderRadius", @_setRadius)
@knob.on("change:borderRadius", @_setOverlayRadius)
# Check for vertical sliders
if @width > @height
@@ -81,6 +112,7 @@ class exports.SliderComponent extends Layer
# On click/touch of the slider, update the value
@on(Events.TouchStart, @_touchDown)
@sliderOverlay.on(Events.TouchStart, @_touchDown)
_touchDown: (event) =>
event.preventDefault()
@@ -99,17 +131,19 @@ class exports.SliderComponent extends Layer
_updateFill: =>
if @width > @height
@fill.width = @knob.midX
@fill.width = @knobOverlay.midX = @knob.midX
else
@fill.height = @knob.midY
@fill.height = @knobOverlay.midY = @knob.midY
_updateKnob: =>
if @width > @height
@knob.midX = @fill.width
@knob.midX = @knobOverlay.midX = @fill.width
@knob.centerY()
else
@knob.midY = @fill.height
@knob.midY = @knobOverlay.midX = @fill.height
@knob.centerX()
@knobOverlay.midY = @knob.midY
_updateFrame: =>
@knob.draggable.constraints =
@@ -118,26 +152,54 @@ class exports.SliderComponent extends Layer
width: @width + @knob.width
height: @height + @knob.height
if @knob.constrained
@knob.draggable.constraints =
x: 0
y: 0
width: @width
height: @height
if @width > @height
@fill.height = @height
@knob.centerY()
@knobOverlay.centerY()
else
@fill.width = @width
@knob.centerX()
@knobOverlay.centerX()
@sliderOverlay.center()
_setRadius: =>
radius = @borderRadius
@fill.style.borderRadius = "#{radius}px 0 0 #{radius}px"
_setOverlayRadius: =>
@knobOverlay.borderRadius = (@knob.borderRadius * 2) + (@hitArea / 4)
@define "knobSize",
get: -> @_knobSize
set: (value) ->
@_knobSize = value
@knob.width = @_knobSize
@knob.height = @_knobSize
@knob.borderRadius = @knobSize / 2
@_updateFrame()
@define "hitArea",
get: -> @_hitArea
set: (value) ->
@_hitArea = value
@knobOverlay.props =
width: @knobSize or 30 + @_hitArea
height: @knobSize or 30 + @_hitArea
@sliderOverlay.props =
width: @width + @_hitArea
height: @height + @_hitArea
@define "min",
get: -> @_min or 0
set: (value) -> @_min = value
@@ -156,25 +218,38 @@ class exports.SliderComponent extends Layer
set: (value) ->
if @width > @height
@knob.midX = @pointForValue(value)
@_updateFill()
else
@knob.midY = @pointForValue(value)
@_updateFill()
@_updateFill()
@_updateValue()
_updateValue: =>
@emit("change:value", @value)
pointForValue: (value) ->
if @width > @height
return Utils.modulate(value, [@min, @max], [0, @width], true)
if @knob.constrained
return Utils.modulate(value, [@min, @max], [0 + (@knob.width / 2), @width - (@knob.width / 2)], true)
else
return Utils.modulate(value, [@min, @max], [0 , @width], true)
else
return Utils.modulate(value, [@min, @max], [0, @height], true)
if @knob.constrained
return Utils.modulate(value, [@min, @max], [0 + (@knob.height / 2), @height - (@knob.height / 2)], true)
else
return Utils.modulate(value, [@min, @max], [0, @height], true)
valueForPoint: (value) ->
if @width > @height
return Utils.modulate(value, [0, @width], [@min, @max], true)
if @knob.constrained
return Utils.modulate(value, [0 + (@knob.width / 2), @width - (@knob.width / 2)], [@min, @max], true)
else
return Utils.modulate(value, [0, @width], [@min, @max], true)
else
return Utils.modulate(value, [0, @height], [@min, @max], true)
if @knob.constrained
return Utils.modulate(value, [0 + (@knob.height / 2), @height - (@knob.height / 2)], [@min, @max], true)
else
return Utils.modulate(value, [0, @height], [@min, @max], true)
animateToValue: (value, animationOptions={curve:"spring(300,25,0)"}) ->
if @width > @height

0 comments on commit 209a50d

Please sign in to comment.