Created
December 18, 2018 17:51
-
-
Save jocastaneda/07e1a1dcdf013d57a50575b681eba7d4 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ==UserScript== | |
// @name worg-support-preview | |
// @namespace http://tampermonkey.net/ | |
// @version 0.1.0 | |
// @description Random functionality for support forums. | |
// @author Jose Castaneda | |
// @include https://*.wordpress.org/support/topic/* | |
// @include https://wordpress.org/support/topic/* | |
// @grant none | |
// ==/UserScript== | |
(function() { | |
let styles = ` | |
#bbp_reply_preview { | |
font-family: "Open Sans", sans-serif; | |
margin: 1rem 0 2rem; | |
font-size: 14px; | |
} | |
#bbp_reply_preview p { | |
margin: 1em 0!important; | |
} | |
`; | |
// Create our local variables. | |
const style = document.createElement('style'); style.innerText = styles; | |
const preview = document.createElement('div'); | |
const previewButton = document.createElement('input'); | |
const quickbar = document.getElementById('qt_bbp_reply_content_toolbar'); | |
const replyContent = document.getElementById('bbp_reply_content'); | |
// append the style to the head of the document. | |
document.head.appendChild(style); | |
preview.id = 'bbp_reply_preview'; | |
preview.style.display = 'none'; | |
preview.style.height = window.getComputedStyle(replyContent).getPropertyValue('height'); | |
preview.classList.add('bbp-topic-content'); | |
// append the reply preview. | |
document.getElementById('wp-bbp_reply_content-wrap').appendChild(preview); | |
previewButton.type = 'button'; | |
previewButton.id = 'preview-reply'; | |
previewButton.className = 'ed_button button button-small'; | |
previewButton.innerText = 'Preview Reply'; | |
previewButton.value = 'preview'; | |
previewButton.onclick = function() { | |
replyContent.style.display = replyContent.style.display === 'none' ? '' : 'none'; | |
preview.style.height = window.getComputedStyle(replyContent).getPropertyValue('height') === 'auto' ? '230px': replyContent.style.height; | |
preview.style.display = preview.style.display === 'none' ? '' : 'none'; | |
}; | |
// append the button to the quickbar. | |
quickbar.appendChild(previewButton); | |
// create a "live-preview" | |
replyContent.onkeyup = replyContent.onkeypress = function(){ | |
let backticks = 0; | |
let text = this.value.replace(/`/g, function(match,p1) { | |
backticks++ | |
if (backticks % 2) { | |
return '<code>'; | |
} else { | |
return '</code>'; | |
} | |
}); | |
let splitText = text.split(/\n\s+/); | |
let output = `<p>${splitText.join('</p><p>')}</p>`; | |
// we updates the text. | |
preview.innerHTML = output; | |
} | |
})(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment