MediaWiki:Gadget-theme.js: различия между версиями

Интерактивная навигация по истории

← Предыдущая правка

@@ Строка 1: / Строка 1: @@
 ;(function($, mw){
      const COOKIE = 'ss14_wikiTheme';
+    const COOKIE_SPACE = 'ss14_spaceAnimation';
      function loadTheme() {
-         return $.cookie(COOKIE) || 'normal';
+         return $.cookie(COOKIE) || 'dark';
+    }
+    function saveTheme(theme) {
+        $.cookie(COOKIE, theme, { expires: 365, path: '/' });
      }
      function applyTheme(theme) {
-         $('body')
+         const $body = $('body');
-             .removeClass('wgl-theme-normal wgl-theme-light wgl-theme-dark')
+        const themeClasses = ($body.attr('class') || '')
-             .addClass(`wgl-theme-${theme}`);
+            .split(/\s+/)
+             .filter(cls => cls.indexOf('wgl-theme-') === 0);
+        if (themeClasses.length) {
+             $body.removeClass(themeClasses.join(' '));
+        }
+        $body.addClass(`wgl-theme-${theme}`);
          mw.hook('wgl.themeChanged').fire(theme);
      }
-     applyTheme(loadTheme());
+     function loadSpaceAnimation() {
+        return $.cookie(COOKIE_SPACE) || 'on';
+    }
+    function saveSpaceAnimation(val) {
+        $.cookie(COOKIE_SPACE, val, { expires: 365, path: '/' });
+    }
+    function applySpaceAnimation(val) {
+        const $body = $('body');
+        const themeClasses = ($body.attr('class') || '')
+            .split(/\s+/)
+            .filter(cls => cls.indexOf('wgl-space-animation-') === 0);
+        if (themeClasses.length) {
+            $body.removeClass(themeClasses.join(' '));
+        }
+        $body.addClass(`wgl-space-animation-${val}`);
+        mw.hook('wgl.spaceAnimationChanged').fire(val);
+    }
+    function initThemeMenu($container, currentTheme) {
+        currentTheme = currentTheme || loadTheme();
+        const $portlet = $('<div>', {
+            class: 'mw-portlet mw-portlet-js theme-menu',
+            id: 'skin-client-prefs-skin-theme'
+        });
+        $portlet.append(
+            $('<div>', { class: 'theme-menu__heading', text: 'Тема' }),
+            $('<div>', { class: 'theme-menu__content' })
+        );
+        const $form = $('<form>');
+        [
+            { key: 'light',  label: 'Светлая' },
+            { key: 'normal', label: 'Стандартная' },
+            { key: 'dark',   label: 'Тёмная' },
+            { key: 'ss14',   label: 'Space Station 14' }
+        ].forEach(opt => {
+            const $wr = $('<div>', { class: 'theme-client-prefs-radio' });
+            const $inp = $('<input>', {
+                type:     'radio',
+                name:     'theme-selection',
+                id:       `theme-value-${opt.key}`,
+                value:    opt.key,
+                checked:  opt.key === currentTheme
+            });
+            const $lbl = $('<label>', {
+                for:      `theme-value-${opt.key}`,
+                text:     opt.label
+            });
+            $wr.append($inp, $lbl);
+            $form.append($wr);
+        });
+        $portlet.find('.theme-menu__content').append(
+            $('<ul>', { class: 'theme-menu__content-list' })
+                .append(
+                    $('<li>', { class: 'mw-list-item mw-list-item-js' })
+                        .append($form)
+                )
+        );
+        $container.append($portlet);
+        initSpaceMenu($portlet);
+        $form.on('change', 'input[name="theme-selection"]', function() {
+            const newTheme = $(this).val();
+            saveTheme(newTheme);
+            applyTheme(newTheme);
+        });
+    }
+    function initSpaceMenu($afterPortlet, currentVal) {
+        currentVal = currentVal || loadSpaceAnimation();
+        const $spacePortlet = $('<div>', {
+            class: 'mw-portlet mw-portlet-js theme-menu',
+            id: 'skin-client-prefs-skin-space'
+        });
+        $spacePortlet.append(
+            $('<div>', { class: 'theme-menu__heading', text: 'Космос' }),
+            $('<div>', { class: 'theme-menu__content' })
+        );
+        const $form = $('<form style="flex-direction:row;">');
+        [
+            { val: 'on',  label: 'Включено' },
+            { val: 'off', label: 'Отключено' }
+        ].forEach(opt => {
+            const $wr = $('<div>', { class: 'theme-client-prefs-radio' });
+            const $inp = $('<input>', {
+                type: 'radio',
+                name: 'space-animation-selection',
+                id: `space-value-${opt.val}`,
+                value: opt.val,
+                checked: opt.val === currentVal
+            });
+            const $lbl = $('<label>', {
+                for: `space-value-${opt.val}`,
+                text: opt.label
+            });
+            $wr.append($inp, $lbl);
+            $form.append($wr);
+        });
+        $spacePortlet.find('.theme-menu__content').append(
+            $('<ul>', { class: 'theme-menu__content-list' })
+                .append(
+                    $('<li>', { class: 'mw-list-item mw-list-item-js' })
+                        .append($form)
+                )
+        );
+        $afterPortlet.after($spacePortlet);
+        applySpaceAnimation(currentVal);
+        $form.on('change', 'input[name="space-animation-selection"]', function() {
+            const newVal = $(this).val();
+            saveSpaceAnimation(newVal);
+            applySpaceAnimation(newVal);
+        });
+    }
+    mw.themeUtils = {
+        loadTheme,
+        applyTheme,
+        initThemeMenu,
+        loadSpaceAnimation,
+        saveSpaceAnimation,
+        applySpaceAnimation,
+        initSpaceMenu
+    };
 }(jQuery, mediaWiki));