メール欄があるレスだけ表示

某画像掲示板でメール欄があるレスだけ表示するボタンを追加します
目前為 2018-09-20 提交的版本，檢視最新版本。
安裝腳本 ?
換行
// ==UserScript==
// @name     メール欄があるレスだけ表示
// @version  2.14
// @grant    none
// @include  https://*.2chan.net/*/res/*
// @description 某画像掲示板でメール欄があるレスだけ表示するボタンを追加します
// @namespace https://gf.qytechs.cn/users/114367
// ==/UserScript==

// ----------------------------------------
// 設定
var CONFIG = {
  showListOnPageLoaded: true,
  showListEvenWithoutMails: false,
  ignoreRegex: /^sage$/
};


// ----------------------------------------
// CSS
// [✉]ボタン
document.styleSheets[0].insertRule(`
  .mail-list-btn {
    cursor: pointer;
  }
`);
document.styleSheets[0].insertRule(`
  .mail-list-btn-on {
    color: #00e;
  }
`);
// リストの表示位置とか
document.styleSheets[0].insertRule(`
  .res-list-container {
    bottom: 20px;
    display: block;
    font-size: 12px;
    position: fixed;
    right: 5px;
    transition: .2s;
    width: 300px;
    z-index: 99;
  }
`);
// 件数表示
document.styleSheets[0].insertRule(`
  .res-count-label {
    cursor: pointer;
    display: block;
  }
`);
// レス全体
document.styleSheets[0].insertRule(`
  @keyframes res-fadein {
		0% { opacity: 0; }
		100% { opacity: 1; }
  }
`)
document.styleSheets[0].insertRule(`
  .res-container {
		animation: res-fadein .2s;
    background: #ccc9;
    border-radius: 5px;
    color: #800;
    margin: 5px;
    padding: 5px;
    position: relative;
  }
`);
document.styleSheets[0].insertRule(`
  .res-titlebar {
    cursor: pointer;
  }
`);
// メールアドレス
document.styleSheets[0].insertRule(`
  .res-mail {
    color: #00f;
    cursor: pointer;
  }
`);
document.styleSheets[0].insertRule(`
  .res-mail:hover {
    text-decoration: underline;
  }
`);
// レス本文
document.styleSheets[0].insertRule(`
  .res-text-list {
    max-height: 300px;
		overflow: auto;
  }
`);
document.styleSheets[0].insertRule(`
  .res-text {
		animation: res-fadein .5s;
    border-top: 1px dotted #0005;
    font-size: 90%;
    margin: 0;
    padding: 5px;
    width: auto;
  }
`);
// レス最小化
document.styleSheets[0].insertRule(`
  .res-min {
    max-height: 16px;
    overflow: hidden;
  }
`)
document.styleSheets[0].insertRule(`
  .res-min>.res-text-list {
		display: none;
  }
`)
document.styleSheets[0].insertRule(`
  .res-min-has-new {
    background: #bbea !important;
  }
`)
// リストOFF時
document.styleSheets[0].insertRule(`
  .res-list-transparent {
    opacity: 0;
    pointer-events: none;
  }
`)

// ----------------------------------------
// Utils
var newElement = (tag, clazz, text) => {
  var e = document.createElement(tag);
  e.className = clazz;
  if (text) {
    e.textContent = text;
  }
  return e;
};


// ----------------------------------------
// Properties
var mails = [];
var resList = {};

// ----------------------------------------
// Add elements
var resListContainer = newElement('DIV', 'res-list-container res-list-transparent', '');
document.body.insertBefore(resListContainer, null);
resListContainer.addEventListener('click', e => {
  if (e.target.parentNode.classList.contains('res-min')) {
    e.target.parentNode.classList.remove('res-min', 'res-min-has-new');
    return;
  }
  if (e.target.classList.contains('res-titlebar')) {
    e.target.parentNode.classList.add('res-min');
    return;
  }
  if (e.target.classList.contains('res-mail')) {
    resList[e.target.textContent].mailElement.scrollIntoView({ behavior: 'smooth'});
    return;
  }
});

var resListCountLabel = newElement('DIV', 'res-container res-count-label', '');
var refreshResListCountLabel = () => { resListCountLabel.textContent = '✉ x ' + mails.length; };
refreshResListCountLabel();
resListContainer.insertBefore(resListCountLabel, null);
resListCountLabel.addEventListener('click', e => {
  var b = false;
  var resElements = document.getElementsByClassName('res-container');
  for (var res of resElements) {
    if (!res.classList.contains('res-min') && !res.classList.contains('res-count-label')) {
      res.classList.add('res-min');
      b = true;
    }
  }
  if (b) return;
  for (var res of resElements) {
    res.classList.remove('res-min');
  }
});

var mailButton = newElement('SPAN', 'mail-list-btn', '[✉]');

// ----------------------------------------
// Main
var refleshList = isForceShowList => {
  var rtds = document.getElementsByClassName('rtd');
  var newRtds = [];
  for (var i = rtds.length - 1, newRtd; newRtd = rtds[i]; i --) {
    if (newRtd.getAttribute('data-mail-searched')) break;
    newRtd.setAttribute('data-mail-searched', '1');
    newRtds.unshift(newRtd);
  }
  newRtds.forEach(rtd => {
    var mailElement =
        rtd.querySelector('[href^="mailto:"]') || // default
        rtd.getElementsByClassName('KOSHIAN_meran')[0] || // kosian
        rtd.querySelector('[color="#005ce6"]'); // futakuro
    if (!mailElement) return;
    var mail = mailElement.href ? decodeURI(mailElement.href).replace('mailto:', '') : mailElement.textContent.replace(/^\[|\]$/g, '');
    if (mail.match(CONFIG.ignoreRegex)) return;
    var res = resList[mail];
    if (!res) {
      mails.push(mail);
      refreshResListCountLabel();
      res = { resContainer: newElement('DIV', 'res-container', ''), textList: newElement('DIV', 'res-text-list') };
      resList[mail] = res;
      var titlebar = newElement('DIV', 'res-titlebar', ' ');
      titlebar.appendChild(newElement('SPAN', 'res-mail', mail));
      res.resContainer.appendChild(titlebar);
      res.resContainer.appendChild(res.textList);
      resListContainer.insertBefore(res.resContainer, resListCountLabel);
    }
    res.mailElement = mailElement;
    // BLOCKQUOTEタグを変なところにコピーすると一部のアドオンの動作がおかしくなるので本文はDIVにコピーする
    var text = newElement('DIV', 'res-text', '');
    var n = rtd.getElementsByTagName('BLOCKQUOTE')[0].firstChild;
    while (n) {
      text.appendChild(n.cloneNode(true));
      n = n.nextSibling;
    }
    res.textList.appendChild(text);
    res.textList.scrollTo(0, res.textList.scrollHeight);
    if (res.resContainer.classList.contains('res-min')) {
      res.resContainer.classList.add('res-min-has-new');
    }
  });
  if (CONFIG.showListEvenWithoutMails || mails.length) {
    resListContainer.classList.remove('res-list-transparent');
  }
};

// ----------------------------------------
// DOMの監視
var timer;
var observer = new MutationObserver(rec => {
  clearTimeout(timer);
  timer = setTimeout(refleshList, 1000);
});

// ----------------------------------------
// List ON OFF
var listOn = () => {
  refleshList();
  mailButton.classList.add('mail-list-btn-on');
  observer.observe(document.body, { childList: true, subtree: true });
};

var listOff = () => {
  observer.disconnect();
  resListContainer.classList.add('res-list-transparent');
  mailButton.classList.remove('mail-list-btn-on');
};

var toggle = e => {
  if (resListContainer.classList.contains('res-list-transparent')) {
    CONFIG.showListEvenWithoutMails = true;
    listOn();
  } else {
    listOff();
  }
};

var addMailButton = () => {
  mailButton.addEventListener('click', toggle);
  var futakuroBorderArea = document.getElementById('border_area');
  if (futakuroBorderArea) {
    futakuroBorderArea.insertBefore(mailButton, null);
  } else {
    document.getElementById('contres').insertBefore(mailButton, document.getElementById('contdisp').nextSibling);
  }
};

// ----------------------------------------
// Start HERE !
setTimeout(() => {
  addMailButton();
  if (CONFIG.showListOnPageLoaded) {
    listOn();
  }
}, 500); // wait for futakuro
欢迎访问Greasy Fork镜像
