wp/wp-admin/js/widgets/custom-html-widgets.js
changeset 16 a86126ab1dd4
parent 9 177826044cd9
child 18 be944660c56a
equal deleted inserted replaced
15:3d4e9c994f10 16:a86126ab1dd4
    42 		 *
    42 		 *
    43 		 * @param {Object} options - Options.
    43 		 * @param {Object} options - Options.
    44 		 * @param {jQuery} options.el - Control field container element.
    44 		 * @param {jQuery} options.el - Control field container element.
    45 		 * @param {jQuery} options.syncContainer - Container element where fields are synced for the server.
    45 		 * @param {jQuery} options.syncContainer - Container element where fields are synced for the server.
    46 		 *
    46 		 *
    47 		 * @returns {void}
    47 		 * @return {void}
    48 		 */
    48 		 */
    49 		initialize: function initialize( options ) {
    49 		initialize: function initialize( options ) {
    50 			var control = this;
    50 			var control = this;
    51 
    51 
    52 			if ( ! options.el ) {
    52 			if ( ! options.el ) {
    95 		 *
    95 		 *
    96 		 * This function is called at the widget-updated and widget-synced events.
    96 		 * This function is called at the widget-updated and widget-synced events.
    97 		 * A field will only be updated if it is not currently focused, to avoid
    97 		 * A field will only be updated if it is not currently focused, to avoid
    98 		 * overwriting content that the user is entering.
    98 		 * overwriting content that the user is entering.
    99 		 *
    99 		 *
   100 		 * @returns {void}
   100 		 * @return {void}
   101 		 */
   101 		 */
   102 		updateFields: function updateFields() {
   102 		updateFields: function updateFields() {
   103 			var control = this, syncInput;
   103 			var control = this, syncInput;
   104 
   104 
   105 			if ( ! control.fields.title.is( document.activeElement ) ) {
   105 			if ( ! control.fields.title.is( document.activeElement ) ) {
   121 
   121 
   122 		/**
   122 		/**
   123 		 * Show linting error notice.
   123 		 * Show linting error notice.
   124 		 *
   124 		 *
   125 		 * @param {Array} errorAnnotations - Error annotations.
   125 		 * @param {Array} errorAnnotations - Error annotations.
   126 		 * @returns {void}
   126 		 * @return {void}
   127 		 */
   127 		 */
   128 		updateErrorNotice: function( errorAnnotations ) {
   128 		updateErrorNotice: function( errorAnnotations ) {
   129 			var control = this, errorNotice, message = '', customizeSetting;
   129 			var control = this, errorNotice, message = '', customizeSetting;
   130 
   130 
   131 			if ( 1 === errorAnnotations.length ) {
   131 			if ( 1 === errorAnnotations.length ) {
   162 		},
   162 		},
   163 
   163 
   164 		/**
   164 		/**
   165 		 * Initialize editor.
   165 		 * Initialize editor.
   166 		 *
   166 		 *
   167 		 * @returns {void}
   167 		 * @return {void}
   168 		 */
   168 		 */
   169 		initializeEditor: function initializeEditor() {
   169 		initializeEditor: function initializeEditor() {
   170 			var control = this, settings;
   170 			var control = this, settings;
   171 
   171 
   172 			if ( component.codeEditorSettings.disabled ) {
   172 			if ( component.codeEditorSettings.disabled ) {
   178 				/**
   178 				/**
   179 				 * Handle tabbing to the field before the editor.
   179 				 * Handle tabbing to the field before the editor.
   180 				 *
   180 				 *
   181 				 * @ignore
   181 				 * @ignore
   182 				 *
   182 				 *
   183 				 * @returns {void}
   183 				 * @return {void}
   184 				 */
   184 				 */
   185 				onTabPrevious: function onTabPrevious() {
   185 				onTabPrevious: function onTabPrevious() {
   186 					control.fields.title.focus();
   186 					control.fields.title.focus();
   187 				},
   187 				},
   188 
   188 
   189 				/**
   189 				/**
   190 				 * Handle tabbing to the field after the editor.
   190 				 * Handle tabbing to the field after the editor.
   191 				 *
   191 				 *
   192 				 * @ignore
   192 				 * @ignore
   193 				 *
   193 				 *
   194 				 * @returns {void}
   194 				 * @return {void}
   195 				 */
   195 				 */
   196 				onTabNext: function onTabNext() {
   196 				onTabNext: function onTabNext() {
   197 					var tabbables = control.syncContainer.add( control.syncContainer.parent().find( '.widget-position, .widget-control-actions' ) ).find( ':tabbable' );
   197 					var tabbables = control.syncContainer.add( control.syncContainer.parent().find( '.widget-position, .widget-control-actions' ) ).find( ':tabbable' );
   198 					tabbables.first().focus();
   198 					tabbables.first().focus();
   199 				},
   199 				},
   202 				 * Disable save button and store linting errors for use in updateFields.
   202 				 * Disable save button and store linting errors for use in updateFields.
   203 				 *
   203 				 *
   204 				 * @ignore
   204 				 * @ignore
   205 				 *
   205 				 *
   206 				 * @param {Array} errorAnnotations - Error notifications.
   206 				 * @param {Array} errorAnnotations - Error notifications.
   207 				 * @returns {void}
   207 				 * @return {void}
   208 				 */
   208 				 */
   209 				onChangeLintingErrors: function onChangeLintingErrors( errorAnnotations ) {
   209 				onChangeLintingErrors: function onChangeLintingErrors( errorAnnotations ) {
   210 					control.currentErrorAnnotations = errorAnnotations;
   210 					control.currentErrorAnnotations = errorAnnotations;
   211 				},
   211 				},
   212 
   212 
   214 				 * Update error notice.
   214 				 * Update error notice.
   215 				 *
   215 				 *
   216 				 * @ignore
   216 				 * @ignore
   217 				 *
   217 				 *
   218 				 * @param {Array} errorAnnotations - Error annotations.
   218 				 * @param {Array} errorAnnotations - Error annotations.
   219 				 * @returns {void}
   219 				 * @return {void}
   220 				 */
   220 				 */
   221 				onUpdateErrorNotice: function onUpdateErrorNotice( errorAnnotations ) {
   221 				onUpdateErrorNotice: function onUpdateErrorNotice( errorAnnotations ) {
   222 					control.saveButton.toggleClass( 'validation-blocked disabled', errorAnnotations.length > 0 );
   222 					control.saveButton.toggleClass( 'validation-blocked disabled', errorAnnotations.length > 0 );
   223 					control.updateErrorNotice( errorAnnotations );
   223 					control.updateErrorNotice( errorAnnotations );
   224 				}
   224 				}
   286 	 * @alias wp.customHtmlWidgets.handleWidgetAdded
   286 	 * @alias wp.customHtmlWidgets.handleWidgetAdded
   287 	 *
   287 	 *
   288 	 * @param {jQuery.Event} event - Event.
   288 	 * @param {jQuery.Event} event - Event.
   289 	 * @param {jQuery}       widgetContainer - Widget container element.
   289 	 * @param {jQuery}       widgetContainer - Widget container element.
   290 	 *
   290 	 *
   291 	 * @returns {void}
   291 	 * @return {void}
   292 	 */
   292 	 */
   293 	component.handleWidgetAdded = function handleWidgetAdded( event, widgetContainer ) {
   293 	component.handleWidgetAdded = function handleWidgetAdded( event, widgetContainer ) {
   294 		var widgetForm, idBase, widgetControl, widgetId, animatedCheckDelay = 50, renderWhenAnimationDone, fieldContainer, syncContainer;
   294 		var widgetForm, idBase, widgetControl, widgetId, animatedCheckDelay = 50, renderWhenAnimationDone, fieldContainer, syncContainer;
   295 		widgetForm = widgetContainer.find( '> .widget-inside > .form, > .widget-inside > form' ); // Note: '.form' appears in the customizer, whereas 'form' on the widgets admin screen.
   295 		widgetForm = widgetContainer.find( '> .widget-inside > .form, > .widget-inside > form' ); // Note: '.form' appears in the customizer, whereas 'form' on the widgets admin screen.
   296 
   296 
   345 	/**
   345 	/**
   346 	 * Setup widget in accessibility mode.
   346 	 * Setup widget in accessibility mode.
   347 	 *
   347 	 *
   348 	 * @alias wp.customHtmlWidgets.setupAccessibleMode
   348 	 * @alias wp.customHtmlWidgets.setupAccessibleMode
   349 	 *
   349 	 *
   350 	 * @returns {void}
   350 	 * @return {void}
   351 	 */
   351 	 */
   352 	component.setupAccessibleMode = function setupAccessibleMode() {
   352 	component.setupAccessibleMode = function setupAccessibleMode() {
   353 		var widgetForm, idBase, widgetControl, fieldContainer, syncContainer;
   353 		var widgetForm, idBase, widgetControl, fieldContainer, syncContainer;
   354 		widgetForm = $( '.editwidget > form' );
   354 		widgetForm = $( '.editwidget > form' );
   355 		if ( 0 === widgetForm.length ) {
   355 		if ( 0 === widgetForm.length ) {
   382 	 *
   382 	 *
   383 	 * @alias wp.customHtmlWidgets.handleWidgetUpdated
   383 	 * @alias wp.customHtmlWidgets.handleWidgetUpdated
   384 	 *
   384 	 *
   385 	 * @param {jQuery.Event} event - Event.
   385 	 * @param {jQuery.Event} event - Event.
   386 	 * @param {jQuery}       widgetContainer - Widget container element.
   386 	 * @param {jQuery}       widgetContainer - Widget container element.
   387 	 * @returns {void}
   387 	 * @return {void}
   388 	 */
   388 	 */
   389 	component.handleWidgetUpdated = function handleWidgetUpdated( event, widgetContainer ) {
   389 	component.handleWidgetUpdated = function handleWidgetUpdated( event, widgetContainer ) {
   390 		var widgetForm, widgetId, widgetControl, idBase;
   390 		var widgetForm, widgetId, widgetControl, idBase;
   391 		widgetForm = widgetContainer.find( '> .widget-inside > .form, > .widget-inside > form' );
   391 		widgetForm = widgetContainer.find( '> .widget-inside > .form, > .widget-inside > form' );
   392 
   392 
   411 	 * When WordPress enqueues this script, it should have an inline script
   411 	 * When WordPress enqueues this script, it should have an inline script
   412 	 * attached which calls wp.textWidgets.init().
   412 	 * attached which calls wp.textWidgets.init().
   413 	 *
   413 	 *
   414 	 * @alias wp.customHtmlWidgets.init
   414 	 * @alias wp.customHtmlWidgets.init
   415 	 *
   415 	 *
   416 	 * @param {object} settings - Options for code editor, exported from PHP.
   416 	 * @param {Object} settings - Options for code editor, exported from PHP.
   417 	 *
   417 	 *
   418 	 * @returns {void}
   418 	 * @return {void}
   419 	 */
   419 	 */
   420 	component.init = function init( settings ) {
   420 	component.init = function init( settings ) {
   421 		var $document = $( document );
   421 		var $document = $( document );
   422 		_.extend( component.codeEditorSettings, settings );
   422 		_.extend( component.codeEditorSettings, settings );
   423 
   423