https://damier.info/classes/commons/resources/flyoutmenu/flyoutmenu.js?1001067

1/* globals $ */
2
3var flyoutMenu = flyoutMenu || {};
4var hasTouch = function () {
5  return "ontouchstart" in window;
6};
7
8(function(){
9
10  flyoutMenu.flyoutTimer = null;
11
12  flyoutMenu.initFlyoutMenu =  function(menuData, mode) {
13
14    var showFlyoutMenu = function(e) {
15      var index = e.data.index;
16      var subMenuPanel, top, left;
17
18      clearTimeout(flyoutMenu.flyoutTimer);
19
20      menuData.forEach(function(data, i) {
21        if (i !== index) {
22          subMenuPanel = $("#ys_submenu_" + i);
23          subMenuPanel.hide();
24        }
25      });
26
27
28      var menuItem = $("#ys_menu_" + index).find("a");
29      var offset = menuItem.offset();
30      subMenuPanel = $("#ys_submenu_" + index);
31
32      if (mode === "flyover_vertical") {
33        top = offset.top;
34        left = offset.left + menuItem.outerWidth() + 10;
35      } else {
36        top = offset.top + menuItem.outerHeight();
37        left = offset.left + parseInt(menuItem.css("padding-left"));
38      }
39
40      subMenuPanel.css("top", top);
41      subMenuPanel.css("left", left);
42
43      subMenuPanel.fadeIn("fast");
44
45      if (subMenuPanel.outerWidth() < 150) {
46        subMenuPanel.css("width", 150);
47      }
48    };
49
50    var hideFlyoutMenu = function(e) {
51      var subMenuPanel = $("#ys_submenu_" + e.data.index);
52
53      flyoutMenu.flyoutTimer = setTimeout(function(){
54        subMenuPanel.fadeOut("fast");
55      }, 300);
56    };
57
58    var menuTouch = function(e) {
59      var index = e.data.index;
60      var menuLink = e.data.menuLink;
61
62      if (menuLink.hasClass("touched") || menuData[index].children.length === 0) {
63        menuLink.dataNoClick = false;
64      } else {
65        var $document = $(document);
66        menuLink.dataNoClick = true;
67        menuLink.addClass("touched");
68
69        var touchDocument = function(e) {
70          if (!menuLink.is(e.target)) {
71            $document.off("touchstart");
72            menuLink.removeClass("touched");
73            hideFlyoutMenu(e);
74          }
75        };
76
77        $document.on("touchstart", {index: index}, touchDocument);
78        showFlyoutMenu(e);
79      }
80    };
81
82    var menuClick = function(e) {
83      if (e.data.menuLink.dataNoClick) {
84        e.preventDefault();
85      }
86    };
87
88    menuData.forEach(function(data, i) {
89      var menuItem = $("#ys_menu_" + i);
90      var newSubMenuPanel = $("#ys_submenu_" + i);
91
92      newSubMenuPanel.detach().appendTo("body");
93
94      newSubMenuPanel.find("a").css({
95        "font-size": menuItem.css("font-size"),
96        "font-family": menuItem.css("font-family")
97      });
98
99      if (hasTouch()) {
100        var menuLink = menuItem.find("a");
101        menuLink.dataNoclick = false;
102        menuLink.on("touchstart", {index: i, menuLink: menuLink}, menuTouch)
103                .on("click", {menuLink: menuLink}, menuClick);
104      }
105
106      menuItem.mouseenter({index: i}, showFlyoutMenu);
107      menuItem.mouseleave({index: i}, hideFlyoutMenu);
108
109      newSubMenuPanel.mouseenter({index: i}, showFlyoutMenu);
110      newSubMenuPanel.mouseleave({index: i}, hideFlyoutMenu);
111    });
112  };
113})();