pierresh · jnunderwood · Feb 20, 2019 · Feb 21, 2019 · Feb 21, 2019 · Feb 21, 2019
diff --git a/LICENSE.MD → LICENSE.md b/LICENSE.MD → LICENSE.md
diff --git a/README.md b/README.md
@@ -3,9 +3,23 @@ multiple-emails.js
 
 Enter multiple emails in a single input field with jQuery.
 
-This is an improved version of the original work of Jamie Bradley http://t2a.co/blog/index.php/multiple-value-input-field-with-jquery/.
+This project is forked from Pierre Clavequin's project at https://github.com/pierresh/multiple-emails.js.
+
+Pierre's project is an improved version of the original work of Jamie Bradley http://t2a.co/blog/index.php/multiple-value-input-field-with-jquery/.
+
+## New features added to Pierre's work by John:
+
+- "Basic" theme is now the default theme
+- "Basic" theme now displays a "heavy multiplication x" (`&#10006;` &#10006;) for the Remove icon
+- renamed old "Basic" theme to "Text" (shows the word "Remove") for clarity
+- renamed "Bootstrap" theme to "Bootstrap3" for clarity
+- added new "FontAwesome" theme
+- added option to "checkForEmail" formatting or not (default is true);
+  this allows the input field to be used for any generic text
+- update border styling of widget and input field
+
+## New features added to Jamie's work by Pierre (and others):
 
-## New features are:
 - can display emails once the page is loaded
 - check integrity of inputted email address
 - emails are encapsulated in json
@@ -14,8 +28,12 @@ This is an improved version of the original work of Jamie Bradley http://t2a.co/
 
 ## Options
 
-	$(selector).multiple_emails({
-	   position: 'top', // Display the added emails above the input
-	   theme: 'bootstrap', // Bootstrap is the default theme
-	   checkDupEmail: true // Should check for duplicate emails added
-	});
+```javascript
+$(selector).multiple_emails({
+    position: 'top',          // Display the added emails above the input
+    theme: 'FontAwesome',     // Basic is the default theme
+    checkForDuplicates: true, // Should check for duplicate emails added
+    checkForEmail: false,     // Should not check for valid email address format
+    placeholder: 'Email'      // Use placeholder text
+});
+```
diff --git a/example.html b/example.html
@@ -1,56 +1,81 @@
 <!DOCTYPE html>
 <html>
 <head>
-	<meta charset='utf-8'>
+	<meta charset="utf-8">
 	<title>Multiple Emails</title>
-	
+
 	<!-- For the plug-in dependencies -->
-	<script type="text/javascript" src='http://code.jquery.com/jquery-latest.min.js'></script>
-	
+	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
+
 	<!-- For Semantic UI Button -->
 	<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.2/semantic.min.css" />
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.2/semantic.min.js"></script>
-	
-	<!-- For Bootstrap UI Button -->
+
+	<!-- For Bootstrap3 UI Button -->
 	<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
 	<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
-
-
-	<script type="text/javascript" src="./multiple-emails.js"></script>
+
+	<!-- For FontAwesome UI button -->
+	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
+
 	<link type="text/css" rel="stylesheet" href="./multiple-emails.css" />
+	<script type="text/javascript" src="./multiple-emails.js"></script>
 
 	<script type="text/javascript">
-	
-		//Plug-in function for the bootstrap version of the multiple email
+
+		// Plug-in function for the Bootstrap3 version of multiple-emails
 		$(function() {
-			//To render the input device to multiple email input using BootStrap icon
-			$('#example_emailBS').multiple_emails({position: "bottom"});
-			//OR $('#example_emailBS').multiple_emails("Bootstrap");
-
+			//To render the input device to multiple email input using BootStrap3 icon
+			$('#example_emailBS').multiple_emails({theme: "Bootstrap3"});
+
 			//Shows the value of the input device, which is in JSON format
 			$('#current_emailsBS').text($('#example_emailBS').val());
 			$('#example_emailBS').change( function(){
 				$('#current_emailsBS').text($(this).val());
 			});
 		});
-		
-		//Plug-in function for the Semantic UI version of the multiple email
+
+		// Plug-in function for the Semantic UI version of multiple-emails
 		$(function() {
 			//To render the input device to multiple email input using SemanticUI icon
 			$('#example_emailSUI').multiple_emails({theme: "SemanticUI"});
-			
+
 			//Shows the value of the input device, which is in JSON format
 			$('#current_emailsSUI').text($('#example_emailSUI').val());
 			$('#example_emailSUI').change( function(){
 				$('#current_emailsSUI').text($(this).val());
 			});
 		});
 
-		//Plug-in function for the bootstrap version of the multiple email
+		// Plug-in function for the FontAwesome version of multiple-emails
+		$(function() {
+			//To render the input device to multiple email input using a simple hyperlink text
+			$('#example_emailFA').multiple_emails({theme: "FontAwesome"});
+
+			//Shows the value of the input device, which is in JSON format
+			$('#current_emailsFA').text($('#example_emailFA').val());
+			$('#example_emailFA').change( function(){
+				$('#current_emailsFA').text($(this).val());
+			});
+		});
+
+		// Plug-in function for the Text version of multiple-emails
+		$(function() {
+			//To render the input device to multiple email input using a simple hyperlink text
+			$('#example_emailT').multiple_emails({theme: "Text"});
+
+			//Shows the value of the input device, which is in JSON format
+			$('#current_emailsT').text($('#example_emailT').val());
+			$('#example_emailT').change( function(){
+				$('#current_emailsT').text($(this).val());
+			});
+		});
+
+		// Plug-in function for the Basic version of he multiple-emails
 		$(function() {
 			//To render the input device to multiple email input using a simple hyperlink text
 			$('#example_emailB').multiple_emails({theme: "Basic"});
-			
+
 			//Shows the value of the input device, which is in JSON format
 			$('#current_emailsB').text($('#example_emailB').val());
 			$('#example_emailB').change( function(){
@@ -60,11 +85,16 @@
 	</script>
 </head>
 <body>
-
-	<!-- The container class CSS is specified in bootstrap. It is just there for the presentation. -->
+
+	<!--
+		This example page uses Bootstrap for layout. The container, row,
+		form-group, and col- classes are just there for presentation. The
+		multiple-emails library does not depend on Bootstrap.
+	-->
+
 	<div class='container'>
 		<div class='row'>
-			<h2>Bootstrap Example</h2>
+			<h2>Bootstrap3 Example</h2>
 			<div class='form-group'>
 				<div class='col-sm-4'>
 					<h4 for='example_emailBS'>Input email addresses</h4>
@@ -78,39 +108,73 @@ <h4>Current email addresses</h4>
 		</div>
 	</div>
 	<br/>
-	<!-- The container class CSS is specified in bootstrap. It is just there for the presentation. -->
+
 	<div class='container'>
-		<div class="ui grid two column">
-				<div class="row">
-					<div class="sixteen wide column"><h2>SemanticUI Example</h2></div>		
+		<div class='row'>
+			<h2>SemanticUI Example</h2>
+			<div class='form-group'>
+				<div class='col-sm-4'>
+					<h4 for='example_emailSUI'>Input email addresses</h4>
+					<input type='text' id='example_emailSUI' name='example_emailSUI' class='form-control' value='["hello@git.com","tom@net.com"]'>
 				</div>
-
-				<div class="row">
-					<div class="column">
-						<h4 for='example_emailSUI'>Input email addresses</h4>
-						<input type='text' id='example_emailSUI' name='example_emailSUI' class='form-control' value='["hello@git.com","tom@net.com"]'>
-					</div>
-					<div class="column">
-						<h4>Current email addresses</h4>
-						<pre id='current_emailsSUI'></pre>
-					</div>
+				<div class='col-sm-offset-2 col-sm-4'>
+					<h4>Current email addresses</h4>
+					<pre id='current_emailsSUI'></pre>
 				</div>
+			</div>
 		</div>
 	</div>
 	<br/>
-	<!-- The container class CSS is specified in bootstrap. It is just there for the presentation. -->
+
+	<div class='container'>
+		<div class='row'>
+			<h2>FontAwesome Example</h2>
+			<div class='form-group'>
+				<div class='col-sm-4'>
+					<h4 for='example_emailFA'>Input email addresses</h4>
+					<input type='text' id='example_emailFA' name='example_emailFA' class='form-control' value='["hello@git.com","tom@net.com"]'>
+				</div>
+				<div class='col-sm-offset-2 col-sm-4'>
+					<h4>Current email addresses</h4>
+					<pre id='current_emailsFA'></pre>
+				</div>
+			</div>
+		</div>
+	</div>
+	<br/>
+
+	<div class='container'>
+		<div class='row'>
+			<h2>Text Example</h2>
+			<div class='form-group'>
+				<div class='col-sm-4'>
+					<h4 for='example_emailT'>Input email addresses</h4>
+					<input type='text' id='example_emailT' name='example_emailT' class='form-control' value='["hello@git.com","tom@net.com"]'>
+				</div>
+				<div class='col-sm-offset-2 col-sm-4'>
+					<h4>Current email addresses</h4>
+					<pre id='current_emailsT'></pre>
+				</div>
+			</div>
+		</div>
+	</div>
+	<br/>
+
 	<div class='container'>
-
+		<div class='row'>
 			<h2>Basic Example</h2>
-				<div>
+			<div class='form-group'>
+				<div class='col-sm-4'>
 					<h4 for='example_emailB'>Input email addresses</h4>
 					<input type='text' id='example_emailB' name='example_emailB' class='form-control' value='["hello@git.com","tom@net.com"]'>
 				</div>
-				<div>
+				<div class='col-sm-offset-2 col-sm-4'>
 					<h4>Current email addresses</h4>
 					<pre id='current_emailsB'></pre>
 				</div>
+			</div>
+		</div>
 	</div>
-	
+
 </body>
 </html>
diff --git a/multiple-emails.css b/multiple-emails.css
@@ -1,43 +1,59 @@
-.multiple_emails-container { 
-	border:1px #ccc solid; 
-	border-radius: 4px; 
-	box-shadow: inset 0 1px 1px rgba(0,0,0,.075); 
-	padding:0; margin: 0; cursor:text; width:100%; 
+.multiple_emails-container {
+    padding: 0;
+    margin: 0;
+    margin-left: -5px;
+    cursor: text;
+    width: 100%;
 }
 
-.multiple_emails-container input { 
-	clear:both; 
-	width:100%; 
-	border:0; 
-	outline: none; 
-	margin-bottom:3px; 
-	padding-left: 5px; 
-	box-sizing: border-box;
+.multiple_emails-container input {
+    clear: both;
+    width: 100%;
+    border: 0;
+    outline: none;
+    margin-bottom: 3px;
+    padding-left: 5px;
+    box-sizing: border-box;
 }
 
-.multiple_emails-container input{
-	border: 0 !important;
+.multiple_emails-container input {
+    border: 0 !important;
 }
 
-.multiple_emails-container input.multiple_emails-error {	
-	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px red !important; 
-	outline: thin auto red !important; 
+.multiple_emails-container input.multiple_emails-error {
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px red !important;
+    outline: thin auto red !important;
 }
 
-.multiple_emails-container ul {	
-	list-style-type:none; 
-	padding-left: 0; 
+.multiple_emails-container ul {
+    list-style-type: none;
+    padding-left: 0;
 }
 
-.multiple_emails-email { 
-	margin: 3px 5px 3px 5px; 
-	padding: 3px 5px 3px 5px; 
-	border:1px #BBD8FB solid;	
-	border-radius: 3px; 
-	background: #F3F7FD; 
+.multiple_emails-email {
+    margin: 3px 5px 3px 5px;
+    padding: 3px 5px 3px 5px;
+    border: 1px #BBD8FB solid;
+    border-radius: 3px;
+    background: #F3F7FD;
+    width: 100%;
 }
 
-.multiple_emails-close { 
-	float:left; 
-	margin:0 3px;
+input.multiple_emails-input {
+    background-color: #ffffff;
+    border: 1px solid #ced4da !important;
+    border-radius: 0.25rem;
+    padding: 0.25rem 0.75rem;
+    color: #495057;
+    margin-left: 5px;
+}
+
+.multiple_emails-close {
+    float: left;
+    margin: 0 3px;
+    text-decoration: none;
+}
+
+a.multiple_emails-close:hover {
+    text-decoration: none;
 }