diff options
| -rw-r--r-- | blinkelement.js | 92 | ||||
| -rw-r--r-- | highlight.js | 155 | ||||
| -rw-r--r-- | mouseinspect.js | 78 |
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; |