Changeset 22324
- Timestamp:
- 10/29/2012 06:05:03 PM (12 years ago)
- Location:
- trunk/wp-includes
- Files:
-
- 3 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/wp-includes/css/media-views.css
r22323 r22324 175 175 height: auto; 176 176 width: auto; 177 margin: 0; 177 178 overflow: auto; 178 179 } … … 197 198 font-family: sans-serif; 198 199 } 199 200 /**201 * Attachments202 */203 /*.attachments {204 position: relative;205 width: 100%;206 height: 100%;207 }208 209 .attachments-header {210 position: absolute;211 top: 0;212 left: 0;213 right: 0;214 height: 50px;215 padding: 0 10px;216 background: #fff;217 }218 219 .attachments-header h3 {220 float: left;221 margin: 0;222 padding: 0;223 line-height: 50px;224 font-size: 18px;225 font-weight: 200;226 }227 228 .attachments ul {229 position: absolute;230 top: 50px;231 left: 0;232 right: 0;233 bottom: 0;234 overflow: auto;235 margin: 0 0 20px;236 }*/237 200 238 201 /** … … 290 253 } 291 254 255 .attachment .thumbnail { 256 -webkit-transform: translate( 50%, 50% ); 257 -moz-transform: translate( 50%, 50% ); 258 -ms-transform: translate( 50%, 50% ); 259 -o-transform: translate( 50%, 50% ); 260 transform: translate( 50%, 50% ); 261 } 262 292 263 /* Vertically center the icons. */ 293 264 .attachment .icon { 294 265 top: 50%; 295 266 left: 50%; 267 } 268 269 .attachment-preview:after { 270 content: ''; 271 display: block; 272 position: absolute; 273 top: 0; 274 left: 0; 275 right: 0; 276 bottom: 0; 277 box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 ); 278 overflow: hidden; 279 } 280 281 .attachment .thumbnail img { 282 top: 0; 283 left: 0; 284 } 285 286 .attachment .icon, 287 .attachment .thumbnail img { 296 288 -webkit-transform: translate( -50%, -50% ); 297 289 -moz-transform: translate( -50%, -50% ); … … 302 294 303 295 .attachment .filename { 304 margin-top: 140px; 305 padding: 0 10px; 296 position: absolute; 297 left: 0; 298 right: 0; 299 bottom: 0; 300 padding: 5px 10px; 306 301 text-align: center; 307 302 font-weight: bold; 308 } 309 310 .attachment-preview .thumbnail, 311 .attachment-preview .thumbnail img { 312 -webkit-transition-property: width, height, top, left, right, bottom; 313 -moz-transition-property: width, height, top, left, right, bottom; 314 -ms-transition-property: width, height, top, left, right, bottom; 315 -o-transition-property: width, height, top, left, right, bottom; 316 transition-property: width, height, top, left, right, bottom; 317 -webkit-transition-duration: 80ms; 318 -moz-transition-duration: 80ms; 319 -ms-transition-duration: 80ms; 320 -o-transition-duration: 80ms; 321 transition-duration: 80ms; 322 -webkit-transition-delay: 200ms; 323 -moz-transition-delay: 200ms; 324 -ms-transition-delay: 200ms; 325 -o-transition-delay: 200ms; 326 transition-delay: 200ms; 303 background: rgba( 255, 255, 255, 0.8 ); 304 box-shadow: 0 0 2px rgba( 0, 0, 0, 0.2 ); 327 305 } 328 306 … … 330 308 width: 199px; 331 309 height: 199px; 332 }333 334 .attachment-preview .thumbnail:after {335 content: '';336 display: block;337 position: absolute;338 top: 0;339 left: 0;340 right: 0;341 bottom: 0;342 box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );343 overflow: hidden;344 }345 346 .attachment.fit .thumbnail:after {347 box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );348 310 } 349 311 … … 623 585 float: left; 624 586 margin: 10px 0 0; 587 border-radius: 3px; 625 588 } 626 589 -
trunk/wp-includes/js/media-views.js
r22323 r22324 128 128 this.set( 'library', media.query() ); 129 129 130 if ( ! this.get('edge') ) 131 this.set( 'edge', 120 ); 132 133 if ( ! this.get('gutter') ) 134 this.set( 'gutter', 6 ); 135 130 136 this.on( 'activate', this.activate, this ); 131 137 this.on( 'deactivate', this.deactivate, this ); … … 249 255 multiple: false, 250 256 describe: true, 251 title: l10n.createGallery 257 title: l10n.createGallery, 258 edge: 199 252 259 }, 253 260 … … 1017 1024 events: { 1018 1025 'click .attachment-preview': 'toggleSelection', 1019 'mouseenter .attachment-preview': 'shrink',1020 'mouseleave .attachment-preview': 'expand',1026 // 'mouseenter .attachment-preview': 'shrink', 1027 // 'mouseleave .attachment-preview': 'expand', 1021 1028 'change .describe': 'describe' 1022 1029 }, … … 1053 1060 1054 1061 if ( 'image' === options.type ) 1055 _.extend( options, this. crop() );1062 _.extend( options, this.imageSize() ); 1056 1063 1057 1064 this.$el.html( this.template( options ) ); … … 1124 1131 // Use the provided image size if possible. 1125 1132 if ( sizes && sizes[ size ] ) { 1126 return sizes[ size ];1133 return _.clone( sizes[ size ] ); 1127 1134 } else { 1128 1135 return { … … 1135 1142 }, 1136 1143 1137 crop: function( sizeId ) {1138 var edge = 199,1139 size = this.imageSize( sizeId ),1140 wide, tall;1141 1142 wide = wp.media.fit( _.extend( { maxWidth: edge }, size ) );1143 tall = wp.media.fit( _.extend( { maxHeight: edge }, size ) );1144 1145 _.extend( size, wide.width > tall.width ? wide : tall );1146 1147 size.top = ( edge - size.height ) / 2;1148 size.left = ( edge - size.width ) / 2;1149 return size;1150 },1151 1152 fit: function( sizeId ) {1153 var margin = 10,1154 full = 199,1155 edge = full - ( margin * 2 ),1156 size = _.extend( wp.media.fit( _.extend({1157 maxWidth: edge,1158 maxHeight: edge1159 }, this.imageSize( sizeId ) ) ) );1160 1161 size.top = Math.round( margin + ( edge - size.height ) / 2 );1162 size.left = Math.round( margin + ( edge - size.width ) / 2 );1163 return size;1164 },1165 1166 shrink: function() {1167 var size = _.pick( this.fit(), 'top', 'left', 'width', 'height' );1168 this.$el.addClass('fit');1169 this.$('.thumbnail').css( size );1170 this.$('.thumbnail img').css( _.extend( size, {1171 top: 0,1172 left: 01173 } ) );1174 },1175 1176 expand: function() {1177 var size = _.pick( this.crop(), 'top', 'left', 'width', 'height' );1178 this.$el.removeClass('fit');1179 this.$('.thumbnail img').css( size );1180 this.$('.thumbnail').css({1181 top: 0,1182 left: 0,1183 width: 199,1184 height: 1991185 });1186 },1187 1188 1144 describe: function( event ) { 1189 1145 if ( 'image' === this.model.get('type') ) … … 1226 1182 tagName: 'ul', 1227 1183 className: 'attachments', 1184 template: media.template('attachments-css'), 1228 1185 1229 1186 events: { … … 1233 1190 initialize: function() { 1234 1191 this.controller = this.options.controller; 1192 this.el.id = _.uniqueId('__attachments-view-'); 1235 1193 1236 1194 _.defaults( this.options, { … … 1253 1211 1254 1212 this.initSortable(); 1213 1214 this.controller.state().on( 'change:edge change:gutter', this.css, this ); 1215 this.css(); 1216 }, 1217 1218 destroy: function() { 1219 this.collection.off( 'add remove reset', null, this ); 1220 this.controller.state().off( 'change:edge change:gutter', this.css, this ); 1221 }, 1222 1223 css: function() { 1224 var $css = $( '#' + this.el.id + '-css' ), 1225 state = this.controller.state(); 1226 1227 if ( $css.length ) 1228 $css.remove(); 1229 1230 media.view.Attachments.$head().append( this.template({ 1231 id: this.el.id, 1232 edge: state.get('edge'), 1233 gutter: state.get('gutter') 1234 }) ); 1255 1235 }, 1256 1236 … … 1354 1334 } 1355 1335 } 1336 }, { 1337 $head: (function() { 1338 var $head; 1339 return function() { 1340 return $head = $head || $('head'); 1341 }; 1342 }()) 1356 1343 }); 1357 1344 -
trunk/wp-includes/media.php
r22323 r22324 1328 1328 <% } else if ( 'image' === type ) { %> 1329 1329 <div class="thumbnail"> 1330 <img src="<%- url %>" width="<%- width %>" height="<%- height %>" draggable="false" 1331 style="top:<%- top %>px; left:<%- left %>px;" /> 1330 <img src="<%- url %>" draggable="false" /> 1332 1331 </div> 1333 1332 <% } else { %> … … 1462 1461 </div> 1463 1462 </script> 1463 1464 <script type="text/html" id="tmpl-attachments-css"> 1465 <style type="text/css" id="<%- id %>-css"> 1466 #<%- id %> { 1467 padding: <%- gutter %>px; 1468 } 1469 1470 #<%- id %> .attachment { 1471 margin: <%- gutter %>px; 1472 width: <%- edge %>px; 1473 } 1474 1475 #<%- id %> .attachment-preview, 1476 #<%- id %> .attachment-preview .thumbnail { 1477 width: <%- edge %>px; 1478 height: <%- edge %>px; 1479 } 1480 1481 #<%- id %> .portrait .thumbnail img { 1482 width: <%- edge %>px; 1483 height: auto; 1484 } 1485 1486 #<%- id %> .landscape .thumbnail img { 1487 width: auto; 1488 height: <%- edge %>px; 1489 } 1490 </style> 1491 </script> 1464 1492 <?php 1465 1493 }
Note: See TracChangeset
for help on using the changeset viewer.