Initial commit
This commit is contained in:
Ben Goldsworthy
commit
28e6ddf404
1083 changed files with 191734 additions and 0 deletions
264
plugins/jetpack/modules/videopress/js/editor-view.js
Normal file
264
plugins/jetpack/modules/videopress/js/editor-view.js
Normal file
|
|
@ -0,0 +1,264 @@
|
|||
/* 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 ));
|
||||
502
plugins/jetpack/modules/videopress/js/videopress-admin.js
Normal file
502
plugins/jetpack/modules/videopress/js/videopress-admin.js
Normal file
|
|
@ -0,0 +1,502 @@
|
|||
/* jshint onevar: false, smarttabs: true, devel: true */
|
||||
/* global VideoPressAdminSettings, setUserSetting */
|
||||
|
||||
/**
|
||||
* VideoPress Admin
|
||||
*
|
||||
* @todo i18n
|
||||
*/
|
||||
(function($) {
|
||||
var media = wp.media;
|
||||
var VideoPress = VideoPress || {};
|
||||
|
||||
VideoPress.caps = VideoPressAdminSettings.caps;
|
||||
VideoPress.l10n = VideoPressAdminSettings.l10n;
|
||||
|
||||
/**
|
||||
* Create a new controller that simply adds a videopress key
|
||||
* to the library query
|
||||
*/
|
||||
media.controller.VideoPress = media.controller.Library.extend({
|
||||
defaults: _.defaults({
|
||||
id: 'videopress',
|
||||
router: 'videopress',
|
||||
toolbar: 'videopress-toolbar',
|
||||
title: 'VideoPress',
|
||||
priority: 200,
|
||||
searchable: true,
|
||||
sortable: false
|
||||
}, media.controller.Library.prototype.defaults ),
|
||||
|
||||
initialize: function() {
|
||||
if ( ! this.get('library') ) {
|
||||
this.set( 'library', media.query({ videopress: true }) );
|
||||
}
|
||||
|
||||
media.controller.Library.prototype.initialize.apply( this, arguments );
|
||||
},
|
||||
|
||||
/**
|
||||
* The original function saves content for the browse router only,
|
||||
* so we hi-jack it a little bit.
|
||||
*/
|
||||
saveContentMode: function() {
|
||||
if ( 'videopress' !== this.get('router') ) {
|
||||
return;
|
||||
}
|
||||
|
||||
var mode = this.frame.content.mode(),
|
||||
view = this.frame.router.get();
|
||||
|
||||
if ( view && view.get( mode ) ) {
|
||||
|
||||
// Map the Upload a Video back to the regular Upload Files.
|
||||
if ( 'upload_videopress' === mode ) {
|
||||
mode = 'upload';
|
||||
}
|
||||
|
||||
setUserSetting( 'libraryContent', mode );
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* VideoPress Uploader
|
||||
*/
|
||||
media.view.VideoPressUploader = media.View.extend({
|
||||
tagName: 'div',
|
||||
className: 'uploader-videopress',
|
||||
template: media.template('videopress-uploader'),
|
||||
|
||||
events: {
|
||||
'submit .videopress-upload-form': 'submitForm'
|
||||
},
|
||||
|
||||
initialize: function() {
|
||||
var that = this;
|
||||
|
||||
if ( ! window.addEventListener ) {
|
||||
window.attachEvent( 'onmessage', function() { return that.messageHandler.apply( that, arguments ); } );
|
||||
} else {
|
||||
window.addEventListener( 'message', function() { return that.messageHandler.apply( that, arguments ); }, false );
|
||||
}
|
||||
|
||||
return media.View.prototype.initialize.apply( this, arguments );
|
||||
},
|
||||
|
||||
submitForm: function() {
|
||||
var data = false;
|
||||
|
||||
this.clearErrors();
|
||||
|
||||
if ( this.$( 'input[name="videopress_file"]').val().length < 1 ) {
|
||||
this.error( VideoPress.l10n.selectVideoFile );
|
||||
return false;
|
||||
}
|
||||
|
||||
// Prevent multiple submissions.
|
||||
this.$( '.videopress-upload-form .button' ).prop( 'disabled', true );
|
||||
|
||||
// A non-async request for an upload token.
|
||||
media.ajax( 'videopress-get-upload-token', { async: false } ).done( function( response ) {
|
||||
data = response;
|
||||
data.success = true;
|
||||
}).fail( function( response ) {
|
||||
data = response;
|
||||
data.success = false;
|
||||
});
|
||||
|
||||
if ( ! data.success ) {
|
||||
// Re-enable form elements.
|
||||
this.$( '.videopress-upload-form .button' ).prop( 'disabled', false );
|
||||
|
||||
// Display an error message and cancel form submission.
|
||||
this.error( data.message );
|
||||
return false;
|
||||
}
|
||||
|
||||
this.error( VideoPress.l10n.videoUploading, 'updated' );
|
||||
|
||||
// Set the form token.
|
||||
this.$( 'input[name="videopress_blog_id"]' ).val( data.videopress_blog_id );
|
||||
this.$( 'input[name="videopress_token"]' ).val( data.videopress_token );
|
||||
this.$( '.videopress-upload-form' ).attr( 'action', data.videopress_action_url );
|
||||
return true;
|
||||
},
|
||||
|
||||
error: function( message, type ) {
|
||||
type = type || 'error';
|
||||
var div = $( '<div />' ).html( $( '<p />' ).text( message ) ).addClass( type );
|
||||
this.$( '.videopress-errors' ).html( div );
|
||||
return this;
|
||||
},
|
||||
|
||||
success: function( message ) {
|
||||
return this.error( message, 'updated' );
|
||||
},
|
||||
|
||||
clearErrors: function() {
|
||||
this.$( '.videopress-errors' ).html('');
|
||||
return this;
|
||||
},
|
||||
|
||||
messageHandler: function( event ) {
|
||||
if ( ! event.origin.match( /\.wordpress\.com$/ ) ) {
|
||||
return;
|
||||
}
|
||||
|
||||
if ( event.data.indexOf && event.data.indexOf( 'vpUploadResult::' ) === 0 ) {
|
||||
var result = JSON.parse( event.data.substr( 16 ) );
|
||||
|
||||
if ( ! result || ! result.code ) {
|
||||
this.error( VideoPress.l10n.unknownError );
|
||||
this.$( '.videopress-upload-form .button' ).prop( 'disabled', false );
|
||||
return;
|
||||
}
|
||||
|
||||
if ( 'success' === result.code && result.data ) {
|
||||
var that = this, controller = this.controller,
|
||||
state = controller.states.get( 'videopress' );
|
||||
|
||||
// Our new video has been added, so we need to reset the library.
|
||||
// Since the Media API caches all queries, we add a random attribute
|
||||
// to avoid the cache, then call more() to actually fetch the data.
|
||||
|
||||
state.set( 'library', media.query({ videopress:true, vp_random:Math.random() }) );
|
||||
state.get( 'library' ).more().done(function(){
|
||||
var model = state.get( 'library' ).get( result.data.attachment_id );
|
||||
|
||||
// Clear errors and select the uploaded item.
|
||||
that.clearErrors();
|
||||
state.get( 'selection' ).reset([ model ]);
|
||||
controller.content.mode( 'browse' );
|
||||
});
|
||||
} else {
|
||||
this.error( result.code );
|
||||
|
||||
// Re-enable form elements.
|
||||
this.$( '.videopress-upload-form .button' ).prop( 'disabled', false );
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Add a custom sync function that would add a few extra
|
||||
* options for models which are VideoPress videos.
|
||||
*/
|
||||
var attachmentSync = media.model.Attachment.prototype.sync;
|
||||
media.model.Attachment.prototype.sync = function( method, model, options ) {
|
||||
if ( model.get( 'vp_isVideoPress' ) ) {
|
||||
console.log( 'syncing ' + model.get( 'vp_guid' ) );
|
||||
options.data = _.extend( options.data || {}, {
|
||||
is_videopress: true,
|
||||
vp_nonces: model.get( 'vp_nonces' )
|
||||
} );
|
||||
}
|
||||
|
||||
// Call the original sync routine.
|
||||
return attachmentSync.apply( this, arguments );
|
||||
};
|
||||
|
||||
/**
|
||||
* Extend the default Attachment Details view. Check for vp_isVideoPress before
|
||||
* adding anything to these methods.
|
||||
*/
|
||||
var AttachmentDetails = media.view.Attachment.Details;
|
||||
media.view.Attachment.Details = AttachmentDetails.extend({
|
||||
|
||||
initialize: function() {
|
||||
if ( this.model.get( 'vp_isVideoPress' ) ) {
|
||||
_.extend( this.events, {
|
||||
'click a.videopress-preview': 'vpPreview',
|
||||
'change .vp-radio': 'vpRadioChange',
|
||||
'change .vp-checkbox': 'vpCheckboxChange'
|
||||
});
|
||||
}
|
||||
return AttachmentDetails.prototype.initialize.apply( this, arguments );
|
||||
},
|
||||
|
||||
render: function() {
|
||||
var r = AttachmentDetails.prototype.render.apply( this, arguments );
|
||||
if ( this.model.get( 'vp_isVideoPress' ) ) {
|
||||
var template = media.template( 'videopress-attachment' );
|
||||
var options = this.model.toJSON();
|
||||
|
||||
options.can = {};
|
||||
options.can.save = !! options.nonces.update;
|
||||
|
||||
this.$el.append( template( options ) );
|
||||
}
|
||||
return r;
|
||||
},
|
||||
|
||||
// Handle radio buttons
|
||||
vpRadioChange: function(e) {
|
||||
$( e.target ).parents( '.vp-setting' ).find( '.vp-radio-text' ).val( e.target.value ).change();
|
||||
},
|
||||
|
||||
// And checkboxes
|
||||
vpCheckboxChange: function(e) {
|
||||
$( e.target ).parents( '.vp-setting' ).find( '.vp-checkbox-text' ).val( Number( e.target.checked ) ).change();
|
||||
},
|
||||
|
||||
vpPreview: function() {
|
||||
VideoPressModal.render( this );
|
||||
return this;
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Don't display the uploader dropzone for the VideoPress router.
|
||||
*/
|
||||
var UploaderWindow = media.view.UploaderWindow;
|
||||
media.view.UploaderWindow = UploaderWindow.extend({
|
||||
show: function() {
|
||||
if ( 'videopress' !== this.controller.state().get('id') ) {
|
||||
UploaderWindow.prototype.show.apply( this, arguments );
|
||||
}
|
||||
|
||||
return this;
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Don't display the uploader in the attachments browser.
|
||||
*/
|
||||
var AttachmentsBrowser = media.view.AttachmentsBrowser;
|
||||
media.view.AttachmentsBrowser = AttachmentsBrowser.extend({
|
||||
/**
|
||||
* Snag the Core 3.9.2 versions as a quick fix to avoid
|
||||
* the breakage introduced by r29364-core
|
||||
*/
|
||||
updateContent: function() {
|
||||
var view = this;
|
||||
|
||||
if( ! this.attachments ) {
|
||||
this.createAttachments();
|
||||
}
|
||||
|
||||
if ( ! this.collection.length ) {
|
||||
this.toolbar.get( 'spinner' ).show();
|
||||
this.collection.more().done(function() {
|
||||
if ( ! view.collection.length ) {
|
||||
view.createUploader();
|
||||
}
|
||||
view.toolbar.get( 'spinner' ).hide();
|
||||
});
|
||||
} else {
|
||||
view.toolbar.get( 'spinner' ).hide();
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Empty out to avoid breakage.
|
||||
*/
|
||||
toggleUploader: function() {},
|
||||
createUploader: function() {
|
||||
if ( 'videopress' !== this.controller.state().get('id') ) {
|
||||
return AttachmentsBrowser.prototype.createUploader.apply( this, arguments );
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Add VideoPress-specific methods for all frames.
|
||||
*/
|
||||
_.extend( media.view.MediaFrame.prototype, { VideoPress: { // this.VideoPress.method()
|
||||
|
||||
// When the VideoPress router is activated.
|
||||
activate: function() {
|
||||
var view = _.first( this.views.get( '.media-frame-router' ) ),
|
||||
viewSettings = {};
|
||||
|
||||
if ( VideoPress.caps.read_videos ) {
|
||||
viewSettings.browse = { text: VideoPress.l10n.VideoPressLibraryRouter, priority: 40 };
|
||||
}
|
||||
|
||||
if ( VideoPress.caps.upload_videos ) {
|
||||
viewSettings.upload_videopress = { text: VideoPress.l10n.uploadVideoRouter, priority: 20 };
|
||||
}
|
||||
|
||||
view.set( viewSettings );
|
||||
|
||||
// Intercept and clear all incoming uploads
|
||||
wp.Uploader.queue.on( 'add', this.VideoPress.disableUpload, this );
|
||||
|
||||
// Map the Upload Files view to the Upload a Video one (upload_videopress vs. upload)
|
||||
if ( 'upload' === this.content.mode() && VideoPress.caps.upload_videos ) {
|
||||
this.content.mode( 'upload_videopress' );
|
||||
} else {
|
||||
this.content.mode( 'browse' );
|
||||
}
|
||||
},
|
||||
|
||||
// When navigated away from the VideoPress router.
|
||||
deactivate: function( /*view*/ ) {
|
||||
wp.Uploader.queue.off( 'add', this.VideoPress.disableUpload );
|
||||
},
|
||||
|
||||
// Disable dragdrop uploads in the VideoPress router.
|
||||
disableUpload: function( attachment ) {
|
||||
var uploader = this.uploader.uploader.uploader;
|
||||
uploader.stop();
|
||||
uploader.splice();
|
||||
attachment.destroy();
|
||||
},
|
||||
|
||||
// Runs on videopress:insert event fired by our custom toolbar
|
||||
insert: function( selection ) {
|
||||
var guid = selection.models[0].get( 'vp_guid' ).replace( /[^a-zA-Z0-9]+/, '' );
|
||||
media.editor.insert( '[wpvideo ' + guid + ']' );
|
||||
return this;
|
||||
},
|
||||
|
||||
// Triggered by the upload_videopress router item.
|
||||
uploadVideo: function() {
|
||||
this.content.set( new media.view.VideoPressUploader({
|
||||
controller: this
|
||||
}) );
|
||||
return this;
|
||||
},
|
||||
|
||||
// Create a custom toolbar
|
||||
createToolbar: function( /*toolbar*/ ) {
|
||||
// Alow an option to hide the toolbar.
|
||||
if ( this.options.VideoPress && this.options.VideoPress.hideToolbar ) {
|
||||
return this;
|
||||
}
|
||||
|
||||
var controller = this;
|
||||
this.toolbar.set( new media.view.Toolbar({
|
||||
controller: this,
|
||||
items: {
|
||||
insert: {
|
||||
style: 'primary',
|
||||
text: VideoPress.l10n.insertVideoButton,
|
||||
priority: 80,
|
||||
requires: {
|
||||
library: true,
|
||||
selection: true
|
||||
},
|
||||
|
||||
click: function() {
|
||||
var state = controller.state(),
|
||||
selection = state.get('selection');
|
||||
|
||||
controller.close();
|
||||
state.trigger( 'videopress:insert', selection ).reset();
|
||||
}
|
||||
}
|
||||
}
|
||||
}) );
|
||||
}
|
||||
}});
|
||||
|
||||
var MediaFrame = {};
|
||||
|
||||
/**
|
||||
* Extend the selection media frame
|
||||
*/
|
||||
MediaFrame.Select = media.view.MediaFrame.Select;
|
||||
media.view.MediaFrame.Select = MediaFrame.Select.extend({
|
||||
bindHandlers: function() {
|
||||
MediaFrame.Select.prototype.bindHandlers.apply( this, arguments );
|
||||
|
||||
this.on( 'router:create:videopress', this.createRouter, this );
|
||||
this.on( 'router:activate:videopress', this.VideoPress.activate, this );
|
||||
this.on( 'router:deactivate:videopress', this.VideoPress.deactivate, this );
|
||||
|
||||
this.on( 'content:render:upload_videopress', this.VideoPress.uploadVideo, this );
|
||||
this.on( 'toolbar:create:videopress-toolbar', this.VideoPress.createToolbar, this );
|
||||
this.on( 'videopress:insert', this.VideoPress.insert, this );
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Extend the post editor media frame with our own
|
||||
*/
|
||||
MediaFrame.Post = media.view.MediaFrame.Post;
|
||||
media.view.MediaFrame.Post = MediaFrame.Post.extend({
|
||||
createStates: function() {
|
||||
MediaFrame.Post.prototype.createStates.apply( this, arguments );
|
||||
this.states.add([ new media.controller.VideoPress() ]);
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* A VideoPress Modal view that we can use to preview videos.
|
||||
* Expects a controller object on render.
|
||||
*/
|
||||
var VideoPressModalView = Backbone.View.extend({
|
||||
'className': 'videopress-modal-container',
|
||||
'template': wp.media.template( 'videopress-media-modal' ),
|
||||
|
||||
// Render the VideoPress modal with a video object by guid.
|
||||
render: function( controller ) {
|
||||
this.delegateEvents( {
|
||||
'click .videopress-modal-close': 'closeModal',
|
||||
'click .videopress-modal-backdrop': 'closeModal'
|
||||
} );
|
||||
|
||||
this.model = controller.model;
|
||||
this.guid = this.model.get( 'vp_guid' );
|
||||
|
||||
if ( ! this.$frame ) {
|
||||
this.$frame = $( '.media-frame-content' );
|
||||
}
|
||||
|
||||
this.$el.html( this.template( { 'video' : this.model.get( 'vp_embed' ) } ) );
|
||||
this.$modal = this.$( '.videopress-modal' );
|
||||
this.$modal.hide();
|
||||
|
||||
this.$frame.append( this.$el );
|
||||
this.$modal.slideDown( 'fast' );
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
closeModal: function() {
|
||||
var view = this;
|
||||
this.$modal.slideUp( 'fast', function() { view.remove(); } );
|
||||
return this;
|
||||
}
|
||||
});
|
||||
|
||||
var VideoPressModal = new VideoPressModalView();
|
||||
|
||||
// Configuration screen behavior
|
||||
$(document).on( 'ready', function() {
|
||||
var $form = $( '#videopress-settings' );
|
||||
|
||||
// Not on a configuration screen
|
||||
if ( ! $form.length ) {
|
||||
return;
|
||||
}
|
||||
|
||||
var $access = $form.find( 'input[name="videopress-access"]' ),
|
||||
$upload = $form.find( 'input[name="videopress-upload"]' );
|
||||
|
||||
$access.on( 'change', function() {
|
||||
var access = $access.filter( ':checked' ).val();
|
||||
$upload.attr( 'disabled', ! access );
|
||||
|
||||
if ( ! access ) {
|
||||
$upload.attr( 'checked', false );
|
||||
}
|
||||
});
|
||||
|
||||
$access.trigger( 'change' );
|
||||
});
|
||||
|
||||
// Media -> VideoPress menu
|
||||
$(document).on( 'click', '#videopress-browse', function() {
|
||||
|
||||
wp.media({
|
||||
state: 'videopress',
|
||||
states: [ new media.controller.VideoPress() ],
|
||||
VideoPress: { hideToolbar: true }
|
||||
}).open();
|
||||
|
||||
return false;
|
||||
});
|
||||
})(jQuery);
|
||||
Reference in a new issue