🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more

dom-highlight

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

dom-highlight - npm Package Compare versions

Comparing version

to
0.2.0

@@ -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';