267 | | initAccessibility : function() { |
| 267 | countMenuItems : function( depth ) { |
| 268 | return $( '.menu-item-depth-' + depth ).length; |
| 269 | }, |
| 270 | |
| 271 | refreshAdvancedAccessibility : function() { |
| 272 | |
| 273 | // Hide all links by default |
| 274 | $( '.menu-item-settings .field-move a' ).hide(); |
| 275 | |
| 276 | $( '.item-edit' ).each( function() { |
| 277 | var $this = $(this), |
| 278 | movement = [], |
| 279 | availableMovement = '', |
| 280 | menuItem = $this.parents( 'li.menu-item' ), |
| 281 | depth = menuItem.menuItemDepth(), |
| 282 | isPrimaryMenuItem = ( 0 === depth ), |
| 283 | itemName = $this.parents( '.menu-item-handle' ).find( '.menu-item-title' ).text(), |
| 284 | position = parseInt( menuItem.index() ), |
| 285 | totalMenuItems = $('#menu-to-edit li').length, |
| 286 | hasSameDepthSibling = menuItem.nextAll( '.menu-item-depth-' + depth ).length; |
| 287 | |
| 288 | // Where can they move this menu item? |
| 289 | if ( 0 !== position ) |
| 290 | menuItem.find( '.menus-move-up' ).show(); |
| 291 | |
| 292 | if ( position + 1 !== totalMenuItems && 0 !== position ) |
| 293 | menuItem.find( '.menus-move-down' ).show(); |
| 294 | |
| 295 | if ( 0 === position && 0 !== hasSameDepthSibling ) |
| 296 | menuItem.find( '.menus-move-down' ).show(); |
| 297 | |
| 298 | if ( ! isPrimaryMenuItem ) |
| 299 | menuItem.find( '.menus-move-left' ).show(); |
| 300 | |
| 301 | if ( 0 !== position ) { |
| 302 | if ( menuItem.find( '.menu-item-data-parent-id' ).val() !== menuItem.prev().find( '.menu-item-data-db-id' ).val() ) |
| 303 | menuItem.find( '.menus-move-right' ).show(); |
| 304 | } |
| 305 | |
| 306 | if ( isPrimaryMenuItem ) { |
| 307 | var primaryItems = $( '.menu-item-depth-0' ), |
| 308 | itemPosition = primaryItems.index( menuItem ) + 1, |
| 309 | totalMenuItems = primaryItems.length, |
| 310 | |
| 311 | // String together help text for primary menu items |
| 312 | title = itemName + '. ' + api.getGetOrdinal( itemPosition ) + ' of ' + totalMenuItems + ' primary items.'; |
| 313 | } else { |
| 314 | var parentItem = menuItem.prevAll( '.menu-item-depth-' + parseInt( depth - 1 ) ).first(), |
| 315 | parentItemId = parentItem.find( '.menu-item-data-db-id' ).val(), |
| 316 | parentItemName = parentItem.find( '.menu-item-title' ).text(), |
| 317 | subItems = $( '.menu-item .menu-item-data-parent-id[value="' + parentItemId + '"]' ), |
| 318 | itemPosition = $(subItems.parents('.menu-item').get().reverse()).index( menuItem ) + 1; |
| 319 | |
| 320 | // String together help text for sub menu items |
| 321 | title = itemName + '. ' + api.getGetOrdinal( itemPosition ) + ' sub item under ' + parentItemName + '.'; |
| 322 | } |
| 323 | |
| 324 | $this.prop('title', title).html( title ); |
| 325 | }); |
| 326 | }, |
| 327 | |
| 328 | refreshKeyboardAccessibility : function() { |
280 | | var menuItems = $('#menu-to-edit li'); |
281 | | menuItemsCount = menuItems.length, |
282 | | thisItem = $this.parents( 'li.menu-item' ), |
283 | | thisItemChildren = thisItem.childMenuItems(), |
284 | | thisItemData = thisItem.getItemData(), |
285 | | thisItemDepth = parseInt( thisItem.menuItemDepth() ), |
286 | | thisItemPosition = parseInt( thisItem.index() ), |
287 | | nextItem = thisItem.next(), |
288 | | nextItemChildren = nextItem.childMenuItems(), |
289 | | nextItemDepth = parseInt( nextItem.menuItemDepth() ) + 1, |
290 | | prevItem = thisItem.prev(), |
291 | | prevItemDepth = parseInt( prevItem.menuItemDepth() ), |
292 | | prevItemId = prevItem.getItemData()['menu-item-db-id']; |
293 | | |
329 | | // Does this item have sub items? |
330 | | if ( thisItemChildren ) { |
331 | | var items = thisItem.add( thisItemChildren ), |
332 | | nextItem = menuItems.eq( items.length + thisItemPosition ), |
333 | | nextItemChildren = 0 !== nextItem.childMenuItems().length; |
334 | | |
335 | | if ( nextItemChildren ) { |
336 | | var newDepth = parseInt( nextItem.menuItemDepth() ) + 1; |
337 | | thisItem.moveHorizontally( newDepth, thisItemDepth ); |
338 | | } |
339 | | |
340 | | // Have we reached the bottom? |
341 | | if ( menuItemsCount === thisItemPosition + items.length ) |
342 | | break; |
343 | | |
344 | | items.detach().insertAfter( menuItems.eq( thisItemPosition + items.length ) ); |
345 | | } else { |
346 | | // If next item has sub items, shift depth |
347 | | if ( 0 !== nextItemChildren.length ) |
348 | | thisItem.moveHorizontally( nextItemDepth, thisItemDepth ); |
349 | | |
350 | | // Have we reached the bottom |
351 | | if ( menuItemsCount === thisItemPosition + 1 ) |
352 | | break; |
353 | | thisItem.detach().insertAfter( menuItems.eq( thisItemPosition + 1 ) ); |
354 | | } |
| 355 | api.moveMenuItem( $this, 'down' ); |
| 373 | getGetOrdinal : function(n) { |
| 374 | var s=["th","st","nd","rd"], |
| 375 | v=n%100; |
| 376 | return n+(s[(v-20)%10]||s[v]||s[0]); |
| 377 | }, |
| 378 | |
| 379 | moveMenuItem : function( $this, dir ) { |
| 380 | |
| 381 | var menuItems = $('#menu-to-edit li'); |
| 382 | menuItemsCount = menuItems.length, |
| 383 | thisItem = $this.parents( 'li.menu-item' ), |
| 384 | thisItemChildren = thisItem.childMenuItems(), |
| 385 | thisItemData = thisItem.getItemData(), |
| 386 | thisItemDepth = parseInt( thisItem.menuItemDepth() ), |
| 387 | thisItemPosition = parseInt( thisItem.index() ), |
| 388 | nextItem = thisItem.next(), |
| 389 | nextItemChildren = nextItem.childMenuItems(), |
| 390 | nextItemDepth = parseInt( nextItem.menuItemDepth() ) + 1, |
| 391 | prevItem = thisItem.prev(), |
| 392 | prevItemDepth = parseInt( prevItem.menuItemDepth() ), |
| 393 | prevItemId = prevItem.getItemData()['menu-item-db-id']; |
| 394 | |
| 395 | switch ( dir ) { |
| 396 | case 'up': |
| 397 | var newItemPosition = thisItemPosition - 1; |
| 398 | |
| 399 | // Already at top |
| 400 | if ( 0 === thisItemPosition ) |
| 401 | break; |
| 402 | |
| 403 | // If a sub item is moved to top, shift it to 0 depth |
| 404 | if ( 0 === newItemPosition && 0 !== thisItemDepth ) |
| 405 | thisItem.moveHorizontally( 0, thisItemDepth ); |
| 406 | |
| 407 | // If prev item is sub item, shift to match depth |
| 408 | if ( 0 !== prevItemDepth ) |
| 409 | thisItem.moveHorizontally( prevItemDepth, thisItemDepth ); |
| 410 | |
| 411 | // Does this item have sub items? |
| 412 | if ( thisItemChildren ) { |
| 413 | var items = thisItem.add( thisItemChildren ); |
| 414 | // Move the entire block |
| 415 | items.detach().insertBefore( menuItems.eq( newItemPosition ) ).updateParentMenuItemDBId(); |
| 416 | } else { |
| 417 | thisItem.detach().insertBefore( menuItems.eq( newItemPosition ) ).updateParentMenuItemDBId(); |
| 418 | } |
| 419 | $this.focus(); |
| 420 | break; |
| 421 | case 'down': |
| 422 | // Does this item have sub items? |
| 423 | if ( thisItemChildren ) { |
| 424 | var items = thisItem.add( thisItemChildren ), |
| 425 | nextItem = menuItems.eq( items.length + thisItemPosition ), |
| 426 | nextItemChildren = 0 !== nextItem.childMenuItems().length; |
| 427 | |
| 428 | if ( nextItemChildren ) { |
| 429 | var newDepth = parseInt( nextItem.menuItemDepth() ) + 1; |
| 430 | thisItem.moveHorizontally( newDepth, thisItemDepth ); |
| 431 | } |
| 432 | |
| 433 | // Have we reached the bottom? |
| 434 | if ( menuItemsCount === thisItemPosition + items.length ) |
| 435 | break; |
| 436 | |
| 437 | items.detach().insertAfter( menuItems.eq( thisItemPosition + items.length ) ).updateParentMenuItemDBId(); |
| 438 | } else { |
| 439 | // If next item has sub items, shift depth |
| 440 | if ( 0 !== nextItemChildren.length ) |
| 441 | thisItem.moveHorizontally( nextItemDepth, thisItemDepth ); |
| 442 | |
| 443 | // Have we reached the bottom |
| 444 | if ( menuItemsCount === thisItemPosition + 1 ) |
| 445 | break; |
| 446 | thisItem.detach().insertAfter( menuItems.eq( thisItemPosition + 1 ) ).updateParentMenuItemDBId(); |
| 447 | } |
| 448 | $this.focus(); |
| 449 | break; |
| 450 | case 'left': |
| 451 | // As far left as possible |
| 452 | if ( 0 === thisItemDepth ) |
| 453 | break; |
| 454 | thisItem.shiftHorizontally( -1 ); |
| 455 | $this.focus(); |
| 456 | break; |
| 457 | case 'right': |
| 458 | // Can't be sub item at top |
| 459 | if ( 0 === thisItemPosition ) |
| 460 | break; |
| 461 | // Already sub item of prevItem |
| 462 | if ( thisItemData['menu-item-parent-id'] === prevItemId ) |
| 463 | break; |
| 464 | thisItem.shiftHorizontally( 1 ); |
| 465 | $this.focus(); |
| 466 | break; |
| 467 | } |
| 468 | api.registerChange(); |
| 469 | api.refreshKeyboardAccessibility(); |
| 470 | api.refreshAdvancedAccessibility(); |
| 471 | }, |
| 472 | |
| 473 | initAccessibility : function() { |
| 474 | api.refreshKeyboardAccessibility(); |
| 475 | api.refreshAdvancedAccessibility(); |
| 476 | |
| 477 | // Events |
| 478 | $( '.menus-move-up' ).on( 'click', function ( e ) { |
| 479 | api.moveMenuItem( $( this ).parents( 'li.menu-item' ).find( 'a.item-edit' ), 'up' ); |
| 480 | e.preventDefault(); |
| 481 | }); |
| 482 | $( '.menus-move-down' ).on( 'click', function ( e ) { |
| 483 | api.moveMenuItem( $( this ).parents( 'li.menu-item' ).find( 'a.item-edit' ), 'down' ); |
| 484 | e.preventDefault(); |
| 485 | }); |
| 486 | $( '.menus-move-left' ).on( 'click', function ( e ) { |
| 487 | api.moveMenuItem( $( this ).parents( 'li.menu-item' ).find( 'a.item-edit' ), 'left' ); |
| 488 | e.preventDefault(); |
| 489 | }); |
| 490 | $( '.menus-move-right' ).on( 'click', function ( e ) { |
| 491 | api.moveMenuItem( $( this ).parents( 'li.menu-item' ).find( 'a.item-edit' ), 'right' ); |
| 492 | e.preventDefault(); |
| 493 | }); |
| 494 | }, |
| 495 | |