From 4c0c77a9928b1ff6452b7f1a7c8f9a28b8fd8cc0 Mon Sep 17 00:00:00 2001
From: Timo Snel <timo@ecmanager.nl>
Date: Thu, 16 Feb 2017 22:53:52 +0100
Subject: [PATCH 1/2] * Remove jquery from the State module * Add init method
 to Forms and State module so events are attached after window is loaded

---
 js/State.js | 77 ++++++++++++++++++++++++++++++++++++-----------------
 js/forms.js |  6 +++--
 js/util.js  | 21 +++++++++++++++
 3 files changed, 77 insertions(+), 27 deletions(-)
 create mode 100644 js/util.js

diff --git a/js/State.js b/js/State.js
index 694c101..b14eadf 100644
--- a/js/State.js
+++ b/js/State.js
@@ -9,37 +9,64 @@
 
 'use strict';
 
-var $ = require('jquery');
+var util = require('./util');
 
-function setValue($field) {
-	// Check if inputs or textareas have a value
-	if( $field.val() == null )
+var State = {};
+
+function setState(inputElement, fieldElement) {
+	if(!inputElement.value || inputElement.value.length === 0) {
+		util.removeClass(fieldElement, 'has-value');
 		return;
-	else if( $field.val().length > 0 )
-		$field.closest('[data-castlecss-field]').addClass('has-value');
-	else if( $field.val().length === 0 )
-		$field.closest('[data-castlecss-field]').removeClass('has-value');
-		// Check if select has an option selected with a value
-	else if($field[0].tagName.match('select') && $field.find('option:selected').val() )
-		$field.closest('[data-castlecss-field]').addClass('has-value');
-	else
-		$field.closest('[data-castlecss-field]').removeClass('has-value');
+	}
+
+	if (inputElement.value.length > 0) {
+		util.addClass(fieldElement, 'has-value');
+	}
+	
+	//TODO: Additional checks.
 }
 
-var State = function(selector) {
+// Attaches events to input elements and pass along the field element for adjusting its classes.
+var attachEvents = function(inputElement, fieldElement) {
+	inputElement.addEventListener('focus', function() {
+		util.addClass(fieldElement, 'has-focus');
+	}, false);
+
+	inputElement.addEventListener('focusout', function() {
+		util.removeClass(fieldElement, 'has-focus');
+	}, false);
+
+	inputElement.addEventListener('keyup', function(e) {
+		setState(e.target, fieldElement);
+	}, false);
+
+	inputElement.addEventListener('change', function(e) {
+		setState(e.target, fieldElement);
+	}, false);
+}
+
+// Initializes this module by setting initial values and attaching events.
+State.init = function(selector) {
 	var _selector = selector || '[data-castlecss-field]';
 
-	$('input, textarea, select', _selector).each(function(){
-		setValue($(this));
-	});
-
-	$(_selector).on('focus', 'input, textarea, select', function(){
-		$(this).closest(_selector).addClass('has-focus');
-	}).on('focusout', 'input, textarea, select', function(){
-		$(this).closest(_selector).removeClass('has-focus');
-	}).on('keyup change', 'input, textarea, select', function(){
-		setValue($(this));
-	});
+	// Once the window has loaded, we are ready to query for elements.
+	window.addEventListener('load', function() {
+		var fieldElements = document.querySelectorAll(_selector);
+	
+		// Loop through each element to set their initial values and attach events.
+		for (var i = 0; i < fieldElements.length; i++) {
+			var fieldElement = fieldElements[i];
+		
+			var inputElements = fieldElement.querySelectorAll('input, textarea, select');
+
+			for (var j = 0; j < inputElements.length; j++) {
+				var inputElement = inputElements[j];
+
+				setState(inputElement, fieldElement);
+				attachEvents(inputElement, fieldElement);
+			}
+		}
+	}, false);
 };
 
 module.exports = State;
\ No newline at end of file
diff --git a/js/forms.js b/js/forms.js
index 3cc6e93..075b010 100644
--- a/js/forms.js
+++ b/js/forms.js
@@ -13,12 +13,14 @@ var State =  require('./State');
 var FileInput = require('./FileInput');
 var Select = require('./Select');
 
-var Forms = function(selectors) {
+var Forms = {};
+
+Forms.init = function(selectors) {
 	selectors = selectors || {};
 
 	FileInput(selectors.fileInput);
 	Select(selectors.select);
-	State(selectors.state);
+	State.init();
 };
 
 module.exports = Forms;
\ No newline at end of file
diff --git a/js/util.js b/js/util.js
new file mode 100644
index 0000000..2eaa926
--- /dev/null
+++ b/js/util.js
@@ -0,0 +1,21 @@
+var util = {};
+
+util.addClass = function(element, className) {
+    if (element.classList) {
+        element.classList.add(className);
+    }
+    else {
+        element.className += ' ' + className;
+    }
+};
+
+util.removeClass = function(element, className) {
+    if (element.classList) {
+        element.classList.remove(className);
+    }
+    else {
+        element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
+    }
+};
+
+module.exports = util;
\ No newline at end of file

From 36767c296ed8b33a4fd8407c11b213a52d9324c8 Mon Sep 17 00:00:00 2001
From: bjornb91 <bjornborneman@gmail.com>
Date: Fri, 17 Feb 2017 09:38:07 +0100
Subject: [PATCH 2/2] Update util.js

Util in uppercase, it's a class name.
---
 js/util.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/js/util.js b/js/util.js
index 2eaa926..813707f 100644
--- a/js/util.js
+++ b/js/util.js
@@ -1,6 +1,6 @@
-var util = {};
+var Util = {};
 
-util.addClass = function(element, className) {
+Util.addClass = function(element, className) {
     if (element.classList) {
         element.classList.add(className);
     }
@@ -9,7 +9,7 @@ util.addClass = function(element, className) {
     }
 };
 
-util.removeClass = function(element, className) {
+Util.removeClass = function(element, className) {
     if (element.classList) {
         element.classList.remove(className);
     }
@@ -18,4 +18,4 @@ util.removeClass = function(element, className) {
     }
 };
 
-module.exports = util;
\ No newline at end of file
+module.exports = Util;