Permalink
Browse files

Merge pull request #389 from koenbok/feature/sliderImprovements

Feature/slider improvements
  • Loading branch information...
jonastreub committed Aug 1, 2016
2 parents d1b04b4 + 2d75234 commit d6b4b03e81317f9e59aeada13b11b4f494217355
Showing with 45 additions and 9 deletions.
  1. +20 −9 framer/Components/SliderComponent.coffee
  2. +1 −0 test/tests.coffee
  3. +24 −0 test/tests/SliderComponentTest.coffee
@@ -86,7 +86,7 @@ class exports.SliderComponent extends Layer
@on("change:borderRadius", @_setRadius)
@knob.on("change:size", @_updateKnob)
@knob.on("change:frame", @_updateFill)
@knob.on("change:frame", @_updateValue)
@knob.on("change:frame", @_knobDidMove)
@sliderOverlay.on(Events.TapStart, @_touchStart)
@sliderOverlay.on(Events.TapEnd, @_touchEnd)
@@ -136,17 +136,23 @@ class exports.SliderComponent extends Layer
width: @width
height: @height
@hitArea = @hitArea
if @width > @height
@fill.height = @height
@knob.midX = @pointForValue(@value)
@knob.centerY()
else
@fill.width = @width
@knob.midY = @pointForValue(@value)
@knob.centerX()
if @width > @height
@knob.draggable.speedY = 0
@knob.draggable.speedX = 1
else
@knob.draggable.speedX = 0
@knob.draggable.speedY = 1
@sliderOverlay.center()
@@ -157,9 +163,11 @@ class exports.SliderComponent extends Layer
@define "knobSize",
get: -> @_knobSize
set: (value) ->
isRound = @knob.borderRadius * 2 is @_knobSize
@_knobSize = value
@knob.width = @_knobSize
@knob.height = @_knobSize
@knob.borderRadius = @_knobSize / 2 if isRound
@_updateFrame()
@define "hitArea",
@@ -183,14 +191,11 @@ class exports.SliderComponent extends Layer
set: (value) -> @_max = value
@define "value",
get: ->
if @width > @height
@valueForPoint(@knob.midX)
else
@valueForPoint(@knob.midY)
get: -> return @_value
set: (value) ->
@_value = Utils.clamp(value, @min, @max)
if @width > @height
@knob.midX = @pointForValue(value)
else
@@ -199,10 +204,16 @@ class exports.SliderComponent extends Layer
@_updateFill()
@_updateValue()
_knobDidMove: =>
if @width > @height
@value = @valueForPoint(@knob.midX)
else
@value = @valueForPoint(@knob.midY)
_updateValue: =>
if @_lastUpdatedValue is @value
return
return if @_lastUpdatedValue is @value
@_lastUpdatedValue = @value
@emit("change:value", @value)
View
@@ -33,5 +33,6 @@ require "./tests/ScrollComponentTest"
require "./tests/VersionTest"
require "./tests/ColorTest"
require "./tests/DeviceComponentTest"
require "./tests/SliderComponentTest"
mocha.run()
@@ -0,0 +1,24 @@
assert = require "assert"
simulate = require "simulate"
describe "SliderComponent", ->
describe "Defaults", ->
it "should set defaults", ->
slider = new SliderComponent
slider.min.should.equal 0
slider.max.should.equal 1
slider.value.should.equal 0
describe "resizing", ->
it "should not change the value", ->
initialValue = 0.5
slider = new SliderComponent
slider.value = initialValue
slider.width = 100
slider.value.should.equal initialValue

0 comments on commit d6b4b03

Please sign in to comment.