Adding upstream version 6.4.3+dfsg1.upstream/6.4.3+dfsg1

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

1 files changed, 550 insertions, 0 deletions

diff --git a/wp-admin/js/widgets/text-widgets.js b/wp-admin/js/widgets/text-widgets.js
new file mode 100644
index 0000000..48d7247
--- /dev/null
+++ b/wp-admin/js/widgets/text-widgets.js
@@ -0,0 +1,550 @@
+/**
+ * @output wp-admin/js/widgets/text-widgets.js
+ */
+
+/* global tinymce, switchEditors */
+/* eslint consistent-this: [ "error", "control" ] */
+
+/**
+ * @namespace wp.textWidgets
+ */
+wp.textWidgets = ( function( $ ) {
+	'use strict';
+
+	var component = {
+		dismissedPointers: [],
+		idBases: [ 'text' ]
+	};
+
+	component.TextWidgetControl = Backbone.View.extend(/** @lends wp.textWidgets.TextWidgetControl.prototype */{
+
+		/**
+		 * View events.
+		 *
+		 * @type {Object}
+		 */
+		events: {},
+
+		/**
+		 * Text widget control.
+		 *
+		 * @constructs wp.textWidgets.TextWidgetControl
+		 * @augments   Backbone.View
+		 * @abstract
+		 *
+		 * @param {Object} options - Options.
+		 * @param {jQuery} options.el - Control field container element.
+		 * @param {jQuery} options.syncContainer - Container element where fields are synced for the server.
+		 *
+		 * @return {void}
+		 */
+		initialize: function initialize( options ) {
+			var control = this;
+
+			if ( ! options.el ) {
+				throw new Error( 'Missing options.el' );
+			}
+			if ( ! options.syncContainer ) {
+				throw new Error( 'Missing options.syncContainer' );
+			}
+
+			Backbone.View.prototype.initialize.call( control, options );
+			control.syncContainer = options.syncContainer;
+
+			control.$el.addClass( 'text-widget-fields' );
+			control.$el.html( wp.template( 'widget-text-control-fields' ) );
+
+			control.customHtmlWidgetPointer = control.$el.find( '.wp-pointer.custom-html-widget-pointer' );
+			if ( control.customHtmlWidgetPointer.length ) {
+				control.customHtmlWidgetPointer.find( '.close' ).on( 'click', function( event ) {
+					event.preventDefault();
+					control.customHtmlWidgetPointer.hide();
+					$( '#' + control.fields.text.attr( 'id' ) + '-html' ).trigger( 'focus' );
+					control.dismissPointers( [ 'text_widget_custom_html' ] );
+				});
+				control.customHtmlWidgetPointer.find( '.add-widget' ).on( 'click', function( event ) {
+					event.preventDefault();
+					control.customHtmlWidgetPointer.hide();
+					control.openAvailableWidgetsPanel();
+				});
+			}
+
+			control.pasteHtmlPointer = control.$el.find( '.wp-pointer.paste-html-pointer' );
+			if ( control.pasteHtmlPointer.length ) {
+				control.pasteHtmlPointer.find( '.close' ).on( 'click', function( event ) {
+					event.preventDefault();
+					control.pasteHtmlPointer.hide();
+					control.editor.focus();
+					control.dismissPointers( [ 'text_widget_custom_html', 'text_widget_paste_html' ] );
+				});
+			}
+
+			control.fields = {
+				title: control.$el.find( '.title' ),
+				text: control.$el.find( '.text' )
+			};
+
+			// Sync input fields to hidden sync fields which actually get sent to the server.
+			_.each( control.fields, function( fieldInput, fieldName ) {
+				fieldInput.on( 'input change', function updateSyncField() {
+					var syncInput = control.syncContainer.find( '.sync-input.' + fieldName );
+					if ( syncInput.val() !== fieldInput.val() ) {
+						syncInput.val( fieldInput.val() );
+						syncInput.trigger( 'change' );
+					}
+				});
+
+				// Note that syncInput cannot be re-used because it will be destroyed with each widget-updated event.
+				fieldInput.val( control.syncContainer.find( '.sync-input.' + fieldName ).val() );
+			});
+		},
+
+		/**
+		 * Dismiss pointers for Custom HTML widget.
+		 *
+		 * @since 4.8.1
+		 *
+		 * @param {Array} pointers Pointer IDs to dismiss.
+		 * @return {void}
+		 */
+		dismissPointers: function dismissPointers( pointers ) {
+			_.each( pointers, function( pointer ) {
+				wp.ajax.post( 'dismiss-wp-pointer', {
+					pointer: pointer
+				});
+				component.dismissedPointers.push( pointer );
+			});
+		},
+
+		/**
+		 * Open available widgets panel.
+		 *
+		 * @since 4.8.1
+		 * @return {void}
+		 */
+		openAvailableWidgetsPanel: function openAvailableWidgetsPanel() {
+			var sidebarControl;
+			wp.customize.section.each( function( section ) {
+				if ( section.extended( wp.customize.Widgets.SidebarSection ) && section.expanded() ) {
+					sidebarControl = wp.customize.control( 'sidebars_widgets[' + section.params.sidebarId + ']' );
+				}
+			});
+			if ( ! sidebarControl ) {
+				return;
+			}
+			setTimeout( function() { // Timeout to prevent click event from causing panel to immediately collapse.
+				wp.customize.Widgets.availableWidgetsPanel.open( sidebarControl );
+				wp.customize.Widgets.availableWidgetsPanel.$search.val( 'HTML' ).trigger( 'keyup' );
+			});
+		},
+
+		/**
+		 * Update input fields from the sync fields.
+		 *
+		 * This function is called at the widget-updated and widget-synced events.
+		 * A field will only be updated if it is not currently focused, to avoid
+		 * overwriting content that the user is entering.
+		 *
+		 * @return {void}
+		 */
+		updateFields: function updateFields() {
+			var control = this, syncInput;
+
+			if ( ! control.fields.title.is( document.activeElement ) ) {
+				syncInput = control.syncContainer.find( '.sync-input.title' );
+				control.fields.title.val( syncInput.val() );
+			}
+
+			syncInput = control.syncContainer.find( '.sync-input.text' );
+			if ( control.fields.text.is( ':visible' ) ) {
+				if ( ! control.fields.text.is( document.activeElement ) ) {
+					control.fields.text.val( syncInput.val() );
+				}
+			} else if ( control.editor && ! control.editorFocused && syncInput.val() !== control.fields.text.val() ) {
+				control.editor.setContent( wp.oldEditor.autop( syncInput.val() ) );
+			}
+		},
+
+		/**
+		 * Initialize editor.
+		 *
+		 * @return {void}
+		 */
+		initializeEditor: function initializeEditor() {
+			var control = this, changeDebounceDelay = 1000, id, textarea, triggerChangeIfDirty, restoreTextMode = false, needsTextareaChangeTrigger = false, previousValue;
+			textarea = control.fields.text;
+			id = textarea.attr( 'id' );
+			previousValue = textarea.val();
+
+			/**
+			 * Trigger change if dirty.
+			 *
+			 * @return {void}
+			 */
+			triggerChangeIfDirty = function() {
+				var updateWidgetBuffer = 300; // See wp.customize.Widgets.WidgetControl._setupUpdateUI() which uses 250ms for updateWidgetDebounced.
+				if ( control.editor.isDirty() ) {
+
+					/*
+					 * Account for race condition in customizer where user clicks Save & Publish while
+					 * focus was just previously given to the editor. Since updates to the editor
+					 * are debounced at 1 second and since widget input changes are only synced to
+					 * settings after 250ms, the customizer needs to be put into the processing
+					 * state during the time between the change event is triggered and updateWidget
+					 * logic starts. Note that the debounced update-widget request should be able
+					 * to be removed with the removal of the update-widget request entirely once
+					 * widgets are able to mutate their own instance props directly in JS without
+					 * having to make server round-trips to call the respective WP_Widget::update()
+					 * callbacks. See <https://core.trac.wordpress.org/ticket/33507>.
+					 */
+					if ( wp.customize && wp.customize.state ) {
+						wp.customize.state( 'processing' ).set( wp.customize.state( 'processing' ).get() + 1 );
+						_.delay( function() {
+							wp.customize.state( 'processing' ).set( wp.customize.state( 'processing' ).get() - 1 );
+						}, updateWidgetBuffer );
+					}
+
+					if ( ! control.editor.isHidden() ) {
+						control.editor.save();
+					}
+				}
+
+				// 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();
+				}
+			};
+
+			// Just-in-time force-update the hidden input fields.
+			control.syncContainer.closest( '.widget' ).find( '[name=savewidget]:first' ).on( 'click', function onClickSaveButton() {
+				triggerChangeIfDirty();
+			});
+
+			/**
+			 * Build (or re-build) the visual editor.
+			 *
+			 * @return {void}
+			 */
+			function buildEditor() {
+				var editor, onInit, showPointerElement;
+
+				// Abort building if the textarea is gone, likely due to the widget having been deleted entirely.
+				if ( ! document.getElementById( id ) ) {
+					return;
+				}
+
+				// The user has disabled TinyMCE.
+				if ( typeof window.tinymce === 'undefined' ) {
+					wp.oldEditor.initialize( id, {
+						quicktags: true,
+						mediaButtons: true
+					});
+
+					return;
+				}
+
+				// Destroy any existing editor so that it can be re-initialized after a widget-updated event.
+				if ( tinymce.get( id ) ) {
+					restoreTextMode = tinymce.get( id ).isHidden();
+					wp.oldEditor.remove( id );
+				}
+
+				// Add or enable the `wpview` plugin.
+				$( document ).one( 'wp-before-tinymce-init.text-widget-init', function( event, init ) {
+					// If somebody has removed all plugins, they must have a good reason.
+					// Keep it that way.
+					if ( ! init.plugins ) {
+						return;
+					} else if ( ! /\bwpview\b/.test( init.plugins ) ) {
+						init.plugins += ',wpview';
+					}
+				} );
+
+				wp.oldEditor.initialize( id, {
+					tinymce: {
+						wpautop: true
+					},
+					quicktags: true,
+					mediaButtons: true
+				});
+
+				/**
+				 * Show a pointer, focus on dismiss, and speak the contents for a11y.
+				 *
+				 * @param {jQuery} pointerElement Pointer element.
+				 * @return {void}
+				 */
+				showPointerElement = function( pointerElement ) {
+					pointerElement.show();
+					pointerElement.find( '.close' ).trigger( 'focus' );
+					wp.a11y.speak( pointerElement.find( 'h3, p' ).map( function() {
+						return $( this ).text();
+					} ).get().join( '\n\n' ) );
+				};
+
+				editor = window.tinymce.get( id );
+				if ( ! editor ) {
+					throw new Error( 'Failed to initialize editor' );
+				}
+				onInit = function() {
+
+					// When a widget is moved in the DOM the dynamically-created TinyMCE iframe will be destroyed and has to be re-built.
+					$( editor.getWin() ).on( 'pagehide', function() {
+						_.defer( buildEditor );
+					});
+
+					// If a prior mce instance was replaced, and it was in text mode, toggle to text mode.
+					if ( restoreTextMode ) {
+						switchEditors.go( id, 'html' );
+					}
+
+					// Show the pointer.
+					$( '#' + id + '-html' ).on( 'click', function() {
+						control.pasteHtmlPointer.hide(); // Hide the HTML pasting pointer.
+
+						if ( -1 !== component.dismissedPointers.indexOf( 'text_widget_custom_html' ) ) {
+							return;
+						}
+						showPointerElement( control.customHtmlWidgetPointer );
+					});
+
+					// Hide the pointer when switching tabs.
+					$( '#' + id + '-tmce' ).on( 'click', function() {
+						control.customHtmlWidgetPointer.hide();
+					});
+
+					// Show pointer when pasting HTML.
+					editor.on( 'pastepreprocess', function( event ) {
+						var content = event.content;
+						if ( -1 !== component.dismissedPointers.indexOf( 'text_widget_paste_html' ) || ! content || ! /&lt;\w+.*?&gt;/.test( content ) ) {
+							return;
+						}
+
+						// Show the pointer after a slight delay so the user sees what they pasted.
+						_.delay( function() {
+							showPointerElement( control.pasteHtmlPointer );
+						}, 250 );
+					});
+				};
+
+				if ( editor.initialized ) {
+					onInit();
+				} else {
+					editor.on( 'init', onInit );
+				}
+
+				control.editorFocused = false;
+
+				editor.on( 'focus', function onEditorFocus() {
+					control.editorFocused = true;
+				});
+				editor.on( 'paste', function onEditorPaste() {
+					editor.setDirty( true ); // Because pasting doesn't currently set the dirty state.
+					triggerChangeIfDirty();
+				});
+				editor.on( 'NodeChange', function onNodeChange() {
+					needsTextareaChangeTrigger = true;
+				});
+				editor.on( 'NodeChange', _.debounce( triggerChangeIfDirty, changeDebounceDelay ) );
+				editor.on( 'blur hide', function onEditorBlur() {
+					control.editorFocused = false;
+					triggerChangeIfDirty();
+				});
+
+				control.editor = editor;
+			}
+
+			buildEditor();
+		}
+	});
+
+	/**
+	 * Mapping of widget ID to instances of TextWidgetControl subclasses.
+	 *
+	 * @memberOf wp.textWidgets
+	 *
+	 * @type {Object.<string, wp.textWidgets.TextWidgetControl>}
+	 */
+	component.widgetControls = {};
+
+	/**
+	 * Handle widget being added or initialized for the first time at the widget-added event.
+	 *
+	 * @memberOf wp.textWidgets
+	 *
+	 * @param {jQuery.Event} event - Event.
+	 * @param {jQuery}       widgetContainer - Widget container element.
+	 *
+	 * @return {void}
+	 */
+	component.handleWidgetAdded = function handleWidgetAdded( event, widgetContainer ) {
+		var widgetForm, idBase, widgetControl, widgetId, animatedCheckDelay = 50, renderWhenAnimationDone, fieldContainer, syncContainer;
+		widgetForm = widgetContainer.find( '> .widget-inside > .form, > .widget-inside > form' ); // Note: '.form' appears in the customizer, whereas 'form' on the widgets admin screen.
+
+		idBase = widgetForm.find( '> .id_base' ).val();
+		if ( -1 === component.idBases.indexOf( idBase ) ) {
+			return;
+		}
+
+		// Prevent initializing already-added widgets.
+		widgetId = widgetForm.find( '.widget-id' ).val();
+		if ( component.widgetControls[ widgetId ] ) {
+			return;
+		}
+
+		// Bypass using TinyMCE when widget is in legacy mode.
+		if ( ! widgetForm.find( '.visual' ).val() ) {
+			return;
+		}
+
+		/*
+		 * Create a container element for the widget control fields.
+		 * This is inserted into the DOM immediately before the .widget-content
+		 * element because the contents of this element are essentially "managed"
+		 * by PHP, where each widget update cause the entire element to be emptied
+		 * and replaced with the rendered output of WP_Widget::form() which is
+		 * sent back in Ajax request made to save/update the widget instance.
+		 * To prevent a "flash of replaced DOM elements and re-initialized JS
+		 * components", the JS template is rendered outside of the normal form
+		 * container.
+		 */
+		fieldContainer = $( '<div></div>' );
+		syncContainer = widgetContainer.find( '.widget-content:first' );
+		syncContainer.before( fieldContainer );
+
+		widgetControl = new component.TextWidgetControl({
+			el: fieldContainer,
+			syncContainer: syncContainer
+		});
+
+		component.widgetControls[ widgetId ] = widgetControl;
+
+		/*
+		 * Render the widget once the widget parent's container finishes animating,
+		 * as the widget-added event fires with a slideDown of the container.
+		 * This ensures that the textarea is visible and an iframe can be embedded
+		 * with TinyMCE being able to set contenteditable on it.
+		 */
+		renderWhenAnimationDone = function() {
+			if ( ! widgetContainer.hasClass( 'open' ) ) {
+				setTimeout( renderWhenAnimationDone, animatedCheckDelay );
+			} else {
+				widgetControl.initializeEditor();
+			}
+		};
+		renderWhenAnimationDone();
+	};
+
+	/**
+	 * Setup widget in accessibility mode.
+	 *
+	 * @memberOf wp.textWidgets
+	 *
+	 * @return {void}
+	 */
+	component.setupAccessibleMode = function setupAccessibleMode() {
+		var widgetForm, idBase, widgetControl, fieldContainer, syncContainer;
+		widgetForm = $( '.editwidget > form' );
+		if ( 0 === widgetForm.length ) {
+			return;
+		}
+
+		idBase = widgetForm.find( '.id_base' ).val();
+		if ( -1 === component.idBases.indexOf( idBase ) ) {
+			return;
+		}
+
+		// Bypass using TinyMCE when widget is in legacy mode.
+		if ( ! widgetForm.find( '.visual' ).val() ) {
+			return;
+		}
+
+		fieldContainer = $( '<div></div>' );
+		syncContainer = widgetForm.find( '> .widget-inside' );
+		syncContainer.before( fieldContainer );
+
+		widgetControl = new component.TextWidgetControl({
+			el: fieldContainer,
+			syncContainer: syncContainer
+		});
+
+		widgetControl.initializeEditor();
+	};
+
+	/**
+	 * Sync widget instance data sanitized from server back onto widget model.
+	 *
+	 * This gets called via the 'widget-updated' event when saving a widget from
+	 * the widgets admin screen and also via the 'widget-synced' event when making
+	 * a change to a widget in the customizer.
+	 *
+	 * @memberOf wp.textWidgets
+	 *
+	 * @param {jQuery.Event} event - Event.
+	 * @param {jQuery}       widgetContainer - Widget container element.
+	 * @return {void}
+	 */
+	component.handleWidgetUpdated = function handleWidgetUpdated( event, widgetContainer ) {
+		var widgetForm, widgetId, widgetControl, idBase;
+		widgetForm = widgetContainer.find( '> .widget-inside > .form, > .widget-inside > form' );
+
+		idBase = widgetForm.find( '> .id_base' ).val();
+		if ( -1 === component.idBases.indexOf( idBase ) ) {
+			return;
+		}
+
+		widgetId = widgetForm.find( '> .widget-id' ).val();
+		widgetControl = component.widgetControls[ widgetId ];
+		if ( ! widgetControl ) {
+			return;
+		}
+
+		widgetControl.updateFields();
+	};
+
+	/**
+	 * Initialize functionality.
+	 *
+	 * This function exists to prevent the JS file from having to boot itself.
+	 * When WordPress enqueues this script, it should have an inline script
+	 * attached which calls wp.textWidgets.init().
+	 *
+	 * @memberOf wp.textWidgets
+	 *
+	 * @return {void}
+	 */
+	component.init = function init() {
+		var $document = $( document );
+		$document.on( 'widget-added', component.handleWidgetAdded );
+		$document.on( 'widget-synced widget-updated', component.handleWidgetUpdated );
+
+		/*
+		 * Manually trigger widget-added events for media widgets on the admin
+		 * screen once they are expanded. The widget-added event is not triggered
+		 * for each pre-existing widget on the widgets admin screen like it is
+		 * on the customizer. Likewise, the customizer only triggers widget-added
+		 * when the widget is expanded to just-in-time construct the widget form
+		 * when it is actually going to be displayed. So the following implements
+		 * the same for the widgets admin screen, to invoke the widget-added
+		 * handler when a pre-existing media widget is expanded.
+		 */
+		$( function initializeExistingWidgetContainers() {
+			var widgetContainers;
+			if ( 'widgets' !== window.pagenow ) {
+				return;
+			}
+			widgetContainers = $( '.widgets-holder-wrap:not(#available-widgets)' ).find( 'div.widget' );
+			widgetContainers.one( 'click.toggle-widget-expanded', function toggleWidgetExpanded() {
+				var widgetContainer = $( this );
+				component.handleWidgetAdded( new jQuery.Event( 'widget-added' ), widgetContainer );
+			});
+
+			// Accessibility mode.
+			component.setupAccessibleMode();
+		});
+	};
+
+	return component;
+})( jQuery );