var CloudCommander, $; /* object contains jQuery-contextMenu * https://github.com/medialize/jQuery-contextMenu */ CloudCommander.Menu = new CloudCommander.Util(); CloudCommander.Menu.dir = './lib/client/menu/'; /* function return configureation * for menu */ CloudCommander.Menu.getConfig = (function(){ var lThis = this; return{ // define which elements trigger this menu selector: 'li', // define the elements of the menu items: { view: {name: 'View', callback: function(key, opt){ if(typeof CloudCommander.Viewer === 'function') CloudCommander.Viewer(); else{ var lViewer = CloudCommander.Viewer.get(); if(lViewer && lViewer.show) lViewer.show(); } }}, edit: {name: 'Edit', callback: function(key, opt){ lThis.Images.showLoad(); if(typeof CloudCommander.Editor === 'function') CloudCommander.Editor(); else{ var lEditor = CloudCommander.Editor.get(); if(lEditor && lEditor.show) lEditor.show(); } }}, 'delete': {name: 'Delete', callback: function(key, opt){ console.log('delete menu item choosen'); }} } }; }); /* function loads css and js of Menu * @pParent - this * @pPosition - position of menu */ CloudCommander.Menu.load = (function(pParent, pPosition){ return function(){ var ljsLoad_f = function(){ var lUISrc = pParent.dir + 'jquery.ui.position.js'; var lMenuSrc = pParent.dir + 'jquery.contextMenu.js'; pParent.jsload(lUISrc, function(){ pParent.jsload(lMenuSrc, pParent.show(pParent, pPosition)); }); }; var lSrc = pParent.dir +'jquery.contextMenu.css'; pParent.cssLoad({ src : lSrc, func : { onload: ljsLoad_f } }); }(); }); CloudCommander.Menu.set = (function(){ if(!this.seted){ $.contextMenu(this.getConfig()); var lThis = this; var lFunc_f = document.onclick; /* * Menu works in some crazy way so need a * little hack to get every thing work out. * When menu shows up, it drawing invisible * layer wich hides all elements of * Cloud Commander so it could not handle * onclick events. To get every thing work * how expected we hide out invisible layer * so for observer it is nothing special * is not going on. All magic happening in * DOM tree */ document.onclick = function(pEvent){ if(pEvent && pEvent.x && pEvent.y){ if(lLayer){ var lLayer = lThis.getById('context-menu-layer'); var lStyle; if(lLayer) lStyle = lLayer.style.cssText; /* hide invisible menu layer */ if(lStyle) lLayer.style.cssText = lStyle .replace('z-index: 1', 'z-index:-1'); /* get element by point */ var lElement = document.elementFromPoint(pEvent.x, pEvent.y); var lTag = lElement.tagName; var lParent; if(lTag === 'A' || lTag === 'SPAN'){ if (lElement.tagName === 'A') lParent = lElement.parentElement.parentElement; else if(lElement.tagName === 'SPAN') lParent = lElement.parentElement; lThis.setCurrentFile(lParent); } /* show invisible menu layer */ if(lLayer && lStyle) lLayer.style.cssText = lStyle; /* if document.onclick was set up * before us, it's best time to call it */ if(typeof lFunc_f === 'function') lFunc_f(); } } }; this.seted = true; } }); CloudCommander.Menu.seted = false; /* function shows menu for the first time * right away after loading */ CloudCommander.Menu.show = (function(pParent, pPosition){ return function(){ pParent.set(); pParent.Images.hideLoad(); if(pPosition && pPosition.x && pPosition.y) $('li').contextMenu(pPosition); else $('li').contextMenu(); }; }); /* key binding function */ CloudCommander.Menu.Keys = (function(pPosition){ "use strict"; var key_event = (function(){ return function(event){ /* если клавиши можно обрабатывать */ if(CloudCommander.keyBinded) /* if shift + F10 pressed */ if(event.keyCode === CloudCommander.KEY.F10 && event.shiftKey){ CloudCommander.Menu.show(); event.preventDefault(); } }; }); /* добавляем обработчик клавишь */ if (document.addEventListener) document.addEventListener('keydown', key_event(),false); else{ var lFunc; if(typeof document.onkeydown === 'function') lFunc = document.onkeydown; document.onkeydown = function(){ if(lFunc) lFunc(); key_event(); }; /* showing context menu preview*/ CloudCommander.Menu.show(); } CloudCommander.Menu.load(this, pPosition); });