spinner controller
var spinnerCSS = (function() {
var classes = {
default: 'circle-spinner-geocode',
save: 'circle-spinner-save'
}
return {
types: classes
}
})();
var SpinnersController = function() {
// holds reference to all spinner elements added to the object
var spinners = {}
// holds reference to spinner element currently being manipulated
var selectedSpinner = null
return {
addSpinners: function( spinnerElements ) {
spinners = spinnerElements
// apply default css style to each spinner
Object.keys(spinners).forEach(function(key) {
spinners[key].setAttribute('class', spinnerCSS.types.default)
});
},
use: function( requested ) {
selectedSpinner = spinners[requested]
return this
},
withStyle: function( requestedType ) {
selectedSpinner.removeAttribute('class')
// match requested style otherwise apply default style
if (spinnerCSS.types[requestedType]) {
selectedSpinner.setAttribute('class', spinnerCSS.types[requestedType])
} else {
selectedSpinner.setAttribute('class', spinnerCSS.types.default)
}
return this
},
show: function() {
selectedSpinner.style.display = 'block'
},
hide: function() {
selectedSpinner.style.display = 'none'
}
}
};
// instantiate spinners controller
var SpinnersController = new SpinnersController();
// pass references of all spinners on page to controller
SpinnersController.addSpinners({
loadGeocodeTable: document.querySelectorAll('[spinner-role = loadGeocodeTable]')[0],
anotherSpinner: document.querySelectorAll('[spinner-role = loadGeocodeTable]')[0]
})
debug(SpinnersController)
SpinnersController.use('loadGeocodeTable').withStyle('save').show()