From 179a1b7a4cd3918724cdefd47b0ff570fe3a5600 Mon Sep 17 00:00:00 2001 From: "Dominik Schilling (ocean90)" Date: Tue, 10 Mar 2015 18:01:42 +0000 Subject: [PATCH] Customizer: Introduce `WP_Customize_Media_Control`. `WP_Customize_Media_Control` is a new base class for all Customizer media controls. If used directly it supports the ID of an attachment instead of an URL like `WP_Customize_Upload_Control`. props celloexpressions. fixes #29215. git-svn-id: https://develop.svn.wordpress.org/trunk@31698 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-admin/css/customize-controls.css | 17 ++++- src/wp-admin/js/customize-controls.js | 48 ++++++++++-- .../class-wp-customize-control.php | 75 ++++++++++++++----- .../class-wp-customize-manager.php | 1 + 4 files changed, 116 insertions(+), 25 deletions(-) diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css index 6fb7a5bf27..f194547021 100644 --- a/src/wp-admin/css/customize-controls.css +++ b/src/wp-admin/css/customize-controls.css @@ -582,8 +582,9 @@ p.customize-section-description { -webkit-overflow-scrolling: touch; } -/** Header control **/ +/** Media controls **/ +.customize-control-media .current, .customize-control-upload .current, .customize-control-image .current, .customize-control-background .current, @@ -610,6 +611,9 @@ p.customize-section-description { display: block; } +.customize-control-media .remove-button, +.customize-control-media .default-button, +.customize-control-media .upload-button, .customize-control-upload .remove-button, .customize-control-upload .default-button, .customize-control-upload .upload-button, @@ -626,6 +630,7 @@ p.customize-section-description { height: auto; } +.customize-control-media .current .container, .customize-control-upload .current .container, .customize-control-image .current .container, .customize-control-background .current .container, @@ -637,12 +642,14 @@ p.customize-section-description { border-radius: 2px; } +.customize-control-media .current .container, .customize-control-upload .current .container, .customize-control-background .current .container, .customize-control-image .current .container { min-height: 40px; } +.customize-control-media .placeholder, .customize-control-upload .placeholder, .customize-control-image .placeholder, .customize-control-background .placeholder, @@ -653,6 +660,7 @@ p.customize-section-description { cursor: default; } +.customize-control-media .inner, .customize-control-upload .inner, .customize-control-image .inner, .customize-control-background .inner, @@ -666,6 +674,7 @@ p.customize-section-description { overflow: hidden; } +.customize-control-media .inner, .customize-control-upload .inner, .customize-control-background .inner, .customize-control-image .inner { @@ -673,6 +682,7 @@ p.customize-section-description { min-height: 40px; } +.customize-control-media .inner, .customize-control-upload .inner, .customize-control-image .inner, .customize-control-background .inner, @@ -782,6 +792,7 @@ p.customize-section-description { 100% { color: #d4b146; } } +.customize-control-media .actions, .customize-control-upload .actions, .customize-control-image .actions, .customize-control-background .actions, @@ -799,6 +810,7 @@ p.customize-section-description { margin-bottom: 0; } +.customize-control-media img, .customize-control-upload img, .customize-control-image img, .customize-control-background img, @@ -808,6 +820,8 @@ p.customize-section-description { border-radius: 2px; } +.customize-control-media .remove-button, +.customize-control-media .default-button, .customize-control-upload .remove-button, .customize-control-upload .default-button, .customize-control-image .remove-button, @@ -819,6 +833,7 @@ p.customize-section-description { margin-right: 3px; } +.customize-control-media .upload-button, .customize-control-upload .upload-button, .customize-control-image .upload-button, .customize-control-background .upload-button, diff --git a/src/wp-admin/js/customize-controls.js b/src/wp-admin/js/customize-controls.js index 00c894edf7..951fb4cfd0 100644 --- a/src/wp-admin/js/customize-controls.js +++ b/src/wp-admin/js/customize-controls.js @@ -1370,13 +1370,13 @@ }); /** - * An upload control, which utilizes the media modal. + * A control that implements the media modal. * * @class * @augments wp.customize.Control * @augments wp.customize.Class */ - api.UploadControl = api.Control.extend({ + api.MediaControl = api.Control.extend({ /** * When the control's DOM structure is ready, @@ -1471,7 +1471,7 @@ this.params.attachment = attachment; // Set the Customizer setting; the callback takes care of rendering. - this.setting( attachment.url ); + this.setting( attachment.id ); node = this.container.find( 'audio, video' ).get(0); // Initialize audio/video previews. @@ -1509,6 +1509,41 @@ this.params.attachment = {}; this.setting( '' ); this.renderContent(); // Not bound to setting change when emptying. + } + }); + + /** + * An upload control, which utilizes the media modal. + * + * @class + * @augments wp.customize.MediaControl + * @augments wp.customize.Control + * @augments wp.customize.Class + */ + api.UploadControl = api.MediaControl.extend({ + + /** + * Callback handler for when an attachment is selected in the media modal. + * Gets the selected image information, and sets it within the control. + */ + select: function() { + // Get the attachment from the modal frame. + var node, + attachment = this.frame.state().get( 'selection' ).first().toJSON(), + mejsSettings = window._wpmejsSettings || {}; + + this.params.attachment = attachment; + + // Set the Customizer setting; the callback takes care of rendering. + this.setting( attachment.url ); + node = this.container.find( 'audio, video' ).get(0); + + // Initialize audio/video previews. + if ( node ) { + this.player = new MediaElementPlayer( node, mejsSettings ); + } else { + this.cleanupPlayer(); + } }, // @deprecated @@ -1526,6 +1561,7 @@ * * @class * @augments wp.customize.UploadControl + * @augments wp.customize.MediaControl * @augments wp.customize.Control * @augments wp.customize.Class */ @@ -1539,6 +1575,7 @@ * * @class * @augments wp.customize.UploadControl + * @augments wp.customize.MediaControl * @augments wp.customize.Control * @augments wp.customize.Class */ @@ -1575,8 +1612,8 @@ */ api.HeaderControl = api.Control.extend({ ready: function() { - this.btnRemove = $('#customize-control-header_image .actions .remove'); - this.btnNew = $('#customize-control-header_image .actions .new'); + this.btnRemove = $('#customize-control-header_image .actions .remove'); + this.btnNew = $('#customize-control-header_image .actions .new'); _.bindAll(this, 'openMedia', 'removeImage'); @@ -2311,6 +2348,7 @@ api.controlConstructor = { color: api.ColorControl, + media: api.MediaControl, upload: api.UploadControl, image: api.ImageControl, header: api.HeaderControl, diff --git a/src/wp-includes/class-wp-customize-control.php b/src/wp-includes/class-wp-customize-control.php index 182f842aa8..bd964c2d6f 100644 --- a/src/wp-includes/class-wp-customize-control.php +++ b/src/wp-includes/class-wp-customize-control.php @@ -521,11 +521,11 @@ class WP_Customize_Control { * @since 4.1.0 */ final public function print_template() { - ?> - - + + setting ) ) { if ( $this->setting->default ) { // Fake an attachment model - needs all fields used by template. + // Note that the default value must be a URL, NOT an attachment ID. $type = in_array( substr( $this->setting->default, -3 ), array( 'jpg', 'png', 'gif', 'bmp' ) ) ? 'image' : 'document'; $default_attachment = array( 'id' => 1, @@ -720,11 +722,7 @@ class WP_Customize_Upload_Control extends WP_Customize_Control { // Set the default as the attachment. $this->json['attachment'] = $this->json['defaultAttachment']; } elseif ( $value ) { - // Get the attachment model for the existing file. - $attachment_id = attachment_url_to_postid( $value ); - if ( $attachment_id ) { - $this->json['attachment'] = wp_prepare_attachment_for_js( $attachment_id ); - } + $this->json['attachment'] = wp_prepare_attachment_for_js( $value ); } } } @@ -732,15 +730,18 @@ class WP_Customize_Upload_Control extends WP_Customize_Control { /** * Don't render any content for this control from PHP. * - * @see WP_Customize_Upload_Control::content_template() * @since 3.4.0 + * @since 4.2.0 Moved from WP_Customize_Upload_Control. + * + * @see WP_Customize_Media_Control::content_template() */ public function render_content() {} /** - * Render a JS template for the content of the upload control. + * Render a JS template for the content of the media control. * * @since 4.1.0 + * @since 4.2.0 Moved from WP_Customize_Upload_Control. */ public function content_template() { ?> @@ -822,6 +823,42 @@ class WP_Customize_Upload_Control extends WP_Customize_Control { } } +/** + * Customize Upload Control Class. + * + * @since 3.4.0 + * + * @see WP_Customize_Media_Control + */ +class WP_Customize_Upload_Control extends WP_Customize_Media_Control { + public $type = 'upload'; + public $mime_type = ''; + public $button_labels = array(); + public $removed = ''; // unused + public $context; // unused + public $extensions = array(); // unused + + /** + * Refresh the parameters passed to the JavaScript via JSON. + * + * @since 3.4.0 + * + * @uses WP_Customize_Media_Control::to_json() + */ + public function to_json() { + parent::to_json(); + + $value = $this->value(); + if ( $value ) { + // Get the attachment model for the existing file. + $attachment_id = attachment_url_to_postid( $value ); + if ( $attachment_id ) { + $this->json['attachment'] = wp_prepare_attachment_for_js( $attachment_id ); + } + } + } +} + /** * Customize Image Control class. * diff --git a/src/wp-includes/class-wp-customize-manager.php b/src/wp-includes/class-wp-customize-manager.php index de723c2401..3c9a92b8b8 100644 --- a/src/wp-includes/class-wp-customize-manager.php +++ b/src/wp-includes/class-wp-customize-manager.php @@ -1139,6 +1139,7 @@ final class WP_Customize_Manager { /* Control Types (custom control classes) */ $this->register_control_type( 'WP_Customize_Color_Control' ); + $this->register_control_type( 'WP_Customize_Media_Control' ); $this->register_control_type( 'WP_Customize_Upload_Control' ); $this->register_control_type( 'WP_Customize_Image_Control' ); $this->register_control_type( 'WP_Customize_Background_Image_Control' );