Merge pull request #48 from Gizra/47

Checking OS and append events according.
Gizra · Mar 2, 2014 · 4835f9e · 4835f9e
2 parents bc457c5 + 145f8da
commit 4835f9e
Showing 1 changed file with 39 additions and 20 deletions.
diff --git a/app/js/cdl.js b/app/js/cdl.js
@@ -20,17 +20,20 @@
     draw = {},
     width = config.chart.canvas.width,
     height = config.chart.canvas.height,
-    agent = navigator.userAgent;
+    agent = navigator.userAgent,
+    os;
 
   // Detect device and set configuration respectively.
   if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(agent) ) {
     if (agent.match(/iPad/)) {
+      os = 'ios';
       config.chart.initial.minZoom = 0.40;
       config.chart.zoom.hideGrandChildren = 0.41;
       config.chart.initial.y = function(height) { return height * 0.30;};
       config.nodes.root.r = config.nodes.root.rFocus = config.nodes.root.target = config.nodes.translation.r = config.nodes.translation.rFocus = config.nodes.translation.target = 35;
     }
     else if (agent.match(/Android/)) {
+      os = 'android';
       if (agent.match(/Pad/)) {
         config.chart.initial.minZoom = 0.65;
         config.chart.zoom.hideGrandChildren = 0.66;
@@ -47,6 +50,13 @@
 
   }
   else {
+    if (agent.match(/Mac OS X/)) {
+      os = 'osx';
+    }
+    else {
+      os = 'other';
+    }
+
     config.chart.initial.minZoom = 0.55;
     config.chart.zoom.hideGrandChildren = 0.56;
     config.nodes.root.r = config.nodes.root.rFocus = config.nodes.root.target = config.nodes.translation.r = config.nodes.translation.rFocus = config.nodes.translation.target = 50;
@@ -59,7 +69,7 @@
    * @param height
    */
   function prepareScenario() {
-    var initialScaleOnZoom
+    var initialScaleOnZoom;
 
     function zoomstart() {
       initialScaleOnZoom = draw.getScale();
@@ -89,34 +99,43 @@
       .on('zoom', zoom)
       .on('zoomend', zoomend);
 
-    // Canvas.
-    svgContainer = d3.select('body').append('svg')
-      .attr('id', 'chart')
-      .attr('width', '100%')
-      .attr('height', '100%')
-      .style('fill', 'transparent')
-      .on('dblclick.zoom', function(){d3.event.stopPropagation();})
-      .on('touchstart', function(){d3.event.preventDefault();})
-      .on('touchmove', zoomSvg)
-      .on('touchend', function(){d3.event.preventDefault();})
-      .on('gesturestart', function(){d3.event.stopPropagation();})
-      .on('gesturechange', zoomSvg)
-      .on('gestureend', function(){d3.event.stopPropagation();})
-      .call(zoomSvg);
+    // Defining canvas object, properties and events according.
+    if (os === 'ios' || os === 'osx') {
+      svgContainer = d3.select('body').append('svg')
+        .attr('id', 'chart')
+        .attr('width', '100%')
+        .attr('height', '100%')
+        .style('fill', 'transparent')
+        .on('zoom', zoomSvg)
+        .on('dblclick.zoom', function(){d3.event.stopPropagation(); return null;})
+        .on('touchstart', function(){d3.event.preventDefault(); return null;})
+        .on('touchmove', zoomSvg)
+        .on('touchend', function(){d3.event.preventDefault(); return null;})
+        .on('gesturestart', function(){d3.event.stopPropagation(); return null;})
+        .on('gesturechange', zoomSvg)
+        .on('gestureend', function(){d3.event.stopPropagation(); return null; })
+        .call(zoomSvg);
+    }
+    else {
+      svgContainer = d3.select('body').append('svg')
+        .attr('id', 'chart')
+        .attr('width', '100%')
+        .attr('height', '100%')
+        .style('fill', 'transparent')
+        .call(zoomSvg);
+    }
 
     // Background.
     background =  svgContainer.append('rect')
       .attr('id', 'background')
       .attr('width', width)
       .attr('height', height)
-      .style('fill', 'transparent')
-      .on('zoom', zoom);
+      .style('fill', 'transparent');
+
 
     // System.
     system = svgContainer.append('g')
       .attr('id', 'system');
-
-
   }
 
   /**