WordPress/wp-includes/js/media-views.min.js
2012-10-16 22:58:39 +00:00

1 line
17 KiB
JavaScript

(function(e){var f=wp.media,d=f.model.Attachment,c=f.model.Attachments,a=f.model.Query,b;b=f.view.l10n=_.isUndefined(_wpMediaViewsL10n)?{}:_wpMediaViewsL10n;f.controller.Workflow=Backbone.Model.extend({defaults:{title:"",multiple:false,view:"library",library:{},selection:[]},initialize:function(){this.createSelection();this._views={};this._pendingViews={};this.modal=new f.view.Modal({controller:this});this.add("library",f.view.Workspace.Library,{collection:f.query(this.get("library"))});this.unset("library");this.add("gallery",f.view.Workspace.Gallery,{collection:this.selection});this.add("gallery-library",f.view.Workspace.Library.Gallery,{collection:f.query({type:"image"})})},add:function(i,h,g){this.remove(i);this._pendingViews[i]={view:h,options:g};this.trigger("add add:"+i,h,g);return this},view:function(h){var g;h=h||this.get("view");g=this._pendingViews[h];if(!this._views[h]&&g){this._views[h]=new g.view(_.extend({controller:this},g.options||{}));delete this._pendingViews[h];this.trigger("init init:"+h,this._views[h])}return this._views[h]},remove:function(g){delete this._views[g];delete this._pendingViews[g];this.trigger("remove remove:"+g);return this},render:function(j,i,h){var g;j=j||this.get("view");if(i){this.add(j,i,h)}g=this.view(j);if(!g){return this}g.render();this.modal.content(g);return this},update:function(g){this.close();this.trigger("update",this.selection,this);this.trigger("update:"+g,this.selection,this);this.selection.clear()},createSelection:function(){var g=this;this.selection=new c(this.get("selection"));this.unset("selection");_.extend(this.selection,{add:function(i,h){if(!g.get("multiple")){i=_.isArray(i)?_.first(i):i;this.clear(h)}return c.prototype.add.call(this,i,h)},clear:function(h){return this.remove(this.models,h)},reset:function(i,h){return this.clear(h).add(i,h)},has:function(h){return !!(this.getByCid(h.cid)||this.get(h.id))}})}});_.each(["attach","detach","open","close"],function(g){f.controller.Workflow.prototype[g]=function(){this.modal[g].apply(this.modal,arguments);return this}});f.view.Modal=Backbone.View.extend({tagName:"div",template:f.template("media-modal"),events:{"click .media-modal-backdrop, .media-modal-close":"closeHandler"},initialize:function(){this.controller=this.options.controller;this.controller.on("change:title",this.render,this);_.defaults(this.options,{container:document.body})},render:function(){this.options.$content=this.options.$content||e("<div />");this.options.$content.detach();this.$el.html(this.template(this.controller.toJSON()));this.$(".media-modal-content").append(this.options.$content);return this},attach:function(){this.$el.appendTo(this.options.container);this.controller.trigger("attach",this.controller)},detach:function(){this.$el.detach();this.controller.trigger("detach",this.controller)},open:function(){this.$el.show();this.controller.trigger("open",this.controller)},close:function(){this.$el.hide();this.controller.trigger("close",this.controller)},closeHandler:function(g){g.preventDefault();this.close()},content:function(g){if(this.options.$content){this.options.$content.detach()}this.options.$content=(g instanceof Backbone.View)?g.$el:g;return this.render()}});f.view.Toolbar=Backbone.View.extend({tagName:"div",className:"media-toolbar",initialize:function(){this._views={};this.$primary=e('<div class="media-toolbar-primary" />').prependTo(this.$el);this.$secondary=e('<div class="media-toolbar-secondary" />').prependTo(this.$el);if(this.options.items){_.each(this.options.items,function(g,h){this.add(h,g,{silent:true})},this);this.render()}},render:function(){var g=_.chain(this._views).sortBy(function(h){return h.options.priority||10}).groupBy(function(h){return(h.options.priority||10)>0?"primary":"secondary"}).value();e(_.pluck(this._views,"el")).detach();this.$primary.html(_.pluck(g.primary||[],"el"));this.$secondary.html(_.pluck(g.secondary||[],"el"));return this},add:function(i,g,h){if(!(g instanceof Backbone.View)){g.classes=[i].concat(g.classes||[]);g=new f.view.Button(g).render()}this._views[i]=g;if(!h||!h.silent){this.render()}return this},get:function(g){return this._views[g]},remove:function(h,g){delete this._views[h];if(!g||!g.silent){this.render()}return this}});f.view.Button=Backbone.View.extend({tagName:"a",className:"media-button",attributes:{href:"#"},events:{click:"click"},defaults:{text:"",style:"",size:"large"},initialize:function(){this.model=new Backbone.Model(this.defaults);_.each(this.defaults,function(i,g){var h=this.options[g];if(_.isUndefined(h)){return}this.model.set(g,h);delete this.options[g]},this);if(this.options.dropdown){this.options.dropdown.addClass("dropdown")}this.model.on("change",this.render,this)},render:function(){var g=["button",this.className];if(this.model.get("style")){g.push("button-"+this.model.get("style"))}if(this.model.get("size")){g.push("button-"+this.model.get("size"))}g=_.uniq(g.concat(this.options.classes));this.el.className=g.join(" ");if(this.options.dropdown){this.options.dropdown.detach()}this.$el.text(this.model.get("text"));if(this.options.dropdown){this.$el.append(this.options.dropdown)}return this},click:function(g){g.preventDefault();if(this.options.click){this.options.click.apply(this,arguments)}}});f.view.ButtonGroup=Backbone.View.extend({tagName:"div",className:"button-group button-large media-button-group",initialize:function(){this.buttons=_.map(this.options.buttons||[],function(g){if(g instanceof Backbone.View){return g}else{return new f.view.Button(g).render()}});delete this.options.buttons;if(this.options.classes){this.$el.addClass(this.options.classes)}},render:function(){this.$el.html(e(_.pluck(this.buttons,"el")).detach());return this}});f.view.Attachment=Backbone.View.extend({tagName:"li",className:"attachment",template:f.template("attachment"),events:{"click .attachment-preview":"toggleSelection","mouseenter .attachment-preview":"shrink","mouseleave .attachment-preview":"expand","change .describe":"describe","click .close":"toggleSelection"},buttons:{},initialize:function(){this.controller=this.options.controller;this.model.on("change:sizes change:uploading",this.render,this);this.model.on("change:percent",this.progress,this);this.model.on("add",this.select,this);this.model.on("remove",this.deselect,this);this.$el.on("click","a",this.preventDefault)},render:function(){var h=this.model.toJSON(),g=_.defaults(this.model.toJSON(),{orientation:"landscape",uploading:false,type:"",subtype:"",icon:"",filename:"",caption:"",title:""});g.buttons=this.buttons;g.describe=this.controller.get("describe");if("image"===g.type){_.extend(g,this.crop())}this.$el.html(this.template(g));if(g.uploading){this.$bar=this.$(".media-progress-bar div")}else{delete this.$bar}if(this.controller.selection.has(this.model)){this.select()}return this},progress:function(){if(this.$bar&&this.$bar.length){this.$bar.width(this.model.get("percent")+"%")}},toggleSelection:function(h){var g=this.controller.selection;g[g.has(this.model)?"remove":"add"](this.model)},select:function(g,h){if(h&&h!==this.controller.selection){return}this.$el.addClass("selected")},deselect:function(g,h){if(h&&h!==this.controller.selection){return}this.$el.removeClass("selected")},preventDefault:function(g){g.preventDefault()},imageSize:function(g){var h=this.model.get("sizes");g=g||"medium";if(h&&h[g]){return h[g]}else{return{url:this.model.get("url"),width:this.model.get("width"),height:this.model.get("height"),orientation:this.model.get("orientation")}}},crop:function(g){var j=199,i=this.imageSize(g),h,k;h=wp.media.fit(_.extend({maxWidth:j},i));k=wp.media.fit(_.extend({maxHeight:j},i));_.extend(i,h.width>k.width?h:k);i.top=(j-i.height)/2;i.left=(j-i.width)/2;return i},fit:function(g){var k=10,i=199,j=i-(k*2),h=_.extend(wp.media.fit(_.extend({maxWidth:j,maxHeight:j},this.imageSize(g))));h.top=Math.round(k+(j-h.height)/2);h.left=Math.round(k+(j-h.width)/2);return h},shrink:function(){var g=_.pick(this.fit(),"top","left","width","height");this.$el.addClass("fit");this.$(".thumbnail").css(g);this.$(".thumbnail img").css(_.extend(g,{top:0,left:0}))},expand:function(){var g=_.pick(this.crop(),"top","left","width","height");this.$el.removeClass("fit");this.$(".thumbnail img").css(g);this.$(".thumbnail").css({top:0,left:0,width:199,height:199})},describe:function(g){if("image"===this.model.get("type")){this.model.save("caption",g.target.value)}else{this.model.save("title",g.target.value)}}});f.view.Attachment.Library=f.view.Attachment.extend({className:"attachment library"});f.view.Attachment.Gallery=f.view.Attachment.extend({buttons:{close:true},events:(function(){var g=_.clone(f.view.Attachment.prototype.events);delete g["click .attachment-preview"];return g}())});f.view.Workspace=Backbone.View.extend({tagName:"div",className:"media-workspace",template:f.template("media-workspace"),attachmentsView:{},events:{dragenter:"maybeInitUploader",mouseenter:"maybeInitUploader"},initialize:function(){this.controller=this.options.controller;_.defaults(this.options,{selectOne:false,uploader:{},attachmentsView:{}});this.$content=e('<div class="existing-attachments" />');this.attachmentsView=_.extend({directions:this.controller.get("multiple")?b.selectMediaMultiple:b.selectMediaSingular},this.attachmentsView,this.options.attachmentsView,{controller:this.controller,collection:this.collection});this.attachmentsView=new f.view.Attachments(this.attachmentsView);this.$content.append(this.attachmentsView.$el);wp.Uploader.queue.on("add remove reset change:percent",this.renderUploadProgress,this);if(this.controller.get("multiple")){wp.Uploader.queue.on("add",this.selectUpload,this)}},render:function(){this.$content.detach();this.attachmentsView.render();this.renderUploadProgress();this.$el.html(this.template(this.options)).append(this.$content);this.$bar=this.$(".upload-attachments .media-progress-bar div");return this},maybeInitUploader:function(){var g=this;if(this.uploader||!this.$el.closest("body").length){return}this.uploader=new wp.Uploader(_.extend({container:this.$el,dropzone:this.$el,browser:this.$(".upload-attachments a")},this.options.uploader))},selectUpload:function(g){this.controller.selection.add(g)},renderUploadProgress:function(){var g=wp.Uploader.queue;this.$el.toggleClass("uploading",!!g.length);if(!this.$bar||!g.length){return}this.$bar.width((g.reduce(function(h,i){if(i.get("uploading")){return h+(i.get("percent")||0)}else{return h+100}},0)/g.length)+"%")}});f.view.Workspace.Library=f.view.Workspace.extend({attachmentsView:{AttachmentView:f.view.Attachment.Library},initialize:function(){f.view.Workspace.prototype.initialize.apply(this,arguments);if(this.controller.get("multiple")){this.initToolbarView()}},initToolbarView:function(){var g=this.controller;this.toolbarView=new f.view.Toolbar({items:{"selection-preview":new f.view.SelectionPreview({controller:this.controller,collection:this.controller.selection,priority:-40}),"create-new-gallery":{style:"primary",text:b.createNewGallery,priority:40,click:function(){g.render("gallery")}},"insert-into-post":new f.view.ButtonGroup({priority:30,classes:"dropdown-flip-x",buttons:[{text:b.insertIntoPost,click:_.bind(g.update,g,"insert")},{classes:["down-arrow"],dropdown:new f.view.AttachmentDisplaySettings().render().$el,click:function(i){var h=this.$el;if(!e(i.target).closest(".dropdown").length){h.toggleClass("active")}i.stopPropagation();if(h.is(":visible")){e(document.body).one("click",function(){h.removeClass("active")})}}}]}).render(),"add-to-gallery":{text:b.addToGallery,priority:20}}});this.controller.selection.on("add remove",function(){var i=this.controller.selection.length,h;this.$el.toggleClass("with-toolbar",!!i);h=i>1&&this.controller.selection.all(function(j){return"image"===j.get("type")});this.toolbarView.get("create-new-gallery").$el.toggle(h);insert=this.toolbarView.get("insert-into-post");_.each(insert.buttons,function(j){j.model.set("style",h?"":"primary")})},this);this.$content.append(this.toolbarView.$el)}});f.view.Workspace.Library.Gallery=f.view.Workspace.Library.extend({initToolbarView:function(){var h=this.controller,g=h.get("editing"),i={"selection-preview":new f.view.SelectionPreview({controller:this.controller,collection:this.controller.selection,priority:-40,clearable:false}),"continue-editing-gallery":{style:"primary",text:b.continueEditingGallery,priority:40,click:function(){h.render("gallery")}}};this.toolbarView=new f.view.Toolbar({items:i});this.$el.addClass("with-toolbar");this.$content.append(this.toolbarView.$el)}});f.view.Workspace.Gallery=f.view.Workspace.extend({attachmentsView:{AttachmentView:f.view.Attachment.Gallery,sortable:true},initialize:function(){f.view.Workspace.prototype.initialize.apply(this,arguments);this.initToolbarView()},initToolbarView:function(){var h=this.controller,g=h.get("editing"),i={"update-gallery":{style:"primary",text:g?b.updateGallery:b.insertGalleryIntoPost,priority:40,click:_.bind(h.update,h,"gallery")},"return-to-library":{text:g?b.addImagesFromLibrary:b.returnToLibrary,priority:-40,click:function(){h.render(g?"gallery-library":"library")}}};this.toolbarView=new f.view.Toolbar({items:i});this.$el.addClass("with-toolbar");this.$content.append(this.toolbarView.$el)}});f.view.Attachments=Backbone.View.extend({tagName:"div",className:"attachments",template:f.template("attachments"),events:{"keyup .search":"search"},initialize:function(){this.controller=this.options.controller;_.defaults(this.options,{refreshSensitivity:200,refreshThreshold:3,AttachmentView:f.view.Attachment,sortable:false});_.each(["add","remove"],function(g){this.collection.on(g,function(j,h,i){this[g](j,i.index)},this)},this);this.collection.on("reset",this.refresh,this);this.$list=e("<ul />");this.list=this.$list[0];this.scroll=_.chain(this.scroll).bind(this).throttle(this.options.refreshSensitivity).value();this.$list.on("scroll.attachments",this.scroll);this.initSortable()},initSortable:function(){var g=this.collection,h;if(!this.options.sortable||!e.fn.sortable){return}this.$list.sortable({disabled:!!g.comparator,containment:this.$list,tolerance:"pointer",start:function(i,j){h=j.item.index()},update:function(j,k){var i=g.at(h);g.remove(i,{silent:true}).add(i,{at:k.item.index(),silent:true})}});g.props.on("change:orderby",function(){this.$list.sortable("option","disabled",!!g.comparator)},this)},render:function(){this.$list.detach();this.$el.html(this.template(this.options)).append(this.$list);this.refresh();return this},refresh:function(){if(!this.collection.length){this.collection.more();this.$list.empty();return this}this.$list.html(this.collection.map(function(g){return new this.options.AttachmentView({controller:this.controller,model:g}).render().$el},this));this.scroll();return this},add:function(j,h){var g,i;g=new this.options.AttachmentView({controller:this.controller,model:j}).render();i=this.$list.children();if(i.length>h){i.eq(h).before(g.$el)}else{this.$list.append(g.$el)}},remove:function(i,g){var h=this.$list.children();if(h.length){h.eq(g).detach()}},scroll:function(g){if(!this.$list.is(":visible")){return}if(this.list.scrollHeight<this.list.scrollTop+(this.list.clientHeight*this.options.refreshThreshold)){this.collection.more()}},search:function(h){var g=this.collection.props;if(h.target.value){g.set("search",h.target.value)}else{g.unset("search")}}});f.view.SelectionPreview=Backbone.View.extend({tagName:"div",className:"selection-preview",template:f.template("media-selection-preview"),events:{"click .clear-selection":"clear"},initialize:function(){_.defaults(this.options,{clearable:true});this.controller=this.options.controller;this.collection.on("add change:url remove",this.render,this);this.render()},render:function(){var g=_.clone(this.options),j,i,h;if(!this.collection.length){this.$el.empty();return this}g.count=this.collection.length;j=this.collection.first();i=j.get("sizes");if("image"===j.get("type")){g.thumbnail=(i&&i.thumbnail)?i.thumbnail.url:j.get("url")}else{g.thumbnail=j.get("icon")}this.$el.html(this.template(g));return this},clear:function(g){g.preventDefault();this.collection.clear()}});f.view.AttachmentDisplaySettings=Backbone.View.extend({tagName:"div",className:"attachment-display-settings",template:f.template("attachment-display-settings"),events:{"click button":"updateHandler"},settings:{align:{accepts:["left","center","right","none"],name:"align",fallback:"none"},link:{accepts:["post","file","none"],name:"urlbutton",fallback:"post"},size:{accepts:["thumbnail","medium","large","full"],name:"imgsize",fallback:"medium"}},initialize:function(){var g=this.settings;this.model=new Backbone.Model();_.each(g,function(i,h){this.model.set(h,getUserSetting(i.name,i.fallback))},this);this.model.validate=function(h){return _.any(h,function(j,i){return !g[i]||!_.contains(g[i].accepts,j)})};this.model.on("change",function(i,h){if(!h.changes){return}_.each(_.keys(h.changes),function(j){if(g[j]){setUserSetting(g[j].name,i.get(j))}})},this);this.model.on("change",this.updateChanges,this)},render:function(){this.$el.html(this.template(this.model.toJSON()));_(this.model.attributes).chain().keys().each(this.update,this);return this},update:function(g){var h=this.$('[data-setting="'+g+'"] button').removeClass("active");h.filter('[value="'+this.model.get(g)+'"]').addClass("active")},updateHandler:function(g){var h=e(g.target).closest(".button-group");g.preventDefault();if(h.length){this.model.set(h.data("setting"),g.target.value)}},updateChanges:function(h,g){if(g.changes){_(g.changes).chain().keys().each(this.update,this)}}})}(jQuery));