/* 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 );