WordPress.org
Get WordPress

Make WordPress Core

Changeset 31698


Ignore:
Timestamp:
03/10/2015 06:01:42 PM (10 years ago)
Author:
ocean90
Message:

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.

Location:
trunk/src
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/css/customize-controls.css

    r31661 r31698  
    583583}
    584584
    585 /** Header control **/
    586 
     585/** Media controls **/
     586
     587.customize-control-media .current,
    587588.customize-control-upload .current,
    588589.customize-control-image .current,
    … …  
    611612}
    612613
     614.customize-control-media .remove-button,
     615.customize-control-media .default-button,
     616.customize-control-media .upload-button,
    613617.customize-control-upload .remove-button,
    614618.customize-control-upload .default-button,
    … …  
    627631}
    628632
     633.customize-control-media .current .container,
    629634.customize-control-upload .current .container,
    630635.customize-control-image .current .container,
    … …  
    638643}
    639644
     645.customize-control-media .current .container,
    640646.customize-control-upload .current .container,
    641647.customize-control-background .current .container,
    … …  
    644650}
    645651
     652.customize-control-media .placeholder,
    646653.customize-control-upload .placeholder,
    647654.customize-control-image .placeholder,
    … …  
    654661}
    655662
     663.customize-control-media .inner,
    656664.customize-control-upload .inner,
    657665.customize-control-image .inner,
    … …  
    667675}
    668676
     677.customize-control-media .inner,
    669678.customize-control-upload .inner,
    670679.customize-control-background .inner,
    … …  
    674683}
    675684
     685.customize-control-media .inner,
    676686.customize-control-upload .inner,
    677687.customize-control-image .inner,
    … …  
    783793}
    784794
     795.customize-control-media .actions,
    785796.customize-control-upload .actions,
    786797.customize-control-image .actions,
    … …  
    800811}
    801812
     813.customize-control-media img,
    802814.customize-control-upload img,
    803815.customize-control-image img,
    … …  
    809821}
    810822
     823.customize-control-media .remove-button,
     824.customize-control-media .default-button,
    811825.customize-control-upload .remove-button,
    812826.customize-control-upload .default-button,
    … …  
    820834}
    821835
     836.customize-control-media .upload-button,
    822837.customize-control-upload .upload-button,
    823838.customize-control-image .upload-button,

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

    r31697 r31698  
    13711371
    13721372    /**
    1373      * An upload control, which utilizes the media modal.
     1373     * A control that implements the media modal.
    13741374     *
    13751375     * @class
    … …  
    13771377     * @augments wp.customize.Class
    13781378     */
    1379     api.UploadControl = api.Control.extend({
     1379    api.MediaControl = api.Control.extend({
    13801380
    13811381        /**
    … …  
    14721472
    14731473            // Set the Customizer setting; the callback takes care of rendering.
    1474             this.setting( attachment.url );
     1474            this.setting( attachment.id );
    14751475            node = this.container.find( 'audio, video' ).get(0);
    14761476
    … …  
    15101510            this.setting( '' );
    15111511            this.renderContent(); // Not bound to setting change when emptying.
     1512        }
     1513    });
     1514
     1515    /**
     1516     * An upload control, which utilizes the media modal.
     1517     *
     1518     * @class
     1519     * @augments wp.customize.MediaControl
     1520     * @augments wp.customize.Control
     1521     * @augments wp.customize.Class
     1522     */
     1523    api.UploadControl = api.MediaControl.extend({
     1524
     1525        /**
     1526         * Callback handler for when an attachment is selected in the media modal.
     1527         * Gets the selected image information, and sets it within the control.
     1528         */
     1529        select: function() {
     1530            // Get the attachment from the modal frame.
     1531            var node,
     1532                attachment = this.frame.state().get( 'selection' ).first().toJSON(),
     1533                mejsSettings = window._wpmejsSettings || {};
     1534
     1535            this.params.attachment = attachment;
     1536
     1537            // Set the Customizer setting; the callback takes care of rendering.
     1538            this.setting( attachment.url );
     1539            node = this.container.find( 'audio, video' ).get(0);
     1540
     1541            // Initialize audio/video previews.
     1542            if ( node ) {
     1543                this.player = new MediaElementPlayer( node, mejsSettings );
     1544            } else {
     1545                this.cleanupPlayer();
     1546            }
    15121547        },
    15131548
    … …  
    15271562     * @class
    15281563     * @augments wp.customize.UploadControl
     1564     * @augments wp.customize.MediaControl
    15291565     * @augments wp.customize.Control
    15301566     * @augments wp.customize.Class
    … …  
    15401576     * @class
    15411577     * @augments wp.customize.UploadControl
     1578     * @augments wp.customize.MediaControl
    15421579     * @augments wp.customize.Control
    15431580     * @augments wp.customize.Class
    … …  
    15761613    api.HeaderControl = api.Control.extend({
    15771614        ready: function() {
    1578             this.btnRemove        = $('#customize-control-header_image .actions .remove');
    1579             this.btnNew           = $('#customize-control-header_image .actions .new');
     1615            this.btnRemove = $('#customize-control-header_image .actions .remove');
     1616            this.btnNew    = $('#customize-control-header_image .actions .new');
    15801617
    15811618            _.bindAll(this, 'openMedia', 'removeImage');
    … …  
    23122349    api.controlConstructor = {
    23132350        color:      api.ColorControl,
     2351        media:      api.MediaControl,
    23142352        upload:     api.UploadControl,
    23152353        image:      api.ImageControl,

  • trunk/src/wp-includes/class-wp-customize-control.php

    r31661 r31698  
    522522     */
    523523    final public function print_template() {
    524             ?>
    525             <script type="text/html" id="tmpl-customize-control-<?php echo $this->type; ?>-content">
    526                     <?php $this->content_template(); ?>
    527             </script>
    528             <?php
     524        ?>
     525        <script type="text/html" id="tmpl-customize-control-<?php echo $this->type; ?>-content">
     526            <?php $this->content_template(); ?>
     527        </script>
     528        <?php
    529529    }
    530530
    … …  
    639639
    640640/**
    641  * Customize Upload Control class.
    642  *
    643  * @since 3.4.0
     641 * Customize Media Control class.
     642 *
     643 * @since 4.2.0
    644644 *
    645645 * @see WP_Customize_Control
    646646 */
    647 class WP_Customize_Upload_Control extends WP_Customize_Control {
    648     public $type          = 'upload';
     647class WP_Customize_Media_Control extends WP_Customize_Control {
     648    public $type          = 'media';
    649649    public $mime_type     = '';
    650650    public $button_labels = array();
    651     public $removed = ''; // unused
    652     public $context; // unused
    653     public $extensions = array(); // unused
    654651
    655652    /**
    … …  
    657654     *
    658655     * @since 4.1.0
     656     * @since 4.2.0 Moved from WP_Customize_Upload_Control.
    659657     *
    660658     * @param WP_Customize_Manager $manager {@see WP_Customize_Manager} instance.
    … …  
    678676     *
    679677     * @since 3.4.0
     678     * @since 4.2.0 Moved from WP_Customize_Upload_Control.
    680679     */
    681680    public function enqueue() {
    … …  
    687686     *
    688687     * @since 3.4.0
     688     * @since 4.2.0 Moved from WP_Customize_Upload_Control.
     689     *
    689690     * @uses WP_Customize_Control::to_json()
    690691     */
    … …  
    699700            if ( $this->setting->default ) {
    700701                // Fake an attachment model - needs all fields used by template.
     702                // Note that the default value must be a URL, NOT an attachment ID.
    701703                $type = in_array( substr( $this->setting->default, -3 ), array( 'jpg', 'png', 'gif', 'bmp' ) ) ? 'image' : 'document';
    702704                $default_attachment = array(
    … …  
    721723                $this->json['attachment'] = $this->json['defaultAttachment'];
    722724            } elseif ( $value ) {
    723                 // Get the attachment model for the existing file.
    724                 $attachment_id = attachment_url_to_postid( $value );
    725                 if ( $attachment_id ) {
    726                     $this->json['attachment'] = wp_prepare_attachment_for_js( $attachment_id );
    727                 }
     725                $this->json['attachment'] = wp_prepare_attachment_for_js( $value );
    728726            }
    729727        }
    … …  
    733731     * Don't render any content for this control from PHP.
    734732     *
    735      * @see WP_Customize_Upload_Control::content_template()
    736      * @since 3.4.0
     733     * @since 3.4.0
     734     * @since 4.2.0 Moved from WP_Customize_Upload_Control.
     735     *
     736     * @see WP_Customize_Media_Control::content_template()
    737737     */
    738738    public function render_content() {}
    739739
    740740    /**
    741      * Render a JS template for the content of the upload control.
     741     * Render a JS template for the content of the media control.
    742742     *
    743743     * @since 4.1.0
     744     * @since 4.2.0 Moved from WP_Customize_Upload_Control.
    744745     */
    745746    public function content_template() {
    … …  
    824825
    825826/**
     827 * Customize Upload Control Class.
     828 *
     829 * @since 3.4.0
     830 *
     831 * @see WP_Customize_Media_Control
     832 */
     833class WP_Customize_Upload_Control extends WP_Customize_Media_Control {
     834    public $type          = 'upload';
     835    public $mime_type     = '';
     836    public $button_labels = array();
     837    public $removed = ''; // unused
     838    public $context; // unused
     839    public $extensions = array(); // unused
     840
     841    /**
     842     * Refresh the parameters passed to the JavaScript via JSON.
     843     *
     844     * @since 3.4.0
     845     *
     846     * @uses WP_Customize_Media_Control::to_json()
     847     */
     848    public function to_json() {
     849        parent::to_json();
     850
     851        $value = $this->value();
     852        if ( $value ) {
     853            // Get the attachment model for the existing file.
     854            $attachment_id = attachment_url_to_postid( $value );
     855            if ( $attachment_id ) {
     856                $this->json['attachment'] = wp_prepare_attachment_for_js( $attachment_id );
     857            }
     858        }
     859    }
     860}
     861
     862/**
    826863 * Customize Image Control class.
    827864 *

  • trunk/src/wp-includes/class-wp-customize-manager.php

    r31697 r31698  
    11401140        /* Control Types (custom control classes) */
    11411141        $this->register_control_type( 'WP_Customize_Color_Control' );
     1142        $this->register_control_type( 'WP_Customize_Media_Control' );
    11421143        $this->register_control_type( 'WP_Customize_Upload_Control' );
    11431144        $this->register_control_type( 'WP_Customize_Image_Control' );
Note: See TracChangeset for help on using the changeset viewer.