author | ymh <ymh.work@gmail.com> |
Mon, 08 Sep 2025 19:44:41 +0200 | |
changeset 23 | 417f20492bf7 |
parent 21 | 48c4eec2b7e6 |
permissions | -rw-r--r-- |
9 | 1 |
/** |
2 |
* @output wp-includes/js/admin-bar.js |
|
3 |
*/ |
|
16 | 4 |
/** |
5 |
* Admin bar with Vanilla JS, no external dependencies. |
|
6 |
* |
|
7 |
* @since 5.3.1 |
|
8 |
* |
|
9 |
* @param {Object} document The document object. |
|
10 |
* @param {Object} window The window object. |
|
11 |
* @param {Object} navigator The navigator object. |
|
12 |
* |
|
13 |
* @return {void} |
|
14 |
*/ |
|
15 |
( function( document, window, navigator ) { |
|
16 |
document.addEventListener( 'DOMContentLoaded', function() { |
|
17 |
var adminBar = document.getElementById( 'wpadminbar' ), |
|
18 |
topMenuItems, |
|
19 |
allMenuItems, |
|
20 |
adminBarLogout, |
|
21 |
adminBarSearchForm, |
|
22 |
shortlink, |
|
23 |
skipLink, |
|
24 |
mobileEvent, |
|
25 |
adminBarSearchInput, |
|
26 |
i; |
|
0 | 27 |
|
16 | 28 |
if ( ! adminBar || ! ( 'querySelectorAll' in adminBar ) ) { |
29 |
return; |
|
30 |
} |
|
31 |
||
32 |
topMenuItems = adminBar.querySelectorAll( 'li.menupop' ); |
|
33 |
allMenuItems = adminBar.querySelectorAll( '.ab-item' ); |
|
21
48c4eec2b7e6
Add CLAUDE.md documentation and sync WordPress core files
ymh <ymh.work@gmail.com>
parents:
16
diff
changeset
|
34 |
adminBarLogout = document.querySelector( '#wp-admin-bar-logout a' ); |
16 | 35 |
adminBarSearchForm = document.getElementById( 'adminbarsearch' ); |
36 |
shortlink = document.getElementById( 'wp-admin-bar-get-shortlink' ); |
|
37 |
skipLink = adminBar.querySelector( '.screen-reader-shortcut' ); |
|
38 |
mobileEvent = /Mobile\/.+Safari/.test( navigator.userAgent ) ? 'touchstart' : 'click'; |
|
0 | 39 |
|
16 | 40 |
// Remove nojs class after the DOM is loaded. |
41 |
removeClass( adminBar, 'nojs' ); |
|
0 | 42 |
|
16 | 43 |
if ( 'ontouchstart' in window ) { |
44 |
// Remove hover class when the user touches outside the menu items. |
|
45 |
document.body.addEventListener( mobileEvent, function( e ) { |
|
46 |
if ( ! getClosest( e.target, 'li.menupop' ) ) { |
|
47 |
removeAllHoverClass( topMenuItems ); |
|
48 |
} |
|
49 |
} ); |
|
50 |
||
51 |
// Add listener for menu items to toggle hover class by touches. |
|
52 |
// Remove the callback later for better performance. |
|
53 |
adminBar.addEventListener( 'touchstart', function bindMobileEvents() { |
|
54 |
for ( var i = 0; i < topMenuItems.length; i++ ) { |
|
55 |
topMenuItems[i].addEventListener( 'click', mobileHover.bind( null, topMenuItems ) ); |
|
0 | 56 |
} |
57 |
||
16 | 58 |
adminBar.removeEventListener( 'touchstart', bindMobileEvents ); |
59 |
} ); |
|
60 |
} |
|
61 |
||
62 |
// Scroll page to top when clicking on the admin bar. |
|
63 |
adminBar.addEventListener( 'click', scrollToTop ); |
|
64 |
||
65 |
for ( i = 0; i < topMenuItems.length; i++ ) { |
|
66 |
// Adds or removes the hover class based on the hover intent. |
|
67 |
window.hoverintent( |
|
68 |
topMenuItems[i], |
|
69 |
addClass.bind( null, topMenuItems[i], 'hover' ), |
|
70 |
removeClass.bind( null, topMenuItems[i], 'hover' ) |
|
71 |
).options( { |
|
72 |
timeout: 180 |
|
73 |
} ); |
|
74 |
||
75 |
// Toggle hover class if the enter key is pressed. |
|
76 |
topMenuItems[i].addEventListener( 'keydown', toggleHoverIfEnter ); |
|
77 |
} |
|
78 |
||
79 |
// Remove hover class if the escape key is pressed. |
|
80 |
for ( i = 0; i < allMenuItems.length; i++ ) { |
|
81 |
allMenuItems[i].addEventListener( 'keydown', removeHoverIfEscape ); |
|
82 |
} |
|
83 |
||
84 |
if ( adminBarSearchForm ) { |
|
85 |
adminBarSearchInput = document.getElementById( 'adminbar-search' ); |
|
86 |
||
87 |
// Adds the adminbar-focused class on focus. |
|
88 |
adminBarSearchInput.addEventListener( 'focus', function() { |
|
89 |
addClass( adminBarSearchForm, 'adminbar-focused' ); |
|
90 |
} ); |
|
91 |
||
92 |
// Removes the adminbar-focused class on blur. |
|
93 |
adminBarSearchInput.addEventListener( 'blur', function() { |
|
94 |
removeClass( adminBarSearchForm, 'adminbar-focused' ); |
|
95 |
} ); |
|
96 |
} |
|
97 |
||
98 |
if ( shortlink ) { |
|
99 |
shortlink.addEventListener( 'click', clickShortlink ); |
|
100 |
} |
|
101 |
||
102 |
// Prevents the toolbar from covering up content when a hash is present in the URL. |
|
103 |
if ( window.location.hash ) { |
|
104 |
window.scrollBy( 0, -32 ); |
|
105 |
} |
|
106 |
||
107 |
// Clear sessionStorage on logging out. |
|
108 |
if ( adminBarLogout ) { |
|
109 |
adminBarLogout.addEventListener( 'click', emptySessionStorage ); |
|
110 |
} |
|
111 |
} ); |
|
0 | 112 |
|
16 | 113 |
/** |
114 |
* Remove hover class for top level menu item when escape is pressed. |
|
115 |
* |
|
116 |
* @since 5.3.1 |
|
117 |
* |
|
118 |
* @param {Event} event The keydown event. |
|
119 |
*/ |
|
120 |
function removeHoverIfEscape( event ) { |
|
121 |
var wrapper; |
|
122 |
||
123 |
if ( event.which !== 27 ) { |
|
124 |
return; |
|
125 |
} |
|
126 |
||
127 |
wrapper = getClosest( event.target, '.menupop' ); |
|
128 |
||
129 |
if ( ! wrapper ) { |
|
130 |
return; |
|
131 |
} |
|
132 |
||
133 |
wrapper.querySelector( '.menupop > .ab-item' ).focus(); |
|
134 |
removeClass( wrapper, 'hover' ); |
|
135 |
} |
|
136 |
||
137 |
/** |
|
138 |
* Toggle hover class for top level menu item when enter is pressed. |
|
139 |
* |
|
140 |
* @since 5.3.1 |
|
141 |
* |
|
142 |
* @param {Event} event The keydown event. |
|
143 |
*/ |
|
144 |
function toggleHoverIfEnter( event ) { |
|
145 |
var wrapper; |
|
0 | 146 |
|
21
48c4eec2b7e6
Add CLAUDE.md documentation and sync WordPress core files
ymh <ymh.work@gmail.com>
parents:
16
diff
changeset
|
147 |
// Follow link if pressing Ctrl and/or Shift with Enter (opening in a new tab or window). |
48c4eec2b7e6
Add CLAUDE.md documentation and sync WordPress core files
ymh <ymh.work@gmail.com>
parents:
16
diff
changeset
|
148 |
if ( event.which !== 13 || event.ctrlKey || event.shiftKey ) { |
16 | 149 |
return; |
150 |
} |
|
151 |
||
152 |
if ( !! getClosest( event.target, '.ab-sub-wrapper' ) ) { |
|
153 |
return; |
|
154 |
} |
|
155 |
||
156 |
wrapper = getClosest( event.target, '.menupop' ); |
|
157 |
||
158 |
if ( ! wrapper ) { |
|
159 |
return; |
|
160 |
} |
|
161 |
||
162 |
event.preventDefault(); |
|
0 | 163 |
|
16 | 164 |
if ( hasClass( wrapper, 'hover' ) ) { |
165 |
removeClass( wrapper, 'hover' ); |
|
166 |
} else { |
|
167 |
addClass( wrapper, 'hover' ); |
|
168 |
} |
|
169 |
} |
|
170 |
||
171 |
/** |
|
21
48c4eec2b7e6
Add CLAUDE.md documentation and sync WordPress core files
ymh <ymh.work@gmail.com>
parents:
16
diff
changeset
|
172 |
* Toggle hover class for mobile devices. |
16 | 173 |
* |
174 |
* @since 5.3.1 |
|
175 |
* |
|
176 |
* @param {NodeList} topMenuItems All menu items. |
|
177 |
* @param {Event} event The click event. |
|
178 |
*/ |
|
179 |
function mobileHover( topMenuItems, event ) { |
|
180 |
var wrapper; |
|
181 |
||
182 |
if ( !! getClosest( event.target, '.ab-sub-wrapper' ) ) { |
|
183 |
return; |
|
184 |
} |
|
185 |
||
186 |
event.preventDefault(); |
|
187 |
||
188 |
wrapper = getClosest( event.target, '.menupop' ); |
|
0 | 189 |
|
16 | 190 |
if ( ! wrapper ) { |
191 |
return; |
|
192 |
} |
|
193 |
||
194 |
if ( hasClass( wrapper, 'hover' ) ) { |
|
195 |
removeClass( wrapper, 'hover' ); |
|
196 |
} else { |
|
197 |
removeAllHoverClass( topMenuItems ); |
|
198 |
addClass( wrapper, 'hover' ); |
|
199 |
} |
|
200 |
} |
|
0 | 201 |
|
16 | 202 |
/** |
203 |
* Handles the click on the Shortlink link in the adminbar. |
|
204 |
* |
|
205 |
* @since 3.1.0 |
|
206 |
* @since 5.3.1 Use querySelector to clean up the function. |
|
207 |
* |
|
208 |
* @param {Event} event The click event. |
|
209 |
* @return {boolean} Returns false to prevent default click behavior. |
|
210 |
*/ |
|
211 |
function clickShortlink( event ) { |
|
212 |
var wrapper = event.target.parentNode, |
|
213 |
input; |
|
214 |
||
215 |
if ( wrapper ) { |
|
216 |
input = wrapper.querySelector( '.shortlink-input' ); |
|
217 |
} |
|
218 |
||
219 |
if ( ! input ) { |
|
220 |
return; |
|
221 |
} |
|
222 |
||
223 |
// (Old) IE doesn't support preventDefault, and does support returnValue. |
|
224 |
if ( event.preventDefault ) { |
|
225 |
event.preventDefault(); |
|
226 |
} |
|
0 | 227 |
|
16 | 228 |
event.returnValue = false; |
229 |
||
230 |
addClass( wrapper, 'selected' ); |
|
231 |
||
232 |
input.focus(); |
|
233 |
input.select(); |
|
234 |
input.onblur = function() { |
|
235 |
removeClass( wrapper, 'selected' ); |
|
236 |
}; |
|
237 |
||
238 |
return false; |
|
239 |
} |
|
240 |
||
241 |
/** |
|
242 |
* Clear sessionStorage on logging out. |
|
243 |
* |
|
244 |
* @since 5.3.1 |
|
245 |
*/ |
|
246 |
function emptySessionStorage() { |
|
247 |
if ( 'sessionStorage' in window ) { |
|
248 |
try { |
|
249 |
for ( var key in sessionStorage ) { |
|
250 |
if ( key.indexOf( 'wp-autosave-' ) > -1 ) { |
|
251 |
sessionStorage.removeItem( key ); |
|
252 |
} |
|
253 |
} |
|
254 |
} catch ( er ) {} |
|
255 |
} |
|
256 |
} |
|
0 | 257 |
|
16 | 258 |
/** |
259 |
* Check if element has class. |
|
260 |
* |
|
261 |
* @since 5.3.1 |
|
262 |
* |
|
263 |
* @param {HTMLElement} element The HTML element. |
|
264 |
* @param {string} className The class name. |
|
265 |
* @return {boolean} Whether the element has the className. |
|
266 |
*/ |
|
267 |
function hasClass( element, className ) { |
|
268 |
var classNames; |
|
269 |
||
270 |
if ( ! element ) { |
|
271 |
return false; |
|
272 |
} |
|
0 | 273 |
|
16 | 274 |
if ( element.classList && element.classList.contains ) { |
275 |
return element.classList.contains( className ); |
|
276 |
} else if ( element.className ) { |
|
277 |
classNames = element.className.split( ' ' ); |
|
278 |
return classNames.indexOf( className ) > -1; |
|
279 |
} |
|
0 | 280 |
|
16 | 281 |
return false; |
282 |
} |
|
0 | 283 |
|
16 | 284 |
/** |
285 |
* Add class to an element. |
|
286 |
* |
|
287 |
* @since 5.3.1 |
|
288 |
* |
|
289 |
* @param {HTMLElement} element The HTML element. |
|
290 |
* @param {string} className The class name. |
|
291 |
*/ |
|
292 |
function addClass( element, className ) { |
|
293 |
if ( ! element ) { |
|
294 |
return; |
|
295 |
} |
|
0 | 296 |
|
16 | 297 |
if ( element.classList && element.classList.add ) { |
298 |
element.classList.add( className ); |
|
299 |
} else if ( ! hasClass( element, className ) ) { |
|
300 |
if ( element.className ) { |
|
301 |
element.className += ' '; |
|
5 | 302 |
} |
303 |
||
16 | 304 |
element.className += className; |
305 |
} |
|
21
48c4eec2b7e6
Add CLAUDE.md documentation and sync WordPress core files
ymh <ymh.work@gmail.com>
parents:
16
diff
changeset
|
306 |
|
48c4eec2b7e6
Add CLAUDE.md documentation and sync WordPress core files
ymh <ymh.work@gmail.com>
parents:
16
diff
changeset
|
307 |
var menuItemToggle = element.querySelector( 'a' ); |
48c4eec2b7e6
Add CLAUDE.md documentation and sync WordPress core files
ymh <ymh.work@gmail.com>
parents:
16
diff
changeset
|
308 |
if ( className === 'hover' && menuItemToggle && menuItemToggle.hasAttribute( 'aria-expanded' ) ) { |
48c4eec2b7e6
Add CLAUDE.md documentation and sync WordPress core files
ymh <ymh.work@gmail.com>
parents:
16
diff
changeset
|
309 |
menuItemToggle.setAttribute( 'aria-expanded', 'true' ); |
48c4eec2b7e6
Add CLAUDE.md documentation and sync WordPress core files
ymh <ymh.work@gmail.com>
parents:
16
diff
changeset
|
310 |
} |
16 | 311 |
} |
0 | 312 |
|
16 | 313 |
/** |
314 |
* Remove class from an element. |
|
315 |
* |
|
316 |
* @since 5.3.1 |
|
317 |
* |
|
318 |
* @param {HTMLElement} element The HTML element. |
|
319 |
* @param {string} className The class name. |
|
320 |
*/ |
|
321 |
function removeClass( element, className ) { |
|
322 |
var testName, |
|
323 |
classes; |
|
0 | 324 |
|
16 | 325 |
if ( ! element || ! hasClass( element, className ) ) { |
326 |
return; |
|
327 |
} |
|
328 |
||
329 |
if ( element.classList && element.classList.remove ) { |
|
330 |
element.classList.remove( className ); |
|
331 |
} else { |
|
332 |
testName = ' ' + className + ' '; |
|
333 |
classes = ' ' + element.className + ' '; |
|
334 |
||
335 |
while ( classes.indexOf( testName ) > -1 ) { |
|
336 |
classes = classes.replace( testName, '' ); |
|
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
337 |
} |
0 | 338 |
|
16 | 339 |
element.className = classes.replace( /^[\s]+|[\s]+$/g, '' ); |
340 |
} |
|
21
48c4eec2b7e6
Add CLAUDE.md documentation and sync WordPress core files
ymh <ymh.work@gmail.com>
parents:
16
diff
changeset
|
341 |
|
48c4eec2b7e6
Add CLAUDE.md documentation and sync WordPress core files
ymh <ymh.work@gmail.com>
parents:
16
diff
changeset
|
342 |
var menuItemToggle = element.querySelector( 'a' ); |
48c4eec2b7e6
Add CLAUDE.md documentation and sync WordPress core files
ymh <ymh.work@gmail.com>
parents:
16
diff
changeset
|
343 |
if ( className === 'hover' && menuItemToggle && menuItemToggle.hasAttribute( 'aria-expanded' ) ) { |
48c4eec2b7e6
Add CLAUDE.md documentation and sync WordPress core files
ymh <ymh.work@gmail.com>
parents:
16
diff
changeset
|
344 |
menuItemToggle.setAttribute( 'aria-expanded', 'false' ); |
48c4eec2b7e6
Add CLAUDE.md documentation and sync WordPress core files
ymh <ymh.work@gmail.com>
parents:
16
diff
changeset
|
345 |
} |
16 | 346 |
} |
0 | 347 |
|
16 | 348 |
/** |
349 |
* Remove hover class for all menu items. |
|
350 |
* |
|
351 |
* @since 5.3.1 |
|
352 |
* |
|
353 |
* @param {NodeList} topMenuItems All menu items. |
|
354 |
*/ |
|
355 |
function removeAllHoverClass( topMenuItems ) { |
|
356 |
if ( topMenuItems && topMenuItems.length ) { |
|
357 |
for ( var i = 0; i < topMenuItems.length; i++ ) { |
|
358 |
removeClass( topMenuItems[i], 'hover' ); |
|
5 | 359 |
} |
16 | 360 |
} |
361 |
} |
|
5 | 362 |
|
9 | 363 |
/** |
16 | 364 |
* Scrolls to the top of the page. |
9 | 365 |
* |
16 | 366 |
* @since 3.4.0 |
367 |
* |
|
368 |
* @param {Event} event The Click event. |
|
9 | 369 |
* |
370 |
* @return {void} |
|
371 |
*/ |
|
16 | 372 |
function scrollToTop( event ) { |
373 |
// Only scroll when clicking on the wpadminbar, not on menus or submenus. |
|
374 |
if ( |
|
375 |
event.target && |
|
376 |
event.target.id !== 'wpadminbar' && |
|
377 |
event.target.id !== 'wp-admin-bar-top-secondary' |
|
378 |
) { |
|
379 |
return; |
|
380 |
} |
|
0 | 381 |
|
16 | 382 |
try { |
383 |
window.scrollTo( { |
|
384 |
top: -32, |
|
385 |
left: 0, |
|
386 |
behavior: 'smooth' |
|
387 |
} ); |
|
388 |
} catch ( er ) { |
|
389 |
window.scrollTo( 0, -32 ); |
|
390 |
} |
|
391 |
} |
|
0 | 392 |
|
16 | 393 |
/** |
394 |
* Get closest Element. |
|
395 |
* |
|
396 |
* @since 5.3.1 |
|
397 |
* |
|
398 |
* @param {HTMLElement} el Element to get parent. |
|
399 |
* @param {string} selector CSS selector to match. |
|
400 |
*/ |
|
401 |
function getClosest( el, selector ) { |
|
402 |
if ( ! window.Element.prototype.matches ) { |
|
403 |
// Polyfill from https://developer.mozilla.org/en-US/docs/Web/API/Element/matches. |
|
404 |
window.Element.prototype.matches = |
|
405 |
window.Element.prototype.matchesSelector || |
|
406 |
window.Element.prototype.mozMatchesSelector || |
|
407 |
window.Element.prototype.msMatchesSelector || |
|
408 |
window.Element.prototype.oMatchesSelector || |
|
409 |
window.Element.prototype.webkitMatchesSelector || |
|
410 |
function( s ) { |
|
411 |
var matches = ( this.document || this.ownerDocument ).querySelectorAll( s ), |
|
412 |
i = matches.length; |
|
0 | 413 |
|
16 | 414 |
while ( --i >= 0 && matches.item( i ) !== this ) { } |
0 | 415 |
|
16 | 416 |
return i > -1; |
417 |
}; |
|
418 |
} |
|
0 | 419 |
|
16 | 420 |
// Get the closest matching elent. |
421 |
for ( ; el && el !== document; el = el.parentNode ) { |
|
422 |
if ( el.matches( selector ) ) { |
|
423 |
return el; |
|
424 |
} |
|
425 |
} |
|
0 | 426 |
|
16 | 427 |
return null; |
428 |
} |
|
0 | 429 |
|
16 | 430 |
} )( document, window, navigator ); |