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);
  }

  function makeBtn(id, onClick, extraCss) {
    return $('<img>')
      .addClass('noprint')
      .attr({ id: id, src: icon, draggable: 'false' })
      .css({
        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',
        ...extraCss
      })
      .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();
});