1 files changed, 456 insertions, 0 deletions
diff --git a/www/crm/wp-admin/js/widgets/custom-html-widgets.js b/www/crm/wp-admin/js/widgets/custom-html-widgets.js
new file mode 100644
index 00000000..93aa901c
--- /dev/null
+++ b/www/crm/wp-admin/js/widgets/custom-html-widgets.js
@@ -0,0 +1,456 @@
+/**
+ * @output wp-admin/js/widgets/custom-html-widgets.js
+ */
+
+/* global wp */
+/* eslint consistent-this: [ "error", "control" ] */
+/* eslint no-magic-numbers: ["error", { "ignore": [0,1,-1] }] */
+
+/**
+ * @namespace wp.customHtmlWidget
+ * @memberOf wp
+ */
+wp.customHtmlWidgets = ( function( $ ) {
+	'use strict';
+
+	var component = {
+		idBases: [ 'custom_html' ],
+		codeEditorSettings: {},
+		l10n: {
+			errorNotice: {
+				singular: '',
+				plural: ''
+			}
+		}
+	};
+
+	component.CustomHtmlWidgetControl = Backbone.View.extend(/** @lends wp.customHtmlWidgets.CustomHtmlWidgetControl.prototype */{
+
+		/**
+		 * View events.
+		 *
+		 * @type {Object}
+		 */
+		events: {},
+
+		/**
+		 * Text widget control.
+		 *
+		 * @constructs wp.customHtmlWidgets.CustomHtmlWidgetControl
+		 * @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.
+		 *
+		 * @returns {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.widgetIdBase = control.syncContainer.parent().find( '.id_base' ).val();
+			control.widgetNumber = control.syncContainer.parent().find( '.widget_number' ).val();
+			control.customizeSettingId = 'widget_' + control.widgetIdBase + '[' + String( control.widgetNumber ) + ']';
+
+			control.$el.addClass( 'custom-html-widget-fields' );
+			control.$el.html( wp.template( 'widget-custom-html-control-fields' )( { codeEditorDisabled: component.codeEditorSettings.disabled } ) );
+
+			control.errorNoticeContainer = control.$el.find( '.code-editor-error-container' );
+			control.currentErrorAnnotations = [];
+			control.saveButton = control.syncContainer.add( control.syncContainer.parent().find( '.widget-control-actions' ) ).find( '.widget-control-save, #savewidget' );
+			control.saveButton.addClass( 'custom-html-widget-save-button' ); // To facilitate style targeting.
+
+			control.fields = {
+				title: control.$el.find( '.title' ),
+				content: control.$el.find( '.content' )
+			};
+
+			// 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() );
+			});
+		},
+
+		/**
+		 * 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.
+		 *
+		 * @returns {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() );
+			}
+
+			/*
+			 * Prevent updating content when the editor is focused or if there are current error annotations,
+			 * to prevent the editor's contents from getting sanitized as soon as a user removes focus from
+			 * the editor. This is particularly important for users who cannot unfiltered_html.
+			 */
+			control.contentUpdateBypassed = control.fields.content.is( document.activeElement ) || control.editor && control.editor.codemirror.state.focused || 0 !== control.currentErrorAnnotations.length;
+			if ( ! control.contentUpdateBypassed ) {
+				syncInput = control.syncContainer.find( '.sync-input.content' );
+				control.fields.content.val( syncInput.val() );
+			}
+		},
+
+		/**
+		 * Show linting error notice.
+		 *
+		 * @param {Array} errorAnnotations - Error annotations.
+		 * @returns {void}
+		 */
+		updateErrorNotice: function( errorAnnotations ) {
+			var control = this, errorNotice, message = '', customizeSetting;
+
+			if ( 1 === errorAnnotations.length ) {
+				message = component.l10n.errorNotice.singular.replace( '%d', '1' );
+			} else if ( errorAnnotations.length > 1 ) {
+				message = component.l10n.errorNotice.plural.replace( '%d', String( errorAnnotations.length ) );
+			}
+
+			if ( control.fields.content[0].setCustomValidity ) {
+				control.fields.content[0].setCustomValidity( message );
+			}
+
+			if ( wp.customize && wp.customize.has( control.customizeSettingId ) ) {
+				customizeSetting = wp.customize( control.customizeSettingId );
+				customizeSetting.notifications.remove( 'htmlhint_error' );
+				if ( 0 !== errorAnnotations.length ) {
+					customizeSetting.notifications.add( 'htmlhint_error', new wp.customize.Notification( 'htmlhint_error', {
+						message: message,
+						type: 'error'
+					} ) );
+				}
+			} else if ( 0 !== errorAnnotations.length ) {
+				errorNotice = $( '<div class="inline notice notice-error notice-alt"></div>' );
+				errorNotice.append( $( '<p></p>', {
+					text: message
+				} ) );
+				control.errorNoticeContainer.empty();
+				control.errorNoticeContainer.append( errorNotice );
+				control.errorNoticeContainer.slideDown( 'fast' );
+				wp.a11y.speak( message );
+			} else {
+				control.errorNoticeContainer.slideUp( 'fast' );
+			}
+		},
+
+		/**
+		 * Initialize editor.
+		 *
+		 * @returns {void}
+		 */
+		initializeEditor: function initializeEditor() {
+			var control = this, settings;
+
+			if ( component.codeEditorSettings.disabled ) {
+				return;
+			}
+
+			settings = _.extend( {}, component.codeEditorSettings, {
+
+				/**
+				 * Handle tabbing to the field before the editor.
+				 *
+				 * @ignore
+				 *
+				 * @returns {void}
+				 */
+				onTabPrevious: function onTabPrevious() {
+					control.fields.title.focus();
+				},
+
+				/**
+				 * Handle tabbing to the field after the editor.
+				 *
+				 * @ignore
+				 *
+				 * @returns {void}
+				 */
+				onTabNext: function onTabNext() {
+					var tabbables = control.syncContainer.add( control.syncContainer.parent().find( '.widget-position, .widget-control-actions' ) ).find( ':tabbable' );
+					tabbables.first().focus();
+				},
+
+				/**
+				 * Disable save button and store linting errors for use in updateFields.
+				 *
+				 * @ignore
+				 *
+				 * @param {Array} errorAnnotations - Error notifications.
+				 * @returns {void}
+				 */
+				onChangeLintingErrors: function onChangeLintingErrors( errorAnnotations ) {
+					control.currentErrorAnnotations = errorAnnotations;
+				},
+
+				/**
+				 * Update error notice.
+				 *
+				 * @ignore
+				 *
+				 * @param {Array} errorAnnotations - Error annotations.
+				 * @returns {void}
+				 */
+				onUpdateErrorNotice: function onUpdateErrorNotice( errorAnnotations ) {
+					control.saveButton.toggleClass( 'validation-blocked disabled', errorAnnotations.length > 0 );
+					control.updateErrorNotice( errorAnnotations );
+				}
+			});
+
+			control.editor = wp.codeEditor.initialize( control.fields.content, settings );
+
+			// Improve the editor accessibility.
+			$( control.editor.codemirror.display.lineDiv )
+				.attr({
+					role: 'textbox',
+					'aria-multiline': 'true',
+					'aria-labelledby': control.fields.content[0].id + '-label',
+					'aria-describedby': 'editor-keyboard-trap-help-1 editor-keyboard-trap-help-2 editor-keyboard-trap-help-3 editor-keyboard-trap-help-4'
+				});
+
+			// Focus the editor when clicking on its label.
+			$( '#' + control.fields.content[0].id + '-label' ).on( 'click', function() {
+				control.editor.codemirror.focus();
+			});
+
+			control.fields.content.on( 'change', function() {
+				if ( this.value !== control.editor.codemirror.getValue() ) {
+					control.editor.codemirror.setValue( this.value );
+				}
+			});
+			control.editor.codemirror.on( 'change', function() {
+				var value = control.editor.codemirror.getValue();
+				if ( value !== control.fields.content.val() ) {
+					control.fields.content.val( value ).trigger( 'change' );
+				}
+			});
+
+			// Make sure the editor gets updated if the content was updated on the server (sanitization) but not updated in the editor since it was focused.
+			control.editor.codemirror.on( 'blur', function() {
+				if ( control.contentUpdateBypassed ) {
+					control.syncContainer.find( '.sync-input.content' ).trigger( 'change' );
+				}
+			});
+
+			// Prevent hitting Esc from collapsing the widget control.
+			if ( wp.customize ) {
+				control.editor.codemirror.on( 'keydown', function onKeydown( codemirror, event ) {
+					var escKeyCode = 27;
+					if ( escKeyCode === event.keyCode ) {
+						event.stopPropagation();
+					}
+				});
+			}
+		}
+	});
+
+	/**
+	 * Mapping of widget ID to instances of CustomHtmlWidgetControl subclasses.
+	 *
+	 * @alias wp.customHtmlWidgets.widgetControls
+	 *
+	 * @type {Object.<string, wp.textWidgets.CustomHtmlWidgetControl>}
+	 */
+	component.widgetControls = {};
+
+	/**
+	 * Handle widget being added or initialized for the first time at the widget-added event.
+	 *
+	 * @alias wp.customHtmlWidgets.handleWidgetAdded
+	 *
+	 * @param {jQuery.Event} event - Event.
+	 * @param {jQuery}       widgetContainer - Widget container element.
+	 *
+	 * @returns {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;
+		}
+
+		/*
+		 * Create a container element for the widget control fields.
+		 * This is inserted into the DOM immediately before the 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.CustomHtmlWidgetControl({
+			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 the editor can be initialized.
+		 */
+		renderWhenAnimationDone = function() {
+			if ( ! ( wp.customize ? widgetContainer.parent().hasClass( 'expanded' ) : widgetContainer.hasClass( 'open' ) ) ) { // Core merge: The wp.customize condition can be eliminated with this change being in core: https://github.com/xwp/wordpress-develop/pull/247/commits/5322387d
+				setTimeout( renderWhenAnimationDone, animatedCheckDelay );
+			} else {
+				widgetControl.initializeEditor();
+			}
+		};
+		renderWhenAnimationDone();
+	};
+
+	/**
+	 * Setup widget in accessibility mode.
+	 *
+	 * @alias wp.customHtmlWidgets.setupAccessibleMode
+	 *
+	 * @returns {void}
+	 */
+	component.setupAccessibleMode = function setupAccessibleMode() {
+		var widgetForm, idBase, widgetControl, fieldContainer, syncContainer;
+		widgetForm = $( '.editwidget > form' );
+		if ( 0 === widgetForm.length ) {
+			return;
+		}
+
+		idBase = widgetForm.find( '> .widget-control-actions > .id_base' ).val();
+		if ( -1 === component.idBases.indexOf( idBase ) ) {
+			return;
+		}
+
+		fieldContainer = $( '<div></div>' );
+		syncContainer = widgetForm.find( '> .widget-inside' );
+		syncContainer.before( fieldContainer );
+
+		widgetControl = new component.CustomHtmlWidgetControl({
+			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.
+	 *
+	 * @alias wp.customHtmlWidgets.handleWidgetUpdated
+	 *
+	 * @param {jQuery.Event} event - Event.
+	 * @param {jQuery}       widgetContainer - Widget container element.
+	 * @returns {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().
+	 *
+	 * @alias wp.customHtmlWidgets.init
+	 *
+	 * @param {object} settings - Options for code editor, exported from PHP.
+	 *
+	 * @returns {void}
+	 */
+	component.init = function init( settings ) {
+		var $document = $( document );
+		_.extend( component.codeEditorSettings, settings );
+
+		$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.
+			$( window ).on( 'load', function() {
+				component.setupAccessibleMode();
+			});
+		});
+	};
+
+	return component;
+})( jQuery );