editor-view.js
7 years ago
gutenberg-video-upload.js
6 years ago
media-video-widget-extensions.js
7 years ago
videopress-plupload.js
7 years ago
videopress-uploader.js
7 years ago
editor-view.js
304 lines
| 1 | /* global tinyMCE, vpEditorView */ |
| 2 | ( function( $, wp, vpEditorView ) { |
| 3 | wp.mce = wp.mce || {}; |
| 4 | if ( 'undefined' === typeof wp.mce.views ) { |
| 5 | return; |
| 6 | } |
| 7 | wp.mce.videopress_wp_view_renderer = { |
| 8 | shortcode_string: 'videopress', |
| 9 | shortcode_data: {}, |
| 10 | defaults: { |
| 11 | w: '', |
| 12 | at: '', |
| 13 | permalink: true, |
| 14 | hd: false, |
| 15 | loop: false, |
| 16 | freedom: false, |
| 17 | autoplay: false, |
| 18 | flashonly: false, |
| 19 | }, |
| 20 | coerce: wp.media.coerce, |
| 21 | template: wp.template( 'videopress_iframe_vnext' ), |
| 22 | getContent: function() { |
| 23 | var urlargs = 'for=' + encodeURIComponent( vpEditorView.home_url_host ), |
| 24 | named = this.shortcode.attrs.named, |
| 25 | options, |
| 26 | key, |
| 27 | width; |
| 28 | |
| 29 | for ( key in named ) { |
| 30 | switch ( key ) { |
| 31 | case 'at': |
| 32 | if ( parseInt( named[ key ], 10 ) ) { |
| 33 | urlargs += '&' + key + '=' + parseInt( named[ key ], 10 ); |
| 34 | } // Else omit, as it's the default. |
| 35 | break; |
| 36 | case 'permalink': |
| 37 | if ( 'false' === named[ key ] ) { |
| 38 | urlargs += '&' + key + '=0'; |
| 39 | } // Else omit, as it's the default. |
| 40 | break; |
| 41 | case 'hd': |
| 42 | case 'loop': |
| 43 | case 'autoplay': |
| 44 | if ( 'true' === named[ key ] ) { |
| 45 | urlargs += '&' + key + '=1'; |
| 46 | } // Else omit, as it's the default. |
| 47 | break; |
| 48 | default: |
| 49 | // Unknown parameters? Ditch it! |
| 50 | break; |
| 51 | } |
| 52 | } |
| 53 | |
| 54 | options = { |
| 55 | width: vpEditorView.content_width, |
| 56 | height: vpEditorView.content_width * 0.5625, |
| 57 | guid: this.shortcode.attrs.numeric[ 0 ], |
| 58 | urlargs: urlargs, |
| 59 | }; |
| 60 | |
| 61 | if ( typeof named.w !== 'undefined' ) { |
| 62 | width = parseInt( named.w, 10 ); |
| 63 | if ( width >= vpEditorView.min_content_width && width < vpEditorView.content_width ) { |
| 64 | options.width = width; |
| 65 | options.height = parseInt( width * 0.5625, 10 ); |
| 66 | } |
| 67 | } |
| 68 | |
| 69 | options.ratio = 100 * ( options.height / options.width ); |
| 70 | |
| 71 | return this.template( options ); |
| 72 | }, |
| 73 | edit: function( data ) { |
| 74 | var shortcode_data = wp.shortcode.next( this.shortcode_string, data ), |
| 75 | named = shortcode_data.shortcode.attrs.named, |
| 76 | editor = tinyMCE.activeEditor, |
| 77 | renderer = this, |
| 78 | oldRenderFormItem = tinyMCE.ui.FormItem.prototype.renderHtml; |
| 79 | |
| 80 | /** |
| 81 | * Override TextBox renderHtml to support html5 attrs. |
| 82 | * @link https://github.com/tinymce/tinymce/pull/2784 |
| 83 | * |
| 84 | * @returns {string} |
| 85 | */ |
| 86 | tinyMCE.ui.TextBox.prototype.renderHtml = function() { |
| 87 | var self = this, |
| 88 | settings = self.settings, |
| 89 | element = document.createElement( settings.multiline ? 'textarea' : 'input' ), |
| 90 | extraAttrs = [ |
| 91 | 'rows', |
| 92 | 'spellcheck', |
| 93 | 'maxLength', |
| 94 | 'size', |
| 95 | 'readonly', |
| 96 | 'min', |
| 97 | 'max', |
| 98 | 'step', |
| 99 | 'list', |
| 100 | 'pattern', |
| 101 | 'placeholder', |
| 102 | 'required', |
| 103 | 'multiple', |
| 104 | ], |
| 105 | i, |
| 106 | key; |
| 107 | |
| 108 | for ( i = 0; i < extraAttrs.length; i++ ) { |
| 109 | key = extraAttrs[ i ]; |
| 110 | if ( typeof settings[ key ] !== 'undefined' ) { |
| 111 | element.setAttribute( key, settings[ key ] ); |
| 112 | } |
| 113 | } |
| 114 | |
| 115 | if ( settings.multiline ) { |
| 116 | element.innerText = self.state.get( 'value' ); |
| 117 | } else { |
| 118 | element.setAttribute( 'type', settings.subtype ? settings.subtype : 'text' ); |
| 119 | element.setAttribute( 'value', self.state.get( 'value' ) ); |
| 120 | } |
| 121 | |
| 122 | element.id = self._id; |
| 123 | element.className = self.classes; |
| 124 | element.setAttribute( 'hidefocus', 1 ); |
| 125 | if ( self.disabled() ) { |
| 126 | element.disabled = true; |
| 127 | } |
| 128 | |
| 129 | return element.outerHTML; |
| 130 | }; |
| 131 | |
| 132 | tinyMCE.ui.FormItem.prototype.renderHtml = function() { |
| 133 | _.each( |
| 134 | vpEditorView.modal_labels, |
| 135 | function( value, key ) { |
| 136 | if ( value === this.settings.items.text ) { |
| 137 | this.classes.add( 'videopress-field-' + key ); |
| 138 | } |
| 139 | }, |
| 140 | this |
| 141 | ); |
| 142 | |
| 143 | if ( |
| 144 | _.contains( |
| 145 | [ |
| 146 | vpEditorView.modal_labels.hd, |
| 147 | vpEditorView.modal_labels.permalink, |
| 148 | vpEditorView.modal_labels.autoplay, |
| 149 | vpEditorView.modal_labels.loop, |
| 150 | vpEditorView.modal_labels.freedom, |
| 151 | vpEditorView.modal_labels.flashonly, |
| 152 | ], |
| 153 | this.settings.items.text |
| 154 | ) |
| 155 | ) { |
| 156 | this.classes.add( 'videopress-checkbox' ); |
| 157 | } |
| 158 | return oldRenderFormItem.call( this ); |
| 159 | }; |
| 160 | |
| 161 | /** |
| 162 | * Populate the defaults. |
| 163 | */ |
| 164 | _.each( |
| 165 | this.defaults, |
| 166 | function( value, key ) { |
| 167 | named[ key ] = this.coerce( named, key ); |
| 168 | }, |
| 169 | this |
| 170 | ); |
| 171 | |
| 172 | /** |
| 173 | * Declare the fields that will show in the popup when editing the shortcode. |
| 174 | */ |
| 175 | editor.windowManager.open( { |
| 176 | title: vpEditorView.modal_labels.title, |
| 177 | id: 'videopress-shortcode-settings-modal', |
| 178 | width: 520, |
| 179 | height: 240, |
| 180 | body: [ |
| 181 | { |
| 182 | type: 'textbox', |
| 183 | disabled: true, |
| 184 | name: 'guid', |
| 185 | label: vpEditorView.modal_labels.guid, |
| 186 | value: shortcode_data.shortcode.attrs.numeric[ 0 ], |
| 187 | }, |
| 188 | { |
| 189 | type: 'textbox', |
| 190 | subtype: 'number', |
| 191 | min: vpEditorView.min_content_width, // The `min` may supported be in the future. https://github.com/tinymce/tinymce/pull/2784 |
| 192 | name: 'w', |
| 193 | label: vpEditorView.modal_labels.w, |
| 194 | value: named.w, |
| 195 | }, |
| 196 | { |
| 197 | type: 'textbox', |
| 198 | subtype: 'number', |
| 199 | min: 0, // The `min` may supported be in the future. https://github.com/tinymce/tinymce/pull/2784 |
| 200 | name: 'at', |
| 201 | label: vpEditorView.modal_labels.at, |
| 202 | value: named.at, |
| 203 | }, |
| 204 | { |
| 205 | type: 'checkbox', |
| 206 | name: 'hd', |
| 207 | label: vpEditorView.modal_labels.hd, |
| 208 | checked: named.hd, |
| 209 | }, |
| 210 | { |
| 211 | type: 'checkbox', |
| 212 | name: 'permalink', |
| 213 | label: vpEditorView.modal_labels.permalink, |
| 214 | checked: named.permalink, |
| 215 | }, |
| 216 | { |
| 217 | type: 'checkbox', |
| 218 | name: 'autoplay', |
| 219 | label: vpEditorView.modal_labels.autoplay, |
| 220 | checked: named.autoplay, |
| 221 | }, |
| 222 | { |
| 223 | type: 'checkbox', |
| 224 | name: 'loop', |
| 225 | label: vpEditorView.modal_labels.loop, |
| 226 | checked: named.loop, |
| 227 | }, |
| 228 | { |
| 229 | type: 'checkbox', |
| 230 | name: 'freedom', |
| 231 | label: vpEditorView.modal_labels.freedom, |
| 232 | checked: named.freedom, |
| 233 | }, |
| 234 | { |
| 235 | type: 'checkbox', |
| 236 | name: 'flashonly', |
| 237 | label: vpEditorView.modal_labels.flashonly, |
| 238 | checked: named.flashonly, |
| 239 | }, |
| 240 | ], |
| 241 | onsubmit: function( e ) { |
| 242 | var args = { |
| 243 | tag: renderer.shortcode_string, |
| 244 | type: 'single', |
| 245 | attrs: { |
| 246 | named: _.pick( e.data, _.keys( renderer.defaults ) ), |
| 247 | numeric: [ e.data.guid ], |
| 248 | }, |
| 249 | }; |
| 250 | |
| 251 | if ( '0' === args.attrs.named.at ) { |
| 252 | args.attrs.named.at = ''; |
| 253 | } |
| 254 | |
| 255 | _.each( |
| 256 | renderer.defaults, |
| 257 | function( value, key ) { |
| 258 | args.attrs.named[ key ] = this.coerce( args.attrs.named, key ); |
| 259 | |
| 260 | if ( value === args.attrs.named[ key ] ) { |
| 261 | delete args.attrs.named[ key ]; |
| 262 | } |
| 263 | }, |
| 264 | renderer |
| 265 | ); |
| 266 | |
| 267 | editor.insertContent( wp.shortcode.string( args ) ); |
| 268 | }, |
| 269 | onopen: function( e ) { |
| 270 | var prefix = 'mce-videopress-field-'; |
| 271 | _.each( [ 'w', 'at' ], function( value ) { |
| 272 | e.target.$el |
| 273 | .find( '.' + prefix + value + ' .mce-container-body' ) |
| 274 | .append( |
| 275 | '<span class="' + |
| 276 | prefix + |
| 277 | 'unit ' + |
| 278 | prefix + |
| 279 | 'unit-' + |
| 280 | value + |
| 281 | '">' + |
| 282 | vpEditorView.modal_labels[ value + '_unit' ] |
| 283 | ); |
| 284 | } ); |
| 285 | $( 'body' ).addClass( 'modal-open' ); |
| 286 | }, |
| 287 | onclose: function() { |
| 288 | $( 'body' ).removeClass( 'modal-open' ); |
| 289 | }, |
| 290 | } ); |
| 291 | |
| 292 | // Set it back to its original renderer. |
| 293 | tinyMCE.ui.FormItem.prototype.renderHtml = oldRenderFormItem; |
| 294 | }, |
| 295 | }; |
| 296 | wp.mce.views.register( 'videopress', wp.mce.videopress_wp_view_renderer ); |
| 297 | |
| 298 | // Extend the videopress one to also handle `wpvideo` instances. |
| 299 | wp.mce.wpvideo_wp_view_renderer = _.extend( {}, wp.mce.videopress_wp_view_renderer, { |
| 300 | shortcode_string: 'wpvideo', |
| 301 | } ); |
| 302 | wp.mce.views.register( 'wpvideo', wp.mce.wpvideo_wp_view_renderer ); |
| 303 | } )( jQuery, wp, vpEditorView ); |
| 304 |