dgbuilder/public/red/ui/touch/radialMenu.js

   1 /**
   2  * Copyright 2014 IBM Corp.
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  * http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13  * See the License for the specific language governing permissions and
  14  * limitations under the License.
  15  **/
  16
  17 RED.touch = RED.touch||{};
  18 RED.touch.radialMenu = (function() {
  19
  20
  21     var touchMenu = null;
  22     var isActive = false;
  23     var isOutside = false;
  24     var activeOption = null;
  25
  26
  27     function createRadial(obj,pos,options) {
  28         isActive = true;
  29         try {
  30             var w = $("body").width();
  31             var h = $("body").height();
  32
  33             touchMenu = d3.select("body").append("div")
  34                 .style({
  35                         position:"absolute",
  36                         top: 0,
  37                         left:0,
  38                         bottom:0,
  39                         right:0,
  40                         "z-index": 1000
  41                 })
  42                 .on('touchstart',function() {
  43                     hide();
  44                     d3.event.preventDefault();
  45                 });
  46
  47
  48
  49
  50             var menu = touchMenu.append("div")
  51                 .style({
  52                         position: "absolute",
  53                         top: (pos[1]-80)+"px",
  54                         left:(pos[0]-80)+"px",
  55                         "border-radius": "80px",
  56                         width: "160px",
  57                         height: "160px",
  58                         background: "rgba(255,255,255,0.6)",
  59                         border: "1px solid #666"
  60                 });
  61
  62             var menuOpts = [];
  63             var createMenuOpt = function(x,y,opt) {
  64                 opt.el = menu.append("div")
  65                     .style({
  66                         position: "absolute",
  67                         top: (y+80-25)+"px",
  68                         left:(x+80-25)+"px",
  69                         "border-radius": "20px",
  70                         width: "50px",
  71                         height: "50px",
  72                         background: "#fff",
  73                         border: "2px solid #666",
  74                         "text-align": "center",
  75                         "line-height":"50px"
  76                     });
  77
  78                 opt.el.html(opt.name);
  79
  80                 if (opt.disabled) {
  81                     opt.el.style({"border-color":"#ccc",color:"#ccc"});
  82                 }
  83                 opt.x = x;
  84                 opt.y = y;
  85                 menuOpts.push(opt);
  86
  87                 opt.el.on('touchstart',function() {
  88                     opt.el.style("background","#999");
  89                     d3.event.preventDefault();
  90                     d3.event.stopPropagation();
  91                 });
  92                 opt.el.on('touchend',function() {
  93                     hide();
  94                     opt.onselect();
  95                     d3.event.preventDefault();
  96                     d3.event.stopPropagation();
  97                 });
  98             }
  99
 100             var n = options.length;
 101             var dang = Math.max(Math.PI/(n-1),Math.PI/4);
 102             var ang = Math.PI;
 103             for (var i=0;i<n;i++) {
 104                 var x = Math.floor(Math.cos(ang)*80);
 105                 var y = Math.floor(Math.sin(ang)*80);
 106                 if (options[i].name) {
 107                     createMenuOpt(x,y,options[i]);
 108                 }
 109                 ang += dang;
 110             }
 111
 112
 113             var hide = function() {
 114                 isActive = false;
 115                 activeOption = null;
 116                 touchMenu.remove();
 117                 touchMenu = null;
 118             }
 119
 120             obj.on('touchend.radial',function() {
 121                     obj.on('touchend.radial',null);
 122                     obj.on('touchmenu.radial',null);
 123
 124                     if (activeOption) {
 125                         try {
 126                             activeOption.onselect();
 127                         } catch(err) {
 128                             RED._debug(err);
 129                         }
 130                         hide();
 131                     } else if (isOutside) {
 132                         hide();
 133                     }
 134             });
 135
 136
 137
 138             obj.on('touchmove.radial',function() {
 139             try {
 140                 var touch0 = d3.event.touches.item(0);
 141                 var p = [touch0.pageX - pos[0],touch0.pageY-pos[1]];
 142                 for (var i=0;i<menuOpts.length;i++) {
 143                     var opt = menuOpts[i];
 144                     if (!opt.disabled) {
 145                         if (p[0]>opt.x-30 && p[0]<opt.x+30 && p[1]>opt.y-30 && p[1]<opt.y+30) {
 146                             if (opt !== activeOption) {
 147                                 opt.el.style("background","#999");
 148                                 activeOption = opt;
 149                             }
 150                         } else if (opt === activeOption) {
 151                             opt.el.style("background","#fff");
 152                             activeOption = null;
 153                         } else {
 154                             opt.el.style("background","#fff");
 155                         }
 156                     }
 157                 }
 158                 if (!activeOption) {
 159                     var d = Math.abs((p[0]*p[0])+(p[1]*p[1]));
 160                     isOutside = (d > 80*80);
 161                 }
 162
 163             } catch(err) {
 164                 RED._debug(err);
 165             }
 166
 167
 168             });
 169
 170         } catch(err) {
 171             RED._debug(err);
 172         }
 173     }
 174
 175
 176     return {
 177         show: createRadial,
 178         active: function() {
 179             return isActive;
 180         }
 181     }
 182
 183 })();
 184