diff --git a/var/mongoose/html/css/iphone-style-checkboxes.css b/var/mongoose/html/css/iphone-style-checkboxes.css
new file mode 100644
index 0000000..238f8f0
--- /dev/null
+++ b/var/mongoose/html/css/iphone-style-checkboxes.css
@@ -0,0 +1,75 @@
+.iPhoneCheckContainer {
+ position: relative;
+ height: 27px;
+ cursor: pointer;
+ overflow: hidden; }
+ .iPhoneCheckContainer input {
+ position: absolute;
+ top: 5px;
+ left: 30px;
+ opacity: 0;
+ -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
+ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); }
+ .iPhoneCheckContainer label {
+ white-space: nowrap;
+ font-size: 17px;
+ line-height: 17px;
+ font-weight: bold;
+ font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
+ text-transform: uppercase;
+ 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 {
+ opacity: 0.5;
+ -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
+ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); }
+
+label.iPhoneCheckLabelOn {
+ color: white;
+ background: url('/img/iphone-style-checkboxes/on.png?1282083753') 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('/img/iphone-style-checkboxes/off.png?1282083753') 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('/img/iphone-style-checkboxes/slider_left.png?1282083753') no-repeat;
+ padding-left: 3px; }
+
+.iPhoneCheckHandleRight {
+ height: 100%;
+ width: 100%;
+ padding-right: 3px;
+ background: url('/img/iphone-style-checkboxes/slider_right.png?1282083753') no-repeat right 0; }
+
+.iPhoneCheckHandleCenter {
+ height: 100%;
+ width: 100%;
+ background: url('/img/iphone-style-checkboxes/slider_center.png?1282083753'); }
diff --git a/var/mongoose/html/css/style.css b/var/mongoose/html/css/style.css
index 40c45ad..af8bdf2 100644
--- a/var/mongoose/html/css/style.css
+++ b/var/mongoose/html/css/style.css
@@ -63,13 +63,13 @@ table.borders, table.borders td, table.borders th
empty-cells: show;
}
-table tr.odd
+table tr.odd, table td.odd
{
background: #ccff99;
color: black;
}
-table tr.even
+table tr.even, table td.even
{
background: #ffffcc;
color: black;
diff --git a/var/mongoose/html/img/iphone-style-checkboxes/off.png b/var/mongoose/html/img/iphone-style-checkboxes/off.png
new file mode 100644
index 0000000..f414051
Binary files /dev/null and b/var/mongoose/html/img/iphone-style-checkboxes/off.png differ
diff --git a/var/mongoose/html/img/iphone-style-checkboxes/on.png b/var/mongoose/html/img/iphone-style-checkboxes/on.png
new file mode 100644
index 0000000..94425e5
Binary files /dev/null and b/var/mongoose/html/img/iphone-style-checkboxes/on.png differ
diff --git a/var/mongoose/html/img/iphone-style-checkboxes/slider.png b/var/mongoose/html/img/iphone-style-checkboxes/slider.png
new file mode 100644
index 0000000..80e05ff
Binary files /dev/null and b/var/mongoose/html/img/iphone-style-checkboxes/slider.png differ
diff --git a/var/mongoose/html/img/iphone-style-checkboxes/slider_center.png b/var/mongoose/html/img/iphone-style-checkboxes/slider_center.png
new file mode 100644
index 0000000..310fc8c
Binary files /dev/null and b/var/mongoose/html/img/iphone-style-checkboxes/slider_center.png differ
diff --git a/var/mongoose/html/img/iphone-style-checkboxes/slider_left.png b/var/mongoose/html/img/iphone-style-checkboxes/slider_left.png
new file mode 100644
index 0000000..51576ce
Binary files /dev/null and b/var/mongoose/html/img/iphone-style-checkboxes/slider_left.png differ
diff --git a/var/mongoose/html/img/iphone-style-checkboxes/slider_right.png b/var/mongoose/html/img/iphone-style-checkboxes/slider_right.png
new file mode 100644
index 0000000..447d94a
Binary files /dev/null and b/var/mongoose/html/img/iphone-style-checkboxes/slider_right.png differ
diff --git a/var/mongoose/html/js/iphone-style-checkboxes.js b/var/mongoose/html/js/iphone-style-checkboxes.js
new file mode 100644
index 0000000..0a59999
--- /dev/null
+++ b/var/mongoose/html/js/iphone-style-checkboxes.js
@@ -0,0 +1,229 @@
+/*!
+// iPhone-style Checkboxes jQuery plugin
+// Copyright Thomas Reynolds, licensed GPL & MIT
+*/
+;(function($, iphoneStyle) {
+
+// 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() {
+ 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.attr('checked');
+ }
+
+ obj.$elem.attr('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.attr('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;
+ 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/var/mongoose/html/services.shtml b/var/mongoose/html/services.shtml
index af8b30d..0012a57 100644
--- a/var/mongoose/html/services.shtml
+++ b/var/mongoose/html/services.shtml
@@ -1,40 +1,24 @@
+
+
+
+$(document).ready(function() {
+ $('input:checkbox').iphoneStyle();
+ // Don't allow turning off the web server from within the web server..
+ $('input:checkbox[name=mongoose][class=toggle]').attr('disabled', true);
-
diff --git a/var/mongoose/include/services.jim b/var/mongoose/include/services.jim
index 695d8a6..97c73bc 100755
--- a/var/mongoose/include/services.jim
+++ b/var/mongoose/include/services.jim
@@ -2,18 +2,6 @@
set services [split [exec /mod/bin/service mlist]]
-proc button {state service action} {
- puts -nonewline ""
- puts -nonewline ""
- puts ""
-}
-
-proc control {s a} {
- return ""
-}
-
foreach service $services {
set data [split $service ":"]
set name [lindex $data 0]
@@ -21,20 +9,19 @@ foreach service $services {
set auto [lindex $data 2]
set running [lindex $data 3]
- puts "$name | "
+ puts "
$name | "
if (!$installed) {
puts "Not installed |
"
continue
}
- puts ""
- if ($auto) { button on $name auto } else { button off $name auto }
- puts " | "
+ puts -nonewline " | "
- puts ""
- if ($running) { button on $name toggle } else {
- button off $name toggle }
- puts " | "
+ puts -nonewline " | "
puts ""
}