email_name_textfield 0.0.1 → 0.0.2
Sign up to get free protection for your applications and to get access to all the features.
data/.gitignore
CHANGED
data/GETTING_STARTED.md
ADDED
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
# Understanding the Methods
|
|
2
|
+
|
|
3
|
+
## Regular Expressions
|
|
4
|
+
|
|
5
|
+
There are 3 regular expressions used in this app:
|
|
6
|
+
* IP_LOOK_ALIKE: used to disallow an e-mail address with at domain made up of only numbers
|
|
7
|
+
* EMAIL_PATTERN: used to match properly formatted email addresses
|
|
8
|
+
* NAME_PATTERN: is looking for names in the format of John Doe, or Doe, John it also excepts
|
|
9
|
+
multiple names, but will place the extra names as part of the lastName value
|
|
10
|
+
|
|
11
|
+
### email_with_name_pattern
|
|
12
|
+
This puts all the above regular expressions into one regular expression with groupings
|
|
13
|
+
around the:
|
|
14
|
+
* The full input string
|
|
15
|
+
* Quote (this is to make sure name strings are matched with 2 " or 2 ')
|
|
16
|
+
* The First name string
|
|
17
|
+
* A comma if found
|
|
18
|
+
* The Last name string
|
|
19
|
+
* The email address
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
## Methods
|
|
23
|
+
|
|
24
|
+
### add_name_data
|
|
25
|
+
This takes in all the name data that has been returned by the regular expression groupings.
|
|
26
|
+
first name, last name and e-mail are added to the new element. In this method, we
|
|
27
|
+
check for the comma, if a comma exists, then we assume the name was passed in in
|
|
28
|
+
the format of: Last, First instead of First Last. In this case, we simply
|
|
29
|
+
switch the first and last names.
|
|
30
|
+
|
|
31
|
+
### check_email_input
|
|
32
|
+
This is where all the validation is performed.
|
|
33
|
+
|
|
34
|
+
First, we get the text that has been entered into the text field. "(" characters
|
|
35
|
+
are replaced with " (" for easier parsing, since Hotmail does not put a space between
|
|
36
|
+
the last name character and the beginning of the email string. Also a space is insert after
|
|
37
|
+
any comma, to secure easier matching.
|
|
38
|
+
|
|
39
|
+
An initial split is done on the input data to break it up based on carriage returns and semi-colons
|
|
40
|
+
and then it loops through this array.
|
|
41
|
+
|
|
42
|
+
Each element is matched on the full name pattern, which will group out:
|
|
43
|
+
* The full input string
|
|
44
|
+
* Quote (this is to make sure name strings are matched with 2 " or 2 ')
|
|
45
|
+
* The First name string
|
|
46
|
+
* A comma if found
|
|
47
|
+
* The Last name string
|
|
48
|
+
* The email address
|
|
49
|
+
|
|
50
|
+
An email "pill" is created from this data. If the e-mail is valid, it will display
|
|
51
|
+
as pill-email, otherwise it will display as pill-invalid.
|
|
52
|
+
|
|
53
|
+
The "extra-chars" is because the match algorithm will drop unmatched characters, so
|
|
54
|
+
by stripping off the matched e-mail, extra characters can be evaluated and at least
|
|
55
|
+
marked as invalid so all entered data is checked.
|
|
56
|
+
|
|
57
|
+
### click_wrapper
|
|
58
|
+
Hides the placeholder text and any existing error messages then places the focus on the
|
|
59
|
+
input text field
|
|
60
|
+
|
|
61
|
+
### create_element
|
|
62
|
+
This is passed in both the text and the class of the pill element to be created.
|
|
63
|
+
A new "li" element is crated and added the specified class. From there the e-mail
|
|
64
|
+
address, first name and last name is added as the element's data. Finally, the new element is
|
|
65
|
+
added to the div, just ahead of the input field.
|
|
66
|
+
|
|
67
|
+
### edit_element
|
|
68
|
+
This method is called when the user clicks on an e-mail pill that has already been
|
|
69
|
+
validated. It turns the input data in the pill into an input text field and allows
|
|
70
|
+
the user to edit the content.
|
|
71
|
+
|
|
72
|
+
### invalid_email_count
|
|
73
|
+
Returns the number of invalid emails entered
|
|
74
|
+
|
|
75
|
+
### keydown_input
|
|
76
|
+
This is called when the user presses a key in the input field. It checks to see if the
|
|
77
|
+
pressed key was the enter or tab, if so, it performs an e-mail validation on the
|
|
78
|
+
value that is in the input field.
|
|
79
|
+
|
|
80
|
+
If a Backspace or Delete key has been entered, it will remove the last email that
|
|
81
|
+
had been validated.
|
|
82
|
+
|
|
83
|
+
### name_data
|
|
84
|
+
Returns an array of objects containing the name and e-mail address of each email node
|
|
85
|
+
{ firstName: "Mary", lastName: "Smith", email: "msmith@example.com" }
|
|
86
|
+
|
|
87
|
+
### remove_element
|
|
88
|
+
This method is called when the user clicks on the X icon on the right if the pill. It will
|
|
89
|
+
remove the email from the DOM. This is also called if the user types a backspace or
|
|
90
|
+
delete. In which case it will delete the pill just before the input field.
|
|
91
|
+
|
|
92
|
+
### reset
|
|
93
|
+
Removes all the email nodes from the input area (valid and invalid)
|
|
94
|
+
|
|
95
|
+
### reset_email_input
|
|
96
|
+
Places the input field at the end of whatever e-mail nodes may be apparent and sets
|
|
97
|
+
the focus on the input field.
|
|
98
|
+
|
|
99
|
+
### toggle_sample_text
|
|
100
|
+
Checks to see if there are any email nodes validated, if not, displays the placeholder text
|
|
101
|
+
|
|
102
|
+
### total_email_count
|
|
103
|
+
Returns the total number of emails validated (both invalid and valid)
|
|
104
|
+
|
|
105
|
+
### valid_email_count
|
|
106
|
+
Returns the number of valid emails entered
|
|
107
|
+
|
|
108
|
+
### validate_input
|
|
109
|
+
This is called when the user pastes an email list into the input textfield or when
|
|
110
|
+
a blur on the input field is triggered. It simply changes the visibility (if necessary)
|
|
111
|
+
of the placeholder text and then goes into validation of the input text.
|
|
112
|
+
|
data/README.md
CHANGED
|
@@ -4,9 +4,14 @@ Text area entry tool that allows you to paste e-mail names and addresses from co
|
|
|
4
4
|
mail clients such as Gmail, Yahoo! and Outlook. This tool will recognize the pasted
|
|
5
5
|
input and parse out the first and last name as well as validating the e-mail address.
|
|
6
6
|
|
|
7
|
+
## Demo
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
7
11
|
## Requirements
|
|
8
12
|
|
|
9
13
|
* Rails
|
|
14
|
+
* JQuery
|
|
10
15
|
* CoffeeScript
|
|
11
16
|
* Backbone.js
|
|
12
17
|
* Underscore.js
|
|
@@ -26,6 +31,10 @@ Backbone.js and Underscore.js:
|
|
|
26
31
|
|
|
27
32
|
//= require email_name_textfield
|
|
28
33
|
|
|
34
|
+
Include the css file in your application.css file:
|
|
35
|
+
|
|
36
|
+
@import "email_name_textfield";
|
|
37
|
+
|
|
29
38
|
## Usage
|
|
30
39
|
|
|
31
40
|
Reference this text area by creating a new object:
|
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
#input_wrapper {
|
|
2
|
+
border: solid 1px #c9c9c9;
|
|
3
|
+
height: 150px;
|
|
4
|
+
padding: 10px;
|
|
5
|
+
-webkit-border-radius: 3px;
|
|
6
|
+
-moz-border-radius: 3px;
|
|
7
|
+
border-radius: 3px;
|
|
8
|
+
overflow-y: auto;
|
|
9
|
+
margin: 20px 0;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
#input_wrapper .example-text {
|
|
13
|
+
color: #5b5b5b;
|
|
14
|
+
font-style: italic;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
#input_wrapper ul {
|
|
18
|
+
margin: 0;
|
|
19
|
+
padding: 0;
|
|
20
|
+
list-style-type: none;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
#input_wrapper ul li.pill {
|
|
24
|
+
margin-right: 3px;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
#email_input {
|
|
28
|
+
border: none;
|
|
29
|
+
width: 90%;
|
|
30
|
+
height: 100%;
|
|
31
|
+
background-color: white;
|
|
32
|
+
padding: 2px;
|
|
33
|
+
line-height: 20px;
|
|
34
|
+
resize: none;
|
|
35
|
+
outline: none;
|
|
36
|
+
-webkit-box-shadow: none;
|
|
37
|
+
-moz-box-shadow: none;
|
|
38
|
+
box-shadow: none;
|
|
39
|
+
-webkit-transition: none;
|
|
40
|
+
-moz-transition: none;
|
|
41
|
+
-o-transition: none;
|
|
42
|
+
transition: none;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
#input_wrapper ul li.input-target {
|
|
46
|
+
padding: 0;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.pill {
|
|
50
|
+
display: inline-block;
|
|
51
|
+
font-size: 13px;
|
|
52
|
+
padding: 2px 10px;
|
|
53
|
+
text-shadow: none;
|
|
54
|
+
vertical-align: initial;
|
|
55
|
+
-webkit-border-radius: 4px;
|
|
56
|
+
-moz-border-radius: 4px;
|
|
57
|
+
border-radius: 4px;
|
|
58
|
+
-webkit-transition: background 0.1s ease-in;
|
|
59
|
+
-moz-transition: background 0.1s ease-in;
|
|
60
|
+
-o-transition: background 0.1s ease-in;
|
|
61
|
+
transition: background 0.1s ease-in;
|
|
62
|
+
background: #e9e9e9;
|
|
63
|
+
color: #404040;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.pill:hover {
|
|
67
|
+
color: #262626;
|
|
68
|
+
background: #c0c0c0;
|
|
69
|
+
text-decoration: none;
|
|
70
|
+
cursor: pointer;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.pill:hover .close {
|
|
74
|
+
color: #262626;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.pill > span {
|
|
78
|
+
float: left;
|
|
79
|
+
margin-right: 8px;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.pill > .close {
|
|
83
|
+
color: #404040;
|
|
84
|
+
font: 14px Arial;
|
|
85
|
+
font-weight: bold;
|
|
86
|
+
line-height: 20px;
|
|
87
|
+
text-shadow: none;
|
|
88
|
+
padding: 0 5px 0 10px;
|
|
89
|
+
margin-left: -10px;
|
|
90
|
+
margin-right: -5px;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.pill.pill-email {
|
|
94
|
+
background: #ffebba;
|
|
95
|
+
color: #8e4a00;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.pill.pill-email:hover {
|
|
99
|
+
background: #fbdb90;
|
|
100
|
+
color: #8a3400;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.pill.pill-email:hover > .close {
|
|
104
|
+
color: #8a3400;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.pill.pill-email .close {
|
|
108
|
+
color: #8e4a00;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.pill.pill-invalid {
|
|
112
|
+
background: #f9c2ba;
|
|
113
|
+
color: #680103;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.pill.pill-invalid:hover {
|
|
117
|
+
background: #fd8078;
|
|
118
|
+
color: #470102;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.pill.pill-invalid:hover > .close {
|
|
122
|
+
color: #470102;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.pill.pill-invalid > .close {
|
|
126
|
+
color: #680103;
|
|
127
|
+
}
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: email_name_textfield
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.0.
|
|
4
|
+
version: 0.0.2
|
|
5
5
|
prerelease:
|
|
6
6
|
platform: ruby
|
|
7
7
|
authors:
|
|
@@ -9,7 +9,7 @@ authors:
|
|
|
9
9
|
autorequire:
|
|
10
10
|
bindir: bin
|
|
11
11
|
cert_chain: []
|
|
12
|
-
date: 2013-05-
|
|
12
|
+
date: 2013-05-16 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: bundler
|
|
@@ -68,6 +68,7 @@ extensions: []
|
|
|
68
68
|
extra_rdoc_files: []
|
|
69
69
|
files:
|
|
70
70
|
- .gitignore
|
|
71
|
+
- GETTING_STARTED.md
|
|
71
72
|
- Gemfile
|
|
72
73
|
- LICENSE.txt
|
|
73
74
|
- README.md
|
|
@@ -78,6 +79,7 @@ files:
|
|
|
78
79
|
- vendor/assets/javascripts/email_input_area_view.coffee
|
|
79
80
|
- vendor/assets/javascripts/email_name_textfield.js
|
|
80
81
|
- vendor/assets/javascripts/setup.coffee
|
|
82
|
+
- vendor/assets/stylesheets/email_name_textfield.css
|
|
81
83
|
homepage: ''
|
|
82
84
|
licenses:
|
|
83
85
|
- MIT
|