feat: accept HTMLElement or string on the constructor

Author: MarceloZapatta

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,8 @@ class ScratchCard {
 
     this.config = {...defaults, ...config};
     this.scratchType = this.config.scratchType;
-    this.container = <HTMLElement> document.querySelector(selector);
+    this.container = selector instanceof HTMLElement ? 
+      selector : document.querySelector(String(selector));
     this.position = [0, 0]; // init position
     this.readyToClear = false;
     this.percent = 0;