volume buttons and switch language buttons for sidebar

menuButton.js

@@ -1,4 +1,4 @@
-(function () {
+(function menuButton() {
     'use strict';
 
     // Utility functions to create buttons in dock menu.
@@ -46,7 +46,15 @@
                 }
                 .multiButton .buttons a {
                     flex-grow: 1;
-                }`;
+                }
+                .multiButton .buttons a[disabled] {
+                    opacity: 0.6;
+                    pointer-events: none;
+                }
+                .multiButton .buttons a.active {
+                    border-color: currentColor !important;
+                }
+                `;
 
             const $style = jQuery(`<style type="text/css" id="multi-button-style">${styles}</style>`);
             $style.appendTo($head);

switchLangBtn.js

@@ -0,0 +1,22 @@
+(function () {
+    'use strict';
+
+    // requires menuButton.js
+
+    /* globals scUtils */
+
+    function createLangButton(label, langCode) {
+        scUtils.createHandlerButton(label, '', 'lang', () => {
+            const prefix = langCode ? '-' + langCode : '';
+            const url = `./index${prefix}.html`;
+            window.location.replace(url);
+        });
+    }
+
+    window.scUtils = Object.assign(
+        window.scUtils || {},
+        {
+            createLangButton,
+        }
+    );
+}());

volumeButtons.js

@@ -0,0 +1,119 @@
+(function volumeButton() {
+    'use strict';
+
+    // requires menuButton.js
+
+    /* globals scUtils, l10nStrings, jQuery */
+
+    function saveVolume(value) {
+        localStorage.setItem('masterVolume', value);
+    }
+
+    function loadVolume() {
+        const loaded = localStorage.getItem('masterVolume') || '1.0';
+        let value = parseFloat(loaded);
+
+        if (isNaN(value)) {
+            return 1;
+        } else {
+            return value;
+        }
+    }
+
+    function applyVolume(value) {
+        jQuery.wiki(`<<masteraudio volume ${value}>>`);
+    }
+
+    function saveMute(value) {
+        localStorage.setItem('masterMute', value);
+    }
+
+    function loadMute() {
+        const loaded = localStorage.getItem('masterMute') || 'false';
+
+        return loaded === 'true';
+    }
+
+    function applyMute(value) {
+        jQuery.wiki(`<<masteraudio ${value ? 'mute' : 'unmute'}>>`);
+    }
+
+    function clampVolume(volume) {
+        return parseFloat(
+            Math.min(
+                Math.max(volume, 0.0),
+                1.0
+            ).toFixed(1)
+        );
+    }
+
+    function createVolumeButtons(interval = 0.2, labels = ['🔈', '🔇', '🔊']) {
+        let volume = loadVolume();
+
+        if (volume !== 1.0) {
+            applyVolume(volume);
+            saveVolume(volume);
+        }
+
+        let mute = loadMute();
+        if (mute !== true) {
+            applyMute(mute);
+            saveMute(mute);
+        }
+
+        const ops = {
+            dec() {
+                volume = clampVolume(volume - interval);
+            },
+            mute() {
+                mute = !mute;
+            },
+            inc() {
+                volume = clampVolume(volume + interval);
+            },
+        };
+
+        function updateUI(button) {
+            button.find('a').removeAttr('disabled');
+
+            if (volume === 0) {
+                button.find('a:eq(0)').attr('disabled', true);
+            } else if (volume === 1) {
+                button.find('a:eq(2)').attr('disabled', true);
+            }
+
+            if (mute) {
+                button.find('a:eq(1)').addClass('active');
+            } else {
+                button.find('a:eq(1)').removeClass('active');
+            }
+        }
+
+        const {button} = scUtils.createMultiButton('fontSize', l10nStrings.uiVolumeControl || 'Volume', labels, (event, index) => {
+            if (index === 0) {
+                ops.dec();
+            } else if (index === 1) {
+                ops.mute();
+            } else {
+                ops.inc();
+            }
+
+            updateUI(button);
+
+            applyVolume(volume);
+            saveVolume(volume);
+
+            applyMute(mute);
+            saveMute(mute);
+        });
+
+        updateUI(button);
+    }
+
+    window.scUtils = Object.assign(
+        window.scUtils || {},
+        {
+            createVolumeButtons,
+        }
+    );
+}());