|
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