numbered_links.user.js

   1 /*
   2 *   This script is derived (by Jason Woofenden) from an example script from
   3 *   uzbl (see uzbl.org) and is thus presumably licensed under the GNU GPLv3. In
   4 *   any case, Jason's changes are in the public domain.
   5 */
   6
   7 // ==UserScript==
   8 // @name          numbered links
   9 // @namespace     http://patcavit.com/greasemonkey
  10 // @description   make all links followable with the keyboard
  11 // @include       *
  12 // ==/UserScript==
  13
  14 (function()
  15 {
  16
  17 var active = 0;
  18 var got = '';
  19
  20 // This is activated (and canceled) by pressing the ^C
  21 // Press L (first) to switch to one-hand mode
  22
  23 // I was getting some very funky return values from String.fromCharCode() for
  24 // punctuation keys so I made my own table. You might need to change this for
  25 // your computer/keyboard. You'll need to have every character in "charset" in
  26 // here.
  27
  28 var key_to_char = {
  29          '84': 't',
  30          '72': 'h',
  31          '83': 's',
  32          '78': 'n',
  33          '68': 'd',
  34         '189': '-',
  35          '82': 'r',
  36          '67': 'c',
  37          '71': 'g',
  38          '77': 'm',
  39          '86': 'v',
  40          '87': 'w',
  41          '66': 'b',
  42         '191': '/',
  43         '186': ';',
  44          '55': '7',
  45          '56': '8',
  46          '57': '9',
  47          '65': 'a',
  48          '69': 'e',
  49          '70': 'f',
  50          '73': 'i',
  51          '74': 'j',
  52          '75': 'k',
  53          '79': 'o',
  54          '80': 'p',
  55          '81': 'q',
  56          '85': 'u',
  57          '88': 'x',
  58          '89': 'y',
  59          '90': 'z',
  60          '50': '2',
  61          '51': '3',
  62          '52': '4',
  63         '222': "'",
  64          '76': 'l' // switch to one-hand mode
  65 };
  66
  67 //Just some shortcuts and globals
  68 var charset = 'thsnd-rcgmvwb/;789aefijkopquxyz234'; // update key_to_char if you add to this
  69 var uzblid = 'uzbl_link_hint';
  70 var uzbldivid = uzblid + '_div_container';
  71 var doc = document;
  72 var win = window;
  73 var links = document.links;
  74 var forms = document.forms;
  75
  76 //Calculate element position to draw the hint
  77 //Pretty accurate but on fails in some very fancy cases
  78 function element_position(el) {
  79     var x = el.offsetLeft;
  80     var y = el.offsetTop;
  81     var width = el.offsetWidth;
  82     var height = el.offsetHeight;
  83     while (el.offsetParent) {
  84         el = el.offsetParent;
  85         y += el.offsetTop;
  86         x += el.offsetLeft;
  87     }
  88     return { x: x, y: y, width: width, height: height };
  89 }
  90
  91 // Simulate a click on the element
  92 function click_element(target, options) {
  93         var event = target.ownerDocument.createEvent('MouseEvents');
  94         var pos = element_position(target);
  95         options = options || {};
  96
  97
  98         event.initMouseEvent(
  99                 options.type            || 'click',
 100                 options.canBubble       || true,
 101                 options.cancelable      || true,
 102                 options.view            || target.ownerDocument.defaultView,
 103                 options.detail          || 1,
 104                 options.screenX         || pos.x - window.pageXOffset,
 105                 options.screenY         || pos.y - window.pageYOffset,
 106                 options.clientX         || pos.x,
 107                 options.clientY         || pos.y,
 108                 options.ctrlKey         || false,
 109                 options.altKey          || false,
 110                 options.shiftKey        || false,
 111                 options.metaKey         || false,
 112                 options.button          || 0, //0 = left, 1 = middle, 2 = right
 113                 options.relatedTarget   || null
 114         );
 115
 116         target.dispatchEvent(event);
 117 }
 118
 119 //Calculate if an element is visible
 120 function isVisible(el) {
 121     if (el == doc) {
 122         return true;
 123     }
 124     if (!el) {
 125         return false;
 126     }
 127     if (!el.parentNode) {
 128         return false;
 129     }
 130     if (el.style) {
 131         if (el.style.display == 'none') {
 132             return false;
 133         }
 134         if (el.style.visibility == 'hidden') {
 135             return false;
 136         }
 137     }
 138     return isVisible(el.parentNode);
 139 }
 140 //Calculate if an element is on the viewport.
 141 function elementInViewport(el) {
 142     var pos = element_position(el);
 143     return pos.y < window.pageYOffset + window.innerHeight && pos.x < window.pageXOffset + window.innerWidth && (pos.y + pos.height) > window.pageYOffset && (pos.x + pos.width) > window.pageXOffset;
 144 }
 145 //Removes all hints/leftovers that might be generated
 146 //by this script.
 147 function removeAllHints() {
 148     var elements = doc.getElementById(uzbldivid);
 149     if (elements) {
 150         elements.parentNode.removeChild(elements);
 151     }
 152 }
 153 //Generate a hint for an element with the given label
 154 //Here you can play around with the style of the hints!
 155 function generateHint(el, label) {
 156     var pos = element_position(el);
 157     var hint = doc.createElement('div');
 158     hint.setAttribute('name', uzblid);
 159     hint.innerText = label;
 160     hint.style.display = 'inline';
 161     hint.style.backgroundColor = '#B9FF00';
 162     hint.style.border = '2px solid #4A6600';
 163     hint.style.color = 'black';
 164     hint.style.fontSize = '9px';
 165     hint.style.fontWeight = 'bold';
 166     hint.style.lineHeight = '9px';
 167     hint.style.margin = '0px';
 168     hint.style.width = 'auto'; // fix broken rendering on w3schools.com
 169     hint.style.padding = '1px';
 170     hint.style.position = 'absolute';
 171     hint.style.zIndex = '1000';
 172     hint.style.textTransform = 'uppercase';
 173     hint.style.left = Math.max(-1, (pos.x - (7 + label.length * 9))) + 'px';
 174     hint.style.top = (pos.y + 1) + 'px';
 175     var img = el.getElementsByTagName('img');
 176     //if (img.length > 0) {
 177         //hint.style.top = pos.x + img[0].height / 2 - 6 + 'px';
 178     //}
 179     hint.style.textDecoration = 'none';
 180     // hint.style.webkitBorderRadius = '6px'; // slow
 181     return hint;
 182 }
 183 //Here we choose what to do with an element if we
 184 //want to "follow" it. On form elements we "select"
 185 //or pass the focus, on links we try to perform a click,
 186 //but at least set the href of the link. (needs some improvements)
 187 function clickElem(item) {
 188     removeAllHints();
 189     if (item) {
 190         var name = item.tagName;
 191         if (name == 'A') {
 192             click_element(item);
 193             window.location = item.href;
 194         } else if (name == 'INPUT') {
 195             var type = item.getAttribute('type').toUpperCase();
 196             if (type == 'TEXT' || type == 'FILE' || type == 'PASSWORD') {
 197                 item.focus();
 198                 item.select();
 199             } else {
 200                 item.click();
 201             }
 202         } else if (name == 'TEXTAREA' || name == 'SELECT') {
 203             item.focus();
 204             item.select();
 205         } else {
 206             click_element(item);
 207             window.location = item.href;
 208         }
 209     }
 210 }
 211 //Returns a list of all links (in this version
 212 //just the elements itself, but in other versions, we
 213 //add the label here.
 214 function addLinks() {
 215     var res = [[], []];
 216     for (var l = 0; l < links.length; l++) {
 217         var li = links[l];
 218         if (isVisible(li) && elementInViewport(li)) {
 219             res[0].push(li);
 220         }
 221     }
 222     return res;
 223 }
 224 //Same as above, just for the form elements
 225 function addFormElems() {
 226     var res = [[], []];
 227     for (var f = 0; f < forms.length; f++) {
 228         for (var e = 0; e < forms[f].elements.length; e++) {
 229             var el = forms[f].elements[e];
 230             if (el && ['INPUT', 'TEXTAREA', 'SELECT'].indexOf(el.tagName) + 1 && isVisible(el) && elementInViewport(el)) {
 231                 res[0].push(el);
 232             }
 233         }
 234     }
 235     return res;
 236 }
 237 //Draw all hints for all elements passed. "len" is for
 238 //the number of chars we should use to avoid collisions
 239 function reDrawHints(elems, chars) {
 240     removeAllHints();
 241     var hintdiv = doc.createElement('div');
 242     hintdiv.setAttribute('id', uzbldivid);
 243     for (var i = 0; i < elems[0].length; i++) {
 244         if (elems[0][i]) {
 245             var label = elems[1][i].substring(chars);
 246             var h = generateHint(elems[0][i], label);
 247             hintdiv.appendChild(h);
 248         }
 249     }
 250     if (document.body) {
 251         document.body.appendChild(hintdiv);
 252     }
 253 }
 254 // pass: number of keys
 255 // returns: key length
 256 function labelLength(n) {
 257         var oldn = n;
 258         var keylen = 0;
 259         if(n < 2) {
 260                 return 1;
 261         }
 262         n -= 1; // our highest key will be n-1
 263         while(n) {
 264                 keylen += 1;
 265                 n = Math.floor(n / charset.length);
 266         }
 267         return keylen;
 268 }
 269 // pass: number
 270 // returns: label
 271 function intToLabel(n) {
 272         var label = '';
 273         do {
 274                 label = charset.charAt(n % charset.length) + label;
 275                 n = Math.floor(n / charset.length);
 276         } while(n);
 277         return label;
 278 }
 279 // pass: label
 280 // returns: number
 281 function labelToInt(label) {
 282         var n = 0;
 283         var i;
 284         for(i = 0; i < label.length; ++i) {
 285                 n *= charset.length;
 286                 n += charset.indexOf(label[i]);
 287         }
 288         return n;
 289 }
 290 //Put it all together
 291 function followLinks(follow) {
 292     if(follow.charAt(0) == 'l') {
 293         follow = follow.substr(1);
 294         charset = 'thsnlrcgfdbmwvz-/';
 295     }
 296     var s = follow.split('');
 297     var linknr = labelToInt(follow);
 298     var linkelems = addLinks();
 299     var formelems = addFormElems();
 300     var elems = [linkelems[0].concat(formelems[0]), linkelems[1].concat(formelems[1])];
 301     var len = labelLength(elems[0].length);
 302     var oldDiv = doc.getElementById(uzbldivid);
 303     var leftover = [[], []];
 304     if (s.length == len && linknr < elems[0].length && linknr >= 0) {
 305         clickElem(elems[0][linknr]);
 306         got = '';
 307         active = 0;
 308     } else {
 309         for (var j = 0; j < elems[0].length; j++) {
 310             var b = true;
 311             var label = intToLabel(j);
 312             var n = label.length;
 313             for (n; n < len; n++) {
 314                 label = charset.charAt(0) + label;
 315             }
 316             for (var k = 0; k < s.length; k++) {
 317                 b = b && label.charAt(k) == s[k];
 318             }
 319             if (b) {
 320                 leftover[0].push(elems[0][j]);
 321                 leftover[1].push(label);
 322             }
 323         }
 324         reDrawHints(leftover, s.length);
 325     }
 326 }
 327
 328
 329
 330
 331
 332
 333
 334
 335
 336
 337
 338
 339
 340
 341
 342
 343
 344
 345
 346
 347
 348
 349
 350
 351
 352
 353 // from your event handler you can: return stop_event(e)
 354 function stop_event(e) {
 355         // try {
 356                 e.stopPropagation();
 357                 e.preventDefault();
 358         // } catch (ex) {
 359         //      return false; // IE-compat
 360         // }
 361 }
 362 document.addEventListener(
 363         'keydown',
 364         function(e) {
 365                 // [de]activate on ^C
 366                 // deactivate on ESC
 367                 if(
 368                         (e.ctrlKey && e.keyCode == 67)
 369                         || (e.keyCode == 27 && active == 1)
 370                 ) {
 371                         if(active) {
 372                                 got = '';
 373                                 removeAllHints();
 374                         } else {
 375                                 followLinks(got);
 376                         }
 377                         active = 1 - active;
 378                         return stop_event(e);
 379                 } else {
 380                         if(active == 1 && !e.ctrlKey && !e.shiftKey && !e.altKey) {
 381                                 if(key_to_char[e.keyCode]) {
 382                                         got += key_to_char[e.keyCode];
 383                                         followLinks(got);
 384                                         return stop_event(e);
 385                                 }
 386                         }
 387                 }
 388         },
 389         true);
 390 })();