\u00a0
' + - '\u00a0
', - 'wrap' - ); - - $( this ).trigger( 'ready' ); - - this.rendered( true ); - } - }, - unbind: function() {}, - getEditors: function( callback ) { - var editors = []; - - _.each( tinymce.editors, function( editor ) { - if ( editor.plugins.wpview ) { - if ( callback ) { - callback( editor ); - } - - editors.push( editor ); - } - }, this ); - - return editors; - }, - getNodes: function( callback ) { - var nodes = [], - self = this; - - this.getEditors( function( editor ) { - $( editor.getBody() ) - .find( '[data-wpview-text="' + self.encodedText + '"]' ) - .each( function ( i, node ) { - if ( callback ) { - callback( editor, node, $( node ).find( '.wpview-content' ).get( 0 ) ); - } - - nodes.push( node ); - } ); - } ); - - return nodes; - }, - setContent: function( html, option ) { - this.getNodes( function ( editor, node, content ) { - var el = ( option === 'wrap' || option === 'replace' ) ? node : content, - insert = html; - - if ( _.isString( insert ) ) { - insert = editor.dom.createFragment( insert ); - } - - if ( option === 'replace' ) { - editor.dom.replace( insert, el ); - } else { - el.innerHTML = ''; - el.appendChild( insert ); - } - } ); - }, - /* jshint scripturl: true */ - setIframes: function ( head, body ) { - var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver, - importStyles = this.type === 'video' || this.type === 'audio' || this.type === 'playlist'; - - if ( head || body.indexOf( '' + message + '
' + - '' + result.content + '
', processed: true - }); + } ); // Update the remaining content. remaining = remaining.slice( result.index + result.content.length ); } - // There are no additional matches. If any content remains, - // add it as an unprocessed piece. + // There are no additional matches. + // If any content remains, add it as an unprocessed piece. if ( remaining ) { - pieces.push({ content: remaining }); + pieces.push( { content: remaining } ); } - }); - }); + } ); + } ); - return _.pluck( pieces, 'content' ).join(''); + return _.pluck( pieces, 'content' ).join( '' ); }, /** - * Create a placeholder for a particular view type - * - * @param viewType - * @param text - * @param options + * Create a view instance. * + * @param {String} type The view type. + * @param {String} text The textual representation of the view. + * @param {Object} options Options. */ - toView: function( viewType, text, options ) { - var view = wp.mce.views.get( viewType ), - encodedText = window.encodeURIComponent( text ), - instance, viewOptions; - - - if ( ! view ) { - return text; + createInstance: function( type, text, options ) { + var View = this.get( type ), + encodedText = encodeURIComponent( text ), + instance = this.getInstance( encodedText ); + + if ( instance ) { + return instance; } - if ( ! wp.mce.views.getInstance( encodedText ) ) { - viewOptions = options; - viewOptions.type = viewType; - viewOptions.encodedText = encodedText; - instance = new view.View( viewOptions ); - instances[ encodedText ] = instance; - } - - return wp.html.string({ - tag: 'div', - - attrs: { - 'class': 'wpview-wrap', - 'data-wpview-text': encodedText, - 'data-wpview-type': viewType - }, + options = _.extend( options || {}, { + text: text, + encodedText: encodedText + } ); - content: '\u00a0' - }); + return instances[ encodedText ] = new View( options ); }, /** - * Refresh views after an update is made + * Get a view instance. * - * @param view {object} being refreshed - * @param text {string} textual representation of the view - * @param force {Boolean} whether to force rendering + * @param {String} text The textual representation of the view. */ - refreshView: function( view, text, force ) { - var encodedText = window.encodeURIComponent( text ), - viewOptions, - result, instance; - - instance = wp.mce.views.getInstance( encodedText ); - - if ( ! instance ) { - result = view.toView( text ); - viewOptions = result.options; - viewOptions.type = view.type; - viewOptions.encodedText = encodedText; - instance = new view.View( viewOptions ); - instances[ encodedText ] = instance; - } - - instance.render( force ); - }, - - getInstance: function( encodedText ) { - return instances[ encodedText ]; + getInstance: function( text ) { + return instances[ encodeURIComponent( text ) ]; }, /** - * render( scope ) + * Renders all view nodes that are not yet rendered. * - * Renders any view instances inside a DOM node `scope`. - * - * View instances are detected by the presence of wrapper elements. - * To generate wrapper elements, pass your content through - * `wp.mce.view.toViews( content )`. + * @param {Boolean} force Rerender all view nodes. */ render: function( force ) { _.each( instances, function( instance ) { @@ -490,408 +180,645 @@ } ); }, - edit: function( node ) { - var viewType = $( node ).data('wpview-type'), - view = wp.mce.views.get( viewType ); + /** + * Update the text of a given view node. + * + * @param {String} text The new text. + * @param {tinymce.Editor} editor The TinyMCE editor instance the view node is in. + * @param {HTMLElement} node The view node to update. + */ + update: function( text, editor, node ) { + var oldText = decodeURIComponent( $( node ).data( 'wpview-text' ) ), + instance = this.getInstance( oldText ); - if ( view ) { - view.edit( node ); + if ( instance ) { + instance.update( text, editor, node ); + } + }, + + /** + * Renders any editing interface based on the view type. + * + * @param {tinymce.Editor} editor The TinyMCE editor instance the view node is in. + * @param {HTMLElement} node The view node to edit. + */ + edit: function( editor, node ) { + var text = decodeURIComponent( $( node ).data( 'wpview-text' ) ), + instance = this.getInstance( text ); + + if ( instance && instance.edit ) { + instance.edit( text, function( text ) { + instance.update( text, editor, node ); + } ); } } }; - wp.mce.views.register( 'gallery', { - View: { - template: media.template( 'editor-gallery' ), - - // The fallback post ID to use as a parent for galleries that don't - // specify the `ids` or `include` parameters. - // - // Uses the hidden input on the edit posts page by default. - postID: $('#post_ID').val(), - - initialize: function( options ) { - this.shortcode = options.shortcode; - this.fetch(); - }, + /** + * A Backbone-like View constructor intended for use when rendering a TinyMCE View. + * The main difference is that the TinyMCE View is not tied to a particular DOM node. + * + * @param {Object} Options. + */ + wp.mce.View = function( options ) { + _.extend( this, options ); + this.initialize(); + }; - fetch: function() { - var self = this; + wp.mce.View.extend = Backbone.View.extend; - this.attachments = wp.media.gallery.attachments( this.shortcode, this.postID ); - this.dfd = this.attachments.more().done( function() { - self.render( true ); - } ); - }, + _.extend( wp.mce.View.prototype, { - getHtml: function() { - var attrs = this.shortcode.attrs.named, - attachments = false, - options; - - // Don't render errors while still fetching attachments - if ( this.dfd && 'pending' === this.dfd.state() && ! this.attachments.length ) { - return ''; - } + /** + * The content. + * + * @type {*} + */ + content: null, - if ( this.attachments.length ) { - attachments = this.attachments.toJSON(); + /** + * Whether or not to display a loader. + * + * @type {Boolean} + */ + loader: true, - _.each( attachments, function( attachment ) { - if ( attachment.sizes ) { - if ( attrs.size && attachment.sizes[ attrs.size ] ) { - attachment.thumbnail = attachment.sizes[ attrs.size ]; - } else if ( attachment.sizes.thumbnail ) { - attachment.thumbnail = attachment.sizes.thumbnail; - } else if ( attachment.sizes.full ) { - attachment.thumbnail = attachment.sizes.full; - } - } - } ); - } + /** + * Runs after the view instance is created. + */ + initialize: function() {}, - options = { - attachments: attachments, - columns: attrs.columns ? parseInt( attrs.columns, 10 ) : wp.media.galleryDefaults.columns - }; + /** + * Retuns the content to render in the view node. + * + * @return {*} + */ + getContent: function() { + return this.content; + }, - return this.template( options ); + /** + * Renders all view nodes tied to this view instance that are not yet rendered. + * + * @param {Boolean} force Rerender all view nodes tied to this view instance. + */ + render: function( force ) { + // If there's nothing to render an no loader needs to be shown, stop. + if ( ! this.loader && ! this.getContent() ) { + return; } - }, - edit: function( node ) { - var gallery = wp.media.gallery, - self = this, - frame, data; + // We're about to rerender all views of this instance, so unbind rendered views. + force && this.unbind(); - data = window.decodeURIComponent( $( node ).attr('data-wpview-text') ); - frame = gallery.edit( data ); + // Replace any left over markers. + this.replaceMarkers(); - frame.state('gallery-edit').on( 'update', function( selection ) { - var shortcode = gallery.shortcode( selection ).string(); - $( node ).attr( 'data-wpview-text', window.encodeURIComponent( shortcode ) ); - wp.mce.views.refreshView( self, shortcode, true ); - }); + if ( this.getContent() ) { + this.setContent( this.getContent(), function( editor, node ) { + $( node ).data( 'rendered', true ); + this.bindNodes.apply( this, arguments ); + }, force ? null : false ); + } else { + this.setLoader(); + } + }, - frame.on( 'close', function() { - frame.detach(); - }); - } - } ); + /** + * Binds a given rendered view node. + * Runs after a view node's content is added to the DOM. + * + * @param {tinymce.Editor} editor The TinyMCE editor instance the view node is in. + * @param {HTMLElement} node The view node. + * @param {HTMLElement} contentNode The view's content node. + */ + bindNodes: function( /* editor, node, contentNode */ ) {}, - /** - * These are base methods that are shared by the audio and video shortcode's MCE controller. - * - * @mixin - */ - wp.mce.av = { - View: { - overlay: true, + /** + * Unbinds all view nodes tied to this view instance. + * Runs before their content is removed from the DOM. + */ + unbind: function() { + this.getNodes( function() { + this.unbindNodes.apply( this, arguments ); + }, true ); + }, - action: 'parse-media-shortcode', + /** + * Unbinds a given view node. + * Runs before the view node's content is removed from the DOM. + * + * @param {tinymce.Editor} editor The TinyMCE editor instance the view node is in. + * @param {HTMLElement} node The view node. + * @param {HTMLElement} contentNode The view's content node. + */ + unbindNodes: function( /* editor, node, contentNode */ ) {}, - initialize: function( options ) { + /** + * Gets all the TinyMCE editor instances that support views. + * + * @param {Function} callback A callback. + */ + getEditors: function( callback ) { + _.each( tinymce.editors, function( editor ) { + if ( editor.plugins.wpview ) { + callback.call( this, editor ); + } + }, this ); + }, + + /** + * Gets all view nodes tied to this view instance. + * + * @param {Function} callback A callback. + * @param {Boolean} rendered Get (un)rendered view nodes. Optional. + */ + getNodes: function( callback, rendered ) { + this.getEditors( function( editor ) { var self = this; - this.shortcode = options.shortcode; + $( editor.getBody() ) + .find( '[data-wpview-text="' + self.encodedText + '"]' ) + .filter( function() { + var data; + + if ( rendered == null ) { + return true; + } - _.bindAll( this, 'setIframes', 'setNodes', 'fetch', 'stopPlayers' ); - $( this ).on( 'ready', this.setNodes ); + data = $( this ).data( 'rendered' ) === true; - $( document ).on( 'media:edit', this.stopPlayers ); + return rendered ? data : ! data; + } ) + .each( function() { + callback.call( self, editor, this, $( this ).find( '.wpview-content' ).get( 0 ) ); + } ); + } ); + }, - this.fetch(); + /** + * Gets all marker nodes tied to this view instance. + * + * @param {Function} callback A callback. + */ + getMarkers: function( callback ) { + this.getEditors( function( editor ) { + var self = this; - this.getEditors( function( editor ) { - editor.on( 'hide', function () { - mediaWindows = []; - windowIdx = 0; - self.stopPlayers(); + $( editor.getBody() ) + .find( '[data-wpview-marker="' + this.encodedText + '"]' ) + .each( function() { + callback.call( self, editor, this ); } ); - }); - }, + } ); + }, - pauseOtherWindows: function ( win ) { - _.each( mediaWindows, function ( mediaWindow ) { - if ( mediaWindow.sandboxId !== win.sandboxId ) { - _.each( mediaWindow.mejs.players, function ( player ) { - player.pause(); - } ); - } - } ); - }, + /** + * Replaces all marker nodes tied to this view instance. + */ + replaceMarkers: function() { + this.getMarkers( function( editor, node ) { + if ( $( node ).text() !== this.text ) { + editor.dom.setAttrib( node, 'data-wpview-marker', null ); + return; + } - iframeLoaded: function (win) { - return _.bind( function () { - var callback; - if ( ! win.mejs || _.isEmpty( win.mejs.players ) ) { - return; - } + editor.dom.replace( + editor.dom.createFragment( + '\u00a0
' + + '\u00a0
' + + '' + this.original + '
', 'replace' ); } - }, - stopPlayers: function( remove ) { - var rem = remove === 'remove'; + // Seems Firefox needs a bit of time to insert/set the view nodes, + // or the iframe will fail especially when switching Text => Visual. + setTimeout( function() { + iframe = dom.add( content, 'iframe', { + /* jshint scripturl: true */ + src: tinymce.Env.ie ? 'javascript:""' : '', + frameBorder: '0', + allowTransparency: 'true', + scrolling: 'no', + 'class': 'wpview-sandbox', + style: { + width: '100%', + display: 'block' + } + } ); + + dom.add( content, 'div', { 'class': 'wpview-overlay' } ); - this.getNodes( function( editor, node, content ) { - var p, win, - iframe = $( 'iframe.wpview-sandbox', content ).get(0); + iframeDoc = iframe.contentWindow.document; - if ( iframe && ( win = iframe.contentWindow ) && win.mejs ) { - // Sometimes ME.js may show a "Download File" placeholder and player.remove() doesn't exist there. - try { - for ( p in win.mejs.players ) { - win.mejs.players[p].pause(); + iframeDoc.open(); - if ( rem ) { - win.mejs.players[p].remove(); - } + iframeDoc.write( + '' + + '' + + '' + + '' + + head + + styles + + '' + + '' + + '' + + body + + '' + + '' + ); + + iframeDoc.close(); + + resize = function() { + var $iframe, iframeDocHeight; + + // Make sure the iframe still exists. + if ( iframe.contentWindow ) { + $iframe = $( iframe ); + iframeDocHeight = $( iframeDoc.body ).height(); + + if ( $iframe.height() !== iframeDocHeight ) { + $iframe.height( iframeDocHeight ); + editor.nodeChanged(); } - } catch( er ) {} + } + }; + + if ( MutationObserver ) { + new MutationObserver( _.debounce( function() { + resize(); + }, 100 ) ) + .observe( iframeDoc.body, { + attributes: true, + childList: true, + subtree: true + } ); + } else { + for ( i = 1; i < 6; i++ ) { + setTimeout( resize, i * 700 ); + } } - }); - }, - unbind: function() { - this.stopPlayers( 'remove' ); + if ( importStyles ) { + editor.on( 'wp-body-class-change', function() { + iframeDoc.body.className = editor.getBody().className; + } ); + } + }, 50 ); + + callback && callback.apply( this, arguments ); + }, rendered ); + }, + + /** + * Sets a loader for all view nodes tied to this view instance. + */ + setLoader: function() { + this.setContent( + '' + message + '
' + + ')(https?:\/\/[^\s"]+?)(<\/p>\s*|$)/gi, match = re.exec( tinymce.trim( content ) ); - if ( ! match ) { - return; + if ( match ) { + return { + index: match.index + match[1].length, + content: match[2], + options: { + url: match[2] + } + }; } - - return { - index: match.index + match[1].length, - content: match[2], - options: { - url: match[2] - } - }; } } ) ); - -}(jQuery)); +} )( window, window.wp.mce.views, window.jQuery ); Index: src/wp-includes/js/tinymce/plugins/wpview/plugin.js =================================================================== --- src/wp-includes/js/tinymce/plugins/wpview/plugin.js (revision 31544) +++ src/wp-includes/js/tinymce/plugins/wpview/plugin.js (working copy) @@ -237,7 +237,7 @@ return; } - event.content = wp.mce.views.toViews( event.content ); + event.content = wp.mce.views.setMarkers( event.content ); }); // When the editor's content has been updated and the DOM has been @@ -341,7 +341,7 @@ editor.focus(); } - wp.mce.views.edit( view ); + wp.mce.views.edit( editor, view ); return false; } else if ( editor.dom.hasClass( event.target, 'remove' ) ) { removeView( view ); Index: src/wp-includes/media-template.php =================================================================== --- src/wp-includes/media-template.php (revision 31544) +++ src/wp-includes/media-template.php (working copy) @@ -1205,7 +1205,7 @@