MediaWiki:Gadget-sound.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

// jshint jquery:true, esversion:5
/* globals require, module, mediaWiki, mw, OO 
Attribution: https://minecraft.wiki/w/MediaWiki:Gadget-sound.js
*/
'use strict';

mw.hook( 'wikipage.content' ).add( function( $content ) {
    var i18n = {
        playTitle: 'Click to play',
        stopTitle: 'Click to stop',
        openFilePage: 'Open file page'
    };
    var $contextmenu = $( '#sound-contextmenu' );
    $content.find('.sound' ).prop( 'title', i18n.playTitle ).on( 'contextmenu', function( e ) {
        // Ignore links or selection
        if ( e.target.tagName === 'A' || window.getSelection().toString() ) {
            return;
        }
        
        var audio = $( this ).find( '.sound-audio audio' )[0];
        if ( !audio || !audio.dataset.mwtitle ) {
            return;
        }
        e.preventDefault();
        
        $contextmenu.remove();
        
        $contextmenu = $( '<a id="sound-contextmenu">' )
            .attr( 'href', mw.Title.makeTitle(6, audio.dataset.mwtitle).getUrl() )
            .attr( 'title', audio.dataset.mwtitle )
            .css( {top: e.pageY, left: e.pageX} )
            .text( i18n.openFilePage )
            .appendTo( 'body' );
    } ).on( 'click', function( e ) {
        // Ignore links
        if ( e.target.tagName === 'A' ) {
            return;
        }
        
        var audio = $( this ).find( '.sound-audio audio' )[0];
        if ( audio ) {
            audio.paused ? audio.play() : audio.pause();
        }
    } ).find( '.sound-audio audio' ).on( 'play', function() {
        // Stop any already playing sounds
        var playing = $( '.sound-playing .sound-audio audio' )[0];
        playing && playing.pause();
        
        $( this ).closest( '.sound' )
            .addClass( 'sound-playing' ).prop( 'title', i18n.stopTitle );
    } ).on( 'pause', function() {
        // Reset back to the start
        this.currentTime = 0;
        
        $( this ).closest( '.sound' )
            .removeClass( 'sound-playing' ).prop( 'title', i18n.playTitle );
    } );

    // When anywhere but the context menu is clicked, remove it immediately
    $( window ).on( 'click', function( e ) {
        if ( $contextmenu.length && !$.contains( $contextmenu[0], e.target ) ) {
            $contextmenu.remove();
            $contextmenu = $();
        }
    } );
} );