Merge pull request #15 from shakrmedia/remove-functions-jquery

Reimplement petal-functions.js with vanilajs

js/petal-functions.js

@@ -1,63 +1,72 @@
 /* petal-functions.js for Petal */
-;(function ($, window) {
+;(function (window) {
 	"use strict";
-
+
+	// helper for querying elements array with css selector
+	function query(selector) {
+		return Array.prototype.slice.call(document.querySelectorAll(selector));
+	}
+
+	// clear dropdown states
 	function clearMenus(self) {
-		$('[data-dropdown-state="open"]').filter(function() {
-			return !this.contains(self[0]) || self.attr('data-toggle') === 'dropdown';
-		}).map(function() {
-			return $(this).find('button.dropdown');
-		}).each(function() {
-			$(this).parent().removeClass('active').removeAttr('data-dropdown-state');
+		query('[data-dropdown-state="open"]').filter(function(el) {
+			return !el.contains(self) || self.getAttribute('data-toggle') === 'dropdown';
+		}).map(function(el) {
+			var dropdown_el = el.querySelector('button.dropdown')
+			dropdown_el.parentNode.classList.remove('active');
+			dropdown_el.parentNode.removeAttribute('data-dropdown-state');
 		});
 	}
 
-	$(document).on('click', function(event) {
-		var target = $(event.target);
+	// close dropdown when user clicks outside of dropdown
+	document.addEventListener('click', function(event) {
+		var target = event.target;
 
-		if(target.parent().hasClass('submenu') || target.attr('data-toggle') === 'dropdown') return;
+		// prevent closing dropdown when user clicks elements inside dropdown
+		if(target.parentNode.classList.contains('submenu') || target.getAttribute('data-toggle') === 'dropdown') return;
 
 		clearMenus(target);
-
 	});
-	
+
 	// toggle button
-	$.fn.toggle = function() {
-		$(this)
-			.prop('data-toggle','toggle')
-			.click(function() {
-				var self = $(this);
-
-				if (self.is('.disabled')) return;
-
-				if (self.attr('data-toggle-state') === 'active') {
-					self.removeClass('active').removeAttr('data-toggle-state');
-				} else {
-					self.addClass('active').attr('data-toggle-state', 'active');
-				}
-
-			});
+	function toggle(el) {
+		el.setAttribute('data-toggle', 'toggle');
+		el.addEventListener('click', function() {
+			if(el.classList.contains('disabled')) { return; }
+
+			if(el.getAttribute('data-toggle-state') === 'active') {
+				el.classList.remove('active');
+				el.removeAttribute('data-toggle-state');
+			} else {
+				el.classList.add('active');
+				el.setAttribute('data-toggle-state', 'active');
+			}
+		});
 	}
-	
+
 	// dropdown toggle
-	$.fn.dropdown = function() {
-		$(this)
-			.prop('data-toggle','dropdown')
-			.click(function() {
-				var self = $(this);
-
-				if (self.is('.disabled')) return;
-
-				var dropdown_state = self.parent().attr('data-dropdown-state');
-
-				clearMenus(self);
-
-				if (!dropdown_state) {
-					self.parent().addClass('active').attr('data-dropdown-state','open');
-				}		
-			});
-	};
-
-	$('[data-toggle="toggle"]').toggle();
-	$('[data-toggle="dropdown"]').dropdown();
-})(jQuery, window);
+	function dropdown(el) {
+		el.setAttribute('data-toggle', 'dropdown');
+		el.addEventListener('click', function() {
+			if(el.classList.contains('disabled')) { return; }
+
+			var dropdown_state = el.parentNode.getAttribute('data-dropdown-state');
+
+			clearMenus(el);
+
+			if(!dropdown_state) {
+				el.parentNode.classList.add('active');
+				el.parentNode.setAttribute('data-dropdown-state', 'open');
+			}
+		});
+	}
+
+	// apply toggle functionality to all elements whose data-toggle attribute is toggle
+	query('[data-toggle="toggle"]').forEach(function(el) {
+		toggle(el);
+	});
+	// apply dropdown functionality to all elements whose data-toggle attribute is dropdown
+	query('[data-toggle="dropdown"]').forEach(function(el) {
+		dropdown(el);
+	});
+})(window);