From 252d6bf7f6facea97d90a4ee3a296cc250377904 Mon Sep 17 00:00:00 2001 From: hummypkg Date: Wed, 23 Jul 2014 19:16:58 +0000 Subject: [PATCH] revert iphone-style-checkboxes and re-patch for actual width calculations git-svn-id: file:///root/webif/svn/humax/pkg/src/webif/trunk@2023 2a923420-c742-0410-a762-8d5b09965624 --- CONTROL/control | 2 +- .../iphone-style-checkboxes.js | 566 +++++++----------- webif/html/settings/settings.js | 6 +- 3 files changed, 231 insertions(+), 343 deletions(-) diff --git a/CONTROL/control b/CONTROL/control index 2ea5464..c4dbab9 100644 --- a/CONTROL/control +++ b/CONTROL/control @@ -1,7 +1,7 @@ Package: webif Priority: optional Section: web -Version: 1.0.16 +Version: 1.0.16-1 Architecture: mipsel Maintainer: af123@hummypkg.org.uk Depends: webif-channelicons(>=1.1.12-1),lighttpd(>=1.4.35-2),jim(>=0.75-1),jim-oo,jim-sqlite3(>=0.75),jim-cgi(>=0.7),jim-binary(>=0.75),service-control(>=1.2),busybox(>=1.20.2-1),lsof(>=4.87),epg(>=1.0.13),hmt(>=1.1.21),ssmtp,anacron,trm(>=1.1),openssl-command,nicesplice,id3v2,file,rsvsync(>=1.0.2),webif-charts(>=1.2-1),stripts(>=1.2.5-3),smartmontools,tmenu(>=1.08),ffmpeg,id3v2,multienv(>=1.6),mongoose 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 index 3559614..01b4888 100644 --- 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 @@ -1,350 +1,238 @@ -// Generated by CoffeeScript 1.6.2 -(function() { - var iOSCheckbox, matched, userAgent, - __slice = [].slice; +/*! +// iPhone-style Checkboxes jQuery plugin +// Copyright Thomas Reynolds, licensed GPL & MIT +*/ +;(function($, iphoneStyle) { - if ($.browser == null) { - userAgent = navigator.userAgent || ""; - jQuery.uaMatch = function(ua) { - var match; +$.fn._width = function() +{ + if ($.fn.actual != null) + return $(this).actual('width'); + return $(this).width(); +}; - ua = ua.toLowerCase(); - match = /(chrome)[ \/]([\w.]+)/.exec(ua) || /(webkit)[ \/]([\w.]+)/.exec(ua) || /(opera)(?:.*version)?[ \/]([\w.]+)/.exec(ua) || /(msie) ([\w.]+)/.exec(ua) || ua.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+))?/.exec(ua) || []; - return { - browser: match[1] || "", - version: match[2] || "0" - }; - }; - matched = jQuery.uaMatch(userAgent); - jQuery.browser = {}; - if (matched.browser) { - jQuery.browser[matched.browser] = true; - jQuery.browser.version = matched.version; +// 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; } - if (jQuery.browser.webkit) { - jQuery.browser.safari = true; - } - } + + 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); - iOSCheckbox = (function() { - function iOSCheckbox(elem, options) { - var key, opts, value; - - this.elem = $(elem); - opts = $.extend({}, iOSCheckbox.defaults, options); - for (key in opts) { - value = opts[key]; - this[key] = value; - } - this.elem.data(this.dataName, this); - this.wrapCheckboxWithDivs(); - this.attachEvents(); - this.disableTextSelection(); - this.calculateDimensions(); - } - - iOSCheckbox.prototype.calculateDimensions = function() { - if (this.resizeHandle) { - this.optionallyResize('handle'); - } - if (this.resizeContainer) { - this.optionallyResize('container'); - } - return this.initialPosition(); - }; - - iOSCheckbox.prototype.isDisabled = function() { - return this.elem.is(':disabled'); - }; - - iOSCheckbox.prototype.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'); - return this.handle = $("
\n
\n
\n
\n
").appendTo(this.container); - }; - - iOSCheckbox.prototype.disableTextSelection = function() { - if ($.browser.msie) { - return $([this.handle, this.offLabel, this.onLabel, this.container]).attr("unselectable", "on"); - } - }; - - iOSCheckbox.prototype._getDimension = function(elem, dimension) { - if ($.fn.actual != null) { - return elem.actual(dimension); - } else { - return elem[dimension](); - } - }; - - iOSCheckbox.prototype.optionallyResize = function(mode) { - var newWidth, offLabelWidth, offSpan, onLabelWidth, onSpan; - - onSpan = this.onLabel.find('span'); - onLabelWidth = this._getDimension(onSpan, "width"); - onLabelWidth += parseInt(onSpan.css('padding-left'), 10); - offSpan = this.offLabel.find('span'); - offLabelWidth = this._getDimension(offSpan, "width"); - offLabelWidth += parseInt(offSpan.css('padding-right'), 10); - if (mode === "container") { - newWidth = onLabelWidth > offLabelWidth ? onLabelWidth : offLabelWidth; - newWidth += this._getDimension(this.handle, "width") + this.handleMargin; - return this.container.css({ - width: newWidth - }); - } else { - newWidth = onLabelWidth > offLabelWidth ? onLabelWidth : offLabelWidth; - return this.handle.css({ - width: newWidth - }); - } - }; - - iOSCheckbox.prototype.onMouseDown = function(event) { - var x; - - event.preventDefault(); - if (this.isDisabled()) { - return; - } - x = event.pageX || event.originalEvent.changedTouches[0].pageX; - iOSCheckbox.currentlyClicking = this.handle; - iOSCheckbox.dragStartPosition = x; - return iOSCheckbox.handleLeftOffset = parseInt(this.handle.css('left'), 10) || 0; - }; - - iOSCheckbox.prototype.onDragMove = function(event, x) { - var newWidth, p; - - if (iOSCheckbox.currentlyClicking !== this.handle) { - return; - } - p = (x + iOSCheckbox.handleLeftOffset - iOSCheckbox.dragStartPosition) / this.rightSide; - if (p < 0) { - p = 0; - } - if (p > 1) { - p = 1; - } - newWidth = p * this.rightSide; - this.handle.css({ - left: newWidth + $[iphoneStyle].currentlyClicking = null; + $[iphoneStyle].dragging = null; + obj.$elem.change(); }); - this.onLabel.css({ - width: newWidth + this.handleRadius - }); - this.offSpan.css({ - marginRight: -newWidth - }); - return this.onSpan.css({ - marginLeft: -(1 - p) * this.rightSide - }); - }; - - iOSCheckbox.prototype.onDragEnd = function(event, x) { - var p; - - if (iOSCheckbox.currentlyClicking !== this.handle) { - return; - } - if (this.isDisabled()) { - return; - } - if (iOSCheckbox.dragging) { - p = (x - iOSCheckbox.dragStartPosition) / this.rightSide; - this.elem.prop('checked', p >= 0.5); - } else { - this.elem.prop('checked', !this.elem.prop('checked')); - } - iOSCheckbox.currentlyClicking = null; - iOSCheckbox.dragging = null; - return this.didChange(); - }; - - iOSCheckbox.prototype.refresh = function() { - return this.didChange(); - }; - - iOSCheckbox.prototype.didChange = function() { - var new_left; - - if (typeof this.onChange === "function") { - this.onChange(this.elem, this.elem.prop('checked')); - } - if (this.isDisabled()) { - this.container.addClass(this.disabledClass); + + // Animate when we get a change event + this.$elem.change(function() { + if (obj.$elem.is(':disabled')) { + obj.container.addClass(obj.disabledClass); return false; } else { - this.container.removeClass(this.disabledClass); + obj.container.removeClass(obj.disabledClass); } - new_left = this.elem.prop('checked') ? this.rightSide : 0; - this.handle.animate({ - left: new_left - }, this.duration); - this.onLabel.animate({ - width: new_left + this.handleRadius - }, this.duration); - this.offSpan.animate({ - marginRight: -new_left - }, this.duration); - return this.onSpan.animate({ - marginLeft: new_left - this.rightSide - }, this.duration); - }; + + var new_left = obj.$elem.prop('checked') ? obj.rightSide : 0; - iOSCheckbox.prototype.attachEvents = function() { - var localMouseMove, localMouseUp, self; - - self = this; - localMouseMove = function(event) { - return self.onGlobalMove.apply(self, arguments); - }; - localMouseUp = function(event) { - self.onGlobalUp.apply(self, arguments); - $(document).unbind('mousemove touchmove', localMouseMove); - return $(document).unbind('mouseup touchend', localMouseUp); - }; - this.elem.change(function() { - return self.refresh(); - }); - return this.container.bind('mousedown touchstart', function(event) { - self.onMouseDown.apply(self, arguments); - $(document).bind('mousemove touchmove', localMouseMove); - return $(document).bind('mouseup touchend', localMouseUp); - }); - }; - - iOSCheckbox.prototype.initialPosition = function() { - var containerWidth, offset; - - containerWidth = this._getDimension(this.container, "width"); - this.offLabel.css({ - width: containerWidth - this.containerRadius - }); - offset = this.containerRadius + 1; - if ($.browser.msie && $.browser.version < 7) { - offset -= 3; - } - this.rightSide = containerWidth - this._getDimension(this.handle, "width") - offset; - if (this.elem.is(':checked')) { - this.handle.css({ - left: this.rightSide - }); - this.onLabel.css({ - width: this.rightSide + this.handleRadius - }); - this.offSpan.css({ - marginRight: -this.rightSide - }); - } else { - this.onLabel.css({ - width: 0 - }); - this.onSpan.css({ - marginLeft: -this.rightSide - }); - } - if (this.isDisabled()) { - return this.container.addClass(this.disabledClass); - } - }; - - iOSCheckbox.prototype.onGlobalMove = function(event) { - var x; - - if (!(!this.isDisabled() && iOSCheckbox.currentlyClicking)) { - return; - } - event.preventDefault(); - x = event.pageX || event.originalEvent.changedTouches[0].pageX; - if (!iOSCheckbox.dragging && (Math.abs(iOSCheckbox.dragStartPosition - x) > this.dragThreshold)) { - iOSCheckbox.dragging = true; - } - return this.onDragMove(event, x); - }; - - iOSCheckbox.prototype.onGlobalUp = function(event) { - var x; - - if (!iOSCheckbox.currentlyClicking) { - return; - } - event.preventDefault(); - x = event.pageX || event.originalEvent.changedTouches[0].pageX; - this.onDragEnd(event, x); - return false; - }; - - iOSCheckbox.defaults = { - duration: 200, - checkedLabel: 'ON', - uncheckedLabel: 'OFF', - resizeHandle: true, - resizeContainer: true, - disabledClass: 'iPhoneCheckDisabled', - containerClass: 'iPhoneCheckContainer', - labelOnClass: 'iPhoneCheckLabelOn', - labelOffClass: 'iPhoneCheckLabelOff', - handleClass: 'iPhoneCheckHandle', - handleCenterClass: 'iPhoneCheckHandleCenter', - handleRightClass: 'iPhoneCheckHandleRight', - dragThreshold: 5, - handleMargin: 15, - handleRadius: 4, - containerRadius: 5, - dataName: "iphoneStyle", - onChange: function() {} - }; - - return iOSCheckbox; - - })(); - - $.iphoneStyle = this.iOSCheckbox = iOSCheckbox; - - $.fn.iphoneStyle = function() { - var args, checkbox, dataName, existingControl, method, params, _i, _len, _ref, _ref1, _ref2, _ref3; - - args = 1 <= arguments.length ? __slice.call(arguments, 0) : []; - dataName = (_ref = (_ref1 = args[0]) != null ? _ref1.dataName : void 0) != null ? _ref : iOSCheckbox.defaults.dataName; - _ref2 = this.filter(':checkbox'); - for (_i = 0, _len = _ref2.length; _i < _len; _i++) { - checkbox = _ref2[_i]; - existingControl = $(checkbox).data(dataName); - if (existingControl != null) { - method = args[0], params = 2 <= args.length ? __slice.call(args, 1) : []; - if ((_ref3 = existingControl[method]) != null) { - _ref3.apply(existingControl, params); - } - } else { - new iOSCheckbox(checkbox, args[0]); - } - } - return this; - }; - - $.fn.iOSCheckbox = function(options) { - var opts; - - if (options == null) { - options = {}; - } - opts = $.extend({}, options, { - resizeHandle: false, - disabledClass: 'iOSCheckDisabled', - containerClass: 'iOSCheckContainer', - labelOnClass: 'iOSCheckLabelOn', - labelOffClass: 'iOSCheckLabelOff', - handleClass: 'iOSCheckHandle', - handleCenterClass: 'iOSCheckHandleCenter', - handleRightClass: 'iOSCheckHandleRight', - dataName: 'iOSCheckbox' + 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); }); - return this.iphoneStyle(opts); - }; + }, + + // Setup the control's inital position + initialPosition: function() { + this.offLabel.css({ width: this.container._width() - 5 }); -}).call(this); +// 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'); diff --git a/webif/html/settings/settings.js b/webif/html/settings/settings.js index 94489ce..de02cd6 100644 --- a/webif/html/settings/settings.js +++ b/webif/html/settings/settings.js @@ -36,7 +36,7 @@ $(document).ready(function () { }); }); - $('.setting_toggle').change(function() { + $('.setting_toggle').on('change', function() { var arg = '0'; var urlargs; if ($(this).prop('checked')) @@ -54,7 +54,7 @@ $(document).ready(function () { else urlargs = attr + '=' + arg; - $(this).disable(); + // $(this).disable(); $(output) .empty() @@ -62,7 +62,7 @@ $(document).ready(function () { .html(' Please wait...') .load('/settings/settings.jim?' + urlargs, function() { - $(el).enable(); + // $(el).enable(); $(output) .css('font-style', 'italic') .delay(2000).fadeOut('slow');