opensource/driver.js
3
0
Fork 0
mirror of https://github.com/kamranahmedse/driver.js.git synced 2026-11-03 14:32:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

WIP - Remove canvas and use HTML/CSS

Browse Source
This commit is contained in:
Kamran Ahmed
2018-03-14 00:48:51 +01:00
parent dc1e1c1a1b
commit 24dfcae28f
2 changed files with 24 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/core/overlay.js
+12 -11
View File
@@ -102,10 +102,8 @@ export default class Overlay {
this.highlightedElement = null;
this.lastHighlightedElement = null;
this.pageOverlay.style.display = 'none';
this.pageOverlay.style.opacity = '0';
this.highlightStage.style.display = 'none';
this.draw();
}
/**
@@ -118,19 +116,22 @@ export default class Overlay {
return;
}
// Show the overlay
this.pageOverlay.style.display = 'block';
this.highlightStage.style.display = 'block';
// Make it two times the padding because, half will be given on left and half on right
const requiredPadding = this.options.padding * 2;
const elementSize = this.highlightedElement.getSize();
// Show the overlay
this.pageOverlay.style.opacity = `${this.options.opacity}`;
const width = (this.positionToHighlight.right - this.positionToHighlight.left) + (requiredPadding);
const height = (this.positionToHighlight.bottom - this.positionToHighlight.top) + (requiredPadding);
// Show the stage
this.highlightStage.style.display = 'block';
this.highlightStage.style.position = 'absolute';
this.highlightStage.style.width = `${elementSize.width + this.options.padding}px`;
this.highlightStage.style.height = `${elementSize.height + this.options.padding}px`;
this.highlightStage.style.top = `${this.positionToHighlight.top}px`;
this.highlightStage.style.left = `${this.positionToHighlight.left}px`;
this.highlightStage.style.width = `${width}px`;
this.highlightStage.style.height = `${height}px`;
this.highlightStage.style.top = `${this.positionToHighlight.top - (requiredPadding / 2)}px`;
this.highlightStage.style.left = `${this.positionToHighlight.left - (requiredPadding / 2)}px`;
// Element has been highlighted
this.highlightedElement.onHighlighted();
src/driver.scss
+12 -2
View File
@@ -108,16 +108,21 @@ div#driver-popover-item {
}
div#driver-page-overlay {
display: none;
display: block;
width: 100%;
height: 100%;
background: black;
top: 0;
left: 0;
position: fixed;
opacity: 0.7;
opacity: 0;
pointer-events: none;
z-index: 100002 !important;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
div#driver-highlighted-element-stage {
@@ -129,6 +134,11 @@ div#driver-highlighted-element-stage {
background: white;
z-index: 100003 !important;
display: none;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.driver-highlighted-element {