CODEWITHSUNDEEP
jqueryhighchartstogglecontextmenu
DixiPoowa
DixiPoowa

Reputation: 133

Unable to programmatically toggle (close only) Highchart's default Context Menu using jQuery.toggle()

I am not an expert at all but I am genuinely losing my mind on this.

The comments included in my JSFiddle should be clear enough but I'll explain everything here too.

I want to be able to close HC's default Context Menu by clicking on the default hamburger button when the menu is already visible (because reasons...).

So I noticed a few things:

contextMenuButton.one("click touchstart", function(e){ /* Remove HC's events because I want a special behavior and don't know how to do it any other way, maybe I can extend or something ? */ $(contextMenuButton).prop('onclick',null).off('click'); /* My behaviour */ contextMenuButton.on("click touchstart", function(n){ toastr.info("tmpButtonContextMenu " + n.type + " custom"); tmp = contextMenuButton.parent().next(".highcharts-contextmenu").first(); tmp.toggle(); }); });

At this point I was seriously expecting it to work. I even tried doing it myself

tmp.css("display", tmp.css("display") == "none" ? "block" : "none";

Or JS

tmp[0].style.display = tmp[0].style.display == "none" ? "block" : "none";

But it still doesn't change anything.

After a while I noticed a prop hidden=trueso I tried playing with it a little but nothing changed...

I know I should just create my own menu and it would be much easier (and I'll be doing that anyway) but at this point I just want to know WHY it's acting the way it is.

tl;dr:

I'm switching HC's default context-menu's padding for a margin so I can click elements behind it and I want to be able to close said menu by clicking the export button (hamburger) again.

PS:

I'm using a library called ToastrJS for my mobile debugging (since I don't have a console there) and it proves that, indeed, my "custom" click is being called.

Edit:

Since I want to also keep the capability of closing the context menu by clicking anywhere else, I slightly modified the prototype like so:

addEvent(doc, 'mouseup', function (e) {  
    if($(e.target.parentElement).hasClass("highcharts-contextmenu-toggler"))  
        css(menu, { display: 'none' });  
    else   
        hide();  
})

and, at the end : 

if(chart.openMenu){
    chart.openMenu = false;
} else {
    css(menu, menuStyle);
    chart.openMenu = true;  
}

Upvotes: 0

Views: 270

Answers (1)

Kamil Kulig
Kamil Kulig

Reputation: 5826

I know I should just create my own menu and it would be much easier (and I'll be doing that anyway) but at this point I just want to know WHY it's acting the way it is.

It happens because Highcharts launches its own logic for hiding context menu anyway:

                        if (!chart.pointer.inClass(e.target, className)) {
                            hide();
                        }

So if you use toggle() you actually show the menu (it's already hidden in that moment).

Workaround:

I've overwritten Chart.prototype.contextMenu function and commented out the above piece of code.

Live demo: http://jsfiddle.net/BlackLabel/Lr74sou8/

Upvotes: 1

Related Questions