add iphone checkboxes and improve services screen

git-svn-id: file:///root/webif/svn/humax/pkg/src/webif/trunk@191 2a923420-c742-0410-a762-8d5b09965624

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'); }

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;

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('<div class="' + this.containerClass + '" />');
+    this.container = this.$elem.parent();
+    
+    this.offLabel  = $('<label class="'+ this.labelOffClass +'">' +
+                         '<span>'+ this.uncheckedLabel +'</span>' +
+                       '</label>').appendTo(this.container);
+    this.offSpan   = this.offLabel.children('span');
+    
+    this.onLabel   = $('<label class="'+ this.labelOnClass +'">' +
+                         '<span>'+ this.checkedLabel +'</span>' +
+                       '</label>').appendTo(this.container);
+    this.onSpan    = this.onLabel.children('span');
+    
+    this.handle    = $('<div class="' + this.handleClass + '">' +
+                         '<div class="' + this.handleRightClass + '">' +
+                           '<div class="' + this.handleCenterClass + '" />' +
+                         '</div>' +
+                       '</div>').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');

var/mongoose/html/services.shtml

@@ -1,40 +1,24 @@
 <!--#include virtual="/lib/header.shtml" -->
+<link href=/css/iphone-style-checkboxes.css rel=stylesheet type=text/css />
+<script type="text/javascript" src="/js/iphone-style-checkboxes.js"></script>
+<script type="text/javascript">
 
-<script type=text/javascript src=/js/ajax.js></script>
+$(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);
 
-<script type=text/javascript>
-function updateResults()
-{
-	var r = document.getElementById('results');
-	if (r && request.readyState == 4 && request.status == 200)
-	{
-		r.style.display = 'block';
-		var t = document.getElementById('result_txt');
-		t.innerHTML = request.responseText;
-	}
-}
-
-function go(service, action)
-{
-	if (service == null || service == "" ||
-	    action == null || action == "")
-		return;
-
-	var url = "/cgi-bin/service.jim?service=" + escape(service) +
-	    "&action=" + escape(action);
-
-	request.open("GET", url, true);
-	request.onreadystatechange = updateResults;
-	request.send(null);
-}
-
-function toggle(obj)
-{
-	if (obj.src.search("on") > -1)
-		obj.src = '/img/off.png';
-	else
-		obj.src = '/img/on.png';
-}
+	$(':checkbox').change(function() {
+		var url = '/cgi-bin/service.jim?action=' +
+		    escape($(this).attr('class')) +
+		    '&service=' +
+		    escape($(this).attr('name'));
+		$('#result_txt').load(url, function() {
+			$('#results').show('slow');
+			$('#results').delay(3000).hide('slow');
+		});
+	});
+});
 
 </script>
 

var/mongoose/include/services.jim

@@ -2,18 +2,6 @@
 
 set services [split [exec /mod/bin/service mlist]]
 
-proc button {state service action} {
-	puts -nonewline "<a href=#>"
-	puts -nonewline "<img border=0 src=/img/$state.png"
-	puts -nonewline " onClick=\"go('$service', '$action'); "
-	puts -nonewline "toggle(this); return false\">"
-	puts "</a>"
-}
-
-proc control {s a} {
-	return "<a href=/cgi-bin/service.jim?action=$a&service=$s>"
-}
-
 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 "<tr class=even><td>$name</td>"
+	puts "<tr><td class=even>$name</td>"
 	if (!$installed) {
 		puts "<td colspan=3><i>Not installed</i></td></tr>"
 		continue
 	}
 
-	puts "<td>"
-	if ($auto) { button on $name auto } else { button off $name auto }
-	puts "</td>"
+	puts -nonewline "<td><input type=checkbox class=auto name=\"$name\""
+	if ($auto) { puts -nonewline " checked" }
+	puts "></td>"
 
-	puts "<td>"
-	if ($running) { button on $name toggle } else {
-		button off $name toggle }
-	puts "</td>"
+	puts -nonewline "<td><input type=checkbox class=toggle name=\"$name\"""
+	if ($running) { puts -nonewline " checked" }
+	puts "></td>"
 
 	puts "</tr>"
 }