← All changes | modules/videopress/js/editor-view.js +291 -0 16.2-beta → 16.3 View file →

		@@ -1,0 +1,291 @@
	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 );