adds bbcode formatting buttions to SocialNeko
// ==UserScript==
// @name SN BBCode Buttons
// @description adds bbcode formatting buttions to SocialNeko
// @namespace MasksViolentMonkeyScript
// @version 1.0.1
// @match http://socialneko.org/*
// @match https://socialneko.org/*
// @grant GM_addStyle
// @require https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.js
// ==/UserScript==
//I've never made anything in javascript before I made this
//and i am starting to know why
//please give tips for improvement
//...expecially if you know what you're doing
// create a div on which to append buttons
var buttonPanel = document.createElement("div");
buttonPanel.setAttribute("id", "bpanel");
var placeholder= document.createTextNode(" "); //if no placeholder... it never shows up
buttonPanel.appendChild(placeholder);
//I decided to create subpanels for pretty... easier to space between
var colorPanel = document.createElement("span");
colorPanel.appendChild(placeholder);
var biusttPanel = document.createElement("span");
biusttPanel.appendChild(placeholder);
var spoiurlimgPanel = document.createElement("span");
spoiurlimgPanel.appendChild(placeholder);
var allignPanel = document.createElement("span");
allignPanel.appendChild(placeholder);
//create buttons to add to the buttonPanel
//bold
var boldb = document.createElement("input");
boldb.type = "button";
boldb.setAttribute("style", "font-weight: bold;");
boldb.setAttribute("id", "boldb");
boldb.value = "b";
boldb.onclick=function(){insert("b")};
//italic
var italb = document.createElement("input");
italb.type = "button";
italb.setAttribute("style", "font-style: italic;");
italb.setAttribute("id", "italb");
italb.value = "i";
italb.onclick=function(){insert("i")};
//underline
var underlb = document.createElement("input");
underlb.type = "button";
underlb.setAttribute("style", "text-decoration: underline;");
underlb.setAttribute("id", "underlb");
underlb.value = "u";
underlb.onclick=function(){insert("u")};
//strikethrough
var strikeb = document.createElement("input");
strikeb.type = "button";
strikeb.setAttribute("style", "text-decoration: line-through;");
strikeb.setAttribute("id", "strikeb");
strikeb.value = "s";
strikeb.onclick=function(){insert("s")};
//typewritter
var ttb = document.createElement("input");
ttb.type = "button";
ttb.setAttribute("style", "font-family:monospace");
ttb.setAttribute("id", "ttb");
ttb.value = "tt";
ttb.onclick=function(){insert("tt")};
//spoiler
var spoilerb = document.createElement("input");
spoilerb.type = "button";
spoilerb.setAttribute("style", "font-family:monospace");
spoilerb.setAttribute("id", "spoilerb");
spoilerb.value = "spoiler";
spoilerb.onclick=function(){insert("spoiler")};
//image
var imageb = document.createElement("input");
imageb.type = "button";
imageb.setAttribute("style", "font-family:monospace");
imageb.setAttribute("id", "imageb");
imageb.value = "img";
imageb.onclick=function(){insert("img")};
//url
var urlb = document.createElement("input");
urlb.type = "button";
urlb.setAttribute("style", "font-family:monospace");
urlb.setAttribute("id", "urlb");
urlb.value = "url";
urlb.onclick=function(){insert("url")};
//left
var leftb = document.createElement("input");
leftb.type = "button";
leftb.setAttribute("style", "");
leftb.setAttribute("id", "leftb");
leftb.value = "|.."; //iterpretive positioning symbols because lazy now
leftb.onclick=function(){insert("left")};
//center
var centerb = document.createElement("input");
centerb.type = "button";
centerb.setAttribute("style", "");
centerb.setAttribute("id", "centerb");
centerb.value = ".|.";
centerb.onclick=function(){insert("center")};
//right
var rightb = document.createElement("input");
rightb.type = "button";
rightb.setAttribute("style", "");
rightb.setAttribute("id", "rightb");
rightb.value = "..|";
rightb.onclick=function(){insert("right")};
//color selector
//picker doesn't show up unless you zoom in on desktop
//and at the moment has janky positioning :|
var colorsel = document.createElement("input");
colorsel.type = "button";
colorsel.setAttribute("id", "colorsel");
//it would be nice to close on click as well, but I can't seem to get jscolor.hide() to work for this as well
colorsel.onclick=function(){submitColor()};
colorsel.setAttribute("style", "width:20px; text-indent:20px;");
colorsel.value="FFFF00";
colorsel.setAttribute("id", "colorselb");
jscolor.hash = true;
var picker = new jscolor(colorsel);
var color = colorsel.value;
//picker.closable=true;
picker.position="top";
//highlight
var highlb = document.createElement("input");
highlb.type = "button";
highlb.setAttribute("style", "");
highlb.setAttribute("id", "highlb");
highlb.value = "hl";
highlb.onclick=function(){colorInsert("hl",color)};
//color text
var colorb = document.createElement("input");
colorb.type = "button";
colorb.setAttribute("style", "");
colorb.setAttribute("id", "colorb");
colorb.value = "color";
colorb.onclick=function(){colorInsert("color",color)};
function submitColor()
{
color = colorsel.value;
document.getElementById('colorb').style.color = '#' + color;
document.getElementById('highlb').style.backgroundColor = '#' + color;
}
function addSpacer()
{
var spacer = document.createElement("span");
var content = document.createTextNode(" ");
spacer.appendChild(content);
buttonPanel.appendChild(spacer);
}
////////////////////////////////////////////////////////////
// A___A
// A___A |o o| do not feed the ascii cats
// ____ / o o \ |='=| they aren't real cats
//___/~____ ='= /_____/ |_______
// (______)__m_m_) / ||||
// |___||||]
//////////add all the buttons to their panels//////////
biusttPanel.appendChild(boldb);
biusttPanel.appendChild(italb);
biusttPanel.appendChild(underlb);
biusttPanel.appendChild(strikeb);
biusttPanel.appendChild(ttb);
buttonPanel.appendChild(biusttPanel);
addSpacer();
colorPanel.appendChild(colorsel);
colorPanel.appendChild(colorb);
colorPanel.appendChild(highlb);
buttonPanel.appendChild(colorPanel);
addSpacer();
spoiurlimgPanel.appendChild(spoilerb);
spoiurlimgPanel.appendChild(imageb);
spoiurlimgPanel.appendChild(urlb);
buttonPanel.appendChild(spoiurlimgPanel);
addSpacer();
allignPanel.appendChild(leftb);
allignPanel.appendChild(centerb);
allignPanel.appendChild(rightb);
buttonPanel.appendChild(allignPanel);
////---Select BBCode-applicaple textareas on every SN page ---/////
if(window.location.href.indexOf("status")>-1
||window.location.href.indexOf("/forum/") > -1
||window.location.href.indexOf("/gallery/") > -1 //I keep appending but now it's looking stupid
||window.location.href.indexOf("blogs") > -1) //should probably list negation of the pages I don't want instead
{
var loc2 = document.getElementsByTagName("textarea");
var loc = loc2[0].parentNode;
loc.insertBefore(buttonPanel, loc2[0]);
}
if(window.location.href.indexOf("settings") > -1)
{
var loc2 = document.getElementsByName("biography");
var loc = loc2[0].parentNode;
loc.insertBefore(buttonPanel, loc2[0]);
var loc3 = document.getElementsByName("signature"); //so far I can only get one instance on a page *headdesk* REEEEEE
var loc4 = loc3[0].parentNode;
loc4.insertBefore(buttonPanel.cloneNode(true), loc3[0]); //nevermind lol-- I know how to clone now
}
if(window.location.href.indexOf("/gallery/") > -1)
{
var loc2 = document.getElementsByTagName("textarea"); //get the first textarea, which is actually share2status
var loc = loc2[0].parentNode;
loc.insertBefore(buttonPanel, loc2[0]);
var loc3 = loc2[1].parentNode; //get the second textarea, the comment below the artwork
loc3.insertBefore(buttonPanel.cloneNode(true), loc2[1]);
}
if(window.location.href.indexOf("/user/") > -1)
{
var loc2 = document.getElementsByName("comment");
var loc = loc2[0].parentNode;
loc.insertBefore(buttonPanel, loc2[0]);
}
if(window.location.href.indexOf("/mail/") > -1)
{
var loc2 = document.getElementsByName("message");
for (var i=loc2.length; i--;)//get every reply box hidden on the page
{
console.log(i);
var loc = loc2[i].parentNode;
loc.insertBefore(buttonPanel.cloneNode(true), loc2[i]);
}
}
//taken from https://www.codingforums.com/javascript-programming/220962-bbcode-textarea-insert.html
//and modified
/************
* written by chris wetherell
* http://www.massless.org
* [email protected]
* warning: it only works for IE4+/Win and Moz1.1+
* feel free to take it for your site
* if there are any problems, let chris know.
************/
//it would be nice to have the text stay selected after clicking a button
//but I don't feel like figuring another thing out right now
function insert(tag)
{
var lft="[" + tag + "]";
var rgt="[/" + tag + "]";
wrapSelection(loc2[0], lft, rgt);
}
function colorInsert(tag, color)
{
var lft="[" + tag + "="+color+"]";
var rgt="[/" + tag + "]";
wrapSelection(loc2[0], lft, rgt);
}
function wrapSelection(txtarea, lft, rgt) {
if (document.all) {
IEWrap(lft, rgt);
} else if (document.getElementById) {
mozWrap(txtarea, lft, rgt);
}
}
function mozWrap(txtarea, lft, rgt) {
var selLength = txtarea.textLength;
var selStart = txtarea.selectionStart;
var selEnd = txtarea.selectionEnd;
if (selEnd == 1 || selEnd == 2) selEnd = selLength;
var s1 = (txtarea.value).substring(0, selStart);
var s2 = (txtarea.value).substring(selStart, selEnd)
var s3 = (txtarea.value).substring(selEnd, selLength);
txtarea.value = s1 + lft + s2 + rgt + s3;
}
//don't worry my many IE using social neko frens I gotchu
function IEWrap(lft, rgt) {
strSelection = document.selection.createRange().text;
if (strSelection != "") {
document.selection.createRange().text = lft + strSelection + rgt;
}
}
//css all over the place... what a mess
GM_addStyle
(
"#bpanel>span>input{font-size: 10px; height:20px;}"+
"#boldb,#italb,#underlb,#strikeb,#highlb,#ttb{width:20px; padding:0px;}"+
"#colorselb{width:10px; left:5px;}"+
"#colorb{width:32px; padding:0px; text-indent:-1px;}"+
"#spoilerb{width:40px; padding:0px; text-indent:-1px;}"+
"#imageb,#urlb{width:21px; text-indent:-6px;}"+
"#leftb,#centerb,#rightb{width:18px; text-indent:-4px;}"+
"jscolor{width:101, padding:0, shadow:false,borderWidth:0, backgroundColor:'transparent', insetColor:'#000'}"
);
//
//
//
//
//
//
//
// |\
// ~\ | \
// __--- | \| |---_
// /__ \ \ ~-/
// \ \___-
// __\ ; _/\ ` ___/\ /
// \ \|/ _\| ____,'
// ~--[|\@ ",@/|]__\
// :\ _ /,
// __/\__/ - \_/ ;`___/\__
// ___/-/ | \- `___/_ _\___' -/| \ \--_
// /_\ \ \ | \ ^ / | |/_/_\
///\ ; '\ | \_____|_____/ ; |/ /: \