diff options
Diffstat (limited to 'lib/dom_utils.js')
| -rw-r--r-- | lib/dom_utils.js | 121 | 
1 files changed, 121 insertions, 0 deletions
| diff --git a/lib/dom_utils.js b/lib/dom_utils.js new file mode 100644 index 00000000..4ab92682 --- /dev/null +++ b/lib/dom_utils.js @@ -0,0 +1,121 @@ +var domUtils = { +  /** +   * Runs :callback if the DOM has loaded, otherwise runs it on load +   */ +  documentReady: (function() { +    var loaded = false; +    window.addEventListener("DOMContentLoaded", function() { loaded = true; }); +    return function(callback) { +      if (loaded) +        callback(); +      else +        window.addEventListener("DOMContentLoaded", callback); +    }; +  })(), + +  /* +   * Takes an array of XPath selectors, adds the necessary namespaces (currently only XHTML), and applies them +   * to the document root. The namespaceResolver in evaluateXPath should be kept in sync with the namespaces +   * here. +   */ +  makeXPath: function(elementArray) { +    var xpath = []; +    for (var i in elementArray) +      xpath.push("//" + elementArray[i], "//xhtml:" + elementArray[i]); +    return xpath.join(" | "); +  }, + +  evaluateXPath: function(xpath, resultType) { +    function namespaceResolver(namespace) { +      return namespace == "xhtml" ? "http://www.w3.org/1999/xhtml" : null; +    } +    return document.evaluate(xpath, document.documentElement, namespaceResolver, resultType, null); +  }, + +  /** +   * Returns the first visible clientRect of an element if it exists. Otherwise it returns null. +   */ +  getVisibleClientRect: function(element) { +    // Note: this call will be expensive if we modify the DOM in between calls. +    var clientRects = element.getClientRects(); +    var clientRectsLength = clientRects.length; + +    for (var i = 0; i < clientRectsLength; i++) { +      if (clientRects[i].top < -2 || clientRects[i].top >= window.innerHeight - 4 || +          clientRects[i].left < -2 || clientRects[i].left  >= window.innerWidth - 4) +        continue; + +      if (clientRects[i].width < 3 || clientRects[i].height < 3) +        continue; + +      // eliminate invisible elements (see test_harnesses/visibility_test.html) +      var computedStyle = window.getComputedStyle(element, null); +      if (computedStyle.getPropertyValue('visibility') != 'visible' || +          computedStyle.getPropertyValue('display') == 'none') +        continue; + +      return clientRects[i]; +    } + +    for (var i = 0; i < clientRectsLength; i++) { +      // If the link has zero dimensions, it may be wrapping visible +      // but floated elements. Check for this. +      if (clientRects[i].width == 0 || clientRects[i].height == 0) { +        for (var j = 0, childrenCount = element.children.length; j < childrenCount; j++) { +          var computedStyle = window.getComputedStyle(element.children[j], null); +          // Ignore child elements which are not floated and not absolutely positioned for parent elements with zero width/height +          if (computedStyle.getPropertyValue('float') == 'none' && computedStyle.getPropertyValue('position') != 'absolute') +            continue; +          var childClientRect = this.getVisibleClientRect(element.children[j]); +          if (childClientRect === null) +            continue; +          return childClientRect; +        } +      } +    }; +    return null; +  }, + +  /* +   * Selectable means the element has a text caret; this is not the same as "focusable". +   */ +  isSelectable: function(element) { +    var selectableTypes = ["search", "text", "password"]; +    return (element.nodeName.toLowerCase() == "input" && selectableTypes.indexOf(element.type) >= 0) || +        element.nodeName.toLowerCase() == "textarea"; +  }, + +  simulateSelect: function(element) { +    element.focus(); +    // When focusing a textbox, put the selection caret at the end of the textbox's contents. +    element.setSelectionRange(element.value.length, element.value.length); +  }, + +  simulateClick: function(element, modifiers) { +    modifiers = modifiers || {}; + +    var eventSequence = [ "mouseover", "mousedown", "mouseup", "click" ]; +    for (var i = 0; i < eventSequence.length; i++) { +      var event = document.createEvent("MouseEvents"); +      event.initMouseEvent(eventSequence[i], true, true, window, 1, 0, 0, 0, 0, modifiers.ctrlKey, false, false, +                           modifiers.metaKey, 0, null); +      // Debugging note: Firefox will not execute the element's default action if we dispatch this click event, +      // but Webkit will. Dispatching a click on an input box does not seem to focus it; we do that separately +      element.dispatchEvent(event); +    } +  }, + +  // momentarily flash a rectangular border to give user some visual feedback +  flashRect: function(rect) { +    var flashEl = document.createElement("div"); +    flashEl.id = "vimiumFlash"; +    flashEl.className = "vimiumReset"; +    flashEl.style.left = rect.left + window.scrollX + "px"; +    flashEl.style.top = rect.top  + window.scrollY  + "px"; +    flashEl.style.width = rect.width + "px"; +    flashEl.style.height = rect.height + "px"; +    document.body.appendChild(flashEl); +    setTimeout(function() { flashEl.parentNode.removeChild(flashEl); }, 400); +  }, + +}; | 
