WordPress/wp-includes/js/mce-view.min.js
Scott Taylor ba84f57083 Add MCE Views for audio and video. Please clear your browser cache so that you get the latest TinyMCE stylesheet.
* Move TinyMCE shortcode handling from `wpgallery` plugin to `mce-view.js`
* Force `preload="none"` when rendering media in the editor to ensure fast loading (I realize this sounds illogical)
* Move audio and video tag builder logic in `media-template.php` into PHP funcs that can be reused by any code passing `data.model` to an Underscore template
* Pause all players when moving between editor tabs and when moving from the editor to editing in the media modal.
* Rename `wp.media.audio|video.shortcode()` to the more appropriate `wp.media.audio|video.update()` that now returns a `wp.shortcode` object instead of a string.
* Add necessary MediaElement css files to `$mce_css`
* In `wp.mce.View.render()`, support multiple instances of the same shortcode
* When rendering `wp.mce.View`s, fire a ready event that passes the current MCE View root element as context 

See #27389.


Built from https://develop.svn.wordpress.org/trunk@27528


git-svn-id: http://core.svn.wordpress.org/trunk@27371 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-13 23:10:14 +00:00

1 line
4.4 KiB
JavaScript
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

window.wp=window.wp||{},function(a){var b={},c={},d=wp.media,e=["encodedText"];wp.mce=wp.mce||{},wp.mce.View=function(a){a||(a={}),_.extend(this,_.pick(a,e)),this.initialize.apply(this,arguments)},_.extend(wp.mce.View.prototype,{initialize:function(){},html:function(){},render:function(){var b=this.getHtml();_.each(tinymce.editors,function(c){var d,e=this;c.plugins.wpview&&(d=c.getDoc(),a(d).find('[data-wpview-text="'+this.encodedText+'"]').each(function(c,d){var f=a(d);f.html(b),a(e).trigger("ready",d)}))},this)}}),wp.mce.View.extend=Backbone.View.extend,wp.mce.views={register:function(a,c){b[a]=c},get:function(a){return b[a]},unregister:function(a){delete b[a]},toViews:function(a){var c,d=[{content:a}];return _.each(b,function(a,b){c=d.slice(),d=[],_.each(c,function(c){var e,f=c.content;if(c.processed)return void d.push(c);for(;f&&(e=a.toView(f));)e.index&&d.push({content:f.substring(0,e.index)}),d.push({content:wp.mce.views.toView(b,e.content,e.options),processed:!0}),f=f.slice(e.index+e.content.length);f&&d.push({content:f})})}),_.pluck(d,"content").join("")},toView:function(a,b,d){var e,f,g=wp.mce.views.get(a),h=window.encodeURIComponent(b);return g?(wp.mce.views.getInstance(h)||(f=d,f.encodedText=h,e=new g.View(f),c[h]=e),wp.html.string({tag:"div",attrs:{"class":"wpview-wrap wpview-type-"+a,"data-wpview-text":h,"data-wpview-type":a,contenteditable:"false"},content:" "})):b},refreshView:function(a,b){var d,e,f,g=window.encodeURIComponent(b);f=wp.mce.views.getInstance(g),f||(e=a.toView(b),d=e.options,d.encodedText=g,f=new a.View(d),c[g]=f),wp.mce.views.render()},getInstance:function(a){return c[a]},render:function(){_.each(c,function(a){a.render()})},edit:function(b){var c=a(b).data("wpview-type"),d=wp.mce.views.get(c);d&&d.edit(b)}},wp.mce.gallery={shortcode:"gallery",toView:function(a){var b=wp.shortcode.next(this.shortcode,a);if(b)return{index:b.index,content:b.content,options:{shortcode:b.shortcode}}},View:wp.mce.View.extend({className:"editor-gallery",template:d.template("editor-gallery"),postID:a("#post_ID").val(),initialize:function(a){this.shortcode=a.shortcode,this.fetch()},fetch:function(){this.attachments=wp.media.gallery.attachments(this.shortcode,this.postID),this.attachments.more().done(_.bind(this.render,this))},getHtml:function(){var a,b=this.shortcode.attrs.named;if(this.attachments.length)return a={attachments:this.attachments.toJSON(),columns:b.columns?parseInt(b.columns,10):3},this.template(a)}}),edit:function(b){var c,d,e=wp.media.gallery,f=this;d=window.decodeURIComponent(a(b).data("wpview-text")),c=e.edit(d),c.state("gallery-edit").on("update",function(d){var g=e.shortcode(d).string();a(b).attr("data-wpview-text",window.encodeURIComponent(g)),wp.mce.views.refreshView(f,g),c.detach()})}},wp.mce.views.register("gallery",wp.mce.gallery),wp.mce.media={toView:function(a){var b=wp.shortcode.next(this.shortcode,a);if(b)return{index:b.index,content:b.content,options:{shortcode:b.shortcode}}},edit:function(b){var c,d,e,f=wp.media[this.shortcode],g=this;for(c in window.mejs.players)window.mejs.players[c].pause();e=window.decodeURIComponent(a(b).data("wpview-text")),d=f.edit(e),d.on("close",function(){d.detach()}),d.state(g.shortcode+"-details").on("update",function(c){var e=wp.media[g.shortcode].update(c).string();a(b).attr("data-wpview-text",window.encodeURIComponent(e)),wp.mce.views.refreshView(g,e),d.detach()}),d.open()}},wp.mce.media.ViewMixin=wp.mce.View.extend({initialize:function(b){this.shortcode=b.shortcode,_.bindAll(this,"setPlayer"),a(this).on("ready",this.setPlayer)},setPlayer:function(b,c){if(c){var d,e,f={},g=".wp-"+this.shortcode.tag+"-shortcode";e=a(c).find(g),e.hasClass("rendered")?(d=e.closest(g).attr("id"),window.mejs.players[d].remove()):e.addClass("rendered"),e.prop("preload","none"),e=e.get(0),_.isUndefined(window._wpmejsSettings)||(f.pluginPath=_wpmejsSettings.pluginPath),e=wp.media.view.MediaDetails.prepareSrc(e),new MediaElementPlayer(e,f)}},getHtml:function(){var a=this.shortcode.attrs.named;return this.template({model:a})}}),wp.mce.video=_.extend({},wp.mce.media,{shortcode:"video",View:wp.mce.media.ViewMixin.extend({className:"editor-video",template:d.template("editor-video")})}),wp.mce.views.register("video",wp.mce.video),wp.mce.audio=_.extend({},wp.mce.media,{shortcode:"audio",View:wp.mce.media.ViewMixin.extend({className:"editor-audio",template:d.template("editor-audio")})}),wp.mce.views.register("audio",wp.mce.audio)}(jQuery);