blob: 3ee7ec3de6165e9ce752b8ce0dbad29b2e9c1a10 [file] [log] [blame]
Nils Diewald0e6992a2015-04-14 20:13:52 +00001 /**
Akron52ed22d2018-07-11 17:05:19 +02002 * Menu to choose from in a button group.
Nils Diewald0e6992a2015-04-14 20:13:52 +00003 */
Akron52ed22d2018-07-11 17:05:19 +02004define(['menu'], function (menuClass) {
Nils Diewald0e6992a2015-04-14 20:13:52 +00005 "use strict";
6
7 return {
Nils Diewald7148c6f2015-05-04 15:07:53 +00008
9 /**
10 * Create new menu object.
Akron7f9a6a32018-07-18 15:05:23 +020011 * Pass the panel object
Nils Diewald7148c6f2015-05-04 15:07:53 +000012 * and the item parameters.
13 *
Akron7f9a6a32018-07-18 15:05:23 +020014 * @param panel The panel object
Nils Diewald7148c6f2015-05-04 15:07:53 +000015 * @param params The match menu items
16 * as an array of arrays.
17 */
Akron52ed22d2018-07-11 17:05:19 +020018 create : function (list, itemClass) {
Akronbf713fc2020-10-13 10:44:35 +020019 const obj = Object.create(menuClass)
20 .upgradeTo(this)
21 ._init(list, {itemClass : itemClass});
Nils Diewald0e6992a2015-04-14 20:13:52 +000022 obj.limit(6);
Akroneaba63e2018-01-26 19:49:30 +010023
Akronbf713fc2020-10-13 10:44:35 +020024 const e = obj.element();
Nils Diewald0e6992a2015-04-14 20:13:52 +000025
26 // This is only domspecific
Akroneaba63e2018-01-26 19:49:30 +010027 e.addEventListener('blur', function (e) {
Akrond67d45b2017-05-18 21:47:38 +020028 this.menu.hide();
Nils Diewald0e6992a2015-04-14 20:13:52 +000029 });
Akroneaba63e2018-01-26 19:49:30 +010030
Akron52ed22d2018-07-11 17:05:19 +020031 e.classList.add('button-group-list');
Akroneaba63e2018-01-26 19:49:30 +010032
33 // Add menu to body
34 document.getElementsByTagName('body')[0].appendChild(e);
35
Nils Diewald0e6992a2015-04-14 20:13:52 +000036 return obj;
37 },
Nils Diewald7148c6f2015-05-04 15:07:53 +000038
Akronbf713fc2020-10-13 10:44:35 +020039
Nils Diewald7148c6f2015-05-04 15:07:53 +000040 /**
Akron7f9a6a32018-07-18 15:05:23 +020041 * The panel object of the menu.
Nils Diewald7148c6f2015-05-04 15:07:53 +000042 */
Akron7f9a6a32018-07-18 15:05:23 +020043 panel :function (panelVar) {
44 if (panelVar !== undefined)
45 this._panel = panelVar;
Akroneaba63e2018-01-26 19:49:30 +010046
Akron7f9a6a32018-07-18 15:05:23 +020047 return this._panel;
Akroneaba63e2018-01-26 19:49:30 +010048 },
49
Akronbf713fc2020-10-13 10:44:35 +020050
Akronbec4a6a2018-07-10 14:45:15 +020051 // Attach menu to button
Akron52ed22d2018-07-11 17:05:19 +020052 button : function (btn) {
Akron257aa852018-02-06 19:29:51 +010053
Akron1801c5c2018-07-16 18:15:48 +020054 this._button = btn;
55
Akron1801c5c2018-07-16 18:15:48 +020056 this._repos(this._button);
Akron257aa852018-02-06 19:29:51 +010057 this.slider().reInit();
58
59 /*
60 * This is a suboptimal scrolling solution, see
61 * see https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects
62 */
63 if (this._onscroll !== undefined) {
64 window.removeEventListener('scroll', this._onscroll);
65 };
66
67 this._onscroll = function () {
Akron1801c5c2018-07-16 18:15:48 +020068 this._repos(this._button);
Akron257aa852018-02-06 19:29:51 +010069 }.bind(this);
70
71 window.addEventListener('scroll', this._onscroll);
72 },
73
Akronbf713fc2020-10-13 10:44:35 +020074
Akron257aa852018-02-06 19:29:51 +010075 // Overwrite onHide method
76 onHide : function () {
77
78 // Remove listener
79 if (this._onscroll !== undefined) {
80 window.removeEventListener('scroll', this._onscroll);
81 };
Akronc296ca22018-04-24 16:35:26 +020082 this.element().blur();
Akron257aa852018-02-06 19:29:51 +010083 },
84
85 _repos : function (e) {
Akronbf713fc2020-10-13 10:44:35 +020086 const bounding = e.getBoundingClientRect();
Akroneaba63e2018-01-26 19:49:30 +010087 this._element.style.left = bounding.left + "px";
Akron257aa852018-02-06 19:29:51 +010088 this._element.style.top = (
89 bounding.top +
90 bounding.height -
91 this._element.clientHeight
92 ) + "px";
Nils Diewald0e6992a2015-04-14 20:13:52 +000093 }
94 };
95});