\u00a0
' + + '\u00a0
', + 'wrap' + ); + + $( this ).trigger( 'ready' ); + + this.rendered( true ); + } + }, + unbind: function() {}, + getEditors: function( callback ) { + var editors = []; + _.each( tinymce.editors, function( editor ) { - var doc, self = this; if ( editor.plugins.wpview ) { - doc = editor.getDoc(); - $( doc ).find( '[data-wpview-text="' + this.encodedText + '"]' ).each(function (i, elem) { - var node = $( elem ); - // The is used to mark the end of the wrapper div. Needed when comparing - // the content as string for preventing extra undo levels. - node.html( html ).append( '' ); - $( self ).trigger( 'ready', elem ); - }); + if ( callback ) { + callback( editor ); + } + + editors.push( editor ); } }, this ); + + return editors; }, - unbind: function() {} + 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 + '
' + + '' + this.original + '
', 'replace' ); + } + } else if ( this.error.statusText ) { + this.setError( this.error.statusText, 'admin-media' ); + } else if ( this.original ) { + this.setContent( '' + this.original + '
', 'replace' ); + } + }, + + stopPlayers: function( remove ) { + var rem = remove === 'remove'; + + this.getNodes( function( editor, node, content ) { + var p, win, + iframe = $( 'iframe.wpview-sandbox', content ).get(0); + + 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(); + + if ( rem ) { + win.mejs.players[p].remove(); + } + } + } catch( er ) {} + } + }); + }, + + unbind: function() { + this.stopPlayers( 'remove' ); + } }, /** @@ -387,11 +684,11 @@ window.wp = window.wp || {}; * @param {HTMLElement} node */ edit: function( node ) { - var media = wp.media[ this.shortcode ], + var media = wp.media[ this.type ], self = this, frame, data, callback; - wp.media.mixin.pauseAllPlayers(); + $( document ).trigger( 'media:edit' ); data = window.decodeURIComponent( $( node ).attr('data-wpview-text') ); frame = media.edit( data ); @@ -400,7 +697,7 @@ window.wp = window.wp || {}; } ); callback = function( selection ) { - var shortcode = wp.media[ self.shortcode ].shortcode( selection ).string(); + var shortcode = wp.media[ self.type ].shortcode( selection ).string(); $( node ).attr( 'data-wpview-text', window.encodeURIComponent( shortcode ) ); wp.mce.views.refreshView( self, shortcode ); frame.detach(); @@ -416,278 +713,113 @@ window.wp = window.wp || {}; } }; - /** - * Base View class for audio and video shortcodes - * - * @constructor - * @augments wp.mce.View - * @mixes wp.media.mixin - */ - wp.mce.media.View = wp.mce.View.extend({ - initialize: function( options ) { - this.players = []; - this.shortcode = options.shortcode; - _.bindAll( this, 'setPlayer' ); - $(this).on( 'ready', this.setPlayer ); - }, - - /** - * Creates the player instance for the current node - * - * @global MediaElementPlayer - * @global _wpmejsSettings - * - * @param {Event} e - * @param {HTMLElement} node - */ - setPlayer: function(e, node) { - // if the ready event fires on an empty node - if ( ! node ) { - return; - } - - var self = this, - media, - firefox = this.ua.is( 'ff' ), - className = '.wp-' + this.shortcode.tag + '-shortcode'; - - media = $( node ).find( className ); - - if ( ! this.isCompatible( media ) ) { - media.closest( '.wpview-wrap' ).addClass( 'wont-play' ); - if ( ! media.parent().hasClass( 'wpview-wrap' ) ) { - media.parent().replaceWith( media ); - } - media.replaceWith( '' + media.find( 'source' ).eq(0).prop( 'src' ) + '
' ); - return; - } else { - media.closest( '.wpview-wrap' ).removeClass( 'wont-play' ); - if ( firefox ) { - media.prop( 'preload', 'metadata' ); - } else { - media.prop( 'preload', 'none' ); - } - } - - media = wp.media.view.MediaDetails.prepareSrc( media.get(0) ); - - setTimeout( function() { - wp.mce.media.loaded = true; - self.players.push( new MediaElementPlayer( media, self.mejsSettings ) ); - }, wp.mce.media.loaded ? 10 : 500 ); - }, - - /** - * Pass data to the View's Underscore template and return the compiled output - * - * @returns {string} - */ - getHtml: function() { - var attrs = this.shortcode.attrs.named; - attrs.content = this.shortcode.content; - - return this.template({ model: _.defaults( - attrs, - wp.media[ this.shortcode.tag ].defaults ) - }); - }, - - unbind: function() { - this.unsetPlayers(); - } - }); - _.extend( wp.mce.media.View.prototype, wp.media.mixin ); - /** * TinyMCE handler for the video shortcode * - * @mixes wp.mce.media + * @mixes wp.mce.av */ - wp.mce.video = _.extend( {}, wp.mce.media, { - shortcode: 'video', - state: 'video-details', - View: wp.mce.media.View.extend({ - className: 'editor-video', - template: media.template('editor-video') - }) - } ); - wp.mce.views.register( 'video', wp.mce.video ); + wp.mce.views.register( 'video', _.extend( {}, wp.mce.av, { + state: 'video-details' + } ) ); /** * TinyMCE handler for the audio shortcode * - * @mixes wp.mce.media + * @mixes wp.mce.av */ - wp.mce.audio = _.extend( {}, wp.mce.media, { - shortcode: 'audio', - state: 'audio-details', - View: wp.mce.media.View.extend({ - className: 'editor-audio', - template: media.template('editor-audio') - }) - } ); - wp.mce.views.register( 'audio', wp.mce.audio ); + wp.mce.views.register( 'audio', _.extend( {}, wp.mce.av, { + state: 'audio-details' + } ) ); /** - * Base View class for playlist shortcodes + * TinyMCE handler for the playlist shortcode * - * @constructor - * @augments wp.mce.View - * @mixes wp.media.mixin + * @mixes wp.mce.av */ - wp.mce.media.PlaylistView = wp.mce.View.extend({ - className: 'editor-playlist', - template: media.template('editor-playlist'), - - initialize: function( options ) { - this.players = []; - this.data = {}; - this.attachments = []; - this.shortcode = options.shortcode; - this.fetch(); - }, - - /** - * Asynchronously fetch the shortcode's attachments - */ - fetch: function() { - this.attachments = wp.media.playlist.attachments( this.shortcode ); - this.dfd = this.attachments.more().done( _.bind( this.render, this ) ); - }, - - /** - * Get the HTML for the view (which also set's the data), replace the - * current HTML, and then invoke the WPPlaylistView instance to render - * the playlist in the editor - * - * @global WPPlaylistView - * @global tinymce.editors - */ - render: function() { - var html = this.getHtml(), self = this; - - _.each( tinymce.editors, function( editor ) { - var doc; - if ( editor.plugins.wpview ) { - doc = editor.getDoc(); - $( doc ).find( '[data-wpview-text="' + this.encodedText + '"]' ).each(function (i, elem) { - var node = $( elem ); - - // The is used to mark the end of the wrapper div. Needed when comparing - // the content as string for preventing extra undo levels. - node.html( html ).append( '' ); + wp.mce.views.register( 'playlist', _.extend( {}, wp.mce.av, { + state: [ 'playlist-edit', 'video-playlist-edit' ] + } ) ); - if ( ! self.data.tracks ) { - return; - } + /** + * TinyMCE handler for the embed shortcode + */ + wp.mce.embedMixin = { + View: _.extend( {}, wp.mce.av.View, { + overlay: true, + action: 'parse-embed', + initialize: function( options ) { + this.content = options.content; + this.original = options.url || options.shortcode.string(); - self.players.push( new WPPlaylistView({ - el: $( elem ).find( '.wp-playlist' ).get(0), - metadata: self.data - }).player ); - }); + if ( options.url ) { + this.shortcode = media.embed.shortcode( { + url: options.url + } ); + } else { + this.shortcode = options.shortcode; } - }, this ); - }, - - /** - * Set the data that will be used to compile the Underscore template, - * compile the template, and then return it. - * - * @returns {string} - */ - getHtml: function() { - var data = this.shortcode.attrs.named, - model = wp.media.playlist, - options, - attachments, - tracks = []; - - // Don't render errors while still fetching attachments - if ( this.dfd && 'pending' === this.dfd.state() && ! this.attachments.length ) { - return; - } - - _.each( model.defaults, function( value, key ) { - data[ key ] = model.coerce( data, key ); - }); - options = { - type: data.type, - style: data.style, - tracklist: data.tracklist, - tracknumbers: data.tracknumbers, - images: data.images, - artists: data.artists - }; + _.bindAll( this, 'setIframes', 'setNodes', 'fetch' ); + $( this ).on( 'ready', this.setNodes ); - if ( ! this.attachments.length ) { - return this.template( options ); + this.fetch(); } + } ), + edit: function( node ) { + var embed = media.embed, + self = this, + frame, + data, + isURL = 'embedURL' === this.type; - attachments = this.attachments.toJSON(); + $( document ).trigger( 'media:edit' ); - _.each( attachments, function( attachment ) { - var size = {}, resize = {}, track = { - src : attachment.url, - type : attachment.mime, - title : attachment.title, - caption : attachment.caption, - description : attachment.description, - meta : attachment.meta - }; + data = window.decodeURIComponent( $( node ).attr('data-wpview-text') ); + frame = embed.edit( data, isURL ); + frame.on( 'close', function() { + frame.detach(); + } ); + frame.state( 'embed' ).props.on( 'change:url', function (model, url) { + if ( ! url ) { + return; + } + frame.state( 'embed' ).metadata = model.toJSON(); + } ); + frame.state( 'embed' ).on( 'select', function() { + var shortcode; - if ( 'video' === data.type ) { - size.width = attachment.width; - size.height = attachment.height; - if ( media.view.settings.contentWidth ) { - resize.width = media.view.settings.contentWidth - 22; - resize.height = Math.ceil( ( size.height * resize.width ) / size.width ); - if ( ! options.width ) { - options.width = resize.width; - options.height = resize.height; - } - } else { - if ( ! options.width ) { - options.width = attachment.width; - options.height = attachment.height; - } - } - track.dimensions = { - original : size, - resized : _.isEmpty( resize ) ? size : resize - }; + if ( isURL ) { + shortcode = frame.state( 'embed' ).metadata.url; } else { - options.width = 400; + shortcode = embed.shortcode( frame.state( 'embed' ).metadata ).string(); } - - track.image = attachment.image; - track.thumb = attachment.thumb; - - tracks.push( track ); + $( node ).attr( 'data-wpview-text', window.encodeURIComponent( shortcode ) ); + wp.mce.views.refreshView( self, shortcode ); + frame.detach(); } ); + frame.open(); + } + }; - options.tracks = tracks; - this.data = options; + wp.mce.views.register( 'embed', _.extend( {}, wp.mce.embedMixin ) ); - return this.template( options ); - }, + wp.mce.views.register( 'embedURL', _.extend( {}, wp.mce.embedMixin, { + toView: function( content ) { + var re = /(?:^|)(https?:\/\/[^\s"]+?)(?:<\/p>\s*|$)/gi, + match = re.exec( tinymce.trim( content ) ); - unbind: function() { - this.unsetPlayers(); + if ( ! match ) { + return; + } + + return { + index: match.index, + content: match[0], + options: { + url: match[1] + } + }; } - }); - _.extend( wp.mce.media.PlaylistView.prototype, wp.media.mixin ); + } ) ); - /** - * TinyMCE handler for the playlist shortcode - * - * @mixes wp.mce.media - */ - wp.mce.playlist = _.extend( {}, wp.mce.media, { - shortcode: 'playlist', - state: ['playlist-edit', 'video-playlist-edit'], - View: wp.mce.media.PlaylistView - } ); - wp.mce.views.register( 'playlist', wp.mce.playlist ); }(jQuery));