Я вообще не эксперт, но я искренне схожу с ума по этому вопросу.
Комментарии, включенные в мой JSFiddle , должны быть достаточно ясными, но я все здесь тоже объясню.
Я хочу иметь возможность закрыть стандартное контекстное меню ХК, нажав кнопку гамбургера по умолчанию, когда меню уже видно (по причинам ...).
Так что я заметил нескольковещи:
По умолчанию HC позиционирует меню с отступами, поэтому «блокирует» фон с помощью невидимого хитбокса div.Я уже позаботился об этом
padding: 0 48px !important; /* just for the demo, i'm leaving the sides on */
margin: 48px 0 !important;
После программной генерации контекстного меню, во время первого нажатия на кнопку экспорта, он переключает состояние, и теперь его событие щелчка отображает контекстное меню (ноэто все что я думаю).Вот почему я «отменяю» его событие щелчка и добавляю мое.
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();
});
});
На данный момент я серьезно ожидал, что оно сработает.Я даже пытался сделать это сам
tmp.css("display", tmp.css("display") == "none" ? "block" : "none";
Или JS
tmp[0].style.display = tmp[0].style.display == "none" ? "block" : "none";
Но это все равно ничего не меняет.
Через некоторое время я заметил пропеллер hidden=true, поэтому я попытался немного поиграть с ним, но ничего не изменилось ...
Я знаю, что я должен просто создать свое собственное меню, и это будет намного проще (иЯ все равно это сделаю) но сейчас я просто хочу знать, ПОЧЕМУ он действует так, как есть.
tl; dr :
Я переключаю отступы контекстного меню по умолчанию для HC для поля, чтобы я мог щелкнуть по элементам позади него и хочу закрытьв этом меню, нажав кнопку экспорта (гамбургер) еще раз.
PS :
Я использую библиотеку ToastrJS для отладки мобильных устройств (так как я нетам есть консоль), и это доказывает, что мой «пользовательский» клик действительно вызывается.
Редактировать:
Поскольку я хочу также сохранить возможностьЗакрыв контекстное меню, щелкнув где-нибудь еще, я немного изменил прототип так:
addEvent(doc, 'mouseup', function (e) {
if($(e.target.parentElement).hasClass("highcharts-contextmenu-toggler"))
css(menu, { display: 'none' });
else
hide();
})
и, в конце:
if(chart.openMenu){
chart.openMenu = false;
} else {
css(menu, menuStyle);
chart.openMenu = true;
}