|
20 | 20 | this.on('mouseleave', '#notifications-schedule .entry', this.onEntryLeave, this);
|
21 | 21 | }
|
22 | 22 |
|
| 23 | + /** |
| 24 | + * Make the sidebar sortable and add drag&drop support. |
| 25 | + * |
| 26 | + * @param event The event object. |
| 27 | + */ |
23 | 28 | onRendered(event)
|
24 | 29 | {
|
25 | 30 | if (event.target !== event.currentTarget) {
|
|
46 | 51 | });
|
47 | 52 | }
|
48 | 53 |
|
| 54 | + /** |
| 55 | + * Handle drop event on the sidebar. |
| 56 | + * |
| 57 | + * @param event The event object. |
| 58 | + */ |
49 | 59 | onDrop(event)
|
50 | 60 | {
|
51 | 61 | event = event.originalEvent;
|
|
74 | 84 | form.requestSubmit();
|
75 | 85 | }
|
76 | 86 |
|
| 87 | + /** |
| 88 | + * Handle hover (`mouseenter`) event on schedule entries. |
| 89 | + * |
| 90 | + * @param event The mouse event object. |
| 91 | + */ |
77 | 92 | onEntryHover(event)
|
78 | 93 | {
|
79 |
| - const entry = event.currentTarget; |
80 |
| - const overlay = entry.parentElement; |
81 |
| - const grid = overlay.previousSibling; |
82 |
| - const sideBar = grid.previousSibling; |
83 |
| - |
84 |
| - let relatedElements; |
85 |
| - if ('rotationPosition' in entry.dataset) { |
86 |
| - relatedElements = Array.from( |
87 |
| - grid.querySelectorAll('[data-y-position="' + entry.dataset.rotationPosition + '"]') |
88 |
| - ); |
89 |
| - |
90 |
| - relatedElements.push(sideBar.childNodes[Number(entry.dataset.rotationPosition)]); |
91 |
| - } else { |
92 |
| - relatedElements = overlay.querySelectorAll( |
93 |
| - '[data-rotation-position="' + entry.dataset.entryPosition + '"]' |
94 |
| - ); |
95 |
| - } |
96 |
| - |
97 |
| - relatedElements.forEach((relatedElement) => { |
98 |
| - relatedElement.classList.add('highlighted'); |
99 |
| - }); |
| 94 | + event.data.self.handleEntryHover(event, true); |
100 | 95 | }
|
101 | 96 |
|
| 97 | + /** |
| 98 | + * Handle hover (`mouseleave`) event on schedule entries. |
| 99 | + * |
| 100 | + * @param event The mouse event object. |
| 101 | + */ |
102 | 102 | onEntryLeave(event)
|
103 | 103 | {
|
| 104 | + event.data.self.handleEntryHover(event); |
| 105 | + } |
| 106 | + |
| 107 | + /** |
| 108 | + * Handle hover (`mouseenter`|`mouseleave`) events on schedule entries. |
| 109 | + * |
| 110 | + * @param event The mouse event object. |
| 111 | + * @param {boolean} isHovered Whether the entry is hovered. |
| 112 | + */ |
| 113 | + handleEntryHover(event, isHovered = false) { |
104 | 114 | const entry = event.currentTarget;
|
105 | 115 | const overlay = entry.parentElement;
|
106 | 116 | const grid = overlay.previousSibling;
|
|
119 | 129 | );
|
120 | 130 | }
|
121 | 131 |
|
122 |
| - relatedElements.forEach((relatedElement) => { |
123 |
| - relatedElement.classList.remove('highlighted'); |
124 |
| - }); |
| 132 | + if (isHovered) { |
| 133 | + relatedElements.forEach((relatedElement) => { |
| 134 | + relatedElement.classList.add('highlighted'); |
| 135 | + }); |
| 136 | + } else { |
| 137 | + relatedElements.forEach((relatedElement) => { |
| 138 | + relatedElement.classList.remove('highlighted'); |
| 139 | + }); |
| 140 | + } |
125 | 141 | }
|
126 | 142 | }
|
127 | 143 |
|
|
0 commit comments