A Simple Mobile Nav

gistfile1.txt

(function() {
  'use strict';
  
  function addClassIfNotPresent(e, c) {
    console.log('addClassIFNotPresent');
    console.log(e);
    console.log(c);
    var val = e.getAttribute('class');
    if (val === null) {
      e.setAttribute('class', c);
      return;
    }
    var classes = val.split(' ');
    var hasClass = false;
    classes.forEach(function(i) {
      if (i == c) {
        hasClass = true;
      }
    });
    if (!hasClass) {
      classes.push(c);
      e.setAttribute('class', classes.join(' '));
    }
  }
  
  function removeClassIfPresent(e, c) {
    console.log('removeClassIFPresent');
    console.log(e);
    console.log(c);
    var val = e.getAttribute('class');
    if (val === null) {
      return;
    }
    var classes = val.split(' ');
    console.log(classes);
    for (var i = 0; i < classes.length; i++) {
      var v = classes[i];
      if (c === v) {
        if (i === 0) {
          classes = classes.slice(1, classes.length);        
        } else if (i === classes.length - 1) {
          classes = classes.slice(0, classes.length - 1);
        } else {
          classes = classes.slice(0, i).concat(classes.slice(i + 1, classes.length));
        }
      }
    }
    console.log(classes);
    e.setAttribute('class', classes.join(' '));
  }
  
  function Nav(config) {
    this._configure(config);
    return this;
  }
 
  Nav.prototype._configure = function(config) {
    var sources = this._parseSources(config.sources);
    var target = document.getElementById(config.target);
    if (toggle === null) {
      throw new Error('nav: config.target must be a valid id');
    }
    this._copySources(sources, target);
    var toggle = document.getElementById(config.toggle);
    if (toggle === null) {
      throw new Error('nav: config.toggle must be a valid id');
    }
    this._initToggle(toggle, target);
  }
  
  Nav.prototype._parseSources = function(sources) {
    var sourceElems = [];
    if (typeof sources === 'string') {
      var sourceElem = document.getElementById(sources);
      if (sourceElem === null) {
        throw new Error('nav: config.sources must be a valid id or array of valid ids');
      } else {
       	sourceElems.push(sourceElem);
      }
    } else if (Array.isArray(sources)) {
      for (var i = 0; i < sources.length; i++) {
        var source = sources[i];
        var elem = document.getElementById(source);
        if (elem === null) {
          throw new Error('nav: config.sources must be a valid id or array of valid ids');
        }
        sourceElems.push(elem);
      }
    }
    return sourceElems;
  }

  Nav.prototype._copySources = function(sources, target) {
    for (var i = 0; i < sources.length; i++) {
      var children = sources[i].children;
      for (var j = 0; j < children.length; j++) {
        var child = children[j];
        var clone = child.cloneNode(true);
        target.appendChild(clone);
      }
    }
  }
  
  Nav.prototype._initToggle = function(toggle, target) {
    var f = toggle.onclick;
    if (f === null) {
      toggle.onclick = this._toggle(toggle, target);
    } else {
    	var t = this._toggle(toggle, target);
      toggle.onclick = function(e) {
        f(e);
        t();
      };
    }
  }
  
  Nav.prototype._toggle = function(toggle, target) {
    var active = false;
    return function() {
    	console.log('Toggled');
      if (active) {
      	console.log(active);
        removeClassIfPresent(toggle, 'active');
        addClassIfNotPresent(target, 'collapsed');
        active = false;
      } else { 
      	console.log(active);
        removeClassIfPresent(target, 'collapsed');
        addClassIfNotPresent(toggle, 'active');
        active = true;
      }
    }
  }