/home/arranoyd/magicraft/wp-content/plugins/jetpack/modules/videopress/js/editor-view.js
/* 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 ));