From 27ebc01d11775fa8009ba5dc5af2a307d1d84e96 Mon Sep 17 00:00:00 2001
From: Guangcong Luo <guangcongluo@gmail.com>
Date: Wed, 28 Jun 2017 09:35:54 +0800
Subject: [PATCH] Use HTML5 range inputs for Volume sliders

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
---
 js/client-topbar.js | 62 +++++++++++++++++----------------------------
 style/client.css    |  4 +--
 2 files changed, 24 insertions(+), 42 deletions(-)

diff --git a/js/client-topbar.js b/js/client-topbar.js
index 79ae0f879..e157d4e8f 100644
--- a/js/client-topbar.js
+++ b/js/client-topbar.js
@@ -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>');
diff --git a/style/client.css b/style/client.css
index a80d6c845..25644f48e 100644
--- a/style/client.css
+++ b/style/client.css
@@ -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;