☰

Mods.de Button Overhaul

Mods.de - prettify new post button

// ==UserScript==
// @name            Mods.de Button Overhaul
// @namespace       phil.red
// @description     Mods.de - prettify new post button
// @description:de  Mods.de - New-Post-Buttons verschönern
// @version         1.3.2
// @include         https://forum.mods.de/bb/newreply.php*
// @include         https://forum.mods.de/bb/editreply.php*
// @include         https://forum.mods.de/bb/newthread.php*
// @include         https://forum.mods.de/bb/thread.php?*
// ==/UserScript==

function addStyle(css) {
  const head = document.getElementsByTagName('head')[0]
  if (!head) return
  const style = document.createElement('style')
  style.setAttribute('type', 'text/css')
  style.textContent = css
  head.appendChild(style)
}

//when used on a text input widget, this inserts bb tags around the selection
//use what you would use in the start tag.
//example:
//given a textarea with the id 'ta' and the selected content <selection>,
//insertRoundCaret(elem, 'url=http://goo.gl') yields [url="http://goo.gl"]<selection>[/url] and
//insertRoundCaret(elem, 'url=http://','Insert URL:') yields [url=<url>]<selection>[/url],
//where <url> is fetched via a popup which is prefilled with 'http://'

function insertRoundCaret(elem, tag, question) {
  const i = tag.indexOf('=')
  const tagName = (i === -1) ? tag : tag.substring(0, i)
  let tagValue = (i === -1) ? '' : tag.substring(i + 1)
  //if there is a question, prompt it, using the value as preset, else use the value if present
  let strStart = `[${tagName}`
  const strEnd = `[/${tagName}]`

  if (tagValue.length > 0 || question) {
    if (question) {
      tagValue = window.prompt(`Bitte ${question}`, tagValue) //Autopoliteness (TM)
    }
    if (tagValue.length > 0) {
      strStart += '="' + tagValue + '"'
    }
  }
  strStart += ']'

  insertCustomCaret(elem, strStart, strEnd)
}

function insertCustomCaret(elem, strStart, strEnd) {
  //if there is a selection, wrap tags around it
  if (elem.selectionStart || elem.selectionStart === 0) {
    const startPos = elem.selectionStart
    const endPos = elem.selectionEnd
    const scrollTop = elem.scrollTop
    elem.value = elem.value.substring(0, startPos) + strStart + elem.value.substring(startPos, endPos) + strEnd + elem.value.substring(endPos)
    elem.focus()
    elem.selectionStart = startPos + strStart.length
    elem.selectionEnd = endPos + strStart.length
    elem.scrollTop = scrollTop
  } else { // if no selection is present, just append tags to the end
    elem.value += strStart + strEnd
    elem.focus()
    elem.selectionStart = elem.selectionEnd = elem.value.length - strEnd.length
  }
}

function insertPerLine(elem, str) {
  if (elem.selectionStart || elem.selectionStart === 0) {
    const startPos = elem.selectionStart
    const endPos = elem.selectionEnd
    const scrollTop = elem.scrollTop
    const lines = elem.value.substring(startPos, endPos).split('\n').map(l => str + l)
    elem.value = elem.value.substring(0, startPos) + lines.join('\n') + elem.value.substring(endPos)
    elem.focus()
    elem.selectionStart = startPos + str.length
    elem.selectionEnd = endPos + (str.length * lines.length)
    elem.scrollTop = scrollTop
  } else {
    elem.value += str
    elem.focus()
    elem.selectionStart = elem.selectionEnd = elem.value.length
  }
}

function smileyWindow() {
    window.open(
    	'misc.php?view=smilies&amp;window=1',
    	'smilieWindow',
    	'width=300, height=400, status=no, toolbar=no, menubar=no, location=no, directories=no, resizeable=no, scrollbars=yes')
}

addStyle(`
#qr_insertcustombuttonshere > img,
.newInsertButton {
	float:     left;
	max-width: 28px;
}

#qr_insertcustombuttonshere > img,
.newInsertButton,
input[type="submit"] {
	border: 1px solid #224;
	background-color: #394e63;
	box-shadow:	0px 1px 3px rgba(255,255,255,.3) inset;
	height: 24px;
	overflow: show;
	text-align: center;
	color:  white;
	margin-right: 3px;
}

#qr_insertcustombuttonshere > img:hover:not(:active),
.newInsertButton:hover:not(:active),
input[type="submit"]:hover:not(:active) {
	border-color: #008fe1;
	box-shadow: 0px 1px 3px rgba(255,255,255,.3) inset,
	            0px 0px 2px #008fe1;
}

#qr_insertcustombuttonshere > img:hover:active,
.newInsertButton:hover:active,
input[type="submit"]:hover:active {
	box-shadow: 0px 1px 3px rgba(0,0,0,.3) inset;
}

.newInsertButton .border {border:1px solid silver; display:inline-block; width:1.2em}
.newInsertButton .spoiler {text-shadow:0px 0px 2px rgba(255,255,255,.5)}
.newInsertButton .brdr,
.newInsertButton .spoiler {min-width:16px; display:inline-block}
.newInsertButton .tex {font-family:serif}
`)

//shamelessly stolen from kambfhase
if (!document.evaluate('//a[contains(@href, "./quickmod")]', document, null, 8, null).singleNodeValue) {
	addStyle('.iAmMod { display:none }')
}

const toolbar = document.querySelector('img[title="Fett"]').parentNode
const ta = document.querySelector('#pstmsg, textarea[name="message"], #thrmsg')
const buttons = [
	['Fett',            '<b>F</b>',                       () => insertRoundCaret(ta, 'b')],
	['Unterstreichen',  '<u>U</u>',                       () => insertRoundCaret(ta, 'u')],
	['Code',            '<code class="border">C</code>',  () => insertRoundCaret(ta, 'code')],
	['Kursiv',          '<i>K</i>',                       () => insertRoundCaret(ta, 'i')],
	['Durchstreichen',	'<s>S</s>',	                      () => insertRoundCaret(ta, 's')],
	['Trigger',         '<span class="trigger">T</span>', () => insertRoundCaret(ta, 'trigger')],
	['Monospace',       '<code>M</code>',                 () => insertRoundCaret(ta, 'm')],
	['TeX',	            '<span class="tex">T</span>',     () => insertRoundCaret(ta, 'tex')],
	['Audio',           '♫',                              () => insertRoundCaret(ta, 'audio')],
	['Video',           '▶',                              () => insertRoundCaret(ta, 'video')],
	['PHP',             '<code class="border">P</code>',  () => insertRoundCaret(ta, 'php')],
	['Bild einfügen',   '⌧',                              () => insertRoundCaret(ta, 'img')],
	['Link',            '<u>url</u>',                     () => insertRoundCaret(ta, 'url=http://', 'URL angeben')],
	['Liste',           '☰',                             () => {
		insertRoundCaret(ta, 'list=1', 'Listentyp angeben: 1, a oder leer')
		insertCustomCaret(ta, '\n', '\n')
		insertPerLine(ta, '[*] ')
	}],
	['Listenelement',   '•',                              () => insertCustomCaret(ta, '[*] ','')],
	['Smiley einfügen', '☺',                              smileyWindow],
	['Quote',           '<span class="border">Q</i>',     () => insertRoundCaret(ta, 'quote')],
	['Spoiler',         '<span class="spoiler">S</i>',    () => insertRoundCaret(ta, 'spoiler')],
	['Mod',             'Mod',                            () => insertRoundCaret(ta, 'mod')],
]

toolbar.innerHTML = ''
for (const [alt, code, cb] of buttons) {
  const button = document.createElement('button')
  button.classList.add('newInsertButton')
  button.setAttribute('type', 'button')
  button.setAttribute('alt', alt)
  button.innerHTML = code
  button.addEventListener('click', cb)
  toolbar.appendChild(button)
}

const modBtn = document.querySelector('button[alt="Mod"]')
if (modBtn) modBtn.classList.add('iAmMod')