Leahnaya/pokemon-showdown-client
1
0
Fork 0
mirror of https://github.com/smogon/pokemon-showdown-client.git synced 2026-09-10 04:49:14 -05:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Use HTML5 range inputs for Volume sliders

Browse Source 
Previously, both Volume sliders and EV sliders use an outdated jQuery
slider library with no mobile support or accessibility.

Volume sliders are now HTML5, which means better accessibility and
mobile support.

We unfortunately can't move EV sliders to HTML5 because they do some
magic to constrain them to 510 total EVs, but EV sliders are
fortunately still accessible because they come with a textbox as an
alternate input.

Fixes the slider part of #954
This commit is contained in:
Guangcong Luo
2017-06-28 09:35:54 +08:00
parent 156b5bf3d5
commit 27ebc01d11
2 changed files with 24 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
js/client-topbar.js
View File

@@ -354,47 +354,31 @@
initialize: function (data) {
var buf = '';
var muted = !!Tools.prefs('mute');
buf += '<p class="effect-volume"><label class="optlabel">Effect volume:</label>' + (muted ? '<em>(muted)</em>' : '<input type="slider" name="effectvolume" value="' + (Tools.prefs('effectvolume') || 50) + '" />') + '</p>';
buf += '<p class="music-volume"><label class="optlabel">Music volume:</label>' + (muted ? '<em>(muted)</em>' : '<input type="slider" name="musicvolume" value="' + (Tools.prefs('musicvolume') || 50) + '" />') + '</p>';
buf += '<p class="notif-volume"><label class="optlabel">Notification volume:</label>' + (muted ? '<em>(muted)</em>' : '<input type="slider" name="notifvolume" value="' + (Tools.prefs('notifvolume') || 50) + '" />') + '</p>';
buf += '<p class="effect-volume"><label class="optlabel">Effect volume:</label>' + (muted ? '<em>(muted)</em>' : '<input type="range" min="0" max="100" step="1" name="effectvolume" value="' + (Tools.prefs('effectvolume') || 50) + '" />') + '</p>';
buf += '<p class="music-volume"><label class="optlabel">Music volume:</label>' + (muted ? '<em>(muted)</em>' : '<input type="range" min="0" max="100" step="1" name="musicvolume" value="' + (Tools.prefs('musicvolume') || 50) + '" />') + '</p>';
buf += '<p class="notif-volume"><label class="optlabel">Notification volume:</label>' + (muted ? '<em>(muted)</em>' : '<input type="range" min="0" max="100" step="1" name="notifvolume" value="' + (Tools.prefs('notifvolume') || 50) + '" />') + '</p>';
buf += '<p><label class="optlabel"><input type="checkbox" name="muted"' + (muted ? ' checked' : '') + ' /> Mute sounds</label></p>';
this.$el.html(buf).css('min-width', 160);
},
events: {
'change input[name=muted]': 'setMute'
'change input[name=muted]': 'setMute',
'change input[type=range]': 'updateVolume',
'keyup input[type=range]': 'updateVolume',
'input input[type=range]': 'updateVolume'
},
domInitialize: function () {
var self = this;
this.$('.effect-volume input').slider({
from: 0,
to: 100,
step: 1,
dimension: '%',
skin: 'round_plastic',
onstatechange: function (val) {
self.setEffectVolume(val);
}
});
this.$('.music-volume input').slider({
from: 0,
to: 100,
step: 1,
dimension: '%',
skin: 'round_plastic',
onstatechange: function (val) {
self.setMusicVolume(val);
}
});
this.$('.notif-volume input').slider({
from: 0,
to: 100,
step: 1,
dimension: '%',
skin: 'round_plastic',
onstatechange: function (val) {
self.setNotifVolume(val);
}
});
updateVolume: function (e) {
var val = Number(e.currentTarget.value);
switch (e.currentTarget.name) {
case 'effectvolume':
this.setEffectVolume(val);
break;
case 'musicvolume':
this.setMusicVolume(val);
break;
case 'notifvolume':
this.setNotifVolume(val);
break;
}
},
setMute: function (e) {
var muted = !!e.currentTarget.checked;
@@ -402,9 +386,9 @@
BattleSound.setMute(muted);
if (!muted) {
this.$('.effect-volume').html('<label class="optlabel">Effect volume:</label><input type="slider" name="effectvolume" value="' + (Tools.prefs('effectvolume') || 50) + '" />');
this.$('.music-volume').html('<label class="optlabel">Music volume:</label><input type="slider" name="musicvolume" value="' + (Tools.prefs('musicvolume') || 50) + '" />');
this.$('.notif-volume').html('<label class="optlabel">Notification volume:</label><input type="slider" name="notifvolume" value="' + (Tools.prefs('notifvolume') || 50) + '" />');
this.$('.effect-volume').html('<label class="optlabel">Effect volume:</label><input type="range" min="0" max="100" step="1" name="effectvolume" value="' + (Tools.prefs('effectvolume') || 50) + '" />');
this.$('.music-volume').html('<label class="optlabel">Music volume:</label><input type="range" min="0" max="100" step="1" name="musicvolume" value="' + (Tools.prefs('musicvolume') || 50) + '" />');
this.$('.notif-volume').html('<label class="optlabel">Notification volume:</label><input type="range" min="0" max="100" step="1" name="notifvolume" value="' + (Tools.prefs('notifvolume') || 50) + '" />');
this.domInitialize();
} else {
this.$('.effect-volume').html('<label class="optlabel">Effect volume:</label><em>(muted)</em>');

4
style/client.css
View File

@@ -3158,19 +3158,17 @@ a.ilink.yours {
.effect-volume,
.music-volume,
.notif-volume {
height: 39px;
min-height: 34px;
}
.effect-volume label,
.music-volume label,
.notif-volume label {
padding-bottom: 12px;
font-size: 8pt;
}
.effect-volume em,
.music-volume em,
.notif-volume em {
display: block;
margin-top: -6px;
font-size: 9pt;
padding-left: 5px;
color: #555555;