Wizchan Features.slex.js

    // ==UserScript==
    // @name Wizchan Features
    // @namespace http://wizchan.org
    // @description [Go to bottom], floating up-down arrows, mobile post hover fix, user CSS.
    // @include http://wizchan.org/*
    // @include https://wizchan.org/*
    // @author Anonymage
    // @version 1.3.0
    // ==/UserScript==

    (function () {
    'use strict';

    function BannerDown() {
      var bannerElem = document.querySelector('.banner');

      if (!bannerElem) {
        return;
      }

      var elem = document.createElement('a');
      elem.className = 'unimportant banner__down';
      elem.href = '#';
      elem.innerHTML = '[Go to bottom]';
      elem.addEventListener('click', BannerDown.handleClick);

      bannerElem.appendChild(document.createTextNode(' '));
      bannerElem.appendChild(elem);
    }

    BannerDown.handleClick = function (ev) {
      ev.preventDefault();
      window.scrollTo(0, document.documentElement.offsetHeight - window.innerHeight);
    };

    function DocNav() {
      var elem = document.createElement('div');
      elem.className = 'doc-nav';
      document.body.appendChild(elem);

      var upElem = document.createElement('button');
      upElem.className = 'doc-nav__btn doc-nav__btn--up';
      upElem.addEventListener('click', DocNav.handleUpClick);
      upElem.innerHTML = '↑';
      elem.appendChild(upElem);

      var brElem = document.createElement('br');
      elem.appendChild(brElem);

      var downElem = document.createElement('button');
      downElem.className = 'doc-nav__btn doc-nav__btn--down';
      downElem.addEventListener('click', DocNav.handleDownClick);
      downElem.innerHTML = '↓';
      elem.appendChild(downElem);
    }

    DocNav.handleUpClick = function () {
      window.scrollTo(0, 0);
    };

    DocNav.handleDownClick = function () {
      window.scrollTo(0, document.documentElement.offsetHeight - window.innerHeight);
    };

    function PreviewAnchor(elem) {
      elem.removeAttribute('onclick');
      elem.addEventListener('click', PreviewAnchor.handleClick);
      elem.addEventListener('mouseenter', PreviewAnchor.handleMouseEnter);
      elem.addEventListener('mouseleave', PreviewAnchor.handleMouseLeave);
    };

    PreviewAnchor.activate = function () {
      PreviewAnchor.doContext(document);

      var i = 0;
      var interval = setInterval(function () {
        if (i > 10 || window.$) {
          clearInterval(interval);
        }

        if (window.$) {
          $(document).on('new_post', PreviewAnchor.handleNewPost);
        }
      }, 1000);
    };

    PreviewAnchor.doContext = function (contextElem) {
      var elems = contextElem.querySelectorAll('div.body a:not([rel="nofollow"])');

      for (var i = 0, len = elems.length; i < len; i++) {
        new PreviewAnchor(elems[i]);
      }
    };

    PreviewAnchor.handleClick = function (ev) {
      if (ev.target.classList.contains('preview-anchor--noclick')) {
        ev.preventDefault();
        ev.target.classList.remove('preview-anchor--noclick');
      }
    };

    PreviewAnchor.handleNewPost = function (ev, postElem) {
      PreviewAnchor.doContext(postElem);
    };

    PreviewAnchor.handleMouseEnter = function (ev) {
      ev.target.classList.add('preview-anchor--noclick');
    };

    PreviewAnchor.handleMouseLeave = function (ev) {
      ev.target.classList.remove('preview-anchor--noclick');
    };

    function UserCss() {
      this.handleChange = this.handleChange.bind(this);
      this.handleResetClick = this.handleResetClick.bind(this);
      this.handleToggleClick = this.handleToggleClick.bind(this);
      this.setValue = this.setValue.bind(this);

      var refs = this.refs = {
        elem: null,
        inputElem: null,
        modalElem: null,
        toggleElem: null,
      };

      var value = localStorage.getItem(':userCssValue') || UserCss.FALLBACK;

      var modalElem = refs.modalElem = document.createElement('div');
      modalElem.className = 'user-css user-css--hidden';
      document.body.appendChild(modalElem);

      var inputElem = refs.inputElem = document.createElement('textarea');
      inputElem.className = 'user-css__input';
      inputElem.value = value;
      inputElem.addEventListener('input', this.handleChange);
      modalElem.appendChild(inputElem);

      var resetElem = document.createElement('button');
      resetElem.className = 'user-css__reset';
      resetElem.innerHTML = 'Reset';
      resetElem.addEventListener('click', this.handleResetClick);
      modalElem.appendChild(resetElem);

      var toggleElem = refs.toggleElem = document.createElement('button');
      toggleElem.className = 'user-css__toggle';
      toggleElem.innerHTML = 'User CSS';
      toggleElem.addEventListener('click', this.handleToggleClick);
      document.body.appendChild(toggleElem);

      var elem = refs.elem = document.createElement('style');
      elem.innerHTML = value;
      document.body.appendChild(elem);
    }

    UserCss.prototype.handleChange = function (ev) {
      this.setValue(ev.target.value);
    };

    UserCss.prototype.handleResetClick = function () {
      if (window.confirm('Reset user CSS?')) {
        this.setValue(UserCss.FALLBACK);
      }
    };

    UserCss.prototype.handleToggleClick = function (ev) {
      ev.preventDefault();

      var refs = this.refs;
      var modalElem = refs.modalElem;
      var toggleElem = refs.toggleElem;

      if (modalElem.classList.contains('user-css--hidden')) {
        modalElem.classList.remove('user-css--hidden');
        toggleElem.classList.add('user-css__toggle--fixed');
        toggleElem.innerHTML = 'Close';
      } else {
        modalElem.classList.add('user-css--hidden');
        toggleElem.classList.remove('user-css__toggle--fixed');
        toggleElem.innerHTML = 'User CSS';
      }
    };

    UserCss.prototype.setValue = function (value) {
      localStorage.setItem(':userCssValue', value);
      this.refs.inputElem.value = value;
      this.refs.elem.innerHTML = value;
    };

    UserCss.FALLBACK = [
      '.doc-nav { margin-top: -2.5em; position: fixed; right: 8px; top: 50%; }',
      '.doc-nav__btn { font-size: inherit; height: 2.5em; }',
      '.user-css--hidden { display: none; }',
      '.user-css__input { height: 100%; left: 0; margin: 0; max-width: 100%; position: fixed; top: 0; width: 100%; }',
      '.user-css__reset { bottom: 0; position: fixed; right: 0; }',
      '.user-css__toggle { clear: right; float: right; margin-bottom: 10px; }',
      '.user-css__toggle--fixed { position: fixed; right: 0; top: 0; }',
    ].join('\n');

    if (localStorage.getItem(':bannerDown') !== 'false') {
      new BannerDown();
    }

    if (localStorage.getItem(':docNav') !== 'false') {
      new DocNav();
    }

    if (localStorage.getItem(':previewAnchor') !== 'false') {
      PreviewAnchor.activate();
    }

    if (localStorage.getItem(':userCss') !== 'false') {
      new UserCss();
    }
    })();