Cacher is the code snippet organizer for pro developers

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()