|
1 /** |
|
2 * @output wp-admin/js/widgets/custom-html-widgets.js |
|
3 */ |
|
4 |
1 /* global wp */ |
5 /* global wp */ |
2 /* eslint consistent-this: [ "error", "control" ] */ |
6 /* eslint consistent-this: [ "error", "control" ] */ |
3 /* eslint no-magic-numbers: ["error", { "ignore": [0,1,-1] }] */ |
7 /* eslint no-magic-numbers: ["error", { "ignore": [0,1,-1] }] */ |
|
8 |
|
9 /** |
|
10 * @namespace wp.customHtmlWidget |
|
11 * @memberOf wp |
|
12 */ |
4 wp.customHtmlWidgets = ( function( $ ) { |
13 wp.customHtmlWidgets = ( function( $ ) { |
5 'use strict'; |
14 'use strict'; |
6 |
15 |
7 var component = { |
16 var component = { |
8 idBases: [ 'custom_html' ], |
17 idBases: [ 'custom_html' ], |
13 plural: '' |
22 plural: '' |
14 } |
23 } |
15 } |
24 } |
16 }; |
25 }; |
17 |
26 |
18 /** |
27 component.CustomHtmlWidgetControl = Backbone.View.extend(/** @lends wp.customHtmlWidgets.CustomHtmlWidgetControl.prototype */{ |
19 * Text widget control. |
|
20 * |
|
21 * @class CustomHtmlWidgetControl |
|
22 * @constructor |
|
23 * @abstract |
|
24 */ |
|
25 component.CustomHtmlWidgetControl = Backbone.View.extend({ |
|
26 |
28 |
27 /** |
29 /** |
28 * View events. |
30 * View events. |
29 * |
31 * |
30 * @type {Object} |
32 * @type {Object} |
31 */ |
33 */ |
32 events: {}, |
34 events: {}, |
33 |
35 |
34 /** |
36 /** |
35 * Initialize. |
37 * Text widget control. |
|
38 * |
|
39 * @constructs wp.customHtmlWidgets.CustomHtmlWidgetControl |
|
40 * @augments Backbone.View |
|
41 * @abstract |
36 * |
42 * |
37 * @param {Object} options - Options. |
43 * @param {Object} options - Options. |
38 * @param {jQuery} options.el - Control field container element. |
44 * @param {jQuery} options.el - Control field container element. |
39 * @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 * |
40 * @returns {void} |
47 * @returns {void} |
41 */ |
48 */ |
42 initialize: function initialize( options ) { |
49 initialize: function initialize( options ) { |
43 var control = this; |
50 var control = this; |
44 |
51 |
103 /* |
110 /* |
104 * Prevent updating content when the editor is focused or if there are current error annotations, |
111 * Prevent updating content when the editor is focused or if there are current error annotations, |
105 * to prevent the editor's contents from getting sanitized as soon as a user removes focus from |
112 * to prevent the editor's contents from getting sanitized as soon as a user removes focus from |
106 * the editor. This is particularly important for users who cannot unfiltered_html. |
113 * the editor. This is particularly important for users who cannot unfiltered_html. |
107 */ |
114 */ |
108 control.contentUpdateBypassed = control.fields.content.is( document.activeElement ) || control.editor && control.editor.codemirror.state.focused || 0 !== control.currentErrorAnnotations; |
115 control.contentUpdateBypassed = control.fields.content.is( document.activeElement ) || control.editor && control.editor.codemirror.state.focused || 0 !== control.currentErrorAnnotations.length; |
109 if ( ! control.contentUpdateBypassed ) { |
116 if ( ! control.contentUpdateBypassed ) { |
110 syncInput = control.syncContainer.find( '.sync-input.content' ); |
117 syncInput = control.syncContainer.find( '.sync-input.content' ); |
111 control.fields.content.val( syncInput.val() ).trigger( 'change' ); |
118 control.fields.content.val( syncInput.val() ); |
112 } |
119 } |
113 }, |
120 }, |
114 |
121 |
115 /** |
122 /** |
116 * Show linting error notice. |
123 * Show linting error notice. |
169 settings = _.extend( {}, component.codeEditorSettings, { |
176 settings = _.extend( {}, component.codeEditorSettings, { |
170 |
177 |
171 /** |
178 /** |
172 * Handle tabbing to the field before the editor. |
179 * Handle tabbing to the field before the editor. |
173 * |
180 * |
|
181 * @ignore |
|
182 * |
174 * @returns {void} |
183 * @returns {void} |
175 */ |
184 */ |
176 onTabPrevious: function onTabPrevious() { |
185 onTabPrevious: function onTabPrevious() { |
177 control.fields.title.focus(); |
186 control.fields.title.focus(); |
178 }, |
187 }, |
179 |
188 |
180 /** |
189 /** |
181 * Handle tabbing to the field after the editor. |
190 * Handle tabbing to the field after the editor. |
|
191 * |
|
192 * @ignore |
182 * |
193 * |
183 * @returns {void} |
194 * @returns {void} |
184 */ |
195 */ |
185 onTabNext: function onTabNext() { |
196 onTabNext: function onTabNext() { |
186 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' ); |
188 }, |
199 }, |
189 |
200 |
190 /** |
201 /** |
191 * Disable save button and store linting errors for use in updateFields. |
202 * Disable save button and store linting errors for use in updateFields. |
192 * |
203 * |
|
204 * @ignore |
|
205 * |
193 * @param {Array} errorAnnotations - Error notifications. |
206 * @param {Array} errorAnnotations - Error notifications. |
194 * @returns {void} |
207 * @returns {void} |
195 */ |
208 */ |
196 onChangeLintingErrors: function onChangeLintingErrors( errorAnnotations ) { |
209 onChangeLintingErrors: function onChangeLintingErrors( errorAnnotations ) { |
197 control.currentErrorAnnotations = errorAnnotations; |
210 control.currentErrorAnnotations = errorAnnotations; |
198 }, |
211 }, |
199 |
212 |
200 /** |
213 /** |
201 * Update error notice. |
214 * Update error notice. |
|
215 * |
|
216 * @ignore |
202 * |
217 * |
203 * @param {Array} errorAnnotations - Error annotations. |
218 * @param {Array} errorAnnotations - Error annotations. |
204 * @returns {void} |
219 * @returns {void} |
205 */ |
220 */ |
206 onUpdateErrorNotice: function onUpdateErrorNotice( errorAnnotations ) { |
221 onUpdateErrorNotice: function onUpdateErrorNotice( errorAnnotations ) { |
257 }); |
272 }); |
258 |
273 |
259 /** |
274 /** |
260 * Mapping of widget ID to instances of CustomHtmlWidgetControl subclasses. |
275 * Mapping of widget ID to instances of CustomHtmlWidgetControl subclasses. |
261 * |
276 * |
|
277 * @alias wp.customHtmlWidgets.widgetControls |
|
278 * |
262 * @type {Object.<string, wp.textWidgets.CustomHtmlWidgetControl>} |
279 * @type {Object.<string, wp.textWidgets.CustomHtmlWidgetControl>} |
263 */ |
280 */ |
264 component.widgetControls = {}; |
281 component.widgetControls = {}; |
265 |
282 |
266 /** |
283 /** |
267 * Handle widget being added or initialized for the first time at the widget-added event. |
284 * Handle widget being added or initialized for the first time at the widget-added event. |
268 * |
285 * |
|
286 * @alias wp.customHtmlWidgets.handleWidgetAdded |
|
287 * |
269 * @param {jQuery.Event} event - Event. |
288 * @param {jQuery.Event} event - Event. |
270 * @param {jQuery} widgetContainer - Widget container element. |
289 * @param {jQuery} widgetContainer - Widget container element. |
|
290 * |
271 * @returns {void} |
291 * @returns {void} |
272 */ |
292 */ |
273 component.handleWidgetAdded = function handleWidgetAdded( event, widgetContainer ) { |
293 component.handleWidgetAdded = function handleWidgetAdded( event, widgetContainer ) { |
274 var widgetForm, idBase, widgetControl, widgetId, animatedCheckDelay = 50, renderWhenAnimationDone, fieldContainer, syncContainer; |
294 var widgetForm, idBase, widgetControl, widgetId, animatedCheckDelay = 50, renderWhenAnimationDone, fieldContainer, syncContainer; |
275 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. |
323 }; |
343 }; |
324 |
344 |
325 /** |
345 /** |
326 * Setup widget in accessibility mode. |
346 * Setup widget in accessibility mode. |
327 * |
347 * |
|
348 * @alias wp.customHtmlWidgets.setupAccessibleMode |
|
349 * |
328 * @returns {void} |
350 * @returns {void} |
329 */ |
351 */ |
330 component.setupAccessibleMode = function setupAccessibleMode() { |
352 component.setupAccessibleMode = function setupAccessibleMode() { |
331 var widgetForm, idBase, widgetControl, fieldContainer, syncContainer; |
353 var widgetForm, idBase, widgetControl, fieldContainer, syncContainer; |
332 widgetForm = $( '.editwidget > form' ); |
354 widgetForm = $( '.editwidget > form' ); |
355 * Sync widget instance data sanitized from server back onto widget model. |
377 * Sync widget instance data sanitized from server back onto widget model. |
356 * |
378 * |
357 * This gets called via the 'widget-updated' event when saving a widget from |
379 * This gets called via the 'widget-updated' event when saving a widget from |
358 * the widgets admin screen and also via the 'widget-synced' event when making |
380 * the widgets admin screen and also via the 'widget-synced' event when making |
359 * a change to a widget in the customizer. |
381 * a change to a widget in the customizer. |
|
382 * |
|
383 * @alias wp.customHtmlWidgets.handleWidgetUpdated |
360 * |
384 * |
361 * @param {jQuery.Event} event - Event. |
385 * @param {jQuery.Event} event - Event. |
362 * @param {jQuery} widgetContainer - Widget container element. |
386 * @param {jQuery} widgetContainer - Widget container element. |
363 * @returns {void} |
387 * @returns {void} |
364 */ |
388 */ |
385 * |
409 * |
386 * This function exists to prevent the JS file from having to boot itself. |
410 * This function exists to prevent the JS file from having to boot itself. |
387 * When WordPress enqueues this script, it should have an inline script |
411 * When WordPress enqueues this script, it should have an inline script |
388 * attached which calls wp.textWidgets.init(). |
412 * attached which calls wp.textWidgets.init(). |
389 * |
413 * |
|
414 * @alias wp.customHtmlWidgets.init |
|
415 * |
390 * @param {object} settings - Options for code editor, exported from PHP. |
416 * @param {object} settings - Options for code editor, exported from PHP. |
|
417 * |
391 * @returns {void} |
418 * @returns {void} |
392 */ |
419 */ |
393 component.init = function init( settings ) { |
420 component.init = function init( settings ) { |
394 var $document = $( document ); |
421 var $document = $( document ); |
395 _.extend( component.codeEditorSettings, settings ); |
422 _.extend( component.codeEditorSettings, settings ); |