From b076b60c7c3b20dd6c586a47a8f7b4c1742efa5b Mon Sep 17 00:00:00 2001
From: Jordan Becker <jordanbeckerfr@gmail.com>
Date: Sat, 13 Feb 2021 17:34:02 +0100
Subject: [PATCH] Use previousElementSibling instead of querySelector to get
 canvas node reference

This prevents crashes when previous elements of the page share the same
class as the defined canvasClass.

Fixes #23
---
 dist/js/index.js     | 2 +-
 dist/js/index.min.js | 2 +-
 src/js/index.js      | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/dist/js/index.js b/dist/js/index.js
index 4bd668b..d779c11 100644
--- a/dist/js/index.js
+++ b/dist/js/index.js
@@ -33,7 +33,7 @@
   var setCaptcha = function setCaptcha($el, options, shouldReset) {
     if (!shouldReset) {
       $el.insertAdjacentHTML('beforebegin', "<canvas class=\"".concat(options.canvasClass, "\"\n                    width=\"").concat(options.canvasStyle.width, "\" height=\"").concat(options.canvasStyle.height, "\">\n                </canvas>\n            "));
-      this.$captchaEl = document.querySelector(".".concat(options.canvasClass));
+      this.$captchaEl = $el.previousElementSibling;
       this.$captchaTextContext = this.$captchaEl.getContext('2d');
       this.$captchaTextContext = Object.assign(this.$captchaTextContext, options.canvasStyle);
     }
diff --git a/dist/js/index.min.js b/dist/js/index.min.js
index 3a50a54..0d0e7fd 100644
--- a/dist/js/index.min.js
+++ b/dist/js/index.min.js
@@ -1 +1 @@
-!function(t,e){void 0===t&&void 0!==window&&(t=window),"function"==typeof define&&define.amd?define([],function(){return t.jCaptcha=e()}):"object"==typeof module&&module.exports?module.exports=e():t.jCaptcha=e()}(this,function(){"use strict";function t(){i=Math.round(8*Math.random())+1,n=Math.round(8*Math.random())+1,c=i+n}function e(t,e,a){a||(t.insertAdjacentHTML("beforebegin",'<canvas class="'.concat(e.canvasClass,'"\n                    width="').concat(e.canvasStyle.width,'" height="').concat(e.canvasStyle.height,'">\n                </canvas>\n            ')),this.$captchaEl=document.querySelector(".".concat(e.canvasClass)),this.$captchaTextContext=this.$captchaEl.getContext("2d"),this.$captchaTextContext=Object.assign(this.$captchaTextContext,e.canvasStyle)),this.$captchaTextContext.clearRect(0,0,e.canvasStyle.width,e.canvasStyle.height),this.$captchaTextContext.fillText("".concat(i," + ").concat(n," ").concat(e.requiredValue),0,0)}function a(t){var e=0<arguments.length&&void 0!==t?t:{};this.options=Object.assign({},{el:".jCaptcha",canvasClass:"jCaptchaCanvas",requiredValue:"*",resetOnError:!0,focusOnError:!0,clearOnSubmit:!0,callback:null,canvasStyle:{}},e),this._init()}var c,i,n,s=0;return a.prototype={_init:function(){this.$el=document.querySelector(this.options.el),t(),e.call(this,this.$el,this.options)},validate:function(){s++,this.callbackReceived=this.callbackReceived||"function"==typeof this.options.callback,this.$el.value!=c?(this.callbackReceived&&this.options.callback("error",this.$el,s),!0===this.options.resetOnError&&this.reset(),!0===this.options.focusOnError&&this.$el.focus()):this.callbackReceived&&this.options.callback("success",this.$el,s),!0===this.options.clearOnSubmit&&(this.$el.value="")},reset:function(){t(),e.call(this,this.$el,this.options,!0)}},a});
\ No newline at end of file
+!function(t,e){void 0===t&&void 0!==window&&(t=window),"function"==typeof define&&define.amd?define([],function(){return t.jCaptcha=e()}):"object"==typeof module&&module.exports?module.exports=e():t.jCaptcha=e()}(this,function(){"use strict";function t(){c=Math.round(8*Math.random())+1,n=Math.round(8*Math.random())+1,i=c+n}function e(t,e,a){a||(t.insertAdjacentHTML("beforebegin",'<canvas class="'.concat(e.canvasClass,'"\n                    width="').concat(e.canvasStyle.width,'" height="').concat(e.canvasStyle.height,'">\n                </canvas>\n            ')),this.$captchaEl=t.previousElementSibling,this.$captchaTextContext=this.$captchaEl.getContext("2d"),this.$captchaTextContext=Object.assign(this.$captchaTextContext,e.canvasStyle)),this.$captchaTextContext.clearRect(0,0,e.canvasStyle.width,e.canvasStyle.height),this.$captchaTextContext.fillText("".concat(c," + ").concat(n," ").concat(e.requiredValue),0,0)}function a(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{};this.options=Object.assign({},{el:".jCaptcha",canvasClass:"jCaptchaCanvas",requiredValue:"*",resetOnError:!0,focusOnError:!0,clearOnSubmit:!0,callback:null,canvasStyle:{}},t),this._init()}var i,c,n,s=0;return a.prototype={_init:function(){this.$el=document.querySelector(this.options.el),t(),e.call(this,this.$el,this.options)},validate:function(){s++,this.callbackReceived=this.callbackReceived||"function"==typeof this.options.callback,this.$el.value!=i?(this.callbackReceived&&this.options.callback("error",this.$el,s),!0===this.options.resetOnError&&this.reset(),!0===this.options.focusOnError&&this.$el.focus()):this.callbackReceived&&this.options.callback("success",this.$el,s),!0===this.options.clearOnSubmit&&(this.$el.value="")},reset:function(){t(),e.call(this,this.$el,this.options,!0)}},a});
\ No newline at end of file
diff --git a/src/js/index.js b/src/js/index.js
index e069aa9..10f6a48 100644
--- a/src/js/index.js
+++ b/src/js/index.js
@@ -25,7 +25,7 @@
                 </canvas>
             `);
 
-            this.$captchaEl = document.querySelector(`.${options.canvasClass}`);
+            this.$captchaEl = $el.previousElementSibling;
             this.$captchaTextContext = this.$captchaEl.getContext('2d');
 
             this.$captchaTextContext = Object.assign(this.$captchaTextContext, options.canvasStyle);