From 0c119f7ea142f764ffca32fa61188ad47c2ba7a8 Mon Sep 17 00:00:00 2001 From: Kamran Ahmed Date: Tue, 6 Mar 2018 00:03:36 +0100 Subject: [PATCH] Refactoring --- .eslintrc.json | 1 + assets/scripts/src/element.js | 15 +++++++++------ assets/scripts/src/sholo.js | 24 ++++++++++-------------- index.html | 6 +++--- 4 files changed, 23 insertions(+), 23 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index 7884d64..ad62427 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -9,6 +9,7 @@ "no-plusplus": "off", "no-cond-assign": "off", "func-names": "off", + "no-bitwise": "off", "no-param-reassign": [ "off" ], diff --git a/assets/scripts/src/element.js b/assets/scripts/src/element.js index 0295a04..dbffd6b 100644 --- a/assets/scripts/src/element.js +++ b/assets/scripts/src/element.js @@ -4,10 +4,13 @@ export default class Element { /** * DOM element object * @param node + * @param options */ - constructor(node) { - this.element = node; + constructor(node, options) { + this.node = node; this.document = document; + this.window = window; + this.options = options; } /** @@ -15,7 +18,7 @@ export default class Element { * @returns {{x: number, y: number}} */ getScreenCoordinates() { - let tempNode = this.element; + let tempNode = this.node; let x = this.document.documentElement.offsetLeft; let y = this.document.documentElement.offsetTop; @@ -45,11 +48,11 @@ export default class Element { // If we have the position for this element // and the element is visible on screen (has some height) - if (typeof coordinates.x === 'number' && typeof coordinates.y === 'number' && (this.element.offsetWidth > 0 || this.element.offsetHeight > 0)) { + if (typeof coordinates.x === 'number' && typeof coordinates.y === 'number' && (this.node.offsetWidth > 0 || this.node.offsetHeight > 0)) { position.left = Math.min(position.left, coordinates.x); position.top = Math.min(position.top, coordinates.y); - position.right = Math.max(position.right, coordinates.x + this.element.offsetWidth); - position.bottom = Math.max(position.bottom, coordinates.y + this.element.offsetHeight); + position.right = Math.max(position.right, coordinates.x + this.node.offsetWidth); + position.bottom = Math.max(position.bottom, coordinates.y + this.node.offsetHeight); } return position; diff --git a/assets/scripts/src/sholo.js b/assets/scripts/src/sholo.js index 94fdc12..e6b0c89 100644 --- a/assets/scripts/src/sholo.js +++ b/assets/scripts/src/sholo.js @@ -7,20 +7,16 @@ import './polyfill'; */ export default class Sholo { /** - * @param opacity number - * @param padding number - * @param animate boolean + * @param options */ - constructor({ - opacity = 0.75, - padding = 10, - animate = true, - } = {}) { - this.overlay = new Overlay({ - opacity, - padding, - animate, - }); + constructor(options = {}) { + this.options = Object.assign({ + padding: 10, + animate: true, + opacity: 0.75, + }, options); + + this.overlay = new Overlay(options); this.document = document; this.window = window; @@ -89,7 +85,7 @@ export default class Sholo { } if (domElement) { - const element = new Element(domElement); + const element = new Element(domElement, this.options); this.overlay.highlight(element); } else { this.overlay.clear(); diff --git a/index.html b/index.html index 7de27c9..a271f70 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,7 @@
-
+

Sholo

A light-weight, no-dependency, vanilla JavaScript library to bring certain parts of page in spotlight

Show an Example @@ -35,7 +35,7 @@

Here are some of the examples

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda, at consectetur cupiditate inventore ipsa molestias, natus nulla odit optio pariatur perspiciatis, quae quam quasi quibusdam recusandae repellendus reprehenderit tempora!

-
+

Contributing

Here are some of the examples

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda, at consectetur cupiditate inventore ipsa molestias, natus nulla odit optio pariatur perspiciatis, quae quam quasi quibusdam recusandae repellendus reprehenderit tempora!

@@ -45,7 +45,7 @@