|
|
@@ -18,6 +18,8 @@ do ($ = window.jQuery, window) ->
|
|
|
onText: @$element.data "on-text"
|
|
|
offText: @$element.data "off-text"
|
|
|
labelText: @$element.data "label-text"
|
|
|
+ handleWidth: @$element.data "handle-width"
|
|
|
+ labelWidth: @$element.data "label-width"
|
|
|
baseClass: @$element.data "base-class"
|
|
|
wrapperClass: @$element.data "wrapper-class"
|
|
|
, options
|
|
|
@@ -27,7 +29,6 @@ do ($ = window.jQuery, window) ->
|
|
|
|
|
|
classes.push if @options.state then "#{@options.baseClass}-on" else "#{@options.baseClass}-off"
|
|
|
classes.push "#{@options.baseClass}-#{@options.size}" if @options.size?
|
|
|
- classes.push "#{@options.baseClass}-animate" if @options.animate
|
|
|
classes.push "#{@options.baseClass}-disabled" if @options.disabled
|
|
|
classes.push "#{@options.baseClass}-readonly" if @options.readonly
|
|
|
classes.push "#{@options.baseClass}-indeterminate" if @options.indeterminate
|
|
|
@@ -46,9 +47,6 @@ do ($ = window.jQuery, window) ->
|
|
|
html: @options.labelText
|
|
|
class: "#{@options.baseClass}-label"
|
|
|
|
|
|
- # indeterminate state
|
|
|
- @$element.prop "indeterminate", true if @options.indeterminate
|
|
|
-
|
|
|
# set up events
|
|
|
@$element.on "init.bootstrapSwitch", => @options.onInit.apply element, arguments
|
|
|
@$element.on "switchChange.bootstrapSwitch", => @options.onSwitchChange.apply element, arguments
|
|
|
@@ -62,21 +60,31 @@ do ($ = window.jQuery, window) ->
|
|
|
.before(if @options.inverse then @$off else @$on)
|
|
|
.before(@$label)
|
|
|
.before(if @options.inverse then @$on else @$off)
|
|
|
- .trigger "init.bootstrapSwitch"
|
|
|
|
|
|
+ # indeterminate state
|
|
|
+ @$element.prop "indeterminate", true if @options.indeterminate
|
|
|
+
|
|
|
+ # normalize handles width
|
|
|
+ @_width()
|
|
|
+
|
|
|
+ # set container position
|
|
|
+ @_containerPosition @options.state, =>
|
|
|
+ @$wrapper.addClass "#{@options.baseClass}-animate" if @options.animate
|
|
|
+
|
|
|
+ # initialise handlers
|
|
|
@_elementHandlers()
|
|
|
@_handleHandlers()
|
|
|
@_labelHandlers()
|
|
|
@_formHandler()
|
|
|
|
|
|
- # TODO: @$label.hasClass "label-change-switch" in toggleState
|
|
|
+ @$element.trigger "init.bootstrapSwitch"
|
|
|
|
|
|
_constructor: BootstrapSwitch
|
|
|
|
|
|
state: (value, skip) ->
|
|
|
- return @options.state if typeof value is "undefined"
|
|
|
- return @$element if @options.disabled or @options.readonly
|
|
|
- return @$element if @options.state and not @options.radioAllOff and @$element.is ':radio'
|
|
|
+ return @options.state if typeof value is "undefined"
|
|
|
+ return @$element if @options.disabled or @options.readonly
|
|
|
+ return @$element if @options.state and not @options.radioAllOff and @$element.is ':radio'
|
|
|
|
|
|
if @options.indeterminate
|
|
|
@indeterminate false
|
|
|
@@ -88,7 +96,7 @@ do ($ = window.jQuery, window) ->
|
|
|
@$element
|
|
|
|
|
|
toggleState: (skip) ->
|
|
|
- return @$element if @options.disabled or @options.readonly
|
|
|
+ return @$element if @options.disabled or @options.readonly
|
|
|
|
|
|
if @options.indeterminate
|
|
|
@indeterminate false
|
|
|
@@ -97,77 +105,84 @@ do ($ = window.jQuery, window) ->
|
|
|
@$element.prop("checked", not @options.state).trigger "change.bootstrapSwitch", skip
|
|
|
|
|
|
size: (value) ->
|
|
|
- return @options.size if typeof value is "undefined"
|
|
|
+ return @options.size if typeof value is "undefined"
|
|
|
|
|
|
@$wrapper.removeClass "#{@options.baseClass}-#{@options.size}" if @options.size?
|
|
|
@$wrapper.addClass "#{@options.baseClass}-#{value}" if value
|
|
|
+ @_width()
|
|
|
@options.size = value
|
|
|
@$element
|
|
|
|
|
|
animate: (value) ->
|
|
|
- return @options.animate if typeof value is "undefined"
|
|
|
+ return @options.animate if typeof value is "undefined"
|
|
|
|
|
|
value = not not value
|
|
|
+ @options.animate = value
|
|
|
|
|
|
@$wrapper[if value then "addClass" else "removeClass"]("#{@options.baseClass}-animate")
|
|
|
- @options.animate = value
|
|
|
@$element
|
|
|
|
|
|
toggleAnimate: ->
|
|
|
- @$wrapper.toggleClass "#{@options.baseClass}-animate"
|
|
|
@options.animate = not @options.animate
|
|
|
+
|
|
|
+ @$wrapper.toggleClass "#{@options.baseClass}-animate"
|
|
|
@$element
|
|
|
|
|
|
disabled: (value) ->
|
|
|
- return @options.disabled if typeof value is "undefined"
|
|
|
+ return @options.disabled if typeof value is "undefined"
|
|
|
|
|
|
value = not not value
|
|
|
+ @options.disabled = value
|
|
|
|
|
|
- @$wrapper[if value then "addClass" else "removeClass"]("#{@options.baseClass}-disabled")
|
|
|
@$element.prop "disabled", value
|
|
|
- @options.disabled = value
|
|
|
+ @$wrapper[if value then "addClass" else "removeClass"]("#{@options.baseClass}-disabled")
|
|
|
@$element
|
|
|
|
|
|
toggleDisabled: ->
|
|
|
- @$element.prop "disabled", not @options.disabled
|
|
|
- @$wrapper.toggleClass "#{@options.baseClass}-disabled"
|
|
|
@options.disabled = not @options.disabled
|
|
|
+
|
|
|
+ @$element.prop "disabled", @options.disabled
|
|
|
+ @$wrapper.toggleClass "#{@options.baseClass}-disabled"
|
|
|
@$element
|
|
|
|
|
|
readonly: (value) ->
|
|
|
- return @options.readonly if typeof value is "undefined"
|
|
|
+ return @options.readonly if typeof value is "undefined"
|
|
|
|
|
|
value = not not value
|
|
|
+ @options.readonly = value
|
|
|
|
|
|
- @$wrapper[if value then "addClass" else "removeClass"]("#{@options.baseClass}-readonly")
|
|
|
@$element.prop "readonly", value
|
|
|
- @options.readonly = value
|
|
|
+ @$wrapper[if value then "addClass" else "removeClass"]("#{@options.baseClass}-readonly")
|
|
|
@$element
|
|
|
|
|
|
toggleReadonly: ->
|
|
|
- @$element.prop "readonly", not @options.readonly
|
|
|
- @$wrapper.toggleClass "#{@options.baseClass}-readonly"
|
|
|
@options.readonly = not @options.readonly
|
|
|
+
|
|
|
+ @$element.prop "readonly", @options.readonly
|
|
|
+ @$wrapper.toggleClass "#{@options.baseClass}-readonly"
|
|
|
@$element
|
|
|
|
|
|
indeterminate: (value) ->
|
|
|
- return @options.indeterminate if typeof value is "undefined"
|
|
|
+ return @options.indeterminate if typeof value is "undefined"
|
|
|
|
|
|
value = not not value
|
|
|
+ @options.indeterminate = value
|
|
|
|
|
|
- @$wrapper[if value then "addClass" else "removeClass"]("#{@options.baseClass}-indeterminate")
|
|
|
@$element.prop "indeterminate", value
|
|
|
- @options.indeterminate = value
|
|
|
+ @$wrapper[if value then "addClass" else "removeClass"]("#{@options.baseClass}-indeterminate")
|
|
|
+ @_containerPosition()
|
|
|
@$element
|
|
|
|
|
|
toggleIndeterminate: ->
|
|
|
+ @options.indeterminate = not @options.indeterminate
|
|
|
+
|
|
|
@$element.prop "indeterminate", not @options.indeterminate
|
|
|
@$wrapper.toggleClass "#{@options.baseClass}-indeterminate"
|
|
|
- @options.indeterminate = not @options.indeterminate
|
|
|
+ @_containerPosition()
|
|
|
@$element
|
|
|
|
|
|
inverse: (value) ->
|
|
|
- return @options.inverse if typeof value is "undefined"
|
|
|
+ return @options.inverse if typeof value is "undefined"
|
|
|
|
|
|
value = not not value
|
|
|
|
|
|
@@ -195,7 +210,7 @@ do ($ = window.jQuery, window) ->
|
|
|
onColor: (value) ->
|
|
|
color = @options.onColor
|
|
|
|
|
|
- return color if typeof value is "undefined"
|
|
|
+ return color if typeof value is "undefined"
|
|
|
|
|
|
@$on.removeClass "#{@options.baseClass}-#{color}" if color?
|
|
|
@$on.addClass "#{@options.baseClass}-#{value}"
|
|
|
@@ -205,7 +220,7 @@ do ($ = window.jQuery, window) ->
|
|
|
offColor: (value) ->
|
|
|
color = @options.offColor
|
|
|
|
|
|
- return color if typeof value is "undefined"
|
|
|
+ return color if typeof value is "undefined"
|
|
|
|
|
|
@$off.removeClass "#{@options.baseClass}-#{color}" if color?
|
|
|
@$off.addClass "#{@options.baseClass}-#{value}"
|
|
|
@@ -213,31 +228,50 @@ do ($ = window.jQuery, window) ->
|
|
|
@$element
|
|
|
|
|
|
onText: (value) ->
|
|
|
- return @options.onText if typeof value is "undefined"
|
|
|
+ return @options.onText if typeof value is "undefined"
|
|
|
|
|
|
@$on.html value
|
|
|
+ @_width()
|
|
|
+ @_containerPosition()
|
|
|
@options.onText = value
|
|
|
@$element
|
|
|
|
|
|
offText: (value) ->
|
|
|
- return @options.offText if typeof value is "undefined"
|
|
|
+ return @options.offText if typeof value is "undefined"
|
|
|
|
|
|
@$off.html value
|
|
|
+ @_width()
|
|
|
+ @_containerPosition()
|
|
|
@options.offText = value
|
|
|
@$element
|
|
|
|
|
|
labelText: (value) ->
|
|
|
- return @options.labelText if typeof value is "undefined"
|
|
|
+ return @options.labelText if typeof value is "undefined"
|
|
|
|
|
|
@$label.html value
|
|
|
+ @_width()
|
|
|
@options.labelText = value
|
|
|
@$element
|
|
|
|
|
|
+ handleWidth: (value) ->
|
|
|
+ return @options.handleWidth if typeof value is "undefined"
|
|
|
+
|
|
|
+ @options.handleWidth = value
|
|
|
+ @_width()
|
|
|
+ @$element
|
|
|
+
|
|
|
+ labelWidth: (value) ->
|
|
|
+ return @options.labelWidth if typeof value is "undefined"
|
|
|
+
|
|
|
+ @options.labelWidth = value
|
|
|
+ @_width()
|
|
|
+ @$element
|
|
|
+
|
|
|
baseClass: (value) ->
|
|
|
@options.baseClass
|
|
|
|
|
|
wrapperClass: (value) ->
|
|
|
- return @options.wrapperClass if typeof value is "undefined"
|
|
|
+ return @options.wrapperClass if typeof value is "undefined"
|
|
|
|
|
|
value = $.fn.bootstrapSwitch.defaults.wrapperClass unless value
|
|
|
|
|
|
@@ -247,13 +281,13 @@ do ($ = window.jQuery, window) ->
|
|
|
@$element
|
|
|
|
|
|
radioAllOff: (value) ->
|
|
|
- return @options.radioAllOff if typeof value is "undefined"
|
|
|
+ return @options.radioAllOff if typeof value is "undefined"
|
|
|
|
|
|
@options.radioAllOff = value
|
|
|
@$element
|
|
|
|
|
|
onInit: (value) ->
|
|
|
- return @options.onInit if typeof value is "undefined"
|
|
|
+ return @options.onInit if typeof value is "undefined"
|
|
|
|
|
|
value = $.fn.bootstrapSwitch.defaults.onInit unless value
|
|
|
|
|
|
@@ -261,7 +295,7 @@ do ($ = window.jQuery, window) ->
|
|
|
@$element
|
|
|
|
|
|
onSwitchChange: (value) ->
|
|
|
- return @options.onSwitchChange if typeof value is "undefined"
|
|
|
+ return @options.onSwitchChange if typeof value is "undefined"
|
|
|
|
|
|
value = $.fn.bootstrapSwitch.defaults.onSwitchChange unless value
|
|
|
|
|
|
@@ -276,20 +310,64 @@ do ($ = window.jQuery, window) ->
|
|
|
@$element.unwrap().unwrap().off(".bootstrapSwitch").removeData "bootstrap-switch"
|
|
|
@$element
|
|
|
|
|
|
+ _width: ->
|
|
|
+ $handles = @$on.add(@$off)
|
|
|
+
|
|
|
+ # remove width from inline style
|
|
|
+ $handles.add(@$label).css("width", "")
|
|
|
+
|
|
|
+ # save handleWidth for further label width calculation check
|
|
|
+ handleWidth = if @options.handleWidth is "auto"
|
|
|
+ then Math.max @$on.width(), @$off.width()
|
|
|
+ else @options.handleWidth
|
|
|
+
|
|
|
+ # set handles width
|
|
|
+ $handles.width handleWidth
|
|
|
+
|
|
|
+ # set label width
|
|
|
+ @$label.width (index, width) =>
|
|
|
+ return @options.labelWidth if @options.labelWidth isnt "auto"
|
|
|
+
|
|
|
+ if width < handleWidth then handleWidth else width
|
|
|
+
|
|
|
+ # get handle and label widths
|
|
|
+ @_handleWidth = @$on.outerWidth()
|
|
|
+ @_labelWidth = @$label.outerWidth()
|
|
|
+
|
|
|
+ # set container and wrapper widths
|
|
|
+ @$container.width (@_handleWidth * 2) + @_labelWidth
|
|
|
+ @$wrapper.width @_handleWidth + @_labelWidth
|
|
|
+
|
|
|
+ _containerPosition: (state = @options.state, callback) ->
|
|
|
+ @$container
|
|
|
+ .css "margin-left", =>
|
|
|
+ values = [0, "-#{@_handleWidth}px"]
|
|
|
+
|
|
|
+ return "-#{@_handleWidth / 2}px" if @options.indeterminate
|
|
|
+
|
|
|
+ if state
|
|
|
+ return if @options.inverse then values[1] else values[0]
|
|
|
+ else
|
|
|
+ return if @options.inverse then values[0] else values[1]
|
|
|
+
|
|
|
+ return unless callback
|
|
|
+
|
|
|
+ @$container
|
|
|
+ .one($.support.transition.end, callback)
|
|
|
+ .emulateTransitionEnd 500
|
|
|
+
|
|
|
_elementHandlers: ->
|
|
|
@$element.on
|
|
|
"change.bootstrapSwitch": (e, skip) =>
|
|
|
e.preventDefault()
|
|
|
e.stopImmediatePropagation()
|
|
|
|
|
|
- checked = @$element.is ":checked"
|
|
|
-
|
|
|
- return if checked is @options.state
|
|
|
+ state = @$element.is ":checked"
|
|
|
+ @_containerPosition state
|
|
|
+ return if state is @options.state
|
|
|
|
|
|
- @options.state = checked
|
|
|
- @$wrapper
|
|
|
- .removeClass(if checked then "#{@options.baseClass}-off" else "#{@options.baseClass}-on")
|
|
|
- .addClass if checked then "#{@options.baseClass}-on" else "#{@options.baseClass}-off"
|
|
|
+ @options.state = state
|
|
|
+ @$wrapper.toggleClass("#{@options.baseClass}-off").toggleClass "#{@options.baseClass}-on"
|
|
|
|
|
|
unless skip
|
|
|
if @$element.is ":radio"
|
|
|
@@ -297,7 +375,7 @@ do ($ = window.jQuery, window) ->
|
|
|
.not(@$element)
|
|
|
.prop("checked", false)
|
|
|
.trigger "change.bootstrapSwitch", true
|
|
|
- @$element.trigger "switchChange.bootstrapSwitch", [checked]
|
|
|
+ @$element.trigger "switchChange.bootstrapSwitch", [state]
|
|
|
|
|
|
"focus.bootstrapSwitch": (e) =>
|
|
|
e.preventDefault()
|
|
|
@@ -308,7 +386,7 @@ do ($ = window.jQuery, window) ->
|
|
|
@$wrapper.removeClass "#{@options.baseClass}-focused"
|
|
|
|
|
|
"keydown.bootstrapSwitch": (e) =>
|
|
|
- return if not e.which or @options.disabled or @options.readonly
|
|
|
+ return if not e.which or @options.disabled or @options.readonly
|
|
|
|
|
|
switch e.which
|
|
|
when 37
|
|
|
@@ -333,49 +411,41 @@ do ($ = window.jQuery, window) ->
|
|
|
|
|
|
_labelHandlers: ->
|
|
|
@$label.on
|
|
|
- "mousemove.bootstrapSwitch touchmove.bootstrapSwitch": (e) =>
|
|
|
- return unless @isLabelDragging
|
|
|
+ "mousedown.bootstrapSwitch touchstart.bootstrapSwitch": (e) =>
|
|
|
+ return if @_dragStart or @options.disabled or @options.readonly
|
|
|
|
|
|
e.preventDefault()
|
|
|
|
|
|
- @isLabelDragged = true
|
|
|
- pageX = e.pageX or e.originalEvent.touches[0].pageX
|
|
|
- percent = ((pageX - @$wrapper.offset().left) / @$wrapper.width()) * 100
|
|
|
- left = 25
|
|
|
- right = 75
|
|
|
-
|
|
|
- @$wrapper.removeClass "#{@options.baseClass}-animate" if @options.animate
|
|
|
- if percent < left
|
|
|
- percent = left
|
|
|
- else if percent > right
|
|
|
- percent = right
|
|
|
-
|
|
|
- @$container.css "margin-left", "#{percent - right}%"
|
|
|
+ @_dragStart = (e.pageX or e.originalEvent.touches[0].pageX) - parseInt @$container.css("margin-left"), 10
|
|
|
+ @$wrapper.removeClass "#{@options.baseClass}-animate" if @options.animate
|
|
|
@$element.trigger "focus.bootstrapSwitch"
|
|
|
|
|
|
- "mousedown.bootstrapSwitch touchstart.bootstrapSwitch": (e) =>
|
|
|
- return if @isLabelDragging or @options.disabled or @options.readonly
|
|
|
+ "mousemove.bootstrapSwitch touchmove.bootstrapSwitch": (e) =>
|
|
|
+ return unless @_dragStart?
|
|
|
|
|
|
e.preventDefault()
|
|
|
|
|
|
- @isLabelDragging = true
|
|
|
- @$element.trigger "focus.bootstrapSwitch"
|
|
|
+ difference = (e.pageX or e.originalEvent.touches[0].pageX) - @_dragStart
|
|
|
+ return if difference < -@_handleWidth or difference > 0
|
|
|
+
|
|
|
+ @_dragEnd = difference
|
|
|
+ @$container.css "margin-left", "#{@_dragEnd}px"
|
|
|
|
|
|
"mouseup.bootstrapSwitch touchend.bootstrapSwitch": (e) =>
|
|
|
- return unless @isLabelDragging
|
|
|
+ return unless @_dragStart
|
|
|
|
|
|
e.preventDefault()
|
|
|
|
|
|
- if @isLabelDragged
|
|
|
- state = parseInt(@$container.css("margin-left"), 10) > -(@$container.width() / 6)
|
|
|
+ @$wrapper.addClass "#{@options.baseClass}-animate" if @options.animate
|
|
|
+ if @_dragEnd
|
|
|
+ state = @_dragEnd > -(@_handleWidth / 2)
|
|
|
|
|
|
- @isLabelDragged = false
|
|
|
+ @_dragEnd = false
|
|
|
@state if @options.inverse then not state else state
|
|
|
- @$wrapper.addClass "#{@options.baseClass}-animate" if @options.animate
|
|
|
- @$container.css "margin-left", ""
|
|
|
else
|
|
|
@state not @options.state
|
|
|
- @isLabelDragging = false
|
|
|
+
|
|
|
+ @_dragStart = false
|
|
|
|
|
|
"mouseleave.bootstrapSwitch": (e) =>
|
|
|
@$label.trigger "mouseup.bootstrapSwitch"
|
|
|
@@ -383,7 +453,7 @@ do ($ = window.jQuery, window) ->
|
|
|
_formHandler: ->
|
|
|
$form = @$element.closest "form"
|
|
|
|
|
|
- return if $form.data "bootstrap-switch"
|
|
|
+ return if $form.data "bootstrap-switch"
|
|
|
|
|
|
$form
|
|
|
.on "reset.bootstrapSwitch", ->
|
|
|
@@ -396,7 +466,7 @@ do ($ = window.jQuery, window) ->
|
|
|
.data "bootstrap-switch", true
|
|
|
|
|
|
_getClasses: (classes) ->
|
|
|
- return ["#{@options.baseClass}-#{classes}"] unless $.isArray classes
|
|
|
+ return ["#{@options.baseClass}-#{classes}"] unless $.isArray classes
|
|
|
|
|
|
cls = []
|
|
|
for c in classes
|
|
|
@@ -409,7 +479,7 @@ do ($ = window.jQuery, window) ->
|
|
|
$this = $ @
|
|
|
data = $this.data "bootstrap-switch"
|
|
|
|
|
|
- $this.data "bootstrap-switch", data = new BootstrapSwitch @, option unless data
|
|
|
+ $this.data "bootstrap-switch", data = new BootstrapSwitch @, option unless data
|
|
|
ret = data[option].apply data, args if typeof option is "string"
|
|
|
ret
|
|
|
|
|
|
@@ -428,6 +498,8 @@ do ($ = window.jQuery, window) ->
|
|
|
onText: "ON"
|
|
|
offText: "OFF"
|
|
|
labelText: " "
|
|
|
+ handleWidth: "auto"
|
|
|
+ labelWidth: "auto"
|
|
|
baseClass: "bootstrap-switch"
|
|
|
wrapperClass: "wrapper"
|
|
|
onInit: ->
|
Emanuele Marchi