Ticket #31412: 31412.patch
File 31412.patch, 41.9 KB (added by , 9 years ago) |
---|
-
src/wp-includes/js/mce-view.js
1 1 /* global tinymce */ 2 /** 2 3 /* 4 * The TinyMCE view API. 5 * 3 6 * Note: this API is "experimental" meaning that it will probably change 4 7 * in the next few releases based on feedback from 3.9.0. 5 8 * If you decide to use it, please follow the development closely. 6 9 */ 7 8 // Ensure the global `wp` object exists.9 window.wp = window.wp || {};10 11 10 ( function( $ ) { 12 11 'use strict'; 13 12 14 13 var views = {}, 15 instances = {}, 16 media = wp.media, 17 mediaWindows = [], 18 windowIdx = 0, 19 waitInterval = 50, 20 viewOptions = ['encodedText']; 14 instances = {}; 21 15 22 // Create the `wp.mce` object if necessary.16 window.wp = window.wp || {}; 23 17 wp.mce = wp.mce || {}; 24 18 25 19 /** 26 * wp.mce.View27 *28 * A Backbone-like View constructor intended for use when rendering a TinyMCE View. The main difference is29 * that the TinyMCE View is not tied to a particular DOM node.30 *31 * @param {Object} [options={}]32 */33 wp.mce.View = function( options ) {34 options = options || {};35 this.type = options.type;36 _.extend( this, _.pick( options, viewOptions ) );37 this.initialize.apply( this, arguments );38 };39 40 _.extend( wp.mce.View.prototype, {41 initialize: function() {},42 getHtml: function() {43 return '';44 },45 loadingPlaceholder: function() {46 return '' +47 '<div class="loading-placeholder">' +48 '<div class="dashicons dashicons-admin-media"></div>' +49 '<div class="wpview-loading"><ins></ins></div>' +50 '</div>';51 },52 render: function( force ) {53 if ( force || ! this.rendered() ) {54 this.unbind();55 56 this.setContent(57 '<p class="wpview-selection-before">\u00a0</p>' +58 '<div class="wpview-body" contenteditable="false">' +59 '<div class="toolbar mce-arrow-down">' +60 ( _.isFunction( views[ this.type ].edit ) ? '<div class="dashicons dashicons-edit edit"></div>' : '' ) +61 '<div class="dashicons dashicons-no remove"></div>' +62 '</div>' +63 '<div class="wpview-content wpview-type-' + this.type + '">' +64 ( this.getHtml() || this.loadingPlaceholder() ) +65 '</div>' +66 ( this.overlay ? '<div class="wpview-overlay"></div>' : '' ) +67 '</div>' +68 '<p class="wpview-selection-after">\u00a0</p>',69 'wrap'70 );71 72 $( this ).trigger( 'ready' );73 74 this.rendered( true );75 }76 },77 unbind: function() {},78 getEditors: function( callback ) {79 var editors = [];80 81 _.each( tinymce.editors, function( editor ) {82 if ( editor.plugins.wpview ) {83 if ( callback ) {84 callback( editor );85 }86 87 editors.push( editor );88 }89 }, this );90 91 return editors;92 },93 getNodes: function( callback ) {94 var nodes = [],95 self = this;96 97 this.getEditors( function( editor ) {98 $( editor.getBody() )99 .find( '[data-wpview-text="' + self.encodedText + '"]' )100 .each( function ( i, node ) {101 if ( callback ) {102 callback( editor, node, $( node ).find( '.wpview-content' ).get( 0 ) );103 }104 105 nodes.push( node );106 } );107 } );108 109 return nodes;110 },111 setContent: function( html, option ) {112 this.getNodes( function ( editor, node, content ) {113 var el = ( option === 'wrap' || option === 'replace' ) ? node : content,114 insert = html;115 116 if ( _.isString( insert ) ) {117 insert = editor.dom.createFragment( insert );118 }119 120 if ( option === 'replace' ) {121 editor.dom.replace( insert, el );122 } else {123 el.innerHTML = '';124 el.appendChild( insert );125 }126 } );127 },128 /* jshint scripturl: true */129 setIframes: function ( head, body ) {130 var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver,131 importStyles = this.type === 'video' || this.type === 'audio' || this.type === 'playlist';132 133 if ( head || body.indexOf( '<script' ) !== -1 ) {134 this.getNodes( function ( editor, node, content ) {135 var dom = editor.dom,136 styles = '',137 bodyClasses = editor.getBody().className || '',138 iframe, iframeDoc, i, resize;139 140 content.innerHTML = '';141 head = head || '';142 143 if ( importStyles ) {144 if ( ! wp.mce.views.sandboxStyles ) {145 tinymce.each( dom.$( 'link[rel="stylesheet"]', editor.getDoc().head ), function( link ) {146 if ( link.href && link.href.indexOf( 'skins/lightgray/content.min.css' ) === -1 &&147 link.href.indexOf( 'skins/wordpress/wp-content.css' ) === -1 ) {148 149 styles += dom.getOuterHTML( link ) + '\n';150 }151 });152 153 wp.mce.views.sandboxStyles = styles;154 } else {155 styles = wp.mce.views.sandboxStyles;156 }157 }158 159 // Seems Firefox needs a bit of time to insert/set the view nodes, or the iframe will fail160 // especially when switching Text => Visual.161 setTimeout( function() {162 iframe = dom.add( content, 'iframe', {163 src: tinymce.Env.ie ? 'javascript:""' : '',164 frameBorder: '0',165 allowTransparency: 'true',166 scrolling: 'no',167 'class': 'wpview-sandbox',168 style: {169 width: '100%',170 display: 'block'171 }172 } );173 174 iframeDoc = iframe.contentWindow.document;175 176 iframeDoc.open();177 iframeDoc.write(178 '<!DOCTYPE html>' +179 '<html>' +180 '<head>' +181 '<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />' +182 head +183 styles +184 '<style>' +185 'html {' +186 'background: transparent;' +187 'padding: 0;' +188 'margin: 0;' +189 '}' +190 'body#wpview-iframe-sandbox {' +191 'background: transparent;' +192 'padding: 1px 0 !important;' +193 'margin: -1px 0 0 !important;' +194 '}' +195 'body#wpview-iframe-sandbox:before,' +196 'body#wpview-iframe-sandbox:after {' +197 'display: none;' +198 'content: "";' +199 '}' +200 '</style>' +201 '</head>' +202 '<body id="wpview-iframe-sandbox" class="' + bodyClasses + '">' +203 body +204 '</body>' +205 '</html>'206 );207 iframeDoc.close();208 209 resize = function() {210 var $iframe, iframeDocHeight;211 212 // Make sure the iframe still exists.213 if ( iframe.contentWindow ) {214 $iframe = $( iframe );215 iframeDocHeight = $( iframeDoc.body ).height();216 217 if ( $iframe.height() !== iframeDocHeight ) {218 $iframe.height( iframeDocHeight );219 editor.nodeChanged();220 }221 }222 };223 224 if ( MutationObserver ) {225 new MutationObserver( _.debounce( function() {226 resize();227 }, 100 ) )228 .observe( iframeDoc.body, {229 attributes: true,230 childList: true,231 subtree: true232 } );233 } else {234 for ( i = 1; i < 6; i++ ) {235 setTimeout( resize, i * 700 );236 }237 }238 239 if ( importStyles ) {240 editor.on( 'wp-body-class-change', function() {241 iframeDoc.body.className = editor.getBody().className;242 });243 }244 }, waitInterval );245 });246 } else {247 this.setContent( body );248 }249 },250 setError: function( message, dashicon ) {251 this.setContent(252 '<div class="wpview-error">' +253 '<div class="dashicons dashicons-' + ( dashicon ? dashicon : 'no' ) + '"></div>' +254 '<p>' + message + '</p>' +255 '</div>'256 );257 },258 rendered: function( value ) {259 var notRendered;260 261 this.getNodes( function( editor, node ) {262 if ( value != null ) {263 $( node ).data( 'rendered', value === true );264 } else {265 notRendered = notRendered || ! $( node ).data( 'rendered' );266 }267 } );268 269 return ! notRendered;270 }271 } );272 273 // take advantage of the Backbone extend method274 wp.mce.View.extend = Backbone.View.extend;275 276 /**277 20 * wp.mce.views 278 21 * 279 22 * A set of utilities that simplifies adding custom UI within a TinyMCE editor. … … 283 26 wp.mce.views = { 284 27 285 28 /** 286 * wp.mce.views.register( type, view )287 *288 29 * Registers a new TinyMCE view. 289 30 * 290 * @param type 291 * @param constructor 292 * 31 * @param {String} The view type. 32 * @param {Object} Options. 293 33 */ 294 register: function( type, constructor ) { 295 var defaultConstructor = { 296 type: type, 297 View: {}, 298 toView: function( content ) { 299 var match = wp.shortcode.next( this.type, content ); 34 register: function( type, options ) { 35 if ( ! options.View ) { 36 options = { View: options }; 300 37 301 if ( ! match ) { 302 return; 303 } 38 if ( options.View.toView ) { 39 options.toView = options.View.toView; 40 delete options.View.toView; 41 } 42 } 304 43 305 return { 306 index: match.index, 307 content: match.content, 308 options: { 309 shortcode: match.shortcode 310 } 311 }; 44 options = _.defaults( options, { 45 type: type, 46 View: {}, 47 toView: function( content ) { 48 var match = wp.shortcode.next( this.type, content ); 49 50 if ( ! match ) { 51 return; 312 52 } 313 };314 53 315 constructor = _.defaults( constructor, defaultConstructor ); 316 constructor.View = wp.mce.View.extend( constructor.View ); 54 return { 55 index: match.index, 56 content: match.content, 57 options: { 58 shortcode: match.shortcode 59 } 60 }; 61 } 62 } ); 317 63 318 views[ type ] = constructor; 319 }, 64 options.View = wp.mce.View.extend( options.View ); 320 65 321 /** 322 * wp.mce.views.get( id ) 323 * 324 * Returns a TinyMCE view constructor. 325 * 326 * @param type 327 */ 328 get: function( type ) { 329 return views[ type ]; 66 views[ type ] = options; 330 67 }, 331 68 332 69 /** 333 * wp.mce.views.unregister( type )334 *335 70 * Unregisters a TinyMCE view. 336 71 * 337 * @param type72 * @param {String} The view type. 338 73 */ 339 74 unregister: function( type ) { 340 75 delete views[ type ]; 341 76 }, 342 77 343 78 /** 344 * wp.mce.views.unbind( editor )79 * Returns a TinyMCE view constructor. 345 80 * 81 * @param {String} The view type. 82 */ 83 get: function( type ) { 84 return views[ type ]; 85 }, 86 87 /** 346 88 * The editor DOM is being rebuilt, run cleanup. 347 89 */ 348 90 unbind: function() { … … 352 94 }, 353 95 354 96 /** 355 * toViews( content )356 * Scans a `content` string for each view's pattern, replacing any357 * matches with wrapper elements, and creates a new instance for358 * every match,which triggers the related data to be fetched.97 * Scans a given string for each view's pattern, 98 * replacing any matches with markers, 99 * and creates a new instance for every match, 100 * which triggers the related data to be fetched. 359 101 * 360 * @param content102 * @param {String} String to scan. 361 103 */ 362 104 toViews: function( content ) { 363 105 var pieces = [ { content: content } ], 364 106 current; 365 107 366 _.each( views, function( view, viewType ) {108 _.each( views, function( view, type ) { 367 109 current = pieces.slice(); 368 110 pieces = []; 369 111 … … 379 121 380 122 // Iterate through the string progressively matching views 381 123 // and slicing the string as we go. 382 while ( remaining && ( result = view.toView( remaining )) ) {124 while ( remaining && ( result = view.toView( remaining ) ) ) { 383 125 // Any text before the match becomes an unprocessed piece. 384 126 if ( result.index ) { 385 pieces.push( { content: remaining.substring( 0, result.index ) });127 pieces.push( { content: remaining.substring( 0, result.index ) } ); 386 128 } 387 129 388 130 // Add the processed piece for the match. 389 pieces.push( {390 content: wp.mce.views.toView( viewType, result.content, result.options ),131 pieces.push( { 132 content: wp.mce.views.toView( type, result.content, result.options ), 391 133 processed: true 392 } );134 } ); 393 135 394 136 // Update the remaining content. 395 137 remaining = remaining.slice( result.index + result.content.length ); … … 398 140 // There are no additional matches. If any content remains, 399 141 // add it as an unprocessed piece. 400 142 if ( remaining ) { 401 pieces.push( { content: remaining });143 pieces.push( { content: remaining } ); 402 144 } 403 } );404 } );145 } ); 146 } ); 405 147 406 return _.pluck( pieces, 'content' ).join( '');148 return _.pluck( pieces, 'content' ).join( '' ); 407 149 }, 408 150 409 151 /** 410 * Create a placeholder for a particular view type 411 * 412 * @param viewType 413 * @param text 414 * @param options 152 * Returns the marked text for a particular view type, 153 * and creates a new instance for that view type if it does not exist. 154 * The text will be returned unmarked if no view of that type is registered. 155 * 156 * @param {String} The view type. 157 * @param {String} The textual representation of the view. 158 * @param {Object} Options. 415 159 * 160 * @return {String} The markered text. 416 161 */ 417 toView: function( viewType, text, options ) { 418 var view = wp.mce.views.get( viewType ), 419 encodedText = window.encodeURIComponent( text ), 420 instance, viewOptions; 421 162 toView: function( type, text, options ) { 163 var view = this.get( type ), 164 encodedText = window.encodeURIComponent( text ); 422 165 423 166 if ( ! view ) { 424 167 return text; 425 168 } 426 169 427 if ( ! wp.mce.views.getInstance( encodedText ) ) { 428 viewOptions = options; 429 viewOptions.type = viewType; 430 viewOptions.encodedText = encodedText; 431 instance = new view.View( viewOptions ); 432 instances[ encodedText ] = instance; 170 if ( ! this.getInstance( encodedText ) ) { 171 instances[ encodedText ] = new view.View( _.extend( options, { 172 encodedText: encodedText, 173 type: type 174 } ) ); 433 175 } 434 176 435 return wp.html.string({ 436 tag: 'div', 437 438 attrs: { 439 'class': 'wpview-wrap', 440 'data-wpview-text': encodedText, 441 'data-wpview-type': viewType 442 }, 443 444 content: '\u00a0' 445 }); 177 return '<p data-wpview-marker="' + encodedText + '">' + text + '</p>'; 446 178 }, 447 179 448 180 /** 449 * Refresh views after an update is made 181 * Refresh views after an update is made. 450 182 * 451 * @param view {object} being refreshed452 * @param text {string} textual representation of the view453 * @param force {Boolean} whether to force rendering183 * @param {Object} The view to refresh. 184 * @param {String} The textual representation of the view. 185 * @param {Boolean} Whether or not to force rendering. 454 186 */ 455 187 refreshView: function( view, text, force ) { 456 var encodedText = window.encodeURIComponent( text ), 457 viewOptions, 458 result, instance; 459 460 instance = wp.mce.views.getInstance( encodedText ); 461 462 if ( ! instance ) { 463 result = view.toView( text ); 464 viewOptions = result.options; 465 viewOptions.type = view.type; 466 viewOptions.encodedText = encodedText; 467 instance = new view.View( viewOptions ); 468 instances[ encodedText ] = instance; 188 var encodedText = encodeURIComponent( text ); 189 190 if ( ! this.getInstance( encodedText ) ) { 191 instances[ encodedText ] = new view.View( _.extend( view.toView( text ).options, { 192 encodedText: encodedText, 193 type: view.type 194 } ) ); 469 195 } 470 196 471 instance .render( force );197 instances[ encodedText ].render( force ); 472 198 }, 473 199 200 /** 201 * @param {String} The textual representation of the view, encoded. 202 */ 474 203 getInstance: function( encodedText ) { 475 204 return instances[ encodedText ]; 476 205 }, 477 206 478 207 /** 479 * render( scope )208 * Renders any view instances. 480 209 * 481 * Renders any view instances inside a DOM node `scope`. 210 * View instances are detected by the presence of markers. 211 * To generate markers, pass your content through `toViews`. 482 212 * 483 * View instances are detected by the presence of wrapper elements. 484 * To generate wrapper elements, pass your content through 485 * `wp.mce.view.toViews( content )`. 213 * @param {Boolean} Whether or not to force rendering. 486 214 */ 487 215 render: function( force ) { 488 216 _.each( instances, function( instance ) { … … 490 218 } ); 491 219 }, 492 220 493 edit: function( node ) { 494 var viewType = $( node ).data('wpview-type'), 495 view = wp.mce.views.get( viewType ); 221 /** 222 * @param {HTMLElement} A view node. 223 */ 224 edit: function( editor, node ) { 225 var instance = this.getInstance( $( node ).data( 'wpview-text' ) ), 226 view = wp.mce.views.get( instance.type ), 227 self = this; 496 228 497 if ( view ) {229 if ( view && view.edit ) { 498 230 view.edit( node ); 231 } else if ( instance && instance.edit ) { 232 instance.edit( decodeURIComponent( instance.encodedText ), function( text ) { 233 $( node ).data( 'rendered', false ); 234 editor.dom.setAttrib( node, 'data-wpview-text', encodeURIComponent( text ) ); 235 self.refreshView( view, text ); 236 } ); 499 237 } 500 238 } 501 239 }; 502 240 503 wp.mce.views.register( 'gallery', { 504 View: { 505 template: media.template( 'editor-gallery' ), 506 507 // The fallback post ID to use as a parent for galleries that don't 508 // specify the `ids` or `include` parameters. 509 // 510 // Uses the hidden input on the edit posts page by default. 511 postID: $('#post_ID').val(), 512 513 initialize: function( options ) { 514 this.shortcode = options.shortcode; 515 this.fetch(); 516 }, 241 /** 242 * A Backbone-like View constructor intended for use when rendering a TinyMCE View. The main difference is 243 * that the TinyMCE View is not tied to a particular DOM node. 244 * 245 * @param {Object} Options. 246 */ 247 wp.mce.View = function( options ) { 248 _.extend( this, options || {} ); 249 this.initialize.apply( this, arguments ); 250 }; 517 251 518 fetch: function() { 519 var self = this; 252 _.extend( wp.mce.View.prototype, { 520 253 521 this.attachments = wp.media.gallery.attachments( this.shortcode, this.postID ); 522 this.dfd = this.attachments.more().done( function() { 523 self.render( true ); 524 } ); 525 }, 254 /** 255 * Whether or not to display a loader. 256 * 257 * @type {Boolean} 258 */ 259 loader: true, 526 260 527 getHtml: function() { 528 var attrs = this.shortcode.attrs.named, 529 attachments = false, 530 options; 531 532 // Don't render errors while still fetching attachments 533 if ( this.dfd && 'pending' === this.dfd.state() && ! this.attachments.length ) { 534 return ''; 535 } 536 537 if ( this.attachments.length ) { 538 attachments = this.attachments.toJSON(); 539 540 _.each( attachments, function( attachment ) { 541 if ( attachment.sizes ) { 542 if ( attrs.size && attachment.sizes[ attrs.size ] ) { 543 attachment.thumbnail = attachment.sizes[ attrs.size ]; 544 } else if ( attachment.sizes.thumbnail ) { 545 attachment.thumbnail = attachment.sizes.thumbnail; 546 } else if ( attachment.sizes.full ) { 547 attachment.thumbnail = attachment.sizes.full; 548 } 549 } 550 } ); 551 } 261 /** 262 * Runs after the view instance is created. 263 */ 264 initialize: function() {}, 265 266 /** 267 * Retuns the HTML string to render in the view. 268 * 269 * @return {*} 270 */ 271 getHtml: function() {}, 272 273 /** 274 * Retuns the HTML string to render in the view. 275 * 276 * @param {Boolean} Whether or not to rerender. 277 */ 278 render: function( rerender ) { 279 var i = 0; 280 281 // If there's nothing to render an no loader needs to be shown, stop. 282 if ( ! this.loader && ! this.getHtml() ) { 283 return; 284 } 285 286 // We're about to rerender all views of this instance, so unbind rendered views. 287 rerender && this.unbind(); 552 288 553 options = { 554 attachments: attachments, 555 columns: attrs.columns ? parseInt( attrs.columns, 10 ) : wp.media.galleryDefaults.columns 556 }; 289 // Replace any left over markers. 290 this.replaceMarkers(); 557 291 558 return this.template( options ); 292 if ( this.getHtml() ) { 293 this.setContent( this.getHtml(), function( editor, node ) { 294 $( node ).data( 'rendered', true ); 295 this.bindNodes.apply( this, arguments ); 296 i++; 297 }, rerender ? null : false ); 298 299 // Use `bindNodes` if possible. 300 i && $( this ).trigger( 'ready' ); 301 } else { 302 this.setLoader(); 559 303 } 560 304 }, 561 305 562 edit: function( node ) { 563 var gallery = wp.media.gallery, 564 self = this, 565 frame, data; 306 /** 307 * Runs after a view is added to the DOM. 308 * 309 * @param {tinymce.Editor} The editor instance the view node is in. 310 * @param {HTMLElement} The view node. 311 * @param {HTMLElement} The view's content node. 312 */ 313 bindNodes: function() {}, 566 314 567 data = window.decodeURIComponent( $( node ).attr('data-wpview-text') ); 568 frame = gallery.edit( data ); 315 /** 316 * Runs before a view is removed from the DOM. 317 */ 318 unbind: function() { 319 this.getNodes( function() { 320 this.unbindNodes.apply( this, arguments ); 321 }, true ); 322 }, 569 323 570 frame.state('gallery-edit').on( 'update', function( selection ) { 571 var shortcode = gallery.shortcode( selection ).string(); 572 $( node ).attr( 'data-wpview-text', window.encodeURIComponent( shortcode ) ); 573 wp.mce.views.refreshView( self, shortcode, true ); 574 }); 324 /** 325 * Runs before a view is removed from the DOM. 326 * 327 * @param {tinymce.Editor} The editor instance the view node is in. 328 * @param {HTMLElement} The view node. 329 * @param {HTMLElement} The view's content node. 330 */ 331 unbindNodes: function() {}, 575 332 576 frame.on( 'close', function() { 577 frame.detach(); 578 }); 579 } 580 } ); 333 /** 334 * Gets all the TinyMCE editors that support views. 335 * 336 * @param {Function} A callback (optional). 337 * 338 * @return {tinymce.Editor[]} An array of TinyMCE editor instances. 339 */ 340 getEditors: function( callback ) { 341 var editors = []; 581 342 582 /** 583 * These are base methods that are shared by the audio and video shortcode's MCE controller. 584 * 585 * @mixin 586 */ 587 wp.mce.av = { 588 View: { 589 overlay: true, 343 _.each( tinymce.editors, function( editor ) { 344 if ( editor.plugins.wpview ) { 345 editors.push( editor ); 346 callback && callback.call( this, editor ); 347 } 348 }, this ); 590 349 591 action: 'parse-media-shortcode', 350 return editors; 351 }, 592 352 593 initialize: function( options ) { 594 var self = this; 353 /** 354 * Gets all the view nodes in each editor. 355 * 356 * @param {Function} A callback (optional). 357 * @param {Boolean} Get (un)rendered nodes (optional). 358 * 359 * @return {HTMLElement[]} An array of view nodes. 360 */ 361 getNodes: function( callback, rendered ) { 362 var nodes = []; 595 363 596 this.shortcode = options.shortcode; 364 this.getEditors( function( editor ) { 365 var self = this; 597 366 598 _.bindAll( this, 'setIframes', 'setNodes', 'fetch', 'stopPlayers' ); 599 $( this ).on( 'ready', this.setNodes ); 367 $( editor.getBody() ) 368 .find( '[data-wpview-text="' + self.encodedText + '"]' ) 369 .filter( function() { 370 var data; 600 371 601 $( document ).on( 'media:edit', this.stopPlayers ); 372 if ( rendered == null ) { 373 return true; 374 } 602 375 603 this.fetch();376 data = $( this ).data( 'rendered' ) === true; 604 377 605 this.getEditors( function( editor ) {606 editor.on( 'hide', function () {607 mediaWindows = [];608 windowIdx = 0;609 self.stopPlayers();378 return rendered ? data : ! data; 379 } ) 380 .each( function( i, node ) { 381 nodes.push( node ); 382 callback && callback.call( self, editor, node, $( node ).find( '.wpview-content' ).get( 0 ) ); 610 383 } ); 611 }); 612 }, 384 } ); 613 385 614 pauseOtherWindows: function ( win ) { 615 _.each( mediaWindows, function ( mediaWindow ) { 616 if ( mediaWindow.sandboxId !== win.sandboxId ) { 617 _.each( mediaWindow.mejs.players, function ( player ) { 618 player.pause(); 619 } ); 620 } 621 } ); 622 }, 386 return nodes; 387 }, 623 388 624 iframeLoaded: function (win) { 625 return _.bind( function () { 626 var callback; 627 if ( ! win.mejs || _.isEmpty( win.mejs.players ) ) { 628 return; 629 } 389 /** 390 * Gets all the markers in each editor. 391 * 392 * @param {Function} A callback (optional). 393 * 394 * @return {HTMLElement[]} An array of marker nodes. 395 */ 396 getMarkers: function( callback ) { 397 var markers = []; 630 398 631 win.sandboxId = windowIdx; 632 windowIdx++; 633 mediaWindows.push( win ); 634 635 callback = _.bind( function () { 636 this.pauseOtherWindows( win ); 637 }, this ); 638 639 if ( ! _.isEmpty( win.mejs.MediaPluginBridge.pluginMediaElements ) ) { 640 _.each( win.mejs.MediaPluginBridge.pluginMediaElements, function ( mediaElement ) { 641 mediaElement.addEventListener( 'play', callback ); 642 } ); 643 } 399 this.getEditors( function( editor ) { 400 var self = this; 644 401 645 _.each( win.mejs.players, function ( player ) { 646 $( player.node ).on( 'play', callback ); 647 }, this ); 648 }, this ); 649 }, 650 651 listenToSandboxes: function () { 652 _.each( this.getNodes(), function ( node ) { 653 var win, iframe = $( '.wpview-sandbox', node ).get( 0 ); 654 if ( iframe && ( win = iframe.contentWindow ) ) { 655 $( win ).load( _.bind( this.iframeLoaded( win ), this ) ); 656 } 657 }, this ); 658 }, 402 $( editor.getBody() ) 403 .find( '[data-wpview-marker="' + this.encodedText + '"]' ) 404 .each( function( i, node ) { 405 markers.push( node ); 406 callback && callback.call( self, editor, node ); 407 } ); 408 } ); 659 409 660 deferredListen: function () { 661 window.setTimeout( _.bind( this.listenToSandboxes, this ), this.getNodes().length * waitInterval ); 662 }, 663 664 setNodes: function () { 665 if ( this.parsed ) { 666 this.setIframes( this.parsed.head, this.parsed.body ); 667 this.deferredListen(); 668 } else { 669 this.fail(); 410 return markers; 411 }, 412 413 /** 414 * Replaces all markers with view nodes. 415 */ 416 replaceMarkers: function() { 417 this.getMarkers( function( editor, node ) { 418 if ( $( node ).text() !== decodeURIComponent( this.encodedText ) ) { 419 editor.dom.setAttrib( node, 'data-wpview-marker', null ); 420 return; 670 421 } 671 },672 422 673 fetch: function () { 674 var self = this; 423 editor.dom.replace( 424 editor.dom.createFragment( 425 '<div class="wpview-wrap" data-wpview-text="' + this.encodedText + '" data-wpview-type="' + this.type + '">' + 426 '<p class="wpview-selection-before">\u00a0</p>' + 427 '<div class="wpview-body" contenteditable="false">' + 428 '<div class="toolbar mce-arrow-down">' + 429 ( this.edit || views[ this.type ].edit ? '<div class="dashicons dashicons-edit edit"></div>' : '' ) + 430 '<div class="dashicons dashicons-no remove"></div>' + 431 '</div>' + 432 '<div class="wpview-content wpview-type-' + this.type + '"></div>' + 433 ( this.overlay ? '<div class="wpview-overlay"></div>' : '' ) + 434 '</div>' + 435 '<p class="wpview-selection-after">\u00a0</p>' + 436 '</div>' 437 ), 438 node 439 ); 440 } ); 441 }, 675 442 676 wp.ajax.send( this.action, { 677 data: { 678 post_ID: $( '#post_ID' ).val() || 0, 679 type: this.shortcode.tag, 680 shortcode: this.shortcode.string() 681 } 682 } ) 683 .done( function( response ) { 684 if ( response ) { 685 self.parsed = response; 686 self.setIframes( response.head, response.body ); 687 self.deferredListen(); 688 } else { 689 self.fail( true ); 690 } 691 } ) 692 .fail( function( response ) { 693 self.fail( response || true ); 694 } ); 695 }, 443 /** 444 * Removes all markers. 445 */ 446 removeMarkers: function() { 447 this.getMarkers( function( editor, node ) { 448 editor.dom.setAttrib( node, 'data-wpview-marker', null ); 449 } ); 450 }, 451 452 /** 453 * Gets all the markers in each editor. 454 * 455 * @param {(String|HTMLElement)} The content to set. 456 * @param {Function} A callback (optional). 457 * @param {Boolean} Only set for (un)rendered nodes (optional). 458 */ 459 setContent: function( content, callback, rendered ) { 460 if ( _.isObject( content ) && content.body.indexOf( '<script' ) !== -1 ) { 461 this.setIframes( content.head, content.body, callback, rendered ); 462 } else if ( _.isString( content ) && content.indexOf( '<script' ) !== -1 ) { 463 this.setIframes( null, content, callback, rendered ); 464 } else { 465 this.getNodes( function( editor, node, contentNode ) { 466 content = content.body || content; 467 468 contentNode.innerHTML = ''; 469 contentNode.appendChild( _.isString( content ) ? editor.dom.createFragment( content ) : content ); 470 471 callback && callback.apply( this, arguments ); 472 }, rendered ); 473 } 474 }, 475 476 /** 477 * Set an iframe as the view content. 478 */ 479 setIframes: function( head, body, callback, rendered ) { 480 var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver, 481 importStyles = this.type === 'video' || this.type === 'audio' || this.type === 'playlist'; 482 483 this.getNodes( function( editor, node, content ) { 484 var dom = editor.dom, 485 styles = '', 486 bodyClasses = editor.getBody().className || '', 487 iframe, iframeDoc, i, resize; 488 489 content.innerHTML = ''; 490 head = head || ''; 491 492 if ( importStyles ) { 493 if ( ! wp.mce.views.sandboxStyles ) { 494 tinymce.each( dom.$( 'link[rel="stylesheet"]', editor.getDoc().head ), function( link ) { 495 if ( link.href && link.href.indexOf( 'skins/lightgray/content.min.css' ) === -1 && 496 link.href.indexOf( 'skins/wordpress/wp-content.css' ) === -1 ) { 696 497 697 fail: function( error ) { 698 if ( ! this.error ) { 699 if ( error ) { 700 this.error = error; 498 styles += dom.getOuterHTML( link ) + '\n'; 499 } 500 }); 501 502 wp.mce.views.sandboxStyles = styles; 701 503 } else { 702 return;504 styles = wp.mce.views.sandboxStyles; 703 505 } 704 506 } 705 507 706 if ( this.error.message ) { 707 if ( ( this.error.type === 'not-embeddable' && this.type === 'embed' ) || this.error.type === 'not-ssl' || 708 this.error.type === 'no-items' ) { 508 // Seems Firefox needs a bit of time to insert/set the view nodes, 509 // or the iframe will fail especially when switching Text => Visual. 510 setTimeout( function() { 511 iframe = dom.add( content, 'iframe', { 512 /* jshint scripturl: true */ 513 src: tinymce.Env.ie ? 'javascript:""' : '', 514 frameBorder: '0', 515 allowTransparency: 'true', 516 scrolling: 'no', 517 'class': 'wpview-sandbox', 518 style: { 519 width: '100%', 520 display: 'block' 521 } 522 } ); 709 523 710 this.setError( this.error.message, 'admin-media' ); 711 } else { 712 this.setContent( '<p>' + this.original + '</p>', 'replace' ); 713 } 714 } else if ( this.error.statusText ) { 715 this.setError( this.error.statusText, 'admin-media' ); 716 } else if ( this.original ) { 717 this.setContent( '<p>' + this.original + '</p>', 'replace' ); 718 } 719 }, 720 721 stopPlayers: function( remove ) { 722 var rem = remove === 'remove'; 723 724 this.getNodes( function( editor, node, content ) { 725 var p, win, 726 iframe = $( 'iframe.wpview-sandbox', content ).get(0); 524 iframeDoc = iframe.contentWindow.document; 727 525 728 if ( iframe && ( win = iframe.contentWindow ) && win.mejs ) { 729 // Sometimes ME.js may show a "Download File" placeholder and player.remove() doesn't exist there. 730 try { 731 for ( p in win.mejs.players ) { 732 win.mejs.players[p].pause(); 526 iframeDoc.open(); 733 527 734 if ( rem ) { 735 win.mejs.players[p].remove(); 736 } 528 iframeDoc.write( 529 '<!DOCTYPE html>' + 530 '<html>' + 531 '<head>' + 532 '<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />' + 533 head + 534 styles + 535 '<style>' + 536 'html {' + 537 'background: transparent;' + 538 'padding: 0;' + 539 'margin: 0;' + 540 '}' + 541 'body#wpview-iframe-sandbox {' + 542 'background: transparent;' + 543 'padding: 1px 0 !important;' + 544 'margin: -1px 0 0 !important;' + 545 '}' + 546 'body#wpview-iframe-sandbox:before,' + 547 'body#wpview-iframe-sandbox:after {' + 548 'display: none;' + 549 'content: "";' + 550 '}' + 551 '</style>' + 552 '</head>' + 553 '<body id="wpview-iframe-sandbox" class="' + bodyClasses + '">' + 554 body + 555 '</body>' + 556 '</html>' 557 ); 558 559 iframeDoc.close(); 560 561 resize = function() { 562 var $iframe, iframeDocHeight; 563 564 // Make sure the iframe still exists. 565 if ( iframe.contentWindow ) { 566 $iframe = $( iframe ); 567 iframeDocHeight = $( iframeDoc.body ).height(); 568 569 if ( $iframe.height() !== iframeDocHeight ) { 570 $iframe.height( iframeDocHeight ); 571 editor.nodeChanged(); 737 572 } 738 } catch( er ) {} 573 } 574 }; 575 576 if ( MutationObserver ) { 577 new MutationObserver( _.debounce( function() { 578 resize(); 579 }, 100 ) ) 580 .observe( iframeDoc.body, { 581 attributes: true, 582 childList: true, 583 subtree: true 584 } ); 585 } else { 586 for ( i = 1; i < 6; i++ ) { 587 setTimeout( resize, i * 700 ); 588 } 739 589 } 740 });741 },742 590 743 unbind: function() { 744 this.stopPlayers( 'remove' ); 745 } 591 if ( importStyles ) { 592 editor.on( 'wp-body-class-change', function() { 593 iframeDoc.body.className = editor.getBody().className; 594 } ); 595 } 596 }, 50 ); 597 598 callback && callback.apply( this, arguments ); 599 }, rendered ); 746 600 }, 747 601 748 602 /** 749 * Called when a TinyMCE view is clicked for editing. 750 * - Parses the shortcode out of the element's data attribute 751 * - Calls the `edit` method on the shortcode model 752 * - Launches the model window 753 * - Bind's an `update` callback which updates the element's data attribute 754 * re-renders the view 603 * Set a loader. 604 */ 605 setLoader: function() { 606 this.setContent( 607 '<div class="loading-placeholder">' + 608 '<div class="dashicons dashicons-admin-media"></div>' + 609 '<div class="wpview-loading"><ins></ins></div>' + 610 '</div>' 611 ); 612 }, 613 614 /** 615 * Set an error. 755 616 * 756 * @param {HTMLElement} node 617 * @param {String} The error message to set. 618 * @param {String} A dashicon ID (optional). {@link https://developer.wordpress.org/resource/dashicons/} 757 619 */ 758 edit: function( node ) { 620 setError: function( message, dashicon ) { 621 this.setContent( 622 '<div class="wpview-error">' + 623 '<div class="dashicons dashicons-' + ( dashicon || 'no' ) + '"></div>' + 624 '<p>' + message + '</p>' + 625 '</div>' 626 ); 627 } 628 } ); 629 630 // Take advantage of the Backbone extend method. 631 wp.mce.View.extend = Backbone.View.extend; 632 } )( jQuery ); 633 634 /* 635 * The WordPress core TinyMCE views. 636 * Views for the gallery, audio, video, playlist and embed shortcodes, 637 * and a view for embeddable URLs. 638 */ 639 ( function( $, views ) { 640 var postID = $( '#post_ID' ).val() || 0, 641 media, gallery, av, embed; 642 643 media = { 644 state: [], 645 646 edit: function( text, callback ) { 759 647 var media = wp.media[ this.type ], 760 self = this, 761 frame, data, callback; 648 frame = media.edit( text ); 649 650 this.stopPlayers && this.stopPlayers(); 762 651 763 $( document ).trigger( 'media:edit' ); 652 _.each( this.state, function( state ) { 653 frame.state( state ).on( 'update', function( selection ) { 654 callback( media.shortcode( selection ).string() ); 655 } ); 656 } ); 764 657 765 data = window.decodeURIComponent( $( node ).attr('data-wpview-text') );766 frame = media.edit( data );767 658 frame.on( 'close', function() { 768 659 frame.detach(); 769 660 } ); 661 } 662 }; 663 664 gallery = _.extend( {}, media, { 665 state: [ 'gallery-edit' ], 666 667 initialize: function() { 668 var self = this; 669 670 this.template = wp.media.template( 'editor-gallery' ); 671 this.attachments = wp.media.gallery.attachments( this.shortcode, postID ); 672 this.dfd = this.attachments.more().done( function() { 673 self.render(); 674 } ); 675 }, 770 676 771 callback = function( selection ) { 772 var shortcode = wp.media[ self.type ].shortcode( selection ).string(); 773 $( node ).attr( 'data-wpview-text', window.encodeURIComponent( shortcode ) ); 774 wp.mce.views.refreshView( self, shortcode ); 775 frame.detach(); 776 }; 777 if ( _.isArray( self.state ) ) { 778 _.each( self.state, function (state) { 779 frame.state( state ).on( 'update', callback ); 677 getHtml: function() { 678 var attrs = this.shortcode.attrs.named, 679 attachments = false; 680 681 // Don't render errors while still fetching attachments 682 if ( this.dfd && 'pending' === this.dfd.state() && ! this.attachments.length ) { 683 return ''; 684 } 685 686 if ( this.attachments.length ) { 687 attachments = this.attachments.toJSON(); 688 689 _.each( attachments, function( attachment ) { 690 if ( attachment.sizes ) { 691 if ( attrs.size && attachment.sizes[ attrs.size ] ) { 692 attachment.thumbnail = attachment.sizes[ attrs.size ]; 693 } else if ( attachment.sizes.thumbnail ) { 694 attachment.thumbnail = attachment.sizes.thumbnail; 695 } else if ( attachment.sizes.full ) { 696 attachment.thumbnail = attachment.sizes.full; 697 } 698 } 780 699 } ); 781 } else {782 frame.state( self.state ).on( 'update', callback );783 700 } 784 frame.open(); 701 702 return this.template( { 703 attachments: attachments, 704 columns: attrs.columns ? parseInt( attrs.columns, 10 ) : wp.media.galleryDefaults.columns 705 } ); 785 706 } 786 } ;707 } ); 787 708 788 /** 789 * TinyMCE handler for the video shortcode 790 * 791 * @mixes wp.mce.av 792 */ 793 wp.mce.views.register( 'video', _.extend( {}, wp.mce.av, { 794 state: 'video-details' 795 } ) ); 709 av = _.extend( {}, media, { 710 overlay: true, 711 action: 'parse-media-shortcode', 712 713 initialize: function() { 714 var self = this; 715 716 if ( this.url ) { 717 this.loader = false; 718 this.shortcode = wp.media.embed.shortcode( { 719 url: this.url 720 } ); 721 } 796 722 797 /** 798 * TinyMCE handler for the audio shortcode 799 * 800 * @mixes wp.mce.av 801 */ 802 wp.mce.views.register( 'audio', _.extend( {}, wp.mce.av, { 803 state: 'audio-details' 804 } ) ); 723 wp.ajax.send( this.action, { 724 data: { 725 post_ID: postID, 726 type: this.shortcode.tag, 727 shortcode: this.shortcode.string() 728 } 729 } ) 730 .done( function( response ) { 731 self.parsed = response; 732 self.render(); 733 } ) 734 .fail( function( response ) { 735 if ( self.type === 'embedURL' ) { 736 self.removeMarkers(); 737 } else { 738 self.setError( response.message || response.statusText, 'admin-media' ); 739 } 740 } ); 805 741 806 /** 807 * TinyMCE handler for the playlist shortcode 808 * 809 * @mixes wp.mce.av 810 */ 811 wp.mce.views.register( 'playlist', _.extend( {}, wp.mce.av, { 812 state: [ 'playlist-edit', 'video-playlist-edit' ] 813 } ) ); 742 this.getEditors( function( editor ) { 743 editor.on( 'wpview-selected', function() { 744 self.stopPlayers(); 745 } ); 746 } ); 747 }, 814 748 815 /** 816 * TinyMCE handler for the embed shortcode 817 */ 818 wp.mce.embedMixin = { 819 View: _.extend( {}, wp.mce.av.View, { 820 overlay: true, 821 action: 'parse-embed', 822 initialize: function( options ) { 823 this.content = options.content; 824 this.original = options.url || options.shortcode.string(); 825 826 if ( options.url ) { 827 this.shortcode = media.embed.shortcode( { 828 url: options.url 749 stopPlayers: function( remove ) { 750 this.getNodes( function( editor, node, content ) { 751 var win = $( 'iframe.wpview-sandbox', content ).get( 0 ); 752 753 if ( win && ( win = win.contentWindow ) && win.mejs ) { 754 _.each( win.mejs.players, function( player ) { 755 try { 756 player[ remove ? 'remove' : 'pause' ](); 757 } catch ( e ) {} 829 758 } ); 830 } else {831 this.shortcode = options.shortcode;832 759 } 760 } ); 761 }, 833 762 834 _.bindAll( this, 'setIframes', 'setNodes', 'fetch' ); 835 $( this ).on( 'ready', this.setNodes ); 836 837 this.fetch(); 838 } 839 } ), 840 edit: function( node ) { 841 var embed = media.embed, 842 self = this, 843 frame, 844 data, 845 isURL = 'embedURL' === this.type; 763 getHtml: function() { 764 return this.parsed; 765 } 766 } ); 846 767 847 $( document ).trigger( 'media:edit' ); 768 embed = _.extend( {}, av, { 769 action: 'parse-embed', 848 770 849 data = window.decodeURIComponent( $( node ).attr('data-wpview-text') ); 850 frame = embed.edit( data, isURL ); 851 frame.on( 'close', function() { 852 frame.detach(); 853 } ); 854 frame.state( 'embed' ).props.on( 'change:url', function (model, url) { 855 if ( ! url ) { 856 return; 771 edit: function( text, callback ) { 772 var media = wp.media.embed, 773 isURL = 'embedURL' === this.type, 774 frame = media.edit( text, isURL ); 775 776 this.stopPlayers(); 777 778 frame.state( 'embed' ).props.on( 'change:url', function( model, url ) { 779 if ( url ) { 780 frame.state( 'embed' ).metadata = model.toJSON(); 857 781 } 858 frame.state( 'embed' ).metadata = model.toJSON();859 782 } ); 860 frame.state( 'embed' ).on( 'select', function() {861 var shortcode;862 783 784 frame.state( 'embed' ).on( 'select', function() { 863 785 if ( isURL ) { 864 shortcode = frame.state( 'embed' ).metadata.url;786 callback( frame.state( 'embed' ).metadata.url ); 865 787 } else { 866 shortcode = embed.shortcode( frame.state( 'embed' ).metadata ).string();788 callback( media.shortcode( frame.state( 'embed' ).metadata ).string() ); 867 789 } 868 $( node ).attr( 'data-wpview-text', window.encodeURIComponent( shortcode ) ); 869 wp.mce.views.refreshView( self, shortcode ); 790 } ); 791 792 frame.on( 'close', function() { 870 793 frame.detach(); 871 794 } ); 795 872 796 frame.open(); 873 797 } 874 }; 798 } ); 799 800 views.register( 'gallery', _.extend( {}, gallery ) ); 801 802 views.register( 'audio', _.extend( {}, av, { 803 state: [ 'audio-details' ] 804 } ) ); 875 805 876 wp.mce.views.register( 'embed', _.extend( {}, wp.mce.embedMixin ) ); 806 views.register( 'video', _.extend( {}, av, { 807 state: [ 'video-details' ] 808 } ) ); 809 810 views.register( 'playlist', _.extend( {}, av, { 811 state: [ 'playlist-edit', 'video-playlist-edit' ] 812 } ) ); 813 814 views.register( 'embed', _.extend( {}, embed ) ); 877 815 878 wp.mce.views.register( 'embedURL', _.extend( {}, wp.mce.embedMixin, {816 views.register( 'embedURL', _.extend( {}, embed, { 879 817 toView: function( content ) { 880 818 var re = /(^|<p>)(https?:\/\/[^\s"]+?)(<\/p>\s*|$)/gi, 881 819 match = re.exec( tinymce.trim( content ) ); … … 893 831 }; 894 832 } 895 833 } ) ); 896 897 }(jQuery)); 834 } )( jQuery, wp.mce.views ); -
src/wp-includes/js/tinymce/plugins/wpview/plugin.js
341 341 editor.focus(); 342 342 } 343 343 344 wp.mce.views.edit( view );344 wp.mce.views.edit( editor, view ); 345 345 return false; 346 346 } else if ( editor.dom.hasClass( event.target, 'remove' ) ) { 347 347 removeView( view );