Merge pull request #274 from koenbok/slider-update

SliderComponent Update

.gitignore

@@ -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

extras/Studio.framer/framer/.bowerrc

@@ -0,0 +1,3 @@
+{
+	"directory" : "plugins"
+}

framer/Components/SliderComponent.coffee

@@ -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