paneMenu.js

Go to the documentation of this file.

 
define( [
                'include/modal/modal',
                'remoto!stdlib:js/include/utils.js',
                'remoto!stdlib:js/include/objectRegistry.js',
                'jquery/jquery',
                'jquery/ui/jquery.ui.core',             //for the directory arrow icon
                "remoto!stdlib:js/paneManager/paneMenu.css",
        ],
        function(modal,utils,objectRegistry)
        {
                'use strict';
 
                var _menuManager;
                var MAX_ITEM_LENGTH = 50;
 
                function paneMenuItem( path, label, callback, data, test, icon, submenu )
                {
                        this._path = path;
                        this._label = label;
                        this._callback = callback;
                        this._data = data || {};
                        this._test = test || (submenu ? this.submenuEmptyTest.bind(this) : null);               //FIXME: a default test for submenus being empty should be implemented, however addItem / addSubmenu are the way it's currently implemented.
                        this._icon = icon;
                        this._submenu = submenu;
 
                        this._html = null;
 
                        //console.log(arguments);
                        //console.trace();
                }
 
                paneMenuItem.prototype = {
 
                        createHTML:     function(_modal,id,caller)
                                        {
                                                if (this._html)
                                                {       this.activate(_modal,id,caller);
                                                        return this._html;
                                                }
 
                                                var j = $("<div class='paneMenuItem'>");
                                                if (typeof this._label === "function")
                                                        j.text( this._label().toString().substring(0,MAX_ITEM_LENGTH) );
                                                else
                                                        j.text( this._label.substring(0,MAX_ITEM_LENGTH) || "[no name]" );
 
                                                if (this._icon)
                                                {
                                                        var ii = (typeof this._icon ==="function") ? this._icon() : this._icon;
 
                                                        if (ii.startsWith("data:image/svg+xml;utf8,"))
                                                        {
                                                                ii = $(ii.replace("data:image/svg+xml;utf8,",""));
                                                                ii.addClass("paneMenuIcon");
                                                        }
                                                        else if (ii.startsWith("data:image/"))
                                                        {
                                                                ii = $("<img>").attr("src",ii).addClass("paneMenuIcon");
                                                        }
 
                                                        j.prepend( ii );
                                                }
 
                                                //if (this._submenu)    j.css("padding-right","17px").append("<span class='ui-icon ui-icon-triangle-1-e' style='display:inline-block; position:absolute; top:4px; right:0px;' />");
                                                if (this._submenu)      j.css("padding-right","17px").append("<span class='subMenu'>&#9656;</span>");
 
                                                //j.bind("mouseleave", false);
 
                                                this._html = j;
 
                                                this.activate(_modal,id,caller);
 
                                                return this._html;
                                        },
 
                        activate:       function(_modal,id,caller)
                                        {
                                                //this._html.find(".paneMenu").remove();
                                                //modal.dismissTo(_modal);
 
                                                if (typeof this._label === "function")
                                                {       this._html.text( this._label() );
                                                        if (this._icon)         this._html.prepend( (typeof this._icon ==="function") ? this._icon() : this._icon);
                                                        if (this._submenu)      this._html.css("padding-right","17px").append("<span class='ui-icon ui-icon-triangle-1-e' style='display:inline-block; position:absolute; top:4px; right:0px;' />");
                                                }
 
                                                if (!this._test || this._test===true || (this._test && this._test()))           //run test to see if menu item is valid, and link to the modal
                                                {                                                                               //if there is no test, or the test succeeds, enable the button.
                                                        this._html.removeClass("paneMenuItemDisabled");
                                                        this._html.unbind("click mouseenter");
                                                        if (this._submenu)
                                                        {       var THIS = this;
                                                                this._html.bind("mouseenter", function(e)
                                                                        {
                                                                                var p = (THIS._path instanceof Function) ? THIS._path() : (THIS._path || THIS._data.menu);
                                                                                var s = _menuManager.openMenu( p, THIS._html, "R", caller.data );
                                                                                if (!s) return false;
                                                                                s.chain( {      "dismiss":      function()
                                                                                                                {
                                                                                                                        //console.log("called dismiss for "+THIS._label);
                                                                                                                        if (!THIS._html.parent().is(":hover"))
                                                                                                                                return _modal.execEvent("dismiss");
                                                                                                                        else if (!THIS._html.is(":hover"))
                                                                                                                        {       modal.dismissTo(_modal);
                                                                                                                                //THIS._html.find(".paneMenu").remove();
                                                                                                                        }
                                                                                                                },
                                                                                                "*":            function(eventName, e)
                                                                                                                {
                                                                                                                        //console.log(arguments);
                                                                                                                        //console.log("called * for "+THIS._label);
                                                                                                                        //console.log(caller);
                                                                                                                        if (THIS._callback)
                                                                                                                        {       var p = (typeof eventName == "number") ? _menuManager.getMenu(THIS._data.menu)._items[eventName]._data : eventName;
                                                                                                                                //THIS._callback.call(THIS,_menuManager._paneManager._primaryCell,p);
                                                                                                                                //console.log(p,this);
                                                                                                                                THIS._callback.call(THIS,caller.data,p);
                                                                                                                                //return _modal.execEvent("dismiss");           //fixme
                                                                                                                        }
                                                                                                                        else if (eventName)
                                                                                                                        {
                                                                                                                                var m = (THIS._data.menu instanceof Function) ? THIS._data.menu() : THIS._data.menu;
                                                                                                                                //console.log(m,eventName);
                                                                                                                                var item = _menuManager.getMenu(m)._items[eventName]._data;
                                                                                                                                //console.log(item);
                                                                                                                                return _modal.execEvent("*",item);
                                                                                                                        }
                                                                                                                },
                                                                                         } );
 
                                                                                return false;
                                                                        }
                                                                );
                                                                this._html.bind("mouseleave", function() {
                                                                        modal.dismissTo(_modal);
                                                                        return false;
                                                                } );
                                                        }
                                                        else
                                                        {       //this._html.bind("click mouseup",_modal.execEvent.bind(_modal,id));
                                                                this._html.bind("click", function(e) {  //DON'T add additional bind events... mouseup or touchend would be bad here... we need a "click" to bubble to close parent menus
                                                                        _modal.execEvent(id);
                                                                        //modal.dismissTo(null);        //DON'T dismiss menus, the menus will already close on their own
                                                                        //return false;                 //DON'T return false, let the event bubble so other menus will close in their own time
                                                                } );
                                                        }
                                                }
                                                else
                                                {       this._html.addClass("paneMenuItemDisabled");
                                                        this._html.unbind("click mouseenter");
                                                }
                                        },
 
                        setMenuItem:    function(l,t)
                                        {
                                                if (l)
                                                {       this._label = l;
                                                        this._html = null;                      //so it redraws
                                                        this._data["label"] = l;
                                                }
 
                                                if (t)
                                                {       this._data["type"] = t;
                                                }
                                        },
 
                        submenuEmptyTest: function()
                                        {
                                                return false;
                                        },
 
                        getMetadata:    function()
                                        {
                                                //console.log("paneMenuItem getMetadata: "+this._path);
                                                objectRegistry.metadataPath(this._path,this);
                                        },
 
                        applyMetadata:  function(path,metadata)
                                        {
                                                //console.log("menu item subscribe/metadata",arguments);
 
                                                if ("icon" in metadata)
                                                        this._icon = metadata.icon;
 
                                                this._metadata = metadata;
                                                //this._path = path;
 
                                                this._html = null;                              //so it rebuilds/redraws
                                        },
                }
 
                function paneMenuSpacer()
                {
                        this._html = null;
                }
 
                paneMenuSpacer.prototype = {
 
                        createHTML:     function()
                                        {
                                                if (this._html) return this._html;
 
                                                //return this._html = $("<hr style='padding: 0px; border: 1px solid var(--FG3); -webkit-margin-after:none; -webkit-margin-before: none;'/>");
                                                return this._html = $("<hr/>");
                                        },
                }
 
                function paneMenu(path,subscribe)
                {
                        this._path = path || "";
                        this._subscribe = subscribe;
                        this._classes = null;
                        this._defaultHandler = null;
                        this._items = [];
                        this._submenus = {};
 
                        if (subscribe)
                                objectRegistry.registerObject(this._path,this);
                }
 
                paneMenu.prototype = {
 
                        applyDiff:      function(d)
                                        {
                                                //console.log("menu diff",arguments);
                                                //console.error("diff menu items for "+this._path+" here!");
                                                //return;
 
                                                //FIXME: this does not sort out items added later that have an index
 
                                                if (d === null)
                                                        return;
 
                                                var diff = d;
                                                var k = Object.keys(diff);
                                                k.sort( function(a,b) {
                                                        var aa = diff[a].index || a || 0;
                                                        var bb = diff[b].index || b || 0;
                                                        if (aa > bb) return 1;
                                                        if (aa < bb) return -1;
                                                        return 0;
                                                } );
 
                                                var _i,m,p;
                                                var path,name;
                                                //for (var p in d)
                                                for (var i=0;i<k.length;i++)
                                                {
                                                        p = k[i];
                                                        m = d[p];
 
                                                        //console.log(m);
 
                                                        name = m.name || utils.fileNameFromPath(p);
                                                        path = utils.cleanPath(this._path+"/"+p);
                                                        if (m !== null)                 //an add
                                                        {
                                                                if (this.hasItemWithPath(path))
                                                                        continue;
 
                                                                //if it's a container
                                                                var submenu = false;
                                                                if ((typeof m === "boolean" && m === true) || (typeof m === "object" && m.container))
                                                                        submenu = true;
 
                                                                if (m instanceof Object && m.type === "spacer")
                                                                {
                                                                        this.addItem("spacer");
                                                                }
                                                                else
                                                                {
                                                                        if (submenu)
                                                                        {       //this.addSubMenu( name, path, m.icon );
                                                                                _i = this.addSubMenu( name, path, "<span class='paneMenuIcon'></span>" );
                                                                                var mm = _menuManager.createMenu( path, path, this._subscribe );
                                                                                mm._classes = this._classes;
                                                                                mm._defaultHandler = this._defaultHandler;
                                                                                this._submenus[path] = mm;
                                                                        }
                                                                        else
                                                                        {
                                                                                _i = new paneMenuItem(  path,
                                                                                                        name,
                                                                                                        m.callback,                     //if null, will fail over to the submenu's action
                                                                                                        m,                              //for data, include everything we got
                                                                                                        m.test,
                                                                                                        m.icon,
                                                                                                        m.submenu
                                                                                                );
 
                                                                                this.addItem( _i );
                                                                        }
 
 
                                                                        if (this._subscribe)
                                                                        {
                                                                                /*
                                                                                if (!(m.metadata && m.metadata.action))
                                                                                        _i.getMetadata();
                                                                                else
                                                                                        _i._metadata = m.metadata;
                                                                                */
                                                                                if (!m.metadata)
                                                                                        _i.getMetadata();
                                                                                else
                                                                                        _i.applyMetadata(path,m.metadata);
                                                                        }
 
                                                                        // --or--
                                                                //      m.label = m.name;
                                                                //      this.addItem( m );
                                                                }
                                                        }
                                                        else                            //remove
                                                        {
                                                                //console.error("Remove menu item here: "+p);
                                                                //console.log(d);
                                                                this.removeItem(path)
                                                        }
                                                }
 
                                                //console.log(this._items);
                                        },
 
                        removeItem:     function(p)//,recursive)
                                        {
                                                //console.log("remove menu item: "+p);
 
                                                if (typeof p == "number")
                                                {
                                                        this._items.splice(p,1);
                                                }
                                                else if (typeof p == "string")
                                                {
                                                        for (var i=0;i<this._items.length;i++)
                                                        {       //console.log(this._items[i]._path);
                                                                if (this._items[i]._path === p)
                                                                {       this._items.splice(i,1);
                                                                        break;
                                                                }
                                                        }
                                                }
                                                else if ((p instanceof paneMenuSpacer) || (p instanceof paneMenuItem))
                                                {
                                                        for (var i=0;i<this._items.length;i++)
                                                        {       if (this._items[i] === p)
                                                                {       this._items.splice(i,1);
                                                                        break;
                                                                }
                                                        }
                                                }
                                                else
                                                {       console.warn("Unknown removeItem index:");
                                                        console.warn(p);
                                                }
 
                                                if (this._items.length === 0)
                                                {       //FIXME: in general no trigger is needed, but there may be cases where a trigger is useful, like for submenus
                                                        //console.warn("The menu is now empty... should probably do something.");
                                                        //console.trace(this);
                                                        //console.log(_menuManager);
                                                }
                                        },
 
                        removeAllItems: function()
                                        {
                                                this._items = [];
                                                console.log("remove all menu items!");
                                        },
 
                        addItem:        function(p,l,t)
                                        {
                                                var m,_i=null;
 
                                                if (arguments.length == 1)                                                      //usually from diffs or spacers, but there are other cases
                                                        m = p;
 
                                                if (arguments.length == 3)                                                      //manual function method
                                                {       _i = new paneMenuItem(  p,
                                                                                l,
                                                                                null,
                                                                                {       path:   p,
                                                                                        label:  l,
                                                                                        type:   t,
                                                                                },
                                                                                true,
                                                                                null
                                                                        );
                                                }
                                                else if (m === "spacer")                                                                //spacer
                                                {
                                                        _i = new paneMenuSpacer();
                                                }
                                                else if (m instanceof paneMenuItem)
                                                {
                                                        _i = m;
                                                }
                                                else if (m instanceof Object)                                                   //manual object method
                                                {
                                                        _i = new paneMenuItem(  m.path,
                                                                                m.label,
                                                                                m.callback,
                                                                                m.data,
                                                                                m.test,
                                                                                m.icon,
                                                                                m.submenu
                                                                        );
                                                }
 
                                                this._items.push( _i );
 
                                                if (!_i)                                                                        //an error of some kind
                                                        console.error(arguments);
 
                                                return _i;                                                                                      //return the new item
                                        },
 
                        addSubMenu:     function(l,m,icon,submenuHandler)
                                        {
                                                return this.addItem( {
                                                                        path:           m,
                                                                        label:          l,
                                                                        callback:       submenuHandler,
                                                                        data:           { menu:m },
                                                                        test:           this.submenuTest.bind(this,m),
                                                                        icon:           icon,
                                                                        submenu:        true,
                                                                } );
                                        },
 
                        hasItemWithPath: function(p)
                                        {
                                                for (var i=0;i<this._items.length;i++)
                                                        if (this._items[i]._path === p)
                                                                return true;
 
                                                return false;
                                        },
 
                        hasItemWithLabel: function(l)
                                        {
                                                for (var i=0;i<this._items.length;i++)
                                                        if (this._items[i]._label === l)
                                                                return true;
 
                                                return false;
                                        },
 
                        createModalMenu:function(button,position,dismissCallback)
                                        {
                                                var THIS = this;
                                                position = (/^[TRBL]$/.test(position)) ? position : "B";                        //sanitize position
 
                                                var m = {
                                                        exec:   function(_modal)
                                                                {
                                                                        //create menu item
                                                                        var _m = $("<div class='paneMenu' />");
                                                                        var _b = $("<div class='paneMenuGutter' />").appendTo(_m);
 
                                                                        if (THIS._classes)
                                                                                _m.addClass(THIS._classes);
 
                                                                        for (var i=0; i<THIS._items.length; i++)
                                                                                _m.append( THIS._items[i].createHTML(_modal,i,this) );          //where this refers to 'm'... the object which contains exec().
 
                                                                        var _sub = !(modal.showing < 2);
 
                                                                        //mount the menu, so it's in the dom and sizing can be calculated.
                                                                        if (!_sub)
                                                                                _modal._mount.append(_m);
                                                                        else
                                                                        {       button.append && button.append(_m);
                                                                                _modal._jq = _m;
                                                                        }
 
                                                                        //do positioning
                                                                        var p = (!button.offset) ? { left:button.clientX, top:button.clientY } : button.offset();
                                                                        var d = (!button.offset) ? { w:0, h:0 } :{ w:button.outerWidth(), h:button.outerHeight() };
                                                                        var m = { w:_m.outerWidth(), h:_m.outerHeight() };
 
                                                                        switch(position)
                                                                        {
                                                                                case "T":       _m.offset( { left:p.left, top:(p.top-m.h+1) } );        break;
                                                                                case "R":       _m.offset( { left:(p.left+d.w), top:(p.top-1) } );      break;
                                                                                case "B":       _m.offset( { left:p.left, top:(p.top+d.h-1) } );        break;
                                                                                case "L":       _m.offset( { left:(p.left-m.w+1), top:p.top } );        break;
                                                                                default:        console.log("bad menu position: "+position);
                                                                        }
 
                                                                        var n = _m.offset();
                                                                        var w = { w:$(window).width(), h:$(window).height() };
 
                                                                        if (n.left < 0) _m.css( "left", p.left+d.w );
                                                                        if (n.left+m.w > w.w) _m.css( "left", (_sub?0:p.left)-m.w+(/[TB]/.test(position)?d.w:0) );
 
                                                                        if (n.top < 0) _m.css( "top", p.top+d.h );
                                                                        if (n.top+m.h > w.h) _m.css( "top", (_sub?0:p.top)-m.h+1+(/[LR]/.test(position)?d.h:0) );
 
                                                                        _m.bind("mouseleave", _modal.execEvent.bind(_modal,"dismiss"));
                                                                        _m.bind("mouseover", false );
                                                                        //_modal._mount.bind("click", _modal.execEvent.bind(_modal,"dismiss"));
                                                                        _modal._mount.bind("click", function() { modal.dismissTo(null); /*return false;*/ });
 
                                                                        if (dismissCallback)
                                                                                _modal.chain( { "*": dismissCallback } );
 
                                                                        return _modal;
                                                                },
                                                };
 
                                                return m;
                                        },
 
                        modalMenuEvents:function(dismissCallback,defaultCallback)
                                        {
                                                var THIS = this;
                                                var m = {};
 
                                                for (var i=0; i<this._items.length; i++)
                                                        if (this._items[i]._callback)
                                                                m[i] = this._items[i]._callback;
                                                        else
                                                        {       let j = i+0;
                                                                m[i] = function() { defaultCallback(j,THIS._items[j]); };
                                                        }
 
                                                m["dismiss"] = dismissCallback || false;
                                                //m["dismiss"] = function()
                                                //{
                                                //      console.log("MENU DISMISS!");
                                                //};
 
                                                //m["*"] = false;
                                                //m["*"] = function(a) {
                                                //      console.log("submenu catcher!");
                                                //      console.log(arguments);
                                                //      return a;
                                                //};
 
                                                return m;
                                        },
 
                        submenuTest:    function(menu)
                                        {
                                                var p = (menu instanceof Function) ? menu() : menu;
                                                var m = _menuManager.getMenu( p );
 
                                                if (!m) return false;
 
                                                if (m._items.length)
                                                        return true;
 
                                                return false;
                                        },
 
                        destroy:        function()
                                        {
                                                for (var s in this._submenus)
                                                //      this._submenus[s].destroy();
                                                        _menuManager.removeMenu(s);
 
                                                if (this._subscribe)
                                                        objectRegistry.unregisterObject(this._path,this,true,false,true);
 
                                                this._items = [];
                                                this._submenus = {};
                                        },
                }
 
                function menuManager()
                {
                        this._menus = {};
                }
 
                menuManager.prototype = {
 
                        createMenu:     function(m,p,subscribe)
                                        {
                                                if (this._menus[m])
                                                        return this._menus[m];
 
                                                return this._menus[m] = new paneMenu(p,subscribe);
                                        },
 
                        openMenu:       function(m,b,p,d,c)
                                        {       var n = this._menus[m];
                                                if (!n) { console.error("tried to open nonexistent menu: "+m); console.log(this._menus); return; }
                                                if (n._items.length===0) return null;
                                                var u = n.createModalMenu(b,p,c);
                                                var e = n.modalMenuEvents(null,n._defaultHandler);
                                                u.data = d;
                                                return modal.exec(u,e,false,modal.showing);
                                        },
 
                        getMenu:        function(m)
                                        {
                                                return this._menus[m];
                                        },
 
                        removeMenu:     function(m)
                                        {
                                                if (this._menus[m])
                                                        this._menus[m].destroy();
 
                                                delete this._menus[m];
                                        },
 
                        resetMenus:     function()
                                        {
                                                for (var m in this._menus)
                                                        this._menus[m].destroy();
 
                                                this._menus={};
                                        },
                }
 
                _menuManager = new menuManager();
 
                return _menuManager;
        }
);