Moe-Counter/assets/script.js

(function () {
  const btn = document.getElementById('get');
  const img = document.getElementById('result');
  const code = document.getElementById('code');

  btn.addEventListener('click', throttle(() => {
    const $name = document.getElementById('name'),
      $theme = document.getElementById('theme'),
      $padding = document.getElementById('padding'),
      $offset = document.getElementById('offset'),
      $scale = document.getElementById('scale'),
      $pixelated = document.getElementById('pixelated'),
      $darkmode = document.getElementById('darkmode')

    const name = $name.value.trim();
    if (!name) {
      alert('Please input counter name.');
      return;
    }

    party.confetti(btn, { count: party.variation.range(20, 40) });

    const params = {
      name,
      theme: $theme.value || 'moebooru',
      padding: $padding.value || '7',
      offset: $offset.value || '0',
      scale: $scale.value || '1',
      pixelated: $pixelated.checked ? '1' : '0',
      darkmode: $darkmode.value || 'auto',
    }

    const query = new URLSearchParams(params).toString();
    img.src = `${__global_data.site}/@${name}?${query}`;
    code.textContent = img.src;
    code.style.visibility = 'visible';

    img.onload = () => img.scrollIntoView({ block: 'start', behavior: 'smooth' });
  }, 500));

  code.addEventListener('click', (e) => {
    e.preventDefault()
    e.stopPropagation()

    const target = e.target;
    if (document.body.createTextRange) {
      const range = document.body.createTextRange();
      range.moveToElementText(target);
      range.select();
    } else if (window.getSelection) {
      const selection = window.getSelection();
      const range = document.createRange();
      range.selectNodeContents(target);
      selection.removeAllRanges();
      selection.addRange(range);
    }
  })

  const mainTitle = document.querySelector('#main_title i');
  const themes = document.querySelector('#themes');
  const moreTheme = document.querySelector('#more_theme');

  mainTitle.addEventListener('click', throttle(() => {
    party.sparkles(document.documentElement, { count: party.variation.range(40, 100) });
  }, 1000));

  moreTheme.addEventListener('click', () => {
    if (!themes.hasAttribute('open')) {
      party.sparkles(moreTheme.querySelector('h3'), { count: party.variation.range(20, 40) });
      themes.scrollIntoView({ block: 'start', behavior: 'smooth' });
    }
  });

  function throttle(fn, threshold = 250) {
    let last;
    let deferTimer;
    return function (...args) {
      const context = this;
      const now = Date.now();
      if (last && now < last + threshold) {
        clearTimeout(deferTimer);
        deferTimer = setTimeout(() => {
          last = now;
          fn.apply(context, args);
        }, threshold);
      } else {
        last = now;
        fn.apply(context, args);
      }
    };
  }
})();


(() => {
  let isShow = false;
  let lock = false;
  const btn = document.querySelector('.back-to-top');

  const handleScroll = () => {
    if (lock) return;

    if (document.body.scrollTop >= 1000) {
      if (!isShow) {
        btn.classList.add('load');
        isShow = true;
      }
    } else {
      if (isShow) {
        btn.classList.remove('load');
        isShow = false;
      }
    }
  };

  const handleClick = () => {
    lock = true;
    btn.classList.add('ani-leave');
    window.scrollTo({ top: 0, behavior: 'smooth' });

    setTimeout(() => {
      btn.classList.remove('ani-leave');
      btn.classList.add('leaved');
    }, 390);

    setTimeout(() => btn.classList.add('ending'), 120);
    setTimeout(() => btn.classList.remove('load'), 1500);

    setTimeout(() => {
      lock = false;
      isShow = false;
      btn.classList.remove('leaved', 'ending');
    }, 2000);
  };

  window.addEventListener('scroll', handleScroll);
  btn.addEventListener('click', handleClick);
})();