00_ZWDongle.pm: neighborList fix: other styles + touch devices

git-svn-id: https://svn.fhem.de/fhem/trunk@11770 2b470e98-0d58-463d-a4d8-8e2adae1ed80

fhem/www/pgm2/darkCommon.css

@@ -13,3 +13,9 @@ div.ui-widget-content a {color: #CCCCCC!important; text-decoration: none!importa
 div.detLink { display:inline-block; margin-right:0.5em; }
 
 .fhemlog { color:#FFFFFF; }
+
+.zwBox { stroke:#fff; stroke-width:2px; fill:#000; }
+.zwDongle { stroke:red; stroke-width:2px; fill:#000; }
+.zwMargin { stroke:#fff; stroke-width:1px; fill:none; }
+.zwLine { stroke:#fff; stroke-width:1px; }
+.zwArrowHead { fill:#fff; stroke-width:1px; }

fhem/www/pgm2/defaultCommon.css

@@ -137,3 +137,4 @@ select [value^=l8] { color: yellow; }
 .zwDongle { stroke:red; stroke-width:2px; fill:#F0F0D8; }
 .zwMargin { stroke:#278727; stroke-width:1px; fill:none; }
 .zwLine { stroke:#278727; stroke-width:1px; }
+.zwArrowHead { fill:#278727; stroke-width:1px; }

fhem/www/pgm2/ios6Common.css

@@ -249,3 +249,9 @@ div#svgmarker {
   color:black; background:#999;
   border:1px solid #fff; border-radius:4px;
 }
+
+.zwBox { stroke:#c0c0c0; stroke-width:2px; fill:#f7f7f7; }
+.zwDongle { stroke:red; stroke-width:2px; fill:#f7f7f7; }
+.zwMargin { stroke:#c0c0c0; stroke-width:1px; fill:none; }
+.zwLine { stroke:#c0c0c0; stroke-width:1px; }
+.zwArrowHead { fill:#c0c0c0; stroke-width:1px; }

fhem/www/pgm2/ios7Common.css

@@ -28,3 +28,9 @@ div#svgmarker {
   text-align:left; max-width:600px;
   color:black; background:#e5e5e5;
 }
+
+.zwBox { stroke:#c0c0c0; stroke-width:2px; fill:#f7f7f7; }
+.zwDongle { stroke:red; stroke-width:2px; fill:#f7f7f7; }
+.zwMargin { stroke:#c0c0c0; stroke-width:1px; fill:none; }
+.zwLine { stroke:#c0c0c0; stroke-width:1px; }
+.zwArrowHead { fill:#147bff; stroke-width:1px; }

fhem/www/pgm2/zwave_neighborlist.js

@@ -67,11 +67,11 @@ zw_draw(h, width, height)
   svg += '<defs>'+
             '<marker id="endarrow" markerWidth="20" markerHeight="20" '+
                 'refx="50" refy="6" orient="auto" markerUnits="strokeWidth">'+
-              '<path d="M0,0 L0,12 L18,6 z" fill="#278727" />'+
+              '<path d="M0,0 L0,12 L18,6 z" class="zwArrowHead" />'+
              '</marker>'+
             '<marker id="startarrow" markerWidth="20" markerHeight="20" '+
                 'refx="-50" refy="6" orient="auto" markerUnits="strokeWidth">'+
-              '<path d="M18,0 L18,12 L0,6 z" fill="#278727" />'+
+              '<path d="M18,0 L18,12 L0,6 z" class="zwArrowHead" />'+
              '</marker>'+
           '</defs>';
   svg += '<rect class="zwMargin" x="1" y="1" width="'+
@@ -192,3 +192,185 @@ zw_adjustLines(h, name)
     }
   }
 }
+
+
+/*!
+ * jQuery UI Touch Punch 0.2.3
+ *
+ * Copyright 2011–2014, Dave Furfero
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ *
+ * Depends:
+ *  jquery.ui.widget.js
+ *  jquery.ui.mouse.js
+ */
+(function ($) {
+
+  // Detect touch support
+  $.support.touch = 'ontouchend' in document;
+
+  // Ignore browsers without touch support
+  if (!$.support.touch) {
+    return;
+  }
+
+  var mouseProto = $.ui.mouse.prototype,
+      _mouseInit = mouseProto._mouseInit,
+      _mouseDestroy = mouseProto._mouseDestroy,
+      touchHandled;
+
+  /**
+   * Simulate a mouse event based on a corresponding touch event
+   * @param {Object} event A touch event
+   * @param {String} simulatedType The corresponding mouse event
+   */
+  function simulateMouseEvent (event, simulatedType) {
+
+    // Ignore multi-touch events
+    if (event.originalEvent.touches.length > 1) {
+      return;
+    }
+
+    event.preventDefault();
+
+    var touch = event.originalEvent.changedTouches[0],
+        simulatedEvent = document.createEvent('MouseEvents');
+    
+    // Initialize the simulated mouse event using the touch event's coordinates
+    simulatedEvent.initMouseEvent(
+      simulatedType,    // type
+      true,             // bubbles                    
+      true,             // cancelable                 
+      window,           // view                       
+      1,                // detail                     
+      touch.screenX,    // screenX                    
+      touch.screenY,    // screenY                    
+      touch.clientX,    // clientX                    
+      touch.clientY,    // clientY                    
+      false,            // ctrlKey                    
+      false,            // altKey                     
+      false,            // shiftKey                   
+      false,            // metaKey                    
+      0,                // button                     
+      null              // relatedTarget              
+    );
+
+    // Dispatch the simulated event to the target element
+    event.target.dispatchEvent(simulatedEvent);
+  }
+
+  /**
+   * Handle the jQuery UI widget's touchstart events
+   * @param {Object} event The widget element's touchstart event
+   */
+  mouseProto._touchStart = function (event) {
+
+    var self = this;
+
+    // Ignore the event if another widget is already being handled
+    if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0])) {
+      return;
+    }
+
+    // Set the flag to prevent other widgets from inheriting the touch event
+    touchHandled = true;
+
+    // Track movement to determine if interaction was a click
+    self._touchMoved = false;
+
+    // Simulate the mouseover event
+    simulateMouseEvent(event, 'mouseover');
+
+    // Simulate the mousemove event
+    simulateMouseEvent(event, 'mousemove');
+
+    // Simulate the mousedown event
+    simulateMouseEvent(event, 'mousedown');
+  };
+
+  /**
+   * Handle the jQuery UI widget's touchmove events
+   * @param {Object} event The document's touchmove event
+   */
+  mouseProto._touchMove = function (event) {
+
+    // Ignore event if not handled
+    if (!touchHandled) {
+      return;
+    }
+
+    // Interaction was not a click
+    this._touchMoved = true;
+
+    // Simulate the mousemove event
+    simulateMouseEvent(event, 'mousemove');
+  };
+
+  /**
+   * Handle the jQuery UI widget's touchend events
+   * @param {Object} event The document's touchend event
+   */
+  mouseProto._touchEnd = function (event) {
+
+    // Ignore event if not handled
+    if (!touchHandled) {
+      return;
+    }
+
+    // Simulate the mouseup event
+    simulateMouseEvent(event, 'mouseup');
+
+    // Simulate the mouseout event
+    simulateMouseEvent(event, 'mouseout');
+
+    // If the touch interaction did not move, it should trigger a click
+    if (!this._touchMoved) {
+
+      // Simulate the click event
+      simulateMouseEvent(event, 'click');
+    }
+
+    // Unset the flag to allow other widgets to inherit the touch event
+    touchHandled = false;
+  };
+
+  /**
+   * A duck punch of the $.ui.mouse _mouseInit method to support touch events.
+   * This method extends the widget with bound touch event handlers that
+   * translate touch events to mouse events and pass them to the widget's
+   * original mouse event handling methods.
+   */
+  mouseProto._mouseInit = function () {
+    
+    var self = this;
+
+    // Delegate the touch handlers to the widget's element
+    self.element.bind({
+      touchstart: $.proxy(self, '_touchStart'),
+      touchmove: $.proxy(self, '_touchMove'),
+      touchend: $.proxy(self, '_touchEnd')
+    });
+
+    // Call the original $.ui.mouse init method
+    _mouseInit.call(self);
+  };
+
+  /**
+   * Remove the touch event handlers
+   */
+  mouseProto._mouseDestroy = function () {
+    
+    var self = this;
+
+    // Delegate the touch handlers to the widget's element
+    self.element.unbind({
+      touchstart: $.proxy(self, '_touchStart'),
+      touchmove: $.proxy(self, '_touchMove'),
+      touchend: $.proxy(self, '_touchEnd')
+    });
+
+    // Call the original $.ui.mouse destroy method
+    _mouseDestroy.call(self);
+  };
+
+})(jQuery);