editor-view.js
7 months ago
gutenberg-video-upload.js
4 months ago
media-video-widget-extensions.js
5 years ago
videopress-add-resumable-upload-support.js
4 years ago
videopress-plupload.js
7 months ago
videopress-uploader.js
1 month ago
editor-view.js
292 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 | * @return {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 | for ( const [ key, value ] of Object.entries( vpEditorView.modal_labels ) ) { |
| 134 | if ( value === this.settings.items.text ) { |
| 135 | this.classes.add( 'videopress-field-' + key ); |
| 136 | } |
| 137 | } |
| 138 | |
| 139 | if ( |
| 140 | [ |
| 141 | vpEditorView.modal_labels.hd, |
| 142 | vpEditorView.modal_labels.permalink, |
| 143 | vpEditorView.modal_labels.autoplay, |
| 144 | vpEditorView.modal_labels.loop, |
| 145 | vpEditorView.modal_labels.freedom, |
| 146 | vpEditorView.modal_labels.flashonly, |
| 147 | ].includes( this.settings.items.text ) |
| 148 | ) { |
| 149 | this.classes.add( 'videopress-checkbox' ); |
| 150 | } |
| 151 | return oldRenderFormItem.call( this ); |
| 152 | }; |
| 153 | |
| 154 | /** |
| 155 | * Populate the defaults. |
| 156 | */ |
| 157 | for ( const [ key ] of Object.entries( this.defaults ) ) { |
| 158 | named[ key ] = this.coerce( named, key ); |
| 159 | } |
| 160 | |
| 161 | /** |
| 162 | * Declare the fields that will show in the popup when editing the shortcode. |
| 163 | */ |
| 164 | editor.windowManager.open( { |
| 165 | title: vpEditorView.modal_labels.title, |
| 166 | id: 'videopress-shortcode-settings-modal', |
| 167 | width: 520, |
| 168 | height: 240, |
| 169 | body: [ |
| 170 | { |
| 171 | type: 'textbox', |
| 172 | disabled: true, |
| 173 | name: 'guid', |
| 174 | label: vpEditorView.modal_labels.guid, |
| 175 | value: shortcode_data.shortcode.attrs.numeric[ 0 ], |
| 176 | }, |
| 177 | { |
| 178 | type: 'textbox', |
| 179 | subtype: 'number', |
| 180 | min: vpEditorView.min_content_width, // The `min` may supported be in the future. https://github.com/tinymce/tinymce/pull/2784 |
| 181 | name: 'w', |
| 182 | label: vpEditorView.modal_labels.w, |
| 183 | value: named.w, |
| 184 | }, |
| 185 | { |
| 186 | type: 'textbox', |
| 187 | subtype: 'number', |
| 188 | min: 0, // The `min` may supported be in the future. https://github.com/tinymce/tinymce/pull/2784 |
| 189 | name: 'at', |
| 190 | label: vpEditorView.modal_labels.at, |
| 191 | value: named.at, |
| 192 | }, |
| 193 | { |
| 194 | type: 'checkbox', |
| 195 | name: 'hd', |
| 196 | label: vpEditorView.modal_labels.hd, |
| 197 | checked: named.hd, |
| 198 | }, |
| 199 | { |
| 200 | type: 'checkbox', |
| 201 | name: 'permalink', |
| 202 | label: vpEditorView.modal_labels.permalink, |
| 203 | checked: named.permalink, |
| 204 | }, |
| 205 | { |
| 206 | type: 'checkbox', |
| 207 | name: 'autoplay', |
| 208 | label: vpEditorView.modal_labels.autoplay, |
| 209 | checked: named.autoplay, |
| 210 | }, |
| 211 | { |
| 212 | type: 'checkbox', |
| 213 | name: 'loop', |
| 214 | label: vpEditorView.modal_labels.loop, |
| 215 | checked: named.loop, |
| 216 | }, |
| 217 | { |
| 218 | type: 'checkbox', |
| 219 | name: 'freedom', |
| 220 | label: vpEditorView.modal_labels.freedom, |
| 221 | checked: named.freedom, |
| 222 | }, |
| 223 | { |
| 224 | type: 'checkbox', |
| 225 | name: 'flashonly', |
| 226 | label: vpEditorView.modal_labels.flashonly, |
| 227 | checked: named.flashonly, |
| 228 | }, |
| 229 | ], |
| 230 | onsubmit: function ( e ) { |
| 231 | var args = { |
| 232 | tag: renderer.shortcode_string, |
| 233 | type: 'single', |
| 234 | attrs: { |
| 235 | named: Object.fromEntries( |
| 236 | Object.entries( e.data ).filter( ( [ k ] ) => k in renderer.defaults ) |
| 237 | ), |
| 238 | numeric: [ e.data.guid ], |
| 239 | }, |
| 240 | }; |
| 241 | |
| 242 | if ( '0' === args.attrs.named.at ) { |
| 243 | args.attrs.named.at = ''; |
| 244 | } |
| 245 | |
| 246 | for ( const [ key, value ] of Object.entries( renderer.defaults ) ) { |
| 247 | args.attrs.named[ key ] = renderer.coerce( args.attrs.named, key ); |
| 248 | |
| 249 | if ( value === args.attrs.named[ key ] ) { |
| 250 | delete args.attrs.named[ key ]; |
| 251 | } |
| 252 | } |
| 253 | |
| 254 | editor.insertContent( wp.shortcode.string( args ) ); |
| 255 | }, |
| 256 | onopen: function ( e ) { |
| 257 | var prefix = 'mce-videopress-field-'; |
| 258 | for ( const value of [ 'w', 'at' ] ) { |
| 259 | e.target.$el |
| 260 | .find( '.' + prefix + value + ' .mce-container-body' ) |
| 261 | .append( |
| 262 | '<span class="' + |
| 263 | prefix + |
| 264 | 'unit ' + |
| 265 | prefix + |
| 266 | 'unit-' + |
| 267 | value + |
| 268 | '">' + |
| 269 | vpEditorView.modal_labels[ value + '_unit' ] |
| 270 | ); |
| 271 | } |
| 272 | $( 'body' ).addClass( 'modal-open' ); |
| 273 | }, |
| 274 | onclose: function () { |
| 275 | $( 'body' ).removeClass( 'modal-open' ); |
| 276 | }, |
| 277 | } ); |
| 278 | |
| 279 | // Set it back to its original renderer. |
| 280 | tinyMCE.ui.FormItem.prototype.renderHtml = oldRenderFormItem; |
| 281 | }, |
| 282 | }; |
| 283 | |
| 284 | // Extend the videopress one to also handle `wpvideo` instances. |
| 285 | wp.mce.wpvideo_wp_view_renderer = Object.assign( {}, wp.mce.videopress_wp_view_renderer, { |
| 286 | shortcode_string: 'wpvideo', |
| 287 | } ); |
| 288 | |
| 289 | wp.mce.views.register( 'videopress', wp.mce.videopress_wp_view_renderer ); |
| 290 | wp.mce.views.register( 'wpvideo', wp.mce.wpvideo_wp_view_renderer ); |
| 291 | } )( jQuery, wp, vpEditorView ); |
| 292 |