MediaWiki:Gadget-ScrollUpButton.js

/**
 * Copyright (c) 2021-present, 安忆.
 *
 * @author 安忆 [[zh:U:安忆]]
 * @file scrollUpButton.js
 * @license GPL v3
 */
$(function scrollUpButton() {
  var $window = $(window);
  var icon = mw.config.get('wgServer') + '/w/images/5/59/Font_Awesome_5_regular_arrow-circle-up_blue.svg';
  var visible = false;

  function scrollTo(h) {
    $('html, body').stop(true, true).animate({ scrollTop: h }, 500);
  }

  var baseCss = {
    display: 'none',
    position: 'fixed',
    right: '18px',
    cursor: 'pointer',
    opacity: '0.7',
    width: '40px',
    zIndex: 9999,
    '-moz-user-select': 'none',
    '-webkit-user-select': 'none',
    'user-select': 'none',
    transition: 'opacity 0.2s'
  };

  function makeBtn(id, onClick, extraCss) {
    var css = $.extend({}, baseCss, extraCss);
    return $('<img>')
      .addClass('noprint')
      .attr({ id: id, src: icon, draggable: 'false' })
      .css(css)
      .on('mouseenter', function () { this.style.opacity = '1'; })
      .on('mouseleave', function () { this.style.opacity = '0.7'; })
      .on('click', onClick)
      .appendTo(document.body);
  }

  var $up = makeBtn('scrollUpBtn', function () { scrollTo(0); }, { bottom: '85px' });
  var $down = makeBtn('scrollDownBtn', function () {
    scrollTo(($(document).height() || 0) - ($window.height() || 0));
  }, { bottom: '45px', transform: 'rotate(180deg)' });

  var $elements = $up.add($down);

  function setLeft(px) {
    $elements.css('left', px ? px + 'px' : 'unset');
  }

  function setRight(px) {
    $elements.css('right', px ? px + 'px' : 'unset');
  }

  var isVector2022 = mw.config.get('skin') === 'vector-2022';
  var mql = window.matchMedia('(min-width: 1400px)');

  function onWidthChange(e) {
    if (isVector2022) {
      setRight(e.matches ? 8 : 18);
    }
  }

  if (isVector2022) {
    try { mql.addEventListener('change', onWidthChange); }
    catch (_) { mql.addListener(onWidthChange); }
    onWidthChange(mql);
  }

  function onScroll() {
    var y = $window.scrollTop() || 0;
    if (y > 200 && !visible) {
      visible = true;
      $elements.fadeIn(300);
    } else if (y <= 200 && visible) {
      visible = false;
      $elements.fadeOut(300);
    }
    if (
      (mw.config.get('wgGEHelpPanelEnabled') && $('#mw-ge-help-panel-cta-button').length) ||
      $('#cat_a_lot').length || $('#proveit').length || $('.wordcount').length
    ) {
      setLeft(10);
    } else {
      setLeft();
    }
  }

  var ticking = false;
  $window.on('scroll', function () {
    if (!ticking) {
      requestAnimationFrame(function () { onScroll(); ticking = false; });
      ticking = true;
    }
  });
  onScroll();
});