MediaWiki:Gadget-scrollUpButton.js

The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/**
 * Copyright (c) 2021-present, 安忆.
 *
 * @author 安忆 [[zh:U:安忆]]
 * @file scrollUpButton.js
 * @license GPL v3
 */
$(function scrollUpButton() {
  var $window = $(window);
  var scrollButtonIcon = '/media/wikipedia/commons/5/59/Font_Awesome_5_regular_arrow-circle-up_blue.svg';
  if (!document.implementation.hasFeature('http://www.w3.org/TR/SVG11/feature#Image', '1.1')) {
    scrollButtonIcon = '/media/wikipedia/commons/thumb/5/59/Font_Awesome_5_regular_arrow-circle-up_blue.svg/32px-Font_Awesome_5_regular_arrow-circle-up_blue.svg.png';
  }
  var changeOpacity = function changeOpacity(event) {
    event.currentTarget.style.opacity = event.type === 'mouseenter' ? '1' : '0.7';
  };
  var scrollTop = function scrollTop(height) {
    $('html, body').animate({
      scrollTop: height
    }, 660);
  };
  var $scrollButton = $('<img>').addClass('noprint').attr({
    draggable: 'false',
    src: scrollButtonIcon
  }).css({
    display: 'none',
    position: 'fixed',
    right: '18px',
    cursor: 'pointer',
    opacity: '0.7',
    '-moz-user-select': 'none',
    '-webkit-user-select': 'none',
    'user-select': 'none'
  });
  var $scrollDownButton = $scrollButton.clone().attr('id', 'scrollDownButton-zhwiki').css('transform', 'rotate(180deg)').on('click', function () {
    scrollTop(($(document).height() || 0) - ($window.height() || 0));
  });
  var $scrollUpButton = $scrollButton.clone().attr('id', 'scrollUpButton-zhwiki').on('click', function () {
    scrollTop(0);
  });
  var $elements = [$scrollDownButton, $scrollUpButton];
  $elements.forEach(function ($element) {
    $element.on('mouseenter mouseleave', changeOpacity).appendTo(document.body);
  });
  var fadeIn = function fadeIn() {
    $elements.forEach(function ($element) {
      $element.fadeIn('slow');
    });
  };
  var fadeOut = function fadeOut() {
    $elements.forEach(function ($element) {
      $element.fadeOut('slow');
    });
  };
  var left = function left(px) {
    $elements.forEach(function ($element) {
      $element.css('left', px ? px + 'px' : 'unset');
    });
  };
  var right = function right(px) {
    $elements.forEach(function ($element) {
      $element.css('right', px ? px + 'px' : 'unset');
    });
  };
  var mediaQueryList = window.matchMedia('(min-width: 1400px)');
  var isVector2022Match = false;
  if (mw.config.get('skin') === 'vector-2022') {
    var mediaQueryHandler = function mediaQueryHandler(event) {
      if (event.matches) {
        isVector2022Match = true;
        right(8);
      } else {
        isVector2022Match = false;
        right(18);
      }
    };
    // Check mediaQueryList as Safari doesn't have support for mediaQueryList.addEventListener
    try {
      mediaQueryList.addEventListener('change', mediaQueryHandler);
    } catch (e) {
      mediaQueryList.addListener(mediaQueryHandler);
    }
    if (mediaQueryList.matches) {
      isVector2022Match = true;
      right(8);
    }
  }
  var scrollButtonTimer;
  $window.on('scroll selectionchange', function () {
    var dingHeight = $('#bluedeck_ding>div').height() || 0;
    var vector2022Height = isVector2022Match ? 24 : 0;
    $scrollDownButton.css('bottom', dingHeight + vector2022Height + 24 + 'px');
    $scrollUpButton.css('bottom', dingHeight + vector2022Height + 65 + 'px');
    if (mw.config.get('wgGEHelpPanelEnabled') && $('#mw-ge-help-panel-cta-button').length || $('#cat_a_lot').length || $('#proveit').length || $('.wordcount').length) {
      left(10);
    } else {
      left();
    }
    var windowScrollTop = $window.scrollTop() || 0;
    if (windowScrollTop > 60) {
      fadeIn();
    } else {
      fadeOut();
    }
    clearTimeout(scrollButtonTimer);
    scrollButtonTimer = setTimeout(fadeOut, 2000);
  });
  $elements.forEach(function ($element) {
    $element.on('mouseenter', function () {
      clearTimeout(scrollButtonTimer);
    });
  });
});