|
@ -1,5 +1,5 @@ |
|
|
// Generated by CoffeeScript 1.6.2
|
|
|
// Generated by CoffeeScript 1.6.2
|
|
|
/*eslint quotes: ["error", "single"]*/ |
|
|
|
|
|
|
|
|
/*eslint quotes: ["error", "double"]*/ |
|
|
/*eslint-env es6*/ |
|
|
/*eslint-env es6*/ |
|
|
|
|
|
|
|
|
(function() { |
|
|
(function() { |
|
@ -36,8 +36,10 @@ |
|
|
this.elem = $(elem); |
|
|
this.elem = $(elem); |
|
|
opts = $.extend({}, iOSCheckbox.defaults, options); |
|
|
opts = $.extend({}, iOSCheckbox.defaults, options); |
|
|
for (key in opts) { |
|
|
for (key in opts) { |
|
|
value = opts[key]; |
|
|
|
|
|
this[key] = value; |
|
|
|
|
|
|
|
|
if ({}.hasOwnProperty.call(opts, key)) { |
|
|
|
|
|
value = opts[key]; |
|
|
|
|
|
this[key] = value; |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
this.elem.data(this.dataName, this); |
|
|
this.elem.data(this.dataName, this); |
|
|
this.wrapCheckboxWithDivs(); |
|
|
this.wrapCheckboxWithDivs(); |
|
@ -48,27 +50,27 @@ |
|
|
|
|
|
|
|
|
iOSCheckbox.prototype.calculateDimensions = function() { |
|
|
iOSCheckbox.prototype.calculateDimensions = function() { |
|
|
if (this.resizeHandle) { |
|
|
if (this.resizeHandle) { |
|
|
this.optionallyResize('handle'); |
|
|
|
|
|
|
|
|
this.optionallyResize("handle"); |
|
|
} |
|
|
} |
|
|
if (this.resizeContainer) { |
|
|
if (this.resizeContainer) { |
|
|
this.optionallyResize('container'); |
|
|
|
|
|
|
|
|
this.optionallyResize("container"); |
|
|
} |
|
|
} |
|
|
return this.initialPosition(); |
|
|
return this.initialPosition(); |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
iOSCheckbox.prototype.isDisabled = function() { |
|
|
iOSCheckbox.prototype.isDisabled = function() { |
|
|
return this.elem.is(':disabled'); |
|
|
|
|
|
|
|
|
return this.elem.is(":disabled"); |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
iOSCheckbox.prototype.wrapCheckboxWithDivs = function() { |
|
|
iOSCheckbox.prototype.wrapCheckboxWithDivs = function() { |
|
|
this.elem.wrap("<div class='" + this.containerClass + "' />"); |
|
|
this.elem.wrap("<div class='" + this.containerClass + "' />"); |
|
|
this.container = this.elem.parent(); |
|
|
this.container = this.elem.parent(); |
|
|
this.offLabel = $("<label class='" + this.labelOffClass + "'>\n <span>" + this.uncheckedLabel + "</span>\n</label>").appendTo(this.container); |
|
|
this.offLabel = $("<label class='" + this.labelOffClass + "'>\n <span>" + this.uncheckedLabel + "</span>\n</label>").appendTo(this.container); |
|
|
this.offSpan = this.offLabel.children('span'); |
|
|
|
|
|
|
|
|
this.offSpan = this.offLabel.children("span"); |
|
|
this.onLabel = $("<label class='" + this.labelOnClass + "'>\n <span>" + this.checkedLabel + "</span>\n</label>").appendTo(this.container); |
|
|
this.onLabel = $("<label class='" + this.labelOnClass + "'>\n <span>" + this.checkedLabel + "</span>\n</label>").appendTo(this.container); |
|
|
this.onBorder = $("<div class='iPhoneCheckBorderOn'</div>").appendTo(this.container); |
|
|
this.onBorder = $("<div class='iPhoneCheckBorderOn'</div>").appendTo(this.container); |
|
|
this.offBorder = $("<div class='iPhoneCheckBorderOff'</div>").appendTo(this.container); |
|
|
this.offBorder = $("<div class='iPhoneCheckBorderOff'</div>").appendTo(this.container); |
|
|
this.onSpan = this.onLabel.children('span'); |
|
|
|
|
|
|
|
|
this.onSpan = this.onLabel.children("span"); |
|
|
this.handle = $("<div class='" + this.handleClass + "'></div>").appendTo(this.container); |
|
|
this.handle = $("<div class='" + this.handleClass + "'></div>").appendTo(this.container); |
|
|
this.handleCenter = $("<div class='" + this.handleCenterClass + "'></div>").appendTo(this.handle); |
|
|
this.handleCenter = $("<div class='" + this.handleCenterClass + "'></div>").appendTo(this.handle); |
|
|
this.handleRight = $("<div class='" + this.handleRightClass + "'></div>").appendTo(this.handle); |
|
|
this.handleRight = $("<div class='" + this.handleRightClass + "'></div>").appendTo(this.handle); |
|
@ -92,12 +94,12 @@ |
|
|
iOSCheckbox.prototype.optionallyResize = function(mode) { |
|
|
iOSCheckbox.prototype.optionallyResize = function(mode) { |
|
|
var newWidth, offLabelWidth, offSpan, onLabelWidth, onSpan; |
|
|
var newWidth, offLabelWidth, offSpan, onLabelWidth, onSpan; |
|
|
|
|
|
|
|
|
onSpan = this.onLabel.find('span'); |
|
|
|
|
|
|
|
|
onSpan = this.onLabel.find("span"); |
|
|
onLabelWidth = this._getDimension(onSpan, "width"); |
|
|
onLabelWidth = this._getDimension(onSpan, "width"); |
|
|
onLabelWidth += parseInt(onSpan.css('padding-left'), 10); |
|
|
|
|
|
offSpan = this.offLabel.find('span'); |
|
|
|
|
|
|
|
|
onLabelWidth += parseInt(onSpan.css("padding-left"), 10); |
|
|
|
|
|
offSpan = this.offLabel.find("span"); |
|
|
offLabelWidth = this._getDimension(offSpan, "width"); |
|
|
offLabelWidth = this._getDimension(offSpan, "width"); |
|
|
offLabelWidth += parseInt(offSpan.css('padding-right'), 10); |
|
|
|
|
|
|
|
|
offLabelWidth += parseInt(offSpan.css("padding-right"), 10); |
|
|
if (mode === "container") { |
|
|
if (mode === "container") { |
|
|
newWidth = onLabelWidth > offLabelWidth ? onLabelWidth : offLabelWidth; |
|
|
newWidth = onLabelWidth > offLabelWidth ? onLabelWidth : offLabelWidth; |
|
|
newWidth += this._getDimension(this.handle, "width") + this.handleMargin; |
|
|
newWidth += this._getDimension(this.handle, "width") + this.handleMargin; |
|
@ -125,7 +127,7 @@ |
|
|
x = event.pageX || event.originalEvent.changedTouches[0].pageX; |
|
|
x = event.pageX || event.originalEvent.changedTouches[0].pageX; |
|
|
iOSCheckbox.currentlyClicking = this.handle; |
|
|
iOSCheckbox.currentlyClicking = this.handle; |
|
|
iOSCheckbox.dragStartPosition = x; |
|
|
iOSCheckbox.dragStartPosition = x; |
|
|
return iOSCheckbox.handleLeftOffset = parseInt(this.handle.css('left'), 10) || 0; |
|
|
|
|
|
|
|
|
return iOSCheckbox.handleLeftOffset = parseInt(this.handle.css("left"), 10) || 0; |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
iOSCheckbox.prototype.onDragMove = function(event, x) { |
|
|
iOSCheckbox.prototype.onDragMove = function(event, x) { |
|
@ -167,14 +169,14 @@ |
|
|
} |
|
|
} |
|
|
if (iOSCheckbox.dragging) { |
|
|
if (iOSCheckbox.dragging) { |
|
|
p = (x - iOSCheckbox.dragStartPosition) / this.rightSide; |
|
|
p = (x - iOSCheckbox.dragStartPosition) / this.rightSide; |
|
|
this.elem.prop('checked', p >= 0.5).change(); |
|
|
|
|
|
|
|
|
this.elem.prop("checked", p >= 0.5).change(); |
|
|
} else { |
|
|
} else { |
|
|
this.elem.prop('checked', !this.elem.prop('checked')).change(); |
|
|
|
|
|
|
|
|
this.elem.prop("checked", !this.elem.prop("checked")).change(); |
|
|
} |
|
|
} |
|
|
iOSCheckbox.currentlyClicking = null; |
|
|
iOSCheckbox.currentlyClicking = null; |
|
|
iOSCheckbox.dragging = null; |
|
|
iOSCheckbox.dragging = null; |
|
|
if (typeof this.onChange === "function") { |
|
|
if (typeof this.onChange === "function") { |
|
|
this.onChange(this.elem, this.elem.prop('checked')); |
|
|
|
|
|
|
|
|
this.onChange(this.elem, this.elem.prop("checked")); |
|
|
} |
|
|
} |
|
|
return this.didChange(); |
|
|
return this.didChange(); |
|
|
}; |
|
|
}; |
|
@ -184,7 +186,7 @@ |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
iOSCheckbox.prototype.didChange = function() { |
|
|
iOSCheckbox.prototype.didChange = function() { |
|
|
var new_left; |
|
|
|
|
|
|
|
|
var newLeft; |
|
|
|
|
|
|
|
|
if (this.isDisabled()) { |
|
|
if (this.isDisabled()) { |
|
|
this.container.addClass(this.disabledClass); |
|
|
this.container.addClass(this.disabledClass); |
|
@ -192,18 +194,18 @@ |
|
|
} else { |
|
|
} else { |
|
|
this.container.removeClass(this.disabledClass); |
|
|
this.container.removeClass(this.disabledClass); |
|
|
} |
|
|
} |
|
|
new_left = this.elem.prop('checked') ? this.rightSide + 2 : 0; |
|
|
|
|
|
|
|
|
newLeft = this.elem.prop("checked") ? this.rightSide + 2 : 0; |
|
|
this.handle.animate({ |
|
|
this.handle.animate({ |
|
|
left: new_left |
|
|
|
|
|
|
|
|
left: newLeft |
|
|
}, this.duration); |
|
|
}, this.duration); |
|
|
this.onLabel.animate({ |
|
|
this.onLabel.animate({ |
|
|
width: new_left + this.handleRadius |
|
|
|
|
|
|
|
|
width: newLeft + this.handleRadius |
|
|
}, this.duration); |
|
|
}, this.duration); |
|
|
this.offSpan.animate({ |
|
|
this.offSpan.animate({ |
|
|
marginRight: -new_left |
|
|
|
|
|
|
|
|
marginRight: - newLeft |
|
|
}, this.duration); |
|
|
}, this.duration); |
|
|
return this.onSpan.animate({ |
|
|
return this.onSpan.animate({ |
|
|
marginLeft: new_left - this.rightSide |
|
|
|
|
|
|
|
|
marginLeft: newLeft - this.rightSide |
|
|
}, this.duration); |
|
|
}, this.duration); |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
@ -216,16 +218,16 @@ |
|
|
}; |
|
|
}; |
|
|
localMouseUp = function(event) { |
|
|
localMouseUp = function(event) { |
|
|
self.onGlobalUp.apply(self, arguments); |
|
|
self.onGlobalUp.apply(self, arguments); |
|
|
$(document).unbind('mousemove touchmove', localMouseMove); |
|
|
|
|
|
return $(document).unbind('mouseup touchend', localMouseUp); |
|
|
|
|
|
|
|
|
$(document).unbind("mousemove touchmove", localMouseMove); |
|
|
|
|
|
return $(document).unbind("mouseup touchend", localMouseUp); |
|
|
}; |
|
|
}; |
|
|
this.elem.change(function() { |
|
|
this.elem.change(function() { |
|
|
return self.refresh(); |
|
|
return self.refresh(); |
|
|
}); |
|
|
}); |
|
|
return this.container.bind('mousedown touchstart', function(event) { |
|
|
|
|
|
|
|
|
return this.container.bind("mousedown touchstart", function(event) { |
|
|
self.onMouseDown.apply(self, arguments); |
|
|
self.onMouseDown.apply(self, arguments); |
|
|
$(document).bind('mousemove touchmove', localMouseMove); |
|
|
|
|
|
return $(document).bind('mouseup touchend', localMouseUp); |
|
|
|
|
|
|
|
|
$(document).bind("mousemove touchmove", localMouseMove); |
|
|
|
|
|
return $(document).bind("mouseup touchend", localMouseUp); |
|
|
}); |
|
|
}); |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
@ -244,7 +246,7 @@ |
|
|
offset -= 3; |
|
|
offset -= 3; |
|
|
} |
|
|
} |
|
|
this.rightSide = containerWidth - this._getDimension(this.handle, "width") - offset; |
|
|
this.rightSide = containerWidth - this._getDimension(this.handle, "width") - offset; |
|
|
if (this.elem.is(':checked')) { |
|
|
|
|
|
|
|
|
if (this.elem.is(":checked")) { |
|
|
this.handle.css({ |
|
|
this.handle.css({ |
|
|
left: this.rightSide |
|
|
left: this.rightSide |
|
|
}); |
|
|
}); |
|
@ -295,17 +297,17 @@ |
|
|
|
|
|
|
|
|
iOSCheckbox.defaults = { |
|
|
iOSCheckbox.defaults = { |
|
|
duration: 200, |
|
|
duration: 200, |
|
|
checkedLabel: 'ON', |
|
|
|
|
|
uncheckedLabel: 'OFF', |
|
|
|
|
|
|
|
|
checkedLabel: "ON", |
|
|
|
|
|
uncheckedLabel: "OFF", |
|
|
resizeHandle: true, |
|
|
resizeHandle: true, |
|
|
resizeContainer: true, |
|
|
resizeContainer: true, |
|
|
disabledClass: 'iPhoneCheckDisabled', |
|
|
|
|
|
containerClass: 'iPhoneCheckContainer', |
|
|
|
|
|
labelOnClass: 'iPhoneCheckLabelOn', |
|
|
|
|
|
labelOffClass: 'iPhoneCheckLabelOff', |
|
|
|
|
|
handleClass: 'iPhoneCheckHandle', |
|
|
|
|
|
handleCenterClass: 'iPhoneCheckHandleCenter', |
|
|
|
|
|
handleRightClass: 'iPhoneCheckHandleRight', |
|
|
|
|
|
|
|
|
disabledClass: "iPhoneCheckDisabled", |
|
|
|
|
|
containerClass: "iPhoneCheckContainer", |
|
|
|
|
|
labelOnClass: "iPhoneCheckLabelOn", |
|
|
|
|
|
labelOffClass: "iPhoneCheckLabelOff", |
|
|
|
|
|
handleClass: "iPhoneCheckHandle", |
|
|
|
|
|
handleCenterClass: "iPhoneCheckHandleCenter", |
|
|
|
|
|
handleRightClass: "iPhoneCheckHandleRight", |
|
|
dragThreshold: 5, |
|
|
dragThreshold: 5, |
|
|
handleMargin: 15, |
|
|
handleMargin: 15, |
|
|
handleRadius: 4, |
|
|
handleRadius: 4, |
|
@ -325,7 +327,7 @@ |
|
|
|
|
|
|
|
|
args = 1 <= arguments.length ? __slice.call(arguments, 0) : []; |
|
|
args = 1 <= arguments.length ? __slice.call(arguments, 0) : []; |
|
|
dataName = (_ref = (_ref1 = args[0]) != null ? _ref1.dataName : void 0) != null ? _ref : iOSCheckbox.defaults.dataName; |
|
|
dataName = (_ref = (_ref1 = args[0]) != null ? _ref1.dataName : void 0) != null ? _ref : iOSCheckbox.defaults.dataName; |
|
|
_ref2 = this.filter(':checkbox'); |
|
|
|
|
|
|
|
|
_ref2 = this.filter(":checkbox"); |
|
|
for (_i = 0, _len = _ref2.length; _i < _len; _i++) { |
|
|
for (_i = 0, _len = _ref2.length; _i < _len; _i++) { |
|
|
checkbox = _ref2[_i]; |
|
|
checkbox = _ref2[_i]; |
|
|
existingControl = $(checkbox).data(dataName); |
|
|
existingControl = $(checkbox).data(dataName); |
|
@ -349,14 +351,14 @@ |
|
|
} |
|
|
} |
|
|
opts = $.extend({}, options, { |
|
|
opts = $.extend({}, options, { |
|
|
resizeHandle: false, |
|
|
resizeHandle: false, |
|
|
disabledClass: 'iOSCheckDisabled', |
|
|
|
|
|
containerClass: 'iOSCheckContainer', |
|
|
|
|
|
labelOnClass: 'iOSCheckLabelOn', |
|
|
|
|
|
labelOffClass: 'iOSCheckLabelOff', |
|
|
|
|
|
handleClass: 'iOSCheckHandle', |
|
|
|
|
|
handleCenterClass: 'iOSCheckHandleCenter', |
|
|
|
|
|
handleRightClass: 'iOSCheckHandleRight', |
|
|
|
|
|
dataName: 'iOSCheckbox' |
|
|
|
|
|
|
|
|
disabledClass: "iOSCheckDisabled", |
|
|
|
|
|
containerClass: "iOSCheckContainer", |
|
|
|
|
|
labelOnClass: "iOSCheckLabelOn", |
|
|
|
|
|
labelOffClass: "iOSCheckLabelOff", |
|
|
|
|
|
handleClass: "iOSCheckHandle", |
|
|
|
|
|
handleCenterClass: "iOSCheckHandleCenter", |
|
|
|
|
|
handleRightClass: "iOSCheckHandleRight", |
|
|
|
|
|
dataName: "iOSCheckbox" |
|
|
}); |
|
|
}); |
|
|
return this.iphoneStyle(opts); |
|
|
return this.iphoneStyle(opts); |
|
|
}; |
|
|
}; |
|
|