Iterations of Badge.js

1.js

/*
  A widget that will appear when the screen reaches a certain size. Allows opening and closing of a sidebar.
  100% pure, vanilla JavaScript and CSS.
*/
(function(){
    var Badge = function(target, placement) {
	var self = this;
	this.target = target;
	this.placement = placement;
	
	this.element = document.createElement("div");
	this.element.className = "badge-wrapper";
	this.innerElement = document.createElement("div");
	this.innerElement.className = "badge fa fa-bars";
	this.element.appendChild(this.innerElement);

	this.active = false;

	this.element.addEventListener("click", function() {
	    self.active ? self.close() : self.open();
	});

	window.addEventListener("scroll", function() {
	    if(self.active) {
		self.placement.vertical(self.target);
	    }
	});

	var mobileQuery = window.matchMedia("(max-width: 40.0625em)");
	mobileQuery.addListener(function(mq) {
	    if(mq.matches) {
		self.placement.vertical(self.target);
	    } else {
		self.active = false;
		self.target.style.cssText = "";
		self.element.open();
	    }
	});

	var animationEndEvents = ["webkitAnimationEnd","animationEnd","oanimationend","msAnimationEnd"];
	animationEndEvents.forEach(function(event) {
	    self.target.addEventListener(event, function(animationEvent) {
		self.animationEnd(animationEvent);
	    });
	});

	this.animationEnd = function(animationEvent) {
	    var element = animationEvent.target;
	    var animationName = animationEvent.animationName;
	    
	    switch(animationName) {
	    case "shrinkTo0":
		element.style.display = "none";
		element.style.visibility = "hidden";
		element.style.opacity = 0;
		break;
	    case "expandTo100":
		
		break;
	    default:
		break;
	    }
	};

	this.target.show = function() {
	    this.style.visibility = "visible";
	    this.style.display = "block";
	    this.style.opacity = 1;
	    this.style.animationName = "expandTo100";
	    this.style.webkitAnimationName = this.style.animationName;
	};

	this.target.hide = function() {
	    this.style.visibility = "hidden";
	    this.style.opacity = 0;
	    this.style.animationName = "shrinkTo0";
	    this.style.webkitAnimationName = this.style.animationName;
	};

	this.element.open = function() {
	    self.innerElement.className = "badge fa fa-bars";
	};

	this.element.close = function() {
	    self.innerElement.className = "badge fa fa-close";
	};

	this.close = function() {
	    self.active = false;
	    self.target.hide();
	    self.element.open();
	};

	this.open = function() {
	    self.active = true;
	    self.placement.vertical(self.target);
	    self.target.show();
	    self.element.close();
	};
    };
    
    var topbar;
    var sidebar;
    var badge;

    var mobileQuery = window.matchMedia("(max-width: 40.0625em)");

    mobileQuery.addListener(function(mq) {
	if(mq.matches) {
	    move(".sidebar .ad").to(".troughFooter");
	} else {
	    move(".troughFooter .ad").to(".sidebar");
	}
    });
    
    window.addEventListener("DOMContentLoaded",  function() {
	topbar = document.querySelector(".top-bar");
	sidebar = document.querySelector("aside.sidebar");
	badge = new Badge(sidebar, {vertical: function(el) {
	    el.style.top = topbar.clientHeight + topbar.offsetTop + "px";
	}});

	/* When the top toggle menu icon is clicked, we want to hide our menu. */
	document.querySelector('.toggle-topbar').onclick = function(e) {
	    badge.close();
	};

	/* Add it to the topbar */
	topbar.insertBefore(badge.element, topbar.querySelector(".title-area"));

	if(mobileQuery.matches) {
	    move(".sidebar .ad").to(".troughFooter");
	}
    });

})();

2.js

/* An ES6 implementation of tpb_mobile.js. */
(function(){
class Badge {
    constructor(target, placement) {
	this.active = false;
	this.target = target;
	this.target.show = this._targetShow;
	this.target.hide = this._targetHide;
	this.placement = placement;
	this.element = this._createElement();
	this._hooks();
    }

    /* Private */
    
    _targetShow() {
	this.style.visibility = "visible";
	this.style.display = "block";
	this.style.opacity = 1;
	this.style.animationName = "expandTo100";
	this.style.webkitAnimationName = this.style.animationName;
    }

    _targetHide() {
	this.style.visibility = "hidden";
	this.style.opacity = 0;
	this.style.animationName = "shrinkTo0";
	this.style.webkitAnimationName = this.style.animationName;
    }

    _hooks() {
	this._windowHooks();
	this._animationHooks();
    }

    _animationHooks() {
	["webkitAnimationEnd","animationEnd","oanimationend","msAnimationEnd"]
	    .forEach(event => {
		this.target.addEventListener(event, animationEvent => {
		    this._animationFinished(animationEvent);
		});
	    });
    }

    _animationFinished(animationEvent) {
	var animatedElement = animationEvent.target;
	var animationName = animationEvent.animationName;
	
	switch(animationName) {
	case "shrinkTo0":
	    animatedElement.style.display = "none";
	    animatedElement.style.visibility = "hidden";
	    animatedElement.style.opacity = 0;
	    break;
	case "expandTo100":
	    break;
	default:
	    break;
	}
    }
    
    _windowHooks() {	
	window
	    .addEventListener("scroll", () => {
		if(this.active) {
		    this.placement.vertical(this.target);
		}
	    });
	
	window
	    .matchMedia("(max-width: 40.0625em)")
	    .addListener(query => {
		if(query.matches) {
		    this.placement.vertical(this.target);
		} else {
		    this.active = false;
		    this.target.style.cssText = "";
		    this.element.open();
		}
	    });
    }

    _createElement() {
	var element = document.createElement("div");
	element.innerElement = document.createElement("div");
	
	element.className = "badge-wrapper";
	element.addEventListener("click", () => {
	    this.active ? this.close() : this.open();
	});
	element.open = function() {
	    this.innerElement.className = "badge fa fa-bars";
	};
	element.close = function() {
	    this.innerElement.className = "badge fa fa-close";
	};
	
	element.innerElement.className = "badge fa fa-bars";

	element.appendChild(element.innerElement);
	
	return element;
    }

    /* Public */
    
    close() {
	this.active = false;
	this.target.hide();
	this.element.open();
    }

    open() {
	this.active = true;
	this.placement.vertical(this.target);
	this.target.show();
	this.element.close();
    }

}

var topbar, sidebar, badge;
var mobileQuery = window.matchMedia("(max-width: 40.0625em)");

mobileQuery
    .addListener(function(query) {
	if(query.matches) {
	    move(".sidebar .ad").to(".troughFooter");
	} else {
	    move(".troughFooter .ad").to(".sidebar");
	}
    });

window
    .addEventListener("DOMContentLoaded",  function() {
	topbar = document.querySelector(".top-bar");
	sidebar = document.querySelector("aside.sidebar");
	badge = new Badge(sidebar, {vertical: function(el) {
	    el.style.top = topbar.clientHeight + topbar.offsetTop + "px";
	}});

	/* When the top toggle menu icon is clicked, we want to hide our menu. */
	document.querySelector('.toggle-topbar').onclick = function(e) {
	    badge.close();
	};

	/* Add it to the topbar */
	topbar.insertBefore(badge.element, topbar.querySelector(".title-area"));

	if(mobileQuery.matches) {
	    move(".sidebar .ad").to(".troughFooter");
	}
    });

})();