public

This is a userscript that adds shortcuts for adding <kbd> tags to posts. Designed for Stack Exchange sites.

  • Download Gist
Add_kbd_shortcut.user.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135
// ==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);
};

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.