diff options
Diffstat (limited to 'plugins/jetpack/modules/videopress/js/editor-view.js')
| -rw-r--r-- | plugins/jetpack/modules/videopress/js/editor-view.js | 261 |
1 files changed, 261 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..c77f5b6a --- /dev/null +++ b/plugins/jetpack/modules/videopress/js/editor-view.js @@ -0,0 +1,261 @@ +/* global tinyMCE, vpEditorView */ +(function( $, wp, vpEditorView ){ + wp.mce = wp.mce || {}; + 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 )); |