WordPress.org

Make WordPress Core

Ticket #38678: 38678.10.diff

File 38678.10.diff, 14.5 KB (added by joemcgill, 4 years ago)

Remove test styles

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

    diff --git src/wp-includes/class-wp-customize-manager.php src/wp-includes/class-wp-customize-manager.php
    index 54c3f0e..97c27f2 100644
    final class WP_Customize_Manager { 
    34543454                $this->add_setting( 'external_header_video', array(
    34553455                        'theme_supports'    => array( 'custom-header', 'video' ),
    34563456                        'transport'         => 'postMessage',
    3457                         'sanitize_callback' => 'esc_url',
     3457                        'sanitize_callback' => 'esc_url_raw',
    34583458                        'validate_callback' => array( $this, '_validate_external_header_video' ),
    34593459                ) );
    34603460
  • src/wp-includes/js/wp-custom-header.js

    diff --git src/wp-includes/js/wp-custom-header.js src/wp-includes/js/wp-custom-header.js
    index 08e2488..f67b3a4 100644
     
    1 (function( window, settings ) {
     1/* global YT */
     2( function( window, settings ) {
    23
     4        var NativeHandler, YouTubeHandler;
     5
     6        // Fail gracefully in unsupported browsers.
    37        if ( ! ( 'addEventListener' in window ) ) {
    4                 // Fail gracefully in unsupported browsers.
    58                return;
    69        }
    710
    8         function wpCustomHeader() {
    9                 var handlers = {
    10                         nativeVideo: {
    11                                 test: function( settings ) {
    12                                         var video = document.createElement( 'video' );
    13                                         return video.canPlayType( settings.mimeType );
    14                                 },
    15                                 callback: nativeHandler
    16                         },
    17                         youtube: {
    18                                 test: function( settings ) {
    19                                         return 'video/x-youtube' === settings.mimeType;
    20                                 },
    21                                 callback: youtubeHandler
    22                         }
    23                 };
     11        /**
     12         * Trigger an event.
     13         *
     14         * @param {Element} target HTML element to dispatch the event on.
     15         * @param {string} name Event name.
     16         */
     17        function trigger( target, name ) {
     18                var evt;
    2419
    25                 function initialize() {
    26                         settings.container = document.getElementById( 'wp-custom-header' );
     20                if ( 'function' === typeof window.Event ) {
     21                        evt = new Event( name );
     22                } else {
     23                        evt = document.createEvent( 'Event' );
     24                        evt.initEvent( name, true, true );
     25                }
    2726
    28                         if ( supportsVideo() ) {
    29                                 for ( var id in handlers ) {
    30                                         var handler = handlers[ id ];
     27                target.dispatchEvent( evt );
     28        }
    3129
    32                                         if ( handlers.hasOwnProperty( id ) && handler.test( settings ) ) {
    33                                                 handler.callback( settings );
     30        /**
     31         * Create a custom header instance.
     32         *
     33         * @class CustomHeader
     34         */
     35        function CustomHeader() {
     36                this.handlers = {
     37                        nativeVideo: new NativeHandler(),
     38                        youtube: new YouTubeHandler()
     39                };
     40        }
    3441
    35                                                 // Set up and dispatch custom event when the video is loaded.
    36                                                 if ( 'dispatchEvent' in window ) {
    37                                                         var videoLoaded = new Event( 'wp-custom-header-video-loaded' );
    38                                                         document.dispatchEvent( videoLoaded );
    39                                                 }
     42        CustomHeader.prototype = {
     43                /**
     44                 * Initalize the custom header.
     45                 *
     46                 * If the environment supports video, loops through registered handlers
     47                 * until one is found that can handle the video.
     48                 */
     49                initialize: function() {
     50                        if ( this.supportsVideo() ) {
     51                                for ( var id in this.handlers ) {
     52                                        var handler = this.handlers[ id ];
     53
     54                                        if ( 'test' in handler && handler.test( settings ) ) {
     55                                                this.activeHandler = handler.initialize.call( handler, settings );
    4056
     57                                                // Dispatch custom event when the video is loaded.
     58                                                trigger( document, 'wp-custom-header-video-loaded' );
    4159                                                break;
    4260                                        }
    4361                                }
    4462                        }
    45                 }
     63                },
    4664
    47                 function supportsVideo() {
     65                /**
     66                 * Determines if the current environment supports video.
     67                 *
     68                 * Themes and plugins can override this method to change the criteria.
     69                 *
     70                 * @return {boolean}
     71                 */
     72                supportsVideo: function() {
    4873                        // Don't load video on small screens. @todo: consider bandwidth and other factors.
    49                         if ( window.innerWidth < settings.minWidth  || window.innerHeight < settings.minHeight ) {
     74                        if ( window.innerWidth < settings.minWidth || window.innerHeight < settings.minHeight ) {
    5075                                return false;
    5176                        }
    5277
    5378                        return true;
     79                },
     80
     81                /**
     82                 * Base handler for custom handlers to extend.
     83                 *
     84                 * @type {BaseHandler}
     85                 */
     86                BaseVideoHandler: BaseHandler
     87        };
     88
     89        /**
     90         * Create a video handler instance.
     91         *
     92         * @class BaseHandler
     93         */
     94        function BaseHandler() {}
     95
     96        BaseHandler.prototype = {
     97                /**
     98                 * Initialize the video handler.
     99                 *
     100                 * @param {object} settings Video settings.
     101                 */
     102                initialize: function( settings ) {
     103                        var handler = this,
     104                                button = document.createElement( 'button' );
     105
     106                        this.settings = settings;
     107                        this.container =  document.getElementById( 'wp-custom-header' ),
     108                        this.button = button;
     109
     110                        button.setAttribute( 'type', 'button' );
     111                        button.setAttribute( 'id', 'wp-custom-header-video-button' );
     112                        button.setAttribute( 'class', 'wp-custom-header-video-button wp-custom-header-video-play' );
     113                        button.innerHTML = settings.l10n.play;
     114
     115                        // Toggle video playback when the button is clicked.
     116                        button.addEventListener( 'click', function() {
     117                                if ( handler.isPaused() ) {
     118                                        handler.play();
     119                                } else {
     120                                        handler.pause();
     121                                }
     122                        });
     123
     124                        // Update the button class and text when the video state changes.
     125                        this.container.addEventListener( 'play', function() {
     126                                button.className = 'wp-custom-header-video-button wp-custom-header-video-play';
     127                                button.innerHTML = settings.l10n.pause;
     128                        });
     129
     130                        this.container.addEventListener( 'pause', function() {
     131                                button.className = 'wp-custom-header-video-button wp-custom-header-video-pause';
     132                                button.innerHTML = settings.l10n.play;
     133                        });
     134
     135                        this.ready();
     136                },
     137
     138                /**
     139                 * Ready method called after a handler is initialized.
     140                 *
     141                 * @abstract
     142                 */
     143                ready: function() {},
     144
     145                /**
     146                 * Whether the video is paused.
     147                 *
     148                 * @abstract
     149                 * @return {boolean}
     150                 */
     151                isPaused: function() {},
     152
     153                /**
     154                 * Pause the video.
     155                 *
     156                 * @abstract
     157                 */
     158                pause: function() {},
     159
     160                /**
     161                 * Play the video.
     162                 *
     163                 * @abstract
     164                 */
     165                play: function() {},
     166
     167                /**
     168                 * Append a video node to the header container.
     169                 *
     170                 * @param {Element} node HTML element.
     171                 */
     172                setVideo: function( node ) {
     173                        var editShortcutNode,
     174                                editShortcut = this.container.getElementsByClassName( 'customize-partial-edit-shortcut' );
     175
     176                        if ( editShortcut.length ) {
     177                                editShortcutNode = this.container.removeChild( editShortcut[0] );
     178                        }
     179
     180                        this.container.innerHTML = '';
     181                        this.container.appendChild( node );
     182
     183                        if ( editShortcutNode ) {
     184                                this.container.appendChild( editShortcutNode );
     185                        }
     186                },
     187
     188                /**
     189                 * Show the video controls.
     190                 *
     191                 * Appends a play/pause button to header container.
     192                 */
     193                showControls: function() {
     194                        if ( ! this.container.contains( this.button ) ) {
     195                                this.container.appendChild( this.button );
     196                        }
     197                },
     198
     199                /**
     200                 * Whether the handler can process a video.
     201                 *
     202                 * @abstract
     203                 * @param {object} settings Video settings.
     204                 * @return {boolean}
     205                 */
     206                test: function() {
     207                        return false;
     208                },
     209
     210                /**
     211                 * Trigger an event on the header container.
     212                 *
     213                 * @param {string} name Event name.
     214                 */
     215                trigger: function( name ) {
     216                        trigger( this.container, name );
    54217                }
     218        };
    55219
    56                 return {
    57                         handlers: handlers,
    58                         initialize: initialize,
    59                         supportsVideo: supportsVideo
    60                 };
    61         }
     220        /**
     221         * Create a custom handler.
     222         *
     223         * @param  {object} protoProps Properties to apply to the prototype.
     224         * @return CustomHandler The subclass.
     225         */
     226        BaseHandler.extend = function( protoProps ) {
     227                var prop;
     228
     229                function CustomHandler() {
     230                        var result = BaseHandler.apply( this, arguments );
     231                        return result;
     232                }
     233
     234                CustomHandler.prototype = Object.create( BaseHandler.prototype );
     235                CustomHandler.prototype.constructor = CustomHandler;
     236
     237                for ( prop in protoProps ) {
     238                        CustomHandler.prototype[ prop ] = protoProps[ prop ];
     239                }
     240
     241                return CustomHandler;
     242        };
     243
     244        /**
     245         * Native video handler.
     246         *
     247         * @class NativeHandler
     248         */
     249        NativeHandler = BaseHandler.extend({
     250                /**
     251                 * Whether the native handler supports a video.
     252                 *
     253                 * @param {object} settings Video settings.
     254                 * @return {boolean}
     255                 */
     256                test: function( settings ) {
     257                        var video = document.createElement( 'video' );
     258                        return video.canPlayType( settings.mimeType );
     259                },
     260
     261                /**
     262                 * Set up a native video element.
     263                 */
     264                ready: function() {
     265                        var handler = this,
     266                                video = document.createElement( 'video' );
     267
     268                        video.id = 'wp-custom-header-video';
     269                        video.autoplay = 'autoplay';
     270                        video.loop = 'loop';
     271                        video.muted = 'muted';
     272                        video.width = this.settings.width;
     273                        video.height = this.settings.height;
     274
     275                        video.addEventListener( 'play', function() {
     276                                handler.trigger( 'play' );
     277                        });
     278
     279                        video.addEventListener( 'pause', function() {
     280                                handler.trigger( 'pause' );
     281                        });
     282
     283                        video.addEventListener( 'canplay', function() {
     284                                handler.showControls();
     285                        });
    62286
    63         function nativeHandler( settings ) {
    64                 var video = document.createElement( 'video' );
     287                        this.video = video;
     288                        handler.setVideo( video );
     289                        video.src = this.settings.videoUrl;
     290                },
    65291
    66                 video.id = 'wp-custom-header-video';
    67                 video.autoplay = 'autoplay';
    68                 video.loop = 'loop';
    69                 video.muted = 'muted';
    70                 video.width = settings.width;
    71                 video.height = settings.height;
     292                /**
     293                 * Whether the video is paused.
     294                 *
     295                 * @return {boolean}
     296                 */
     297                isPaused: function() {
     298                        return this.video.paused;
     299                },
    72300
    73                 video.addEventListener( 'click', function() {
    74                         if ( video.paused ) {
    75                                 video.play();
     301                /**
     302                 * Pause the video.
     303                 */
     304                pause: function() {
     305                        this.video.pause();
     306                },
     307
     308                /**
     309                 * Play the video.
     310                 */
     311                play: function() {
     312                        this.video.play();
     313                }
     314        });
     315
     316        /**
     317         * YouTube video handler.
     318         *
     319         * @class YouTubeHandler
     320         */
     321        YouTubeHandler = BaseHandler.extend({
     322                /**
     323                 * Whether the handler supports a video.
     324                 *
     325                 * @param {object} settings Video settings.
     326                 * @return {boolean}
     327                 */
     328                test: function( settings ) {
     329                        return 'video/x-youtube' === settings.mimeType;
     330                },
     331
     332                /**
     333                 * Set up a YouTube iframe.
     334                 *
     335                 * Loads the YouTube IFrame API if the 'YT' global doesn't exist.
     336                 */
     337                ready: function() {
     338                        var handler = this;
     339
     340                        if ( 'YT' in window ) {
     341                                YT.ready( handler.loadVideo.bind( handler ) );
    76342                        } else {
    77                                 video.pause();
     343                                var tag = document.createElement( 'script' );
     344                                tag.src = 'https://www.youtube.com/iframe_api';
     345                                tag.onload = function () {
     346                                        YT.ready( handler.loadVideo.bind( handler ) );
     347                                };
     348
     349                                document.getElementsByTagName( 'head' )[0].appendChild( tag );
    78350                        }
    79                 });
     351                },
    80352
    81                 settings.container.innerHTML = '';
    82                 settings.container.appendChild( video );
    83                 video.src = settings.videoUrl;
    84         }
     353                /**
     354                 * Load a YouTube video.
     355                 */
     356                loadVideo: function() {
     357                        var handler = this,
     358                                video = document.createElement( 'div' ),
     359                                // @link http://stackoverflow.com/a/27728417
     360                                VIDEO_ID_REGEX = /^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/)|(?:(?:watch)?\?v(?:i)?=|\&v(?:i)?=))([^#\&\?]*).*/;
    85361
    86         function youtubeHandler( settings ) {
    87                 // @link http://stackoverflow.com/a/27728417
    88                 var VIDEO_ID_REGEX = /^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/)|(?:(?:watch)?\?v(?:i)?=|\&v(?:i)?=))([^#\&\?]*).*/,
    89                         videoId = settings.videoUrl.match( VIDEO_ID_REGEX )[1];
    90 
    91                 function loadVideo() {
    92                         var YT = window.YT || {};
    93 
    94                         YT.ready(function() {
    95                                 var video = document.createElement( 'div' );
    96                                 video.id = 'wp-custom-header-video';
    97                                 settings.container.innerHTML = '';
    98                                 settings.container.appendChild( video );
    99 
    100                                 new YT.Player( video, {
    101                                         height: settings.height,
    102                                         width: settings.width,
    103                                         videoId: videoId,
    104                                         events: {
    105                                                 onReady: function( e ) {
    106                                                         e.target.mute();
    107                                                 },
    108                                                 onStateChange: function( e ) {
    109                                                         if ( YT.PlayerState.ENDED === e.data ) {
    110                                                                 e.target.playVideo();
    111                                                         }
    112                                                 }
     362                        video.id = 'wp-custom-header-video';
     363                        handler.setVideo( video );
     364
     365                        handler.player = new YT.Player( video, {
     366                                height: this.settings.height,
     367                                width: this.settings.width,
     368                                videoId: this.settings.videoUrl.match( VIDEO_ID_REGEX )[1],
     369                                events: {
     370                                        onReady: function( e ) {
     371                                                e.target.mute();
     372                                                handler.showControls();
    113373                                        },
    114                                         playerVars: {
    115                                                 autoplay: 1,
    116                                                 controls: 0,
    117                                                 disablekb: 1,
    118                                                 fs: 0,
    119                                                 iv_load_policy: 3,
    120                                                 loop: 1,
    121                                                 modestbranding: 1,
    122                                                 //origin: '',
    123                                                 playsinline: 1,
    124                                                 rel: 0,
    125                                                 showinfo: 0
     374                                        onStateChange: function( e ) {
     375                                                if ( YT.PlayerState.PLAYING === e.data ) {
     376                                                        handler.trigger( 'play' );
     377                                                } else if ( YT.PlayerState.PAUSED === e.data ) {
     378                                                        handler.trigger( 'pause' );
     379                                                } else if ( YT.PlayerState.ENDED === e.data ) {
     380                                                        e.target.playVideo();
     381                                                }
    126382                                        }
    127                                 });
     383                                },
     384                                playerVars: {
     385                                        autoplay: 1,
     386                                        controls: 0,
     387                                        disablekb: 1,
     388                                        fs: 0,
     389                                        iv_load_policy: 3,
     390                                        loop: 1,
     391                                        modestbranding: 1,
     392                                        playsinline: 1,
     393                                        rel: 0,
     394                                        showinfo: 0
     395                                }
    128396                        });
    129                 }
     397                },
    130398
    131                 if ( 'YT' in window ) {
    132                         loadVideo();
    133                 } else {
    134                         var tag = document.createElement( 'script' );
    135                         tag.src = 'https://www.youtube.com/player_api';
    136                         tag.onload = function () { loadVideo(); };
    137                         document.getElementsByTagName( 'head' )[0].appendChild( tag );
     399                /**
     400                 * Whether the video is paused.
     401                 *
     402                 * @return {boolean}
     403                 */
     404                isPaused: function() {
     405                        return YT.PlayerState.PAUSED === this.player.getPlayerState();
     406                },
     407
     408                /**
     409                 * Pause the video.
     410                 */
     411                pause: function() {
     412                        this.player.pauseVideo();
     413                },
     414
     415                /**
     416                 * Play the video.
     417                 */
     418                play: function() {
     419                        this.player.playVideo();
    138420                }
    139         }
     421        });
    140422
     423        // Initialize the custom header when the DOM is ready.
    141424        window.wp = window.wp || {};
    142         window.wp.customHeader = new wpCustomHeader();
    143         document.addEventListener( 'DOMContentLoaded', window.wp.customHeader.initialize, false );
     425        window.wp.customHeader = new CustomHeader();
     426        document.addEventListener( 'DOMContentLoaded', window.wp.customHeader.initialize.bind( window.wp.customHeader ), false );
    144427
     428        // Selective refresh support in the Customizer.
    145429        if ( 'customize' in window.wp ) {
    146430                wp.customize.selectiveRefresh.bind( 'render-partials-response', function( response ) {
    147431                        if ( 'custom_header_settings' in response ) {
  • src/wp-includes/theme.php

    diff --git src/wp-includes/theme.php src/wp-includes/theme.php
    index 66e10b2..0c16c3c 100644
    function get_header_video_settings() { 
    13811381                'height'    => absint( $header->height ),
    13821382                'minWidth'  => 900,
    13831383                'minHeight' => 500,
     1384                'l10n'      => array(
     1385                        'pause' => __( 'Pause' ),
     1386                        'play'  => __( 'Play' ),
     1387                ),
    13841388        );
    13851389
    13861390        if ( preg_match( '#^https?://(?:www\.)?(?:youtube\.com/watch|youtu\.be/)#', $video_url ) ) {