diff --git a/assets/scripts/src/overlay.js b/assets/scripts/src/overlay.js index da1b5a1e762bfd6a78d98a5c6d4b4580ffb7c79f..e23fe71587523ad546836d78f70c8b076922fe40 100644 --- a/assets/scripts/src/overlay.js +++ b/assets/scripts/src/overlay.js @@ -79,6 +79,14 @@ export default class Overlay { this.draw(); } + /** + * Returns the currently selected element + * @returns {null|*} + */ + getHighlightedElement() { + return this.highlightedElement; + } + /** * Removes the overlay and cancel any listeners */ diff --git a/assets/scripts/src/sholo.js b/assets/scripts/src/sholo.js index e6b0c89706e5d6605dbaaaf92be5fc4a7dd7869b..e166dd52ff25c862f20ff2f8ac27bf04d01d1b51 100644 --- a/assets/scripts/src/sholo.js +++ b/assets/scripts/src/sholo.js @@ -24,6 +24,7 @@ export default class Sholo { this.onScroll = this.onScroll.bind(this); this.onResize = this.onResize.bind(this); this.onKeyUp = this.onKeyUp.bind(this); + this.onMouseUp = this.onMouseUp.bind(this); // Event bindings this.bind(); @@ -38,6 +39,19 @@ export default class Sholo { this.document.addEventListener('DOMMouseScroll', this.onScroll, false); this.window.addEventListener('resize', this.onResize, false); this.window.addEventListener('keyup', this.onKeyUp, false); + this.window.addEventListener('mouseup', this.onMouseUp, false); + } + + onMouseUp(e) { + const highlightedElement = this.overlay.getHighlightedElement(); + if (!highlightedElement || !highlightedElement.node) { + return; + } + + // Remove the overlay If clicked outside the highlighted element + if (!highlightedElement.node.contains(e.target)) { + this.overlay.clear(); + } } /** diff --git a/index.html b/index.html index a271f70147e9a9835cc926715dcf863cfa55aff2..e2b0cf31b4cda763b85d661e724ace498cc185f0 100644 --- a/index.html +++ b/index.html @@ -46,7 +46,8 @@