From cde3ba95b5d341f6f4f851163cd3c21cfe0916bc Mon Sep 17 00:00:00 2001 From: Colin Eberhardt Date: Tue, 26 Feb 2019 11:44:21 +0000 Subject: [PATCH] feat: fire a DOM event when a clap occurs, with the new clap count --- index.html | 8 +++++++- src/applause-button.js | 24 ++++++++++++++++++++---- 2 files changed, 27 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index cfa0f0a..28bd76b 100644 --- a/index.html +++ b/index.html @@ -13,12 +13,18 @@ - + \ No newline at end of file diff --git a/src/applause-button.js b/src/applause-button.js index 7d80a12..5abb1d8 100644 --- a/src/applause-button.js +++ b/src/applause-button.js @@ -100,7 +100,9 @@ class ApplauseButton extends HTMLCustomElement { this._totalClaps = 0; let initialClapCountResolve; - this._initialClapCount = new Promise(resolve => (initialClapCountResolve = resolve)); + this._initialClapCount = new Promise( + resolve => (initialClapCountResolve = resolve) + ); // buffer claps within a 2 second window this._bufferedClaps = 0; @@ -126,17 +128,31 @@ class ApplauseButton extends HTMLCustomElement { return; } + // fire a DOM event with the updated count + const clapCount = + Number(this._countElement.innerHTML.replace(",", "")) + 1; + this.dispatchEvent( + new CustomEvent("clapped", { + bubbles: true, + detail: { + clapCount + } + }) + ); + + // trigger the animation toggleClass(this, "clap"); + + // buffer the increased count and defer the update this._bufferedClaps++; this._updateClaps(); // increment the clap count after a small pause (to allow the animation to run) setTimeout(() => { - this._countElement.innerHTML = formatClaps( - Number(this._countElement.innerHTML.replace(",", "")) + 1 - ); + this._countElement.innerHTML = formatClaps(clapCount); }, 250); + // check whether we've exceeded the max claps if (this.multiclap) { if (this._bufferedClaps + this._totalClaps >= MAX_MULTI_CLAP) { this.classList.add("clap-limit-exceeded");