1
0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00
node-red/editor/js/ui/touch/radialMenu.js

185 lines
5.9 KiB
JavaScript
Raw Normal View History

2014-05-15 23:49:07 +02:00
/**
* Copyright JS Foundation and other contributors, http://js.foundation
2014-05-15 23:49:07 +02:00
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
**/
RED.touch = RED.touch||{};
2014-08-08 01:01:35 +02:00
RED.touch.radialMenu = (function() {
2014-05-15 23:49:07 +02:00
var touchMenu = null;
var isActive = false;
var isOutside = false;
var activeOption = null;
function createRadial(obj,pos,options) {
isActive = true;
try {
var w = $("body").width();
var h = $("body").height();
touchMenu = d3.select("body").append("div")
.style({
position:"absolute",
top: 0,
left:0,
bottom:0,
right:0,
"z-index": 1000
})
.on('touchstart',function() {
hide();
d3.event.preventDefault();
});
var menu = touchMenu.append("div")
.style({
position: "absolute",
top: (pos[1]-80)+"px",
left:(pos[0]-80)+"px",
"border-radius": "80px",
width: "160px",
height: "160px",
background: "rgba(255,255,255,0.6)",
border: "1px solid #666"
});
var menuOpts = [];
2014-08-08 01:01:35 +02:00
var createMenuOpt = function(x,y,opt) {
2014-05-15 23:49:07 +02:00
opt.el = menu.append("div")
.style({
position: "absolute",
top: (y+80-25)+"px",
left:(x+80-25)+"px",
"border-radius": "20px",
width: "50px",
height: "50px",
background: "#fff",
border: "2px solid #666",
"text-align": "center",
"line-height":"50px"
});
opt.el.html(opt.name);
2014-05-15 23:49:07 +02:00
if (opt.disabled) {
opt.el.style({"border-color":"#ccc",color:"#ccc"});
}
opt.x = x;
opt.y = y;
menuOpts.push(opt);
opt.el.on('touchstart',function() {
opt.el.style("background","#999");
d3.event.preventDefault();
d3.event.stopPropagation();
});
opt.el.on('touchend',function() {
hide();
opt.onselect();
d3.event.preventDefault();
d3.event.stopPropagation();
});
}
var n = options.length;
var dang = Math.max(Math.PI/(n-1),Math.PI/4);
var ang = Math.PI;
for (var i=0;i<n;i++) {
var x = Math.floor(Math.cos(ang)*80);
var y = Math.floor(Math.sin(ang)*80);
if (options[i].name) {
createMenuOpt(x,y,options[i]);
}
ang += dang;
}
2014-08-08 01:01:35 +02:00
var hide = function() {
2014-05-15 23:49:07 +02:00
isActive = false;
activeOption = null;
touchMenu.remove();
touchMenu = null;
}
obj.on('touchend.radial',function() {
obj.on('touchend.radial',null);
obj.on('touchmenu.radial',null);
if (activeOption) {
try {
activeOption.onselect();
} catch(err) {
RED._debug(err);
}
hide();
} else if (isOutside) {
hide();
}
});
obj.on('touchmove.radial',function() {
try {
var touch0 = d3.event.touches.item(0);
var p = [touch0.pageX - pos[0],touch0.pageY-pos[1]];
for (var i=0;i<menuOpts.length;i++) {
var opt = menuOpts[i];
if (!opt.disabled) {
if (p[0]>opt.x-30 && p[0]<opt.x+30 && p[1]>opt.y-30 && p[1]<opt.y+30) {
if (opt !== activeOption) {
opt.el.style("background","#999");
activeOption = opt;
}
} else if (opt === activeOption) {
opt.el.style("background","#fff");
activeOption = null;
} else {
opt.el.style("background","#fff");
}
}
}
if (!activeOption) {
var d = Math.abs((p[0]*p[0])+(p[1]*p[1]));
isOutside = (d > 80*80);
}
} catch(err) {
RED._debug(err);
}
});
} catch(err) {
RED._debug(err);
}
}
return {
show: createRadial,
active: function() {
return isActive;
}
}
2014-08-08 01:01:35 +02:00
})();
2014-05-15 23:49:07 +02:00