Changeset 41352

Timestamp:

09/08/2017 07:10:59 PM (9 years ago)

Author:

westonruter

Message:

Widgets: Add dirty state tracking for widgets on admin screen.

• Mark a widget as dirty when a field input triggers a change or input event; clear dirty state when widget is successfully saved.
• Disable Save button and re-label "Saved" when widget not dirty.
• Show AYS dialog when leaving widgets admin screen with unsaved changes.
• When widgets are dirty, expand all unsaved widgets at AYS check and focus on first one.
• Change "Close" link to "Done"; hide link when widget is dirty and reveal when saved.
• The "Done" link persistently appears in the Customizer even after making a change (when the widget is dirty) because changes are autosaved into the changeset.
• Prevent saving widget when form fails checkValidity.
• Fix frequency of triggering of change event on the rich Text widget's textarea limited now to when there are actual changes.
• Add a class of widget-dirty to widget containers when the widget has unsaved changes.

Props westonruter, timmydcrawford, melchoyce.
Fixes #41610, #23120.

Location:

trunk/src

Files:

• wp-admin/css/widgets.css (modified) (1 diff)
• wp-admin/includes/widgets.php (modified) (1 diff)
• wp-admin/js/widgets.js (modified) (7 diffs)
• wp-admin/js/widgets/text-widgets.js (modified) (2 diffs)
• wp-includes/script-loader.php (modified) (1 diff)

trunk/src/wp-admin/css/widgets.css

@@ -41 +41 @@
         padding: 1px 15px 15px 15px;
         line-height: 16px;
+}
+
+.widget.widget-dirty .widget-control-close-wrapper {
+        display: none;
 }
 

trunk/src/wp-admin/includes/widgets.php

@@ -254 +254 @@
         <div class="widget-control-actions">
                 <div class="alignleft">
-                        <button type="button" class="button-link button-link-delete widget-control-remove"><?php _e( 'Delete' ); ?></button> |
-                        <button type="button" class="button-link widget-control-close"><?php _e( 'Close' ); ?></button>
+                        <button type="button" class="button-link button-link-delete widget-control-remove"><?php _e( 'Delete' ); ?></button>
+                        <span class="widget-control-close-wrapper">
+                                |
+                                <button type="button" class="button-link widget-control-close"><?php _e( 'Done' ); ?></button>
+                        </span>
                 </div>
                 <div class="alignright<?php if ( 'noform' === $has_form ) echo ' widget-control-noform'; ?>">

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

@@ -8 +8 @@
          * A closed Sidebar that gets a Widget dragged over it.
          *
-         * @var element|null
+         * @var {element|null}
          */
         hoveredSidebar: null,
+
+        /**
+         * Translations.
+         *
+         * Exported from PHP in wp_default_scripts().
+         *
+         * @var {object}
+         */
+        l10n: {
+                save: '{save}',
+                saved: '{saved}',
+                saveAlert: '{saveAlert}'
+        },
+
+        /**
+         * Lookup of which widgets have had change events triggered.
+         *
+         * @var {object}
+         */
+        dirtyWidgets: {},
 
         init : function() {
@@ -34 +54 @@
                 });
 
+                // Show AYS dialog when there are unsaved widget changes.
+                $( window ).on( 'beforeunload.widgets', function( event ) {
+                        var dirtyWidgetIds = [], unsavedWidgetsElements;
+                        $.each( self.dirtyWidgets, function( widgetId, dirty ) {
+                                if ( dirty ) {
+                                        dirtyWidgetIds.push( widgetId );
+                                }
+                        });
+                        if ( 0 !== dirtyWidgetIds.length ) {
+                                unsavedWidgetsElements = $( '#widgets-right' ).find( '.widget' ).filter( function() {
+                                        return -1 !== dirtyWidgetIds.indexOf( $( this ).prop( 'id' ).replace( /^widget-\d+_/, '' ) );
+                                });
+                                unsavedWidgetsElements.each( function() {
+                                        if ( ! $( this ).hasClass( 'open' ) ) {
+                                                $( this ).find( '.widget-title-action:first' ).click();
+                                        }
+                                });
+
+                                // Bring the first unsaved widget into view and focus on the first tabbable field.
+                                unsavedWidgetsElements.first().each( function() {
+                                        if ( this.scrollIntoViewIfNeeded ) {
+                                                this.scrollIntoViewIfNeeded();
+                                        } else {
+                                                this.scrollIntoView();
+                                        }
+                                        $( this ).find( '.widget-inside :tabbable:first' ).focus();
+                                } );
+
+                                event.returnValue = wpWidgets.l10n.saveAlert;
+                                return event.returnValue;
+                        }
+                });
+
                 $('#widgets-left .sidebar-name').click( function() {
                         $(this).closest('.widgets-holder-wrap').toggleClass('closed');
@@ -42 +95 @@
                         var target = $(e.target),
                                 css = { 'z-index': 100 },
-                                widget, inside, targetWidth, widgetWidth, margin,
+                                widget, inside, targetWidth, widgetWidth, margin, saveButton, widgetId,
                                 toggleBtn = target.closest( '.widget' ).find( '.widget-top button.widget-action' );
 
@@ -48 +101 @@
                                 widget = target.closest('div.widget');
                                 inside = widget.children('.widget-inside');
-                                targetWidth = parseInt( widget.find('input.widget-width').val(), 10 ),
+                                targetWidth = parseInt( widget.find('input.widget-width').val(), 10 );
                                 widgetWidth = widget.parent().width();
+                                widgetId = inside.find( '.widget-id' ).val();
+
+                                // Save button is initially disabled, but is enabled when a field is changed.
+                                if ( ! widget.data( 'dirty-state-initialized' ) ) {
+                                        saveButton = inside.find( '.widget-control-save' );
+                                        saveButton.prop( 'disabled', true ).val( wpWidgets.l10n.saved );
+                                        inside.on( 'input change', function() {
+                                                self.dirtyWidgets[ widgetId ] = true;
+                                                widget.addClass( 'widget-dirty' );
+                                                saveButton.prop( 'disabled', false ).val( wpWidgets.l10n.save );
+                                        });
+                                        widget.data( 'dirty-state-initialized', true );
+                                }
 
                                 if ( inside.is(':hidden') ) {
@@ -411 +477 @@
 
         save : function( widget, del, animate, order ) {
-                var sidebarId = widget.closest('div.widgets-sortables').attr('id'),
-                        data = widget.find('form').serialize(), a;
+                var self = this, data, a,
+                        sidebarId = widget.closest( 'div.widgets-sortables' ).attr( 'id' ),
+                        form = widget.find( 'form' );
+
+                if ( form.prop( 'checkValidity' ) && ! form[0].checkValidity() ) {
+                        return;
+                }
+
+                data = form.serialize();
 
                 widget = $(widget);
@@ -430 +503 @@
 
                 $.post( ajaxurl, data, function(r) {
-                        var id;
+                        var id = $('input.widget-id', widget).val();
 
                         if ( del ) {
                                 if ( ! $('input.widget_number', widget).val() ) {
-                                        id = $('input.widget-id', widget).val();
                                         $('#available-widgets').find('input.widget-id').each(function(){
                                                 if ( $(this).val() === id ) {
@@ -460 +532 @@
                                         $( 'div.widget-content', widget ).html( r );
                                         wpWidgets.appendTitle( widget );
+
+                                        // Re-disable the save button.
+                                        widget.find( '.widget-control-save' ).prop( 'disabled', true ).val( wpWidgets.l10n.saved );
+
+                                        widget.removeClass( 'widget-dirty' );
+
+                                        // Clear the dirty flag from the widget.
+                                        delete self.dirtyWidgets[ id ];
+
                                         $document.trigger( 'widget-updated', [ widget ] );
 

trunk/src/wp-admin/js/widgets/text-widgets.js

@@ -166 +166 @@
                  */
                 initializeEditor: function initializeEditor() {
-                        var control = this, changeDebounceDelay = 1000, id, textarea, triggerChangeIfDirty, restoreTextMode = false, needsTextareaChangeTrigger = false;
+                        var control = this, changeDebounceDelay = 1000, id, textarea, triggerChangeIfDirty, restoreTextMode = false, needsTextareaChangeTrigger = false, previousValue;
                         textarea = control.fields.text;
                         id = textarea.attr( 'id' );
+                        previousValue = textarea.val();
 
                         /**
@@ -203 +204 @@
                                 }
 
-                                // Trigger change on textarea when it is dirty for sake of widgets in the Customizer needing to sync form inputs to setting models.
-                                if ( needsTextareaChangeTrigger ) {
+                                // Trigger change on textarea when it has changed so the widget can enter a dirty state.
+                                if ( needsTextareaChangeTrigger && previousValue !== textarea.val() ) {
                                         textarea.trigger( 'change' );
                                         needsTextareaChangeTrigger = false;
+                                        previousValue = textarea.val();
                                 }
                         };

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

@@ -673 +673 @@
 
                 $scripts->add( 'admin-widgets', "/wp-admin/js/widgets$suffix.js", array( 'jquery-ui-sortable', 'jquery-ui-draggable', 'jquery-ui-droppable' ), false, 1 );
+                $scripts->add_inline_script( 'admin-widgets', sprintf( 'wpWidgets.l10n = %s;', wp_json_encode( array(
+                        'save' => __( 'Save' ),
+                        'saved' => __( 'Saved' ),
+                        'saveAlert' => __( 'The changes you made will be lost if you navigate away from this page.' ),
+                ) ) ) );
+
                 $scripts->add( 'media-widgets', "/wp-admin/js/widgets/media-widgets$suffix.js", array( 'jquery', 'media-models', 'media-views', 'wp-api-request' ) );
                 $scripts->add_inline_script( 'media-widgets', 'wp.mediaWidgets.init();', 'after' );