Moved all methods out of main function body to set as prototype

dchenk · Feb 21, 2018 · b326076 · b326076
1 parent ccbd5ec
commit b326076
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 45 deletions.
diff --git a/index.html b/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html><html lang="en">
 <head>
 	<meta charset="UTF-8">
-	<title>DynamicTextFields</title>
+	<title>Dynamic TextFields</title>
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<link rel="stylesheet" type="text/css" href="./textfields.css">
 	<style>
@@ -37,7 +37,7 @@
 
 		<br>
 
-		<div>This one's value changes when the first one's changes:</div>
+		<div>This field’s value changes when the first one’s changes:</div>
 		<div class="dyn-textfield">
 			<input type="text" class="dyn-textfield-input" id="three">
 			<label for="three" class="dyn-textfield-label">Label for Three</label>

diff --git a/textfields.js b/textfields.js
@@ -1,8 +1,7 @@
 "use strict";
 
-// Create a DynamicTextFields object using the "new" operator, with the only
-// argument passed in being the ID of an element that will contain all of the
-// text fields you will want registered and styled.
+// Create a DynamicTextFields object using the "new" operator, with the only argument passed in being
+// the ID of an element that will contain all of the text fields you will want registered and styled.
 function DynamicTextFields(containerID) {
 
 	if (!containerID) {
@@ -12,57 +11,57 @@ function DynamicTextFields(containerID) {
 
 	this.container = document.getElementById(containerID);
 
-	this.resetStyle = function(evt) {
-		if (evt.target.value.trim() === "") {
-			if (evt.target.classList.contains("required")) {
-				evt.target.classList.add("not-set");
-			} else {
-				this.classList.remove("notempty");
-			}
+}
+
+DynamicTextFields.prototype.resetStyle = function(evt) {
+	if (evt.target.value.trim() === "") {
+		if (evt.target.classList.contains("required")) {
+			evt.target.classList.add("not-set");
 		} else {
-			if (evt.target.classList.contains("required")) {
-				evt.target.classList.remove("not-set");
-			}
-			this.classList.add("notempty");
+			this.classList.remove("notempty");
 		}
-	}
-
-	this.resetAllStyles = function() {
-		let els = this.container.getElementsByClassName("dyn-textfield-input");
-		for (let i = 0; i < els.length; i++) {
-			if (els[i].value === "") {
-				els[i].classList.remove("notempty");
-			} else {
-				els[i].classList.add("notempty");
-			}
+	} else {
+		if (evt.target.classList.contains("required")) {
+			evt.target.classList.remove("not-set");
 		}
+		this.classList.add("notempty");
 	}
+}
 
-	this.registerAll = function() {
-		let fs = this.container.getElementsByClassName("dyn-textfield-input");
-		if (fs.length === 0) {
-			return;
-		}
-		for (let i = 0; i < fs.length; i++) {
-			fs[i].addEventListener("change", this.resetStyle);
+DynamicTextFields.prototype.resetAllStyles = function() {
+	let els = this.container.getElementsByClassName("dyn-textfield-input");
+	for (let i = 0; i < els.length; i++) {
+		if (els[i].value === "") {
+			els[i].classList.remove("notempty");
+		} else {
+			els[i].classList.add("notempty");
 		}
 	}
+}
 
-	this.deregisterAll = function() {
-		let els = this.container.getElementsByClassName("dyn-textfield-input");
-		for (let i = 0; i < els.length; i++) {
-			els[i].removeEventListener("change", this.resetStyle);
-		}
+DynamicTextFields.prototype.deregisterAll = function() {
+	let els = this.container.getElementsByClassName("dyn-textfield-input");
+	for (let i = 0; i < els.length; i++) {
+		els[i].removeEventListener("change", this.resetStyle);
 	}
+}
 
-	// registerRefresher registers a listener on a text field that, when changed, affects the the value
-	// of another text field (making the affected field needed a style reset). Register a refresher
-	// to ensure that the input being set programmatically will appear correctly based on whether it's empty.
-	this.registerRefresher = function(toListenID, toRefreshID) {
-		let r = document.getElementById(toRefreshID);
-		document.getElementById(toListenID).addEventListener("input", this.resetStyle.bind(r));
-	}
+// registerRefresher registers a listener on a text field that, when changed, affects the the value
+// of another text field (making the affected field needing a style reset). Register a refresher to
+// ensure that the input being set programmatically will appear correctly based on whether it's empty.
+DynamicTextFields.prototype.registerRefresher = function(toListenID, toRefreshID) {
+	let r = document.getElementById(toRefreshID);
+	document.getElementById(toListenID).addEventListener("input", this.resetStyle.bind(r));
+}
 
+DynamicTextFields.prototype.registerAll = function() {
+	let fs = this.container.getElementsByClassName("dyn-textfield-input");
+	if (fs.length === 0) {
+		return;
+	}
+	for (let i = 0; i < fs.length; i++) {
+		fs[i].addEventListener("change", this.resetStyle);
+	}
 }
 
 export default DynamicTextFields;