Changeset 21769
- Timestamp:
- 09/06/2012 07:46:15 AM (11 years ago)
- Location:
- trunk/wp-includes
- Files:
-
- 3 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/wp-includes/css/media-views.css
r21683 r21769 55 55 56 56 /** 57 * Toolbar 58 */ 59 .media-toolbar { 60 position: relative; 61 z-index: 50; 62 height: 60px; 63 border-bottom: 1px solid #dfdfdf; 64 } 65 66 .media-toolbar-primary { 67 float: right; 68 } 69 70 .media-toolbar-secondary { 71 float: left; 72 } 73 74 .media-toolbar .media-button { 75 float: left; 76 margin-top: 19px; 77 } 78 79 .media-toolbar-primary .media-button { 80 margin-left: 10px; 81 } 82 83 .media-toolbar-secondary .media-button { 84 margin-right: 10px; 85 } 86 87 /** 57 88 * Workspace 58 89 */ … … 99 130 right: 0; 100 131 border-color: #83B4D8; 132 box-shadow: 0 0 0 10px #fff; 101 133 } 102 134 … … 107 139 right: 0; 108 140 bottom: 0; 141 margin: 0 20px; 142 } 143 144 .media-workspace .attachments, 145 .media-workspace .media-toolbar { 146 -webkit-transition-property: left, right, top, bottom, margin; 147 -moz-transition-property: left, right, top, bottom, margin; 148 -ms-transition-property: left, right, top, bottom, margin; 149 -o-transition-property: left, right, top, bottom, margin; 150 transition-property: left, right, top, bottom, margin; 151 152 -webkit-transition-duration: 0.2s; 153 -moz-transition-duration: 0.2s; 154 -ms-transition-duration: 0.2s; 155 -o-transition-duration: 0.2s; 156 transition-duration: 0.2s; 157 } 158 159 .media-workspace .attachments { 160 position: absolute; 161 top: 0; 162 left: 0; 163 right: 0; 164 bottom: 0; 165 height: auto; 166 width: auto; 167 } 168 169 .media-workspace.with-toolbar .attachments { 170 top: 61px; 171 } 172 173 .media-workspace .media-toolbar { 174 margin-top: -61px; 175 } 176 177 .media-workspace.with-toolbar .media-toolbar { 178 margin-top: 0; 179 } 180 181 .media-workspace .media-toolbar .add-to-gallery, 182 .media-workspace .media-toolbar .create-new-gallery { 183 display: none; 109 184 } 110 185 … … 113 188 */ 114 189 .attachments { 190 position: relative; 115 191 width: 100%; 116 192 height: 100%; … … 129 205 float: left; 130 206 margin: 0; 131 padding: 0 0 0 10px;207 padding: 0; 132 208 line-height: 50px; 133 209 font-size: 18px; … … 136 212 .attachments-header input { 137 213 float: right; 138 margin-top: 1 0px;139 margin-right: 10px;214 margin-top: 12px; 215 line-height: 18px; 140 216 } 141 217 … … 147 223 bottom: 0; 148 224 overflow: auto; 149 margin: 0 10px 20px;225 margin: 0 -10px 20px; 150 226 } 151 227 … … 170 246 .attachment.selected { 171 247 border-color: #21759b; 248 } 249 250 .attachment.selected:after { 251 content: '\2713'; 252 display: block; 253 height: 24px; 254 width: 24px; 255 position: absolute; 256 top: 0; 257 left: 0; 258 line-height: 24px; 259 font-size: 18px; 260 text-align: center; 261 color: #fff; 262 background: #21759b; 172 263 } 173 264 … … 277 368 display: block; 278 369 } 370 371 /** 372 * Selection Preview 373 */ 374 375 .selection-preview { 376 position: relative; 377 height: 60px; 378 overflow: hidden; 379 } 380 381 .selected-img { 382 float: left; 383 position: relative; 384 margin-right: 14px; 385 } 386 387 .selection-preview img { 388 max-width: 40px; 389 max-height: 40px; 390 float: left; 391 margin-top: 6px; 392 margin-left: 1px; 393 border: 2px solid white; 394 box-shadow: 395 0 0 0 1px #ccc, 396 3px 3px 0 0 #fff, 397 3px 3px 0 1px #ccc, 398 6px 6px 0 0 #fff, 399 6px 6px 0 1px #ccc; 400 } 401 402 .selection-preview .selected-count-1 img { 403 margin-top: 8px; 404 box-shadow: 0 0 0 1px #ccc; 405 } 406 407 .selection-preview .selected-count-2 img { 408 margin-top: 7px; 409 box-shadow: 410 0 0 0 1px #ccc, 411 3px 3px 0 0 #fff, 412 3px 3px 0 1px #ccc; 413 } 414 415 .selection-preview .count { 416 position: absolute; 417 bottom: 0; 418 right: 0; 419 height: 16px; 420 min-width: 8px; 421 padding: 0 4px; 422 font-size: 12px; 423 text-align: center; 424 font-weight: bold; 425 color: #999; 426 background: #fff; 427 box-shadow: -1px -1px 2px -1px rgba( 0, 0, 0, 0.2 ); 428 } 429 430 .selection-preview .clear-selection { 431 float: left; 432 line-height: 60px; 433 } -
trunk/wp-includes/js/media-views.js
r21683 r21769 140 140 141 141 /** 142 * wp.media.view.Toolbar 143 */ 144 media.view.Toolbar = Backbone.View.extend({ 145 tagName: 'div', 146 className: 'media-toolbar', 147 148 initialize: function() { 149 this._views = {}; 150 this.$primary = $('<div class="media-toolbar-primary" />').prependTo( this.$el ); 151 this.$secondary = $('<div class="media-toolbar-secondary" />').prependTo( this.$el ); 152 153 if ( this.options.items ) { 154 _.each( this.options.items, function( view, id ) { 155 this.add( id, view, { silent: true } ); 156 }, this ); 157 this.render(); 158 } 159 }, 160 161 render: function() { 162 var views = _.chain( this._views ).sortBy( function( view ) { 163 return view.options.priority || 10; 164 }).groupBy( function( view ) { 165 return ( view.options.priority || 10 ) > 0 ? 'primary' : 'secondary'; 166 }).value(); 167 168 // Make sure to detach the elements we want to reuse. 169 // Otherwise, `jQuery.html()` will unbind their events. 170 $( _.pluck( this._views, 'el' ) ).detach(); 171 this.$primary.html( _.pluck( views.primary, 'el' ) ); 172 this.$secondary.html( _.pluck( views.secondary, 'el' ) ); 173 174 return this; 175 }, 176 177 add: function( id, view, options ) { 178 if ( ! ( view instanceof Backbone.View ) ) { 179 view.classes = [ id ].concat( view.classes || [] ); 180 view = new media.view.Button( view ).render(); 181 } 182 183 this._views[ id ] = view; 184 if ( ! options || ! options.silent ) 185 this.render(); 186 return this; 187 }, 188 189 remove: function( id, options ) { 190 delete this._views[ id ]; 191 if ( ! options || ! options.silent ) 192 this.render(); 193 return this; 194 } 195 }); 196 197 198 /** 199 * wp.media.view.Button 200 */ 201 media.view.Button = Backbone.View.extend({ 202 tagName: 'a', 203 className: 'media-button', 204 attributes: { href: '#' }, 205 206 events: { 207 'click': 'click' 208 }, 209 210 initialize: function() { 211 _.defaults( this.options, { 212 style: 'secondary', 213 text: '', 214 classes: [] 215 }); 216 }, 217 218 render: function() { 219 var classes = [ this.className ]; 220 221 if ( this.options.style ) 222 classes.push( 'button-' + this.options.style ); 223 224 classes = classes.concat( this.options.classes ); 225 this.el.className = classes.join(' '); 226 this.$el.text( this.options.text ); 227 return this; 228 }, 229 230 click: function( event ) { 231 event.preventDefault(); 232 if ( this.options.click ) 233 this.options.click.apply( this, arguments ); 234 } 235 }); 236 237 /** 142 238 * wp.media.view.Workspace 143 239 */ … … 159 255 uploader: {} 160 256 }); 257 258 this.$content = $('<div class="existing-attachments" />'); 259 260 // If this supports multiple attachments, initialize the sample toolbar view. 261 if ( this.controller.get('multiple') ) 262 this.initToolbarView(); 161 263 162 264 this.attachmentsView = new media.view.Attachments({ … … 168 270 }); 169 271 170 this.$content = $('<div class="existing-attachments" />');171 272 this.$content.append( this.attachmentsView.$el ); 172 273 … … 243 344 } 244 345 }, this.options.uploader ) ); 346 }, 347 348 // Initializes the toolbar view. Currently uses defaults set for 349 // inserting media into a post. This should be pulled out into the 350 // appropriate workflow when the time comes, but is currently here 351 // to test multiple selections. 352 initToolbarView: function() { 353 this.toolbarView = new media.view.Toolbar({ 354 items: { 355 'selection-preview': new media.view.SelectionPreview({ 356 controller: this.controller, 357 collection: this.controller.selection, 358 priority: -40 359 }), 360 'insert-into-post': { 361 style: 'primary', 362 text: 'Insert into post', 363 priority: 40 364 }, 365 'create-new-gallery': { 366 style: 'primary', 367 text: 'Create a new gallery', 368 priority: 30 369 }, 370 'add-to-gallery': { 371 text: 'Add to gallery', 372 priority: 20 373 } 374 } 375 }); 376 377 this.controller.selection.on( 'add remove', function() { 378 this.$el.toggleClass( 'with-toolbar', !! this.controller.selection.length ); 379 }, this ); 380 381 this.$content.append( this.toolbarView.$el ); 245 382 } 246 383 }); … … 427 564 } 428 565 }); 566 567 /** 568 * wp.media.view.SelectionPreview 569 */ 570 media.view.SelectionPreview = Backbone.View.extend({ 571 tagName: 'div', 572 className: 'selection-preview', 573 template: media.template('media-selection-preview'), 574 575 events: { 576 'click .clear-selection': 'clear' 577 }, 578 579 initialize: function() { 580 this.controller = this.options.controller; 581 this.collection.on( 'add change:url remove', this.render, this ); 582 this.render(); 583 }, 584 585 render: function() { 586 var options = {}, 587 first, sizes, amount; 588 589 // If nothing is selected, display nothing. 590 if ( ! this.collection.length ) { 591 this.$el.empty(); 592 return this; 593 } 594 595 options.count = this.collection.length; 596 first = this.collection.first(); 597 sizes = first.get('sizes'); 598 options.thumbnail = ( sizes && sizes.thumbnail ) ? sizes.thumbnail.url : first.get('url'); 599 600 this.$el.html( this.template( options ) ); 601 return this; 602 }, 603 604 clear: function( event ) { 605 event.preventDefault(); 606 this.collection.clear(); 607 } 608 }); 429 609 }(jQuery)); -
trunk/wp-includes/media.php
r21735 r21769 1650 1650 <div class="describe"></div> 1651 1651 </script> 1652 1653 <script type="text/html" id="tmpl-media-selection-preview"> 1654 <div class="selected-img selected-count-<%- count %>"> 1655 <% if ( thumbnail ) { %> 1656 <img src="<%- thumbnail %>" /> 1657 <% } %> 1658 1659 <span class="count"><%- count %></span> 1660 </div> 1661 <a class="clear-selection" href="#"><?php _e('Clear selection'); ?></a> 1662 </script> 1652 1663 <?php 1653 1664 }
Note: See TracChangeset
for help on using the changeset viewer.