-
-
Save Manishearth/2476992 to your computer and use it in GitHub Desktop.
This is a userscript that adds shortcuts for adding <kbd> tags to posts. Designed for Stack Exchange sites.
This file contains hidden or 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 _Add kbd shortcut | |
// @namespace StackExchange | |
// @description Adds a button and a keyboard shortcut to add <kbd> tags. | |
// @match http://*.askubuntu.com/* | |
// @match http://*.onstartups.com/* | |
// @match http://*.serverfault.com/* | |
// @match http://*.stackapps.com/* | |
// @match http://*.stackexchange.com/* | |
// @match http://*.stackoverflow.com/* | |
// @match http://*.superuser.com/* | |
// ==/UserScript== | |
function AddKbdShortcuts ($) { | |
$("textarea.wmd-input").each (AddKbdButtonAsNeeded); | |
//.on() not working right!! | |
$("textarea.wmd-input").live ("focus", AddKbdButtonAsNeeded); | |
$("textarea.wmd-input").live ("keydown", InsertKbdTagByKeypress); | |
$("li.wmd-kbd-button") .live ("click", InsertKbdTagByClick); | |
/*------------*/ | |
function AddKbdButtonAsNeeded () { | |
var jThis = $(this); | |
if ( ! jThis.data ("hasKbdBttn") ) { | |
//--- Find the button bar and add our button. | |
var btnBar = jThis.prevAll ("div.wmd-button-bar"); | |
if (btnBar.length) { | |
//--- The button bar takes a while to AJAX-in. | |
var bbListTimer = setInterval ( function() { | |
var bbList = btnBar.find ("ul.wmd-button-row"); | |
if (bbList.length) { | |
clearInterval (bbListTimer); | |
bbList.append ( | |
'<li class="wmd-button wmd-kbd-button" ' | |
+ 'title="Keyboard tag <kbd> Alt+K" ' | |
+ 'style="left: 380px;">' | |
+ '<span style="background: white;">[kbd]</span></li>' | |
); | |
jThis.data ("hasKbdBttn", true); | |
} | |
}, | |
100 | |
); | |
} | |
} | |
} | |
function InsertKbdTagByKeypress (zEvent) { | |
//--- On Alt-K, insert the <kbd> set. Ignore all other keys. | |
if (zEvent.altKey && zEvent.which == 75) { | |
InsertKbdTag (this); | |
return false; | |
} | |
return true; | |
} | |
function InsertKbdTagByClick (zEvent) { | |
//--- From the clicked button, find the matching textarea. | |
var targArea = $(this).parents ("div.wmd-button-bar") | |
.nextAll ("textarea.wmd-input"); | |
/*--- Due to SE's js, it's better to send a keypress event, instead of | |
calling InsertKbdTag directly. | |
//InsertKbdTag (targArea[0]); | |
*/ | |
targArea.trigger ( { | |
type: "keydown", | |
which: 75, | |
altKey: true | |
} ); | |
targArea.focus (); | |
} | |
function InsertKbdTag (node) { | |
//--- Wrap selected text or insert at curser. | |
var oldText = node.value || node.textContent; | |
var newText; | |
var iTargetStart = node.selectionStart; | |
var iTargetEnd = node.selectionEnd; | |
if (iTargetStart == iTargetEnd){ | |
newText = '<kbd></kbd>'; | |
}else{ | |
newText = '<kbd>' + oldText.slice (iTargetStart, iTargetEnd) + '</kbd>'; | |
} | |
//console.log (newText); | |
if(oldText.slice (iTargetStart, iTargetEnd).match(/\<kbd\>/)&&oldText.slice (iTargetStart, iTargetEnd).match(/\<\/kbd\>/)){ | |
//--In case of "<kbd>text</kbd>" being selected | |
newText=oldText.slice (0, iTargetStart)+oldText.slice (iTargetStart+5, iTargetEnd-6)+ oldText.slice (iTargetEnd) | |
node.value = newText; | |
//-- After using spelling corrector, this gets buggered, hence the multiple sets. | |
node.textContent = newText; | |
//-- Have to reset selection, since we repasted the text. | |
node.selectionStart = iTargetStart; | |
node.selectionEnd = iTargetEnd-11; | |
}else if(oldText.slice (iTargetStart-5, iTargetStart).match(/\<kbd\>/)&&oldText.slice (iTargetEnd, iTargetEnd+6).match(/\<\/kbd\>/)){ | |
//-- In case of "<kbd>[selected text]</kbd>" | |
newText=oldText.slice (0, iTargetStart-5)+oldText.slice (iTargetStart, iTargetEnd)+ oldText.slice (iTargetEnd+6) | |
node.value = newText; | |
//-- After using spelling corrector, this gets buggered, hence the multiple sets. | |
node.textContent = newText; | |
//-- Have to reset selection, since we repasted the text. | |
node.selectionStart = iTargetStart-5; | |
node.selectionEnd = iTargetEnd-5; | |
}else{ | |
//No kbd's nearby | |
newText = oldText.slice (0, iTargetStart) + newText + oldText.slice (iTargetEnd); | |
node.value = newText; | |
//-- After using spelling corrector, this gets buggered, hence the multiple sets. | |
node.textContent = newText; | |
//-- Have to reset selection, since we repasted the text. | |
node.selectionStart = iTargetStart + 5; | |
node.selectionEnd = iTargetEnd + 5; | |
} | |
} | |
} | |
withPages_jQuery (AddKbdShortcuts); | |
function withPages_jQuery (NAMED_FunctionToRun) { | |
//--- Use named functions for clarity and debugging... | |
var funcText = NAMED_FunctionToRun.toString (); | |
var funcName = funcText.replace (/^function\s+(\w+)\s*\((.|\n|\r)+$/, "$1"); | |
var script = document.createElement ("script"); | |
script.textContent = funcText + "\n\n"; | |
script.textContent += 'jQuery(document).ready( function () {' + funcName + '(jQuery);} );'; | |
document.body.appendChild (script); | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment