geico-design-kit 7.0.0
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.
Potentially problematic release.
This version of geico-design-kit might be problematic. Click here for more details.
- package/.babelrc +5 -0
- package/LICENSE +0 -0
- package/dist/analytics.js +119 -0
- package/dist/appState.js +56 -0
- package/dist/baseComponent.js +110 -0
- package/dist/components/Accordion.js +312 -0
- package/dist/components/AddressAutoComplete.js +220 -0
- package/dist/components/Alert.js +145 -0
- package/dist/components/BackgroundPattern.js +99 -0
- package/dist/components/BackgroundPatternPortfolio.js +242 -0
- package/dist/components/ButtonSwitch.js +236 -0
- package/dist/components/CardSelections.js +230 -0
- package/dist/components/CommonQuestionsSquares.js +169 -0
- package/dist/components/Confirmation.js +156 -0
- package/dist/components/ConsolidatedSummary.js +489 -0
- package/dist/components/CoverageGraph.js +201 -0
- package/dist/components/CreditCard.js +591 -0
- package/dist/components/CurrencyInput.js +302 -0
- package/dist/components/DatePicker.js +468 -0
- package/dist/components/DockedMessage.js +146 -0
- package/dist/components/DotNavigation.js +200 -0
- package/dist/components/EditComponent.js +128 -0
- package/dist/components/EditableTable.js +113 -0
- package/dist/components/InPageNavigation.js +360 -0
- package/dist/components/Loader.js +232 -0
- package/dist/components/MakePayment.js +361 -0
- package/dist/components/Modal.js +254 -0
- package/dist/components/MoreInfoButton.js +227 -0
- package/dist/components/MultipleSelectBox.js +217 -0
- package/dist/components/NavigationalBox.js +161 -0
- package/dist/components/Navigator.js +294 -0
- package/dist/components/PasswordMeter.js +201 -0
- package/dist/components/PayPlans.js +534 -0
- package/dist/components/SegmentedControl.js +327 -0
- package/dist/components/SortableTable.js +166 -0
- package/dist/components/Tabs.js +1 -0
- package/dist/components/TextAreaCountdown.js +219 -0
- package/dist/components/Timeline.js +498 -0
- package/dist/components/TimelineFilter.js +492 -0
- package/dist/components/ToTopArrow.js +153 -0
- package/dist/components/Tooltip.js +329 -0
- package/dist/components/Upsell.js +168 -0
- package/dist/components/VIN.js +271 -0
- package/dist/components/ValidateForm.js +938 -0
- package/dist/components/ViewMoreLess.js +191 -0
- package/dist/components/ZipCode.js +191 -0
- package/dist/components/portfolio.js +99 -0
- package/dist/geico-design-kit.js +141 -0
- package/dist/global/components.js +98 -0
- package/dist/global/footer.js +26 -0
- package/dist/global/nav.js +1257 -0
- package/dist/services/CharacterTypeService.js +106 -0
- package/dist/services/UserAgentService.js +73 -0
- package/dist/utils.js +79 -0
- package/package.json +32 -0
- package/src/analytics.js +82 -0
- package/src/appState.js +56 -0
- package/src/baseComponent.js +156 -0
- package/src/components/Accordion.js +336 -0
- package/src/components/AddressAutoComplete.js +236 -0
- package/src/components/Alert.js +135 -0
- package/src/components/BackgroundPattern.js +96 -0
- package/src/components/BackgroundPatternPortfolio.js +284 -0
- package/src/components/ButtonSwitch.js +241 -0
- package/src/components/CardSelections.js +240 -0
- package/src/components/CommonQuestionsSquares.js +179 -0
- package/src/components/Confirmation.js +160 -0
- package/src/components/ConsolidatedSummary.js +505 -0
- package/src/components/CoverageGraph.js +203 -0
- package/src/components/CreditCard.js +595 -0
- package/src/components/CurrencyInput.js +321 -0
- package/src/components/DatePicker.js +487 -0
- package/src/components/DockedMessage.js +142 -0
- package/src/components/DotNavigation.js +206 -0
- package/src/components/EditComponent.js +130 -0
- package/src/components/EditableTable.js +106 -0
- package/src/components/InPageNavigation.js +391 -0
- package/src/components/Loader.js +272 -0
- package/src/components/MakePayment.js +397 -0
- package/src/components/Modal.js +279 -0
- package/src/components/MoreInfoButton.js +243 -0
- package/src/components/MultipleSelectBox.js +211 -0
- package/src/components/NavigationalBox.js +163 -0
- package/src/components/Navigator.js +338 -0
- package/src/components/PasswordMeter.js +209 -0
- package/src/components/PayPlans.js +604 -0
- package/src/components/SegmentedControl.js +365 -0
- package/src/components/SortableTable.js +176 -0
- package/src/components/Tabs.js +0 -0
- package/src/components/TextAreaCountdown.js +231 -0
- package/src/components/Timeline.js +532 -0
- package/src/components/TimelineFilter.js +533 -0
- package/src/components/ToTopArrow.js +153 -0
- package/src/components/Tooltip.js +344 -0
- package/src/components/Upsell.js +196 -0
- package/src/components/VIN.js +289 -0
- package/src/components/ValidateForm.js +1030 -0
- package/src/components/ViewMoreLess.js +193 -0
- package/src/components/ZipCode.js +193 -0
- package/src/components/portfolio.js +106 -0
- package/src/geico-design-kit.js +144 -0
- package/src/global/components.js +92 -0
- package/src/global/footer.js +25 -0
- package/src/global/nav.js +1457 -0
- package/src/services/CharacterTypeService.js +107 -0
- package/src/services/UserAgentService.js +59 -0
- package/src/utils.js +82 -0
|
@@ -0,0 +1,294 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports["default"] = void 0;
|
|
7
|
+
var utils = _interopRequireWildcard(require("../../src/utils"));
|
|
8
|
+
var _baseComponent = _interopRequireDefault(require("../../src/baseComponent"));
|
|
9
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
10
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
11
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
12
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
13
|
+
function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
|
|
14
|
+
function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
|
|
15
|
+
function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
|
|
16
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
17
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
18
|
+
var validateSettings = [{
|
|
19
|
+
setting: "content",
|
|
20
|
+
isRequired: true,
|
|
21
|
+
validate: "type",
|
|
22
|
+
possibleValues: ["string", "object"],
|
|
23
|
+
errorMessage: ["GDK Navigator : Content must be defined and set to a DOM selector or Node"]
|
|
24
|
+
}, {
|
|
25
|
+
setting: "contentMobile",
|
|
26
|
+
isRequired: true,
|
|
27
|
+
validate: "type",
|
|
28
|
+
possibleValues: ["string", "object"],
|
|
29
|
+
errorMessage: ["GDK Navigator : Content Mobile must be defined and set to the DOM selector or Node of the mobile Navigator container HTML"]
|
|
30
|
+
}];
|
|
31
|
+
|
|
32
|
+
/**
|
|
33
|
+
* View More/Less Class
|
|
34
|
+
*/
|
|
35
|
+
var Navigator = /*#__PURE__*/function () {
|
|
36
|
+
/**
|
|
37
|
+
* These are settings for the instantiation. Refer to the design kit section of this component for JS setting examples.
|
|
38
|
+
* @param {string|Object} content
|
|
39
|
+
* A reference to the component node
|
|
40
|
+
*
|
|
41
|
+
* @param {string|Object} contentMobile
|
|
42
|
+
* A reference to the component mobile node to toggle
|
|
43
|
+
*
|
|
44
|
+
*/
|
|
45
|
+
function Navigator(options) {
|
|
46
|
+
_classCallCheck(this, Navigator);
|
|
47
|
+
console.log('Navigator initialized');
|
|
48
|
+
this._internalVars = {
|
|
49
|
+
node: null //used for current node
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
//options with defaults set
|
|
53
|
+
this._defaults = {};
|
|
54
|
+
|
|
55
|
+
// Create options by extending defaults with the passed in arugments
|
|
56
|
+
if (options && _typeof(options) === "object") {
|
|
57
|
+
this._options = _baseComponent["default"].extendDefaults(this._defaults, options);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
//if the required options are valid set up the environment
|
|
61
|
+
if (_baseComponent["default"].validateSettings(this._options, validateSettings)) {
|
|
62
|
+
this._internalVars.contentType = _baseComponent["default"].getContentType(this);
|
|
63
|
+
setLocalVars.call(this);
|
|
64
|
+
init.call(this);
|
|
65
|
+
assignEvents.call(this);
|
|
66
|
+
setEvents.call(this);
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
//Public Methods
|
|
71
|
+
|
|
72
|
+
/**
|
|
73
|
+
* removes the node from the dom and any events attached
|
|
74
|
+
*/
|
|
75
|
+
return _createClass(Navigator, [{
|
|
76
|
+
key: "destroy",
|
|
77
|
+
value: function destroy() {
|
|
78
|
+
removeEvents.call(this);
|
|
79
|
+
this._internalVars.node.nextElementSibling.classList.remove('navigator-enabled');
|
|
80
|
+
if (document.querySelector('footer')) {
|
|
81
|
+
document.querySelector('footer').classList.remove('navigator-page-footer');
|
|
82
|
+
}
|
|
83
|
+
this._internalVars.node.parentNode.removeChild(this._internalVars.node);
|
|
84
|
+
this._internalVars.nodeMobile.parentNode.removeChild(this._internalVars.nodeMobile);
|
|
85
|
+
|
|
86
|
+
//a little garbage collection
|
|
87
|
+
for (var variableKey in this) {
|
|
88
|
+
if (this.hasOwnProperty(variableKey)) {
|
|
89
|
+
delete this[variableKey];
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
}]);
|
|
94
|
+
}(); // Private Methods
|
|
95
|
+
/**
|
|
96
|
+
* setEvents()
|
|
97
|
+
* Sets all the events needed for the component
|
|
98
|
+
*/
|
|
99
|
+
function setEvents() {
|
|
100
|
+
window.addEventListener('resize', this._internalVars.assignEventsHandler);
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
/**
|
|
104
|
+
* removeEvents()
|
|
105
|
+
* removes all events from the component
|
|
106
|
+
*/
|
|
107
|
+
function removeEvents() {
|
|
108
|
+
window.removeEventListener('resize', this._internalVars.assignEventsHandler);
|
|
109
|
+
this._internalVars.node.removeEventListener('mouseover', this._internalVars.openNavHandler);
|
|
110
|
+
this._internalVars.node.removeEventListener('mouseout', this._internalVars.closeNavHandler);
|
|
111
|
+
this._internalVars.navigatorMobileBarExpand.removeEventListener('click', this._internalVars.toggleDisplayHandler);
|
|
112
|
+
this._internalVars.navigatorMobileCollapse.removeEventListener('click', this._internalVars.toggleDisplayHandler);
|
|
113
|
+
this._internalVars.navigatorMobileList.lastElementChild.removeEventListener('mouseover', this._internalVars.addHoverColorHandler);
|
|
114
|
+
this._internalVars.navigatorMobileList.lastElementChild.removeEventListener('mouseout', this._internalVars.removeHoverColorHandler);
|
|
115
|
+
window.removeEventListener('scroll', this._internalVars.scrollHandler);
|
|
116
|
+
}
|
|
117
|
+
function assignEvents() {
|
|
118
|
+
var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
|
|
119
|
+
if (width > 480 && width <= 767) {
|
|
120
|
+
closeNav.call(this);
|
|
121
|
+
this._internalVars.node.addEventListener('mouseover', this._internalVars.openNavHandler);
|
|
122
|
+
this._internalVars.node.addEventListener('mouseout', this._internalVars.closeNavHandler);
|
|
123
|
+
window.removeEventListener('scroll', this._internalVars.scrollHandler);
|
|
124
|
+
window.addEventListener('scroll', this._internalVars.scrollHandler);
|
|
125
|
+
} else if (width <= 480) {
|
|
126
|
+
this._internalVars.node.removeEventListener('mouseover', this._internalVars.openNavHandler);
|
|
127
|
+
this._internalVars.node.removeEventListener('mouseout', this._internalVars.closeNavHandler);
|
|
128
|
+
this._internalVars.navigatorMobileBarExpand.addEventListener('click', this._internalVars.toggleDisplayHandler);
|
|
129
|
+
this._internalVars.navigatorMobileCollapse.addEventListener('click', this._internalVars.toggleDisplayHandler);
|
|
130
|
+
this._internalVars.navigatorMobileList.lastElementChild.addEventListener('mouseover', this._internalVars.addHoverColorHandler);
|
|
131
|
+
this._internalVars.navigatorMobileList.lastElementChild.addEventListener('mouseout', this._internalVars.removeHoverColorHandler);
|
|
132
|
+
window.removeEventListener('scroll', this._internalVars.scrollHandler);
|
|
133
|
+
} else {
|
|
134
|
+
openNav.call(this);
|
|
135
|
+
this._internalVars.node.removeEventListener('mouseover', this._internalVars.openNavHandler);
|
|
136
|
+
this._internalVars.node.removeEventListener('mouseout', this._internalVars.closeNavHandler);
|
|
137
|
+
this._internalVars.navigatorMobileBarExpand.removeEventListener('click', this._internalVars.toggleDisplayHandler);
|
|
138
|
+
this._internalVars.navigatorMobileCollapse.removeEventListener('click', this._internalVars.toggleDisplayHandler);
|
|
139
|
+
this._internalVars.navigatorMobileList.lastElementChild.removeEventListener('mouseover', this._internalVars.addHoverColorHandler);
|
|
140
|
+
this._internalVars.navigatorMobileList.lastElementChild.removeEventListener('mouseout', this._internalVars.removeHoverColorHandler);
|
|
141
|
+
window.removeEventListener('scroll', this._internalVars.scrollHandler);
|
|
142
|
+
window.addEventListener('scroll', this._internalVars.scrollHandler);
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
function addHoverColor() {
|
|
146
|
+
this._internalVars.navigatorMobileCollapse.querySelector('.geico-icon').classList.add('last-item-hover');
|
|
147
|
+
}
|
|
148
|
+
function removeHoverColor() {
|
|
149
|
+
this._internalVars.navigatorMobileCollapse.querySelector('.geico-icon').classList.remove('last-item-hover');
|
|
150
|
+
}
|
|
151
|
+
function toggleFixedScroll() {
|
|
152
|
+
if (document.querySelector('.navigator-enabled').getBoundingClientRect().top - 65 < 0) {
|
|
153
|
+
if (this._internalVars.node.classList.contains('static-scroll') && this._internalVars.navigatorOrderedList.classList.contains('static-scroll')) {
|
|
154
|
+
this._internalVars.node.classList.remove('static-scroll');
|
|
155
|
+
this._internalVars.navigatorOrderedList.classList.remove('static-scroll');
|
|
156
|
+
}
|
|
157
|
+
this._internalVars.node.classList.add('fixed-scroll');
|
|
158
|
+
this._internalVars.navigatorOrderedList.classList.add('fixed-scroll');
|
|
159
|
+
} else {
|
|
160
|
+
if (this._internalVars.node.classList.contains('fixed-scroll') && this._internalVars.navigatorOrderedList.classList.contains('fixed-scroll')) {
|
|
161
|
+
this._internalVars.node.classList.remove('fixed-scroll');
|
|
162
|
+
this._internalVars.navigatorOrderedList.classList.remove('fixed-scroll');
|
|
163
|
+
}
|
|
164
|
+
this._internalVars.node.classList.add('static-scroll');
|
|
165
|
+
this._internalVars.navigatorOrderedList.classList.add('static-scroll');
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
function init() {
|
|
169
|
+
$('.navigator-menu').slideUp();
|
|
170
|
+
this._internalVars.node.nextElementSibling.classList.add('navigator-enabled');
|
|
171
|
+
buildMobileContent.call(this);
|
|
172
|
+
if (this._internalVars.navigatorMobileList.querySelector('.active') == this._internalVars.navigatorMobileList.lastElementChild) {
|
|
173
|
+
this._internalVars.navigatorMobileCollapse.querySelector('.geico-icon').classList.add('color-change');
|
|
174
|
+
}
|
|
175
|
+
if (document.querySelector('footer')) {
|
|
176
|
+
document.querySelector('footer').classList.add('navigator-page-footer');
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
function buildMobileContent() {
|
|
180
|
+
var current = this._internalVars.navigatorActive.querySelector('a span:last-child').innerHTML;
|
|
181
|
+
var currentIcon = this._internalVars.navigatorActive.querySelector('.geico-icon').cloneNode(true);
|
|
182
|
+
if (this._internalVars.navigatorActive.classList.contains('alert')) {
|
|
183
|
+
currentIcon.setAttribute('class', 'geico-icon icon-alert-exclamation');
|
|
184
|
+
}
|
|
185
|
+
this._internalVars.navigatorMobileBarExpand.querySelector('h3').innerHTML = current;
|
|
186
|
+
this._internalVars.navigatorMobileBarExpand.querySelector('.active-icon').appendChild(currentIcon);
|
|
187
|
+
var currentSubtext = document.createElement('P');
|
|
188
|
+
if (this._internalVars.navigatorActive.querySelector('p')) {
|
|
189
|
+
var subtext = document.querySelector('.active p').innerHTML;
|
|
190
|
+
currentSubtext.innerHTML = subtext;
|
|
191
|
+
this._internalVars.navigatorMobileBarExpand.querySelector('aside').appendChild(currentSubtext);
|
|
192
|
+
} else if (!this._internalVars.navigatorActive.querySelector('p')) {
|
|
193
|
+
this._internalVars.navigatorMobileBarExpand.querySelector('aside').classList.add('no-current-subtext');
|
|
194
|
+
}
|
|
195
|
+
for (var h = 0; h < this._internalVars.navigatorOrderedList.children.length; h++) {
|
|
196
|
+
var li = this._internalVars.navigatorOrderedList.children[h];
|
|
197
|
+
var div = document.createElement('div');
|
|
198
|
+
var a = document.createElement('a');
|
|
199
|
+
var span1 = document.createElement('span');
|
|
200
|
+
var span2 = document.createElement('span');
|
|
201
|
+
var span3 = document.createElement('span');
|
|
202
|
+
span1.setAttribute('class', li.querySelector('span:first-child').getAttribute('class'));
|
|
203
|
+
if (li.classList.contains('alert')) {
|
|
204
|
+
span1.setAttribute('class', 'icon-alert-exclamation');
|
|
205
|
+
if (li.classList.contains('active')) {
|
|
206
|
+
span1.classList.add('geico-icon');
|
|
207
|
+
}
|
|
208
|
+
}
|
|
209
|
+
if (!li.classList.contains('active')) {
|
|
210
|
+
span1.classList.remove('geico-icon');
|
|
211
|
+
span1.classList.remove('geico-icon--actionable');
|
|
212
|
+
}
|
|
213
|
+
span1.classList.remove('geico-icon--dotted');
|
|
214
|
+
if (li.classList.contains('disabled')) {
|
|
215
|
+
div.classList.add('disabled');
|
|
216
|
+
}
|
|
217
|
+
if (li.classList.contains('active')) {
|
|
218
|
+
div.classList.add('active');
|
|
219
|
+
}
|
|
220
|
+
span2.appendChild(document.createTextNode(li.querySelector('a').innerText));
|
|
221
|
+
if (li.querySelector('p')) {
|
|
222
|
+
var br = document.createElement('br');
|
|
223
|
+
var aside = document.createElement('aside');
|
|
224
|
+
aside.appendChild(document.createTextNode(li.querySelector('p').innerText));
|
|
225
|
+
span2.appendChild(br);
|
|
226
|
+
span2.appendChild(aside);
|
|
227
|
+
} else {
|
|
228
|
+
div.classList.add("no-subtext");
|
|
229
|
+
}
|
|
230
|
+
span3.setAttribute('class', 'icon-chevron-right');
|
|
231
|
+
for (var i = li.querySelector('a').attributes.length - 1; i > -1; --i) {
|
|
232
|
+
var attribute = li.querySelector('a').attributes[i];
|
|
233
|
+
a.setAttribute(attribute.name, attribute.value);
|
|
234
|
+
}
|
|
235
|
+
a.appendChild(span1);
|
|
236
|
+
a.appendChild(span3);
|
|
237
|
+
a.appendChild(span2);
|
|
238
|
+
div.appendChild(a);
|
|
239
|
+
this._internalVars.navigatorMobileList.appendChild(div);
|
|
240
|
+
}
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
/* Set the width of the side navigation to 250px */
|
|
244
|
+
function openNav() {
|
|
245
|
+
if (this._internalVars.node.classList.contains('close') && this._internalVars.navigatorOrderedList.classList.contains('close')) {
|
|
246
|
+
this._internalVars.node.classList.remove('close');
|
|
247
|
+
this._internalVars.navigatorOrderedList.classList.remove('close');
|
|
248
|
+
}
|
|
249
|
+
this._internalVars.node.classList.add('open');
|
|
250
|
+
this._internalVars.navigatorOrderedList.classList.add('open');
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
/* Set the width of the side navigation to 0 */
|
|
254
|
+
function closeNav() {
|
|
255
|
+
if (this._internalVars.node.classList.contains('open') && this._internalVars.navigatorOrderedList.classList.contains('open')) {
|
|
256
|
+
this._internalVars.node.classList.remove('open');
|
|
257
|
+
this._internalVars.navigatorOrderedList.classList.remove('open');
|
|
258
|
+
}
|
|
259
|
+
this._internalVars.node.classList.add('close');
|
|
260
|
+
this._internalVars.navigatorOrderedList.classList.add('close');
|
|
261
|
+
}
|
|
262
|
+
function toggleDisplay() {
|
|
263
|
+
document.querySelector('.navigator-menu').classList.toggle('expanded');
|
|
264
|
+
$('.navigator-menu').slideToggle();
|
|
265
|
+
this._internalVars.navigatorMobileBarExpand.classList.toggle('hidden-sm');
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
/**
|
|
269
|
+
* setLocalVars()
|
|
270
|
+
* set local vars to the ones passed in options
|
|
271
|
+
*/
|
|
272
|
+
function setLocalVars() {
|
|
273
|
+
if (this._internalVars.contentType === 'string') {
|
|
274
|
+
this._internalVars.node = document.querySelector(this._options.content);
|
|
275
|
+
this._internalVars.nodeMobile = document.querySelector(this._options.contentMobile);
|
|
276
|
+
} else if (this._internalVars.contentType === 'domNode') {
|
|
277
|
+
this._internalVars.node = this._options.content;
|
|
278
|
+
this._internalVars.nodeMobile = this._options.contentMobile;
|
|
279
|
+
}
|
|
280
|
+
this._internalVars.navigatorOrderedList = this._internalVars.node.querySelector('ol');
|
|
281
|
+
this._internalVars.navigatorActive = this._internalVars.node.querySelector('.active');
|
|
282
|
+
this._internalVars.navigatorMobileBarExpand = this._internalVars.nodeMobile.querySelector('.navigator-bar-expand');
|
|
283
|
+
this._internalVars.navigatorMobileMenuContainer = this._internalVars.nodeMobile.querySelector('.navigator-menu');
|
|
284
|
+
this._internalVars.navigatorMobileList = this._internalVars.nodeMobile.querySelector('.navigator-list');
|
|
285
|
+
this._internalVars.navigatorMobileCollapse = this._internalVars.nodeMobile.querySelector('.navigator-collapse');
|
|
286
|
+
this._internalVars.assignEventsHandler = assignEvents.bind(this);
|
|
287
|
+
this._internalVars.toggleDisplayHandler = toggleDisplay.bind(this);
|
|
288
|
+
this._internalVars.openNavHandler = openNav.bind(this);
|
|
289
|
+
this._internalVars.closeNavHandler = closeNav.bind(this);
|
|
290
|
+
this._internalVars.scrollHandler = toggleFixedScroll.bind(this);
|
|
291
|
+
this._internalVars.addHoverColorHandler = addHoverColor.bind(this);
|
|
292
|
+
this._internalVars.removeHoverColorHandler = removeHoverColor.bind(this);
|
|
293
|
+
}
|
|
294
|
+
var _default = exports["default"] = Navigator;
|
|
@@ -0,0 +1,201 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports["default"] = void 0;
|
|
7
|
+
var _baseComponent = _interopRequireDefault(require("../../src/baseComponent"));
|
|
8
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
9
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
10
|
+
function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
|
|
11
|
+
function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
|
|
12
|
+
function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
|
|
13
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
14
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
15
|
+
var validateSettings = [{
|
|
16
|
+
setting: 'content',
|
|
17
|
+
isRequired: true,
|
|
18
|
+
validate: 'type',
|
|
19
|
+
possibleValues: ['string', 'object'],
|
|
20
|
+
errorMessage: ['GDK PasswordMeter : Content must be defined and set to a DOM selector or Node']
|
|
21
|
+
}, {
|
|
22
|
+
setting: 'fairRegex',
|
|
23
|
+
isRequired: true,
|
|
24
|
+
validate: 'type',
|
|
25
|
+
possibleValues: ['string', 'object'],
|
|
26
|
+
errorMessage: ['GDK PasswordMeter : fairRegex must be a regex string to pass into the RegExp object constructor function or a regex literal']
|
|
27
|
+
}, {
|
|
28
|
+
setting: 'strongRegex',
|
|
29
|
+
isRequired: true,
|
|
30
|
+
validate: 'type',
|
|
31
|
+
possibleValues: ['string', 'object'],
|
|
32
|
+
errorMessage: ['GDK PasswordMeter : strongRegex must be a regex string to pass into the RegExp object constructor function or a regex literal']
|
|
33
|
+
}, {
|
|
34
|
+
setting: 'weakString',
|
|
35
|
+
isRequired: false,
|
|
36
|
+
validate: 'type',
|
|
37
|
+
possibleValues: ['string'],
|
|
38
|
+
errorMessage: ['GDK PasswordMeter : weakString must be a string to specify another term instead of the default Weak']
|
|
39
|
+
}, {
|
|
40
|
+
setting: 'fairString',
|
|
41
|
+
isRequired: false,
|
|
42
|
+
validate: 'type',
|
|
43
|
+
possibleValues: ['string'],
|
|
44
|
+
errorMessage: ['GDK PasswordMeter : fairString must be a string to specify another term instead of the default Fair']
|
|
45
|
+
}, {
|
|
46
|
+
setting: 'strongString',
|
|
47
|
+
isRequired: false,
|
|
48
|
+
validate: 'type',
|
|
49
|
+
possibleValues: ['string'],
|
|
50
|
+
errorMessage: ['GDK PasswordMeter : strongString must be a string to specify another term instead of the default Strong']
|
|
51
|
+
}, {
|
|
52
|
+
setting: 'onInputChange',
|
|
53
|
+
isRequired: false,
|
|
54
|
+
validate: 'type',
|
|
55
|
+
possibleValues: ['function'],
|
|
56
|
+
errorMessage: ['GDK PasswordMeter : onInputChange must be a defined and set function']
|
|
57
|
+
}];
|
|
58
|
+
var PasswordMeter = /*#__PURE__*/function () {
|
|
59
|
+
/**
|
|
60
|
+
* These are settings for the instantiation. Refer to the design kit section of this component for JS setting examples.
|
|
61
|
+
* @param {string|Object} content
|
|
62
|
+
* A reference to the password form field container wrapping both the field and meter
|
|
63
|
+
*
|
|
64
|
+
* @param {string|Object} fairRegex
|
|
65
|
+
* A regex string to pass into the RegExp object constructor function or a regex literal for fair password strength
|
|
66
|
+
*
|
|
67
|
+
* @param {string|Object} strongRegex
|
|
68
|
+
* A regex string to pass into the RegExp object constructor function or a regex literal for strong password strength
|
|
69
|
+
*
|
|
70
|
+
* @param {string} [weakString="Weak"]
|
|
71
|
+
* A string to indicate a Weak password strength
|
|
72
|
+
*
|
|
73
|
+
* @param {string} [fairString="Fair"]
|
|
74
|
+
* A string to indicate a Fair password strength
|
|
75
|
+
*
|
|
76
|
+
* @param {string} [strongString="Strong"]
|
|
77
|
+
* A string to indicate a Strong password strength
|
|
78
|
+
*
|
|
79
|
+
* @param {function} [onInputChange]
|
|
80
|
+
* A callback function with each password character input
|
|
81
|
+
*/
|
|
82
|
+
function PasswordMeter(options) {
|
|
83
|
+
_classCallCheck(this, PasswordMeter);
|
|
84
|
+
this._internalVars = {
|
|
85
|
+
node: null //used for current node
|
|
86
|
+
};
|
|
87
|
+
|
|
88
|
+
//options with defaults set
|
|
89
|
+
this._defaults = {
|
|
90
|
+
weakString: 'Weak',
|
|
91
|
+
fairString: 'Fair',
|
|
92
|
+
strongString: 'Strong'
|
|
93
|
+
};
|
|
94
|
+
|
|
95
|
+
// Create options by extending defaults with the passed in arugments
|
|
96
|
+
if (options && _typeof(options) === "object") {
|
|
97
|
+
this._options = _baseComponent["default"].extendDefaults(this._defaults, options);
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
//if the required options are valid set up the environment
|
|
101
|
+
if (_baseComponent["default"].validateSettings(this._options, validateSettings)) {
|
|
102
|
+
this._internalVars.contentType = _baseComponent["default"].getContentType(this);
|
|
103
|
+
setLocalVars.call(this);
|
|
104
|
+
setEvents.call(this);
|
|
105
|
+
if (!this._internalVars.meterContainerParent.getAttribute('aria-live')) this._internalVars.meterContainerParent.setAttribute('aria-live', 'polite');
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
//Public Methods
|
|
110
|
+
|
|
111
|
+
/**
|
|
112
|
+
* getCurrentStrength()
|
|
113
|
+
* returns a string indicating the current password strength level
|
|
114
|
+
* @returns {string}
|
|
115
|
+
*/
|
|
116
|
+
return _createClass(PasswordMeter, [{
|
|
117
|
+
key: "getCurrentStrength",
|
|
118
|
+
value: function getCurrentStrength() {
|
|
119
|
+
return this._internalVars.meterContainer.getAttribute('class');
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
/**
|
|
123
|
+
* removes the node from the dom and any events attached
|
|
124
|
+
*/
|
|
125
|
+
}, {
|
|
126
|
+
key: "destroy",
|
|
127
|
+
value: function destroy() {
|
|
128
|
+
removeEvents.call(this);
|
|
129
|
+
this._internalVars.node.parentNode.removeChild(this._internalVars.node);
|
|
130
|
+
|
|
131
|
+
//a little garbage collection
|
|
132
|
+
for (var variableKey in this) {
|
|
133
|
+
if (this.hasOwnProperty(variableKey)) {
|
|
134
|
+
delete this[variableKey];
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
}]);
|
|
139
|
+
}(); // Private Methods
|
|
140
|
+
function setLocalVars() {
|
|
141
|
+
if (this._internalVars.contentType === 'string') {
|
|
142
|
+
this._internalVars.node = document.querySelector(this._options.content);
|
|
143
|
+
} else if (this._internalVars.contentType === 'domNode') {
|
|
144
|
+
this._internalVars.node = this._options.content;
|
|
145
|
+
}
|
|
146
|
+
this._internalVars.meterContainerParent = this._internalVars.node.querySelector('.password-meter-container');
|
|
147
|
+
this._internalVars.meterContainer = this._internalVars.node.querySelector('.password-meter-container > div');
|
|
148
|
+
this._internalVars.passwordField = this._internalVars.node.querySelector('input[type="password"]');
|
|
149
|
+
this._internalVars.weakBar = this._internalVars.meterContainer.querySelector('.weak');
|
|
150
|
+
this._internalVars.fairBar = this._internalVars.meterContainer.querySelector('.fair');
|
|
151
|
+
this._internalVars.strongBar = this._internalVars.meterContainer.querySelector('.strong');
|
|
152
|
+
this._internalVars.handler = meterChange.bind(this);
|
|
153
|
+
this._internalVars.strongRegexObj = new RegExp(this._options.strongRegex);
|
|
154
|
+
if (this._options.strongRegex.toString().charAt(0) === '/') {
|
|
155
|
+
this._internalVars.strongRegexObj = this._options.strongRegex;
|
|
156
|
+
}
|
|
157
|
+
this._internalVars.fairRegexObj = new RegExp(this._options.fairRegex);
|
|
158
|
+
if (this._options.fairRegex.toString().charAt(0) === '/') {
|
|
159
|
+
this._internalVars.fairRegexObj = this._options.fairRegex;
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
/**
|
|
164
|
+
* setEvents()
|
|
165
|
+
* Sets all the events needed for the component
|
|
166
|
+
*/
|
|
167
|
+
function setEvents() {
|
|
168
|
+
this._internalVars.passwordField.addEventListener('input', this._internalVars.handler);
|
|
169
|
+
}
|
|
170
|
+
function removeEvents() {
|
|
171
|
+
this._internalVars.passwordField.removeEventListener('input', this._internalVars.handler);
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
/**
|
|
175
|
+
* whatever()
|
|
176
|
+
* whatever about the function
|
|
177
|
+
*/
|
|
178
|
+
function removeAll() {
|
|
179
|
+
this._internalVars.meterContainer.removeAttribute('class');
|
|
180
|
+
}
|
|
181
|
+
function meterChange(e) {
|
|
182
|
+
if (this._internalVars.strongRegexObj.test(e.target.value)) {
|
|
183
|
+
removeAll.call(this);
|
|
184
|
+
this._internalVars.meterContainer.classList.add('password-strong');
|
|
185
|
+
this._internalVars.strongBar.innerHTML = this._options.strongString;
|
|
186
|
+
} else if (this._internalVars.fairRegexObj.test(e.target.value)) {
|
|
187
|
+
removeAll.call(this);
|
|
188
|
+
this._internalVars.meterContainer.classList.add('password-fair');
|
|
189
|
+
this._internalVars.fairBar.innerHTML = this._options.fairString;
|
|
190
|
+
} else if (e.target.value === "") {
|
|
191
|
+
removeAll.call(this);
|
|
192
|
+
} else {
|
|
193
|
+
removeAll.call(this);
|
|
194
|
+
this._internalVars.meterContainer.classList.add('password-weak');
|
|
195
|
+
this._internalVars.weakBar.innerHTML = this._options.weakString;
|
|
196
|
+
}
|
|
197
|
+
if (this._options.onInputChange) {
|
|
198
|
+
this._options.onInputChange();
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
var _default = exports["default"] = PasswordMeter;
|