TiledViz
Loading...
Searching...
No Matches
Menu.js
1
32$(document).ready( function (){
33 Menu = function(id,htmlSupport,menuTitleTab_,menuEventTab_,menuIconClassAttributesTab_,menuShareEvent_,parameters) {
34
35 var id=id;
36 var menuEventTab = menuEventTab_;
37 var numOfEvents = menuEventTab.length;
38 var menuShareEvent = menuShareEvent_;
39 var eventSelectedTab= new Array();
40
41 this.getId = function() {
42 return id;
43 };
44
45 this.getEventSelectedTab = function(){
46
47 return eventSelectedTab;
48 };
49
50 this.getMenuIconClassAttributesTab = function(){
51
52 return menuIconClassAttributesTab_;
53 };
54
55 this.getMenuShareEvent = function(){
56
57 return menuShareEvent;
58 };
59
60 this.setMenuShareEvent = function(option_, menuShareEvent_){
61
62 menuShareEvent[option_] = menuShareEvent_;
63 };
64
65
66 if(typeof parameters == 'undefined'){
67
68
69
70 var parameters = {
71
72 position : "absolute",
73 top : 0,
74 left : 0,
75 visible : "hidden",
76 classN : "",
77 height : 100,
78 width : 100,
79 margin : "0px 0px 0px 0px",
80 rightMargin : 0,
81 backgroundColor: "rgba(0, 0, 0, 0.0)",
82 //borderStyle : "solid",
83 //borderSize : "20px",
84 //borderColor : "blue",
85 orientation : "H", // Default H for horizontal, V would be for vertical
86 zIndex : 150
87
88 }
89
90 }
91
92 var position_= parameters.position;
93 var top_=parameters.top;
94 var left_=parameters.left;
95 var visible = parameters.visible;
96 var class_ =parameters.classN;
97 var height_=parameters.height;
98 var width_=parameters.width;
99 var src_unselect = "unselectdefault100";
100 var backgroundColor_ = parameters.backgroundColor;
101 var borderStyle_ = parameters.borderStyle;
102 var borderWidth_ = parameters.borderWidth;
103 var borderColor_ = parameters.borderColor;
104 var orientation_ = parameters.orientation;
105 var margin_ = parameters.margin;
106 var rightMargin_ = parameters.rightMargin;
107 var zIndex_ = parameters.zIndex;
108 var menubox_ = true;
109 if (typeof parameters.menubox != 'undefined') {
110 menubox_ = parameters.menubox;
111 }
112 var touchspeed = configBehaviour.touchSpeed; // speed of touch move;
113
114 if (orientation_ == "V") {
115 var H = 0;
116 var V = 1;
117 } else {
118 var H = 1;
119 var V = 0;
120 }
121
122 this.buildHtmlMenu = function(){
123
124 htmlSupport.append('<div id=menu'+id+' class='+class_+'menu></div>');
125 // Calculations here to be used in global menu CSS
126 var HandleDecalTop=0;
127 var HandleDecalLeft=0;
128 if (menubox_) {
129 HandleDecalTop=Math.max(parseInt(height_/2),90);
130 HandleDecalLeft=Math.max(parseInt(width_/2),70);
131 }
132
133 var myMenu=$("#menu"+id);
134 myMenu.css({
135 position : position_,
136 top : 0+top_,
137 left : 0+left_,
138 height : (V*numOfEvents+1*H)*height_+V*HandleDecalTop, // V*numOfEvents gives the total height (in elements), if the menu is not vertical (ie it’s horizontal), we count an element in height
139 width : (H*numOfEvents+1*V)*(width_+rightMargin_)+H*HandleDecalLeft, // Same as height
140 //backgroundColor : 'red',
141 visibility : visible,
142 zIndex : zIndex_,
143 margin : margin_
144 });
145
146 for(optionNumber=0;optionNumber<numOfEvents;optionNumber++) {
147 eventSelectedTab.push(false);
148 myMenu.append('<div id='+id+'option'+optionNumber+' class=optionfrom'+id+' title="'+menuTitleTab_[optionNumber]+'" ></div>');
149 var Option=$('#'+id+'option'+optionNumber);
150
151 Option.addClass(menuIconClassAttributesTab_[optionNumber]).addClass(myMenu.attr("class")+"Button");
152
153 Option.css({
154 position :'absolute',
155 top : optionNumber*height_*V+HandleDecalTop*V,
156 left : (optionNumber)*(width_+rightMargin_)*H+HandleDecalLeft*H,
157 height : height_,
158 width : width_,
159 //backgroundColor : 'red' ,
160 zIndex: 130,
161 backgroundColor: backgroundColor_,
162 //borderStyle : borderStyle_,
163 //borderWidth: borderWidth_,
164 //borderColor : borderColor_,
165
166 });
167
168
169 Option.on('mouseover',function() {
170 if (configBehaviour.tooltip) {
171 $(this).append('<div id=tooltip class="tooltipfrom'+id
172 +' fg-tooltip ui-widget ui-widget-content ui-corner-all" style="font-size: 40px"></div>');
173 var tooltip=$('#tooltip');
174 tooltip.html($(this).attr("title"));
175 $(this).attr("title","");
176 if (orientation_ == "V") {
177 tooltip.append('<div class="fg-tooltip-pointer-down ui-widget-content"><div class="fg-tooltip-pointer-down-inner"></div></div></div>');
178 tooltip.css("top","-180px");
179 } else {
180 tooltip.append('<div class="fg-tooltip-pointer-up ui-widget-content"><div class="fg-tooltip-pointer-down-inner"></div></div></div>');
181 tooltip.css("top","240px");
182 }
183 tooltip.fadeIn('500');
184 tooltip.fadeTo('10',10);
185 }
186
187 $('#'+this.id).css('-webkit-transform','scale(1.5)').css('-moz-transform','scale(1.5)');
188
189 }).on('mouseout',function() {
190 if (configBehaviour.tooltip) {
191 $(this).attr("title",$(this).children('div#tooltip').text());
192 $(this).children('div#tooltip').remove();
193 }
194
195 $('#'+this.id).css('-webkit-transform','scale(1)').css('-moz-transform','scale(1)');
196
197 })
198
199 $('#'+id+'option'+optionNumber).on({
200
201 // mouseleave : function(e){
202
203 // //e.stopPropagation();
204
205 // },
206
207
208
209 // mouseenter : function(e){
210
211 // //e.stopPropagation();
212
213 // },
214
215
216
217 click : function(e){
218 var optionNumber = parseInt(this.id.replace(this.parentNode.id.replace("menu","")+'option',''));
219 var id = this.className.match(/optionfrom\w+/g)[0].replace('optionfrom','');
220
221
222 if (menuShareEvent[optionNumber] && ! $('#'+id+'option'+optionNumber).hasClass("NotSharedAgain") && my_user != "Anonymous" ) {
223 cdata={"room":my_session,"Menu":id,"optionNumber":optionNumber,"optionButton":menuIconClassAttributesTab_[optionNumber]};
224 socket.emit("click_Menu", cdata, callback=function(sdata){
225 console.log("socket send Menu ", cdata);
226 });
227 return;
228 }
229 if(eventSelectedTab[optionNumber]==false) {
230 if ( this.className.match(/disable/) == null ) {
231 // Loop on menu items to leave currently selected one
232 if(only_one_option==true) {
233 var p = 0;
234
235 for(p=0;p<eventSelectedTab.length;p++) {
236 if(p!=optionNumber && eventSelectedTab[p]==true) {
237 eventSelectedTab[p]=false;
238 menuEventTab[p](eventSelectedTab[p],id,p);
239 }
240 }
241 }
242 eventSelectedTab[optionNumber]=true;
243 //$('#menu'+id+'>#option'+optionNumber).css({backgroundColor : 'rgb(125,126,142)'});
244 // Send reference to the options to allow users to change apparence if the default behavior is not convenient
245 menuEventTab[optionNumber](eventSelectedTab[optionNumber],id,optionNumber);
246
247 // if(this.className.match(/(supermenu|NodeMenu|Tag|Rotate|OnOff|QRcode|Info|efresh)/g) != null || id < 999) {
248 // // Regex to select "Info" and "NodeMenu" options; id<999 means: allow when nodeMenu is open
249 // EnableDragAndDrop();
250 // } else {
251 // BlockDragAndDrop();
252 // }
253 }
254 } else {
255 eventSelectedTab[optionNumber]=false;
256 menuEventTab[optionNumber](eventSelectedTab[optionNumber],id,optionNumber);
257
258 EnableDragAndDrop();
259 }
260 //console.log(this.className, this.className.match("ranspa"), this.className.match("nfo"), _allowDragAndDrop);
261 }
262
263
264 });
265
266 }
267
268 if (menubox_) {
269 var classes = myMenu.attr('class');
270 classes = 'ui-draggable ' +classes;
271 myMenu.attr('class', classes);
272
273 //HandleDecalLeft=parseInt(HandleDecalLeft*1.5);
274
275 myMenu.append('<div id=MenuBox'+id+'></div>');
276 var MenuBox=$('#MenuBox'+id);
277 MenuBox.append('<div id=handleMenu'+id+' class=menu-handle-off ></div>');
278 if (orientation_ == "V") {
279 var MenuBoxWidth=width_;
280 var MenuBoxHeight=HandleDecalTop;
281 } else {
282 var MenuBoxWidth=HandleDecalLeft;
283 var MenuBoxHeight=height_;
284 }
285
286 MenuBox.css({
287 position :'absolute',
288 top : 0,
289 left : 0,
290 height : MenuBoxHeight,
291 width : MenuBoxWidth,
292 //backgroundColor : 'red' ,
293 zIndex: 130,
294 //borderStyle : borderStyle_,
295 //borderWidth: borderWidth_,
296 //borderColor : borderColor_,
297
298 });
299 var HandleMenu=$('#handleMenu'+id);
300 var HandleMenuDraggable=false;
301
302 HandleMenu.css({
303 position :'absolute',
304 top : 0,
305 left : 0,
306 height : HandleDecalTop,
307 width : HandleDecalLeft,
308 zIndex: 130,
309 });
310
311 if (touchok) {
312 var draggingMenu = new Map(); // maps touch IDs to drag state objects
313 touchstartMenuHandle = function (ev) {
314 for (var i = 0; i < ev.changedTouches.length; i++) {
315 var touch = ev.changedTouches[i];
316 var targetid=touch.target.id;
317 if (targetid.replace("handleMenu", "") == id ) {
318 var rect = {
319 top: parseInt(myMenu.css('top').replace('px','')),
320 left: parseInt(myMenu.css('left').replace('px','')),
321 };
322 HandleMenu.removeClass("menu-handle-off").addClass("menu-handle-on");
323 draggingMenu.set(touch.identifier, {
324 target: touch.target,
325 top: rect.top,
326 left: rect.left,
327 prevX: touch.pageX,
328 prevY: touch.pageY,
329 });
330
331 //$('#'+targetid).css({'width': parseInt($('#'+targetid).css('width'))*2+'px','height': parseInt($('#'+targetid).css('height'))*2+'px'});
332 $('#'+targetid).css('-webkit-transform','scale(2)').css('-moz-transform','scale(2)');
333
334 }
335 }
336 ev.stopPropagation();
337 };
338
339 touchmoveMenuHandle = function (ev) {
340 for (var i = 0; i < ev.changedTouches.length; i++) {
341 var touch = ev.changedTouches[i];
342 var targetid=touch.target.id;
343 var dragstate = draggingMenu.get(touch.identifier);
344 if (targetid.replace("handleMenu", "") == id && dragstate) {
345 HandleMenu.removeClass("menu-handle-on").addClass("menu-handle-dragging");
346 dragstate.left = parseInt(dragstate.left)+touchspeed*(touch.pageX - dragstate.prevX);
347 dragstate.top = parseInt(dragstate.top)+touchspeed*(touch.pageY - dragstate.prevY);
348 myMenu.css({left: dragstate.left+'px',
349 top: dragstate.top+'px'});
350 dragstate.prevX = touch.pageX;
351 dragstate.prevY = touch.pageY;
352 }
353 }
354 //ev.preventDefault()
355 ev.stopPropagation();
356 };
357
358 touchendMenuHandle = function (ev) {
359 for (var i = 0; i < ev.changedTouches.length; i++) {
360 var touch = ev.changedTouches[i];
361 var targetid=touch.target.id;
362 if (targetid.replace("handleMenu", "") == id ) {
363 draggingMenu.delete(touch.identifier);
364 HandleMenu.removeClass("menu-handle-on").removeClass("menu-handle-dragging").addClass("menu-handle-off");
365 $('#'+targetid).css('-webkit-transform','scale(1)').css('-moz-transform','scale(1)');
366 }
367 }
368 };
369
370 HandleMenu.on({
371 touchstart: touchstartMenuHandle,
372 touchmove: touchmoveMenuHandle,
373 touchend: touchendMenuHandle,
374 });
375
376 }
377
378 var HandleLeave = function(e){
379 HandleMenu.removeClass("menu-handle-on").removeClass("menu-handle-dragging").addClass("menu-handle-off");
380 e.stopPropagation();
381 }
382 var HandleEnter = function(e){
383 HandleMenu.removeClass("menu-handle-off").addClass("menu-handle-on");
384
385 e.stopPropagation();
386 }
387
388 HandleMenu.on({
389
390 mouseleave : HandleLeave,
391
392 mouseenter : HandleEnter,
393
394 click : function(e){
395 if (HandleMenuDraggable) {
396 HandleMenuDraggable=false;
397 myMenu.draggable("destroy");
398 HandleMenu.on("mouseenter",HandleEnter);
399 HandleMenu.on("mouseleave",HandleLeave);
400 } else {
401 HandleMenu.removeClass("menu-handle-on").addClass("menu-handle-dragging");
402 myMenu.draggable();
403 HandleMenu.off("mouseenter");
404 HandleMenu.off("mouseleave");
405 HandleMenuDraggable=true;
406 }
407 }
408 });
409
410 MenuBox.append('<div id=dropdown ></div>');
411 var DropDown=$('#MenuBox'+id+'>#dropdown');
412 if (orientation_=='V') {
413 DropDown.addClass("drop-down-menu");
414 DropDown.css({
415 position :'absolute',
416 top : 0,
417 width : width_-HandleDecalLeft,
418 left : HandleDecalLeft,
419 height : HandleDecalTop,
420 zIndex: 130,
421 });
422 } else {
423 DropDown.addClass("drop-right-menu");
424 DropDown.css({
425 position :'absolute',
426 top : HandleDecalTop,
427 width : HandleDecalLeft,
428 left : 0,
429 height : height_-HandleDecalTop,
430 zIndex: 130,
431 });
432 }
433 var DropDownState=true;
434 DropDown.on({
435
436 click : function(e){
437 if (DropDownState) {
438 for(optionNumber=0;optionNumber<numOfEvents;optionNumber++) {
439 var Option=$('#'+id+'option'+optionNumber);
440 Option.hide();
441 }
442 DropDownState=false;
443 if (orientation_=='V') {
444 DropDown.removeClass("drop-down-menu").addClass("drop-left-menu");
445 } else {
446 DropDown.removeClass("drop-right-menu").addClass("drop-down-menu");
447 }
448 } else {
449 for(optionNumber=0;optionNumber<numOfEvents;optionNumber++) {
450 var Option=$('#'+id+'option'+optionNumber);
451 Option.show();
452 }
453 DropDownState=true;
454 if (orientation_=='V') {
455 DropDown.removeClass("drop-left-menu").addClass("drop-down-menu");
456 } else {
457 DropDown.removeClass("drop-down-menu").addClass("drop-right-menu");
458 }
459 }
460 }
461 });
462 }
463
464 $('#menu'+id).on({ // Is this really useful ? To check, but it seems impossible to click on a menu,
465 // since the menu options are on it (higher z-index), and their event defined above, + all events only trigger "stopPropagation", ie "do nothing"
466 // When commenting the whole thing, the menu behaviour doesn’t change
467
468 mouseleave : function(e){
469
470 e.stopPropagation();
471
472 },
473
474
475
476 mouseenter : function(e){
477
478 e.stopPropagation();
479
480 },
481
482
483 dblclick : function(e){
484
485 e.stopPropagation();
486 },
487
488 click : function(e){
489
490 e.stopPropagation();
491 }
492
493 });
494
495 };
496
497 this.buildHtmlMenu();
498
499
500 this.getHtmlMenuSelector = function(){
501 return '#menu'+id;
502
503 };
504
505 this.closeAllOptions = function(){
506 var myMenu=$("#menu"+id);
507 for(optionNumber=0;optionNumber<numOfEvents;optionNumber++) {
508 var thisoption=$('#'+id+'option'+optionNumber);
509 var tmp_class = thisoption.attr("class").match(/\w+ButtonIcon/g)[0];
510 var isNotClosed = tmp_class.match("close");
511 if (isNotClosed) {
512 thisoption.addClass("NotSharedAgain");
513 thisoption.click();
514 thisoption.removeClass("NotSharedAgain");
515 }
516 }
517 };
518
519 };
520
521 })