WordPress.org
Get WordPress

Make WordPress Core

Changeset 41374


Ignore:
Timestamp:
09/12/2017 07:02:49 AM (9 years ago)
Author:
westonruter
Message:

Customize: Add global notifications area.

  • Displays an error notification in the global area when a save attempt is rejected due to invalid settings. An error notification is also displayed when saving fails due to a network error or server error.
  • Introduces wp.customize.Notifications subclass of wp.customize.Values to contain instances of wp.customize.Notification and manage their rendering into a container.
  • Exposes the global notification area as wp.customize.notifications collection instance.
  • Updates the notifications object on Control to use Notifications rather than Values and to re-use the rendering logic from the former. The old Control#renderNotifications method is deprecated.
  • Allows notifications to be dismissed by instantiating them with a dismissible property.
  • Allows wp.customize.Notification to be extended with custom templates and render functions.
  • Triggers a removed event on wp.customize.Values instances _after_ a value has been removed from the collection.

Props delawski, westonruter, karmatosed, celloexpressions, Fab1en, melchoyce, Kelderic, afercia, adamsilverstein.
See #34893, #39896.
Fixes #35210, #31582, #37727, #37269.

Location:
trunk
Files:
10 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/css/customize-controls.css

    r41368 r41374  
    767767        margin: 4px 0 8px 0;
    768768        padding: 0;
    769         display: none;
    770769        cursor: default;
    771770}
    … …  
    797796.customize-control-text.has-error input {
    798797        outline: 2px solid #dc3232;
     798}
     799
     800#customize-controls #customize-notifications-area {
     801        position: absolute;
     802        top: 46px;
     803        width: 100%;
     804        max-height: 210px;
     805        overflow-x: hidden;
     806        overflow-y: auto;
     807        border-bottom: 1px solid #ddd;
     808        display: block;
     809        padding: 0;
     810        margin: 0;
     811}
     812
     813#customize-controls #customize-notifications-area > ul,
     814#customize-controls #customize-notifications-area .notice {
     815        margin: 0;
     816}
     817#customize-controls #customize-notifications-area .notice {
     818        padding: 9px 14px;
     819}
     820#customize-controls #customize-notifications-area .notice.is-dismissible {
     821        padding-right: 38px;
     822}
     823#customize-controls #customize-notifications-area .notice + .notice {
     824        margin-top: 1px;
    799825}
    800826

  • trunk/src/wp-admin/customize.php

    r40704 r41374  
    152152
    153153                <div id="widgets-right" class="wp-clearfix"><!-- For Widget Customizer, many widgets try to look for instances under div#widgets-right, so we have to add that ID to a container div in the Customizer for compat -->
    154                 <div class="wp-full-overlay-sidebar-content" tabindex="-1">
    155                         <div id="customize-info" class="accordion-section customize-info">
    156                                 <div class="accordion-section-title">
    157                                         <span class="preview-notice"><?php
    158                                                 echo sprintf( __( 'You are customizing %s' ), '<strong class="panel-title site-title">' . get_bloginfo( 'name', 'display' ) . '</strong>' );
    159                                         ?></span>
    160                                         <button type="button" class="customize-help-toggle dashicons dashicons-editor-help" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button>
     154                        <div id="customize-notifications-area" class="customize-control-notifications-container">
     155                                <ul></ul>
     156                        </div>
     157                        <div class="wp-full-overlay-sidebar-content" tabindex="-1">
     158                                <div id="customize-info" class="accordion-section customize-info">
     159                                        <div class="accordion-section-title">
     160                                                <span class="preview-notice"><?php
     161                                                        echo sprintf( __( 'You are customizing %s' ), '<strong class="panel-title site-title">' . get_bloginfo( 'name', 'display' ) . '</strong>' );
     162                                                ?></span>
     163                                                <button type="button" class="customize-help-toggle dashicons dashicons-editor-help" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button>
     164                                        </div>
     165                                        <div class="customize-panel-description"><?php
     166                                                _e( 'The Customizer allows you to preview changes to your site before publishing them. You can navigate to different pages on your site within the preview. Edit shortcuts are shown for some editable elements.' );
     167                                        ?></div>
    161168                                </div>
    162                                 <div class="customize-panel-description"><?php
    163                                         _e( 'The Customizer allows you to preview changes to your site before publishing them. You can navigate to different pages on your site within the preview. Edit shortcuts are shown for some editable elements.' );
    164                                 ?></div>
     169
     170                                <div id="customize-theme-controls">
     171                                        <ul class="customize-pane-parent"><?php // Panels and sections are managed here via JavaScript ?></ul>
     172                                </div>
    165173                        </div>
    166 
    167                         <div id="customize-theme-controls">
    168                                 <ul class="customize-pane-parent"><?php // Panels and sections are managed here via JavaScript ?></ul>
    169                         </div>
    170                 </div>
    171174                </div>
    172175

  • trunk/src/wp-admin/js/customize-controls.js

    r41368 r41374  
    1 /* global _wpCustomizeHeader, _wpCustomizeBackground, _wpMediaViewsL10n, MediaElementPlayer */
     1/* global _wpCustomizeHeader, _wpCustomizeBackground, _wpMediaViewsL10n, MediaElementPlayer, console */
    22(function( exports, $ ){
    33        var Container, focus, normalizedTransitionendEventName, api = wp.customize;
     4
     5        /**
     6         * A collection of observable notifications.
     7         *
     8         * @since 4.9.0
     9         * @class
     10         * @augments wp.customize.Values
     11         */
     12        api.Notifications = api.Values.extend({
     13
     14                /**
     15                 * Whether the alternative style should be used.
     16                 *
     17                 * @since 4.9.0
     18                 * @type {boolean}
     19                 */
     20                alt: false,
     21
     22                /**
     23                 * The default constructor for items of the collection.
     24                 *
     25                 * @since 4.9.0
     26                 * @type {object}
     27                 */
     28                defaultConstructor: api.Notification,
     29
     30                /**
     31                 * Initialize notifications area.
     32                 *
     33                 * @since 4.9.0
     34                 * @constructor
     35                 * @param {object}  options - Options.
     36                 * @param {jQuery}  [options.container] - Container element for notifications. This can be injected later.
     37                 * @param {boolean} [options.alt] - Whether alternative style should be used when rendering notifications.
     38                 * @returns {void}
     39                 * @this {wp.customize.Notifications}
     40                 */
     41                initialize: function( options ) {
     42                        var collection = this;
     43
     44                        api.Values.prototype.initialize.call( collection, options );
     45
     46                        // Keep track of the order in which the notifications were added for sorting purposes.
     47                        collection._addedIncrement = 0;
     48                        collection._addedOrder = {};
     49
     50                        // Trigger change event when notification is added or removed.
     51                        collection.bind( 'add', function( notification ) {
     52                                collection.trigger( 'change', notification );
     53                        });
     54                        collection.bind( 'removed', function( notification ) {
     55                                collection.trigger( 'change', notification );
     56                        });
     57                },
     58
     59                /**
     60                 * Get the number of notifications added.
     61                 *
     62                 * @since 4.9.0
     63                 * @return {number} Count of notifications.
     64                 */
     65                count: function() {
     66                        return _.size( this._value );
     67                },
     68
     69                /**
     70                 * Add notification to the collection.
     71                 *
     72                 * @since 4.9.0
     73                 * @param {string} code - Notification code.
     74                 * @param {object} params - Notification params.
     75                 * @return {api.Notification} Added instance (or existing instance if it was already added).
     76                 */
     77                add: function( code, params ) {
     78                        var collection = this;
     79                        if ( ! collection.has( code ) ) {
     80                                collection._addedIncrement += 1;
     81                                collection._addedOrder[ code ] = collection._addedIncrement;
     82                        }
     83                        return api.Values.prototype.add.call( this, code, params );
     84                },
     85
     86                /**
     87                 * Add notification to the collection.
     88                 *
     89                 * @since 4.9.0
     90                 * @param {string} code - Notification code to remove.
     91                 * @return {api.Notification} Added instance (or existing instance if it was already added).
     92                 */
     93                remove: function( code ) {
     94                        var collection = this;
     95                        delete collection._addedOrder[ code ];
     96                        return api.Values.prototype.remove.call( this, code );
     97                },
     98
     99                /**
     100                 * Get list of notifications.
     101                 *
     102                 * Notifications may be sorted by type followed by added time.
     103                 *
     104                 * @since 4.9.0
     105                 * @param {object}  args - Args.
     106                 * @param {boolean} [args.sort=false] - Whether to return the notifications sorted.
     107                 * @return {Array.<wp.customize.Notification>} Notifications.
     108                 * @this {wp.customize.Notifications}
     109                 */
     110                get: function( args ) {
     111                        var collection = this, notifications, errorTypePriorities, params;
     112                        notifications = _.values( collection._value );
     113
     114                        params = _.extend(
     115                                { sort: false },
     116                                args
     117                        );
     118
     119                        if ( params.sort ) {
     120                                errorTypePriorities = { error: 4, warning: 3, success: 2, info: 1 };
     121                                notifications.sort( function( a, b ) {
     122                                        var aPriority = 0, bPriority = 0;
     123                                        if ( ! _.isUndefined( errorTypePriorities[ a.type ] ) ) {
     124                                                aPriority = errorTypePriorities[ a.type ];
     125                                        }
     126                                        if ( ! _.isUndefined( errorTypePriorities[ b.type ] ) ) {
     127                                                bPriority = errorTypePriorities[ b.type ];
     128                                        }
     129                                        if ( aPriority !== bPriority ) {
     130                                                return bPriority - aPriority; // Show errors first.
     131                                        }
     132                                        return collection._addedOrder[ b.code ] - collection._addedOrder[ a.code ]; // Show newer notifications higher.
     133                                });
     134                        }
     135
     136                        return notifications;
     137                },
     138
     139                /**
     140                 * Render notifications area.
     141                 *
     142                 * @since 4.9.0
     143                 * @returns {void}
     144                 * @this {wp.customize.Notifications}
     145                 */
     146                render: function() {
     147                        var collection = this,
     148                                notifications,
     149                                renderedNotificationContainers,
     150                                prevRenderedCodes,
     151                                nextRenderedCodes,
     152                                addedCodes,
     153                                removedCodes,
     154                                listElement;
     155
     156                        // Short-circuit if there are no container to render into.
     157                        if ( ! collection.container || ! collection.container.length ) {
     158                                return;
     159                        }
     160                        listElement = collection.container.children( 'ul' ).first();
     161                        if ( ! listElement.length ) {
     162                                listElement = $( '<ul></ul>' );
     163                                collection.container.append( listElement );
     164                        }
     165
     166                        notifications = collection.get( { sort: true } );
     167
     168                        renderedNotificationContainers = {};
     169                        listElement.find( '> [data-code]' ).each( function() {
     170                                renderedNotificationContainers[ $( this ).data( 'code' ) ] = $( this );
     171                        });
     172
     173                        collection.container.toggle( 0 !== notifications.length );
     174
     175                        nextRenderedCodes = _.pluck( notifications, 'code' );
     176                        prevRenderedCodes = _.keys( renderedNotificationContainers );
     177
     178                        // Short-circuit if there are no notifications added.
     179                        if ( _.isEqual( nextRenderedCodes, prevRenderedCodes ) ) {
     180                                return;
     181                        }
     182
     183                        addedCodes = _.difference( nextRenderedCodes, prevRenderedCodes );
     184                        removedCodes = _.difference( prevRenderedCodes, nextRenderedCodes );
     185
     186                        // Remove notifications that have been removed.
     187                        _.each( renderedNotificationContainers, function( renderedContainer, code ) {
     188                                if ( -1 !== _.indexOf( removedCodes, code ) ) {
     189                                        renderedContainer.remove(); // @todo Consider slideUp as enhancement.
     190                                }
     191                        });
     192
     193                        // Add all notifications in the sorted order.
     194                        _.each( notifications, function( notification ) {
     195                                var notificationContainer = renderedNotificationContainers[ notification.code ];
     196                                if ( notificationContainer ) {
     197                                        listElement.append( notificationContainer );
     198                                } else {
     199                                        notificationContainer = $( notification.render() );
     200                                        listElement.append( notificationContainer ); // @todo Consider slideDown() as enhancement.
     201                                        if ( wp.a11y ) {
     202                                                wp.a11y.speak( notification.message, 'assertive' );
     203                                        }
     204                                }
     205                        });
     206
     207                        collection.trigger( 'rendered' );
     208                }
     209        });
    4210
    5211        /**
    … …  
    18842090                        control.active = new api.Value();
    18852091                        control.activeArgumentsQueue = [];
    1886                         control.notifications = new api.Values({ defaultConstructor: api.Notification });
     2092                        control.notifications = new api.Notifications({
     2093                                alt: control.altNotice
     2094                        });
    18872095
    18882096                        control.elements = [];
    … …  
    19742182                        // After the control is embedded on the page, invoke the "ready" method.
    19752183                        control.deferred.embedded.done( function () {
    1976                                 /*
    1977                                  * Note that this debounced/deferred rendering is needed for two reasons:
    1978                                  * 1) The 'remove' event is triggered just _before_ the notification is actually removed.
    1979                                  * 2) Improve performance when adding/removing multiple notifications at a time.
    1980                                  */
    1981                                 var debouncedRenderNotifications = _.debounce( function renderNotifications() {
    1982                                         control.renderNotifications();
     2184                                var renderNotifications = function() {
     2185                                        control.notifications.render();
     2186                                };
     2187                                control.notifications.container = control.getNotificationsContainerElement();
     2188                                control.notifications.bind( 'rendered', function() {
     2189                                        var notifications = control.notifications.get();
     2190                                        control.container.toggleClass( 'has-notifications', 0 !== notifications.length );
     2191                                        control.container.toggleClass( 'has-error', 0 !== _.where( notifications, { type: 'error' } ).length );
    19832192                                } );
    1984                                 control.notifications.bind( 'add', function( notification ) {
    1985                                         wp.a11y.speak( notification.message, 'assertive' );
    1986                                         debouncedRenderNotifications();
    1987                                 } );
    1988                                 control.notifications.bind( 'remove', debouncedRenderNotifications );
    1989                                 control.renderNotifications();
    1990 
     2193                                renderNotifications();
     2194                                control.notifications.bind( 'change', _.debounce( renderNotifications ) );
    19912195                                control.ready();
    19922196                        });
    … …  
    20922296                 * of rendering notifications.
    20932297                 *
     2298                 * @deprecated in favor of `control.notifications.render()`
    20942299                 * @since 4.6.0
    20952300                 * @this {wp.customize.Control}
    … …  
    20972302                renderNotifications: function() {
    20982303                        var control = this, container, notifications, hasError = false;
     2304
     2305                        if ( 'undefined' !== typeof console && console.warn ) {
     2306                                console.warn( '[DEPRECATED] wp.customize.Control.prototype.renderNotifications() is deprecated in favor of instantating a wp.customize.Notifications and calling its render() method.' );
     2307                        }
     2308
    20992309                        container = control.getNotificationsContainerElement();
    21002310                        if ( ! container || ! container.length ) {
    … …  
    34273637        api.section = new api.Values({ defaultConstructor: api.Section });
    34283638        api.panel = new api.Values({ defaultConstructor: api.Panel });
     3639
     3640        // Create the collection for global Notifications.
     3641        api.notifications = new api.Notifications();
    34293642
    34303643        /**
    … …  
    45024715                                        } );
    45034716
     4717                                        // Remove notifications that were added due to save failures.
     4718                                        api.notifications.each( function( notification ) {
     4719                                                if ( notification.saveFailure ) {
     4720                                                        api.notifications.remove( notification.code );
     4721                                                }
     4722                                        });
     4723
    45044724                                        request.fail( function ( response ) {
    45054725
    … …  
    45194739                                                                previewer.preview.iframe.show();
    45204740                                                        } );
     4741                                                } else if ( response.code ) {
     4742                                                        api.notifications.add( response.code, new api.Notification( response.code, {
     4743                                                                message: response.message,
     4744                                                                type: 'error',
     4745                                                                dismissible: true,
     4746                                                                fromServer: true,
     4747                                                                saveFailure: true
     4748                                                        } ) );
     4749                                                } else {
     4750                                                        api.notifications.add( 'unknown_error', new api.Notification( 'unknown_error', {
     4751                                                                message: api.l10n.serverSaveError,
     4752                                                                type: 'error',
     4753                                                                dismissible: true,
     4754                                                                fromServer: true,
     4755                                                                saveFailure: true
     4756                                                        } ) );
    45214757                                                }
    45224758
    … …  
    46884924                        values.bind( 'remove', debouncedReflowPaneContents );
    46894925                } );
     4926
     4927                // Set up global notifications area.
     4928                api.bind( 'ready', function setUpGlobalNotificationsArea() {
     4929                        var sidebar, containerHeight, containerInitialTop;
     4930                        api.notifications.container = $( '#customize-notifications-area' );
     4931
     4932                        api.notifications.bind( 'change', _.debounce( function() {
     4933                                api.notifications.render();
     4934                        } ) );
     4935
     4936                        sidebar = $( '.wp-full-overlay-sidebar-content' );
     4937                        api.notifications.bind( 'rendered', function updateSidebarTop() {
     4938                                sidebar.css( 'top', '' );
     4939                                if ( 0 !== api.notifications.count() ) {
     4940                                        containerHeight = api.notifications.container.outerHeight() + 1;
     4941                                        containerInitialTop = parseInt( sidebar.css( 'top' ), 10 );
     4942                                        sidebar.css( 'top', containerInitialTop + containerHeight + 'px' );
     4943                                }
     4944                                api.notifications.trigger( 'sidebarTopUpdated' );
     4945                        });
     4946
     4947                        api.notifications.render();
     4948                });
    46904949
    46914950                // Save and activated states
    … …  
    49725231
    49735232                                var scrollTop = parentContainer.scrollTop(),
    4974                                         isScrollingUp = ( lastScrollTop ) ? scrollTop <= lastScrollTop : true;
    4975 
     5233                                        scrollDirection;
     5234
     5235                                if ( ! lastScrollTop ) {
     5236                                        scrollDirection = 1;
     5237                                } else {
     5238                                        if ( scrollTop === lastScrollTop ) {
     5239                                                scrollDirection = 0;
     5240                                        } else if ( scrollTop > lastScrollTop ) {
     5241                                                scrollDirection = 1;
     5242                                        } else {
     5243                                                scrollDirection = -1;
     5244                                        }
     5245                                }
    49765246                                lastScrollTop = scrollTop;
    4977                                 positionStickyHeader( activeHeader, scrollTop, isScrollingUp );
     5247                                if ( 0 !== scrollDirection ) {
     5248                                        positionStickyHeader( activeHeader, scrollTop, scrollDirection );
     5249                                }
    49785250                        }, 8 ) );
     5251
     5252                        // Update header position on sidebar layout change.
     5253                        api.notifications.bind( 'sidebarTopUpdated', function() {
     5254                                if ( activeHeader && activeHeader.element.hasClass( 'is-sticky' ) ) {
     5255                                        activeHeader.element.css( 'top', parentContainer.css( 'top' ) );
     5256                                }
     5257                        });
    49795258
    49805259                        // Release header element if it is sticky.
    … …  
    49915270                        // Reset position of the sticky header.
    49925271                        resetStickyHeader = function( headerElement, headerParent ) {
    4993                                 headerElement
    4994                                         .removeClass( 'maybe-sticky is-in-view' )
    4995                                         .css( {
    4996                                                 width: '',
    4997                                                 top: ''
    4998                                         } );
    4999                                 headerParent.css( 'padding-top', '' );
     5272                                if ( headerElement.hasClass( 'is-in-view' ) ) {
     5273                                        headerElement
     5274                                                .removeClass( 'maybe-sticky is-in-view' )
     5275                                                .css( {
     5276                                                        width: '',
     5277                                                        top:   ''
     5278                                                } );
     5279                                        headerParent.css( 'padding-top', '' );
     5280                                }
    50005281                        };
    50015282
    … …  
    50245305                         * @access private
    50255306                         *
    5026                          * @param {object}  header        Header.
    5027                          * @param {number}  scrollTop    Scroll top.
    5028                          * @param {boolean} isScrollingUp Is scrolling up?
     5307                         * @param {object} header - Header.
     5308                         * @param {number} scrollTop - Scroll top.
     5309                         * @param {number} scrollDirection - Scroll direction, negative number being up and positive being down.
    50295310                         * @returns {void}
    50305311                         */
    5031                         positionStickyHeader = function( header, scrollTop, isScrollingUp ) {
     5312                        positionStickyHeader = function( header, scrollTop, scrollDirection ) {
    50325313                                var headerElement = header.element,
    50335314                                        headerParent = header.parent,
    … …  
    50365317                                        maybeSticky = headerElement.hasClass( 'maybe-sticky' ),
    50375318                                        isSticky = headerElement.hasClass( 'is-sticky' ),
    5038                                         isInView = headerElement.hasClass( 'is-in-view' );
     5319                                        isInView = headerElement.hasClass( 'is-in-view' ),
     5320                                        isScrollingUp = ( -1 === scrollDirection );
    50395321
    50405322                                // When scrolling down, gradually hide sticky header.
    … …  
    50795361                                                        .addClass( 'is-sticky' )
    50805362                                                        .css( {
    5081                                                                 top:   '',
     5363                                                                top:   parentContainer.css( 'top' ),
    50825364                                                                width: headerParent.outerWidth() + 'px'
    50835365                                                        } );

  • trunk/src/wp-admin/js/customize-widgets.js

    r41249 r41374  
    551551                        control.widgetContentEmbedded = true;
    552552
     553                        // Update the notification container element now that the widget content has been embedded.
     554                        control.notifications.container = control.getNotificationsContainerElement();
     555                        control.notifications.render();
     556
    553557                        widgetContent = $( control.params.widget_content );
    554558                        control.container.find( '.widget-content:first' ).append( widgetContent );

  • trunk/src/wp-includes/class-wp-customize-manager.php

    r41372 r41374  
    349349                add_action( 'customize_controls_enqueue_scripts', array( $this, 'enqueue_control_scripts' ) );
    350350
    351                 // Render Panel, Section, and Control templates.
     351                // Render Common, Panel, Section, and Control templates.
    352352                add_action( 'customize_controls_print_footer_scripts', array( $this, 'render_panel_templates' ), 1 );
    353353                add_action( 'customize_controls_print_footer_scripts', array( $this, 'render_section_templates' ), 1 );
    … …  
    23562356                        $response = array(
    23572357                                'setting_validities' => $setting_validities,
    2358                                 'message' => sprintf( _n( 'There is %s invalid setting.', 'There are %s invalid settings.', $invalid_setting_count ), number_format_i18n( $invalid_setting_count ) ),
     2358                                /* translators: placeholder is number of invalid settings */
     2359                                'message' => sprintf( _n( 'Unable to save due to %s invalid setting.', 'Unable to save due to %s invalid settings.', $invalid_setting_count ), number_format_i18n( $invalid_setting_count ) ),
    23592360                        );
    23602361                        return new WP_Error( 'transaction_fail', '', $response );
    … …  
    31843185                        $control->print_template();
    31853186                }
     3187
     3188                ?>
     3189                <script type="text/html" id="tmpl-customize-notification">
     3190                        <li class="notice notice-{{ data.type || 'info' }} {{ data.alt ? 'notice-alt' : '' }} {{ data.dismissible ? 'is-dismissible' : '' }}" data-code="{{ data.code }}" data-type="{{ data.type }}">
     3191                                {{{ data.message || data.code }}}
     3192                                <# if ( data.dismissible ) { #>
     3193                                        <button type="button" class="notice-dismiss"><span class="screen-reader-text"><?php _e( 'Dismiss' ); ?></span></button>
     3194                                <# } #>
     3195                        </li>
     3196                </script>
     3197
     3198                <?php
     3199                /* The following template is obsolete in core but retained for plugins. */
    31863200                ?>
    31873201                <script type="text/html" id="tmpl-customize-control-notifications">

  • trunk/src/wp-includes/js/customize-base.js

    r41351 r41374  
    434434                 */
    435435                remove: function( id ) {
    436                         var value;
    437 
    438                         if ( this.has( id ) ) {
    439                                 value = this.value( id );
     436                        var value = this.value( id );
     437
     438                        if ( value ) {
     439
     440                                // Trigger event right before the element is removed from the collection.
    440441                                this.trigger( 'remove', value );
    441                                 if ( value.extended( api.Value ) )
     442
     443                                if ( value.extended( api.Value ) ) {
    442444                                        value.unbind( this._change );
     445                                }
    443446                                delete value.parent;
    444447                        }
    … …  
    446449                        delete this._value[ id ];
    447450                        delete this._deferreds[ id ];
     451
     452                        // Trigger removed event after the item has been eliminated from the collection.
     453                        if ( value ) {
     454                                this.trigger( 'removed', value );
     455                        }
    448456                },
    449457
    … …  
    791799         */
    792800        api.Notification = api.Class.extend(/** @lends wp.customize.Notification.prototype */{
     801
     802                /**
     803                 * Template function for rendering the notification.
     804                 *
     805                 * This will be populated with template option or else it will be populated with template from the ID.
     806                 *
     807                 * @since 4.9.0
     808                 * @var {Function}
     809                 */
     810                template: null,
     811
     812                /**
     813                 * ID for the template to render the notification.
     814                 *
     815                 * @since 4.9.0
     816                 * @var {string}
     817                 */
     818                templateId: 'customize-notification',
     819
     820                /**
     821                 * Initialize notification.
     822                 *
     823                 * @since 4.9.0
     824                 *
     825                 * @param {string}   code - Notification code.
     826                 * @param {object}   params - Notification parameters.
     827                 * @param {string}   params.message - Message.
     828                 * @param {string}   [params.type=error] - Type.
     829                 * @param {string}   [params.setting] - Related setting ID.
     830                 * @param {Function} [params.template] - Function for rendering template. If not provided, this will come from templateId.
     831                 * @param {string}   [params.templateId] - ID for template to render the notification.
     832                 * @param {boolean}  [params.dismissible] - Whether the notification can be dismissed.
     833                 */
    793834                initialize: function( code, params ) {
    794835                        var _params;
    … …  
    800841                                        fromServer: false,
    801842                                        data: null,
    802                                         setting: null
     843                                        setting: null,
     844                                        template: null,
     845                                        dismissible: false
    803846                                },
    804847                                params
    … …  
    806849                        delete _params.code;
    807850                        _.extend( this, _params );
     851                },
     852
     853                /**
     854                 * Render the notification.
     855                 *
     856                 * @since 4.9.0
     857                 *
     858                 * @returns {jQuery} Notification container element.
     859                 */
     860                render: function() {
     861                        var notification = this, container, data;
     862                        if ( ! notification.template ) {
     863                                notification.template = wp.template( notification.templateId );
     864                        }
     865                        data = _.extend( {}, notification, {
     866                                alt: notification.parent && notification.parent.alt
     867                        } );
     868                        container = $( notification.template( data ) );
     869
     870                        if ( notification.dismissible ) {
     871                                container.find( '.notice-dismiss' ).on( 'click', function() {
     872                                        if ( notification.parent ) {
     873                                                notification.parent.remove( notification.code );
     874                                        } else {
     875                                                container.remove();
     876                                        }
     877                                });
     878                        }
     879
     880                        return container;
    808881                }
    809882        });

  • trunk/src/wp-includes/script-loader.php

    r41360 r41374  
    547547                'expandSidebar'      => _x( 'Show Controls', 'label for hide controls button without length constraints' ),
    548548                'untitledBlogName'   => __( '(Untitled)' ),
     549                'serverSaveError'    => __( 'Failed connecting to the server. Please try saving again.' ),
    549550                // Used for overriding the file types allowed in plupload.
    550551                'allowedFiles'       => __( 'Allowed Files' ),

  • trunk/tests/qunit/index.html

    r41206 r41374  
    210210                                <# } ); #>
    211211                        </ul>
     212                </script>
     213                <script type="text/html" id="tmpl-customize-notification">
     214                        <li class="notice notice-{{ data.type || 'info' }} {{ data.altNotice ? 'notice-alt' : '' }} {{ data.dismissible ? 'is-dismissible' : '' }}" data-code="{{ data.code }}" data-type="{{ data.type }}">
     215                                {{{ data.message || data.code }}}
     216                                <# if ( data.dismissible ) { #>
     217                                        <button type="button" class="notice-dismiss"><span class="screen-reader-text"><?php _e( 'Dismiss' ); ?></span></button>
     218                                <# } #>
     219                        </li>
    212220                </script>
    213221
    … …  
    387395                <div hidden>
    388396                        <div id="customize-preview"></div>
     397                        <div id="customize-notifications-test"><ul></ul></div>
    389398                </div>
    390399

  • trunk/tests/qunit/wp-admin/js/customize-base.js

    r38810 r41374  
    33jQuery( function( $ ) {
    44        var FooSuperClass, BarSubClass, foo, bar, ConstructorTestClass, newConstructor, constructorTest, $mockElement, mockString,
    5         firstInitialValue, firstValueInstance, wasCallbackFired, mockValueCallback;
     5        firstInitialValue, firstValueInstance, valuesInstance, wasCallbackFired, mockValueCallback;
    66
    77        module( 'Customize Base: Class' );
    … …  
    160160        });
    161161
     162        module( 'Customize Base: Values Class' );
     163
     164        valuesInstance = new wp.customize.Values();
     165
     166        test( 'Correct events are triggered when adding to or removing from Values collection', function() {
     167                var hasFooOnAdd = false,
     168                        hasFooOnRemove = false,
     169                        hasFooOnRemoved = true,
     170                        valuePassedToAdd = false,
     171                        valuePassedToRemove = false,
     172                        valuePassedToRemoved = false,
     173                        wasEventFiredOnRemoval = false,
     174                        fooValue = new wp.customize.Value( 'foo' );
     175
     176                // Test events when adding new value.
     177                valuesInstance.bind( 'add', function( value ) {
     178                        hasFooOnAdd = valuesInstance.has( 'foo' );
     179                        valuePassedToAdd = value;
     180                } );
     181                valuesInstance.add( 'foo', fooValue );
     182                ok( hasFooOnAdd );
     183                equal( valuePassedToAdd.get(), fooValue.get() );
     184
     185                // Test events when removing the value.
     186                valuesInstance.bind( 'remove', function( value ) {
     187                        hasFooOnRemove = valuesInstance.has( 'foo' );
     188                        valuePassedToRemove = value;
     189                        wasEventFiredOnRemoval = true;
     190                } );
     191                valuesInstance.bind( 'removed', function( value ) {
     192                        hasFooOnRemoved = valuesInstance.has( 'foo' );
     193                        valuePassedToRemoved = value;
     194                        wasEventFiredOnRemoval = true;
     195                } );
     196                valuesInstance.remove( 'foo' );
     197                ok( hasFooOnRemove );
     198                equal( valuePassedToRemove.get(), fooValue.get() );
     199                ok( ! hasFooOnRemoved );
     200                equal( valuePassedToRemoved.get(), fooValue.get() );
     201
     202                // Confirm no events are fired when nonexistent value is removed.
     203                wasEventFiredOnRemoval = false;
     204                valuesInstance.remove( 'bar' );
     205                ok( ! wasEventFiredOnRemoval );
     206        });
     207
    162208        module( 'Customize Base: Notification' );
    163209        test( 'Notification object exists and has expected properties', function ( assert ) {

  • trunk/tests/qunit/wp-admin/js/customize-controls.js

    r38993 r41374  
    8383        };
    8484
     85        module( 'Customizer notifications collection' );
     86        test( 'Notifications collection exists', function() {
     87                ok( wp.customize.notifications );
     88                equal( wp.customize.notifications.defaultConstructor, wp.customize.Notification );
     89        } );
     90
     91        test( 'Notification objects are rendered as part of notifications collection', function() {
     92                var container = jQuery( '#customize-notifications-test' ), items, collection;
     93
     94                collection = new wp.customize.Notifications({
     95                        container: container
     96                });
     97                collection.add( 'mycode-1', new wp.customize.Notification( 'mycode-1' ) );
     98                collection.render();
     99                items = collection.container.find( 'li' );
     100                equal( items.length, 1 );
     101                equal( items.first().data( 'code' ), 'mycode-1' );
     102
     103                collection.add( 'mycode-2', new wp.customize.Notification( 'mycode-2', {
     104                        dismissible: true
     105                } ) );
     106                collection.render();
     107                items = collection.container.find( 'li' );
     108                equal( items.length, 2 );
     109                equal( items.first().data( 'code' ), 'mycode-2' );
     110                equal( items.last().data( 'code' ), 'mycode-1' );
     111
     112                equal( items.first().find( '.notice-dismiss' ).length, 1 );
     113                equal( items.last().find( '.notice-dismiss' ).length, 0 );
     114
     115                collection.remove( 'mycode-2' );
     116                collection.render();
     117                items = collection.container.find( 'li' );
     118                equal( items.length, 1 );
     119                equal( items.first().data( 'code' ), 'mycode-1' );
     120
     121                collection.remove( 'mycode-1' );
     122                collection.render();
     123                ok( collection.container.is( ':hidden' ), 'Notifications area is hidden.' );
     124        } );
     125
    85126        module( 'Customizer Previewed Device' );
    86127        test( 'Previewed device defaults to desktop.', function () {
    … …  
    145186                        assert.ok( notificationContainerElement.is( '.customize-control-notifications-container' ) );
    146187                        assert.equal( 0, notificationContainerElement.find( '> ul > li' ).length );
    147                         assert.equal( 'none', notificationContainerElement.css( 'display' ) );
     188                        assert.equal( 0, notificationContainerElement.height() );
    148189
    149190                        settingNotification = new wp.customize.Notification( 'setting_invalidity', 'Invalid setting' );
    … …  
    153194
    154195                        // Note that renderNotifications is being called manually here since rendering normally happens asynchronously.
    155                         control.renderNotifications();
     196                        control.notifications.render();
    156197
    157198                        assert.equal( 2, notificationContainerElement.find( '> ul > li' ).length );
    … …  
    161202
    162203                        control.notifications.remove( controlOnlyNotification.code );
    163                         control.renderNotifications();
     204                        control.notifications.render();
    164205                        assert.equal( 1, notificationContainerElement.find( '> ul > li' ).length );
    165206                        assert.notEqual( 'none', notificationContainerElement.css( 'display' ) );
    166207
    167208                        control.settings['default'].notifications.remove( settingNotification.code );
    168                         control.renderNotifications();
     209                        control.notifications.render();
    169210                        assert.equal( 0, notificationContainerElement.find( '> ul > li' ).length );
    170                         assert.ok( notificationContainerElement.is( ':animated' ) ); // It is being slid down.
    171211                        notificationContainerElement.stop().hide(); // Clean up.
    172212
Note: See TracChangeset for help on using the changeset viewer.