← Back to branch summary

~canonical-sysadmins/wordpress/4.8.3

« back to all changes in this revision

Viewing changes to wp-admin/js/customize-widgets.js

  • Committer: Barry Price
  • Date: 2017-06-09 02:09:58 UTC
  • mfrom: (1.1.26 upstream)
  • Revision ID: barry.price@canonical.com-20170609020958-838whhwt2196f2vk
Merge WP4.8 from upstream

Show diffs side-by-side

added added

removed removed

Lines of Context:
wp-admin/js/customize-widgets.js
13
13
        // Link settings
14
14
        api.Widgets.data = _wpCustomizeWidgetsSettings || {};
15
15
        l10n = api.Widgets.data.l10n;
16
 
        delete api.Widgets.data.l10n;
17
16
 
18
17
        /**
19
18
         * wp.customize.Widgets.WidgetModel
953
952
                        var self = this, $removeBtn, replaceDeleteWithRemove;
954
953
 
955
954
                        // Configure remove button
956
 
                        $removeBtn = this.container.find( 'a.widget-control-remove' );
 
955
                        $removeBtn = this.container.find( '.widget-control-remove' );
957
956
                        $removeBtn.on( 'click', function( e ) {
958
957
                                e.preventDefault();
959
958
 
989
988
                        } );
990
989
 
991
990
                        replaceDeleteWithRemove = function() {
992
 
                                $removeBtn.text( l10n.removeBtnLabel ); // wp_widget_control() outputs the link as "Delete"
 
991
                                $removeBtn.text( l10n.removeBtnLabel ); // wp_widget_control() outputs the button as "Delete"
993
992
                                $removeBtn.attr( 'title', l10n.removeBtnTooltip );
994
993
                        };
995
994
 
1368
1367
                 * @param {Object} args  merged on top of this.defaultActiveArguments
1369
1368
                 */
1370
1369
                onChangeExpanded: function ( expanded, args ) {
1371
 
                        var self = this, $widget, $inside, complete, prevComplete, expandControl;
 
1370
                        var self = this, $widget, $inside, complete, prevComplete, expandControl, $toggleBtn;
1372
1371
 
1373
1372
                        self.embedWidgetControl(); // Make sure the outer form is embedded so that the expanded state can be set in the UI.
1374
1373
                        if ( expanded ) {
1387
1386
 
1388
1387
                        $widget = this.container.find( 'div.widget:first' );
1389
1388
                        $inside = $widget.find( '.widget-inside:first' );
 
1389
                        $toggleBtn = this.container.find( '.widget-top button.widget-action' );
1390
1390
 
1391
1391
                        expandControl = function() {
1392
1392
 
1400
1400
                                complete = function() {
1401
1401
                                        self.container.removeClass( 'expanding' );
1402
1402
                                        self.container.addClass( 'expanded' );
 
1403
                                        $toggleBtn.attr( 'aria-expanded', 'true' );
1403
1404
                                        self.container.trigger( 'expanded' );
1404
1405
                                };
1405
1406
                                if ( args.completeCallback ) {
1429
1430
                                        expandControl();
1430
1431
                                }
1431
1432
                        } else {
1432
 
 
1433
1433
                                complete = function() {
1434
1434
                                        self.container.removeClass( 'collapsing' );
1435
1435
                                        self.container.removeClass( 'expanded' );
 
1436
                                        $toggleBtn.attr( 'aria-expanded', 'false' );
1436
1437
                                        self.container.trigger( 'collapsed' );
1437
1438
                                };
1438
1439
                                if ( args.completeCallback ) {
1577
1578
                        api.Panel.prototype.ready.call( panel );
1578
1579
 
1579
1580
                        panel.deferred.embedded.done(function() {
1580
 
                                var panelMetaContainer, noRenderedAreasNotice, shouldShowNotice;
 
1581
                                var panelMetaContainer, noticeContainer, updateNotice, getActiveSectionCount, shouldShowNotice;
1581
1582
                                panelMetaContainer = panel.container.find( '.panel-meta' );
1582
 
                                noRenderedAreasNotice = $( '<div></div>', {
 
1583
 
 
1584
                                // @todo This should use the Notifications API introduced to panels. See <https://core.trac.wordpress.org/ticket/38794>.
 
1585
                                noticeContainer = $( '<div></div>', {
1583
1586
                                        'class': 'no-widget-areas-rendered-notice'
1584
1587
                                });
1585
 
                                noRenderedAreasNotice.append( $( '<em></em>', {
1586
 
                                        text: l10n.noAreasRendered
1587
 
                                } ) );
1588
 
                                panelMetaContainer.append( noRenderedAreasNotice );
1589
 
 
 
1588
                                panelMetaContainer.append( noticeContainer );
 
1589
 
 
1590
                                /**
 
1591
                                 * Get the number of active sections in the panel.
 
1592
                                 *
 
1593
                                 * @return {number} Number of active sidebar sections.
 
1594
                                 */
 
1595
                                getActiveSectionCount = function() {
 
1596
                                        return _.filter( panel.sections(), function( section ) {
 
1597
                                                return section.active();
 
1598
                                        } ).length;
 
1599
                                };
 
1600
 
 
1601
                                /**
 
1602
                                 * Determine whether or not the notice should be displayed.
 
1603
                                 *
 
1604
                                 * @return {boolean}
 
1605
                                 */
1590
1606
                                shouldShowNotice = function() {
1591
 
                                        return ( 0 === _.filter( panel.sections(), function( section ) {
1592
 
                                                return section.active();
1593
 
                                        } ).length );
1594
 
                                };
 
1607
                                        var activeSectionCount = getActiveSectionCount();
 
1608
                                        if ( 0 === activeSectionCount ) {
 
1609
                                                return true;
 
1610
                                        } else {
 
1611
                                                return activeSectionCount !== api.Widgets.data.registeredSidebars.length;
 
1612
                                        }
 
1613
                                };
 
1614
 
 
1615
                                /**
 
1616
                                 * Update the notice.
 
1617
                                 *
 
1618
                                 * @returns {void}
 
1619
                                 */
 
1620
                                updateNotice = function() {
 
1621
                                        var activeSectionCount = getActiveSectionCount(), someRenderedMessage, nonRenderedAreaCount, registeredAreaCount;
 
1622
                                        noticeContainer.empty();
 
1623
 
 
1624
                                        registeredAreaCount = api.Widgets.data.registeredSidebars.length;
 
1625
                                        if ( activeSectionCount !== registeredAreaCount ) {
 
1626
 
 
1627
                                                if ( 0 !== activeSectionCount ) {
 
1628
                                                        nonRenderedAreaCount = registeredAreaCount - activeSectionCount;
 
1629
                                                        someRenderedMessage = l10n.someAreasShown[ nonRenderedAreaCount ];
 
1630
                                                } else {
 
1631
                                                        someRenderedMessage = l10n.noAreasShown;
 
1632
                                                }
 
1633
                                                if ( someRenderedMessage ) {
 
1634
                                                        noticeContainer.append( $( '<p></p>', {
 
1635
                                                                text: someRenderedMessage
 
1636
                                                        } ) );
 
1637
                                                }
 
1638
 
 
1639
                                                noticeContainer.append( $( '<p></p>', {
 
1640
                                                        text: l10n.navigatePreview
 
1641
                                                } ) );
 
1642
                                        }
 
1643
                                };
 
1644
                                updateNotice();
1595
1645
 
1596
1646
                                /*
1597
1647
                                 * Set the initial visibility state for rendered notice.
1598
1648
                                 * Update the visibility of the notice whenever a reflow happens.
1599
1649
                                 */
1600
 
                                noRenderedAreasNotice.toggle( shouldShowNotice() );
 
1650
                                noticeContainer.toggle( shouldShowNotice() );
1601
1651
                                api.previewer.deferred.active.done( function () {
1602
 
                                        noRenderedAreasNotice.toggle( shouldShowNotice() );
 
1652
                                        noticeContainer.toggle( shouldShowNotice() );
1603
1653
                                });
1604
1654
                                api.bind( 'pane-contents-reflowed', function() {
1605
1655
                                        var duration = ( 'resolved' === api.previewer.deferred.active.state() ) ? 'fast' : 0;
 
1656
                                        updateNotice();
1606
1657
                                        if ( shouldShowNotice() ) {
1607
 
                                                noRenderedAreasNotice.slideDown( duration );
 
1658
                                                noticeContainer.slideDown( duration );
1608
1659
                                        } else {
1609
 
                                                noRenderedAreasNotice.slideUp( duration );
 
1660
                                                noticeContainer.slideUp( duration );
1610
1661
                                        }
1611
1662
                                });
1612
1663
                        });