diff --git a/webif/html/lib/jquery.plugin/iphone-style-checkboxes/images/ios-style-checkboxes/off.png b/webif/html/lib/jquery.plugin/iphone-style-checkboxes/images/ios-style-checkboxes/off.png new file mode 100644 index 0000000..f414051 Binary files /dev/null and b/webif/html/lib/jquery.plugin/iphone-style-checkboxes/images/ios-style-checkboxes/off.png differ diff --git a/webif/html/lib/jquery.plugin/iphone-style-checkboxes/images/ios-style-checkboxes/on.png b/webif/html/lib/jquery.plugin/iphone-style-checkboxes/images/ios-style-checkboxes/on.png new file mode 100644 index 0000000..94425e5 Binary files /dev/null and b/webif/html/lib/jquery.plugin/iphone-style-checkboxes/images/ios-style-checkboxes/on.png differ diff --git a/webif/html/lib/jquery.plugin/iphone-style-checkboxes/images/ios-style-checkboxes/slider.png b/webif/html/lib/jquery.plugin/iphone-style-checkboxes/images/ios-style-checkboxes/slider.png new file mode 100644 index 0000000..80e05ff Binary files /dev/null and b/webif/html/lib/jquery.plugin/iphone-style-checkboxes/images/ios-style-checkboxes/slider.png differ diff --git a/webif/html/lib/jquery.plugin/iphone-style-checkboxes/images/ios-style-checkboxes/slider_center.png b/webif/html/lib/jquery.plugin/iphone-style-checkboxes/images/ios-style-checkboxes/slider_center.png new file mode 100644 index 0000000..310fc8c Binary files /dev/null and b/webif/html/lib/jquery.plugin/iphone-style-checkboxes/images/ios-style-checkboxes/slider_center.png differ diff --git a/webif/html/lib/jquery.plugin/iphone-style-checkboxes/images/ios-style-checkboxes/slider_left.png b/webif/html/lib/jquery.plugin/iphone-style-checkboxes/images/ios-style-checkboxes/slider_left.png new file mode 100644 index 0000000..51576ce Binary files /dev/null and b/webif/html/lib/jquery.plugin/iphone-style-checkboxes/images/ios-style-checkboxes/slider_left.png differ diff --git a/webif/html/lib/jquery.plugin/iphone-style-checkboxes/images/ios-style-checkboxes/slider_right.png b/webif/html/lib/jquery.plugin/iphone-style-checkboxes/images/ios-style-checkboxes/slider_right.png new file mode 100644 index 0000000..447d94a Binary files /dev/null and b/webif/html/lib/jquery.plugin/iphone-style-checkboxes/images/ios-style-checkboxes/slider_right.png differ diff --git a/webif/html/lib/jquery.plugin/iphone-style-checkboxes/images/iphone-style-checkboxes b/webif/html/lib/jquery.plugin/iphone-style-checkboxes/images/iphone-style-checkboxes new file mode 120000 index 0000000..253829e --- /dev/null +++ b/webif/html/lib/jquery.plugin/iphone-style-checkboxes/images/iphone-style-checkboxes @@ -0,0 +1 @@ +ios-style-checkboxes \ No newline at end of file diff --git a/webif/html/lib/jquery.plugin/iphone-style-checkboxes/iphone-style-checkboxes.css b/webif/html/lib/jquery.plugin/iphone-style-checkboxes/iphone-style-checkboxes.css new file mode 100644 index 0000000..6768f5e --- /dev/null +++ b/webif/html/lib/jquery.plugin/iphone-style-checkboxes/iphone-style-checkboxes.css @@ -0,0 +1,146 @@ +.iPhoneCheckContainer { + -webkit-transform:translate3d(0,0,0); + position: relative; + height: 27px; + cursor: pointer; + overflow: hidden; } + .iPhoneCheckContainer input { + position: absolute; + top: 5px; + left: 30px; + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); + opacity: 0; } + .iPhoneCheckContainer label { + white-space: nowrap; + font-size: 17px; + line-height: 17px; + font-weight: bold; + font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; + cursor: pointer; + display: block; + height: 27px; + position: absolute; + width: auto; + top: 0; + padding-top: 5px; + overflow: hidden; } + .iPhoneCheckContainer, .iPhoneCheckContainer label { + user-select: none; + -moz-user-select: none; + -khtml-user-select: none; } + +.iPhoneCheckDisabled { + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); + opacity: 0.5; } + +label.iPhoneCheckLabelOn { + color: white; + background: url('images/iphone-style-checkboxes/on.png?1284697268') no-repeat; + text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.6); + left: 0; + padding-top: 5px; } + label.iPhoneCheckLabelOn span { + padding-left: 8px; } +label.iPhoneCheckLabelOff { + color: #8b8b8b; + background: url('images/iphone-style-checkboxes/off.png?1284697268') no-repeat right 0; + text-shadow: 0px 0px 2px rgba(255, 255, 255, 0.6); + text-align: right; + right: 0; } + label.iPhoneCheckLabelOff span { + padding-right: 8px; } + +.iPhoneCheckHandle { + display: block; + height: 27px; + cursor: pointer; + position: absolute; + top: 0; + left: 0; + width: 0; + background: url('images/iphone-style-checkboxes/slider_left.png?1284697268') no-repeat; + padding-left: 3px; } + +.iPhoneCheckHandleRight { + height: 100%; + width: 100%; + padding-right: 3px; + background: url('images/iphone-style-checkboxes/slider_right.png?1284697268') no-repeat right 0; } + +.iPhoneCheckHandleCenter { + height: 100%; + width: 100%; + background: url('images/iphone-style-checkboxes/slider_center.png?1284697268'); } + +.iOSCheckContainer { + position: relative; + height: 27px; + cursor: pointer; + overflow: hidden; } + .iOSCheckContainer input { + position: absolute; + top: 5px; + left: 30px; + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); + opacity: 0; } + .iOSCheckContainer label { + white-space: nowrap; + font-size: 17px; + line-height: 17px; + font-weight: bold; + font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; + cursor: pointer; + display: block; + height: 27px; + position: absolute; + width: auto; + top: 0; + padding-top: 5px; + overflow: hidden; } + .iOSCheckContainer, .iOSCheckContainer label { + user-select: none; + -moz-user-select: none; + -khtml-user-select: none; } + +.iOSCheckDisabled { + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); + opacity: 0.5; } + +label.iOSCheckLabelOn { + color: white; + background: url('images/ios-style-checkboxes/on.png?1284697268') no-repeat; + text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.6); + left: 0; + padding-top: 5px; } + label.iOSCheckLabelOn span { + padding-left: 8px; } +label.iOSCheckLabelOff { + color: #8b8b8b; + background: url('images/ios-style-checkboxes/off.png?1284697268') no-repeat right 0; + text-shadow: 0px 0px 2px rgba(255, 255, 255, 0.6); + text-align: right; + right: 0; } + label.iOSCheckLabelOff span { + padding-right: 8px; } + +.iOSCheckHandle { + display: block; + height: 27px; + cursor: pointer; + position: absolute; + top: 0; + left: 0; + width: 0; + background: url('images/ios-style-checkboxes/slider_left.png?1284697268') no-repeat; + padding-left: 3px; } + +.iOSCheckHandleRight { + height: 100%; + width: 100%; + padding-right: 3px; + background: url('images/ios-style-checkboxes/slider_right.png?1284697268') no-repeat right 0; } + +.iOSCheckHandleCenter { + height: 100%; + width: 100%; + background: url('images/ios-style-checkboxes/slider_center.png?1284697268'); } diff --git a/webif/html/lib/jquery.plugin/iphone-style-checkboxes/iphone-style-checkboxes.js b/webif/html/lib/jquery.plugin/iphone-style-checkboxes/iphone-style-checkboxes.js new file mode 100644 index 0000000..01b4888 --- /dev/null +++ b/webif/html/lib/jquery.plugin/iphone-style-checkboxes/iphone-style-checkboxes.js @@ -0,0 +1,238 @@ +/*! +// iPhone-style Checkboxes jQuery plugin +// Copyright Thomas Reynolds, licensed GPL & MIT +*/ +;(function($, iphoneStyle) { + +$.fn._width = function() +{ + if ($.fn.actual != null) + return $(this).actual('width'); + return $(this).width(); +}; + +// Constructor +$[iphoneStyle] = function(elem, options) { + this.$elem = $(elem); + + // Import options into instance variables + var obj = this; + $.each(options, function(key, value) { + obj[key] = value; + }); + + // Initialize the control + this.wrapCheckboxWithDivs(); + this.attachEvents(); + this.disableTextSelection(); + + if (this.resizeHandle) { this.optionallyResize('handle'); } + if (this.resizeContainer) { this.optionallyResize('container'); } + + this.initialPosition(); +}; + +$.extend($[iphoneStyle].prototype, { + // Wrap the existing input[type=checkbox] with divs for styling and grab DOM references to the created nodes + wrapCheckboxWithDivs: function() { + this.$elem.wrap('
'); + this.container = this.$elem.parent(); + + this.offLabel = $('').appendTo(this.container); + this.offSpan = this.offLabel.children('span'); + + this.onLabel = $('').appendTo(this.container); + this.onSpan = this.onLabel.children('span'); + + this.handle = $('
' + + '
' + + '
' + + '
' + + '
').appendTo(this.container); + }, + + // Disable IE text selection, other browsers are handled in CSS + disableTextSelection: function() { + return; +// if (!$.browser.msie) { return; } + + // Elements containing text should be unselectable + $.each([this.handle, this.offLabel, this.onLabel, this.container], function() { + $(this).attr("unselectable", "on"); + }); + }, + + // Automatically resize the handle or container + optionallyResize: function(mode) { + var onLabelWidth = this.onLabel._width(); + offLabelWidth = this.offLabel._width(); + + if (mode == 'container') { + var newWidth = (onLabelWidth > offLabelWidth) ? onLabelWidth : offLabelWidth; + newWidth += this.handle._width() + 15; + } else { + var newWidth = (onLabelWidth < offLabelWidth) ? onLabelWidth : offLabelWidth; + } + + this[mode].css({ width: newWidth }); + }, + + attachEvents: function() { + var obj = this; + + // A mousedown anywhere in the control will start tracking for dragging + this.container + .bind('mousedown touchstart', function(event) { + event.preventDefault(); + + if (obj.$elem.is(':disabled')) { return; } + + var x = event.pageX || event.originalEvent.changedTouches[0].pageX; + $[iphoneStyle].currentlyClicking = obj.handle; + $[iphoneStyle].dragStartPosition = x; + $[iphoneStyle].handleLeftOffset = parseInt(obj.handle.css('left'), 10) || 0; + $[iphoneStyle].dragStartedOn = obj.$elem; + }) + + // Utilize event bubbling to handle drag on any element beneath the container + .bind('iPhoneDrag', function(event, x) { + event.preventDefault(); + + if (obj.$elem.is(':disabled')) { return; } + if (obj.$elem != $[iphoneStyle].dragStartedOn) { return; } + + var p = (x + $[iphoneStyle].handleLeftOffset - $[iphoneStyle].dragStartPosition) / obj.rightSide; + if (p < 0) { p = 0; } + if (p > 1) { p = 1; } + obj.handle.css({ left: p * obj.rightSide }); + obj.onLabel.css({ width: p * obj.rightSide + 4 }); + obj.offSpan.css({ marginRight: -p * obj.rightSide }); + obj.onSpan.css({ marginLeft: -(1 - p) * obj.rightSide }); + }) + + // Utilize event bubbling to handle drag end on any element beneath the container + .bind('iPhoneDragEnd', function(event, x) { + if (obj.$elem.is(':disabled')) { return; } + + var checked; + if ($[iphoneStyle].dragging) { + var p = (x - $[iphoneStyle].dragStartPosition) / obj.rightSide; + checked = (p < 0) ? Math.abs(p) < 0.5 : p >= 0.5; + } else { + checked = !obj.$elem.prop('checked'); + } + + obj.$elem.prop('checked', checked); + + $[iphoneStyle].currentlyClicking = null; + $[iphoneStyle].dragging = null; + obj.$elem.change(); + }); + + // Animate when we get a change event + this.$elem.change(function() { + if (obj.$elem.is(':disabled')) { + obj.container.addClass(obj.disabledClass); + return false; + } else { + obj.container.removeClass(obj.disabledClass); + } + + var new_left = obj.$elem.prop('checked') ? obj.rightSide : 0; + + obj.handle.animate({ left: new_left }, obj.duration); + obj.onLabel.animate({ width: new_left + 4 }, obj.duration); + obj.offSpan.animate({ marginRight: -new_left }, obj.duration); + obj.onSpan.animate({ marginLeft: new_left - obj.rightSide }, obj.duration); + }); + }, + + // Setup the control's inital position + initialPosition: function() { + this.offLabel.css({ width: this.container._width() - 5 }); + +// var offset = ($.browser.msie && $.browser.version < 7) ? 3 : 6; + var offset = 6; + this.rightSide = this.container._width() - this.handle._width() - offset; + + if (this.$elem.is(':checked')) { + this.handle.css({ left: this.rightSide }); + this.onLabel.css({ width: this.rightSide + 4 }); + this.offSpan.css({ marginRight: -this.rightSide }); + } else { + this.onLabel.css({ width: 0 }); + this.onSpan.css({ marginLeft: -this.rightSide }); + } + + if (this.$elem.is(':disabled')) { + this.container.addClass(this.disabledClass); + } + } +}); + +// jQuery-specific code +$.fn[iphoneStyle] = function(options) { + var checkboxes = this.filter(':checkbox'); + + // Fail early if we don't have any checkboxes passed in + if (!checkboxes.length) { return this; } + + // Merge options passed in with global defaults + var opt = $.extend({}, $[iphoneStyle].defaults, options); + + checkboxes.each(function() { + $(this).data(iphoneStyle, new $[iphoneStyle](this, opt)); + }); + + if (!$[iphoneStyle].initComplete) { + // As the mouse moves on the page, animate if we are in a drag state + $(document) + .bind('mousemove touchmove', function(event) { + if (!$[iphoneStyle].currentlyClicking) { return; } + event.preventDefault(); + + var x = event.pageX || event.originalEvent.changedTouches[0].pageX; + if (!$[iphoneStyle].dragging && + (Math.abs($[iphoneStyle].dragStartPosition - x) > opt.dragThreshold)) { + $[iphoneStyle].dragging = true; + } + + $(event.target).trigger('iPhoneDrag', [x]); + }) + + // When the mouse comes up, leave drag state + .bind('mouseup touchend', function(event) { + if (!$[iphoneStyle].currentlyClicking) { return; } + event.preventDefault(); + + var x = event.pageX || event.originalEvent.changedTouches[0].pageX; + $($[iphoneStyle].currentlyClicking).trigger('iPhoneDragEnd', [x]); + }); + + $[iphoneStyle].initComplete = true; + } + + return this; +}; // End of $.fn[iphoneStyle] + +$[iphoneStyle].defaults = { + duration: 200, // Time spent during slide animation + checkedLabel: 'ON', // Text content of "on" state + uncheckedLabel: 'OFF', // Text content of "off" state + resizeHandle: true, // Automatically resize the handle to cover either label + resizeContainer: true, // Automatically resize the widget to contain the labels + disabledClass: 'iPhoneCheckDisabled', + containerClass: 'iPhoneCheckContainer', + labelOnClass: 'iPhoneCheckLabelOn', + labelOffClass: 'iPhoneCheckLabelOff', + handleClass: 'iPhoneCheckHandle', + handleCenterClass: 'iPhoneCheckHandleCenter', + handleRightClass: 'iPhoneCheckHandleRight', + dragThreshold: 5 // Pixels that must be dragged for a click to be ignored +}; + +})(jQuery, 'iphoneStyle');