Merge pull request #43 from MarceloZapatta/feat/allow-element-constructor

feat: accept HTMLElement or string on the constructor

Author: Masth0

build/scratchcard.js

@@ -18,7 +18,7 @@
     <script type="text/javascript">
         window.addEventListener('load', function () {
           var scContainer = document.getElementById('js--sc--container');
-          var sc = new ScratchCard('#js--sc--container', {
+          var sc = new ScratchCard(scContainer, {
             enabledPercentUpdate: true,
             scratchType: SCRATCH_TYPE.LINE,
             // brushSrc: './images/brush.png',

build/scratchcard.min.js

@@ -23,6 +23,10 @@ and pick in the folder **./build** the file **scratchard.min.js**
 import {ScratchCard, SCRATCH_TYPE} from 'scratchcard-js'
 
 const scContainer = document.getElementById('js--sc--container')
+
+// You also can pass HTML Element or a string for querySelector
+// new ScratchCard(htmlElement...
+
 const sc = new ScratchCard('#js--sc--container', {
   scratchType: SCRATCH_TYPE.SPRAY,
   containerWidth: scContainer.offsetWidth,

dist/index.html

@@ -18,7 +18,7 @@ class ScratchCard {
   public zone: {top: number, left: number};
   public percent: number;
 
-  constructor (selector: string, config: SC_CONFIG) {
+  constructor (selector: string|HTMLElement, config: SC_CONFIG) {
     const self = this;
     const defaults = {
       scratchType: SCRATCH_TYPE.LINE,
@@ -40,7 +40,10 @@ class ScratchCard {
 
     this.config = {...defaults, ...config};
     this.scratchType = this.config.scratchType;
-    this.container = <HTMLElement> document.querySelector(selector);
+    this.container = <HTMLElement> (
+      this.isString(selector) ? 
+        document.querySelector(String(selector)) : selector
+      );
     this.position = [0, 0]; // init position
     this.readyToClear = false;
     this.percent = 0;
@@ -125,6 +128,16 @@ class ScratchCard {
     }, 16));
   }
 
+
+  /**
+   * Check if selector is a string
+   * @param selector 
+   * @returns {boolean}
+   */
+  isString(selector: string|HTMLElement): boolean {
+    return (typeof selector === 'string' || selector instanceof String)
+  }
+
   /**
    * Get percent of scratchCard
    * @returns {number}