Changeset 22321
- Timestamp:
- 10/29/2012 06:56:23 AM (11 years ago)
- Location:
- trunk
- Files:
-
- 5 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/wp-admin/includes/meta-boxes.php
r22320 r22321 1019 1019 $thumbnailId = $element.find('input[name="thumbnail_id"]'), 1020 1020 title = '<?php _e( "Choose a Featured Image" ); ?>', 1021 workflow, selection, setFeaturedImage; 1021 update = '<?php _e( "Update Featured Image" ); ?>', 1022 frame, selection, setFeaturedImage; 1022 1023 1023 1024 setFeaturedImage = function( thumbnailId ) { … … 1030 1031 event.preventDefault(); 1031 1032 1032 if ( ! workflow) {1033 workflow= wp.media({1033 if ( ! frame ) { 1034 frame = wp.media({ 1034 1035 title: title, 1035 1036 library: { … … 1038 1039 }); 1039 1040 1040 selection = workflow.state().get('selection'); 1041 1042 selection.on( 'add', function( model ) { 1043 var sizes = model.get('sizes'), 1044 size; 1045 1046 setFeaturedImage( model.id ); 1047 1048 // @todo: might need a size hierarchy equivalent. 1049 if ( sizes ) 1050 size = sizes['post-thumbnail'] || sizes.medium; 1051 1052 // @todo: Need a better way of accessing full size 1053 // data besides just calling toJSON(). 1054 size = size || model.toJSON(); 1055 1056 workflow.close(); 1057 selection.clear(); 1058 1059 $( '<img />', { 1060 src: size.url, 1061 width: size.width 1062 }).prependTo( $element ); 1063 }); 1041 frame.toolbar( new wp.media.view.Toolbar({ 1042 controller: frame, 1043 items: { 1044 update: { 1045 style: 'primary', 1046 text: update, 1047 priority: 40, 1048 1049 click: function() { 1050 var selection = frame.state().get('selection'), 1051 model = selection.first(), 1052 sizes = model.get('sizes'), 1053 size; 1054 1055 setFeaturedImage( model.id ); 1056 1057 // @todo: might need a size hierarchy equivalent. 1058 if ( sizes ) 1059 size = sizes['post-thumbnail'] || sizes.medium; 1060 1061 // @todo: Need a better way of accessing full size 1062 // data besides just calling toJSON(). 1063 size = size || model.toJSON(); 1064 1065 frame.close(); 1066 selection.clear(); 1067 1068 $( '<img />', { 1069 src: size.url, 1070 width: size.width 1071 }).prependTo( $element ); 1072 } 1073 } 1074 } 1075 }) ); 1064 1076 } 1065 1077 1066 workflow.open();1078 frame.open(); 1067 1079 }); 1068 1080 -
trunk/wp-includes/css/media-views.css
r22320 r22321 73 73 */ 74 74 .media-toolbar { 75 position: relative; 76 z-index: 50; 77 height: 60px; 75 position: absolute; 76 top: 0; 77 left: 220px; 78 right: 0; 79 z-index: 100; 80 height: 50px; 78 81 padding: 0 10px; 79 82 border-bottom: 1px solid #dfdfdf; … … 92 95 margin-left: 10px; 93 96 float: left; 94 margin-top: 1 6px;97 margin-top: 10px; 95 98 } 96 99 … … 99 102 margin-right: 10px; 100 103 float: left; 101 margin-top: 16px; 104 margin-top: 10px; 105 } 106 107 /** 108 * Sidebar 109 */ 110 .media-sidebar { 111 position: absolute; 112 top: 0; 113 left: 0; 114 bottom: 0; 115 width: 219px; 116 z-index: 50; 117 background: #f5f5f5; 118 border-right: 1px solid #dfdfdf; 119 } 120 121 .hide-sidebar .media-sidebar { 122 display: none; 123 } 124 125 .media-sidebar .sidebar-title { 126 font-weight: 200; 127 font-size: 20px; 128 margin: 0; 129 padding: 12px 10px 10px; 130 line-height: 28px; 131 /*border-bottom: 1px solid #dfdfdf;*/ 132 } 133 134 .media-sidebar .sidebar-content { 135 padding: 0 10px; 136 } 137 138 .media-sidebar .search { 139 display: block; 140 width: 100%; 141 } 142 143 .media-sidebar .selection-preview { 144 display: block; 145 padding-top: 5px; 102 146 } 103 147 … … 106 150 */ 107 151 108 .media-frame .attachments, 109 .media-frame .media-toolbar { 152 .media-frame .media-content, 153 .media-frame .media-toolbar, 154 .media-frame .media-sidebar { 110 155 -webkit-transition-property: left, right, top, bottom, margin; 111 156 -moz-transition-property: left, right, top, bottom, margin; … … 121 166 } 122 167 123 .media-frame . attachments{124 position: absolute; 125 top: 61px;126 left: 0;168 .media-frame .media-content { 169 position: absolute; 170 top: 51px; 171 left: 220px; 127 172 right: 0; 128 173 bottom: 0; 129 174 height: auto; 130 175 width: auto; 131 } 132 133 .media-frame.hide-toolbar .attachments { 134 top: 0; 135 } 136 137 .media-frame .media-toolbar { 138 margin-top: 0; 139 } 140 141 .media-frame.hide-toolbar .media-toolbar { 142 margin-top: -61px; 176 overflow: auto; 177 } 178 179 .media-frame.hide-sidebar .media-content { 180 left: 0; 143 181 } 144 182 … … 146 184 display: none; 147 185 } 148 /** 149 * Attachments 150 */ 151 .attachments { 152 position: relative; 153 width: 100%; 154 height: 100%; 155 } 156 157 .attachments-header { 158 position: absolute; 159 top: 0; 160 left: 0; 161 right: 0; 162 height: 50px; 163 padding: 0 10px; 164 background: #fff; 165 } 166 167 .attachments-header h3 { 168 float: left; 169 margin: 0; 170 padding: 0; 171 line-height: 50px; 172 font-size: 18px; 173 font-weight: 200; 174 } 175 176 .attachments-header .search { 177 float: right; 186 187 /** 188 * Search 189 */ 190 .media-frame .search { 178 191 margin-top: 11px; 179 192 padding: 4px; … … 184 197 } 185 198 199 /** 200 * Attachments 201 */ 202 /*.attachments { 203 position: relative; 204 width: 100%; 205 height: 100%; 206 } 207 208 .attachments-header { 209 position: absolute; 210 top: 0; 211 left: 0; 212 right: 0; 213 height: 50px; 214 padding: 0 10px; 215 background: #fff; 216 } 217 218 .attachments-header h3 { 219 float: left; 220 margin: 0; 221 padding: 0; 222 line-height: 50px; 223 font-size: 18px; 224 font-weight: 200; 225 } 226 186 227 .attachments ul { 187 228 position: absolute; … … 192 233 overflow: auto; 193 234 margin: 0 0 20px; 194 } 235 }*/ 195 236 196 237 /** … … 402 443 background: rgba( 0, 86, 132, 0.9 ); 403 444 404 /*z-index: -200;*/405 445 z-index: 250000; 406 446 display: none; … … 414 454 transition: opacity 250ms; 415 455 } 416 417 /*.drag-over .uploader-window {418 z-index: 250000;419 }*/420 456 421 457 .uploader-window-content { -
trunk/wp-includes/js/media-views.js
r22320 r22321 114 114 id: 'library', 115 115 multiple: false, 116 describe: false 116 describe: false, 117 title: l10n.mediaLibrary 117 118 }, 118 119 … … 131 132 toolbar; 132 133 134 // Toolbar. 133 135 toolbar = this._postLibraryToolbar = new media.view.Toolbar.PostLibrary({ 134 136 controller: frame, 135 s election: this.get('selection')137 state: this 136 138 }); 137 139 … … 139 141 this.get('selection').on( 'add remove', toolbar.visibility, toolbar ); 140 142 143 // Sidebar. 144 frame.sidebar( new media.view.Sidebar({ 145 controller: frame, 146 views: { 147 search: new media.view.Search({ 148 controller: frame, 149 model: this.get('library').props, 150 priority: 20 151 }), 152 153 selection: new media.view.SelectionPreview({ 154 controller: frame, 155 collection: this.get('selection'), 156 priority: 40 157 }) 158 } 159 }) ); 160 161 // Content. 141 162 frame.content( new media.view.Attachments({ 142 directions: this.get('multiple') ? l10n.selectMediaMultiple : l10n.selectMediaSingular,143 163 controller: frame, 144 164 collection: this.get('library'), … … 146 166 AttachmentView: media.view.Attachment.Library 147 167 }).render() ); 148 149 if ( ! this.get('selection').length )150 frame.$el.addClass('hide-toolbar');151 168 152 169 // If we're in a workflow that supports multiple attachments, … … 174 191 id: 'gallery', 175 192 multiple: true, 176 describe: true 193 describe: true, 194 title: l10n.createGallery 177 195 }, 178 196 … … 187 205 var frame = this.frame; 188 206 207 // Toolbar. 189 208 frame.toolbar( new media.view.Toolbar.Gallery({ 190 209 controller: frame, 191 editing: this.get('editing'), 192 selection: this.get('selection') 210 state: this 193 211 }) ); 194 212 213 // Sidebar. 214 frame.sidebar( new media.view.Sidebar({ 215 controller: frame 216 }).render() ); 217 218 // Content. 195 219 frame.content( new media.view.Attachments({ 196 directions: 'Gallery time!',197 220 controller: frame, 198 221 collection: this.get('selection'), … … 246 269 247 270 render: function() { 248 var els = [ this. sidebar().el, this.toolbar().el, this.content().el ];271 var els = [ this.toolbar().el, this.sidebar().el, this.content().el ]; 249 272 250 273 if ( this.modal ) … … 635 658 media.view.Toolbar.PostLibrary = media.view.Toolbar.extend({ 636 659 initialize: function() { 637 var selection = this.options.selection, 660 var state = this.options.state, 661 selection = state.get('selection'), 638 662 controller = this.options.controller; 639 663 640 664 this.options.items = { 641 'selection-preview': new media.view.SelectionPreview({642 controller: controller,643 collection: selection,644 priority: -40645 }),646 647 665 'create-new-gallery': { 648 666 style: 'primary', … … 663 681 click: function() { 664 682 controller.close(); 665 controller.state().trigger( 'insert', selection );683 state.trigger( 'insert', selection ); 666 684 selection.clear(); 667 685 } … … 699 717 700 718 media.view.Toolbar.prototype.initialize.apply( this, arguments ); 719 this.visibility(); 701 720 }, 702 721 703 722 visibility: function() { 704 var selection = this.options.selection, 723 var state = this.options.state, 724 selection = state.get('selection'), 705 725 controller = this.options.controller, 706 726 count = selection.length, 707 727 showGallery; 708 709 controller.$el.toggleClass( 'hide-toolbar', ! count );710 728 711 729 // Check if every attachment in the selection is an image. … … 719 737 button.model.set( 'style', showGallery ? '' : 'primary' ); 720 738 }); 739 740 _.first( insert.buttons ).model.set( 'disabled', ! count ); 721 741 } 722 742 }); … … 726 746 media.view.Toolbar.Gallery = media.view.Toolbar.extend({ 727 747 initialize: function() { 728 var editing = this.options.editing, 729 selection = this.options.selection, 748 var state = this.options.state, 749 editing = state.get('editing'), 750 selection = state.get('selection'), 730 751 controller = this.options.controller; 731 752 … … 737 758 click: function() { 738 759 controller.close(); 739 controller.state().trigger( 'update', selection );760 state.trigger( 'update', selection ); 740 761 selection.clear(); 741 762 controller.state('library'); … … 770 791 771 792 defaults: { 772 text: '', 773 style: '', 774 size: 'large' 793 text: '', 794 style: '', 795 size: 'large', 796 disabled: false 775 797 }, 776 798 … … 797 819 798 820 render: function() { 799 var classes = [ 'button', this.className ]; 800 801 if ( this.model.get('style') ) 802 classes.push( 'button-' + this.model.get('style') ); 803 804 if ( this.model.get('size') ) 805 classes.push( 'button-' + this.model.get('size') ); 821 var classes = [ 'button', this.className ], 822 model = this.model.toJSON(); 823 824 if ( model.style ) 825 classes.push( 'button-' + model.style ); 826 827 if ( model.size ) 828 classes.push( 'button-' + model.size ); 806 829 807 830 classes = _.uniq( classes.concat( this.options.classes ) ); 808 831 this.el.className = classes.join(' '); 809 832 833 this.$el.attr( 'disabled', model.disabled ); 810 834 811 835 // Detach the dropdown. … … 823 847 click: function( event ) { 824 848 event.preventDefault(); 825 if ( this.options.click )849 if ( this.options.click && ! this.model.get('disabled') ) 826 850 this.options.click.apply( this, arguments ); 827 851 } … … 851 875 render: function() { 852 876 this.$el.html( $( _.pluck( this.buttons, 'el' ) ).detach() ); 877 return this; 878 } 879 }); 880 881 /** 882 * wp.media.view.Sidebar 883 */ 884 media.view.Sidebar = Backbone.View.extend({ 885 tagName: 'div', 886 className: 'media-sidebar', 887 template: media.template('sidebar'), 888 889 initialize: function() { 890 this.controller = this.options.controller; 891 this._views = {}; 892 893 if ( this.options.views ) 894 this.add( this.options.views, { silent: true }).render(); 895 }, 896 897 render: function() { 898 var els = _( this._views ).chain().sortBy( function( view ) { 899 return view.options.priority || 10; 900 }).pluck('el').value(); 901 902 // Make sure to detach the elements we want to reuse. 903 // Otherwise, `jQuery.html()` will unbind their events. 904 $( els ).detach(); 905 906 this.$el.html( this.template({ 907 title: this.controller.state().get('title') || '', 908 uploader: this.controller.options.uploader 909 }) ); 910 911 this.$('.sidebar-content').html( els ); 912 913 return this; 914 }, 915 916 add: function( id, view, options ) { 917 // Accept an object with an `id` : `view` mapping. 918 if ( _.isObject( id ) ) { 919 _.each( id, function( view, id ) { 920 this.add( id, view, options ); 921 }, this ); 922 return this; 923 } 924 925 view.controller = view.controller || this.controller; 926 927 this._views[ id ] = view; 928 if ( ! options || ! options.silent ) 929 this.render(); 930 return this; 931 }, 932 933 get: function( id ) { 934 return this._views[ id ]; 935 }, 936 937 remove: function( id, options ) { 938 delete this._views[ id ]; 939 if ( ! options || ! options.silent ) 940 this.render(); 853 941 return this; 854 942 } … … 1069 1157 */ 1070 1158 media.view.Attachments = Backbone.View.extend({ 1071 tagName: ' div',1159 tagName: 'ul', 1072 1160 className: 'attachments', 1073 template: media.template('attachments'),1074 1161 1075 1162 events: { 1076 ' keyup .search': 'search'1163 'scroll': 'scroll' 1077 1164 }, 1078 1165 … … 1093 1180 }, this ); 1094 1181 1095 this.collection.on( 'reset', this.refresh, this ); 1096 1097 this.$list = $('<ul />'); 1098 this.list = this.$list[0]; 1099 1182 this.collection.on( 'reset', this.render, this ); 1183 1184 // Throttle the scroll handler. 1100 1185 this.scroll = _.chain( this.scroll ).bind( this ).throttle( this.options.refreshSensitivity ).value(); 1101 this.$list.on( 'scroll.attachments', this.scroll );1102 1186 1103 1187 this.initSortable(); … … 1111 1195 return; 1112 1196 1113 this.$ list.sortable({1197 this.$el.sortable({ 1114 1198 // If the `collection` has a `comparator`, disable sorting. 1115 1199 disabled: !! collection.comparator, … … 1117 1201 // Prevent attachments from being dragged outside the bounding 1118 1202 // box of the list. 1119 containment: this.$ list,1203 containment: this.$el, 1120 1204 1121 1205 // Change the position of the attachment as soon as the … … 1145 1229 // check to see if we have a `comparator`. If so, disable sorting. 1146 1230 collection.props.on( 'change:orderby', function() { 1147 this.$ list.sortable( 'option', 'disabled', !! collection.comparator );1231 this.$el.sortable( 'option', 'disabled', !! collection.comparator ); 1148 1232 }, this ); 1149 1233 }, 1150 1234 1151 1235 render: function() { 1152 // Detach the list from the DOM to prevent event removal.1153 this.$list.detach();1154 1155 this.$el.html( this.template( this.options ) ).append( this.$list );1156 this.refresh();1157 return this;1158 },1159 1160 refresh: function() {1161 1236 // If there are no elements, load some. 1162 1237 if ( ! this.collection.length ) { 1163 1238 this.collection.more(); 1164 this.$ list.empty();1239 this.$el.empty(); 1165 1240 return this; 1166 1241 } … … 1168 1243 // Otherwise, create all of the Attachment views, and replace 1169 1244 // the list in a single DOM operation. 1170 this.$ list.html( this.collection.map( function( attachment ) {1245 this.$el.html( this.collection.map( function( attachment ) { 1171 1246 return new this.options.AttachmentView({ 1172 1247 controller: this.controller, … … 1189 1264 }).render(); 1190 1265 1191 children = this.$ list.children();1266 children = this.$el.children(); 1192 1267 1193 1268 if ( children.length > index ) 1194 1269 children.eq( index ).before( view.$el ); 1195 1270 else 1196 this.$ list.append( view.$el );1271 this.$el.append( view.$el ); 1197 1272 }, 1198 1273 1199 1274 remove: function( attachment, index ) { 1200 var children = this.$ list.children();1275 var children = this.$el.children(); 1201 1276 if ( children.length ) 1202 1277 children.eq( index ).detach(); … … 1205 1280 scroll: function( event ) { 1206 1281 // @todo: is this still necessary? 1207 if ( ! this.$ list.is(':visible') )1282 if ( ! this.$el.is(':visible') ) 1208 1283 return; 1209 1284 1210 if ( this. list.scrollHeight < this.list.scrollTop + ( this.list.clientHeight * this.options.refreshThreshold ) ) {1285 if ( this.el.scrollHeight < this.el.scrollTop + ( this.el.clientHeight * this.options.refreshThreshold ) ) { 1211 1286 this.collection.more(); 1212 1287 } 1288 } 1289 }); 1290 1291 /** 1292 * wp.media.view.Search 1293 */ 1294 media.view.Search = Backbone.View.extend({ 1295 tagName: 'input', 1296 className: 'search', 1297 1298 attributes: { 1299 type: 'text', 1300 placeholder: l10n.search 1301 }, 1302 1303 events: { 1304 'keyup': 'search' 1305 }, 1306 1307 render: function() { 1308 this.el.value = this.model.escape('search'); 1309 return this; 1213 1310 }, 1214 1311 1215 1312 search: function( event ) { 1216 var props = this.collection.props;1217 1218 1313 if ( event.target.value ) 1219 props.set( 'search', event.target.value );1314 this.model.set( 'search', event.target.value ); 1220 1315 else 1221 props.unset('search');1316 this.model.unset('search'); 1222 1317 } 1223 1318 }); -
trunk/wp-includes/media.php
r22320 r22321 1310 1310 </script> 1311 1311 1312 <script type="text/html" id="tmpl-attachments"> 1313 <div class="attachments-header"> 1314 <h3><%- directions %></h3> 1315 <input class="search" type="text" placeholder="<?php esc_attr_e('Search'); ?>" /> 1316 </div> 1312 <script type="text/html" id="tmpl-sidebar"> 1313 <h2 class="sidebar-title"><%- title %></h2> 1314 <div class="sidebar-content"></div> 1317 1315 </script> 1318 1316 -
trunk/wp-includes/script-loader.php
r22236 r22321 324 324 did_action( 'init' ) && $scripts->localize( 'media-views', '_wpMediaViewsL10n', array( 325 325 // Generic 326 'insertMedia' => __( 'Insert Media' ), 327 'selectMediaSingular' => __( 'Select a media file:' ), 328 'selectMediaMultiple' => __( 'Select one or more media files:' ), 326 'insertMedia' => __( 'Insert Media' ), 327 'search' => __( 'Search' ), 329 328 330 329 // Library 330 'mediaLibrary' => __( 'Media Library' ), 331 331 'createNewGallery' => __( 'Create a new gallery' ), 332 332 'insertIntoPost' => __( 'Insert into post' ), … … 334 334 335 335 // Gallery 336 'createGallery' => __( 'Create Gallery' ), 336 337 'returnToLibrary' => __( 'Return to media library' ), 337 338 'continueEditingGallery' => __( 'Continue editing gallery' ),
Note: See TracChangeset
for help on using the changeset viewer.