User:Bhsd/widget/listen.js

注意：在保存之后，您可能需要清除浏览器缓存才能看到所作出的变更的影响。

• Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
• Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
• Internet Explorer：按住Ctrl的同时单击刷新，或按Ctrl-F5
• Opera：前往菜单 → 设置（Mac为Opera → Preferences），然后隐私和安全 → 清除浏览数据 → 缓存的图片和文件。

//<nowiki>
// 用于[[Widget:listen]]，可以使用ES6语法
/**
 * @Function: 借鉴Chrome和Edge设计的小型音乐播放元件，并提供音量调节（除iOS）和下载功能
 * @Dependencies: jquery.client, oojs-ui-core, ext.gadget.site-lib
 * @Author: [[User:Bhsd]]
 */
"use strict";
/* global mw, $, wgULS */
(() => {
    const main = () => {
        mw.widget = mw.widget || {};
        if (mw.widget.listen) { return; }
        let audio, menu, vup, vdown, $download, browser;
        const skin = mw.config.get( 'skin' ) == 'vector',
            initialize = () => { // 调节音量相关，iOS无视就行
            const volume = audio.volume;
            // 以下由于浮点精度不能精确比较
            vup.setDisabled( volume > 0.95 );
            vdown.setDisabled( volume < 0.05 ).$label.children( '.fa' )
                .toggleClass('fa-volume-down', volume > 0.05).toggleClass('fa-volume-mute', volume < 0.05);
        };
        $('#bodyContent').on('click', '.listen > i:first-of-type', function() {
            const $this = $(this).toggleClass( 'fa-play fa-pause' ),
                $ad = $this.prev( 'audio' ),
                ad = $ad[0];
            ad[ad.paused ? 'play' : 'pause']();
            if ($ad.data( 'event' )) { return; }
            $ad.data('event', true).on('ended', () => {
                ad.currentTime = 0;
                $this.toggleClass( 'fa-play fa-pause' );
            });
        }).on('click', '.listen > .fa-ellipsis-v', function() {
            const $this = $(this),
                $audio = $this.prevAll( 'audio' ),
                src = $audio.children( 'source' ).attr( 'src' );
            audio = $audio[0];
            menu.setFloatableContainer( $this ); // 测试表明必须先setFloatableContainer再toggle
            menu.toggle( true );
            $download.attr({href: src, download: src.split( '/' ).pop()});
            if (browser != 'iphone') { initialize(); }
        });
        mw.loader.using( ['jquery.client', 'oojs-ui-core', 'ext.gadget.site-lib'] ).then(() => {
            mw.messages.set( wgULS({
                'widget-li-up': '音量上调', 'widget-li-down': '音量下调', 'widget-li-download': '下载'
            }, {
                'widget-li-up': '音量上調', 'widget-li-down': '音量下調', 'widget-li-download': '下載'
            }) );
            browser = $.client.profile().name;
            menu = mw.menu([ ...browser == 'iphone' ? [] : [ // iOS不可通过JavaScript调节音量
                {text: mw.msg( 'widget-li-up' ), icon: 'volume-up', data: 1, click: () => {
                audio.volume += 0.1;
                vup.setSelected( audio.volume < 0.95 );
                initialize();
            }}, {text: mw.msg( 'widget-li-down' ), icon: 'volume-down', data: 2, click: () => {
                audio.volume -= 0.1;
                vdown.setSelected( audio.volume > 0.05 );
                initialize();
            }} ], $.extend( {text: mw.msg( 'widget-li-download' ), icon: 'download', data: 3},
                browser == 'firefox' ? {click: () => { menu.toggle(); }} : null)
            ], {id: 'listen-menu', hideOnChoose: false}, true).on('ready', () => {
                // 有自制icon时，OO.ui自带的isClipped处理不正确
                if (menu.$element.width() > 45 + (skin ? 14 : 16) * (browser == 'iphone' ? 2 : 4)) { return; }
                menu.setHorizontalPosition( menu.horizontalPosition == 'start' ? 'end' : 'start' );
            });
            vup = menu.findItemFromData( 1 );
            vdown = menu.findItemFromData( 2 );
            $download = menu.findItemFromData( 3 ).$label.wrap( '<a>' ).parent();
        });
        mw.widget.listen = true;
    };
    if (window.jQuery) { main(); }
    else { window.addEventListener('jquery', main); }
}) ();
//</nowiki>
// [[category:jQuery小部件]] {{DEFAULTSORT:listen.js}}