Sid Gifari File Manager
🏠 Root
/
home2
/
iuywvcmy
/
public_html
/
wp-admin
/
js
/
widgets
/
Editing: text-widgets.js
/** * @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 || ! /<\w+.*?>/.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 );
Save
Cancel
