dom-highlight
Advanced tools
@@ -34,3 +34,3 @@ "use strict"; | ||
$el.style.visibility = 'visible'; | ||
this.$element.appendChild($el); | ||
document.getElementsByTagName('body')[0].appendChild($el); | ||
} | ||
@@ -67,23 +67,24 @@ this.draw(); | ||
for (const $el of this.highlightElements) { | ||
$el.style.position = 'fixed'; | ||
$el.style.position = 'absolute'; | ||
$el.style.backgroundColor = this.settings.strokeColor; | ||
$el.style.zIndex = '1000'; | ||
} | ||
// Left | ||
this.highlightElements[0].style.width = this.settings.strokeSize + 'px'; | ||
this.highlightElements[0].style.height = targetRect.height + 'px'; | ||
this.highlightElements[0].style.left = (targetRect.x + pageX) + 'px'; | ||
this.highlightElements[0].style.height = (targetRect.height + this.settings.strokeSize) + 'px'; | ||
this.highlightElements[0].style.left = (targetRect.x + pageX - this.settings.strokeSize) + 'px'; | ||
this.highlightElements[0].style.top = (targetRect.y + pageY) + 'px'; | ||
// Right | ||
this.highlightElements[2].style.width = this.settings.strokeSize + 'px'; | ||
this.highlightElements[2].style.height = targetRect.height + 'px'; | ||
this.highlightElements[2].style.height = (targetRect.height + this.settings.strokeSize) + 'px'; | ||
this.highlightElements[2].style.left = (targetRect.x + targetRect.width + pageX) + 'px'; | ||
this.highlightElements[2].style.top = (targetRect.y + pageY) + 'px'; | ||
this.highlightElements[2].style.top = (targetRect.y + pageY - this.settings.strokeSize) + 'px'; | ||
// Top | ||
this.highlightElements[1].style.height = this.settings.strokeSize + 'px'; | ||
this.highlightElements[1].style.width = targetRect.width + 'px'; | ||
this.highlightElements[1].style.left = (targetRect.x + pageX) + 'px'; | ||
this.highlightElements[1].style.top = (targetRect.y + pageY) + 'px'; | ||
this.highlightElements[1].style.width = (targetRect.width + this.settings.strokeSize) + 'px'; | ||
this.highlightElements[1].style.left = (targetRect.x + pageX - this.settings.strokeSize) + 'px'; | ||
this.highlightElements[1].style.top = (targetRect.y + pageY - this.settings.strokeSize) + 'px'; | ||
// Bottom | ||
this.highlightElements[3].style.height = this.settings.strokeSize + 'px'; | ||
this.highlightElements[3].style.width = targetRect.width + 'px'; | ||
this.highlightElements[3].style.width = (targetRect.width + this.settings.strokeSize) + 'px'; | ||
this.highlightElements[3].style.left = (targetRect.x + pageX) + 'px'; | ||
@@ -90,0 +91,0 @@ this.highlightElements[3].style.top = (targetRect.y + targetRect.height + pageY) + 'px'; |
{ | ||
"name": "dom-highlight", | ||
"version": "0.1.0", | ||
"version": "0.2.0", | ||
"description": "Highlight DOM elements simply", | ||
@@ -5,0 +5,0 @@ "main": "dist/index.js", |
@@ -42,3 +42,3 @@ import {IHighlightSettings} from './IHighlightSettings'; | ||
$el.style.visibility = 'visible'; | ||
this.$element.appendChild($el); | ||
document.getElementsByTagName('body')[0].appendChild($el); | ||
} | ||
@@ -86,4 +86,5 @@ | ||
for(const $el of this.highlightElements){ | ||
$el.style.position = 'fixed'; | ||
$el.style.position = 'absolute'; | ||
$el.style.backgroundColor = this.settings.strokeColor; | ||
$el.style.zIndex = '1000'; | ||
} | ||
@@ -93,4 +94,4 @@ | ||
this.highlightElements[0].style.width = this.settings.strokeSize + 'px'; | ||
this.highlightElements[0].style.height = targetRect.height + 'px'; | ||
this.highlightElements[0].style.left = (targetRect.x + pageX) + 'px'; | ||
this.highlightElements[0].style.height = (targetRect.height + this.settings.strokeSize) + 'px'; | ||
this.highlightElements[0].style.left = (targetRect.x + pageX - this.settings.strokeSize) + 'px'; | ||
this.highlightElements[0].style.top = (targetRect.y + pageY) + 'px'; | ||
@@ -100,15 +101,15 @@ | ||
this.highlightElements[2].style.width = this.settings.strokeSize + 'px'; | ||
this.highlightElements[2].style.height = targetRect.height + 'px'; | ||
this.highlightElements[2].style.height = (targetRect.height + this.settings.strokeSize) + 'px'; | ||
this.highlightElements[2].style.left = (targetRect.x + targetRect.width + pageX) + 'px'; | ||
this.highlightElements[2].style.top = (targetRect.y + pageY) + 'px'; | ||
this.highlightElements[2].style.top = (targetRect.y + pageY - this.settings.strokeSize) + 'px'; | ||
// Top | ||
this.highlightElements[1].style.height = this.settings.strokeSize + 'px'; | ||
this.highlightElements[1].style.width = targetRect.width + 'px'; | ||
this.highlightElements[1].style.left = (targetRect.x + pageX) + 'px'; | ||
this.highlightElements[1].style.top = (targetRect.y + pageY) + 'px'; | ||
this.highlightElements[1].style.width = (targetRect.width + this.settings.strokeSize) + 'px'; | ||
this.highlightElements[1].style.left = (targetRect.x + pageX - this.settings.strokeSize) + 'px'; | ||
this.highlightElements[1].style.top = (targetRect.y + pageY - this.settings.strokeSize) + 'px'; | ||
// Bottom | ||
this.highlightElements[3].style.height = this.settings.strokeSize + 'px'; | ||
this.highlightElements[3].style.width = targetRect.width + 'px'; | ||
this.highlightElements[3].style.width = (targetRect.width + this.settings.strokeSize) + 'px'; | ||
this.highlightElements[3].style.left = (targetRect.x + pageX) + 'px'; | ||
@@ -115,0 +116,0 @@ this.highlightElements[3].style.top = (targetRect.y + targetRect.height + pageY) + 'px'; |
13472
4.55%320
0.63%