Refactoring

0c119f7e · Kamran Ahmed · b1c5f8c8 · 0c119f7e · 0c119f7e · 0c119f7e
Showing with 23 addition and 23 deletion

.eslintrc.json .eslintrc.json +1 -0

assets/scripts/src/element.js assets/scripts/src/element.js +9 -6

assets/scripts/src/sholo.js assets/scripts/src/sholo.js +10 -14

index.html index.html +3 -3

未找到文件。
--- 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"
    ],

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

--- 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();

--- a/index.html
+++ b/index.html
@@ -9,7 +9,7 @@
 </head>
 <body>
 <div class="page-wrap">
-    <section class="section__header">
+    <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>
@@ -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>
+    <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>
@@ -45,7 +45,7 @@
 <script src="./assets/scripts/dist/sholo.js"></script>
 <script>
  const sholo = new Sholo({
-    animate: false,
+    animate: true,
    opacity: 0.8
  });
  sholo.highlight('.section__header');