WordPress.org
Get WordPress

Make WordPress Core

Ticket #38678: 38678.5.patch

File 38678.5.patch, 9.8 KB (added by davidakennedy, 10 years ago)

Add <span> inside <button> to add class for theme styling.

  • src/wp-content/themes/twentyseventeen/style.css

     
    41494149                padding: 0;
    41504150        }
    41514151}
     4152
     4153/* For testing purposes. */
     4154.wp-custom-header-video-button {
     4155        background: red;
     4156        position: relative;
     4157}

  • src/wp-includes/js/wp-custom-header.js

     
    1 (function( window, settings ) {
     1/* globals YT:false */
     2( function( window, settings ) {
    23
    34        if ( ! ( 'addEventListener' in window ) ) {
    45                // Fail gracefully in unsupported browsers.
    … …  
    56                return;
    67        }
    78
    8         function wpCustomHeader() {
    9                 var handlers = {
     9        function trigger( target, name ) {
     10                var evt;
     11
     12                if ( 'function' === typeof window.Event ) {
     13                        evt = new Event( name );
     14                } else {
     15                        evt = document.createEvent( 'Event' );
     16                        evt.initEvent( name, true, true );
     17                }
     18
     19                target.dispatchEvent( evt );
     20        }
     21
     22        function CustomHeader() {
     23                this.handlers = {
    1024                        nativeVideo: {
    1125                                test: function( settings ) {
    1226                                        var video = document.createElement( 'video' );
    1327                                        return video.canPlayType( settings.mimeType );
    1428                                },
    15                                 callback: nativeHandler
     29                                callback: NativeHandler
    1630                        },
    1731                        youtube: {
    1832                                test: function( settings ) {
    1933                                        return 'video/x-youtube' === settings.mimeType;
    2034                                },
    21                                 callback: youtubeHandler
     35                                callback: YouTubeHandler
    2236                        }
    2337                };
     38        }
    2439
    25                 function initialize() {
    26                         settings.container = document.getElementById( 'wp-custom-header' );
     40        CustomHeader.prototype.initialize = function() {
     41                var activeHandler,
     42                        button = document.createElement( 'button' );
     43                        buttonSpan = document.createElement( 'span' );
    2744
    28                         if ( supportsVideo() ) {
    29                                 for ( var id in handlers ) {
    30                                         var handler = handlers[ id ];
     45                button.setAttribute( 'type', 'button' );
     46                button.setAttribute( 'id', 'wp-custom-header-video-button' );
     47                button.setAttribute( 'class', 'wp-custom-header-video-button wp-custom-header-video-play' );
     48                button.setAttribute( 'aria-hidden', true );
     49                button.appendChild( buttonSpan );
     50                buttonSpan.setAttribute( 'class', 'wp-custom-header-video-button-text' );
     51                buttonSpan.innerHTML = settings.l10n.play;
    3152
    32                                         if ( handlers.hasOwnProperty( id ) && handler.test( settings ) ) {
    33                                                 handler.callback( settings );
     53                this.container = document.getElementById( 'wp-custom-header' ),
     54                this.button = button;
    3455
    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                                                 }
     56                if ( this.supportsVideo() ) {
     57                        for ( var id in this.handlers ) {
     58                                var handler = this.handlers[ id ];
    4059
    41                                                 break;
    42                                         }
     60                                if ( this.handlers.hasOwnProperty( id ) && handler.test( settings ) ) {
     61                                        activeHandler = handler.callback.call( this, this, settings );
     62
     63                                        // Dispatch custom event when the video is loaded.
     64                                        trigger( document, 'wp-custom-header-video-loaded' );
     65                                        break;
    4366                                }
    4467                        }
     68
     69                        this.container.addEventListener( 'play', function() {
     70                                button.className = 'wp-custom-header-video-button wp-custom-header-video-play';
     71                                buttonSpan.innerHTML = settings.l10n.pause;
     72                        });
     73
     74                        this.container.addEventListener( 'pause', function() {
     75                                button.className = 'wp-custom-header-video-button wp-custom-header-video-pause';
     76                                buttonSpan.innerHTML = settings.l10n.play;
     77                        });
     78
     79                        button.addEventListener( 'click', function() {
     80                                if ( activeHandler.paused() ) {
     81                                        activeHandler.play();
     82                                } else {
     83                                        activeHandler.pause();
     84                                }
     85                        });
    4586                }
     87        };
    4688
    47                 function supportsVideo() {
    48                         // Don't load video on small screens. @todo: consider bandwidth and other factors.
    49                         if ( window.innerWidth < settings.minWidth || window.innerHeight < settings.minHeight ) {
    50                                 return false;
    51                         }
     89        CustomHeader.prototype.supportsVideo = function() {
     90                // Don't load video on small screens. @todo: consider bandwidth and other factors.
     91                if ( window.innerWidth < settings.minWidth || window.innerHeight < settings.minHeight ) {
     92                        return false;
     93                }
    5294
    53                         return true;
     95                return true;
     96        };
     97
     98        CustomHeader.prototype.setButton = function() {
     99                if ( ! this.container.contains( this.button ) ) {
     100                        this.container.appendChild( this.button );
    54101                }
     102        };
    55103
    56                 return {
    57                         handlers: handlers,
    58                         initialize: initialize,
    59                         supportsVideo: supportsVideo
    60                 };
    61         }
     104        CustomHeader.prototype.setVideo = function( node ) {
     105                this.container.innerHTML = '';
     106                this.container.appendChild( node );
     107        };
    62108
    63         function nativeHandler( settings ) {
     109        function NativeHandler( header, settings ) {
     110                if ( ! ( this instanceof NativeHandler ) ) {
     111                        return new NativeHandler( header, settings );
     112                }
     113
    64114                var video = document.createElement( 'video' );
    65 
    66115                video.id = 'wp-custom-header-video';
    67116                video.autoplay = 'autoplay';
    68117                video.loop = 'loop';
    … …  
    70119                video.width = settings.width;
    71120                video.height = settings.height;
    72121
    73                 video.addEventListener( 'click', function() {
    74                         if ( video.paused ) {
    75                                 video.play();
    76                         } else {
    77                                 video.pause();
    78                         }
     122                video.addEventListener( 'play', function() {
     123                        trigger( header.container, 'play' );
    79124                });
    80125
    81                 settings.container.innerHTML = '';
    82                 settings.container.appendChild( video );
     126                video.addEventListener( 'pause', function() {
     127                        trigger( header.container, 'pause' );
     128                });
     129
     130                video.addEventListener( 'canplay', function() {
     131                        header.setButton();
     132                });
     133
     134                header.setVideo( video );
    83135                video.src = settings.videoUrl;
     136
     137                return {
     138                        play: video.play.bind( video ),
     139
     140                        pause: video.pause.bind( video ),
     141
     142                        paused: function() {
     143                                return video.paused;
     144                        }
     145                };
    84146        }
    85147
    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];
     148        function YouTubeHandler( header, settings ) {
     149                if ( ! ( this instanceof YouTubeHandler ) ) {
     150                        return new YouTubeHandler( header, settings );
     151                }
    90152
     153                var player;
     154
    91155                function loadVideo() {
    92                         var YT = window.YT || {};
     156                        var video = document.createElement( 'div' ),
     157                                // @link http://stackoverflow.com/a/27728417
     158                                VIDEO_ID_REGEX = /^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/)|(?:(?:watch)?\?v(?:i)?=|\&v(?:i)?=))([^#\&\?]*).*/;
    93159
    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 );
     160                        video.id = 'wp-custom-header-video';
     161                        header.setVideo( video );
    99162
    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                                                         }
     163                        player = new YT.Player( video, {
     164                                height: settings.height,
     165                                width: settings.width,
     166                                videoId: settings.videoUrl.match( VIDEO_ID_REGEX )[1],
     167                                events: {
     168                                        onReady: function( e ) {
     169                                                e.target.mute();
     170                                                header.setButton();
     171                                        },
     172                                        onStateChange: function( e ) {
     173                                                if ( YT.PlayerState.PLAYING === e.data ) {
     174                                                        trigger( header.container, 'play' );
     175                                                } else if ( YT.PlayerState.PAUSED === e.data ) {
     176                                                        trigger( header.container, 'pause' );
     177                                                } else if ( YT.PlayerState.ENDED === e.data ) {
     178                                                        e.target.playVideo();
    112179                                                }
    113                                         },
    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
    126180                                        }
    127                                 });
     181                                },
     182                                playerVars: {
     183                                        autoplay: 1,
     184                                        controls: 0,
     185                                        disablekb: 1,
     186                                        fs: 0,
     187                                        iv_load_policy: 3,
     188                                        loop: 1,
     189                                        modestbranding: 1,
     190                                        playsinline: 1,
     191                                        rel: 0,
     192                                        showinfo: 0
     193                                }
    128194                        });
    129195                }
    130196
    131197                if ( 'YT' in window ) {
    132                         loadVideo();
     198                        YT.ready( loadVideo );
    133199                } else {
    134200                        var tag = document.createElement( 'script' );
    135                         tag.src = 'https://www.youtube.com/player_api';
    136                         tag.onload = function () { loadVideo(); };
     201                        tag.src = 'https://www.youtube.com/iframe_api';
     202                        tag.onload = function () {
     203                                YT.ready( loadVideo );
     204                        };
     205
    137206                        document.getElementsByTagName( 'head' )[0].appendChild( tag );
    138207                }
     208
     209                return {
     210                        play: function() {
     211                                player.playVideo();
     212                        },
     213
     214                        pause: function() {
     215                                player.pauseVideo();
     216                        },
     217
     218                        paused: function() {
     219                                return YT.PlayerState.PAUSED === player.getPlayerState();
     220                        }
     221                };
    139222        }
    140223
    141224        window.wp = window.wp || {};
    142         window.wp.customHeader = new wpCustomHeader();
    143         document.addEventListener( 'DOMContentLoaded', window.wp.customHeader.initialize, false );
     225        window.wp.customHeader = new CustomHeader();
     226        document.addEventListener( 'DOMContentLoaded', window.wp.customHeader.initialize.bind( window.wp.customHeader ), false );
    144227
    145228        if ( 'customize' in window.wp ) {
    146229                wp.customize.selectiveRefresh.bind( 'render-partials-response', function( response ) {

  • src/wp-includes/theme.php

     
    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 ) ) {