LLWiki正在建设中,欢迎加入我们!
“User:Bhsd/widget/listen.js”的版本间差异
跳转到导航
跳转到搜索
小 |
小 |
||
(未显示同一用户的8个中间版本) | |||
第1行: | 第1行: | ||
//<nowiki> |
|||
// 用于[[Widget:listen]],可以使用ES6语法 |
|||
/** |
|||
* @Function: 借鉴Chrome和Edge设计的小型音乐播放元件,并提供音量调节(除iOS)和下载功能 |
|||
* @Dependencies: jquery.client, oojs-ui-core, ext.gadget.site-lib |
|||
* @Author: [[User:Bhsd]] |
|||
*/ |
|||
"use strict"; |
"use strict"; |
||
/* global mw, $, wgULS */ |
/* global mw, $, wgULS */ |
||
第5行: | 第12行: | ||
mw.widget = mw.widget || {}; |
mw.widget = mw.widget || {}; |
||
if (mw.widget.listen) { return; } |
if (mw.widget.listen) { return; } |
||
let audio, menu, vup, vdown, $download, |
let audio, menu, vup, vdown, $download, browser; |
||
const |
const skin = mw.config.get( 'skin' ) == 'vector', |
||
initialize = () => { // 调节音量相关,iOS无视就行 |
|||
const volume = audio.volume; |
const volume = audio.volume; |
||
// 以下由于浮点精度不能精确比较 |
// 以下由于浮点精度不能精确比较 |
||
第14行: | 第22行: | ||
}; |
}; |
||
$('#bodyContent').on('click', '.listen > i:first-of-type', function() { |
$('#bodyContent').on('click', '.listen > i:first-of-type', function() { |
||
const |
const $this = $(this).toggleClass( 'fa-play fa-pause' ), |
||
$ad = $this.prev( 'audio' ), |
|||
ad = $ad[0]; |
|||
ad[ad.paused ? 'play' : 'pause'](); |
ad[ad.paused ? 'play' : 'pause'](); |
||
⚫ | |||
$ad.data('event', true).on('ended', () => { |
|||
ad.currentTime = 0; |
|||
$this.toggleClass( 'fa-play fa-pause' ); |
|||
}); |
|||
}).on('click', '.listen > .fa-ellipsis-v', function() { |
}).on('click', '.listen > .fa-ellipsis-v', function() { |
||
const $this = $(this), |
const $this = $(this), |
||
第23行: | 第38行: | ||
menu.setFloatableContainer( $this ); // 测试表明必须先setFloatableContainer再toggle |
menu.setFloatableContainer( $this ); // 测试表明必须先setFloatableContainer再toggle |
||
menu.toggle( true ); |
menu.toggle( true ); |
||
$download.attr({href: src, download: src.split( '/' ).pop()}); |
|||
// 新版iOS理应可以下载,但不清楚怎么触发下载管理器 |
|||
if (browser != 'iphone') { initialize(); } |
|||
⚫ | |||
}); |
}); |
||
mw.loader.using( ['jquery.client', 'oojs-ui-core', 'ext.gadget.site-lib'] ).then(() => { |
mw.loader.using( ['jquery.client', 'oojs-ui-core', 'ext.gadget.site-lib'] ).then(() => { |
||
第33行: | 第47行: | ||
'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([ ... |
menu = mw.menu([ ...browser == 'iphone' ? [] : [ // iOS不可通过JavaScript调节音量 |
||
{text: mw.msg( 'widget-li-up' ), icon: 'volume-up', data: 1, click: () => { |
{text: mw.msg( 'widget-li-up' ), icon: 'volume-up', data: 1, click: () => { |
||
audio.volume += 0.1; |
audio.volume += 0.1; |
||
第43行: | 第57行: | ||
vdown.setSelected( audio.volume > 0.05 ); |
vdown.setSelected( audio.volume > 0.05 ); |
||
initialize(); |
initialize(); |
||
}} ], {text: mw.msg( 'widget-li-download' ), icon: 'download', data: 3, |
}} ], $.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 ); |
vup = menu.findItemFromData( 1 ); |
||
vdown = menu.findItemFromData( 2 ); |
vdown = menu.findItemFromData( 2 ); |
||
$download = menu.findItemFromData( 3 ).$label.wrap( '<a>' ).parent() |
$download = menu.findItemFromData( 3 ).$label.wrap( '<a>' ).parent(); |
||
.attr('target', ios ? '_blank' : undefined); |
|||
}); |
}); |
||
mw.widget.listen = true; |
mw.widget.listen = true; |
||
第55行: | 第73行: | ||
else { window.addEventListener('jquery', main); } |
else { window.addEventListener('jquery', main); } |
||
}) (); |
}) (); |
||
//</nowiki> |
|||
// [[category:jQuery小部件]] {{DEFAULTSORT:listen.js}} |
2021年3月25日 (四) 03:14的最新版本
//<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}}