Changeset 28031

Timestamp:

04/08/2014 01:56:42 AM (11 years ago)

Author:

nacin

Message:

Header Images: Add suggested dimensions to the media workflow.

This updates [28030] to the latest patch.

props gcorne.
see #21785.

Location:

trunk/src

Files:

• wp-admin/js/customize-controls.js (modified) (1 diff)
• wp-includes/js/media-views.js (modified) (5 diffs)

trunk/src/wp-admin/js/customize-controls.js

@@ -425 +425 @@
 
             this.frame = wp.media({
-                title: l10n.chooseImage,
-                library: {
-                    type: 'image'
-                },
                 button: {
                     text: l10n.selectAndCrop,
                     close: false
                 },
-                multiple: false,
-                crop: {
-                    suggestedWidth: _wpCustomizeHeader.data.width,
-                    suggestedHeight: _wpCustomizeHeader.data.height,
-                    imgSelectOptions: this.calculateImageSelectOptions
-                }
-            });
-
-            this.frame.states.add([new wp.media.controller.Cropper()]);
+                states: [
+                    new wp.media.controller.Library({
+                        title:     l10n.chooseImage,
+                        library:   wp.media.query({ type: 'image' }),
+                        multiple:  false,
+                        priority:  20,
+                        suggestedWidth: _wpCustomizeHeader.data.width,
+                        suggestedHeight: _wpCustomizeHeader.data.height
+                    }),
+                    new wp.media.controller.Cropper({
+                        imgSelectOptions: this.calculateImageSelectOptions
+                    })
+                ]
+            });
 
             this.frame.on('select', this.onSelect, this);

trunk/src/wp-includes/js/media-views.js

@@ -1843 +1843 @@
                 display:    state.get('displaySettings'),
                 dragInfo:   state.get('dragInfo'),
+
+                suggestedWidth:  state.get('suggestedWidth'),
+                suggestedHeight: state.get('suggestedHeight'),
 
                 AttachmentView: state.get('AttachmentView')
@@ -3315 +3318 @@
 
         prepare: function() {
-            var cropOptions = this.controller.options.crop;
-            if ( cropOptions ) {
+            var suggestedWidth = this.controller.state().get('suggestedWidth'),
+                suggestedHeight = this.controller.state().get('suggestedHeight');
+
+            if ( suggestedWidth && suggestedHeight ) {
                 return {
-                    suggestedWidth: cropOptions.suggestedWidth,
-                    suggestedHeight: cropOptions.suggestedHeight
-                }
+                    suggestedWidth: suggestedWidth,
+                    suggestedHeight: suggestedHeight
+                };
             }
         },
@@ -5165 +5170 @@
 
         createToolbar: function() {
-            var filters, FiltersConstructor,
-                frameOptions = this.controller.options;
+            var filters, FiltersConstructor;
 
             /**
@@ -5211 +5215 @@
             }
 
-            if ( frameOptions.crop ) {
+            if ( this.options.suggestedWidth && this.options.suggestedHeight ) {
                 this.toolbar.set( 'suggestedDimensions', new media.View({
-                    el: $( '<div class="instructions">' + l10n.suggestedDimensions + ' ' + frameOptions.crop.suggestedWidth + ' &times; ' + frameOptions.crop.suggestedHeight + '</div>' )[0],
+                    el: $( '<div class="instructions">' + l10n.suggestedDimensions + ' ' + this.options.suggestedWidth + ' &times; ' + this.options.suggestedHeight + '</div>' )[0],
                     priority: -40
                 }) );
@@ -6249 +6253 @@
         },
         onImageLoad: function() {
-            var imgOptions = this.controller.frame.options.crop.imgSelectOptions;
+            var imgOptions = this.controller.get('imgSelectOptions');
             if (typeof imgOptions === 'function') {
                 imgOptions = imgOptions(this.options.attachment, this.controller);