https://futureupodcast.com/static/js/components/_2_grid-switch.js

1// File#: _2_grid-switch
2// Usage: codyhouse.co/license
3(function() {
4  var GridSwitch = function(element) {
5    this.element = element;
6    this.controller = this.element.getElementsByClassName('js-grid-switch__controller')[0];
7    this.items = this.element.getElementsByClassName('js-grid-switch__item');
8    this.contentElements = this.element.getElementsByClassName('js-grid-switch__content');
9    // store custom classes
10    this.classList = [[this.element.getAttribute('data-gs-item-class-1'), this.element.getAttribute('data-gs-content-class-1')], [this.element.getAttribute('data-gs-item-class-2'), this.element.getAttribute('data-gs-content-class-2')]];
11    initGridSwitch(this);
12  };
13
14  function initGridSwitch(element) {
15    // get selected state and apply style
16    var selectedInput = element.controller.querySelector('input:checked');
17    if(selectedInput) {
18      setGridAppearance(element, selectedInput.value);
19    }
20    // reveal grid
21    Util.addClass(element.element, 'grid-switch--is-visible');
22    // a new layout has been selected
23    element.controller.addEventListener('change', function(event) {
24      setGridAppearance(element, event.target.value);
25    });
26  };
27
28  function setGridAppearance(element, value) {
29    var newStatus = parseInt(value) - 1,
30      oldStatus = newStatus == 1 ? 0 : 1;
31
32    for(var i = 0; i < element.items.length; i++) {
33      Util.removeClass(element.items[i], element.classList[oldStatus][0]);
34      Util.removeClass(element.contentElements[i], element.classList[oldStatus][1]);
35      Util.addClass(element.items[i], element.classList[newStatus][0]);
36      Util.addClass(element.contentElements[i], element.classList[newStatus][1]);
37    }
38  };
39
40  //initialize the GridSwitch objects
41  var gridSwitch = document.getElementsByClassName('js-grid-switch');
42  if( gridSwitch.length > 0 ) {
43    for( var i = 0; i < gridSwitch.length; i++) {
44      (function(i){new GridSwitch(gridSwitch[i]);})(i);
45    }
46  }
47}());