Skip to content

Instantly share code, notes, and snippets.

@Manishearth
Forked from BrockA/Add_kbd_shortcut.user.js
Created April 24, 2012 06:08
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 Manishearth/2476992 to your computer and use it in GitHub Desktop.
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.
// ==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 &lt;kbd&gt; 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