wp/wp-admin/js/widgets/media-widgets.js
changeset 9 177826044cd9
parent 7 cf61fcea0001
child 16 a86126ab1dd4
equal deleted inserted replaced
8:c7c34916027a 9:177826044cd9
       
     1 /**
       
     2  * @output wp-admin/js/widgets/media-widgets.js
       
     3  */
       
     4 
     1 /* eslint consistent-this: [ "error", "control" ] */
     5 /* eslint consistent-this: [ "error", "control" ] */
       
     6 
       
     7 /**
       
     8  * @namespace wp.mediaWidgets
       
     9  * @memberOf  wp
       
    10  */
     2 wp.mediaWidgets = ( function( $ ) {
    11 wp.mediaWidgets = ( function( $ ) {
     3 	'use strict';
    12 	'use strict';
     4 
    13 
     5 	var component = {};
    14 	var component = {};
     6 
    15 
     7 	/**
    16 	/**
     8 	 * Widget control (view) constructors, mapping widget id_base to subclass of MediaWidgetControl.
    17 	 * Widget control (view) constructors, mapping widget id_base to subclass of MediaWidgetControl.
     9 	 *
    18 	 *
    10 	 * Media widgets register themselves by assigning subclasses of MediaWidgetControl onto this object by widget ID base.
    19 	 * Media widgets register themselves by assigning subclasses of MediaWidgetControl onto this object by widget ID base.
       
    20 	 *
       
    21 	 * @memberOf wp.mediaWidgets
    11 	 *
    22 	 *
    12 	 * @type {Object.<string, wp.mediaWidgets.MediaWidgetModel>}
    23 	 * @type {Object.<string, wp.mediaWidgets.MediaWidgetModel>}
    13 	 */
    24 	 */
    14 	component.controlConstructors = {};
    25 	component.controlConstructors = {};
    15 
    26 
    16 	/**
    27 	/**
    17 	 * Widget model constructors, mapping widget id_base to subclass of MediaWidgetModel.
    28 	 * Widget model constructors, mapping widget id_base to subclass of MediaWidgetModel.
    18 	 *
    29 	 *
    19 	 * Media widgets register themselves by assigning subclasses of MediaWidgetControl onto this object by widget ID base.
    30 	 * Media widgets register themselves by assigning subclasses of MediaWidgetControl onto this object by widget ID base.
    20 	 *
    31 	 *
       
    32 	 * @memberOf wp.mediaWidgets
       
    33 	 *
    21 	 * @type {Object.<string, wp.mediaWidgets.MediaWidgetModel>}
    34 	 * @type {Object.<string, wp.mediaWidgets.MediaWidgetModel>}
    22 	 */
    35 	 */
    23 	component.modelConstructors = {};
    36 	component.modelConstructors = {};
    24 
    37 
    25 	/**
    38 	component.PersistentDisplaySettingsLibrary = wp.media.controller.Library.extend(/** @lends wp.mediaWidgets.PersistentDisplaySettingsLibrary.prototype */{
    26 	 * Library which persists the customized display settings across selections.
    39 
    27 	 *
    40 		/**
    28 	 * @class PersistentDisplaySettingsLibrary
    41 		 * Library which persists the customized display settings across selections.
    29 	 * @constructor
    42 		 *
    30 	 */
    43 		 * @constructs wp.mediaWidgets.PersistentDisplaySettingsLibrary
    31 	component.PersistentDisplaySettingsLibrary = wp.media.controller.Library.extend({
    44 		 * @augments   wp.media.controller.Library
    32 
       
    33 		/**
       
    34 		 * Initialize.
       
    35 		 *
    45 		 *
    36 		 * @param {Object} options - Options.
    46 		 * @param {Object} options - Options.
       
    47 		 *
    37 		 * @returns {void}
    48 		 * @returns {void}
    38 		 */
    49 		 */
    39 		initialize: function initialize( options ) {
    50 		initialize: function initialize( options ) {
    40 			_.bindAll( this, 'handleDisplaySettingChange' );
    51 			_.bindAll( this, 'handleDisplaySettingChange' );
    41 			wp.media.controller.Library.prototype.initialize.call( this, options );
    52 			wp.media.controller.Library.prototype.initialize.call( this, options );
    77 	});
    88 	});
    78 
    89 
    79 	/**
    90 	/**
    80 	 * Extended view for managing the embed UI.
    91 	 * Extended view for managing the embed UI.
    81 	 *
    92 	 *
    82 	 * @class MediaEmbedView
    93 	 * @class    wp.mediaWidgets.MediaEmbedView
    83 	 * @constructor
    94 	 * @augments wp.media.view.Embed
    84 	 */
    95 	 */
    85 	component.MediaEmbedView = wp.media.view.Embed.extend({
    96 	component.MediaEmbedView = wp.media.view.Embed.extend(/** @lends wp.mediaWidgets.MediaEmbedView.prototype */{
    86 
    97 
    87 		/**
    98 		/**
    88 		 * Initialize.
    99 		 * Initialize.
    89 		 *
   100 		 *
    90 		 * @since 4.9.0
   101 		 * @since 4.9.0
   107 		 * Forked override of {wp.media.view.Embed#refresh()} to suppress irrelevant "link text" field.
   118 		 * Forked override of {wp.media.view.Embed#refresh()} to suppress irrelevant "link text" field.
   108 		 *
   119 		 *
   109 		 * @returns {void}
   120 		 * @returns {void}
   110 		 */
   121 		 */
   111 		refresh: function refresh() {
   122 		refresh: function refresh() {
       
   123 			/**
       
   124 			 * @class wp.mediaWidgets~Constructor
       
   125 			 */
   112 			var Constructor;
   126 			var Constructor;
   113 
   127 
   114 			if ( 'image' === this.controller.options.mimeType ) {
   128 			if ( 'image' === this.controller.options.mimeType ) {
   115 				Constructor = wp.media.view.EmbedImage;
   129 				Constructor = wp.media.view.EmbedImage;
   116 			} else {
   130 			} else {
   117 
   131 
   118 				// This should be eliminated once #40450 lands of when this is merged into core.
   132 				// This should be eliminated once #40450 lands of when this is merged into core.
   119 				Constructor = wp.media.view.EmbedLink.extend({
   133 				Constructor = wp.media.view.EmbedLink.extend(/** @lends wp.mediaWidgets~Constructor.prototype */{
   120 
   134 
   121 					/**
   135 					/**
   122 					 * Set the disabled state on the Add to Widget button.
   136 					 * Set the disabled state on the Add to Widget button.
   123 					 *
   137 					 *
   124 					 * @param {boolean} disabled - Disabled.
   138 					 * @param {boolean} disabled - Disabled.
   282 	});
   296 	});
   283 
   297 
   284 	/**
   298 	/**
   285 	 * Custom media frame for selecting uploaded media or providing media by URL.
   299 	 * Custom media frame for selecting uploaded media or providing media by URL.
   286 	 *
   300 	 *
   287 	 * @class MediaFrameSelect
   301 	 * @class    wp.mediaWidgets.MediaFrameSelect
   288 	 * @constructor
   302 	 * @augments wp.media.view.MediaFrame.Post
   289 	 */
   303 	 */
   290 	component.MediaFrameSelect = wp.media.view.MediaFrame.Post.extend({
   304 	component.MediaFrameSelect = wp.media.view.MediaFrame.Post.extend(/** @lends wp.mediaWidgets.MediaFrameSelect.prototype */{
   291 
   305 
   292 		/**
   306 		/**
   293 		 * Create the default states.
   307 		 * Create the default states.
   294 		 *
   308 		 *
   295 		 * @returns {void}
   309 		 * @returns {void}
   355 				requires: { selection: true },
   369 				requires: { selection: true },
   356 
   370 
   357 				/**
   371 				/**
   358 				 * Handle click.
   372 				 * Handle click.
   359 				 *
   373 				 *
       
   374 				 * @ignore
       
   375 				 *
   360 				 * @fires wp.media.controller.State#insert()
   376 				 * @fires wp.media.controller.State#insert()
   361 				 * @returns {void}
   377 				 * @returns {void}
   362 				 */
   378 				 */
   363 				click: function onClick() {
   379 				click: function onClick() {
   364 					var state = controller.state(),
   380 					var state = controller.state(),
   406 				view.url.focus();
   422 				view.url.focus();
   407 			}
   423 			}
   408 		}
   424 		}
   409 	});
   425 	});
   410 
   426 
   411 	/**
   427 	component.MediaWidgetControl = Backbone.View.extend(/** @lends wp.mediaWidgets.MediaWidgetControl.prototype */{
   412 	 * Media widget control.
       
   413 	 *
       
   414 	 * @class MediaWidgetControl
       
   415 	 * @constructor
       
   416 	 * @abstract
       
   417 	 */
       
   418 	component.MediaWidgetControl = Backbone.View.extend({
       
   419 
   428 
   420 		/**
   429 		/**
   421 		 * Translation strings.
   430 		 * Translation strings.
   422 		 *
   431 		 *
   423 		 * The mapping of translation strings is handled by media widget subclasses,
   432 		 * The mapping of translation strings is handled by media widget subclasses,
   471 		 * @type {boolean}
   480 		 * @type {boolean}
   472 		 */
   481 		 */
   473 		showDisplaySettings: true,
   482 		showDisplaySettings: true,
   474 
   483 
   475 		/**
   484 		/**
   476 		 * Initialize.
   485 		 * Media Widget Control.
       
   486 		 *
       
   487 		 * @constructs wp.mediaWidgets.MediaWidgetControl
       
   488 		 * @augments   Backbone.View
       
   489 		 * @abstract
   477 		 *
   490 		 *
   478 		 * @param {Object}         options - Options.
   491 		 * @param {Object}         options - Options.
   479 		 * @param {Backbone.Model} options.model - Model.
   492 		 * @param {Backbone.Model} options.model - Model.
   480 		 * @param {jQuery}         options.el - Control field container element.
   493 		 * @param {jQuery}         options.el - Control field container element.
   481 		 * @param {jQuery}         options.syncContainer - Container element where fields are synced for the server.
   494 		 * @param {jQuery}         options.syncContainer - Container element where fields are synced for the server.
       
   495 		 *
   482 		 * @returns {void}
   496 		 * @returns {void}
   483 		 */
   497 		 */
   484 		initialize: function initialize( options ) {
   498 		initialize: function initialize( options ) {
   485 			var control = this;
   499 			var control = this;
   486 
   500 
   959 	});
   973 	});
   960 
   974 
   961 	/**
   975 	/**
   962 	 * Media widget model.
   976 	 * Media widget model.
   963 	 *
   977 	 *
   964 	 * @class MediaWidgetModel
   978 	 * @class    wp.mediaWidgets.MediaWidgetModel
   965 	 * @constructor
   979 	 * @augments Backbone.Model
   966 	 */
   980 	 */
   967 	component.MediaWidgetModel = Backbone.Model.extend({
   981 	component.MediaWidgetModel = Backbone.Model.extend(/** @lends wp.mediaWidgets.MediaWidgetModel.prototype */{
   968 
   982 
   969 		/**
   983 		/**
   970 		 * Id attribute.
   984 		 * Id attribute.
   971 		 *
   985 		 *
   972 		 * @type {string}
   986 		 * @type {string}
  1083 	});
  1097 	});
  1084 
  1098 
  1085 	/**
  1099 	/**
  1086 	 * Collection of all widget model instances.
  1100 	 * Collection of all widget model instances.
  1087 	 *
  1101 	 *
       
  1102 	 * @memberOf wp.mediaWidgets
       
  1103 	 *
  1088 	 * @type {Backbone.Collection}
  1104 	 * @type {Backbone.Collection}
  1089 	 */
  1105 	 */
  1090 	component.modelCollection = new ( Backbone.Collection.extend({
  1106 	component.modelCollection = new ( Backbone.Collection.extend( {
  1091 		model: component.MediaWidgetModel
  1107 		model: component.MediaWidgetModel
  1092 	}) )();
  1108 	}) )();
  1093 
  1109 
  1094 	/**
  1110 	/**
  1095 	 * Mapping of widget ID to instances of MediaWidgetControl subclasses.
  1111 	 * Mapping of widget ID to instances of MediaWidgetControl subclasses.
       
  1112 	 *
       
  1113 	 * @memberOf wp.mediaWidgets
  1096 	 *
  1114 	 *
  1097 	 * @type {Object.<string, wp.mediaWidgets.MediaWidgetControl>}
  1115 	 * @type {Object.<string, wp.mediaWidgets.MediaWidgetControl>}
  1098 	 */
  1116 	 */
  1099 	component.widgetControls = {};
  1117 	component.widgetControls = {};
  1100 
  1118 
  1101 	/**
  1119 	/**
  1102 	 * Handle widget being added or initialized for the first time at the widget-added event.
  1120 	 * Handle widget being added or initialized for the first time at the widget-added event.
  1103 	 *
  1121 	 *
       
  1122 	 * @memberOf wp.mediaWidgets
       
  1123 	 *
  1104 	 * @param {jQuery.Event} event - Event.
  1124 	 * @param {jQuery.Event} event - Event.
  1105 	 * @param {jQuery}       widgetContainer - Widget container element.
  1125 	 * @param {jQuery}       widgetContainer - Widget container element.
       
  1126 	 *
  1106 	 * @returns {void}
  1127 	 * @returns {void}
  1107 	 */
  1128 	 */
  1108 	component.handleWidgetAdded = function handleWidgetAdded( event, widgetContainer ) {
  1129 	component.handleWidgetAdded = function handleWidgetAdded( event, widgetContainer ) {
  1109 		var fieldContainer, syncContainer, widgetForm, idBase, ControlConstructor, ModelConstructor, modelAttributes, widgetControl, widgetModel, widgetId, animatedCheckDelay = 50, renderWhenAnimationDone;
  1130 		var fieldContainer, syncContainer, widgetForm, idBase, ControlConstructor, ModelConstructor, modelAttributes, widgetControl, widgetModel, widgetId, animatedCheckDelay = 50, renderWhenAnimationDone;
  1110 		widgetForm = widgetContainer.find( '> .widget-inside > .form, > .widget-inside > form' ); // Note: '.form' appears in the customizer, whereas 'form' on the widgets admin screen.
  1131 		widgetForm = widgetContainer.find( '> .widget-inside > .form, > .widget-inside > form' ); // Note: '.form' appears in the customizer, whereas 'form' on the widgets admin screen.
  1182 	};
  1203 	};
  1183 
  1204 
  1184 	/**
  1205 	/**
  1185 	 * Setup widget in accessibility mode.
  1206 	 * Setup widget in accessibility mode.
  1186 	 *
  1207 	 *
       
  1208 	 * @memberOf wp.mediaWidgets
       
  1209 	 *
  1187 	 * @returns {void}
  1210 	 * @returns {void}
  1188 	 */
  1211 	 */
  1189 	component.setupAccessibleMode = function setupAccessibleMode() {
  1212 	component.setupAccessibleMode = function setupAccessibleMode() {
  1190 		var widgetForm, widgetId, idBase, widgetControl, ControlConstructor, ModelConstructor, modelAttributes, fieldContainer, syncContainer;
  1213 		var widgetForm, widgetId, idBase, widgetControl, ControlConstructor, ModelConstructor, modelAttributes, fieldContainer, syncContainer;
  1191 		widgetForm = $( '.editwidget > form' );
  1214 		widgetForm = $( '.editwidget > form' );
  1231 	 *
  1254 	 *
  1232 	 * This gets called via the 'widget-updated' event when saving a widget from
  1255 	 * This gets called via the 'widget-updated' event when saving a widget from
  1233 	 * the widgets admin screen and also via the 'widget-synced' event when making
  1256 	 * the widgets admin screen and also via the 'widget-synced' event when making
  1234 	 * a change to a widget in the customizer.
  1257 	 * a change to a widget in the customizer.
  1235 	 *
  1258 	 *
       
  1259 	 * @memberOf wp.mediaWidgets
       
  1260 	 *
  1236 	 * @param {jQuery.Event} event - Event.
  1261 	 * @param {jQuery.Event} event - Event.
  1237 	 * @param {jQuery}       widgetContainer - Widget container element.
  1262 	 * @param {jQuery}       widgetContainer - Widget container element.
       
  1263 	 *
  1238 	 * @returns {void}
  1264 	 * @returns {void}
  1239 	 */
  1265 	 */
  1240 	component.handleWidgetUpdated = function handleWidgetUpdated( event, widgetContainer ) {
  1266 	component.handleWidgetUpdated = function handleWidgetUpdated( event, widgetContainer ) {
  1241 		var widgetForm, widgetContent, widgetId, widgetControl, attributes = {};
  1267 		var widgetForm, widgetContent, widgetId, widgetControl, attributes = {};
  1242 		widgetForm = widgetContainer.find( '> .widget-inside > .form, > .widget-inside > form' );
  1268 		widgetForm = widgetContainer.find( '> .widget-inside > .form, > .widget-inside > form' );
  1264 	 * Initialize functionality.
  1290 	 * Initialize functionality.
  1265 	 *
  1291 	 *
  1266 	 * This function exists to prevent the JS file from having to boot itself.
  1292 	 * This function exists to prevent the JS file from having to boot itself.
  1267 	 * When WordPress enqueues this script, it should have an inline script
  1293 	 * When WordPress enqueues this script, it should have an inline script
  1268 	 * attached which calls wp.mediaWidgets.init().
  1294 	 * attached which calls wp.mediaWidgets.init().
       
  1295 	 *
       
  1296 	 * @memberOf wp.mediaWidgets
  1269 	 *
  1297 	 *
  1270 	 * @returns {void}
  1298 	 * @returns {void}
  1271 	 */
  1299 	 */
  1272 	component.init = function init() {
  1300 	component.init = function init() {
  1273 		var $document = $( document );
  1301 		var $document = $( document );