diff options
Diffstat (limited to 'plugins/jetpack/modules/videopress/js/editor-view.js')
| -rw-r--r-- | plugins/jetpack/modules/videopress/js/editor-view.js | 303 |
1 files changed, 303 insertions, 0 deletions
diff --git a/plugins/jetpack/modules/videopress/js/editor-view.js b/plugins/jetpack/modules/videopress/js/editor-view.js new file mode 100644 index 00000000..2b9c2873 --- /dev/null +++ b/plugins/jetpack/modules/videopress/js/editor-view.js @@ -0,0 +1,303 @@ +/* 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 ); |