MediaWiki:Gadget-darkmode.js: Skirtumas tarp puslapio versijų

Iš MCSlime.LT.
Pereiti į navigaciją Jump to search
SNėra keitimo santraukos
Nėra keitimo santraukos
Žyma: Atmesta
1 eilutė: 1 eilutė:
(function() {
(function($, mw) {
   var isDark = document.cookie.includes('theme=dark');
   const DARK_COOKIE = 'darkmode';
   if (isDark) {
  const THEME_COOKIE = 'theme';
    document.documentElement.classList.add('wgl-theme-dark', 'wgl-darkmode');
  const TOGGLE_ID = 'pt-darkmode-toggle';
   } else {
 
     document.documentElement.classList.add('wgl-theme-light', 'wgl-lightmode');
  const isMobile = mw.config.get('wgMFMode') !== null;
  const portletId = isMobile ? 'p-navigation' : 'p-personal';
 
  // Determine initial theme preference
  const themeCookie = $.cookie(THEME_COOKIE);
   const darkCookie = $.cookie(DARK_COOKIE);
  let isDark = themeCookie === 'dark' || (!themeCookie && darkCookie === 'true');
 
  // Apply theme classes to <html> element immediately
  document.documentElement.classList.add(isDark ? 'wgl-theme-dark' : 'wgl-theme-light');
 
  // Define icon representations
  const icons = {
    dark: '🌙',
    light: '☀️'
   };
 
  // Function to apply theme classes to <body>
  function applyTheme(isDarkMode) {
     $('body')
      .toggleClass('wgl-theme-dark wgl-darkmode', isDarkMode)
      .toggleClass('wgl-theme-light wgl-lightmode', !isDarkMode)
      .css({ visibility: 'visible', opacity: 1 });
 
    mw.hook('wgl.themeChanged').fire(isDarkMode ? 'dark' : 'light');
   }
   }
})();


(function($, mw) {
  // Function to update the toggle icon
  var DARK_COOKIE = 'darkmode',
  function updateToggleIcon(isDarkMode) {
      THEME_COOKIE = 'theme',
    const icon = isDarkMode ? icons.dark : icons.light;
      isUsingDarkmode = $.cookie(THEME_COOKIE) === 'dark' || ($.cookie(THEME_COOKIE) == null && $.cookie(DARK_COOKIE) === 'true'),
    $(`#${TOGGLE_ID} a`).text(icon);
      isMobile = mw.config.get('wgMFMode') !== null,
  }
      portletLink;


   var self = {
   // Initialize the toggle functionality
    init: function() {
  function initToggle() {
      // Apply the current theme on page load
    // Create the toggle link
       self.applyTheme(isUsingDarkmode);
    const toggleLink = mw.util.addPortletLink(
      portletId,
      '#',
       isDark ? icons.dark : icons.light,
      TOGGLE_ID,
      'Toggle dark mode',
      null,
      $('#pt-userpage, #pt-anonuserpage, #pt-createaccount')[0]
    );


      // Create the dark mode toggle link
    // Add a class for cursor styling
      portletLink = mw.util.addPortletLink(
    $(toggleLink).addClass('darkmode-toggle');
        (isMobile ? 'p-navigation' : 'p-personal'),
        '#', // Use '#' to prevent redirection
        (isMobile ? 'Toggle dark mode' : '🌓 '),
        'pt-dm-toggle',
        'Toggle dark mode',
        null,
        $('#pt-userpage, #pt-anonuserpage, #pt-createaccount')[0]
      );


      // Toggle theme on link click
    // Apply the initial theme
      $(portletLink).click(function(e) {
    applyTheme(isDark);
        e.preventDefault();


        isUsingDarkmode = !isUsingDarkmode;
    // Handle toggle click event
        $.cookie(THEME_COOKIE, isUsingDarkmode ? 'dark' : 'light', {expires: 365, path: '/'});
    $(toggleLink).on('click', function(e) {
        $.cookie(DARK_COOKIE, isUsingDarkmode, {expires: 365, path: '/'});
      e.preventDefault();
      isDark = !isDark;


        self.applyTheme(isUsingDarkmode);
      // Update cookies
      $.cookie(THEME_COOKIE, isDark ? 'dark' : 'light', { expires: 365, path: '/' });
      $.cookie(DARK_COOKIE, isDark, { expires: 365, path: '/' });


        // Optional: update link text
      // Apply the new theme and update icon
        $(portletLink).text(isUsingDarkmode ? '🌙 ' : '☀️');
       applyTheme(isDark);
       });
       updateToggleIcon(isDark);
    },
    });
 
   }
    applyTheme: function(isDark) {
       if (isDark) {
        $('body')
          .addClass('wgl-theme-dark wgl-darkmode')
          .removeClass('wgl-theme-light wgl-lightmode');
        mw.hook('wgl.themeChanged').fire('dark');
      } else {
        $('body')
          .addClass('wgl-theme-light wgl-lightmode')
          .removeClass('wgl-theme-dark wgl-darkmode');
        mw.hook('wgl.themeChanged').fire('light');
      }
      // Make the body visible after applying the theme
      $('body').css({visibility: 'visible', opacity: 1});
    }
   };


   // Ensure mediawiki.util is loaded before init
   // Ensure necessary modules are loaded before initializing
   mw.loader.using(['mediawiki.util'], function () {
   mw.loader.using(['mediawiki.util'], function () {
     $(self.init);
     $(initToggle);
   });
   });


})(jQuery, mediaWiki);
})(jQuery, mediaWiki);

09:30, 14 balandžio 2025 versija

(function($, mw) {
  const DARK_COOKIE = 'darkmode';
  const THEME_COOKIE = 'theme';
  const TOGGLE_ID = 'pt-darkmode-toggle';

  const isMobile = mw.config.get('wgMFMode') !== null;
  const portletId = isMobile ? 'p-navigation' : 'p-personal';

  // Determine initial theme preference
  const themeCookie = $.cookie(THEME_COOKIE);
  const darkCookie = $.cookie(DARK_COOKIE);
  let isDark = themeCookie === 'dark' || (!themeCookie && darkCookie === 'true');

  // Apply theme classes to <html> element immediately
  document.documentElement.classList.add(isDark ? 'wgl-theme-dark' : 'wgl-theme-light');

  // Define icon representations
  const icons = {
    dark: '🌙',
    light: '☀️'
  };

  // Function to apply theme classes to <body>
  function applyTheme(isDarkMode) {
    $('body')
      .toggleClass('wgl-theme-dark wgl-darkmode', isDarkMode)
      .toggleClass('wgl-theme-light wgl-lightmode', !isDarkMode)
      .css({ visibility: 'visible', opacity: 1 });

    mw.hook('wgl.themeChanged').fire(isDarkMode ? 'dark' : 'light');
  }

  // Function to update the toggle icon
  function updateToggleIcon(isDarkMode) {
    const icon = isDarkMode ? icons.dark : icons.light;
    $(`#${TOGGLE_ID} a`).text(icon);
  }

  // Initialize the toggle functionality
  function initToggle() {
    // Create the toggle link
    const toggleLink = mw.util.addPortletLink(
      portletId,
      '#',
      isDark ? icons.dark : icons.light,
      TOGGLE_ID,
      'Toggle dark mode',
      null,
      $('#pt-userpage, #pt-anonuserpage, #pt-createaccount')[0]
    );

    // Add a class for cursor styling
    $(toggleLink).addClass('darkmode-toggle');

    // Apply the initial theme
    applyTheme(isDark);

    // Handle toggle click event
    $(toggleLink).on('click', function(e) {
      e.preventDefault();
      isDark = !isDark;

      // Update cookies
      $.cookie(THEME_COOKIE, isDark ? 'dark' : 'light', { expires: 365, path: '/' });
      $.cookie(DARK_COOKIE, isDark, { expires: 365, path: '/' });

      // Apply the new theme and update icon
      applyTheme(isDark);
      updateToggleIcon(isDark);
    });
  }

  // Ensure necessary modules are loaded before initializing
  mw.loader.using(['mediawiki.util'], function () {
    $(initToggle);
  });

})(jQuery, mediaWiki);
Gauta iš „https://wiki.mcslime.lt/index.php?title=MediaWiki:Gadget-darkmode.js&oldid=1028“