cut off Highlighter object to highlight.js.

bugfix: the process to compute absolute coordinate.

git-svn-id: http://svn.coderepos.org/share/lang/javascript/vimperator-plugins/trunk@24716 d0d07461-0603-4401-acd4-de1884942a52

3 files changed, 221 insertions, 104 deletions

diff --git a/blinkelement.js b/blinkelement.js
index 4993f84..87a9515 100644
--- a/blinkelement.js
+++ b/blinkelement.js
@@ -4,12 +4,15 @@
  * @description     blink specified elements.
  * @description-ja  指定した要素を点滅させる。
  * @author          janus_wel <janus_wel@fb3.so-net.ne.jp>
- * @version         0.21
+ * @version         0.30
  * @minversion      2.0pre 2008/10/16
  * ==/VimperatorPlugin==
  *
  * LICENSE
- *   New BSD License
+ *  New BSD License
+ *
+ * CONSTRAINT
+ *  need highlight.js
  *
  * USAGE
  *  :blink {element[s] object}
@@ -37,52 +40,24 @@
 
 ( function () {
 
-const interval = liberator.globalVariables.blink_element_interval || 800;
-const color = liberator.globalVariables.blink_element_color || 'red';
-const opacity = liberator.globalVariables.blink_element_opacity || 0.5;
-
-function setBlink(element) {
-    let doc = content.document;
-    let [top, left] = getAbsoluteCoodinate(element);
-    let div = doc.createElement('div');
-    div.className = 'vimp_plugin_blinkelement';
-
-    div.style.position = 'absolute';
-    div.style.display = 'block';
-    div.style.zIndex = 2147483647;
-    div.style.top    = top + 'px';
-    div.style.left   = left + 'px';
-    div.style.width  = element.offsetWidth + 'px';
-    div.style.height = element.offsetHeight + 'px';
-    div.style.backgroundColor = color;
-    div.style.opacity    = opacity;
-    div.style.MozOpacity = opacity;
-
-    div.intervalId = setInterval(
-        function () {
-            let d = div.style.display;
-            div.style.display = (d === 'block' ? 'none' : 'block');
-        },
-        interval
-    );
-
-    doc.body.appendChild(div);
-}
+// default settings
+const defaultColor    = 'red';
+const defaultOpacity  = 0.5;
+const defaultInterval = 800;
 
-function getAbsoluteCoodinate(element) {
-    let top = 0, left = 0;
-    do {
-        top  += element.offsetTop;
-        left += element.offsetLeft;
-    } while (element = element.offsetParent);
-    return [top, left];
-}
-
-function clearBlink(element) {
-    if (element.intervalId) clearInterval(element.intervalId);
-    element.parentNode.removeChild(element);
-}
+// use setTimeout to synchronize ( wait to process highlight.js )
+// "liberator.modules.plugins.highlighterFactory" is build by highlight.js .
+// it is the factory that build highlight object.
+let highlighter;
+setTimeout( function () {
+    highlighter = liberator.modules.plugins.highlighterFactory({
+        color:    liberator.globalVariables.blink_element_color    || defaultColor,
+        opacity:  liberator.globalVariables.blink_element_opacity  || defaultOpacity,
+        interval: liberator.globalVariables.blink_element_interval || defaultInterval,
+    });
+}, 0);
 
+// register commands
 commands.addUserCommand(
     ['blink', 'bl'],
     'blink',
@@ -102,14 +77,26 @@ commands.addUserCommand(
             return;
         }
 
+        liberator.log(highlighter, 0);
+
+        // reflect settings ( follow dynamic change of settings )
+        highlighter.set({
+            color:    liberator.globalVariables.blink_element_color    || defaultColor,
+            opacity:  liberator.globalVariables.blink_element_opacity  || defaultOpacity,
+            interval: liberator.globalVariables.blink_element_interval || defaultInterval,
+        });
+
+        // for getElement[s]By...
         if (element instanceof HTMLCollection) {
-            for (let [, e] in Iterator(element)) setBlink(e);
+            for (let [, e] in Iterator(element)) highlighter.highlight(e);
         }
+        // for evaluate
         else if (element instanceof XPathResult) {
-            for (let e in element) setBlink(e);
+            for (let e in element) highlighter.highlight(e);
         }
-        else if ('style' in element) {
-            setBlink(element);
+        // single element
+        else if (element) {
+            highlighter.highlight(element);
         }
         else {
             liberator.echoerr('specify element[s]');
@@ -123,10 +110,7 @@ commands.addUserCommand(
 commands.addUserCommand(
     ['noblink', 'nobl'],
     'no blink',
-    function () {
-        let divs = buffer.evaluateXPath('//div[contains(concat(" ", @class, " "), " vimp_plugin_blinkelement ")]');
-        for (let d in divs) clearBlink(d);
-    },
+    function () highlighter.unhighlightAll(),
     {}
 );
 
diff --git a/highlight.js b/highlight.js
new file mode 100644
index 0000000..9329ce9
--- /dev/null
+++ b/highlight.js
@@ -0,0 +1,155 @@
+/*
+ * ==VimperatorPlugin==
+ * @name            highlight.js
+ * @description     Factory for the object to highlight specified element[s]. this set in plugins.highlighterFactory.
+ * @description-ja  指定した要素をハイライトするオブジェクトを返す Factory 。 plugins.highlighterFactory に構築される。
+ * @author          janus_wel <janus_wel@fb3.so-net.ne.jp>
+ * @version         0.10
+ * @minversion      2.0pre 2008/10/16
+ * ==/VimperatorPlugin==
+ *
+ * LICENSE
+ *  New BSD License
+ *
+ * USAGE
+ *  plugins.highlighterFactory() return the object to highlight element[s].
+ *  arguments is object that have below properties.
+ *      color:    color name that define by css or RGB format ( #xxxxxx ),
+ *      opacity:  opacity for -moz-opacity property in css.
+ *      interval: interval to blink ( unit: msec ). if 0 specified, not blink.
+ *
+ *  returned object has 3 methods.
+ *      set:            setter that accept object have above properties.
+ *      highlight:      method to highlight specified element.
+ *      unhighlightAll: unhighlight all.
+ *
+ *  highlight is implement by "div" element that have style "position: absolute;".
+ *  it has class name "vimp_plugin_highlightelement", so you should use buffer.evaluateXPath
+ *  with query that like '//div[contains(concat(" ", @class, " "), " vimp_plugin_highlightelement ")]'
+ *  when you want to process elements to highlight.
+ *
+ * EXAMPLE
+ *  let h = plugins.highlighterFactory({
+ *      color:    '#0080ff',
+ *      opacity:  0.7,
+ *      interval: 0,
+ *  );
+ *  h.highlight(content.document.getElementsByTagName('A'));
+ *  h.unhighlightAll();
+ *
+ * TODO
+ *  need valid English.
+ * */
+
+( function () {
+
+const fixedStyle = [
+    'position: absolute;',
+    'display:  block;',
+    'z-index:  2147483647;',
+].join('');
+
+// class definition
+function Highlighter() {
+    this._initialize.apply(this, arguments);
+}
+Highlighter.prototype = {
+    _initialize: function (args) {
+        if (args) this.set(args);
+        this.highlightList = [];
+    },
+
+    set: function (args) {
+        this.color    = args.color;
+        this.opacity  = args.opacity;
+        this.interval = args.interval;
+
+        this._prepareTemplate();
+
+        return this;
+    },
+
+    _prepareTemplate: function () {
+        let div = window.document.createElement('div');
+        div.className = 'vimp_plugin_highlightelement';
+
+        let style = fixedStyle + [
+            'background-color: ' + this.color + ';',
+            '-moz-opacity: ' + this.opacity + ';'
+        ].join('');
+        div.setAttribute('style', style);
+
+        this._highlightTemplate = div;
+    },
+
+    highlight: function (element) {
+        if (!this._isDisplay(element)) return;
+
+        let doc = content.document;
+        let scrollX = doc.defaultView.scrollX;
+        let scrollY = doc.defaultView.scrollY;
+
+        let rects = element.getClientRects();
+        for (let i=0, l=rects.length ; i<l ; ++i) {
+            let r = rects[i];
+            let h = this._buildHighlighter({
+                top:    r.top + scrollY,
+                left:   r.left + scrollX,
+                width:  r.right - r.left,
+                height: r.bottom - r.top,
+            });
+            this.highlightList.push(h);
+            doc.body.appendChild(h);
+        }
+    },
+
+    _unhighlight: function (element) {
+        if (element.intervalId) clearInterval(element.intervalId);
+        element.parentNode.removeChild(element);
+    },
+
+    unhighlightAll: function () {
+        let list = this.highlightList;
+        while (list.length) this._unhighlight(list.pop());
+    },
+
+    _isDisplay: function (element) {
+        let computedStyle = content.document.defaultView.getComputedStyle(element, null);
+        return (   computedStyle.getPropertyValue('visibility') !== 'hidden'
+                && computedStyle.getPropertyValue('display')    !== 'none');
+    },
+
+    _buildHighlighter: function (rect) {
+        let div = this._highlightTemplate.cloneNode(false);
+        div.style.top    = rect.top + 'px';
+        div.style.left   = rect.left + 'px';
+        div.style.width  = rect.width + 'px';
+        div.style.height = rect.height + 'px';
+
+        if (this.interval > 0) {
+            div.intervalId = setInterval(
+                function () {
+                    let d = div.style.display;
+                    div.style.display = (d === 'block' ? 'none' : 'block');
+                },
+                this.interval
+            );
+        }
+        else {
+            div.intervalId = undefined;
+        }
+
+        return div;
+    },
+};
+
+if (!plugins.highlighterFactory) {
+    plugins.highlighterFactory = function () {
+        let h = new Highlighter();
+        return h.set.apply(h, arguments);
+    }
+}
+
+} )();
+
+// vim: set sw=4 ts=4 et;
diff --git a/mouseinspect.js b/mouseinspect.js
index ceb5fc0..5a3c1e3 100644
--- a/mouseinspect.js
+++ b/mouseinspect.js
@@ -4,13 +4,16 @@
  * @description     display informations of the specified element and highlight it by mouse.
  * @description-ja  マウスで指定した要素の情報をコマンドラインに表示＆ハイライトする。
  * @author          janus_wel <janus_wel@fb3.so-net.ne.jp>
- * @version         0.11
+ * @version         0.20
  * @minversion      2.0pre 2008/10/16
  * ==/VimperatorPlugin==
  *
  * LICENSE
  *   New BSD License
  *
+ * CONSTRAINT
+ *  need highlight.js
+ *
  * USAGE
  *  :mouseinspect
  *  :mins
@@ -31,66 +34,39 @@
 
 ( function () {
 
-const color = liberator.globalVariables.mouse_inspect_color || 'red';
-const opacity = liberator.globalVariables.mouse_inspect_opacity || 0.5;
-let divList = [];
-
-function unhighlight() {
-    let divs = buffer.evaluateXPath('//div[contains(concat(" ", @class, " "), " vimp_plugin_mouse ")]');
-    while (divList.length) {
-        let d = divList.pop();
-        d.parentNode.removeChild(d);
-    }
-}
-
-function highlight(element) {
-    let doc = content.document;
-    let div = doc.createElement('div');
-    let [top, left] = getAbsoluteCoodinate(element);
-    div.className = 'vimp_plugin_mouse';
-
-    div.style.position = 'absolute';
-    div.style.display = 'block';
-    div.style.zIndex = 2147483647;
-    div.style.top    = top + 'px';
-    div.style.left   = left + 'px';
-    div.style.width  = element.offsetWidth + 'px';
-    div.style.height = element.offsetHeight + 'px';
-    div.style.backgroundColor = color;
-    div.style.opacity    = opacity;
-    div.style.MozOpacity = opacity;
-    div.ignore = true;
-
-    divList.push(div);
-    doc.body.appendChild(div);
-}
-
-function getAbsoluteCoodinate(element) {
-    let top = 0, left = 0;
-    do {
-        top  += element.offsetTop;
-        left += element.offsetLeft;
-    } while (element = element.offsetParent);
-    return [top, left];
-}
+// default settings
+const defaultColor   = 'red';
+const defaultOpacity = 0.5;
 
-function elementInfo(event) {
+// main
+let elementInfo = function (event) {
     let element = event.target;
-    if (element.ignore) {
-        unhighlight();
+
+    if (element.className === 'vimp_plugin_highlightelement') {
+        elementInfo.highlighter.unhighlightAll();
         return;
     }
 
     let attributes = [a.name + '="' + a.value + '"' for (a in util.Array.iterator(element.attributes))].join(' ');
     let str = '<' + element.localName.toLowerCase() + (attributes ? ' ' + attributes : '') + '>';
-    highlight(element);
     liberator.echo(str, commandline.FORCE_SINGLELINE);
-}
 
+    elementInfo.highlighter.highlight(element);
+};
+
+// register commands
 commands.addUserCommand(
     ['mouseinspect', 'mins'],
     'mouse',
-    function () { window.addEventListener('mousemove', elementInfo, false); },
+    function () {
+        elementInfo.highlighter = liberator.modules.plugins.highlighterFactory({
+            color:    liberator.globalVariables.mouse_inspect_color   || defaultColor,
+            opacity:  liberator.globalVariables.mouse_inspect_opacity || defaultOpacity,
+            interval: 0,
+        });
+
+        window.addEventListener('mousemove', elementInfo, false);
+    },
     {}
 );
 commands.addUserCommand(
@@ -98,8 +74,10 @@ commands.addUserCommand(
     'mouse',
     function () {
         window.removeEventListener('mousemove', elementInfo, false);
-        unhighlight();
+        elementInfo.highlighter.unhighlightAll();
     },
     {}
 );
 } )()
+
+// vim: set sw=4 ts=4 et;