Mini Shell

/* global tinyMCE, vpEditorView */
( function ( $, wp, vpEditorView ) {
	wp.mce = wp.mce || {};
	if ( 'undefined' === typeof wp.mce.views ) {
		return;
	}
	wp.mce.videopress_wp_view_renderer = {
		shortcode_string: 'videopress',
		shortcode_data: {},
		defaults: {
			w: '',
			at: '',
			permalink: true,
			hd: false,
			loop: false,
			freedom: false,
			autoplay: false,
			flashonly: false,
		},
		coerce: wp.media.coerce,
		template: wp.template( 'videopress_iframe_vnext' ),
		getContent: function () {
			var urlargs = 'for=' + encodeURIComponent( vpEditorView.home_url_host ),
				named = this.shortcode.attrs.named,
				options,
				key,
				width;

			for ( key in named ) {
				switch ( key ) {
					case 'at':
						if ( parseInt( named[ key ], 10 ) ) {
							urlargs += '&' + key + '=' + parseInt( named[ key ], 10 );
						} // Else omit, as it's the default.
						break;
					case 'permalink':
						if ( 'false' === named[ key ] ) {
							urlargs += '&' + key + '=0';
						} // Else omit, as it's the default.
						break;
					case 'hd':
					case 'loop':
					case 'autoplay':
						if ( 'true' === named[ key ] ) {
							urlargs += '&' + key + '=1';
						} // Else omit, as it's the default.
						break;
					default:
						// Unknown parameters?  Ditch it!
						break;
				}
			}

			options = {
				width: vpEditorView.content_width,
				height: vpEditorView.content_width * 0.5625,
				guid: this.shortcode.attrs.numeric[ 0 ],
				urlargs: urlargs,
			};

			if ( typeof named.w !== 'undefined' ) {
				width = parseInt( named.w, 10 );
				if ( width >= vpEditorView.min_content_width && width < vpEditorView.content_width ) {
					options.width = width;
					options.height = parseInt( width * 0.5625, 10 );
				}
			}

			options.ratio = 100 * ( options.height / options.width );

			return this.template( options );
		},
		edit: function ( data ) {
			var shortcode_data = wp.shortcode.next( this.shortcode_string, data ),
				named = shortcode_data.shortcode.attrs.named,
				editor = tinyMCE.activeEditor,
				renderer = this,
				oldRenderFormItem = tinyMCE.ui.FormItem.prototype.renderHtml;

			/**
			 * Override TextBox renderHtml to support html5 attrs.
			 * @link https://github.com/tinymce/tinymce/pull/2784
			 *
			 * @returns {string}
			 */
			tinyMCE.ui.TextBox.prototype.renderHtml = function () {
				var self = this,
					settings = self.settings,
					element = document.createElement( settings.multiline ? 'textarea' : 'input' ),
					extraAttrs = [
						'rows',
						'spellcheck',
						'maxLength',
						'size',
						'readonly',
						'min',
						'max',
						'step',
						'list',
						'pattern',
						'placeholder',
						'required',
						'multiple',
					],
					i,
					key;

				for ( i = 0; i < extraAttrs.length; i++ ) {
					key = extraAttrs[ i ];
					if ( typeof settings[ key ] !== 'undefined' ) {
						element.setAttribute( key, settings[ key ] );
					}
				}

				if ( settings.multiline ) {
					element.innerText = self.state.get( 'value' );
				} else {
					element.setAttribute( 'type', settings.subtype ? settings.subtype : 'text' );
					element.setAttribute( 'value', self.state.get( 'value' ) );
				}

				element.id = self._id;
				element.className = self.classes;
				element.setAttribute( 'hidefocus', 1 );
				if ( self.disabled() ) {
					element.disabled = true;
				}

				return element.outerHTML;
			};

			tinyMCE.ui.FormItem.prototype.renderHtml = function () {
				_.each(
					vpEditorView.modal_labels,
					function ( value, key ) {
						if ( value === this.settings.items.text ) {
							this.classes.add( 'videopress-field-' + key );
						}
					},
					this
				);

				if (
					_.contains(
						[
							vpEditorView.modal_labels.hd,
							vpEditorView.modal_labels.permalink,
							vpEditorView.modal_labels.autoplay,
							vpEditorView.modal_labels.loop,
							vpEditorView.modal_labels.freedom,
							vpEditorView.modal_labels.flashonly,
						],
						this.settings.items.text
					)
				) {
					this.classes.add( 'videopress-checkbox' );
				}
				return oldRenderFormItem.call( this );
			};

			/**
			 * Populate the defaults.
			 */
			_.each(
				this.defaults,
				function ( value, key ) {
					named[ key ] = this.coerce( named, key );
				},
				this
			);

			/**
			 * Declare the fields that will show in the popup when editing the shortcode.
			 */
			editor.windowManager.open( {
				title: vpEditorView.modal_labels.title,
				id: 'videopress-shortcode-settings-modal',
				width: 520,
				height: 240,
				body: [
					{
						type: 'textbox',
						disabled: true,
						name: 'guid',
						label: vpEditorView.modal_labels.guid,
						value: shortcode_data.shortcode.attrs.numeric[ 0 ],
					},
					{
						type: 'textbox',
						subtype: 'number',
						min: vpEditorView.min_content_width, // The `min` may supported be in the future. https://github.com/tinymce/tinymce/pull/2784
						name: 'w',
						label: vpEditorView.modal_labels.w,
						value: named.w,
					},
					{
						type: 'textbox',
						subtype: 'number',
						min: 0, // The `min` may supported be in the future. https://github.com/tinymce/tinymce/pull/2784
						name: 'at',
						label: vpEditorView.modal_labels.at,
						value: named.at,
					},
					{
						type: 'checkbox',
						name: 'hd',
						label: vpEditorView.modal_labels.hd,
						checked: named.hd,
					},
					{
						type: 'checkbox',
						name: 'permalink',
						label: vpEditorView.modal_labels.permalink,
						checked: named.permalink,
					},
					{
						type: 'checkbox',
						name: 'autoplay',
						label: vpEditorView.modal_labels.autoplay,
						checked: named.autoplay,
					},
					{
						type: 'checkbox',
						name: 'loop',
						label: vpEditorView.modal_labels.loop,
						checked: named.loop,
					},
					{
						type: 'checkbox',
						name: 'freedom',
						label: vpEditorView.modal_labels.freedom,
						checked: named.freedom,
					},
					{
						type: 'checkbox',
						name: 'flashonly',
						label: vpEditorView.modal_labels.flashonly,
						checked: named.flashonly,
					},
				],
				onsubmit: function ( e ) {
					var args = {
						tag: renderer.shortcode_string,
						type: 'single',
						attrs: {
							named: _.pick( e.data, _.keys( renderer.defaults ) ),
							numeric: [ e.data.guid ],
						},
					};

					if ( '0' === args.attrs.named.at ) {
						args.attrs.named.at = '';
					}

					_.each(
						renderer.defaults,
						function ( value, key ) {
							args.attrs.named[ key ] = this.coerce( args.attrs.named, key );

							if ( value === args.attrs.named[ key ] ) {
								delete args.attrs.named[ key ];
							}
						},
						renderer
					);

					editor.insertContent( wp.shortcode.string( args ) );
				},
				onopen: function ( e ) {
					var prefix = 'mce-videopress-field-';
					_.each( [ 'w', 'at' ], function ( value ) {
						e.target.$el
							.find( '.' + prefix + value + ' .mce-container-body' )
							.append(
								'<span class="' +
									prefix +
									'unit ' +
									prefix +
									'unit-' +
									value +
									'">' +
									vpEditorView.modal_labels[ value + '_unit' ]
							);
					} );
					$( 'body' ).addClass( 'modal-open' );
				},
				onclose: function () {
					$( 'body' ).removeClass( 'modal-open' );
				},
			} );

			// Set it back to its original renderer.
			tinyMCE.ui.FormItem.prototype.renderHtml = oldRenderFormItem;
		},
	};
	wp.mce.views.register( 'videopress', wp.mce.videopress_wp_view_renderer );

	// Extend the videopress one to also handle `wpvideo` instances.
	wp.mce.wpvideo_wp_view_renderer = _.extend( {}, wp.mce.videopress_wp_view_renderer, {
		shortcode_string: 'wpvideo',
	} );
	wp.mce.views.register( 'wpvideo', wp.mce.wpvideo_wp_view_renderer );
} )( jQuery, wp, vpEditorView );