[SOLVED] Enhancing the toolbar

[brick__]

Hello guys,

I need help for a zimlet i'm trying to put together. The zimlet is pretty simple, it is just supposed to gather the REPLY, REPLY_ALL and FORWARD operations in one single dropdown menu.
But for some reason, i can get it to work, and the zimbra javascript codebase doesn't help me much... I've looked around the creation of the VIEW_MENU dropdown menu, in the zimbraMail/mail/controller/ZmMailListeController.js file, but i'm having a hard time trying to mimic how it's done.

TL;DR: The problem i'm having now since the 2nd edit is that i can't figure out how to bind the listeners to my menu. So the question is: How can I bind the existing replyListener to my menu item?

For now, all i can do is create a new button using the createOp() method, and i'm trying to set it as a ZmPopupMenu.

Code: Select all

ZmMyZimlet.prototype.initializeToolbar =
function(app, toolbar, controller, viewId) {
	var params = {
		text: "reply menu",
		tooltip: "dropdown reply menu",
		enabled: false,
		index: 1
	};
	
	button = toolbar.createOp(ZmOperation.REPLY, params);
	
	var menu = new ZmPopupMenu(button, null, null, controller);
	
	
    	var itemsParams = {
        	text: Reply
        };
	menu.createMenuItem(ZmOperation.REPLY, itemsParams);
	
	button.setMenu(menu);
}

But all i get is the dropdown menu (as I wanted it thouh), that does absolutely nothing. I'm sure there is a way to get the button already created, with there attributes (the image, the callback...), but i can't find a way to do it.

I've already been to the IRC channel, but never got any answers on my questions, so that's why i'm coming to the forum, which seems a better place to ask such things.
I'd really appreciate some help, and i'm pretty sure it's not that hard for someone who know his way around the JS side of Zimbra.

EDIT:
I actually improved on my original setup, and tried to get the existing ZmMenuItems of the desires ZmOperations by doing:

Code: Select all

// Assuming i am in the TV-main viewId
var this._replyItem = appCtxt.getCurrentController().getActionsMenu().getItems[4] // [4] corresponds to the reply ZmMenuItem

I get someting like this:

Code: Select all

ZmEnhancedToolbar.prototype.initializeToolbar =
function(app, toolbar, controller, viewId) {
    if(viewId == "TV-main") {
        this._replyItem = controller.getActionMenu().getItems()[4];
        this._replyAllItem = controller.getActionMenu().getItems()[5];
        this._forwardItem = controller.getActionMenu().getItems()[6];
    }

    var button = toolbar.createOp("REPLY_MENU", {
        text: "Répondre",
        enabled: false,
        index: 1
    });

    var menu = new ZmPopupMenu(button, null, null, controller);

    menu.addChild(this._replyItem);
    menu.addChild(this._replyAllItem);
    menu.addChild(this._forwardItem);

    button.setMenu(menu);
}

It's pretty much what i want, except the sub menu is incredibly narrow , and it (still) doesn't do anything... But since it has { width: 0px; }, i don't even know if i'm actually clicking on it, so it just might actually work.


2nd EDIT:
Ok, so i managed to create my menu. Turned out that getting the item back from the actionMenu doesn't work since it doesn't actually consider itself as an item of the newly created menu. I just had to create manually my items as follow:

Code: Select all

ZmEnhancedToolbar.prototype.initializeToolbar =
function(app, toolbar, controller, viewId) {
    if(viewId == "TV-main" || viewId == "CLV-main") {

    var button = toolbar.createOp("REPLY_MENU", {
        text: "Répondre",
        enabled: false,
        index: 1
    });

    var menu = new ZmPopupMenu(button, null, null, controller);

    menu.createMenuItem("REPLY", {
        text: ZmMsg.reply,
        image: "Reply",
        shortcut: ZmKeyMap.REPLY
    });

    menu.createMenuItem("REPLY_ALL", {
        text:ZmMsg.replyAll,
        image: "ReplyAll",
        shortcut: ZmKeyMap.REPLY_ALL
    });

    menu.createMenuItem("FORWARD", {
        text: ZmMsg.forward,
        image: "Forward",
        shortcut: ZmKeyMap.FORWARD
    });

    button.setMenu(menu);
}

I tried the static function ZmMailApp.addReplyMenu(button), thinking it would solve all my problems, but even though it does create the menu as i want it to, the menu items still don't do anything... So i stick with the code above since i have more control over what's happening, and the result is the same.

So there's no issue for the menu display, but now i have to bind the menu items to the listener. Is there an easy way to bind it to the existing _replyListener()? Or how can i trigger the reply feature?

[heswaran]

Hi,

You can try the below code:

Code: Select all

ZmBaseController.prototype.initializeToolbar = function(app, toolbar, controller, viewId) {
    var op = [ZmOperation.REPLY, ZmOperation.REPLY_ALL, ZmOperation.FORWARD];
    for (var i = 0; i < op.length; i++) {
        var button = toolbar.getButton(op[i]);
        if (button) {
            if (op[i] === ZmOperation.REPLY) {
                var replyMenu = new ZmPopupMenu(button, null, null, controller);
                button.setMenu(replyMenu);
            }
            var menuItem = replyMenu.createMenuItem(button.getHTMLElId(), {text:button.getText()});
            menuItem.addSelectionListener(controller._listeners[op[i]]);
            menuItem.setData(ZmOperation.KEY_ID, op[i]);
            //This will dispose reply all and forward button.
            if (op[i] === ZmOperation.REPLY_ALL || op[i] === ZmOperation.FORWARD) {
               button.dispose();
            }
        }
    }
};

[brick__]

Well, that pretty much did the trick. I mean, it did exactly the trick.
I knew there was a way to get back those already existing buttons, i just couldn't figure out how.
Thanks @heswaran, i hardly would have come up with a better way to do it. I'll mark the post as solved.