feat: implement groundwork for feature toggling

Issue: #1
alex4401 · Dec 16, 2022 · f92c100 · f92c100
1 parent f4a8913
commit f92c100
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 8 deletions.
diff --git a/i18n/en.json b/i18n/en.json
@@ -14,6 +14,8 @@
     "theme-light": "Light",
     "themetoggle-simple-switch": "Click to toggle the theme",
     "themetoggle-dropdown-switch": "Click to select a theme",
+    "themetoggle-dropdown-section-themes": "Themes",
+    "themetoggle-dropdown-section-features": "Other",
     "themeusage": "Theme usage statistics",
     "themeusage-theme": "Theme",
     "themeusage-usercount": "Number of users",

diff --git a/includes/ThemeApplyModule.php b/includes/ThemeApplyModule.php
@@ -27,7 +27,8 @@ public function getScript( Context $context ): string {
             'VARS.Default' => $context->encodeJson( $currentTheme ),
             'VARS.SiteBundledCss' => $context->encodeJson( $defs->getBundledThemeIds() ),
             'VARS.ResourceLoaderEndpoint' => $context->encodeJson( $this->getThemeLoadEndpointUri( $context ) ),
-            'VARS.WithPCSSupport' => !$wgThemeToggleDisableAutoDetection && $defs->isEligibleForAuto() ? 1 : 0
+            'VARS.WithPCSSupport' => !$wgThemeToggleDisableAutoDetection && $defs->isEligibleForAuto() ? 1 : 0,
+            'VARS.WithFeatureSupport' => false
         ];
         $script = strtr( $script, $pairs );
 

diff --git a/modules/dropdownSwitcher/styles-generic.less b/modules/dropdownSwitcher/styles-generic.less
@@ -49,7 +49,15 @@ body #p-personal li#p-themes {
             width: 100%;
             border-radius: 4px;
 
-            &:hover {
+            &.section-divisor {
+                color: #aaa;
+                font-size: .7125em;
+                text-transform: uppercase;
+                padding: 0.3em 0.4em 0em 0.3em;
+                line-height: 1;
+            }
+
+            &:not(.section-divisor):hover {
                 background: #fff3;
             }
 

diff --git a/modules/dropdownSwitcher/styles-wikigg.less b/modules/dropdownSwitcher/styles-wikigg.less
@@ -53,7 +53,15 @@ body #p-personal li#p-themes {
             width: 100%;
             border-radius: 4px;
 
-            &:hover {
+            &.section-divisor {
+                color: #aaa;
+                font-size: .7125em;
+                text-transform: uppercase;
+                padding: 0.3em 0.4em 0em 0.3em;
+                line-height: 1;
+            }
+
+            &:not(.section-divisor):hover {
                 background: #fff3;
             }
 

diff --git a/modules/inline/merged.js b/modules/inline/merged.js
@@ -14,8 +14,7 @@
 
 
 ( function () {
-    var themeKey = 'skin-theme',
-        htmlNode = document.documentElement,
+    var htmlNode = document.documentElement,
         linkNode = null,
         currentTheme = null;
     /* @if ( VARS.WithPCSSupport ) */
@@ -60,7 +59,11 @@
     /* @endif */
 
 
-    window.MwSkinTheme = {
+    window.MwSkinTheme = Object.freeze( {
+        LOCAL_THEME_PREFERENCE_KEY: 'skin-theme',
+        LOCAL_FEATURE_PREFERENCE_KEY: 'skin-theme-features',
+
+
         getCurrent: function () {
             return currentTheme;
         },
@@ -86,9 +89,21 @@
             /* @if ( !VARS.WithPCSSupport ) */
             _setThemeImpl( target );
             /* @endif */
+        },
+
+
+        /* @if ( VARS.WithFeatureSupport ) */
+        toggleFeature: function ( id, value ) {
+            htmlNode.classList[ value ? 'add' : 'remove' ]( 'theme-feature-' + id );
         }
-    };
+        /* @endif */
+    } );
 
 
-    MwSkinTheme.set( localStorage.getItem( themeKey ) || RLCONF.wgCurrentTheme || VARS.Default );
+    MwSkinTheme.set( localStorage.getItem( MwSkinTheme.LOCAL_THEME_PREFERENCE_KEY ) || RLCONF.wgCurrentTheme || VARS.Default );
+    /* @if ( VARS.WithFeatureSupport ) */
+    JSON.parse( localStorage.getItem( MwSkinTheme.LOCAL_FEATURE_PREFERENCE_KEY ) || '[]' ).forEach( function ( id ) {
+        MwSkinTheme.toggleFeature( id, true );
+    } );
+    /* @endif */
 }() );
diff --git a/modules/shared.js b/modules/shared.js
@@ -4,13 +4,16 @@
  * @property {boolean} supportsAuto
  * @property {string[]} themes
  * @property {string} defaultTheme
+ * @property {string[]} features
  */
 
 /** @type {SwitcherConfig} */
 module.exports.CONFIG = require( './config.json' );
 /** @type {string} */
 module.exports.LOCAL_PREF_NAME = 'skin-theme';
 /** @type {string} */
+module.exports.LOCAL_FEATURES_PREF_NAME = 'skin-theme-features';
+/** @type {string} */
 module.exports.REMOTE_PREF_NAME = 'skinTheme-' + ( module.exports.CONFIG.preferenceGroup || mw.config.get( 'wgWikiID' ) );
 
 
@@ -65,6 +68,23 @@ module.exports.setUserPreference = function ( value ) {
 };
 
 
+module.exports.toggleFeature = function ( id ) {
+    if ( module.exports.CONFIG.features.indexOf( id ) < 0 ) {
+        return;
+    }
+
+    var features = JSON.parse( localStorage.getItem( module.exports.LOCAL_FEATURES_PREF_NAME ) || '[]' ),
+        arrayIndex = features.indexOf( id );
+    if ( arrayIndex < 0 ) {
+        features.push( id );
+    } else {
+        delete features[ arrayIndex ];
+    }
+    localStorage.setItem( module.exports.LOCAL_FEATURES_PREF_NAME, features );
+    MwSkinTheme.toggleFeature( id, arrayIndex < 0 );
+};
+
+
 module.exports.whenCoreLoaded = function ( callback, context ) {
     if ( 'MwSkinTheme' in window ) {
         callback.apply( context );