From 482da9d12491397e48b7c06a6fb1b94b723579a4 Mon Sep 17 00:00:00 2001 From: John N Underwood Date: Wed, 20 Feb 2019 11:29:38 -0500 Subject: [PATCH 01/32] Update multiple-emails.js Add Font Awesome theme, which uses 'fa-times' for the Remove icon. --- multiple-emails.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/multiple-emails.js b/multiple-emails.js index f9d4bb0..c5340fe 100644 --- a/multiple-emails.js +++ b/multiple-emails.js @@ -14,13 +14,15 @@ var settings = $.extend( {}, defaults, options ); var deleteIconHTML = ""; - if (settings.theme.toLowerCase() == "Bootstrap".toLowerCase()) - { + if (settings.theme.toLowerCase() == "Bootstrap".toLowerCase()) { deleteIconHTML = ''; } else if (settings.theme.toLowerCase() == "SemanticUI".toLowerCase() || settings.theme.toLowerCase() == "Semantic-UI".toLowerCase() || settings.theme.toLowerCase() == "Semantic UI".toLowerCase()) { deleteIconHTML = ''; } + else if (settings.theme.toLowerCase() == "FontAwesome".toLowerCase() || settings.theme.toLowerCase() == "Font Awesome".toLowerCase()) { + deleteIconHTML = ''; + } else if (settings.theme.toLowerCase() == "Basic".toLowerCase()) { //Default which you should use if you don't use Bootstrap, SemanticUI, or other CSS frameworks deleteIconHTML = 'Remove'; From 5756a901858d38294fd4b8a9124bd89601344b1c Mon Sep 17 00:00:00 2001 From: John N Underwood Date: Thu, 21 Feb 2019 08:15:21 -0500 Subject: [PATCH 02/32] add Simple theme Add "Simple" theme using 'heavy times' character --- multiple-emails.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/multiple-emails.js b/multiple-emails.js index c5340fe..91cf2be 100644 --- a/multiple-emails.js +++ b/multiple-emails.js @@ -23,6 +23,9 @@ else if (settings.theme.toLowerCase() == "FontAwesome".toLowerCase() || settings.theme.toLowerCase() == "Font Awesome".toLowerCase()) { deleteIconHTML = ''; } + else if (settings.theme.toLowerCase() == "Simple".toLowerCase()) { + deleteIconHTML = ''; + } else if (settings.theme.toLowerCase() == "Basic".toLowerCase()) { //Default which you should use if you don't use Bootstrap, SemanticUI, or other CSS frameworks deleteIconHTML = 'Remove'; From 3bccebd13f225780b358b6c324cd69adcfee3a55 Mon Sep 17 00:00:00 2001 From: John N Underwood Date: Thu, 21 Feb 2019 08:16:29 -0500 Subject: [PATCH 03/32] Update multiple-emails.css Remove text-decoration from 'close' button (i.e., no underline) --- multiple-emails.css | 1 + 1 file changed, 1 insertion(+) diff --git a/multiple-emails.css b/multiple-emails.css index ded0b80..93821e9 100644 --- a/multiple-emails.css +++ b/multiple-emails.css @@ -40,4 +40,5 @@ .multiple_emails-close { float:left; margin:0 3px; + text-decoration:none; } From c121a3be80835fef91224aaf555691f8b2f10250 Mon Sep 17 00:00:00 2001 From: John N Underwood Date: Thu, 21 Feb 2019 08:23:08 -0500 Subject: [PATCH 04/32] Update multiple-emails.js Update Bootstrap theme conditional to also check for "Bootstrap3", for clarity. --- multiple-emails.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/multiple-emails.js b/multiple-emails.js index 91cf2be..30647c0 100644 --- a/multiple-emails.js +++ b/multiple-emails.js @@ -14,7 +14,7 @@ var settings = $.extend( {}, defaults, options ); var deleteIconHTML = ""; - if (settings.theme.toLowerCase() == "Bootstrap".toLowerCase()) { + if (settings.theme.toLowerCase() == "Bootstrap".toLowerCase() || settings.theme.toLowerCase() == "Bootstrap3".toLowerCase()) { deleteIconHTML = ''; } else if (settings.theme.toLowerCase() == "SemanticUI".toLowerCase() || settings.theme.toLowerCase() == "Semantic-UI".toLowerCase() || settings.theme.toLowerCase() == "Semantic UI".toLowerCase()) { From 99cf81f25dd4b346b347e0cfda3e2055b6718f93 Mon Sep 17 00:00:00 2001 From: John N Underwood Date: Thu, 21 Feb 2019 08:24:05 -0500 Subject: [PATCH 05/32] Update multiple-emails.js Fix spacing/alignment issue for one character in the code. --- multiple-emails.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/multiple-emails.js b/multiple-emails.js index 30647c0..de81f1a 100644 --- a/multiple-emails.js +++ b/multiple-emails.js @@ -56,7 +56,7 @@ } else if(e.which){ // Netscape/Firefox/Opera keynum = e.which; - } + } //if(event.which == 8 && input_length == 0) { $list.find('li').last().remove(); } //Removes last item on backspace with no input From 7fd08ca8f25ee62f40f4080272ba3c4f8dd205da Mon Sep 17 00:00:00 2001 From: John Underwood Date: Thu, 21 Feb 2019 08:51:20 -0500 Subject: [PATCH 06/32] optionally validate input --- README.md | 11 ++++++- multiple-emails.js | 71 ++++++++++++++++++++++++++-------------------- 2 files changed, 50 insertions(+), 32 deletions(-) diff --git a/README.md b/README.md index 2f6bc75..c6c4614 100644 --- a/README.md +++ b/README.md @@ -3,9 +3,18 @@ multiple-emails.js Enter multiple emails in a single input field with jQuery. +This is forked from Pierre Clavequin's project at https://github.com/pierresh/multiple-emails.js. + +## New features are: + +- new FontAwesome theme +- new Simple theme +- optionally validate input + This 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 are: + - can display emails once the page is loaded - check integrity of inputted email address - emails are encapsulated in json @@ -18,4 +27,4 @@ This is an improved version of the original work of Jamie Bradley http://t2a.co/ position: 'top', // Display the added emails above the input theme: 'bootstrap', // Bootstrap is the default theme checkDupEmail: true // Should check for duplicate emails added - }); \ No newline at end of file + }); diff --git a/multiple-emails.js b/multiple-emails.js index de81f1a..34ca8d2 100644 --- a/multiple-emails.js +++ b/multiple-emails.js @@ -1,18 +1,19 @@ (function( $ ){ - + $.fn.multiple_emails = function(options) { - + // Default options var defaults = { checkDupEmail: true, + validate: true, theme: "Bootstrap", position: "top", placeholder: "" }; - + // Merge send options with defaults var settings = $.extend( {}, defaults, options ); - + var deleteIconHTML = ""; if (settings.theme.toLowerCase() == "Bootstrap".toLowerCase() || settings.theme.toLowerCase() == "Bootstrap3".toLowerCase()) { deleteIconHTML = ''; @@ -30,7 +31,7 @@ //Default which you should use if you don't use Bootstrap, SemanticUI, or other CSS frameworks deleteIconHTML = 'Remove'; } - + return this.each(function() { //$orig refers to the input HTML node var $orig = $(this); @@ -45,39 +46,39 @@ ); }); } - + var $input = $('').on('keyup', function(e) { // input $(this).removeClass('multiple_emails-error'); var input_length = $(this).val().length; - + var keynum; - if(window.event){ // IE + if(window.event){ // IE keynum = e.keyCode; } - else if(e.which){ // Netscape/Firefox/Opera + else if(e.which){ // Netscape/Firefox/Opera keynum = e.which; } - + //if(event.which == 8 && input_length == 0) { $list.find('li').last().remove(); } //Removes last item on backspace with no input - + // Supported key press is tab, enter, space or comma, there is no support for semi-colon since the keyCode differs in various browsers - if(keynum == 9 || keynum == 32 || keynum == 188) { - display_email($(this), settings.checkDupEmail); + if(keynum == 9 || keynum == 32 || keynum == 188) { + display_email($(this), settings.checkDupEmail, settings.validate); } else if (keynum == 13) { - display_email($(this), settings.checkDupEmail); + display_email($(this), settings.checkDupEmail, settings.validate); //Prevents enter key default //This is to prevent the form from submitting with the submit button //when you press enter in the email textbox e.preventDefault(); } - }).on('blur', function(event){ - if ($(this).val() != '') { display_email($(this), settings.checkDupEmail); } + }).on('blur', function(event){ + if ($(this).val() != '') { display_email($(this), settings.checkDupEmail, settings.validate); } }); var $container = $('
').click(function() { $input.focus(); } ); // container div - + // insert elements into DOM if (settings.position.toLowerCase() === "top") $container.append($list).append($input).insertAfter($(this)); @@ -87,13 +88,14 @@ /* t is the text input device. Value of the input could be a long line of copy-pasted emails, not just a single email. - As such, the string is tokenized, with each token validated individually. - + As such, the string is tokenized, with each token validated individually if validate + variable is set to true. + If the dupEmailCheck variable is set to true, scans for duplicate emails, and invalidates input if found. Otherwise allows emails to have duplicated values if false. */ - function display_email(t, dupEmailCheck) { - + function display_email(t, dupEmailCheck, validate) { + //Remove space, comma and semi-colon from beginning and end of string //Does not remove inside the string as the email will need to be tokenized using space, comma and semi-colon var arr = t.val().trim().replace(/^,|,$/g , '').replace(/^;|;$/g , ''); @@ -101,11 +103,11 @@ arr = arr.replace(/"/g,""); //Split the string into an array, with the space, comma, and semi-colon as the separator arr = arr.split(/[\s,;]+/); - + var errorEmails = new Array(); //New array to contain the errors - + var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i); - + for (var i = 0; i < arr.length; i++) { //Check if the email is already added, only if dupEmailCheck is set to true if ( dupEmailCheck === true && $orig.val().indexOf(arr[i]) != -1 ) { @@ -117,7 +119,14 @@ }(); // Use a IIFE function to create a new scope so existingElement won't be overriden } } - else if (pattern.test(arr[i]) == true) { + else if (validate === true && pattern.test(arr[i]) == true) { + $list.append($('
  • ') + .prepend($(deleteIconHTML) + .click(function(e) { $(this).parent().remove(); refresh_emails(); e.preventDefault(); }) + ) + ); + } + else if (validate === false) { $list.append($('
  • ') .prepend($(deleteIconHTML) .click(function(e) { $(this).parent().remove(); refresh_emails(); e.preventDefault(); }) @@ -134,24 +143,24 @@ t.val(""); refresh_emails (); } - + function refresh_emails () { var emails = new Array(); var container = $orig.siblings('.multiple_emails-container'); container.find('.multiple_emails-email span.email_name').each(function() { emails.push($(this).html()); }); $orig.val(JSON.stringify(emails)).trigger('change'); } - + function IsJsonString(str) { try { JSON.parse(str); } catch (e) { return false; } return true; } - + return $(this).hide(); - + }); - + }; - + })(jQuery); From 4ad3e766bf54cdf8446570dce3d0be38d8a860e2 Mon Sep 17 00:00:00 2001 From: John Underwood Date: Thu, 21 Feb 2019 08:54:24 -0500 Subject: [PATCH 07/32] minor change --- multiple-emails.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/multiple-emails.js b/multiple-emails.js index 34ca8d2..7993cf4 100644 --- a/multiple-emails.js +++ b/multiple-emails.js @@ -108,10 +108,10 @@ var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i); - for (var i = 0; i < arr.length; i++) { + for (var i = 0; i < arr.length; i++) { //Check if the email is already added, only if dupEmailCheck is set to true if ( dupEmailCheck === true && $orig.val().indexOf(arr[i]) != -1 ) { - if (arr[i] && arr[i].length > 0) { + if (arr[i] && arr[i].length > 0) { new function () { var existingElement = $list.find('.email_name[data-email=' + arr[i].toLowerCase().replace('.', '\\.').replace('@', '\\@') + ']'); existingElement.css('font-weight', 'bold'); From 7033f412257dbcf213abbd6537ebdb2071d08bdc Mon Sep 17 00:00:00 2001 From: John Underwood Date: Thu, 21 Feb 2019 08:57:14 -0500 Subject: [PATCH 08/32] rename Bootstrap theme to Bootstrap3 for clarity --- README.md | 7 ++++--- multiple-emails.js | 4 ++-- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index c6c4614..d65b7f7 100644 --- a/README.md +++ b/README.md @@ -7,9 +7,10 @@ This is forked from Pierre Clavequin's project at https://github.com/pierresh/mu ## New features are: -- new FontAwesome theme -- new Simple theme -- optionally validate input +- rename "Bootstrap" theme to "Bootstrap3" for clarity +- new "FontAwesome" theme +- new "Simple" theme +- add option to validate input or not (default is true) This is an improved version of the original work of Jamie Bradley http://t2a.co/blog/index.php/multiple-value-input-field-with-jquery/. diff --git a/multiple-emails.js b/multiple-emails.js index 7993cf4..5796205 100644 --- a/multiple-emails.js +++ b/multiple-emails.js @@ -6,7 +6,7 @@ var defaults = { checkDupEmail: true, validate: true, - theme: "Bootstrap", + theme: "Bootstrap3", position: "top", placeholder: "" }; @@ -15,7 +15,7 @@ var settings = $.extend( {}, defaults, options ); var deleteIconHTML = ""; - if (settings.theme.toLowerCase() == "Bootstrap".toLowerCase() || settings.theme.toLowerCase() == "Bootstrap3".toLowerCase()) { + if (settings.theme.toLowerCase() == "Bootstrap3".toLowerCase()) { deleteIconHTML = ''; } else if (settings.theme.toLowerCase() == "SemanticUI".toLowerCase() || settings.theme.toLowerCase() == "Semantic-UI".toLowerCase() || settings.theme.toLowerCase() == "Semantic UI".toLowerCase()) { From 0064323fc48af3f3e60d0c1b83e43620bfdb5889 Mon Sep 17 00:00:00 2001 From: John Underwood Date: Thu, 21 Feb 2019 09:22:39 -0500 Subject: [PATCH 09/32] rename Bootstrap to Bootstrap3; rename Basic to Text; Basic theme now shows a times sign --- multiple-emails.js | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/multiple-emails.js b/multiple-emails.js index 5796205..f8bfc8f 100644 --- a/multiple-emails.js +++ b/multiple-emails.js @@ -6,7 +6,7 @@ var defaults = { checkDupEmail: true, validate: true, - theme: "Bootstrap3", + theme: "Basic", position: "top", placeholder: "" }; @@ -15,21 +15,22 @@ var settings = $.extend( {}, defaults, options ); var deleteIconHTML = ""; - if (settings.theme.toLowerCase() == "Bootstrap3".toLowerCase()) { + if (settings.theme.toLowerCase() == "Bootstrap3".toLowerCase() || settings.theme.toLowerCase() == "Bootstrap 3".toLowerCase()) { deleteIconHTML = ''; } else if (settings.theme.toLowerCase() == "SemanticUI".toLowerCase() || settings.theme.toLowerCase() == "Semantic-UI".toLowerCase() || settings.theme.toLowerCase() == "Semantic UI".toLowerCase()) { deleteIconHTML = ''; } - else if (settings.theme.toLowerCase() == "FontAwesome".toLowerCase() || settings.theme.toLowerCase() == "Font Awesome".toLowerCase()) { + else if (settings.theme.toLowerCase() == "FontAwesome5".toLowerCase() || settings.theme.toLowerCase() == "Font Awesome 5".toLowerCase()) { deleteIconHTML = ''; } - else if (settings.theme.toLowerCase() == "Simple".toLowerCase()) { - deleteIconHTML = ''; + else if (settings.theme.toLowerCase() == "Text".toLowerCase()) { + deleteIconHTML = '[Remove]'; } - else if (settings.theme.toLowerCase() == "Basic".toLowerCase()) { + else { // if (settings.theme.toLowerCase() == "Basic".toLowerCase()) { //Default which you should use if you don't use Bootstrap, SemanticUI, or other CSS frameworks - deleteIconHTML = 'Remove'; + //uses the HTML character 'heavy times sign'; https://www.fileformat.info/info/unicode/char/2716/index.htm + deleteIconHTML = ''; } return this.each(function() { From 8e31f7fb91e0cf81cd3fa5807c942945aebc5458 Mon Sep 17 00:00:00 2001 From: John Underwood Date: Thu, 21 Feb 2019 09:41:23 -0500 Subject: [PATCH 10/32] fix bug with making duplicates bold --- multiple-emails.js | 45 +++++++++++++++++++++++---------------------- 1 file changed, 23 insertions(+), 22 deletions(-) diff --git a/multiple-emails.js b/multiple-emails.js index f8bfc8f..9683298 100644 --- a/multiple-emails.js +++ b/multiple-emails.js @@ -4,7 +4,7 @@ // Default options var defaults = { - checkDupEmail: true, + checkForDuplicates: true, validate: true, theme: "Basic", position: "top", @@ -28,13 +28,13 @@ deleteIconHTML = '[Remove]'; } else { // if (settings.theme.toLowerCase() == "Basic".toLowerCase()) { - //Default which you should use if you don't use Bootstrap, SemanticUI, or other CSS frameworks - //uses the HTML character 'heavy times sign'; https://www.fileformat.info/info/unicode/char/2716/index.htm + // Default which you should use if you don't use Bootstrap, SemanticUI, or other CSS frameworks + // uses the 'heavy multiplication x' HTML entity; https://www.fileformat.info/info/unicode/char/2716/index.htm deleteIconHTML = ''; } return this.each(function() { - //$orig refers to the input HTML node + // $orig refers to the input HTML node var $orig = $(this); var $list = $('
      '); // create html elements - list of email addresses as unordered list @@ -60,22 +60,22 @@ keynum = e.which; } - //if(event.which == 8 && input_length == 0) { $list.find('li').last().remove(); } //Removes last item on backspace with no input + // if(event.which == 8 && input_length == 0) { $list.find('li').last().remove(); } //Removes last item on backspace with no input // Supported key press is tab, enter, space or comma, there is no support for semi-colon since the keyCode differs in various browsers if(keynum == 9 || keynum == 32 || keynum == 188) { - display_email($(this), settings.checkDupEmail, settings.validate); + display_email($(this), settings.checkForDuplicates, settings.validate); } else if (keynum == 13) { - display_email($(this), settings.checkDupEmail, settings.validate); - //Prevents enter key default - //This is to prevent the form from submitting with the submit button - //when you press enter in the email textbox + display_email($(this), settings.checkForDuplicates, settings.validate); + // Prevents enter key default + // This is to prevent the form from submitting with the submit button + // when you press enter in the email textbox e.preventDefault(); } }).on('blur', function(event){ - if ($(this).val() != '') { display_email($(this), settings.checkDupEmail, settings.validate); } + if ($(this).val() != '') { display_email($(this), settings.checkForDuplicates, settings.validate); } }); var $container = $('
      ').click(function() { $input.focus(); } ); // container div @@ -92,34 +92,35 @@ As such, the string is tokenized, with each token validated individually if validate variable is set to true. - If the dupEmailCheck variable is set to true, scans for duplicate emails, and invalidates input if found. - Otherwise allows emails to have duplicated values if false. + If the checkForDuplicates variable is set to true, scans for duplicate emails, and + invalidates input if found. Otherwise allows emails to have duplicated values if false. */ - function display_email(t, dupEmailCheck, validate) { + function display_email(t, checkForDuplicates, validate) { - //Remove space, comma and semi-colon from beginning and end of string - //Does not remove inside the string as the email will need to be tokenized using space, comma and semi-colon + // Remove space, comma and semi-colon from beginning and end of string + // Does not remove inside the string as the email will need to be tokenized using space, comma and semi-colon var arr = t.val().trim().replace(/^,|,$/g , '').replace(/^;|;$/g , ''); - //Remove the double quote + // Remove the double quote arr = arr.replace(/"/g,""); - //Split the string into an array, with the space, comma, and semi-colon as the separator + // Split the string into an array, with the space, comma, and semi-colon as the separator arr = arr.split(/[\s,;]+/); - var errorEmails = new Array(); //New array to contain the errors + var errorEmails = new Array(); // New array to contain the errors var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i); for (var i = 0; i < arr.length; i++) { - //Check if the email is already added, only if dupEmailCheck is set to true - if ( dupEmailCheck === true && $orig.val().indexOf(arr[i]) != -1 ) { + // Check if the email is already added, only if checkForDuplicates is set to true + if ( checkForDuplicates === true && $orig.val().indexOf(arr[i]) != -1 ) { if (arr[i] && arr[i].length > 0) { new function () { - var existingElement = $list.find('.email_name[data-email=' + arr[i].toLowerCase().replace('.', '\\.').replace('@', '\\@') + ']'); + var existingElement = $list.find('.email_name[data-email="' + arr[i].toLowerCase().replace('.', '\\.').replace('@', '\\@') + '"]'); existingElement.css('font-weight', 'bold'); setTimeout(function() { existingElement.css('font-weight', ''); }, 1500); }(); // Use a IIFE function to create a new scope so existingElement won't be overriden } } + // Check if the email is a valid address, only if validate is set to true else if (validate === true && pattern.test(arr[i]) == true) { $list.append($('
    • ') .prepend($(deleteIconHTML) From a936fb27dfc4c7ce3361532d28bc15b5ce4069e2 Mon Sep 17 00:00:00 2001 From: John Underwood Date: Thu, 21 Feb 2019 09:41:40 -0500 Subject: [PATCH 11/32] update README --- README.md | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index d65b7f7..087c7e4 100644 --- a/README.md +++ b/README.md @@ -7,10 +7,14 @@ This is forked from Pierre Clavequin's project at https://github.com/pierresh/mu ## New features are: +- "Basic" theme is now the default theme +- "Basic" theme now displays a "heavy multiplication x" (✖) for the Remove icon +- rename old "Basic" theme to "Text" for clarity - rename "Bootstrap" theme to "Bootstrap3" for clarity -- new "FontAwesome" theme -- new "Simple" theme -- add option to validate input or not (default is true) +- new "FontAwesome5" theme +- add option to "validate" input or not (default is true) + +## Original README... This is an improved version of the original work of Jamie Bradley http://t2a.co/blog/index.php/multiple-value-input-field-with-jquery/. @@ -24,8 +28,11 @@ This is an improved version of the original work of Jamie Bradley http://t2a.co/ ## Options +```javascript $(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 + position: 'top', // Display the added emails above the input + theme: 'FontAwesome5', // Basic is the default theme + checkDupEmail: true, // Should check for duplicate emails added + validate: false // Should not validate input as email address(es) }); +``` From b8227365995e5b4bf6d3c5085066bbc3937ae308 Mon Sep 17 00:00:00 2001 From: John Underwood Date: Thu, 21 Feb 2019 09:42:01 -0500 Subject: [PATCH 12/32] update examples --- example.html | 133 +++++++++++++++++++++++++++++++++++++-------------- 1 file changed, 98 insertions(+), 35 deletions(-) diff --git a/example.html b/example.html index 64951fa..22157a3 100644 --- a/example.html +++ b/example.html @@ -3,42 +3,43 @@ Multiple Emails - + - + - + - - + + + + - +
      -

      Bootstrap Example

      +

      Bootstrap3 Example

      Input email addresses

      @@ -78,39 +103,77 @@

      Current email addresses


      + + +
      +
      +

      SemanticUI Example

      +
      +
      +

      Input email addresses

      + +
      +
      +

      Current email addresses

      +
      
      +				
      +
      +
      +
      +
      + + +
      +
      +

      FontAwesome Example

      +
      +
      +

      Input email addresses

      + +
      +
      +

      Current email addresses

      +
      
      +				
      +
      +
      +
      +
      +
      -
      -
      -

      SemanticUI Example

      +
      +

      Text Example

      +
      +
      +

      Input email addresses

      +
      - -
      -
      -

      Input email addresses

      - -
      -
      -

      Current email addresses

      -
      
      -					
      +
      +

      Current email addresses

      +
      
       				
      +

      +
      - +

      Basic Example

      -
      +
      +

      Input email addresses

      -
      +

      Current email addresses

      
       				
      +
      +
      - + From 8467a9544cb80a33fb0ff58fb508a87706e5ce34 Mon Sep 17 00:00:00 2001 From: John Underwood Date: Thu, 21 Feb 2019 09:44:07 -0500 Subject: [PATCH 13/32] minor code indentation update --- multiple-emails.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/multiple-emails.js b/multiple-emails.js index 9683298..93564c1 100644 --- a/multiple-emails.js +++ b/multiple-emails.js @@ -29,7 +29,7 @@ } else { // if (settings.theme.toLowerCase() == "Basic".toLowerCase()) { // Default which you should use if you don't use Bootstrap, SemanticUI, or other CSS frameworks - // uses the 'heavy multiplication x' HTML entity; https://www.fileformat.info/info/unicode/char/2716/index.htm + // uses the 'heavy multiplication x' HTML entity; https://www.fileformat.info/info/unicode/char/2716/index.htm deleteIconHTML = ''; } From 91d3630da3c5415b8083599a71bb9f0d23dbdc84 Mon Sep 17 00:00:00 2001 From: John Underwood Date: Thu, 21 Feb 2019 09:50:43 -0500 Subject: [PATCH 14/32] rename FontAwesome5 to FontAwesome, since the icon is available in both FA4 and FA5 --- README.md | 14 ++++++-------- example.html | 6 +++--- multiple-emails.js | 2 +- 3 files changed, 10 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index 087c7e4..ddd6ece 100644 --- a/README.md +++ b/README.md @@ -3,22 +3,20 @@ multiple-emails.js Enter multiple emails in a single input field with jQuery. -This is forked from Pierre Clavequin's project at https://github.com/pierresh/multiple-emails.js. +This project is forked from Pierre Clavequin's project at https://github.com/pierresh/multiple-emails.js. -## New features are: +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: - "Basic" theme is now the default theme - "Basic" theme now displays a "heavy multiplication x" (✖) for the Remove icon - rename old "Basic" theme to "Text" for clarity - rename "Bootstrap" theme to "Bootstrap3" for clarity -- new "FontAwesome5" theme +- new "FontAwesome" theme - add option to "validate" input or not (default is true) -## Original README... - -This 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 are: +## New features added to Jamie's work: - can display emails once the page is loaded - check integrity of inputted email address diff --git a/example.html b/example.html index 22157a3..e3e9055 100644 --- a/example.html +++ b/example.html @@ -15,7 +15,7 @@ - + @@ -47,10 +47,10 @@ }); }); - // Plug-in function for the FontAwesome5 version of the multiple email + // Plug-in function for the FontAwesome version of the multiple email $(function() { //To render the input device to multiple email input using a simple hyperlink text - $('#example_emailFA').multiple_emails({theme: "FontAwesome5"}); + $('#example_emailFA').multiple_emails({theme: "FontAwesome"}); //Shows the value of the input device, which is in JSON format $('#current_emailsFA').text($('#example_emailFA').val()); diff --git a/multiple-emails.js b/multiple-emails.js index 93564c1..ce0632d 100644 --- a/multiple-emails.js +++ b/multiple-emails.js @@ -21,7 +21,7 @@ else if (settings.theme.toLowerCase() == "SemanticUI".toLowerCase() || settings.theme.toLowerCase() == "Semantic-UI".toLowerCase() || settings.theme.toLowerCase() == "Semantic UI".toLowerCase()) { deleteIconHTML = ''; } - else if (settings.theme.toLowerCase() == "FontAwesome5".toLowerCase() || settings.theme.toLowerCase() == "Font Awesome 5".toLowerCase()) { + else if (settings.theme.toLowerCase() == "FontAwesome".toLowerCase() || settings.theme.toLowerCase() == "Font Awesome".toLowerCase()) { deleteIconHTML = ''; } else if (settings.theme.toLowerCase() == "Text".toLowerCase()) { From 1c3aec5f85a080dd749baccc771fcb3820c10367 Mon Sep 17 00:00:00 2001 From: John Underwood Date: Thu, 21 Feb 2019 09:51:52 -0500 Subject: [PATCH 15/32] minor changes --- README.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index ddd6ece..3c08641 100644 --- a/README.md +++ b/README.md @@ -27,10 +27,10 @@ Pierre's project is an improved version of the original work of Jamie Bradley ht ## Options ```javascript - $(selector).multiple_emails({ - position: 'top', // Display the added emails above the input - theme: 'FontAwesome5', // Basic is the default theme - checkDupEmail: true, // Should check for duplicate emails added - validate: false // Should not validate input as email address(es) - }); +$(selector).multiple_emails({ + position: 'top', // Display the added emails above the input + theme: 'FontAwesome5', // Basic is the default theme + checkDupEmail: true, // Should check for duplicate emails added + validate: false // Should not validate input as email address(es) +}); ``` From 10b70f462493971aff5763667fd361acc609ce7f Mon Sep 17 00:00:00 2001 From: John Underwood Date: Thu, 21 Feb 2019 09:52:14 -0500 Subject: [PATCH 16/32] minor changes --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 3c08641..becfb3c 100644 --- a/README.md +++ b/README.md @@ -28,9 +28,9 @@ Pierre's project is an improved version of the original work of Jamie Bradley ht ```javascript $(selector).multiple_emails({ - position: 'top', // Display the added emails above the input - theme: 'FontAwesome5', // Basic is the default theme - checkDupEmail: true, // Should check for duplicate emails added - validate: false // Should not validate input as email address(es) + position: 'top', // Display the added emails above the input + theme: 'FontAwesome5', // Basic is the default theme + checkDupEmail: true, // Should check for duplicate emails added + validate: false // Should not validate input as email address(es) }); ``` From 3562e7f26bb738758c830aa3ca44821d600ba3ae Mon Sep 17 00:00:00 2001 From: John Underwood Date: Thu, 21 Feb 2019 09:53:21 -0500 Subject: [PATCH 17/32] minor changes --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index becfb3c..f8d7bc5 100644 --- a/README.md +++ b/README.md @@ -11,10 +11,10 @@ Pierre's project is an improved version of the original work of Jamie Bradley ht - "Basic" theme is now the default theme - "Basic" theme now displays a "heavy multiplication x" (✖) for the Remove icon -- rename old "Basic" theme to "Text" for clarity -- rename "Bootstrap" theme to "Bootstrap3" for clarity -- new "FontAwesome" theme -- add option to "validate" input or not (default is true) +- renamed old "Basic" theme to "Text" for clarity +- renamed "Bootstrap" theme to "Bootstrap3" for clarity +- added new "FontAwesome" theme +- added option to "validate" input or not (default is true) ## New features added to Jamie's work: From dae41afb3640391d2ef772de505684eac4f9af84 Mon Sep 17 00:00:00 2001 From: John Underwood Date: Thu, 21 Feb 2019 09:58:32 -0500 Subject: [PATCH 18/32] minor changes --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index f8d7bc5..473856f 100644 --- a/README.md +++ b/README.md @@ -28,9 +28,9 @@ Pierre's project is an improved version of the original work of Jamie Bradley ht ```javascript $(selector).multiple_emails({ - position: 'top', // Display the added emails above the input - theme: 'FontAwesome5', // Basic is the default theme - checkDupEmail: true, // Should check for duplicate emails added - validate: false // Should not validate input as email address(es) + position: 'top', // Display the added emails above the input + theme: 'FontAwesome', // Basic is the default theme + checkDupEmail: true, // Should check for duplicate emails added + validate: false // Should not validate input as email address(es) }); ``` From 754142e2539a974d53444ef80f778e0b69b519a9 Mon Sep 17 00:00:00 2001 From: John Underwood Date: Thu, 21 Feb 2019 10:07:51 -0500 Subject: [PATCH 19/32] minor changes --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 473856f..6fe7f47 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ This project is forked from Pierre Clavequin's project at https://github.com/pie 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: +## New features added to Pierre's work by John: - "Basic" theme is now the default theme - "Basic" theme now displays a "heavy multiplication x" (✖) for the Remove icon @@ -16,7 +16,7 @@ Pierre's project is an improved version of the original work of Jamie Bradley ht - added new "FontAwesome" theme - added option to "validate" input or not (default is true) -## New features added to Jamie's work: +## New features added to Jamie's work by Pierre (and others): - can display emails once the page is loaded - check integrity of inputted email address From b5163b46dc2afbcb7e39cd8f4f5e92582022f4aa Mon Sep 17 00:00:00 2001 From: John Underwood Date: Thu, 21 Feb 2019 10:09:47 -0500 Subject: [PATCH 20/32] minor changes --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 6fe7f47..42a0ef7 100644 --- a/README.md +++ b/README.md @@ -28,9 +28,9 @@ Pierre's project is an improved version of the original work of Jamie Bradley ht ```javascript $(selector).multiple_emails({ - position: 'top', // Display the added emails above the input - theme: 'FontAwesome', // Basic is the default theme - checkDupEmail: true, // Should check for duplicate emails added - validate: false // Should not validate input as email address(es) + position: 'top', // Display the added emails above the input + theme: 'FontAwesome', // Basic is the default theme + checkForDuplicates: true, // Should check for duplicate emails added + validate: false // Should not check for valid email address format }); ``` From a62cd637443c9305d41f875660a4d950267a3566 Mon Sep 17 00:00:00 2001 From: John Underwood Date: Thu, 21 Feb 2019 10:12:11 -0500 Subject: [PATCH 21/32] update Options section --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 42a0ef7..f4c885a 100644 --- a/README.md +++ b/README.md @@ -31,6 +31,7 @@ $(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 - validate: false // Should not check for valid email address format + validate: false, // Should not check for valid email address format + placeholder: 'Email' // Use placeholder text }); ``` From f8b876eb7a0fe920992f4b40055f738b5ac512eb Mon Sep 17 00:00:00 2001 From: John Underwood Date: Thu, 21 Feb 2019 12:26:44 -0500 Subject: [PATCH 22/32] change validate option to checkForEmail and use it when detecting key presses --- README.md | 2 +- multiple-emails.js | 37 +++++++++++++++++++++---------------- 2 files changed, 22 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index f4c885a..c09b91f 100644 --- a/README.md +++ b/README.md @@ -31,7 +31,7 @@ $(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 - validate: false, // Should not check for valid email address format + checkForEmail: false, // Should not check for valid email address format placeholder: 'Email' // Use placeholder text }); ``` diff --git a/multiple-emails.js b/multiple-emails.js index ce0632d..78d8c72 100644 --- a/multiple-emails.js +++ b/multiple-emails.js @@ -5,7 +5,7 @@ // Default options var defaults = { checkForDuplicates: true, - validate: true, + checkForEmail: true, theme: "Basic", position: "top", placeholder: "" @@ -62,20 +62,20 @@ // if(event.which == 8 && input_length == 0) { $list.find('li').last().remove(); } //Removes last item on backspace with no input - // Supported key press is tab, enter, space or comma, there is no support for semi-colon since the keyCode differs in various browsers - if(keynum == 9 || keynum == 32 || keynum == 188) { - display_email($(this), settings.checkForDuplicates, settings.validate); + // For email addresses, supported key press is tab, enter, space or comma, there is no support for semi-colon since the keyCode differs in various browsers + if (settings.checkForEmail === true && (keynum == 9 || keynum == 32 || keynum == 188)) { + display_email($(this), settings.checkForDuplicates, settings.checkForEmail); } else if (keynum == 13) { - display_email($(this), settings.checkForDuplicates, settings.validate); + display_email($(this), settings.checkForDuplicates, settings.checkForEmail); // Prevents enter key default - // This is to prevent the form from submitting with the submit button + // This is to prevent the form from submitting with the submit button // when you press enter in the email textbox e.preventDefault(); } }).on('blur', function(event){ - if ($(this).val() != '') { display_email($(this), settings.checkForDuplicates, settings.validate); } + if ($(this).val() != '') { display_email($(this), settings.checkForDuplicates, settings.checkForEmail); } }); var $container = $('
      ').click(function() { $input.focus(); } ); // container div @@ -89,21 +89,26 @@ /* t is the text input device. Value of the input could be a long line of copy-pasted emails, not just a single email. - As such, the string is tokenized, with each token validated individually if validate + As such, the string is tokenized, with each token validated individually if checkForEmail variable is set to true. If the checkForDuplicates variable is set to true, scans for duplicate emails, and invalidates input if found. Otherwise allows emails to have duplicated values if false. */ - function display_email(t, checkForDuplicates, validate) { + function display_email(t, checkForDuplicates, checkForEmail) { // Remove space, comma and semi-colon from beginning and end of string // Does not remove inside the string as the email will need to be tokenized using space, comma and semi-colon var arr = t.val().trim().replace(/^,|,$/g , '').replace(/^;|;$/g , ''); - // Remove the double quote - arr = arr.replace(/"/g,""); - // Split the string into an array, with the space, comma, and semi-colon as the separator - arr = arr.split(/[\s,;]+/); + if (checkForEmail) { + // Remove the double quote + arr = arr.replace(/"/g,""); + // Split the string into an array, with the space, comma, and semi-colon as the separator + arr = arr.split(/[\s,;]+/); + } + else { + arr = arr.split(); + } var errorEmails = new Array(); // New array to contain the errors @@ -120,15 +125,15 @@ }(); // Use a IIFE function to create a new scope so existingElement won't be overriden } } - // Check if the email is a valid address, only if validate is set to true - else if (validate === true && pattern.test(arr[i]) == true) { + // Check if the email is a valid address, only if checkForEmail is set to true + else if (checkForEmail === true && pattern.test(arr[i]) == true) { $list.append($('
    • ') .prepend($(deleteIconHTML) .click(function(e) { $(this).parent().remove(); refresh_emails(); e.preventDefault(); }) ) ); } - else if (validate === false) { + else if (checkForEmail === false) { $list.append($('
    • ') .prepend($(deleteIconHTML) .click(function(e) { $(this).parent().remove(); refresh_emails(); e.preventDefault(); }) From de2a2e68fbf9d536a5f658dc29fb80027f790b3c Mon Sep 17 00:00:00 2001 From: John Underwood Date: Thu, 21 Feb 2019 13:21:43 -0500 Subject: [PATCH 23/32] update README --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index c09b91f..e42f74b 100644 --- a/README.md +++ b/README.md @@ -14,7 +14,7 @@ Pierre's project is an improved version of the original work of Jamie Bradley ht - renamed old "Basic" theme to "Text" for clarity - renamed "Bootstrap" theme to "Bootstrap3" for clarity - added new "FontAwesome" theme -- added option to "validate" input or not (default is true) +- added option to "checkForEmail" formatting or not (default is true) ## New features added to Jamie's work by Pierre (and others): From f31c69e88a0f896bd3911a5412bb8267bd524f7e Mon Sep 17 00:00:00 2001 From: John Underwood Date: Thu, 21 Feb 2019 13:47:42 -0500 Subject: [PATCH 24/32] no underline when hovering over Remove icon --- multiple-emails.css | 55 ++++++++++++++++++++++++--------------------- 1 file changed, 29 insertions(+), 26 deletions(-) diff --git a/multiple-emails.css b/multiple-emails.css index 93821e9..f35fcae 100644 --- a/multiple-emails.css +++ b/multiple-emails.css @@ -1,17 +1,17 @@ -.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 { + 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 input { - clear:both; - width:100%; - border:0; - outline: none; - margin-bottom:3px; - padding-left: 5px; +.multiple_emails-container input { + clear:both; + width:100%; + border:0; + outline: none; + margin-bottom:3px; + padding-left: 5px; box-sizing: border-box; } @@ -19,26 +19,29 @@ 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; } -.multiple_emails-close { - float:left; +.multiple_emails-close { + float:left; margin:0 3px; +} + +a.multiple_emails-close:hover { text-decoration:none; } From d8f4b4288a69583be3c1ba8e08d0efe152876611 Mon Sep 17 00:00:00 2001 From: John Underwood Date: Thu, 21 Feb 2019 13:49:08 -0500 Subject: [PATCH 25/32] no underline ever for Remove icon --- multiple-emails.css | 1 + 1 file changed, 1 insertion(+) diff --git a/multiple-emails.css b/multiple-emails.css index f35fcae..6efa9f8 100644 --- a/multiple-emails.css +++ b/multiple-emails.css @@ -40,6 +40,7 @@ .multiple_emails-close { float:left; margin:0 3px; + text-decoration:none; } a.multiple_emails-close:hover { From e3300b2baa01afc724488e697d8e4a1818e9629a Mon Sep 17 00:00:00 2001 From: John Underwood Date: Thu, 21 Feb 2019 13:56:54 -0500 Subject: [PATCH 26/32] minor changes to examples page --- example.html | 29 +++++++++++++++-------------- 1 file changed, 15 insertions(+), 14 deletions(-) diff --git a/example.html b/example.html index e3e9055..75c17ce 100644 --- a/example.html +++ b/example.html @@ -1,29 +1,29 @@ - + Multiple Emails - + - + - +