Jetpack – WP Security, Backup, Speed, & Growth / 16.3-a.7

Jetpack – WP Security, Backup, Speed, & Growth v16.3-a.7

jetpack / modules / videopress / js / editor-view.js

editor-view.js in Jetpack – WP Security, Backup, Speed, & Growth 16.3-a.7, at modules/videopress/js/editor-view.js

292 lines 7.6 KB

Raw Download Zip

1	/* global tinyMCE, vpEditorView */
2	( function ( $, wp, vpEditorView ) {
3	wp.mce = wp.mce \|\| {};
4	if ( 'undefined' === typeof wp.mce.views ) {
5	return;
6	}
7	wp.mce.videopress_wp_view_renderer = {
8	shortcode_string: 'videopress',
9	shortcode_data: {},
10	defaults: {
11	w: '',
12	at: '',
13	permalink: true,
14	hd: false,
15	loop: false,
16	freedom: false,
17	autoplay: false,
18	flashonly: false,
19	},
20	coerce: wp.media.coerce,
21	template: wp.template( 'videopress_iframe_vnext' ),
22	getContent: function () {
23	var urlargs = 'for=' + encodeURIComponent( vpEditorView.home_url_host ),
24	named = this.shortcode.attrs.named,
25	options,
26	key,
27	width;
28
29	for ( key in named ) {
30	switch ( key ) {
31	case 'at':
32	if ( parseInt( named[ key ], 10 ) ) {
33	urlargs += '&' + key + '=' + parseInt( named[ key ], 10 );
34	} // Else omit, as it's the default.
35	break;
36	case 'permalink':
37	if ( 'false' === named[ key ] ) {
38	urlargs += '&' + key + '=0';
39	} // Else omit, as it's the default.
40	break;
41	case 'hd':
42	case 'loop':
43	case 'autoplay':
44	if ( 'true' === named[ key ] ) {
45	urlargs += '&' + key + '=1';
46	} // Else omit, as it's the default.
47	break;
48	default:
49	// Unknown parameters? Ditch it!
50	break;
51	}
52	}
53
54	options = {
55	width: vpEditorView.content_width,
56	height: vpEditorView.content_width * 0.5625,
57	guid: this.shortcode.attrs.numeric[ 0 ],
58	urlargs: urlargs,
59	};
60
61	if ( typeof named.w !== 'undefined' ) {
62	width = parseInt( named.w, 10 );
63	if ( width >= vpEditorView.min_content_width && width < vpEditorView.content_width ) {
64	options.width = width;
65	options.height = parseInt( width * 0.5625, 10 );
66	}
67	}
68
69	options.ratio = 100 * ( options.height / options.width );
70
71	return this.template( options );
72	},
73	edit: function ( data ) {
74	var shortcode_data = wp.shortcode.next( this.shortcode_string, data ),
75	named = shortcode_data.shortcode.attrs.named,
76	editor = tinyMCE.activeEditor,
77	renderer = this,
78	oldRenderFormItem = tinyMCE.ui.FormItem.prototype.renderHtml;
79
80	/**
81	* Override TextBox renderHtml to support html5 attrs.
82	* @link https://github.com/tinymce/tinymce/pull/2784
83	*
84	* @return {string}
85	*/
86	tinyMCE.ui.TextBox.prototype.renderHtml = function () {
87	var self = this,
88	settings = self.settings,
89	element = document.createElement( settings.multiline ? 'textarea' : 'input' ),
90	extraAttrs = [
91	'rows',
92	'spellcheck',
93	'maxLength',
94	'size',
95	'readonly',
96	'min',
97	'max',
98	'step',
99	'list',
100	'pattern',
101	'placeholder',
102	'required',
103	'multiple',
104	],
105	i,
106	key;
107
108	for ( i = 0; i < extraAttrs.length; i++ ) {
109	key = extraAttrs[ i ];
110	if ( typeof settings[ key ] !== 'undefined' ) {
111	element.setAttribute( key, settings[ key ] );
112	}
113	}
114
115	if ( settings.multiline ) {
116	element.innerText = self.state.get( 'value' );
117	} else {
118	element.setAttribute( 'type', settings.subtype ? settings.subtype : 'text' );
119	element.setAttribute( 'value', self.state.get( 'value' ) );
120	}
121
122	element.id = self._id;
123	element.className = self.classes;
124	element.setAttribute( 'hidefocus', 1 );
125	if ( self.disabled() ) {
126	element.disabled = true;
127	}
128
129	return element.outerHTML;
130	};
131
132	tinyMCE.ui.FormItem.prototype.renderHtml = function () {
133	for ( const [ key, value ] of Object.entries( vpEditorView.modal_labels ) ) {
134	if ( value === this.settings.items.text ) {
135	this.classes.add( 'videopress-field-' + key );
136	}
137	}
138
139	if (
140	[
141	vpEditorView.modal_labels.hd,
142	vpEditorView.modal_labels.permalink,
143	vpEditorView.modal_labels.autoplay,
144	vpEditorView.modal_labels.loop,
145	vpEditorView.modal_labels.freedom,
146	vpEditorView.modal_labels.flashonly,
147	].includes( this.settings.items.text )
148	) {
149	this.classes.add( 'videopress-checkbox' );
150	}
151	return oldRenderFormItem.call( this );
152	};
153
154	/**
155	* Populate the defaults.
156	*/
157	for ( const [ key ] of Object.entries( this.defaults ) ) {
158	named[ key ] = this.coerce( named, key );
159	}
160
161	/**
162	* Declare the fields that will show in the popup when editing the shortcode.
163	*/
164	editor.windowManager.open( {
165	title: vpEditorView.modal_labels.title,
166	id: 'videopress-shortcode-settings-modal',
167	width: 520,
168	height: 240,
169	body: [
170	{
171	type: 'textbox',
172	disabled: true,
173	name: 'guid',
174	label: vpEditorView.modal_labels.guid,
175	value: shortcode_data.shortcode.attrs.numeric[ 0 ],
176	},
177	{
178	type: 'textbox',
179	subtype: 'number',
180	min: vpEditorView.min_content_width, // The `min` may supported be in the future. https://github.com/tinymce/tinymce/pull/2784
181	name: 'w',
182	label: vpEditorView.modal_labels.w,
183	value: named.w,
184	},
185	{
186	type: 'textbox',
187	subtype: 'number',
188	min: 0, // The `min` may supported be in the future. https://github.com/tinymce/tinymce/pull/2784
189	name: 'at',
190	label: vpEditorView.modal_labels.at,
191	value: named.at,
192	},
193	{
194	type: 'checkbox',
195	name: 'hd',
196	label: vpEditorView.modal_labels.hd,
197	checked: named.hd,
198	},
199	{
200	type: 'checkbox',
201	name: 'permalink',
202	label: vpEditorView.modal_labels.permalink,
203	checked: named.permalink,
204	},
205	{
206	type: 'checkbox',
207	name: 'autoplay',
208	label: vpEditorView.modal_labels.autoplay,
209	checked: named.autoplay,
210	},
211	{
212	type: 'checkbox',
213	name: 'loop',
214	label: vpEditorView.modal_labels.loop,
215	checked: named.loop,
216	},
217	{
218	type: 'checkbox',
219	name: 'freedom',
220	label: vpEditorView.modal_labels.freedom,
221	checked: named.freedom,
222	},
223	{
224	type: 'checkbox',
225	name: 'flashonly',
226	label: vpEditorView.modal_labels.flashonly,
227	checked: named.flashonly,
228	},
229	],
230	onsubmit: function ( e ) {
231	var args = {
232	tag: renderer.shortcode_string,
233	type: 'single',
234	attrs: {
235	named: Object.fromEntries(
236	Object.entries( e.data ).filter( ( [ k ] ) => k in renderer.defaults )
237	),
238	numeric: [ e.data.guid ],
239	},
240	};
241
242	if ( '0' === args.attrs.named.at ) {
243	args.attrs.named.at = '';
244	}
245
246	for ( const [ key, value ] of Object.entries( renderer.defaults ) ) {
247	args.attrs.named[ key ] = renderer.coerce( args.attrs.named, key );
248
249	if ( value === args.attrs.named[ key ] ) {
250	delete args.attrs.named[ key ];
251	}
252	}
253
254	editor.insertContent( wp.shortcode.string( args ) );
255	},
256	onopen: function ( e ) {
257	var prefix = 'mce-videopress-field-';
258	for ( const value of [ 'w', 'at' ] ) {
259	e.target.$el
260	.find( '.' + prefix + value + ' .mce-container-body' )
261	.append(
262	'<span class="' +
263	prefix +
264	'unit ' +
265	prefix +
266	'unit-' +
267	value +
268	'">' +
269	vpEditorView.modal_labels[ value + '_unit' ]
270	);
271	}
272	$( 'body' ).addClass( 'modal-open' );
273	},
274	onclose: function () {
275	$( 'body' ).removeClass( 'modal-open' );
276	},
277	} );
278
279	// Set it back to its original renderer.
280	tinyMCE.ui.FormItem.prototype.renderHtml = oldRenderFormItem;
281	},
282	};
283
284	// Extend the videopress one to also handle `wpvideo` instances.
285	wp.mce.wpvideo_wp_view_renderer = Object.assign( {}, wp.mce.videopress_wp_view_renderer, {
286	shortcode_string: 'wpvideo',
287	} );
288
289	wp.mce.views.register( 'videopress', wp.mce.videopress_wp_view_renderer );
290	wp.mce.views.register( 'wpvideo', wp.mce.wpvideo_wp_view_renderer );
291	} )( jQuery, wp, vpEditorView );
292