email_name_textfield 0.0.1 → 0.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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
|