Basic ES6 Javascript Plugin - Using a Variable Between Functions

Question

I am trying to create a basic JS plugin that can be called after the click event, to disable the button (so that users do not launch several API calls), and to give a backlink that something is loading / happening. Here's what it looks like:

This works fine on an individual basis, but I want to rewrite it as a plugin so that I can reuse it on the site.

Here is a clipped version of JS from loader.plugin.js file.

let originalBtnText; export function showBtnLoader(btn, loadingText) { const clickedBtn = btn; const spinner = document.createElement('div'); spinner.classList.add('spin-loader'); originalBtnText = clickedBtn.textContent; clickedBtn.textContent = loadingText; clickedBtn.appendChild(spinner); clickedBtn.setAttribute('disabled', true); clickedBtn.classList.add('loading'); return this; } export function hideBtnLoader(btn) { const clickedBtn = btn.target; clickedBtn.textContent = originalBtnText; clickedBtn.removeAttribute('disabled'); clickedBtn.classList.remove('loading'); return this; } export function btnLoader() { showBtnLoader(); hideBtnLoader(); } 

And here is an example of how I would like to use it.

 import btnLoader from 'loaderPlugin'; const signupBtn = document.getElementById('signup-btn'); signupBtn.addEventListener('click', function(e) { e.preventDefault(); btnLoader.showBtnLoader(signupBtn, 'Validating'); // Call API here }); // Following API response hideBtnLoader(signupBtn); 

The problem is that I want to save the originalBtnText from the showBtnLoader function, and then use this variable in the hideBtnLoader function. I could, of course, achieve this in a different way (for example, by adding a value as a data attribute and capturing it later), but I wondered if there was an easy way.

Another problem is that I do not know the correct way to call each individual function and whether I import it correctly. I have tried the following.

 btnLoader.showBtnLoader(signupBtn, 'Validating'); btnLoader(showBtnLoader(signupBtn, 'Validating')); showBtnLoader(signupBtn, 'Validating'); 

But I get the following error:

 Uncaught ReferenceError: showBtnLoader is not defined at HTMLButtonElement.<anonymous> 

I read some good SO articles and answers, such as http://2ality.com/2014/09/es6-modules-final.html and the default ES6 export with several functions linking to each other , but I'm a bit confused about " the right "way to do this, to make it reusable.

Any pointers would be much appreciated.

Answer 1

I would export a function that creates an object with show and hide functions, for example:

 export default function(btn, loadingText) { function show() { const clickedBtn = btn; const spinner = document.createElement('div'); spinner.classList.add('spin-loader'); originalBtnText = clickedBtn.textContent; clickedBtn.textContent = loadingText; clickedBtn.appendChild(spinner); clickedBtn.setAttribute('disabled', true); clickedBtn.classList.add('loading'); } function hide() { const clickedBtn = btn.target; clickedBtn.textContent = originalBtnText; clickedBtn.removeAttribute('disabled'); clickedBtn.classList.remove('loading'); } return { show, hide, }; } 

Then, to use it:

 import btnLoader from 'btnloader'; const signupBtn = document.getElementById('signup-btn'); const signupLoader = btnLoader( signupBtn, 'Validating' ); signupBtn.addEventListener('click', function(e) { e.preventDefault(); signupLoader.show(); // Call API here }); // Following API response signupLoader.hide(); 

If you need to hide it from another file, from where you showed it, you can export an instance:

 export const signupLoader = btnLoader( signupBtn, 'Validating' ); 

And later import it.

 import { signupLoader } from 'signupform'; function handleApi() { signupLoader.hide(); } 

Answer 2

You might override Element.prototype to make it available directly from this element. However, I would not set a value for this element, I would rather return an object with all the necessary materials:

 export function implementBtnLoader(){ Element.prototype.showBtnLoader=function( loadingText) { const clickedBtn = this; const spinner = document.createElement('div'); spinner.classList.add('spin-loader'); var originalBtnText = clickedBtn.textContent; clickedBtn.textContent = loadingText; clickedBtn.appendChild(spinner); clickedBtn.setAttribute('disabled', true); clickedBtn.classList.add('loading'); return { text:originalBtnText, el:this, hideBtnLoader: function() { const clickedBtn = this.target; clickedBtn.textContent = this.text; clickedBtn.removeAttribute('disabled'); clickedBtn.classList.remove('loading'); return this; } }; }; } export function btnLoader() { implementBtnLoader(); } 

When importing and implementing BTnLoader, it is called:

 var loader=document.getElementById("test").showBtnLoader(); console.log(loader.text); loader.hideBtnLoader();