View difference between Paste ID: QdGsLgg9 and

-
+// VimNav.user.js
 // Version 1.1
 //
 // ==UserScript==
 // @name        VimNav
 // @author      Bernd Pol <bernd.pol@online.de>
 // @licence     GPL
 // @description Vim-like navigation in a webkit based browser.
 // ==/UserScript==
 
 /*
  * VERSIONS
  *
  * 1.1  Bugfix
  *      - proper handling of password fields
  *        (no more VarNav functions called from inside)
  *      - input fields now properly selected
  *      - labels display unaltered
  *        (could have been changed to uppercase if node parent did so)
  *      New Features
  *      - scroll height adjustable by factors 1, 2, 3, and 4
  *        (by default bound to "^1", "^2", "^3", and "^4")
  *
  * 1.0  Initial Release
  */
 /*
  * TODO
  * - second level commands (like "gu", etc.)
  * - repeat counts
  */
 /*
  * KNOWN ISSUES
  *
  * On more complicated structured pages the browser (Midori only?) will call up
  * this script several times in a row. This will cause commands to be repeatedly
  * called up, once per running instance.
  * There is no way to detect such a multiple instatiating on the Javascript
  * level however which means:
  * - vertical movements will occur over multiples of the programmed distance
  *   (to cope for this situation a window height adjust factor has been
  *   introduced which will effectively reduce the height by which each movement
  *   call in a row will scroll the window, by default bound to ^1, ^2, ^3, ^4)
  * - hint labels will take significant more time to show up
  *   (hint-based navigation will be unaffected in most cases, however, as only
  *   one instance will effectively control the behaviour)
  */
 /*
  * CREDITS
  *
  * This is inspired by (and was partially copied from):
  * - the "vimkeybindings" greasemonkey script by "arno <arenevier@fdn.fr>"
  *   <http://userscripts.org/scripts/review/32369>
  * - the "KeyNav" greasemonkey script, version 0.1.1 beta by Itamar Benzaken
  *   <http://userscripts.org/scripts/review/33808>
  * - the "follow.js" uzbl link following script
  *   <http://www.uzbl.org/wiki/follow.sh>
  * - and the "goup", javascript version, uzbl page/domain switching script
  *   <http://www.uzbl.org/wiki/go-up>
  */
 
 /*
  * Note: This is a Midori browser specific script.
  *       Using other browsers may require some rewrite.
  */
 
 /****************
  *** Contents ***
  ****************/
 /*
  * Configuration
  *      Key Bindings Configuration
  *          var keyBindings
  *          var navKeyBindings
  *      Basic Label Setup
  *          var autoselectLink
  *          var collSequence
  *          var overlayId
  *          var shortenLabels
  *          var nodeLabelSize
  *          var nodeLabelColor
  *          var nodeLabelBckground
  *          var partialLabelColor
  *          var partialLabelBackground
  *          var foundLabelColor
  *          var foundLabelBackground
  *          var nodeOpacity
  * Simple Navigation
  *      Small vertical movements
  *          function goUp()
  *          function goDown()
  *      Halfpage vertical movements
  *          function goHalfUp()
  *          function goHalfDown()
  *      Fullpage vertical movements
  *          function goPageUp()
  *          function goPageDown()
  *      Horizontal movements
  *          function goRight()
  *          function goLeft()
  *      Document wide vertical movements
  *          function goTop()
  *          function goBottom()
  *      URL dependent stuff
  *          function goUrlPageUp()
  *          function goUrlDomainUp()
  *      Adjust Movements
  *          function adjustHeight1()
  *          function adjustHeight2()
  *          function adjustHeight3()
  *          function adjustHeight4()
  *  Link Following
  *      Common variables
  *      Clear all link information
  *          function clearLinkInfo()
  *      Label handling
  *          function labelText( posNumber )
  *          function labelNumber( labelString )
  *          function positionOf( thisElement )
  *      Maintaining navigation information
  *          function isVisible( thisElement )
  *          function isDisplayable( thisElement )
  *          function findClickableNodes()
  *          function createOverlays()
  *          function showOverlays( labelHead )
  *          function hideOverlays()
  *          function redisplayOverlays()
  *          function removeOverlays()
  *      Navigating
  *          function isValidLabel( thisHead )
  *          function navigateByLabel()
  *          function clickLabel( labelPos )
  *          function startNavigating()
  *          function startNavNewTab()
  *          function stopNavigating()
  * Keyboard Interface
  *      function isEditable( element )
  *      function evalKey( keyEvent )
  *      function hasValidNavKey()
  *      function keyHandler( keyEvent )
  *      function keyRepeatHandler( keyEvent )
  * Script Body
  *      Initialization
  *      Register keyboard event handlers
  */
 
 // -----------------------------------------------------------------------------
 //                       start of configuration section
 // -----------------------------------------------------------------------------
 
 /*********************
  *** Configuration ***
  *********************/
 /*
  * Key Bindings Configuration
  * ==========================
  *
  * To use a Ctrl-key combination prepend "^" before the character
  * (e.g. "^b" denotes the Ctrl-b control).
  * Character case is implicit, e.g. "B" denotes Shift-b.
  *
  * The Esc key has been set up as universal stop action key which is treated
  * separately in the keydown event handler.
  *
  * NOTE:
  * Javascript apparently has problems to properly process language specific
  * keyboards (like umlauts on a german layout), thus best use the ASCII
  * character set only.
  *
  * NOTE:
  * Midori processes its own shortcuts before they reach this script. So make
  * sure there are no conflicts.
  * --> If necessary redefine conflicting Midori specific shortcuts there in
  *                       Tools->Customize Shortcuts...
  */
 /*
  * Standard key bindings
  * ---------------------
  */
 var keyBindings = {
     "h" : goLeft,
     "l" : goRight,
     "k" : goHalfUp,
     "j" : goHalfDown,
     "K" : goUp,
     "J" : goDown,
     "u" : goPageUp,
     "d" : goPageDown,
     "t" : goTop,
     "b" : goBottom,
     "U" : goUrlPageUp,
     "D" : goUrlDomainUp,
    "^1" : adjustHeight1,    // factors to decrease the effective window
    "^2" : adjustHeight2,    // height in scrolling (sometimes useful
    "^3" : adjustHeight3,    // when this script was called up multiple
    "^4" : adjustHeight4,    // times in a row)
     "f" : startNavigating,  // if autoselecting, open match in current tab
     "F" : startNavNewTab,   // if autoselecting, open match in a new tab
 }
 /*
  * Navigation key bindings
  * -----------------------
  * These provide some page movement actions when navigating by labels where the
  * usual navigation keys are not available.
  *
  * NOTE: These bindings are only valid when navigating. Otherwise the standard
  *       bindings defined above apply.
  */
 var navKeyBindings = {
     "^h" : goLeft,
     "^l" : goRight,
     "^k" : goHalfUp,
     "^j" : goHalfDown,
     "^t" : goTop,
     "^b" : goBottom,
     "^s" : redisplayOverlays,
     "^d" : hideOverlays,
     "^r" : repositionLabels,    // sometimes useful if labels overlap
     "^f" : stopNavigating,
 }
 /*
  * Basic Label Setup
  * =================
  */
 /*
  * Link selection behaviour
  * ------------------------
  */
 /*
  * How to select a link
  * --------------------
  * If true this will select link as soon as there is a match.
  * Otherwise the user must confirm the selection:
  * Return:  open link in this tab
  * Space:   open link in new tab
  * Although this requires an additional keypress it allows for selecting another
  * link (via backspace correction).
  */
 var autoselectLink = true;
 /*
  * If not autoselecting we need some special keys to trigger the selection.
  */
 var openInThisTab = "g";
 var openInNewTab = "t";
 /*
  * Collateral Sequences
  * -----------------------
  *
  * There are several label number representations possible. Just uncomment the
  * one you want.
  *
  * Note that the first symbol in sequence will be treated as zero equivalent
  * and the labels will be get those zero equivalents prepended if necessary,
  * e.g. the number 1 in a three-digit "alpha" sequence will show as "aab".
  */
 var collSequence = "optimal";   // automatic: find shortest to type sequence
 // var collSequence = "numeric";   // decimal numbers
 // var collSequence = "alpha";     // lower case letter sequences
 // var collSequence = "longalpha"; // lower followed by upper case letters
 // This can be any unique sequence of symbols, e.g.:
 // var collSequence = "asdfghjkl"; // home row keys (for touch typers)
 // var collSequence = "uiophjklnm"; // right hand only
 /*
  * The overlay identification
  * --------------------------
  * This will be prepended to every label overlay element. Redefine if there are
  * name conflicts.
  */
 var overlayId = "VimNavLabel";
 /*
  * Node label display
  * ------------------
  */
 var shortenLabels = true;   // show matching labels and selectable digits only
 /*
  * This defines the font size shown in the labels. It may be an absolute number
  * with a trailing "px" giving the font height in pixels, a number with trailing
  * "%" giving the height relative to the parents font size, or one of the
  * predefined font size property values (ranging from smallest to largest):
  * "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large"
  * or defining a relative value to the parent font size:
  * "smaller", "larger"
  * ( see also: http://www.w3schools.com/jsref/prop_style_fontsize.asp )
  */
 var nodeLabelSize = "12px";
 //var nodeLabelSize = "85%";
 //var nodeLabelSize = "small";
 
 var nodeLabelColor = "red";
 var nodeLabelBackground = "lightyellow";
 
 var partialLabelColor = "blue";
 var partialLabelBackground = "lightgreen";
 
 var foundLabelColor = "yellow";
 var foundLabelBackground = "red";
 
 var nodeOpacity = 0.6;
 
 // -----------------------------------------------------------------------------
 //                        end of configuration section
 // -----------------------------------------------------------------------------
 
 /*************************
  *** Simple Navigation ***
  ************************/
 
 var wndHeight;              // height of the currently focused window
 var wndHeightAdjust = 1;    // factor to decrease the height movement
 var keyLabel;               // label value of current key
 var keyCode;                // code value of current key
 var keyAction = 0;          // the action to perform on the current key
 /*
  * Small vertical movements
  */
 function goUp() {
     window.scrollBy( 0, -5 );
 }
 
 function goDown() {
     window.scrollBy( 0, 5 );
 }
 /*
  * Halfpage vertical movements
  */
 function goHalfUp() {
     window.scrollBy( 0, -1 * ((wndHeight / wndHeightAdjust) / 2) );
 }
 
 var sc = 0;
 function goHalfDown() {
     window.scrollBy( 0, (wndHeight / wndHeightAdjust) / 2 );
 }
 /*
  * Fullpage vertical movements
  */
 function goPageUp() {
     window.scrollBy( 0, -1 * (wndHeight / wndHeightAdjust) );
 }
 
 function goPageDown() {
     window.scrollBy( 0, wndHeight / wndHeightAdjust );
 }
 /*
  * Horizontal movements
  */
 function goRight() {
     window.scrollBy( 15, 0 );
 }
 
 function goLeft() {
     window.scrollBy( -15, 0 );
 }
 /*
  * Document wide vertical movements
  */
 function goTop() {
     window.scroll( 0, 0 );
 }
 
 function goBottom() {
     window.scroll( document.width, document.height );
 }
 /*
  * URL dependent stuff
  * ===================
  */
 /*
  * Go up one page in the URL
  * -------------------------
  */
 function goUrlPageUp() {
     /*
      * Most of this could be inline below. We compute these here to keep the
      * switching stuff better readable.
      * TODO
      * There is a recursion problem if the shortened URL was implicitely
      * expanded to point to the current page again. This could be caught if
      * there was a possibilitiy to keep the current URL somehow globally when
      * the document reloads.
      */
     var oldLocation = window.location;
     var newLocation = null;
     var newLocArray =
         window.location.href.match(/(\w+:\/\/.+?\/)([\w\?\=\+\%\&\-\.]+\/?)$/);
     if (newLocArray) {
         newLocation = newLocArray[1];
     }
     /*
      *  Now go up one level if possible.
      */
     if (newLocation && newLocation != oldLocation) {
         window.location = newLocation;
     }
     /*
      * We are at the top page already. Let the user know this.
      */
     else
         alert( "Already at top page. Cannot go further up." );
 }
 /*
  * Go up one domain in the URL
  * ---------------------------
  */
 function goUrlDomainUp() {
     var oldDomain = document.domain;
     var newDomain = null;
     /*
      * Even if we do not often need subdomain switching let's keep this stuff
      * more readable, too.
      */
     var subDomArray =
         oldDomain.match(/^(?!www\.)\w+\.(.+?)\.([a-z]{2,4})(?:\.([a-z]{2}))?$/);
     if (subDomArray) {
         /*
          * The URL is now broken up into array elements.
          * We take the subdomain out and join everything together to th new URL.
          */
         var subDomL = subDomArray.length;
         newDomain =
             window.location.protocol + "//" +
             subDomArray.slice(1, subDomArray[subDomL] ? subDomL
                                                       : subDomL-1).join(".");
     }
     /*
      * Go up one sub domain level if possible.
      */
     if (newDomain) {
         window.location = newDomain;
     }
     /*
      * We are at the top domain already. Let the user know this.
      */
     else
         alert( "Already at top domain. Cannot go further up." );
 }
 /*
  * Adjust Movements
  * ================
  *
  * These functions only set the wndHeightAdjust factor in order to cope whith
  * situations where the browser (Midori only?) initializes the script multiple
  * times (which currently can happen on complicated structured pages).
  * Their only purpose is to bind these adjustments to some keys.
  */
 function adjustHeight1() {
     wndHeightAdjust = 1;
 }
 
 function adjustHeight2() {
     wndHeightAdjust = 2;
 }
 
 function adjustHeight3() {
     wndHeightAdjust = 3;
 }
 
 function adjustHeight4() {
     wndHeightAdjust = 4;
 }
 
 /**********************
  *** Link Following ***
  **********************/
 /*
  * Common variables
  */
 var navigating = false;
 var openNewTab = false;
 var waitForConfirmation = false;
 
 var clickableNodes;
 var labelsOverlays;
 var nodeLabels;
 
 var hasLinkNodes;
 var curLabelHead;
 var curLabelNum;
 var matchingLabelNum;
 var labelDigits;
 
 var useSequence;
 var useBase;
 
 var relPosLabels = false;
 /*
  * Clear All Link Information
  * --------------------------
  */
 function clearLinkInfo() {
     removeOverlays();
     labelsOverlays = null;
     nodeLabels = null;
     clickableNodes = null;
     hasLinkNodes = false;
     curLabelHead = "";
     curLabelNum = -1;   // marks number as invalid
     matchingLabelNum = -1;
     labelDigits = 0;
     waitForConfirmation = false;
     relPosLabels = false;
 }
 /*
  * Label Handling
  * ==============
  */
 /*
  * Construct the Label Text For a Given Position Number
  * ----------------------------------------------------
  * @param posNumber decimal position number
  *                  (must be >= 0)
  * @return          string representation of this number according to the
  *                  predefined collateral sequence.
  *                  Leading filled with the zero equivalence of the predefined
  *                  collateral sequence up to labelDigits length.
  */
 function labelText( posNumber ) {
     var head = posNumber;
     var remainder = 0;
     var labelString = "";
     /*
      * Numeric sequences should count from 1 instead from 0.
      */
     if (collSequence == "numeric" ||
         (collSequence == "optimal" && useSequence.charAt(0) == "0"))
         head++;
     /*
      * Compute the symbolic digits.
      */
     if (head == 0) {
         labelString = useSequence.charAt(0);
     }
     while (head > 0) {
         remainder = head % useBase;
         labelString = useSequence.charAt(remainder) + labelString;
         head = (head - remainder) / useBase;
     }
     // Fill with the zero equivalent of this collateral sequence.
     while (labelString.length < labelDigits) {
         labelString = useSequence.charAt(0) + labelString;
     }
     return labelString;
 }
 /*
  * Construct the Label Lumber For a Given Label String
  * ---------------------------------------------------
  * @param labelString   string representation of the label
  * @return              decimal equivalent according to the prdefined
  *                      collataration sequence.
  */
 function labelNumber( labelString ) {
     var posNumber = 0;
     var curBase = useBase;
     var curDigit;
 
     for (var i=labelString.length-1; i >= 0; i--) {
         curDigit = labelString.charAt(i);
         posNumber += useBase * useSequence.indexOf(curDigit);
         curBase *= useBase;
     }
     /*
      * Adjust for numeric counting from 1 instead of 0.
      */
     if (collSequence == "numeric" ||
         (collSequence == "optimal" && useSequence.charAt(0) == "0"))
         posNumber--;
 
     return posNumber;
 }
 /*
  * Evaluate the position of an element
  * -----------------------------------
  *
  *  @param  thisElement element to inspect
  *  @return array [up, left, width, height] of position and size
  */
 function positionOf( thisElement ) {
     var up = thisElement.offsetTop;
     var left = thisElement.offsetLeft;
     var width = thisElement.offsetWidth;
     var height = thisElement.offsetHeight;
     while (thisElement.offsetParent) {
         thisElement = thisElement.offsetParent;
         up += thisElement.offsetTop;
         left += thisElement.offsetLeft;
     }
     return [up, left, width, height];
 }
 /*
  * Switch the relative positions mode of the labels display.
  * ---------------------------------------------------------
  * In some elements (i.e. some tables containing links) some labels might be put
  * one over the other which makes the overwritten ones unaccessible. In these
  * cases the labels often can be separated if the relative positions of the
  * nodes they belong to will be used. This switch accomplishes that task.
  *
  * We should not make this a standard behaviour, however, because it often will
  * result in the browser trying to display the labels outside the current
  * viewport.
  *
  * NOTE: This feature is meant to be used during labels navigation only. Thus
  * bind it to navKeyBindings instead of plain keyBindings.
  */
 function repositionLabels() {
     var newPosMode = ! relPosLabels;
 
     hideOverlays();
     removeOverlays();
     relPosLabels = newPosMode;
     createOverlays()
     showOverlays( curLabelHead );
 }
 /*
  * Maintaining Navigation Information
  * ==================================
  */
 /*
  * Check visibility of an element.
  * -------------------------------
  * Recursively checks the given Element wether it is not hidden.
  *
  * @param   thisElement  node to be checked.
  * @return  true if this Element is not hidden and not behind a hidden parent in
  *          the DOM tree.
  */
 function isVisible( thisElement ) {
     if ( thisElement == document ) {
         return true;
     }
     if ( ! thisElement ) {
         return false;
     }
     if ( ! thisElement.parentNode ) {
         return false;
     }
     if ( thisElement.style ) {
         if ( thisElement.style.display == 'none' ) {
             return false;
         }
         if ( thisElement.style.visibility == 'hidden' ) {
             return false;
         }
     }
     return isVisible( thisElement.parentNode );
 }
 /*
  * Check if the element is displayable at all.
  * -------------------------------------------
  *
  * @param   thisElement element to check
  * @return  false if the element width or height are equal or below zero
  */
 function isDisplayable( thisElement ) {
     var width = thisElement.offsetWidth;
     var height = thisElement.offsetHeight;
 
     if (width <= 0 || height <= 0)
         return false;
     else
         return true;
 }
 /*
  * Find Clickable Elements in the Document
  * ---------------------------------------
  * Scans the child nodes of the current ducument for those being clickable.
  *
  * @return  clickableNodes: array of clickable child nodes collected
  *          labelDigits:    number of label digits required by this
  *                          collateral sequence
  */
 function findClickableNodes() {
     /*
      * Make sure to always start in a clear state.
      */
     clearLinkInfo();
     clickableNodes = new Array();
     /*
      * Recursively scan the DOM-provided document links array.
      */
     function addClickableNodesIn( thisParent ) {
         for (var i = 0; i < thisParent.childNodes.length; i++) {
             var curNode = thisParent.childNodes[i];
             /*
              * Look at available and visible type 1 nodes only.
              */
             if (curNode.nodeType == 1 &&
                 isDisplayable( curNode ) &&
                 isVisible( curNode )) {
                 /*
                  * Check if this is a clickable element and
                  * add it to the clickableNodes array if so.
                  */
                 var isClickable =
                     curNode.nodeName.toLowerCase()=="input" |
                     curNode.nodeName.toLowerCase()=="select" |
                     curNode.nodeName.toLowerCase()=="textarea" |
                     curNode.hasAttribute( "tabindex" ) |
                     curNode.hasAttribute( "href" ) |
                     curNode.hasAttribute( "onclick" );
                 if (isClickable) {
                     clickableNodes.push( curNode );
                 }
             }
             /*
              * Recursively check for clickable nodes in the childs of this one.
              */
             addClickableNodesIn( curNode );
         }
     }
     /*
      * Now start this scan at the document root.
      */
     addClickableNodesIn( document );
     /*
      * If wanted now find an optimal collateral sequence for labels display.
      */
     var curLength = clickableNodes.length;
     /*
      * Do so only if there are any clickable nodes at all.
      */
     if (curLength > 0) {
         hasLinkNodes = true;
     } else {
         hasLinkNodes = false;
         return;
     }
 
     if (collSequence == "optimal") {
         if (curLength < 10) {
             // Labels need one number digit only.
             useSequence = "0123456789";
             useBase = 10;
         }
         else if (curLength < 50) {
             // Labels displayable with one longalpha digit.
             useSequence = "abcdefghijklmnopqrstuvxyzABCDEFGHIJKLMNOPQRSTUVXYZ";
             useBase = 50;
         }
         else if (curLength > 99) {
             // Labels would need more than three number digits.
             // Note: This could as well be a lower + upper case sequence but
             //       using lower case only appears to be more practical.
             useSequence = "abcdefghijklmnopqrstuvxyz";
             useBase = 25;
         }
         else {
             // Labels displayable with two number digits.
             useSequence = "0123456789";
             useBase = 10;
         }
     }
     /*
      * Finally compute the number of digits the labels need to show.
      */
     while (curLength > 1) {
         labelDigits++;
         curLength /= useBase;
     }
 }
 /*
  * Create Labels Overlays
  * ----------------------
  * Requires the clickableNodes being evaluated already and no overlays being
  * created yet.
  *
  * @return  labelsOverlays: array of label elements
  *          nodeLabels:     array of label texts
  */
 function createOverlays() {
     var curElement;
     var curLabel;
     var curOverlay;
     var curPosition;
     /*
      * Do nothing if there are no clickable nodes at all.
      */
     if (! hasLinkNodes)
         return;
     /*
      * Scan the clickableNodes and construct a labels overlay for each.
      */
     labelsOverlays = new Array();
     nodeLabels = new Array();
 
     for (var i = 0; i < clickableNodes.length; i++) {
         curLabel = labelText( i );
         curElement = clickableNodes[i];
         curPosition = positionOf( curElement );
         /*
          * Create a hidden overlay for this element.
          */
         curOverlay    = document.createElement( "span" );
         curOverlay.id = overlayId;
         //
         curOverlay.style.position   = "absolute";
         if (relPosLabels) {
             curOverlay.style.left   = curPosition[1] + "px";
             curOverlay.style.top    = curPosition[0] + "px";
         }
         curOverlay.style.width      = "auto";
         curOverlay.style.padding    = "1px";
         curOverlay.style.background = nodeLabelBackground;
         curOverlay.style.fontSize   = nodeLabelSize;
         curOverlay.style.fontWeight = 'bold';
         curOverlay.style.fontColor  = "black";
         curOverlay.style.textTransform = "none";
         //
         curOverlay.style.zorder = 1000;    // always on top
         curOverlay.style.opacity = nodeOpacity;
         //
         curOverlay.style.border     = "1px dashed darkgray";
         curOverlay.style.fontColor  = "black";
         //
         curOverlay.style.visibility = "hidden";
         // This will be displayed:
         curOverlay.innerHTML =
             "<font color=\"" +
             nodeLabelColor + "\">" +
             curLabel +
             "</font>";
         //
         labelsOverlays.push( curOverlay );
         nodeLabels.push( curLabel );
         /*
          * Insert this into the document as sibling of the current element.
          */
 //        curElement.setAttribute( overlayId, curLabel );
         curElement.parentNode.insertBefore( curOverlay, curElement );
     }
 }
 /*
  * Show Labels Overlays
  * --------------------
  * Shows overlays starting with labelHead, hides all others.
  * If no direct match yet show the label tails only. Else show the complete
  * label.
  *
  * @param   labelHead   initial character sequence of the labels to be shown
  *                      where only the remaining tail will be displayed
  *                      if "*":   show all labels without change
  *                      if "":    reset and show all labels
  *
  */
 function showOverlays( labelHead ) {
     var curLabel;
     var curOverlay;
     var headLength = labelHead.length;
     /*
      * Do nothing if there are no clickable nodes at all.
      */
     if (! hasLinkNodes)
         return;
     /*
      * Scan the labels overlays array.
      */
     for (var i = 0; i < labelsOverlays.length; i++) {
         labelsOverlays[i].style.visibility = "hidden";
         curLabel = nodeLabels[i];
 
         if (labelHead == "") {
             // Restore the label text to all digits and show the label.
             labelsOverlays[i].innerHTML =
                 "<font color=\"" +
                 nodeLabelColor + "\">" +
                 curLabel +
                 "</font>";
             labelsOverlays[i].style.visibility = "visible";
         }
         else if (labelHead == "*") {
             if (matchingLabelNum >= 0)
                 labelsOverlays[matchingLabelNum].style.visibility = "visible";
             else
                 labelsOverlays[i].style.visibility = "visible";
         }
         else {
             if (curLabel.substring( 0, headLength) == labelHead) {
                 if (headLength != labelDigits) {
                     /*
                      * This is a partial label.
                      */
                     if (shortenLabels) {
                         // Show relevant digits only.
                         labelsOverlays[i].innerHTML =
                             "<font color=\"" +
                             nodeLabelColor + "\">" +
                             curLabel.substring( headLength, labelDigits ) +
                             "</font>";
                     } else {
                         // Mark matching labels differently.
                         labelsOverlays[i].innerHTML =
                             "<font style=\"background: " +
                             partialLabelBackground + "\" color=\"" +
                             partialLabelColor + "\">" +
                             curLabel +
                             "</font>";
                     }
                 }
                 else {
                     // This is a full match, remember and show it.
                     matchingLabelNum = i;
                     labelsOverlays[i].innerHTML =
                         "<font color=\"" +
                         foundLabelColor +
                         "\" style=\"background: " +
                         foundLabelBackground + "\">" +
                         curLabel +
                         "</font>";
                 }
                 /*
                  * Show this label
                  */
                 labelsOverlays[i].style.visibility = "visible";
             }
             /*
              * Treat nonmatching labels here.
              */
             else {
                 // Restore to full label representation.
                 labelsOverlays[i].innerHTML =
                     "<font color=\"" +
                     nodeLabelColor + "\">" +
                     curLabel +
                     "</font>";
 
                 if (shortenLabels)
                     labelsOverlays[i].style.visibility = "hidden";
                 else
                     labelsOverlays[i].style.visibility = "visible";
             }
         }
     }
 }
 /*
  * Hide overlays
  * -------------
  * Hides every label overlay.
  */
 function hideOverlays() {
     /*
      * Do nothing if there are no clickable nodes at all.
      */
     if (! hasLinkNodes)
         return;
     /*
      * Scan the labels overlays array and hide the nodes displays.
      */
     for (var i = 0; i < labelsOverlays.length; i++) {
         labelsOverlays[i].style.visibility = "hidden";
     }
 }
 /*
  * Display overlays again
  * ----------------------
  */
 function redisplayOverlays() {
     showOverlays( curLabelHead );
 }
 /*
  * Remove label overlays
  * ---------------------
  * Removes all labels overlays.
  *
  * NOTE: This invalidates the overlays and should not be called out of context.
  */
 function removeOverlays() {
     /*
      * Do nothing if there are no overlays at all.
      */
     if (! hasLinkNodes) {
         return;
     }
     /*
      * Track the labels overlays array and remove the node elements kept from
      * their parents.
      */
     var curNode;
     for (var i = 0; i < labelsOverlays.length; i++) {
         curNode = labelsOverlays[i];
         curNode.parentNode.removeChild(curNode);
     }
 }
 /*
  * Navigating
  * ==========
  */
 /*
  * Check if the label is valid.
  * ----------------------------
  * Checks if a label starting with the given digits sequence is known in the
  * nodeLabels array.
  *
  * @param   thisHead    head sequence of the label to check
  * @return  true        there are labels starting with this sequence
  *                      curLabelNum: number of first occurence found
  *          false       there are no such labels known
  *                      curLabelNum: -1
  */
 function isValidLabel( thisHead ) {
     if (thisHead == "") {
         curLabelNum = -1;
         return false;
     }
     var headLength = thisHead.length;
 
     for( var i = 0; i < nodeLabels.length; i++ ) {
         if (thisHead == nodeLabels[i].substring( 0, headLength )) {
             curLabelNum = i;
             return true;
         }
     }
     curLabelNum = -1;
     return false;
 }
 /*
  * Navigate by label
  * -----------------
  * Process the current key to find an according link label and perform the
  * proper action there.
  */
 function navigateByLabel() {
     if (waitForConfirmation) {
         /*
          * We found a match but the user must tell what to do with it.
          */
         if (keyLabel == openInThisTab) {
             openNewTab = false;
             waitForConfirmation = false;
             clickLabel( matchingLabelNum );
         }
         else if (keyLabel == openInNewTab) {
             openNewTab = true;
             waitForConfirmation = false;
             clickLabel( matchingLabelNum );
         }
         else if (keyCode == 0x08) { // backspace
             waitForConfirmation = false;
             matchingLabelNum = -1;  // removes the match in any case
             /*
              * Remove trailing character from the selection.
              */
             curLabelHead =
                 curLabelHead.substring( 0,
                     curLabelHead.length - 1 );
             showOverlays( curLabelHead );
         }
     }
     /*
      * We assume only numbers or ASCII characters will be used in labels.
      */
     else if (hasValidNavKey()) {
         if (isValidLabel( curLabelHead + keyLabel )) {
             /*
              * The key belongs to a valid label. Show the resulting
              * selection.
              */
             curLabelHead = curLabelHead + keyLabel;
             showOverlays( curLabelHead );
 
             if (matchingLabelNum != -1) {
                 /*
                  * We found a match.
                  */
                 if (autoselectLink) {
                     waitForConfirmation = false;
                     clickLabel( matchingLabelNum );
                 } else {
                     waitForConfirmation = true;
                     //clickLabel( matchingLabelNum );
                 }
                 keyAction = null;
                 return;
             }
         } else {
             /*
              * Simply skip the invalid entry.
              */
             keyAction = null;
             return;
         }
     }
     /*
      * If neither character or number, some other action, e.g. simple extra
      * navigation to properly show the labels in the viewport, may be
      * wanted.
      */
     else {
         if (keyCode == 0x08) { // backspace
             /*
              * Remove trailing character from the selection.
              */
             if (curLabelHead != "") {
                 matchingLabelNum = -1;  // removes the match in any case
                 curLabelHead =
                     curLabelHead.substring( 0,
                         curLabelHead.length - 1 );
                 waitForConfirmation = false;
                 showOverlays( curLabelHead );
             }
         }
         else {
             /*
              * Look up if there is some special action to perform.
              */
             keyAction = navKeyBindings[keyLabel];
         }
     }
 }
 /*
  * Simulate a Mouseclick
  * ---------------------
  *
  *  @param  labelPos    number of the label to be clicked on
  */
 function clickLabel( labelPos ) {
     var curElement = clickableNodes[ labelPos ];
     var curLabel = nodeLabels[ labelPos ];
     var curName = curElement.nodeName.toLowerCase();
 
     stopNavigating();
 
     if (curName == "a") {
         /*
          * It is a link. Just go there.
          */
         if (openNewTab) {
             openNewTab = false;
             window.open( curElement.getAttribute( "href" ), "", "" );
         } else {
             window.location = curElement.getAttribute("href");
         }
     }
     else if (curElement.hasAttribute("onclick")) {
         /*
          * This requires some more effort in order to trigger the attached
          * actions.
          * At first we need a special event to track mouse clicks.
          */
         var thisEvent = document.createEvent("MouseEvents");
         /*
          * Then the mouse click action needs to be defined.
          */
         thisEvent.initMouseEvent(
             "click",        // the event type
             true, true,     // allow bubbles and default action cancels
             window,         // this view's base
             0,              // mouse click count
             0, 0, 0, 0,     // screen and client coordinates
             false, false,   // no control or alt key depressed simultaneously
             false, false,   // ditto, shift or meta key
             0,              // mouse button
             null);          // no other related target
         /*
          * Finally get this known to the system.
          */
         curElement.dispatchEvent(thisEvent);
     }
     else if (curName == "input") {
         /*
          * There are several types of input elements which need be handled
          * differently.
          */
         var curType = curElement.getAttribute('type').toLowerCase();
 
         if (curType == 'text' || curType == 'file' || curType == 'password') {
             /*
              * These need be explicitely selected.
              */
             curElement.focus();
             curElement.select();
             curElement.click();
         } else {
             /*
              * It is a genuine input element.
              * This allows us to use the click() method.
              */
             curElement.click();
         }
     }
     else if (curName == 'textarea' || curName == 'select') {
         /*
          * Handle these like the special input element types.
          */
         curElement.focus();
         curElement.select();
     }
     else if (curElement.hasAttribute( "href" )) {
         /*
          * Handle a possible not detected link.
          */
         if (openNewTab) {
             openNewTab = false;
             window.open( curElement.getAttribute( "href" ), "", "" );
         } else {
             window.location = curElement.getAttribute("href");
         }
     }
     else {
         alert ("Could not click element " + curLabel +
                ": " + curName +
                "\nNo idea what to do with it." );
     }
 }
 /*
  * Start Navigating
  * ----------------
  */
 
 // If autoselecting, open in new tab.
 function startNavNewTab() {
     openNewTab = true;
     startNavigating();
 }
 
 // If autoselecting, open in current tab.
 function startNavigating() {
     navigating = true;
     waitForConfirmation = false;
 
     if (hasLinkNodes) {
         clearLinkInfo();
     }
     findClickableNodes();
     if (hasLinkNodes) {
         createOverlays();
         showOverlays("");
     } else {
         navigating = false;
         alert( "No clickable node found on this page." );
     }
 }
 /*
  * Stop Navigating
  * ---------------
  */
 function stopNavigating() {
     hideOverlays();
     navigating = false;
     clearLinkInfo();
 }
 
 /**************************
  *** Keyboard Interface ***
  **************************/
 
 /*
  * Check for an editable element
  * -----------------------------
  * @param element   DOM element to be checked
  * @return          true if element is editable
  *                  (i.e. shall receive all keys)
  *                  false otherwise.
  */
 function isEditable( element ) {
     if ( element.nodeName.toLowerCase() == "textarea" )
         return true;
     if ( element.nodeName.toLowerCase() == "input" &&
          ( element.type == "text" || element.type == "password" ) )
         return true;
     if ( document.designMode == "on" || element.contentEditable == "true" )
         return true;
     return false;
 }
 /*
  * The Keyboard Event Handlers
  * ===========================
  */
 /*
  * Evaluate the key in the given keyEvent
  * --------------------------------------
  * @param   keyEvent    event to evalute
  * @return  function pointer in the keyAction variable.
  */
 function evalKey( keyEvent ) {
     wndHeight = window.innerHeight - Math.max( window.innerHeight / 10, 2 );
 
     // Handle specific key codes.
     // NOTE: Might be device specific, not thoroughly tested.
     keyCode = keyEvent.keyCode;
     // Account for keypad (NumLock on).
     if ( keyCode >= 96 && keyCode <= 105 )
         // numbers
         keyCode -= 48;
     else if ( keyCode >= 106 && keyCode <= 110 )
         // operators and punctuation
         keyCode -= 64;
 
     // Convert to character representation.
     keyLabel = String.fromCharCode( keyCode );
     /*
      * We must explicitely process the shift key because the the keyCode
      * conversion will always return upper case.
      */
     if ( ! keyEvent.shiftKey && keyCode >= 32 )
         keyLabel = String.fromCharCode( keyCode ).toLowerCase();
     if ( keyEvent.ctrlKey )
         keyLabel = "^" + keyLabel;
     /*
      * Evaluate the action to be performed.
      */
     if (! navigating) {
         keyAction = keyBindings[keyLabel];
     }
     else {
         keyAction = navKeyBindings[keyLabel];
         /*
          * Any invalid input stops navigating.
          */
 //        if (! keyAction && ! hasValidNavKey() ) {
 //            stopNavigating();
 //        }
     }
 }
 /*
  * Check for a valid navigation key
  * --------------------------------
  * Checks the current keyLabel if it is a number or an ASCII character.
  *
  * @return  true if this is a valid navigation key.
  */
 function hasValidNavKey() {
     if (keyLabel >= "0" && keyLabel <= "9" ||
         keyLabel >= "a" && keyLabel <= "z" ||
         keyLabel >= "A" && keyLabel <= "Z") {
         return true;
     } else {
         return false;
     }
 }
 /*
  * Handle most keypresses here
  * ---------------------------
  * @param   keyEvent    event to evalute
  */
 function keyHandler( keyEvent ) {
     keyAction = null;
 
     if (navigating) {
         evalKey( keyEvent );
         navigateByLabel();
     }
     else {
         /*
          *  Skip targets which need keypresses by their own.
          */
         if (isEditable( keyEvent.target )) {
             return;
         }
         /*
          * The Esc key has been handled on key down already so skip it here.
          */
         if (keyEvent.keyCode == 0x1b) {
             return;
         }
         /*
          *  Evaluate the function the key is bound to and execute it.
          */
         evalKey( keyEvent );
     }
     /*
      * Now perform the pending command.
      */
     if (keyAction) {
         // Prevent double execution of repeatable commands.
         if ( keyAction != goLeft  &&
             keyAction != goRight &&
             keyAction != goUp    &&
             keyAction != goDown ) {
             keyAction();
         }
     }
 }
 /*
  * Handle repeatable keys
  * ----------------------
  * There are a few commands which may be repeatably executed.
  * They need be handled separately as auto-repeat works on downheld keys only.
  *
  * @param   keyEvent    event to evalute
  *
  * NOTE:
  * There is some (possible Midori related) bug where javascript appears to send
  * keys twice if NumLock is on. Hence we restrict this to small movements only.
  */
 function keyRepeatHandler( keyEvent ) {
     keyAction = null;
     /*
      * There is only one keydown action to perform if we are navigating
      * by labels.
      */
     if (navigating) {
         /*
          * The Esc key is a stop all feature.
          * Hence check for this one first.
          */
         if (keyEvent.keyCode == 0x1b) {
             stopNavigating();
             return;
         }
     }
     /*
      * Otherwise handle some special cases.
      */
     else {
         // Skip targets which need keypresses by their own.
         if (isEditable( keyEvent.target )) {
             return;
         }
     }
     /*
      * Evaluate the function the key is bound to and execute it.
      */
     evalKey( keyEvent );
     if (keyAction) {
         // Execute repeatable commands only.
         if (keyAction == goLeft  ||
             keyAction == goRight ||
             keyAction == goUp    ||
             keyAction == goDown ) {
             keyAction();
         }
     }
 }
 
 /*******************
  *** Script Body ***
  *******************/
 /*
  * Initialization
  * ==============
  */
 /*
  * Make sure to start in a clean state.
  */
 clearLinkInfo();
 wndHeightAdjust = 1;
 /*
  * Set up a static labels collation sequence according to the configuration.
  */
 if (collSequence == "numeric") {
     useSequence = "0123456789";
     useBase = 10;
 }
 else if (collSequence == "alpha") {
     useSequence = "abcdefghijklmnopqrstuvxyz";
     useBase = 25;
 }
 else if (collSequence == "longalpha") {
     // We use lower key characters first, then upper key ones
     // to ease the typing.
     useSequence = "abcdefghijklmnopqrstuvxyzABCDEFGHIJKLMNOPQRSTUVXYZ";
     useBase = 50;
 }
 else if (collSequence != "optimal") {
     useSequence = collSequence;
     useBase = collSequence.length;
 }
 /*
  * Register keyboard event handlers.
  */
 window.addEventListener( "keyup", keyHandler, false );
 window.addEventListener( "keydown", keyRepeatHandler, false );
 
 // ----------------------------------------------------------------------------
 // vim:shiftwidth=4:softtabstop=4:expandtab:textwidth=80