← Back to branch summary

~canonical-sysadmins/wordpress/5.1

« back to all changes in this revision

Viewing changes to wp-admin/js/customize-nav-menus.js

  • Committer: Nick Moffitt
  • Date: 2016-04-14 10:43:32 UTC
  • mto: This revision was merged to the branch mainline in revision 18.
  • Revision ID: nick.moffitt@canonical.com-20160414104332-61kvsia27qpmjquk
new upstream release 4.5

Show diffs side-by-side

added added

removed removed

Lines of Context:
wp-admin/js/customize-nav-menus.js
17
17
 
18
18
        // Link settings.
19
19
        api.Menus.data = {
20
 
                nonce: '',
21
20
                itemTypes: [],
22
21
                l10n: {},
23
 
                menuItemTransport: 'postMessage',
 
22
                settingTransport: 'refresh',
24
23
                phpIntMax: 0,
25
24
                defaultSettingValues: {
26
25
                        nav_menu: {},
27
26
                        nav_menu_item: {}
28
 
                }
 
27
                },
 
28
                locationSlugMappedToName: {}
29
29
        };
30
30
        if ( 'undefined' !== typeof _wpCustomizeNavMenusSettings ) {
31
31
                $.extend( api.Menus.data, _wpCustomizeNavMenusSettings );
187
187
 
188
188
                        // Close the panel if the URL in the preview changes
189
189
                        api.previewer.bind( 'url', this.close );
 
190
 
 
191
                        self.delegateEvents();
190
192
                },
191
193
 
192
194
                // Search input change handler.
216
218
                                        .prop( 'tabIndex', -1 )
217
219
                                        .removeClass( 'is-visible' );
218
220
                        }
219
 
                        
 
221
 
220
222
                        this.searchTerm = event.target.value;
221
223
                        this.pages.search = 1;
222
224
                        this.doSearch( 1 );
248
250
                        $section.addClass( 'loading' );
249
251
                        self.loading = true;
250
252
                        params = {
251
 
                                'customize-menus-nonce': api.Menus.data.nonce,
 
253
                                'customize-menus-nonce': api.settings.nonce['customize-menus'],
252
254
                                'wp_customize': 'on',
253
255
                                'search': self.searchTerm,
254
256
                                'page': page
323
325
                        availableMenuItemContainer.find( '.accordion-section-title' ).addClass( 'loading' );
324
326
                        self.loading = true;
325
327
                        params = {
326
 
                                'customize-menus-nonce': api.Menus.data.nonce,
 
328
                                'customize-menus-nonce': api.settings.nonce['customize-menus'],
327
329
                                'wp_customize': 'on',
328
330
                                'type': type,
329
331
                                'object': object,
612
614
                        });
613
615
                },
614
616
 
615
 
                saveManageColumnsState: function() {
616
 
                        var hidden = this.hidden();
617
 
                        $.post( wp.ajax.settings.url, {
618
 
                                action: 'hidden-columns',
619
 
                                hidden: hidden,
 
617
                saveManageColumnsState: _.debounce( function() {
 
618
                        var panel = this;
 
619
                        if ( panel._updateHiddenColumnsRequest ) {
 
620
                                panel._updateHiddenColumnsRequest.abort();
 
621
                        }
 
622
 
 
623
                        panel._updateHiddenColumnsRequest = wp.ajax.post( 'hidden-columns', {
 
624
                                hidden: panel.hidden(),
620
625
                                screenoptionnonce: $( '#screenoptionnonce' ).val(),
621
626
                                page: 'nav-menus'
622
 
                        });
623
 
                },
 
627
                        } );
 
628
                        panel._updateHiddenColumnsRequest.always( function() {
 
629
                                panel._updateHiddenColumnsRequest = null;
 
630
                        } );
 
631
                }, 2000 ),
624
632
 
625
633
                checked: function( column ) {
626
634
                        this.container.addClass( 'field-' + column + '-active' );
631
639
                },
632
640
 
633
641
                hidden: function() {
634
 
                        this.hidden = function() {
635
 
                                return $( '.hide-column-tog' ).not( ':checked' ).map( function() {
636
 
                                        var id = this.id;
637
 
                                        return id.substring( id, id.length - 5 );
638
 
                                }).get().join( ',' );
639
 
                        };
 
642
                        return $( '.hide-column-tog' ).not( ':checked' ).map( function() {
 
643
                                var id = this.id;
 
644
                                return id.substring( 0, id.length - 5 );
 
645
                        }).get().join( ',' );
640
646
                }
641
647
        } );
642
648
 
806
812
                /**
807
813
                 * @param {array} themeLocations
808
814
                 */
809
 
                updateAssignedLocationsInSectionTitle: function( themeLocations ) {
 
815
                updateAssignedLocationsInSectionTitle: function( themeLocationSlugs ) {
810
816
                        var section = this,
811
817
                                $title;
812
818
 
813
819
                        $title = section.container.find( '.accordion-section-title:first' );
814
820
                        $title.find( '.menu-in-location' ).remove();
815
 
                        _.each( themeLocations, function( themeLocation ) {
816
 
                                var $label = $( '<span class="menu-in-location"></span>' );
817
 
                                $label.text( api.Menus.data.l10n.menuLocation.replace( '%s', themeLocation ) );
 
821
                        _.each( themeLocationSlugs, function( themeLocationSlug ) {
 
822
                                var $label, locationName;
 
823
                                $label = $( '<span class="menu-in-location"></span>' );
 
824
                                locationName = api.Menus.data.locationSlugMappedToName[ themeLocationSlug ];
 
825
                                $label.text( api.Menus.data.l10n.menuLocation.replace( '%s', locationName ) );
818
826
                                $title.append( $label );
819
827
                        });
820
828
 
821
 
                        section.container.toggleClass( 'assigned-to-menu-location', 0 !== themeLocations.length );
 
829
                        section.container.toggleClass( 'assigned-to-menu-location', 0 !== themeLocationSlugs.length );
822
830
 
823
831
                },
824
832
 
1363
1371
 
1364
1372
                /**
1365
1373
                 * Expand the menu item form control.
 
1374
                 *
 
1375
                 * @since 4.5.0 Added params.completeCallback.
 
1376
                 *
 
1377
                 * @param {Object}   [params] - Optional params.
 
1378
                 * @param {Function} [params.completeCallback] - Function to call when the form toggle has finished animating.
1366
1379
                 */
1367
 
                expandForm: function() {
1368
 
                        this.toggleForm( true );
 
1380
                expandForm: function( params ) {
 
1381
                        this.toggleForm( true, params );
1369
1382
                },
1370
1383
 
1371
1384
                /**
1372
1385
                 * Collapse the menu item form control.
 
1386
                 *
 
1387
                 * @since 4.5.0 Added params.completeCallback.
 
1388
                 *
 
1389
                 * @param {Object}   [params] - Optional params.
 
1390
                 * @param {Function} [params.completeCallback] - Function to call when the form toggle has finished animating.
1373
1391
                 */
1374
 
                collapseForm: function() {
1375
 
                        this.toggleForm( false );
 
1392
                collapseForm: function( params ) {
 
1393
                        this.toggleForm( false, params );
1376
1394
                },
1377
1395
 
1378
1396
                /**
1379
1397
                 * Expand or collapse the menu item control.
1380
1398
                 *
1381
 
                 * @param {boolean|undefined} [showOrHide] If not supplied, will be inverse of current visibility
 
1399
                 * @since 4.5.0 Added params.completeCallback.
 
1400
                 *
 
1401
                 * @param {boolean}  [showOrHide] - If not supplied, will be inverse of current visibility
 
1402
                 * @param {Object}   [params] - Optional params.
 
1403
                 * @param {Function} [params.completeCallback] - Function to call when the form toggle has finished animating.
1382
1404
                 */
1383
 
                toggleForm: function( showOrHide ) {
 
1405
                toggleForm: function( showOrHide, params ) {
1384
1406
                        var self = this, $menuitem, $inside, complete;
1385
1407
 
1386
1408
                        $menuitem = this.container;
1391
1413
 
1392
1414
                        // Already expanded or collapsed.
1393
1415
                        if ( $inside.is( ':visible' ) === showOrHide ) {
 
1416
                                if ( params && params.completeCallback ) {
 
1417
                                        params.completeCallback();
 
1418
                                }
1394
1419
                                return;
1395
1420
                        }
1396
1421
 
1407
1432
                                                .removeClass( 'menu-item-edit-inactive' )
1408
1433
                                                .addClass( 'menu-item-edit-active' );
1409
1434
                                        self.container.trigger( 'expanded' );
 
1435
 
 
1436
                                        if ( params && params.completeCallback ) {
 
1437
                                                params.completeCallback();
 
1438
                                        }
1410
1439
                                };
1411
1440
 
1412
1441
                                $menuitem.find( '.item-edit' ).attr( 'aria-expanded', 'true' );
1419
1448
                                                .addClass( 'menu-item-edit-inactive' )
1420
1449
                                                .removeClass( 'menu-item-edit-active' );
1421
1450
                                        self.container.trigger( 'collapsed' );
 
1451
 
 
1452
                                        if ( params && params.completeCallback ) {
 
1453
                                                params.completeCallback();
 
1454
                                        }
1422
1455
                                };
1423
1456
 
1424
1457
                                self.container.trigger( 'collapse' );
1431
1464
                /**
1432
1465
                 * Expand the containing menu section, expand the form, and focus on
1433
1466
                 * the first input in the control.
 
1467
                 *
 
1468
                 * @since 4.5.0 Added params.completeCallback.
 
1469
                 *
 
1470
                 * @param {Object}   [params] - Params object.
 
1471
                 * @param {Function} [params.completeCallback] - Optional callback function when focus has completed.
1434
1472
                 */
1435
 
                focus: function() {
1436
 
                        var control = this, focusable;
 
1473
                focus: function( params ) {
 
1474
                        params = params || {};
 
1475
                        var control = this, originalCompleteCallback = params.completeCallback;
 
1476
 
1437
1477
                        control.expandControlSection();
1438
 
                        control.expandForm();
1439
 
                        // Note that we can't use :focusable due to a jQuery UI issue. See: https://github.com/jquery/jquery-ui/pull/1583
1440
 
                        focusable = control.container.find( '.menu-item-settings' ).find( 'input, select, textarea, button, object, a[href], [tabindex]' ).filter( ':visible' );
1441
 
                        focusable.first().focus();
 
1478
 
 
1479
                        params.completeCallback = function() {
 
1480
                                var focusable;
 
1481
 
 
1482
                                // Note that we can't use :focusable due to a jQuery UI issue. See: https://github.com/jquery/jquery-ui/pull/1583
 
1483
                                focusable = control.container.find( '.menu-item-settings' ).find( 'input, select, textarea, button, object, a[href], [tabindex]' ).filter( ':visible' );
 
1484
                                focusable.first().focus();
 
1485
 
 
1486
                                if ( originalCompleteCallback ) {
 
1487
                                        originalCompleteCallback();
 
1488
                                }
 
1489
                        };
 
1490
 
 
1491
                        control.expandForm( params );
1442
1492
                },
1443
1493
 
1444
1494
                /**
2266
2316
                        customizeId = 'nav_menu_item[' + String( placeholderId ) + ']';
2267
2317
                        settingArgs = {
2268
2318
                                type: 'nav_menu_item',
2269
 
                                transport: 'postMessage',
 
2319
                                transport: api.Menus.data.settingTransport,
2270
2320
                                previewer: api.previewer
2271
2321
                        };
2272
2322
                        setting = api.create( customizeId, customizeId, {}, settingArgs );
2355
2405
                        // Register the menu control setting.
2356
2406
                        api.create( customizeId, customizeId, {}, {
2357
2407
                                type: 'nav_menu',
2358
 
                                transport: 'postMessage',
 
2408
                                transport: api.Menus.data.settingTransport,
2359
2409
                                previewer: api.previewer
2360
2410
                        } );
2361
2411
                        api( customizeId ).set( $.extend(
2442
2492
                        }
2443
2493
                } );
2444
2494
 
2445
 
                api.previewer.bind( 'refresh', function() {
2446
 
                        api.previewer.refresh();
2447
 
                });
 
2495
                // Open and focus menu control.
 
2496
                api.previewer.bind( 'focus-nav-menu-item-control', api.Menus.focusMenuItemControl );
2448
2497
        } );
2449
2498
 
2450
2499
        /**
2488
2537
                                newCustomizeId = 'nav_menu[' + String( update.term_id ) + ']';
2489
2538
                                newSetting = api.create( newCustomizeId, newCustomizeId, settingValue, {
2490
2539
                                        type: 'nav_menu',
2491
 
                                        transport: 'postMessage',
 
2540
                                        transport: api.Menus.data.settingTransport,
2492
2541
                                        previewer: api.previewer
2493
2542
                                } );
2494
2543
 
2636
2685
                                newCustomizeId = 'nav_menu_item[' + String( update.post_id ) + ']';
2637
2686
                                newSetting = api.create( newCustomizeId, newCustomizeId, settingValue, {
2638
2687
                                        type: 'nav_menu_item',
2639
 
                                        transport: 'postMessage',
 
2688
                                        transport: api.Menus.data.settingTransport,
2640
2689
                                        previewer: api.previewer
2641
2690
                                } );
2642
2691