Spaces:

aletrn
/

driver.js

Running

kamrify commited on Mar 5, 2018

Commit

0c119f7

1 Parent(s): b1c5f8c

Refactoring

Files changed (4) hide show

.eslintrc.json CHANGED Viewed

@@ -9,6 +9,7 @@
     "no-plusplus": "off",
     "no-cond-assign": "off",
     "func-names": "off",
     "no-param-reassign": [
       "off"
     ],

     "no-plusplus": "off",
     "no-cond-assign": "off",
     "func-names": "off",
+    "no-bitwise": "off",
     "no-param-reassign": [
       "off"
     ],

assets/scripts/src/element.js CHANGED Viewed

@@ -4,10 +4,13 @@ export default class Element {
   /**
    * DOM element object
    * @param node
    */
-  constructor(node) {
-    this.element = node;
     this.document = document;
   }
   /**
@@ -15,7 +18,7 @@ export default class Element {
    * @returns {{x: number, y: number}}
    */
   getScreenCoordinates() {
-    let tempNode = this.element;
     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)) {
       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);
     }
     return position;

   /**
    * DOM element object
    * @param node
+   * @param options
    */
+  constructor(node, options) {
+    this.node = node;
     this.document = document;
+    this.window = window;
+    this.options = options;
   }
   /**
    * @returns {{x: number, y: number}}
    */
   getScreenCoordinates() {
+    let tempNode = this.node;
     let x = this.document.documentElement.offsetLeft;
     let y = this.document.documentElement.offsetTop;
     // 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.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.node.offsetWidth);
+      position.bottom = Math.max(position.bottom, coordinates.y + this.node.offsetHeight);
     }
     return position;

assets/scripts/src/sholo.js CHANGED Viewed

@@ -7,20 +7,16 @@ import './polyfill';
  */
 export default class Sholo {
   /**
-   * @param opacity number
-   * @param padding number
-   * @param animate boolean
    */
-  constructor({
-    opacity = 0.75,
-    padding = 10,
-    animate = true,
-  } = {}) {
-    this.overlay = new Overlay({
-      opacity,
-      padding,
-      animate,
-    });
     this.document = document;
     this.window = window;
@@ -89,7 +85,7 @@ export default class Sholo {
     }
     if (domElement) {
-      const element = new Element(domElement);
       this.overlay.highlight(element);
     } else {
       this.overlay.clear();

  */
 export default class Sholo {
   /**
+   * @param options
    */
+  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;
     }
     if (domElement) {
+      const element = new Element(domElement, this.options);
       this.overlay.highlight(element);
     } else {
       this.overlay.clear();

index.html CHANGED Viewed

@@ -9,7 +9,7 @@
 </head>
 <body>
 <div class="page-wrap">
-    <section class="section__header">
         <h1>Sholo</h1>
         <p class="text-muted">A light-weight, no-dependency, vanilla JavaScript library to bring certain parts of page in spotlight</p>
         <a href="#" class="btn btn__dark">Show an Example</a>
@@ -35,7 +35,7 @@
         <p>Here are some of the examples</p>
         <p>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!</p>
     </section>
-    <section>
         <h1>Contributing</h1>
         <p>Here are some of the examples</p>
         <p>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!</p>
@@ -45,7 +45,7 @@
 <script src="./assets/scripts/dist/sholo.js"></script>
 <script>
   const sholo = new Sholo({
-    animate: false,
     opacity: 0.8
   });
   sholo.highlight('.section__header');

 </head>
 <body>
 <div class="page-wrap">
+    <section class="section__header" data-sholo="Hey welcome to presenter!">
         <h1>Sholo</h1>
         <p class="text-muted">A light-weight, no-dependency, vanilla JavaScript library to bring certain parts of page in spotlight</p>
         <a href="#" class="btn btn__dark">Show an Example</a>
         <p>Here are some of the examples</p>
         <p>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!</p>
     </section>
+    <section class="section__contributing">
         <h1>Contributing</h1>
         <p>Here are some of the examples</p>
         <p>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!</p>
 <script src="./assets/scripts/dist/sholo.js"></script>
 <script>
   const sholo = new Sholo({
+    animate: true,
     opacity: 0.8
   });
   sholo.highlight('.section__header');