Skip to content

Instantly share code, notes, and snippets.

@jocastaneda
Created December 18, 2018 17:51
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jocastaneda/07e1a1dcdf013d57a50575b681eba7d4 to your computer and use it in GitHub Desktop.
Save jocastaneda/07e1a1dcdf013d57a50575b681eba7d4 to your computer and use it in GitHub Desktop.
// ==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