ustyle 1.12.6 → 1.14.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/dist/ustyle-content.css +1 -1
- data/dist/ustyle-latest.css +1 -1
- data/dist/ustyle.js +0 -301
- data/dist/ustyle.json +1 -1
- data/dist/ustyle.min.js +1 -1
- data/lib/ustyle/version.rb +1 -1
- data/package.json +1 -1
- data/styleguide/assets/images/favicon/android-chrome-192x192.png +0 -0
- data/styleguide/assets/images/favicon/android-chrome-512x512.png +0 -0
- data/styleguide/assets/images/favicon/apple-touch-icon-114x114.png +0 -0
- data/styleguide/assets/images/favicon/apple-touch-icon-120x120.png +0 -0
- data/styleguide/assets/images/favicon/apple-touch-icon-144x144.png +0 -0
- data/styleguide/assets/images/favicon/apple-touch-icon-152x152.png +0 -0
- data/styleguide/assets/images/favicon/apple-touch-icon-180x180.png +0 -0
- data/styleguide/assets/images/favicon/apple-touch-icon-57x57.png +0 -0
- data/styleguide/assets/images/favicon/apple-touch-icon-60x60.png +0 -0
- data/styleguide/assets/images/favicon/apple-touch-icon-72x72.png +0 -0
- data/styleguide/assets/images/favicon/apple-touch-icon-76x76.png +0 -0
- data/styleguide/assets/images/favicon/apple-touch-icon.png +0 -0
- data/styleguide/assets/images/favicon/browserconfig.xml +9 -0
- data/styleguide/assets/images/favicon/favicon-16x16.png +0 -0
- data/styleguide/assets/images/favicon/favicon-32x32.png +0 -0
- data/styleguide/assets/images/favicon/favicon.ico +0 -0
- data/styleguide/assets/images/favicon/manifest.json +18 -0
- data/styleguide/assets/images/favicon/mstile-144x144.png +0 -0
- data/styleguide/assets/images/favicon/mstile-150x150.png +0 -0
- data/styleguide/assets/images/favicon/mstile-310x150.png +0 -0
- data/styleguide/assets/images/favicon/mstile-310x310.png +0 -0
- data/styleguide/assets/images/favicon/mstile-70x70.png +0 -0
- data/styleguide/assets/images/favicon/safari-pinned-tab.svg +46 -0
- data/styleguide/assets/javascripts/app.js +2 -6
- data/styleguide/content/design/typography.md +64 -26
- data/styleguide/partials/_head.tpl +6 -0
- data/vendor/assets/javascripts/ustyle.js +1 -4
- data/vendor/assets/stylesheets/ustyle/_all.scss +0 -1
- data/vendor/assets/stylesheets/ustyle/_global.scss +0 -4
- data/vendor/assets/stylesheets/ustyle/basics/_variables.scss +2 -24
- data/vendor/assets/stylesheets/ustyle/components/_tabs.scss +0 -2
- metadata +25 -11
- data/vendor/assets/javascripts/ustyle/anchor.js +0 -300
- data/vendor/assets/javascripts/ustyle/login/login.js +0 -165
- data/vendor/assets/javascripts/ustyle/login/password-helper.js +0 -151
- data/vendor/assets/stylesheets/ustyle/basics/_font-face-ie.scss +0 -31
- data/vendor/assets/stylesheets/ustyle/basics/_font-face.scss +0 -31
- data/vendor/assets/stylesheets/ustyle/components/_anchor.scss +0 -134
- data/vendor/assets/stylesheets/ustyle/login/_base.scss +0 -81
- data/vendor/assets/stylesheets/ustyle/login/_password-help.scss +0 -61
- data/vendor/assets/stylesheets/ustyle/login/_social.scss +0 -63
@@ -1,300 +0,0 @@
|
|
1
|
-
var createContext;
|
2
|
-
var ref = this.Utils;
|
3
|
-
var merge = ref.merge;
|
4
|
-
var addClass = ref.addClass;
|
5
|
-
var hasClass = ref.hasClass;
|
6
|
-
var setOptions = ref.setOptions;
|
7
|
-
var removeClass = ref.removeClass;
|
8
|
-
var transformKey = ref.transformKey;
|
9
|
-
|
10
|
-
var indexOf = [].indexOf || function(item) {
|
11
|
-
for (var i = 0, l = this.length; i < l; i++) {
|
12
|
-
if (i in this && this[i] === item) {
|
13
|
-
return i;
|
14
|
-
}
|
15
|
-
} return -1;
|
16
|
-
};
|
17
|
-
|
18
|
-
createContext = function(options) {
|
19
|
-
var Anchor;
|
20
|
-
return Anchor = (function() {
|
21
|
-
var documentYBoundary;
|
22
|
-
var getXBounds;
|
23
|
-
var getYBounds;
|
24
|
-
|
25
|
-
Anchor.prototype.defaults = {
|
26
|
-
classPrefix: "us-anchor",
|
27
|
-
openEvent: "click",
|
28
|
-
showClose: true,
|
29
|
-
isAjax: false
|
30
|
-
};
|
31
|
-
|
32
|
-
function Anchor(options) {
|
33
|
-
var ref1 = this.options = setOptions(options, this.defaults);
|
34
|
-
var ref2;
|
35
|
-
this.target = ref1.target;
|
36
|
-
this.classPrefix = ref1.classPrefix;
|
37
|
-
|
38
|
-
if (this.target === null) {
|
39
|
-
return;
|
40
|
-
}
|
41
|
-
|
42
|
-
this._boundEvents = [];
|
43
|
-
this._closeTargets = [];
|
44
|
-
ref2 = this.create(),
|
45
|
-
this.anchor = ref2.anchor,
|
46
|
-
this.arrow = ref2.arrow,
|
47
|
-
this.content = ref2.content;
|
48
|
-
this.setEvents(this.anchor);
|
49
|
-
this.watchWindow();
|
50
|
-
}
|
51
|
-
|
52
|
-
Anchor.prototype.setEvents = function(anchor) {
|
53
|
-
var toggle = (function(_this) {
|
54
|
-
return function(event) {
|
55
|
-
event.preventDefault();
|
56
|
-
event.stopPropagation();
|
57
|
-
if (!_this.isOpen()) {
|
58
|
-
return _this.show(anchor);
|
59
|
-
} else {
|
60
|
-
return _this.hide(anchor);
|
61
|
-
}
|
62
|
-
};
|
63
|
-
})(this);
|
64
|
-
|
65
|
-
var hide = (function(_this) {
|
66
|
-
return function(event) {
|
67
|
-
var ref1;
|
68
|
-
if (!_this.isOpen()) {
|
69
|
-
return;
|
70
|
-
}
|
71
|
-
|
72
|
-
if (ref1 = event.target, indexOf.call(_this._closeTargets, ref1) >= 0) {
|
73
|
-
event.preventDefault();
|
74
|
-
event.stopPropagation();
|
75
|
-
_this.hide(anchor);
|
76
|
-
}
|
77
|
-
|
78
|
-
if (event.target === anchor || anchor.contains(event.target)) {
|
79
|
-
return;
|
80
|
-
}
|
81
|
-
|
82
|
-
if (event.target === _this.target || _this.target.contains(event.target)) {
|
83
|
-
return;
|
84
|
-
}
|
85
|
-
|
86
|
-
return _this.hide(anchor);
|
87
|
-
};
|
88
|
-
})(this);
|
89
|
-
|
90
|
-
this._on(this.target, this.options.openEvent, toggle);
|
91
|
-
|
92
|
-
return this._on(document, this.options.openEvent, hide);
|
93
|
-
};
|
94
|
-
|
95
|
-
Anchor.prototype._on = function(element, event, handler) {
|
96
|
-
this._boundEvents.push({
|
97
|
-
element: element,
|
98
|
-
event: event,
|
99
|
-
handler: handler
|
100
|
-
});
|
101
|
-
|
102
|
-
return element.addEventListener(event, handler, false);
|
103
|
-
};
|
104
|
-
|
105
|
-
Anchor.prototype.show = function(anchor) {
|
106
|
-
var ref1;
|
107
|
-
var ref2;
|
108
|
-
|
109
|
-
var fire = (function(_this) {
|
110
|
-
return function() {
|
111
|
-
_this.content.appendChild(_this.options.content);
|
112
|
-
|
113
|
-
if (!anchor.parentNode) {
|
114
|
-
document.body.appendChild(anchor);
|
115
|
-
}
|
116
|
-
|
117
|
-
addClass(anchor, _this.classPrefix + "--open");
|
118
|
-
setTimeout(function() {
|
119
|
-
return addClass(anchor, _this.classPrefix + "--after-open");
|
120
|
-
});
|
121
|
-
|
122
|
-
return _this.setPosition();
|
123
|
-
};
|
124
|
-
})(this);
|
125
|
-
|
126
|
-
if (this.options.isAjax) {
|
127
|
-
return (ref1 = this.options.onOpen) != null ? ref1.call().done(function() {
|
128
|
-
return fire();
|
129
|
-
}) : void 0;
|
130
|
-
} else {
|
131
|
-
fire();
|
132
|
-
return (ref2 = this.options.onOpen) != null ? ref2.call() : void 0;
|
133
|
-
}
|
134
|
-
};
|
135
|
-
|
136
|
-
Anchor.prototype.hide = function(anchor) {
|
137
|
-
var ref1;
|
138
|
-
removeClass(anchor, this.classPrefix + "--open");
|
139
|
-
removeClass(anchor, this.classPrefix + "--after-open");
|
140
|
-
return (ref1 = this.options.onClose) != null ? ref1.call() : void 0;
|
141
|
-
};
|
142
|
-
|
143
|
-
Anchor.prototype.isOpen = function() {
|
144
|
-
return hasClass(this.anchor, this.classPrefix + "--open");
|
145
|
-
};
|
146
|
-
|
147
|
-
Anchor.prototype.create = function() {
|
148
|
-
var anchor;
|
149
|
-
var anchorCss;
|
150
|
-
var closeButton;
|
151
|
-
var arrow = document.createElement("div");
|
152
|
-
var content = document.createElement("div");
|
153
|
-
var arrowInner = document.createElement("div");
|
154
|
-
|
155
|
-
addClass(content, this.classPrefix + "__content");
|
156
|
-
addClass(arrowInner, this.classPrefix + "__arrow-inner");
|
157
|
-
addClass(arrow, this.classPrefix + "__arrow");
|
158
|
-
arrow.appendChild(arrowInner);
|
159
|
-
content.appendChild(arrow);
|
160
|
-
|
161
|
-
if (this.options.showClose) {
|
162
|
-
closeButton = document.createElement("a");
|
163
|
-
closeButton.href = "#";
|
164
|
-
addClass(closeButton, this.classPrefix + "__close-button");
|
165
|
-
content.appendChild(closeButton);
|
166
|
-
this._closeTargets.push(closeButton);
|
167
|
-
}
|
168
|
-
|
169
|
-
anchor = document.createElement("div");
|
170
|
-
addClass(anchor, this.classPrefix);
|
171
|
-
anchorCss = anchor.style;
|
172
|
-
anchorCss.position = "absolute";
|
173
|
-
anchorCss.zIndex = "9999";
|
174
|
-
anchorCss.top = "0px";
|
175
|
-
anchorCss.left = "0px";
|
176
|
-
anchor.appendChild(content);
|
177
|
-
addClass(document.documentElement, this.classPrefix + "--ready");
|
178
|
-
|
179
|
-
return {
|
180
|
-
anchor: anchor,
|
181
|
-
arrow: arrow,
|
182
|
-
content: content
|
183
|
-
};
|
184
|
-
};
|
185
|
-
|
186
|
-
Anchor.prototype.setPosition = function() {
|
187
|
-
var style;
|
188
|
-
var bottomOffset;
|
189
|
-
var transformXOrigin;
|
190
|
-
var transformYOrigin;
|
191
|
-
var leftOffset = getXBounds(this.target, this.anchor, this.arrow);
|
192
|
-
var targetBounds = this.target.getBoundingClientRect();
|
193
|
-
|
194
|
-
if (documentYBoundary(targetBounds, this.anchor)) {
|
195
|
-
addClass(this.anchor, this.classPrefix + "--bottom");
|
196
|
-
removeClass(this.anchor, this.classPrefix + "--top");
|
197
|
-
transformYOrigin = "calc(100% + 12px)";
|
198
|
-
bottomOffset = getYBounds(this.target, this.anchor, this.arrow);
|
199
|
-
} else {
|
200
|
-
addClass(this.anchor, this.classPrefix + "--top");
|
201
|
-
removeClass(this.anchor, this.classPrefix + "--bottom");
|
202
|
-
transformYOrigin = "-12px";
|
203
|
-
bottomOffset = getYBounds(this.target, this.anchor, this.arrow);
|
204
|
-
}
|
205
|
-
|
206
|
-
style = "translateX(" + (Math.round(leftOffset)) + "px) ";
|
207
|
-
style += "translateY(" + (Math.round(bottomOffset)) + "px)";
|
208
|
-
|
209
|
-
if (transformKey !== "msTransform") {
|
210
|
-
style += " translateZ(0)";
|
211
|
-
}
|
212
|
-
|
213
|
-
this.anchor.style[transformKey] = style;
|
214
|
-
transformXOrigin = (targetBounds.left - this.anchor.getBoundingClientRect().left) + (this.target.offsetWidth / 2);
|
215
|
-
this.arrow.style.left = transformXOrigin + "px";
|
216
|
-
return this.content.style[transformKey + "Origin"] = transformXOrigin + "px " + transformYOrigin;
|
217
|
-
};
|
218
|
-
|
219
|
-
getXBounds = function(target, anchor, arrow) {
|
220
|
-
var targetBounds = target.getBoundingClientRect();
|
221
|
-
var calculatedWidth = targetBounds.left + (anchor.offsetWidth / 2) + (target.offsetWidth / 2);
|
222
|
-
var centerPoint = targetBounds.left + target.offsetWidth / 2;
|
223
|
-
|
224
|
-
if (document.body.offsetWidth < calculatedWidth) {
|
225
|
-
return document.body.offsetWidth - anchor.offsetWidth;
|
226
|
-
} else if (centerPoint - anchor.offsetWidth / 2 < 0) {
|
227
|
-
return 0;
|
228
|
-
} else {
|
229
|
-
return targetBounds.left - (anchor.offsetWidth / 2) + (target.offsetWidth / 2);
|
230
|
-
}
|
231
|
-
};
|
232
|
-
|
233
|
-
getYBounds = function(target, anchor, arrow) {
|
234
|
-
var targetBounds = target.getBoundingClientRect();
|
235
|
-
|
236
|
-
if (documentYBoundary(targetBounds, anchor)) {
|
237
|
-
return targetBounds.top - (anchor.offsetHeight - window.pageYOffset) + arrow.offsetHeight - target.offsetHeight;
|
238
|
-
} else {
|
239
|
-
return targetBounds.top + arrow.offsetHeight + target.offsetHeight + window.pageYOffset;
|
240
|
-
}
|
241
|
-
};
|
242
|
-
|
243
|
-
documentYBoundary = function(target, anchor) {
|
244
|
-
if (target.top < anchor.offsetHeight) {
|
245
|
-
return;
|
246
|
-
}
|
247
|
-
|
248
|
-
return (window.innerHeight - target.top) < anchor.offsetHeight;
|
249
|
-
};
|
250
|
-
|
251
|
-
Anchor.prototype.watchWindow = function() {
|
252
|
-
var event;
|
253
|
-
var i;
|
254
|
-
var len;
|
255
|
-
var ref1 = ["resize", "scroll", "touchmove"];
|
256
|
-
var results = [];
|
257
|
-
|
258
|
-
for (i = 0, len = ref1.length; i < len; i++) {
|
259
|
-
event = ref1[i];
|
260
|
-
results.push(window.addEventListener(event, (function(_this) {
|
261
|
-
return function(event) {
|
262
|
-
var lastFired;
|
263
|
-
var maxWait;
|
264
|
-
var now;
|
265
|
-
var throttle;
|
266
|
-
var timer;
|
267
|
-
|
268
|
-
if (!_this.isOpen()) {
|
269
|
-
return;
|
270
|
-
}
|
271
|
-
|
272
|
-
now = +(new Date);
|
273
|
-
throttle = 16;
|
274
|
-
maxWait = throttle * 3;
|
275
|
-
|
276
|
-
if (!timer) {
|
277
|
-
if (now - lastFired > maxWait) {
|
278
|
-
_this.setPosition();
|
279
|
-
lastFired = now;
|
280
|
-
}
|
281
|
-
|
282
|
-
return timer = setTimeout(function(o) {
|
283
|
-
timer = null;
|
284
|
-
lastFired = +(new Date);
|
285
|
-
return _this.setPosition();
|
286
|
-
}, throttle);
|
287
|
-
}
|
288
|
-
};
|
289
|
-
})(this), false));
|
290
|
-
}
|
291
|
-
|
292
|
-
return results;
|
293
|
-
};
|
294
|
-
|
295
|
-
return Anchor;
|
296
|
-
|
297
|
-
})();
|
298
|
-
};
|
299
|
-
|
300
|
-
window.Anchor = createContext();
|
@@ -1,165 +0,0 @@
|
|
1
|
-
var ref = this.Utils;
|
2
|
-
var addClass = ref.addClass;
|
3
|
-
var merge = ref.merge;
|
4
|
-
var setOptions = ref.setOptions;
|
5
|
-
var deleteUndefined = ref.deleteUndefined;
|
6
|
-
|
7
|
-
window.Login = (function(options) {
|
8
|
-
var Login;
|
9
|
-
return Login = (function() {
|
10
|
-
var passwordHelp;
|
11
|
-
|
12
|
-
Login.prototype.defaults = {
|
13
|
-
origin: window.location.href,
|
14
|
-
removeableClass: "us-login--removeable",
|
15
|
-
state: "signin"
|
16
|
-
};
|
17
|
-
|
18
|
-
function Login(options) {
|
19
|
-
var container;
|
20
|
-
this.options = setOptions(options, this.defaults);
|
21
|
-
if (this.options.target === null) {
|
22
|
-
return;
|
23
|
-
}
|
24
|
-
|
25
|
-
if (!(this.options.target.length === void 0 || this.options.target.length)) {
|
26
|
-
return;
|
27
|
-
}
|
28
|
-
|
29
|
-
this.target = $(this.options.target);
|
30
|
-
this.formData = {
|
31
|
-
source: this.target.data("source"),
|
32
|
-
origin: this.target.data("origin") || this.options.origin,
|
33
|
-
email: this.target.data("email"),
|
34
|
-
"opt_in": this.target.data("opt-in")
|
35
|
-
};
|
36
|
-
|
37
|
-
deleteUndefined(this.formData);
|
38
|
-
this.title = this.target.data("title") || this.options.title;
|
39
|
-
this.description = this.target.data("description");
|
40
|
-
container = document.createElement("div");
|
41
|
-
addClass(container, "us-anchor__target");
|
42
|
-
addClass(container, "us-login__target");
|
43
|
-
this.setupAnchors(container);
|
44
|
-
}
|
45
|
-
|
46
|
-
Login.prototype.setupAnchors = function(container) {
|
47
|
-
var i;
|
48
|
-
var len;
|
49
|
-
var ref1;
|
50
|
-
var results;
|
51
|
-
var target;
|
52
|
-
if (this.options.target.length >= 1) {
|
53
|
-
ref1 = this.options.target;
|
54
|
-
results = [];
|
55
|
-
|
56
|
-
for (i = 0, len = ref1.length; i < len; i++) {
|
57
|
-
target = ref1[i];
|
58
|
-
results.push(this.anchorInstance(target, container));
|
59
|
-
}
|
60
|
-
|
61
|
-
return results;
|
62
|
-
} else {
|
63
|
-
return this.anchorInstance(this.options.target, container);
|
64
|
-
}
|
65
|
-
};
|
66
|
-
|
67
|
-
Login.prototype.anchorInstance = function(target, container) {
|
68
|
-
return this.anchor = new Anchor({
|
69
|
-
target: target,
|
70
|
-
content: container,
|
71
|
-
isAjax: true,
|
72
|
-
onOpen: (function(_this) {
|
73
|
-
return function() {
|
74
|
-
return _this.fetch().done(function(html) {
|
75
|
-
var ref1;
|
76
|
-
|
77
|
-
if (!$(container).find(".us-login__form").length) {
|
78
|
-
$(container).append(html);
|
79
|
-
}
|
80
|
-
|
81
|
-
_this.loginForm = $(container).find(".us-login__form");
|
82
|
-
_this.loginContainer = $(container).find(".us-login");
|
83
|
-
_this.setState();
|
84
|
-
_this.setContent();
|
85
|
-
passwordHelp(_this.loginForm);
|
86
|
-
return (ref1 = _this.options.onOpen) != null ? ref1.call(target) : void 0;
|
87
|
-
});
|
88
|
-
};
|
89
|
-
})(this),
|
90
|
-
|
91
|
-
onClose: (function(_this) {
|
92
|
-
return function() {
|
93
|
-
var ref1;
|
94
|
-
if ((ref1 = _this.options.onClose) != null) {
|
95
|
-
ref1.call(target);
|
96
|
-
}
|
97
|
-
|
98
|
-
return _this.resetForm();
|
99
|
-
};
|
100
|
-
})(this)
|
101
|
-
});
|
102
|
-
};
|
103
|
-
|
104
|
-
Login.prototype.fetch = function() {
|
105
|
-
var jqxhr;
|
106
|
-
return jqxhr = $.ajax({
|
107
|
-
url: (window.uSwitch.Accounts.popupUrl()) + "?" + ($.param(this.formData)),
|
108
|
-
dataType: "jsonp"
|
109
|
-
});
|
110
|
-
};
|
111
|
-
|
112
|
-
Login.prototype.setState = function() {
|
113
|
-
var activeState = this.loginForm.filter(".us-login__form--" + this.options.state);
|
114
|
-
this.loginForm.removeClass("login-state--active");
|
115
|
-
activeState.addClass("login-state--active");
|
116
|
-
return this.toggle();
|
117
|
-
};
|
118
|
-
|
119
|
-
Login.prototype.toggle = function() {
|
120
|
-
return $(document).on("click", ".login-state__toggle", function(e) {
|
121
|
-
var $currentState = $(this).parents(".us-login__form");
|
122
|
-
var $nextState = $currentState.next().length ? $currentState.next() : $currentState.prev();
|
123
|
-
$nextState.addClass("login-state--active");
|
124
|
-
$currentState.removeClass("login-state--active");
|
125
|
-
return e.preventDefault();
|
126
|
-
});
|
127
|
-
};
|
128
|
-
|
129
|
-
Login.prototype.setContent = function() {
|
130
|
-
var descriptionElm;
|
131
|
-
var loginTitle;
|
132
|
-
var selector;
|
133
|
-
|
134
|
-
if (!this.title) {
|
135
|
-
return;
|
136
|
-
}
|
137
|
-
|
138
|
-
selector = "<h2 class='us-login__title ";
|
139
|
-
selector += this.options.removeableClass + "'>" + this.title + "</h2>";
|
140
|
-
loginTitle = $(selector);
|
141
|
-
this.loginContainer.prepend(loginTitle);
|
142
|
-
|
143
|
-
if (!this.description) {
|
144
|
-
return;
|
145
|
-
}
|
146
|
-
|
147
|
-
descriptionElm = "<p class='us-login__description ";
|
148
|
-
descriptionElm += this.options.removeableClass + "'>" + this.description + "</p>";
|
149
|
-
return loginTitle.after(descriptionElm);
|
150
|
-
};
|
151
|
-
|
152
|
-
Login.prototype.resetForm = function() {
|
153
|
-
return $("." + this.options.removeableClass).remove();
|
154
|
-
};
|
155
|
-
|
156
|
-
passwordHelp = function(form) {
|
157
|
-
return window.setTimeout(function() {
|
158
|
-
return form.find(".password-strength").passwordHelper();
|
159
|
-
}, 1);
|
160
|
-
};
|
161
|
-
|
162
|
-
return Login;
|
163
|
-
|
164
|
-
})();
|
165
|
-
})();
|
@@ -1,151 +0,0 @@
|
|
1
|
-
var slice = [].slice;
|
2
|
-
|
3
|
-
(function($, window, document) {
|
4
|
-
var PasswordHelper;
|
5
|
-
return PasswordHelper = (function() {
|
6
|
-
var createHiddenPassword;
|
7
|
-
var createWrapper;
|
8
|
-
var regMediumExp = "^(?=.*\\d)(?=.*[a-z])(?!.*\\s).{8,}$|" + "^(?=.*[a-z])(?=.*[A-Z])(?!.*\\s).{8,}$";
|
9
|
-
|
10
|
-
PasswordHelper.prototype.defaults = {
|
11
|
-
classPrefix: "pass-helper",
|
12
|
-
veryWeakText: "very weak",
|
13
|
-
minLength: 6,
|
14
|
-
tests: {
|
15
|
-
weak: new RegExp("^[a-zA-Z0-9]{6,}$"),
|
16
|
-
medium: new RegExp(regMediumExp),
|
17
|
-
strong: new RegExp("^(?=.*\\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\\s).{8,}$")
|
18
|
-
},
|
19
|
-
showHide: true,
|
20
|
-
showText: "Show",
|
21
|
-
hideText: "Hide"
|
22
|
-
};
|
23
|
-
|
24
|
-
function PasswordHelper(el, options) {
|
25
|
-
this.tests = (this.options = $.extend({}, this.defaults, options)).tests;
|
26
|
-
this.$el = $(el);
|
27
|
-
|
28
|
-
if (this.$el.hasClass(this.options.classPrefix + "__input")) {
|
29
|
-
return;
|
30
|
-
}
|
31
|
-
|
32
|
-
this.$el.addClass(this.options.classPrefix + "__input");
|
33
|
-
this.wrapper = createWrapper(this.$el, this.options.classPrefix);
|
34
|
-
this.hiddenPassword = createHiddenPassword(this.$el, this.options.classPrefix);
|
35
|
-
this.strengthChecker();
|
36
|
-
|
37
|
-
if (this.options.showHide) {
|
38
|
-
this.showHide();
|
39
|
-
}
|
40
|
-
}
|
41
|
-
|
42
|
-
PasswordHelper.prototype.strengthChecker = function() {
|
43
|
-
var html = "<div class='" + this.options.classPrefix + "__meter'>";
|
44
|
-
html += "<div class='" + this.options.classPrefix + "__meter-bar' /></div>";
|
45
|
-
this.$el.after($(html));
|
46
|
-
var strengthMeter = $("." + this.options.classPrefix + "__meter-bar");
|
47
|
-
|
48
|
-
var strengthTest = (function(_this) {
|
49
|
-
return function(value) {
|
50
|
-
var condition;
|
51
|
-
if (!value.length) {
|
52
|
-
return strengthMeter.removeClass();
|
53
|
-
}
|
54
|
-
|
55
|
-
condition = value.length < _this.options.minLength;
|
56
|
-
|
57
|
-
if (condition) {
|
58
|
-
return strengthMeter.removeClass().addClass("very-weak");
|
59
|
-
}
|
60
|
-
|
61
|
-
return $.each(_this.tests, function(name, test) {
|
62
|
-
if (value.match(test)) {
|
63
|
-
return strengthMeter.removeClass().addClass(name);
|
64
|
-
}
|
65
|
-
});
|
66
|
-
};
|
67
|
-
})(this);
|
68
|
-
|
69
|
-
return $(document).on("keyup", "." + this.options.classPrefix + "__input", (function(_this) {
|
70
|
-
return function(e) {
|
71
|
-
var passwordValue;
|
72
|
-
passwordValue = $(e.target).val();
|
73
|
-
$("." + _this.options.classPrefix + "__input").addClass("strength--started");
|
74
|
-
|
75
|
-
if (!passwordValue.length) {
|
76
|
-
$("." + _this.options.classPrefix + "__input").removeClass("strength--started");
|
77
|
-
}
|
78
|
-
|
79
|
-
return strengthTest(passwordValue);
|
80
|
-
};
|
81
|
-
})(this));
|
82
|
-
};
|
83
|
-
|
84
|
-
PasswordHelper.prototype.showHide = function() {
|
85
|
-
var exp = "<a class='" + this.options.classPrefix + "__show-hide' />";
|
86
|
-
this.$el.after($(exp).text(this.options.showText));
|
87
|
-
var showClass = this.options.classPrefix + "__input--pass-shown";
|
88
|
-
return $("." + this.options.classPrefix + "__show-hide").on("click", (function(_this) {
|
89
|
-
return function(e) {
|
90
|
-
e.preventDefault();
|
91
|
-
|
92
|
-
if (!_this.$el.hasClass(showClass)) {
|
93
|
-
_this.$el.addClass(showClass);
|
94
|
-
_this.$el.prop("disabled", true).hide();
|
95
|
-
_this.hiddenPassword.prop("disabled", false).val(_this.$el.val()).show().focus();
|
96
|
-
return $(e.target).text(_this.options.hideText);
|
97
|
-
} else {
|
98
|
-
_this.$el.removeClass(showClass);
|
99
|
-
_this.$el.prop("disabled", false).val(_this.hiddenPassword.val()).show().focus();
|
100
|
-
_this.hiddenPassword.prop("disabled", true).hide();
|
101
|
-
return $(e.target).text(_this.options.showText);
|
102
|
-
}
|
103
|
-
};
|
104
|
-
})(this));
|
105
|
-
};
|
106
|
-
|
107
|
-
createHiddenPassword = function(el, classPrefix) {
|
108
|
-
var expression = "<input style='display: none' class='" + (el.attr("class")) + " ";
|
109
|
-
expression += classPrefix + "__input-hidden' type='text' ";
|
110
|
-
expression += "name='" + (el.attr("name")) + "' ";
|
111
|
-
expression += "placeholder='" + (el.attr("placeholder") || "") + "' ";
|
112
|
-
expression += "size='" + (el.attr("size")) + "' value='' disabled='disabled' />";
|
113
|
-
var input = $(expression);
|
114
|
-
el.after(input);
|
115
|
-
return input;
|
116
|
-
};
|
117
|
-
|
118
|
-
createWrapper = function(el, classPrefix) {
|
119
|
-
var wrapperCss = {
|
120
|
-
position: "relative",
|
121
|
-
height: el.css("height"),
|
122
|
-
display: el.css("display")
|
123
|
-
};
|
124
|
-
|
125
|
-
return el.wrap($("<div />").addClass(classPrefix + "__wrapper").css(wrapperCss));
|
126
|
-
};
|
127
|
-
|
128
|
-
$.fn.extend({
|
129
|
-
passwordHelper: function() {
|
130
|
-
var options = arguments[0];
|
131
|
-
var args = 2 <= arguments.length ? slice.call(arguments, 1) : [];
|
132
|
-
return this.each(function() {
|
133
|
-
var helper;
|
134
|
-
var $this = $(this);
|
135
|
-
var data = $(this).data("passwordHelper");
|
136
|
-
|
137
|
-
if (!data) {
|
138
|
-
helper = (data = new PasswordHelper(this, options));
|
139
|
-
$this.data("passwordHelper", helper);
|
140
|
-
}
|
141
|
-
|
142
|
-
if (typeof options === "string") {
|
143
|
-
return data[options].apply(data, args);
|
144
|
-
}
|
145
|
-
});
|
146
|
-
}
|
147
|
-
});
|
148
|
-
|
149
|
-
return PasswordHelper;
|
150
|
-
})();
|
151
|
-
})(window.jQuery, window, document);
|
@@ -1,31 +0,0 @@
|
|
1
|
-
@if $needs-font-ie {
|
2
|
-
@font-face {
|
3
|
-
font-family: "FS Elliot Web Bold";
|
4
|
-
font-style: normal;
|
5
|
-
font-weight: 700;
|
6
|
-
// [doc]
|
7
|
-
// Setting the font to OpenSans to override older legacy parts
|
8
|
-
src: url("#{$base-font-url}OpenSans-Bold-webfont.eot");
|
9
|
-
}
|
10
|
-
|
11
|
-
@font-face {
|
12
|
-
font-family: "Open Sans";
|
13
|
-
font-style: normal;
|
14
|
-
font-weight: 400;
|
15
|
-
src: url("#{$base-font-url}OpenSans-Regular-webfont.eot");
|
16
|
-
}
|
17
|
-
|
18
|
-
@font-face {
|
19
|
-
font-family: "Open Sans";
|
20
|
-
font-style: italic;
|
21
|
-
font-weight: 400;
|
22
|
-
src: url("#{$base-font-url}OpenSans-Italic-webfont.eot");
|
23
|
-
}
|
24
|
-
|
25
|
-
@font-face {
|
26
|
-
font-family: "Open Sans";
|
27
|
-
font-style: normal;
|
28
|
-
font-weight: 700;
|
29
|
-
src: url("#{$base-font-url}OpenSans-Bold-webfont.eot");
|
30
|
-
}
|
31
|
-
}
|
@@ -1,31 +0,0 @@
|
|
1
|
-
@if $needs-font {
|
2
|
-
@font-face {
|
3
|
-
font-family: "FS Elliot Web Bold";
|
4
|
-
font-style: normal;
|
5
|
-
font-weight: 700;
|
6
|
-
// [doc]
|
7
|
-
// Setting the font to OpenSans to override older legacy parts
|
8
|
-
src: local("Open Sans Bold"), local("OpenSans-Bold"), url("#{$base-font-url}OpenSans-Bold-webfont.woff") format("woff"), url("#{$base-font-url}OpenSans-Bold-webfont.ttf") format("truetype");
|
9
|
-
}
|
10
|
-
|
11
|
-
@font-face {
|
12
|
-
font-family: "Open Sans";
|
13
|
-
font-style: normal;
|
14
|
-
font-weight: 400;
|
15
|
-
src: local("Open Sans"), local("OpenSans"), url("#{$base-font-url}OpenSans-Regular-webfont.woff") format("woff"), url("#{$base-font-url}OpenSans-Regular-webfont.ttf") format("truetype");
|
16
|
-
}
|
17
|
-
|
18
|
-
@font-face {
|
19
|
-
font-family: "Open Sans";
|
20
|
-
font-style: italic;
|
21
|
-
font-weight: 400;
|
22
|
-
src: local("Open Sans Italic"), local("OpenSans-Italic"), url("#{$base-font-url}OpenSans-Italic-webfont.woff") format("woff"), url("#{$base-font-url}OpenSans-Italic-webfont.ttf") format("truetype");
|
23
|
-
}
|
24
|
-
|
25
|
-
@font-face {
|
26
|
-
font-family: "Open Sans";
|
27
|
-
font-style: normal;
|
28
|
-
font-weight: 700;
|
29
|
-
src: local("Open Sans Bold"), local("OpenSans-Bold"), url("#{$base-font-url}OpenSans-Bold-webfont.woff") format("woff"), url("#{$base-font-url}OpenSans-Bold-webfont.ttf") format("truetype");
|
30
|
-
}
|
31
|
-
}
|