From 8593f7b5e98cca9a7ea06b0454114aaaf3a8fbfb Mon Sep 17 00:00:00 2001 From: Scott Taylor Date: Thu, 7 Aug 2014 20:25:16 +0000 Subject: [PATCH] Media Grid: add screen reader text in a subview on the toolbar, a `media.view.Label` instance before `media.view.DateFilter`. See #29026. Built from https://develop.svn.wordpress.org/trunk@29435 git-svn-id: http://core.svn.wordpress.org/trunk@29213 1a063a9b-81f0-0310-95a4-ce76da25c4cd --- wp-includes/js/media-views.js | 13 +++++++++++++ wp-includes/js/media-views.min.js | 2 +- wp-includes/media.php | 1 + 3 files changed, 15 insertions(+), 1 deletion(-) diff --git a/wp-includes/js/media-views.js b/wp-includes/js/media-views.js index 409a4991da..4be29ffae6 100644 --- a/wp-includes/js/media-views.js +++ b/wp-includes/js/media-views.js @@ -5716,15 +5716,26 @@ className: 'view-switch media-grid-view-switch', template: media.template( 'media-library-view-switcher') }); + this.toolbar.set( 'libraryViewSwitcher', new LibraryViewSwitcher({ controller: this.controller, priority: -90 }).render() ); + // BulkSelection is a
with subviews, including screen reader text this.toolbar.set( 'bulkSelection', new media.view.BulkSelection({ controller: this.controller, priority: -70 }).render() ); + + // DateFilter is a ').val(this.model.get("url")),this.input=this.$input[0],this.spinner=a('')[0],this.$el.append([this.input,this.spinner]),this.model.on("change:url",this.render,this),this.model.get("url")&&b.delay(function(){c.model.trigger("change:url")},500)},render:function(){var a=this.$input;if(!a.is(":focus"))return this.input.value=this.model.get("url")||"http://",d.View.prototype.render.apply(this,arguments),this},ready:function(){this.focus()},url:function(a){this.model.set("url",a.target.value)},focus:function(){var a=this.$input;a.is(":visible")&&a.focus()[0].select()}}),d.view.EmbedLink=d.view.Settings.extend({className:"embed-link-settings",template:d.template("embed-link-settings"),initialize:function(){this.spinner=a(''),this.$el.append(this.spinner[0]),this.listenTo(this.model,"change:url",this.updateoEmbed)},updateoEmbed:function(){var a=this.model.get("url");this.$(".setting.title").show(),this.$(".embed-container").hide().find(".embed-preview").html(""),a&&a.length<6||(this.spinner.show(),setTimeout(b.bind(this.fetch,this),500))},fetch:function(){a("#embed-url-field").val()===this.model.get("url")&&wp.ajax.send("parse-embed",{data:{post_ID:d.view.settings.post.id,shortcode:"[embed]"+this.model.get("url")+"[/embed]"}}).done(b.bind(this.renderoEmbed,this))},renderoEmbed:function(a){this.spinner.hide(),this.$(".setting.title").hide(),this.$(".embed-container").show().find(".embed-preview").html(a)}}),d.view.EmbedImage=d.view.Settings.AttachmentDisplay.extend({className:"embed-media-settings",template:d.template("embed-image-settings"),initialize:function(){d.view.Settings.AttachmentDisplay.prototype.initialize.apply(this,arguments),this.model.on("change:url",this.updateImage,this)},updateImage:function(){this.$("img").attr("src",this.model.get("url"))}}),d.view.ImageDetails=d.view.Settings.AttachmentDisplay.extend({className:"image-details",template:d.template("image-details"),events:b.defaults(d.view.Settings.AttachmentDisplay.prototype.events,{"click .edit-attachment":"editAttachment","click .replace-attachment":"replaceAttachment","click .advanced-toggle":"onToggleAdvanced",'change [data-setting="customWidth"]':"onCustomSize",'change [data-setting="customHeight"]':"onCustomSize",'keyup [data-setting="customWidth"]':"onCustomSize",'keyup [data-setting="customHeight"]':"onCustomSize"}),initialize:function(){this.options.attachment=this.model.attachment,this.listenTo(this.model,"change:url",this.updateUrl),this.listenTo(this.model,"change:link",this.toggleLinkSettings),this.listenTo(this.model,"change:size",this.toggleCustomSize),d.view.Settings.AttachmentDisplay.prototype.initialize.apply(this,arguments)},prepare:function(){var a=!1;return this.model.attachment&&(a=this.model.attachment.toJSON()),b.defaults({model:this.model.toJSON(),attachment:a},this.options)},render:function(){var a=this,b=arguments;return this.model.attachment&&"pending"===this.model.dfd.state()?this.model.dfd.done(function(){d.view.Settings.AttachmentDisplay.prototype.render.apply(a,b),a.postRender()}).fail(function(){a.model.attachment=!1,d.view.Settings.AttachmentDisplay.prototype.render.apply(a,b),a.postRender()}):(d.view.Settings.AttachmentDisplay.prototype.render.apply(this,arguments),this.postRender()),this},postRender:function(){setTimeout(b.bind(this.resetFocus,this),10),this.toggleLinkSettings(),"show"===getUserSetting("advImgDetails")&&this.toggleAdvanced(!0),this.trigger("post-render")},resetFocus:function(){this.$(".link-to-custom").blur(),this.$(".embed-media-settings").scrollTop(0)},updateUrl:function(){this.$(".image img").attr("src",this.model.get("url")),this.$(".url").val(this.model.get("url"))},toggleLinkSettings:function(){"none"===this.model.get("link")?this.$(".link-settings").addClass("hidden"):this.$(".link-settings").removeClass("hidden")},toggleCustomSize:function(){"custom"!==this.model.get("size")?this.$(".custom-size").addClass("hidden"):this.$(".custom-size").removeClass("hidden")},onCustomSize:function(b){var c,d=a(b.target).data("setting"),e=a(b.target).val();return!/^\d+/.test(e)||parseInt(e,10)<1?void b.preventDefault():void("customWidth"===d?(c=Math.round(1/this.model.get("aspectRatio")*e),this.model.set("customHeight",c,{silent:!0}),this.$('[data-setting="customHeight"]').val(c)):(c=Math.round(this.model.get("aspectRatio")*e),this.model.set("customWidth",c,{silent:!0}),this.$('[data-setting="customWidth"]').val(c)))},onToggleAdvanced:function(a){a.preventDefault(),this.toggleAdvanced()},toggleAdvanced:function(a){var b,c=this.$el.find(".advanced-section");c.hasClass("advanced-visible")||a===!1?(c.removeClass("advanced-visible"),c.find(".advanced-settings").addClass("hidden"),b="hide"):(c.addClass("advanced-visible"),c.find(".advanced-settings").removeClass("hidden"),b="show"),setUserSetting("advImgDetails",b)},editAttachment:function(a){var b=this.controller.states.get("edit-image");window.imageEdit&&b&&(a.preventDefault(),b.set("image",this.model.attachment),this.controller.setState("edit-image"))},replaceAttachment:function(a){a.preventDefault(),this.controller.setState("replace-image")}}),d.view.Cropper=d.View.extend({className:"crop-content",template:d.template("crop-content"),initialize:function(){b.bindAll(this,"onImageLoad")},ready:function(){this.controller.frame.on("content:error:crop",this.onError,this),this.$image=this.$el.find(".crop-image"),this.$image.on("load",this.onImageLoad),a(window).on("resize.cropper",b.debounce(this.onImageLoad,250))},remove:function(){a(window).off("resize.cropper"),this.$el.remove(),this.$el.off(),wp.media.View.prototype.remove.apply(this,arguments)},prepare:function(){return{title:c.cropYourImage,url:this.options.attachment.get("url")}},onImageLoad:function(){var a=this.controller.get("imgSelectOptions");"function"==typeof a&&(a=a(this.options.attachment,this.controller)),a=b.extend(a,{parent:this.$el}),this.trigger("image-loaded"),this.controller.imgSelect=this.$image.imgAreaSelect(a)},onError:function(){var a=this.options.attachment.get("filename");this.views.add(".upload-errors",new d.view.UploaderStatusError({filename:d.view.UploaderStatus.prototype.filename(a),message:_wpMediaViewsL10n.cropError}),{at:0})}}),d.view.EditImage=d.View.extend({className:"image-editor",template:d.template("image-editor"),initialize:function(a){this.editor=window.imageEdit,this.controller=a.controller,d.View.prototype.initialize.apply(this,arguments)},prepare:function(){return this.model.toJSON()},render:function(){return d.View.prototype.render.apply(this,arguments),this},loadEditor:function(){this.editor.open(this.model.get("id"),this.model.get("nonces").edit,this)},back:function(){var a=this.controller.lastState();this.controller.setState(a)},refresh:function(){this.model.fetch()},save:function(){var a=this,b=this.controller.lastState();this.model.fetch().done(function(){a.controller.setState(b)})}}),d.view.Spinner=d.View.extend({tagName:"span",className:"spinner",spinnerTimeout:!1,delay:400,show:function(){return this.spinnerTimeout||(this.spinnerTimeout=b.delay(function(a){a.show()},this.delay,this.$el)),this},hide:function(){return this.$el.hide(),this.spinnerTimeout=clearTimeout(this.spinnerTimeout),this}})}(jQuery,_); \ No newline at end of file +}))}}),d.view.Search=d.View.extend({tagName:"input",className:"search",id:"media-search-input",attributes:{type:"search",placeholder:c.search},events:{input:"search",keyup:"search",change:"search",search:"search"},render:function(){return this.el.value=this.model.escape("search"),this},search:function(a){a.target.value?this.model.set("search",a.target.value):this.model.unset("search")}}),d.view.AttachmentFilters=d.View.extend({tagName:"select",className:"attachment-filters",id:"media-attachment-filters",events:{change:"change"},keys:[],initialize:function(){this.createFilters(),b.extend(this.filters,this.options.filters),this.$el.html(b.chain(this.filters).map(function(b,c){return{el:a("").val(c).html(b.text)[0],priority:b.priority||50}},this).sortBy("priority").pluck("el").value()),this.model.on("change",this.select,this),this.select()},createFilters:function(){this.filters={}},change:function(){var a=this.filters[this.el.value];a&&this.model.set(a.props)},select:function(){var a=this.model,c="all",d=a.toJSON();b.find(this.filters,function(a,e){var f=b.all(a.props,function(a,c){return a===(b.isUndefined(d[c])?null:d[c])});return f?c=e:void 0}),this.$el.val(c)}}),d.view.AttachmentFilters.Uploaded=d.view.AttachmentFilters.extend({createFilters:function(){var a,b=this.model.get("type"),e=d.view.settings.mimeTypes;e&&b&&(a=e[b]),this.filters={all:{text:a||c.allMediaItems,props:{uploadedTo:null,orderby:"date",order:"DESC"},priority:10},uploaded:{text:c.uploadedToThisPost,props:{uploadedTo:d.view.settings.post.id,orderby:"menuOrder",order:"ASC"},priority:20}}}}),d.view.AttachmentFilters.All=d.view.AttachmentFilters.extend({createFilters:function(){var a={};b.each(d.view.settings.mimeTypes||{},function(b,c){a[c]={text:b,props:{type:c,uploadedTo:null,orderby:"date",order:"DESC"}}}),a.all={text:c.allMediaItems,props:{type:null,uploadedTo:null,orderby:"date",order:"DESC"},priority:10},d.view.settings.post.id&&(a.uploaded={text:c.uploadedToThisPost,props:{type:null,uploadedTo:d.view.settings.post.id,orderby:"menuOrder",order:"ASC"},priority:20}),a.unattached={text:c.unattached,props:{uploadedTo:0,type:null,orderby:"menuOrder",order:"ASC"},priority:50},this.filters=a}}),d.view.AttachmentsBrowser=d.View.extend({tagName:"div",className:"attachments-browser",initialize:function(){b.defaults(this.options,{filters:!1,search:!0,display:!1,sidebar:!0,AttachmentView:d.view.Attachment.Library}),this.listenTo(this.controller,"toggle:upload:attachment",b.bind(this.toggleUploader,this)),this.createToolbar(),this.createUploader(),this.createAttachments(),this.updateContent(),this.options.sidebar&&this.createSidebar(),this.options.sidebar&&"errors"!==this.options.sidebar||this.$el.addClass("hide-sidebar"),this.collection.on("add remove reset",this.updateContent,this)},dispose:function(){return this.options.selection.off(null,null,this),d.View.prototype.dispose.apply(this,arguments),this},createToolbar:function(){var b,e,f,g;this.toolbar=new d.view.Toolbar({controller:this.controller}),this.views.add(this.toolbar),this.controller.activeModes.where({id:"grid"}).length&&(e=d.View.extend({className:"view-switch media-grid-view-switch",template:d.template("media-library-view-switcher")}),this.toolbar.set("libraryViewSwitcher",new e({controller:this.controller,priority:-90}).render()),this.toolbar.set("bulkSelection",new d.view.BulkSelection({controller:this.controller,priority:-70}).render()),this.toolbar.set("dateFilterLabel",new d.view.Label({value:c.filterByDate,attributes:{"for":"media-attachment-date-filters"},priority:-75}).render()),this.toolbar.set("dateFilter",new d.view.DateFilter({controller:this.controller,model:this.collection.props,priority:-75}).render())),b=this.options.filters,"uploaded"===b?f=d.view.AttachmentFilters.Uploaded:"all"===b&&(f=d.view.AttachmentFilters.All),f&&(this.toolbar.set("filters",new f({controller:this.controller,model:this.collection.props,priority:-80}).render()),g=a('"),this.toolbar.get("filters").$el.before(g)),this.toolbar.set("spinner",new d.view.Spinner({priority:-70})),this.options.search&&(this.toolbar.set("search",new d.view.Search({controller:this.controller,model:this.collection.props,priority:60}).render()),g=a('"),this.toolbar.get("search").$el.before(g)),this.options.dragInfo&&this.toolbar.set("dragInfo",new d.View({el:a('
'+c.dragInfo+"
")[0],priority:-40})),this.options.suggestedWidth&&this.options.suggestedHeight&&this.toolbar.set("suggestedDimensions",new d.View({el:a('
'+c.suggestedDimensions+" "+this.options.suggestedWidth+" × "+this.options.suggestedHeight+"
")[0],priority:-40}))},updateContent:function(){var a,b=this;a=this.controller.isModeActive("grid")?b.attachmentsNoResults:b.uploader,this.collection.length?(a.$el.addClass("hidden"),b.toolbar.get("spinner").hide()):(this.toolbar.get("spinner").show(),this.dfd=this.collection.more().done(function(){b.collection.length?a.$el.addClass("hidden"):a.$el.removeClass("hidden"),b.toolbar.get("spinner").hide()}))},createUploader:function(){this.uploader=new d.view.UploaderInline({controller:this.controller,status:!1,message:c.noItemsFound,canClose:this.controller.isModeActive("grid")}),this.uploader.hide(),this.views.add(this.uploader)},toggleUploader:function(){this.uploader.$el.hasClass("hidden")?this.uploader.show():this.uploader.hide()},createAttachments:function(){this.attachments=new d.view.Attachments({controller:this.controller,collection:this.collection,selection:this.options.selection,model:this.model,sortable:this.options.sortable,scrollElement:this.options.scrollElement,idealColumnWidth:this.options.idealColumnWidth,AttachmentView:this.options.AttachmentView}),this.views.add(this.attachments),this.attachmentsNoResults=new d.View({controller:this.controller,tagName:"p"}),this.attachmentsNoResults.$el.addClass("hidden no-media"),this.attachmentsNoResults.$el.html(c.noMedia),this.views.add(this.attachmentsNoResults)},createSidebar:function(){var a=this.options,b=a.selection,c=this.sidebar=new d.view.Sidebar({controller:this.controller});this.views.add(c),this.controller.uploader&&c.set("uploads",new d.view.UploaderStatus({controller:this.controller,priority:40})),b.on("selection:single",this.createSingle,this),b.on("selection:unsingle",this.disposeSingle,this),b.single()&&this.createSingle()},createSingle:function(){var a=this.sidebar,b=this.options.selection.single();a.set("details",new d.view.Attachment.Details({controller:this.controller,model:b,priority:80})),a.set("compat",new d.view.AttachmentCompat({controller:this.controller,model:b,priority:120})),this.options.display&&a.set("display",new d.view.Settings.AttachmentDisplay({controller:this.controller,model:this.model.display(b),attachment:b,priority:160,userSettings:this.model.get("displayUserSettings")}))},disposeSingle:function(){var a=this.sidebar;a.unset("details"),a.unset("compat"),a.unset("display")}}),d.view.Selection=d.View.extend({tagName:"div",className:"media-selection",template:d.template("media-selection"),events:{"click .edit-selection":"edit","click .clear-selection":"clear"},initialize:function(){b.defaults(this.options,{editable:!1,clearable:!0}),this.attachments=new d.view.Attachments.Selection({controller:this.controller,collection:this.collection,selection:this.collection,model:new Backbone.Model}),this.views.set(".selection-view",this.attachments),this.collection.on("add remove reset",this.refresh,this),this.controller.on("content:activate",this.refresh,this)},ready:function(){this.refresh()},refresh:function(){if(this.$el.children().length){var a=this.collection,b="edit-selection"===this.controller.content.mode();this.$el.toggleClass("empty",!a.length),this.$el.toggleClass("one",1===a.length),this.$el.toggleClass("editing",b),this.$(".count").text(c.selected.replace("%d",a.length))}},edit:function(a){a.preventDefault(),this.options.editable&&this.options.editable.call(this,this.collection)},clear:function(a){a.preventDefault(),this.collection.reset(),new d.view.FocusManager({el:this.el}).focus()}}),d.view.Attachment.Selection=d.view.Attachment.extend({className:"attachment selection",toggleSelection:function(){this.options.selection.single(this.model)}}),d.view.Attachments.Selection=d.view.Attachments.extend({events:{},initialize:function(){return b.defaults(this.options,{sortable:!0,resize:!1,AttachmentView:d.view.Attachment.Selection}),d.view.Attachments.prototype.initialize.apply(this,arguments)}}),d.view.Attachment.EditSelection=d.view.Attachment.Selection.extend({buttons:{close:!0}}),d.view.Settings=d.View.extend({events:{"click button":"updateHandler","change input":"updateHandler","change select":"updateHandler","change textarea":"updateHandler"},initialize:function(){this.model=this.model||new Backbone.Model,this.model.on("change",this.updateChanges,this)},prepare:function(){return b.defaults({model:this.model.toJSON()},this.options)},render:function(){return d.View.prototype.render.apply(this,arguments),b(this.model.attributes).chain().keys().each(this.update,this),this},update:function(a){var b,c,d=this.model.get(a),e=this.$('[data-setting="'+a+'"]');e.length&&(e.is("select")?(c=e.find('[value="'+d+'"]'),c.length?(e.find("option").prop("selected",!1),c.prop("selected",!0)):this.model.set(a,e.find(":selected").val())):e.hasClass("button-group")?(b=e.find("button").removeClass("active"),b.filter('[value="'+d+'"]').addClass("active")):e.is('input[type="text"], textarea')?e.is(":focus")||e.val(d):e.is('input[type="checkbox"]')&&e.prop("checked",!!d&&"false"!==d))},updateHandler:function(b){var c,d=a(b.target).closest("[data-setting]"),e=b.target.value;b.preventDefault(),d.length&&(d.is('input[type="checkbox"]')&&(e=d[0].checked),this.model.set(d.data("setting"),e),(c=d.data("userSetting"))&&setUserSetting(c,e))},updateChanges:function(a){a.hasChanged()&&b(a.changed).chain().keys().each(this.update,this)}}),d.view.Settings.AttachmentDisplay=d.view.Settings.extend({className:"attachment-display-settings",template:d.template("attachment-display-settings"),initialize:function(){var a=this.options.attachment;b.defaults(this.options,{userSettings:!1}),d.view.Settings.prototype.initialize.apply(this,arguments),this.model.on("change:link",this.updateLinkTo,this),a&&a.on("change:uploading",this.render,this)},dispose:function(){var a=this.options.attachment;a&&a.off(null,null,this),d.view.Settings.prototype.dispose.apply(this,arguments)},render:function(){var a=this.options.attachment;return a&&b.extend(this.options,{sizes:a.get("sizes"),type:a.get("type")}),d.view.Settings.prototype.render.call(this),this.updateLinkTo(),this},updateLinkTo:function(){var a=this.model.get("link"),b=this.$(".link-to-custom"),c=this.options.attachment;return"none"===a||"embed"===a||!c&&"custom"!==a?void b.addClass("hidden"):(c&&("post"===a?b.val(c.get("link")):"file"===a?b.val(c.get("url")):this.model.get("linkUrl")||b.val("http://"),b.prop("readonly","custom"!==a)),b.removeClass("hidden"),void(b.is(":visible")&&b.focus()[0].select()))}}),d.view.Settings.Gallery=d.view.Settings.extend({className:"collection-settings gallery-settings",template:d.template("gallery-settings")}),d.view.Settings.Playlist=d.view.Settings.extend({className:"collection-settings playlist-settings",template:d.template("playlist-settings")}),d.view.Attachment.Details=d.view.Attachment.extend({tagName:"div",className:"attachment-details",template:d.template("attachment-details"),events:{"change [data-setting]":"updateSetting","change [data-setting] input":"updateSetting","change [data-setting] select":"updateSetting","change [data-setting] textarea":"updateSetting","click .delete-attachment":"deleteAttachment","click .trash-attachment":"trashAttachment","click .edit-attachment":"editAttachment","click .refresh-attachment":"refreshAttachment","click .advanced-toggle":"onToggleAdvanced",keydown:"toggleSelectionHandler"},initialize:function(){this.options=b.defaults(this.options,{rerenderOnModelChange:!1}),d.view.Attachment.prototype.initialize.apply(this,arguments)},render:function(){d.view.Attachment.prototype.render.apply(this,arguments),"show"===getUserSetting("advImgDetails")&&this.toggleAdvanced(!0)},deleteAttachment:function(a){a.preventDefault(),confirm(c.warnDelete)&&(this.model.destroy(),new d.view.FocusManager({el:this.el}).focus())},trashAttachment:function(a){a.preventDefault(),this.model.destroy()},editAttachment:function(a){var b=this.controller.states.get("edit-image");window.imageEdit&&b?(a.preventDefault(),b.set("image",this.model),this.controller.setState("edit-image")):this.$el.addClass("needs-refresh")},refreshAttachment:function(a){this.$el.removeClass("needs-refresh"),a.preventDefault(),this.model.fetch()},toggleSelectionHandler:function(b){return"keydown"===b.type&&9===b.keyCode&&b.shiftKey&&b.target===a(":tabbable",this.$el).filter(":first")[0]?(a(".attachments-browser .details").focus(),!1):void 0},onToggleAdvanced:function(a){a.preventDefault(),this.toggleAdvanced()},toggleAdvanced:function(a){var b=this.$(".advanced-section"),c="show";b.hasClass("advanced-visible")||!1===a?(b.removeClass("advanced-visible"),b.find(".advanced-settings").addClass("hidden"),c="hide"):(b.addClass("advanced-visible"),b.find(".advanced-settings").removeClass("hidden")),setUserSetting("advImgDetails",c)}}),d.view.AttachmentCompat=d.View.extend({tagName:"form",className:"compat-item",events:{submit:"preventDefault","change input":"save","change select":"save","change textarea":"save"},initialize:function(){this.model.on("change:compat",this.render,this)},dispose:function(){return this.$(":focus").length&&this.save(),d.View.prototype.dispose.apply(this,arguments)},render:function(){var a=this.model.get("compat");if(a&&a.item)return this.views.detach(),this.$el.html(a.item),this.views.render(),this},preventDefault:function(a){a.preventDefault()},save:function(a){var c={};a&&a.preventDefault(),b.each(this.$el.serializeArray(),function(a){c[a.name]=a.value}),this.model.saveCompat(c)}}),d.view.Iframe=d.View.extend({className:"media-iframe",render:function(){return this.views.detach(),this.$el.html('