264 lines
7.6 KiB
JavaScript
264 lines
7.6 KiB
JavaScript
/* 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 ));
|