geico_design_kit 0.0.1-security.1 → 15.1.0
Sign up to get free protection for your applications and to get access to all the features.
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/alt.json +33 -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 +29 -3
- 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
- package/README.md +0 -5
@@ -0,0 +1,534 @@
|
|
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
|
+
var _UserAgentService = _interopRequireDefault(require("../../src/services/UserAgentService"));
|
9
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
10
|
+
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); }
|
11
|
+
function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
|
12
|
+
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); } }
|
13
|
+
function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
|
14
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
15
|
+
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); }
|
16
|
+
var validateSettings = [{
|
17
|
+
setting: "content",
|
18
|
+
isRequired: true,
|
19
|
+
validate: "type",
|
20
|
+
possibleValues: ["string", "object"],
|
21
|
+
errorMessage: ["GDK Payment Plans : Content must be defined and set to a DOM selector or Node"]
|
22
|
+
}, {
|
23
|
+
setting: "initialActivePayPlan",
|
24
|
+
isRequired: false,
|
25
|
+
validate: "type",
|
26
|
+
possibleValues: ["number"],
|
27
|
+
errorMessage: ["GDK Payment Plans : Content must be defined and set to a number"]
|
28
|
+
}, {
|
29
|
+
setting: "onPayPlanSelection",
|
30
|
+
isRequired: false,
|
31
|
+
validate: "type",
|
32
|
+
possibleValues: ["function"],
|
33
|
+
errorMessage: ["GDK Payment Plans : Content must be defined and set to a function"]
|
34
|
+
}];
|
35
|
+
var PayPlans = /*#__PURE__*/function () {
|
36
|
+
/**
|
37
|
+
* PayPlans Constructor
|
38
|
+
* @param {Object} options sets _internalVars, _defaults, creates options, validates settings, sets up the environment
|
39
|
+
*/
|
40
|
+
function PayPlans(options) {
|
41
|
+
_classCallCheck(this, PayPlans);
|
42
|
+
console.log('Payment Plans initialized');
|
43
|
+
this._internalVars = {
|
44
|
+
node: null //used for current node
|
45
|
+
};
|
46
|
+
|
47
|
+
//options with defaults set
|
48
|
+
this._defaults = {};
|
49
|
+
|
50
|
+
// Create options by extending defaults with the passed in arugments
|
51
|
+
if (options && _typeof(options) === "object") {
|
52
|
+
this._options = _baseComponent["default"].extendDefaults(this._defaults, options);
|
53
|
+
}
|
54
|
+
|
55
|
+
//if the required options are valid set up the environment
|
56
|
+
if (_baseComponent["default"].validateSettings(this._options, validateSettings)) {
|
57
|
+
this._internalVars.contentType = _baseComponent["default"].getContentType(this);
|
58
|
+
setLocalVars.call(this);
|
59
|
+
setEvents.call(this);
|
60
|
+
checkPayPlans.call(this);
|
61
|
+
Array.prototype.forEach.call(this._internalVars.payPlanCardTopObject, function (element) {
|
62
|
+
if (!element.getAttribute('tabindex')) element.setAttribute('tabindex', '0');
|
63
|
+
element.setAttribute('role', 'radio');
|
64
|
+
if (!element.getElementsByTagName('input')[0].getAttribute('tabindex')) element.getElementsByTagName('input')[0].setAttribute('tabindex', '-1');
|
65
|
+
if (!element.getAttribute('aria-checked')) element.setAttribute('aria-checked', 'false');
|
66
|
+
});
|
67
|
+
Array.prototype.forEach.call(this._internalVars.payPlanInnerWrapperObjects, function (el) {
|
68
|
+
el.querySelectorAll('.payment-plan-row')[0].setAttribute('role', 'radiogroup');
|
69
|
+
});
|
70
|
+
Array.prototype.forEach.call(this._internalVars.payPlanCardTopObject, function (element) {
|
71
|
+
element.getElementsByTagName('input')[0].setAttribute('tabindex', '-1');
|
72
|
+
});
|
73
|
+
if (this._options.initialActivePayPlan && this._options.initialActivePayPlan <= this._internalVars.payPlanCardTopObject.length) {
|
74
|
+
this.setPayPlan.call(this, this._options.initialActivePayPlan);
|
75
|
+
}
|
76
|
+
}
|
77
|
+
}
|
78
|
+
|
79
|
+
/**
|
80
|
+
* setPayPlan(payPlanNumber)
|
81
|
+
* @param payPlanNumber
|
82
|
+
* Sets the selected pay plan.
|
83
|
+
*/
|
84
|
+
return _createClass(PayPlans, [{
|
85
|
+
key: "setPayPlan",
|
86
|
+
value: function setPayPlan(payPlanNumber) {
|
87
|
+
_setPayPlan.call(this, payPlanNumber);
|
88
|
+
}
|
89
|
+
|
90
|
+
/**
|
91
|
+
* getPayPlan()
|
92
|
+
* @returns {NodeListOf<Element>}
|
93
|
+
* Returns a node list of the selected payment plan (top card & bottom card)
|
94
|
+
*/
|
95
|
+
}, {
|
96
|
+
key: "getPayPlan",
|
97
|
+
value: function getPayPlan() {
|
98
|
+
var selectedPlan = document.querySelectorAll('.' + this._internalVars.payPlanSelectedClass);
|
99
|
+
return selectedPlan;
|
100
|
+
}
|
101
|
+
|
102
|
+
/**
|
103
|
+
* setCarouselArrows()
|
104
|
+
* Removes the carousel arrows if all pay plans can be viewed on the page.
|
105
|
+
*/
|
106
|
+
}, {
|
107
|
+
key: "setCarouselArrows",
|
108
|
+
value: function setCarouselArrows() {
|
109
|
+
checkPayPlans.call(this);
|
110
|
+
}
|
111
|
+
|
112
|
+
/**
|
113
|
+
* removes the node from the dom and any events attached
|
114
|
+
*/
|
115
|
+
}, {
|
116
|
+
key: "destroy",
|
117
|
+
value: function destroy() {
|
118
|
+
removeEvents.call(this);
|
119
|
+
this._internalVars.node.parentNode.removeChild(this._internalVars.node);
|
120
|
+
|
121
|
+
//a little garbage collection
|
122
|
+
for (var variableKey in this) {
|
123
|
+
if (this.hasOwnProperty(variableKey)) {
|
124
|
+
delete this[variableKey];
|
125
|
+
}
|
126
|
+
}
|
127
|
+
}
|
128
|
+
}]);
|
129
|
+
}(); // Private Methods
|
130
|
+
/**
|
131
|
+
* setEvents()
|
132
|
+
* Sets all the events needed for the component
|
133
|
+
*/
|
134
|
+
function setEvents() {
|
135
|
+
var _this = this;
|
136
|
+
var eventName = _UserAgentService["default"]._clickEventName();
|
137
|
+
Array.prototype.forEach.call(this._internalVars.payPlanCards, function (el) {
|
138
|
+
el.addEventListener(eventName, _setPayPlan.bind(_this));
|
139
|
+
el.addEventListener('keyup', _setPayPlan.bind(_this));
|
140
|
+
el.addEventListener('mouseover', setState.bind(_this));
|
141
|
+
el.addEventListener('mouseout', resetState.bind(_this));
|
142
|
+
el.addEventListener('focus', setState.bind(_this));
|
143
|
+
el.addEventListener('blur', resetState.bind(_this));
|
144
|
+
});
|
145
|
+
Array.prototype.forEach.call(this._internalVars.carouselBtnObjects, function (el) {
|
146
|
+
el.addEventListener(eventName, carouselMovement.bind(_this));
|
147
|
+
el.addEventListener('keyup', carouselMovement.bind(_this));
|
148
|
+
});
|
149
|
+
Array.prototype.forEach.call(this._internalVars.expandLink, function (el) {
|
150
|
+
el.addEventListener(eventName, expand.bind(_this));
|
151
|
+
});
|
152
|
+
window.addEventListener('resize', resetCarouselDefaults.bind(this));
|
153
|
+
}
|
154
|
+
|
155
|
+
/**
|
156
|
+
* Assigns a class to an internal variable based on the event type
|
157
|
+
* @param {Event} event Event type
|
158
|
+
*/
|
159
|
+
function setEventType(event) {
|
160
|
+
if (event === 'mouseover' || event === 'mouseout') {
|
161
|
+
this._internalVars.eventType = 'hover';
|
162
|
+
} else {
|
163
|
+
this._internalVars.eventType = 'focus';
|
164
|
+
}
|
165
|
+
}
|
166
|
+
|
167
|
+
/**
|
168
|
+
* Evaluates which row (top or bottom of cards) and card in that row that should be targeted when setting states
|
169
|
+
* @param {Event} e Event type
|
170
|
+
*/
|
171
|
+
function setRowIndex(e) {
|
172
|
+
var currentNode = e.currentTarget,
|
173
|
+
payPlanWrapper = currentNode.parentNode.parentNode,
|
174
|
+
rowWrapper = currentNode.parentNode,
|
175
|
+
payPlanCard = rowWrapper.querySelectorAll(this._internalVars.payPlanCardClass),
|
176
|
+
index = [].indexOf.call(payPlanCard, currentNode),
|
177
|
+
rowIndex = [].indexOf.call(payPlanWrapper.querySelectorAll('.payment-plan-row'), rowWrapper);
|
178
|
+
if (currentNode.classList.contains(this._internalVars.payPlanCardTopClass)) {
|
179
|
+
rowIndex = rowIndex + 1;
|
180
|
+
} else {
|
181
|
+
rowIndex = rowIndex - 1;
|
182
|
+
}
|
183
|
+
this._internalVars.rowIndex = rowIndex;
|
184
|
+
this._internalVars.cardIndex = index;
|
185
|
+
}
|
186
|
+
|
187
|
+
/**
|
188
|
+
* Sets state of card classes (hover, focus) based on the interaction with the card counterpart (top/bottom)
|
189
|
+
* @param {Event} e Event type
|
190
|
+
*/
|
191
|
+
function setOtherCardState(e) {
|
192
|
+
setRowIndex.call(this, e);
|
193
|
+
e.currentTarget.parentNode.parentNode.children[this._internalVars.rowIndex].children[this._internalVars.cardIndex].classList.add(this._internalVars.eventType);
|
194
|
+
}
|
195
|
+
|
196
|
+
/**
|
197
|
+
* Sets the state of card classes (hover, focus) of the card interacted with (top/bottom)
|
198
|
+
* @param {Event} e Event type
|
199
|
+
*/
|
200
|
+
function setState(e) {
|
201
|
+
var event = e.type;
|
202
|
+
setEventType.call(this, event);
|
203
|
+
e.currentTarget.classList.add(this._internalVars.eventType);
|
204
|
+
setOtherCardState.call(this, e);
|
205
|
+
}
|
206
|
+
|
207
|
+
/**
|
208
|
+
* Removes the state of card classes (hover, focus) of the card (top and bottom) containing the state
|
209
|
+
* @param {Event} e Event type
|
210
|
+
*/
|
211
|
+
function resetState(e) {
|
212
|
+
var _this2 = this;
|
213
|
+
var event = e.type;
|
214
|
+
setEventType.call(this, event);
|
215
|
+
Array.prototype.forEach.call(this._internalVars.node.querySelectorAll('.' + this._internalVars.eventType), function (el) {
|
216
|
+
el.classList.remove(_this2._internalVars.eventType);
|
217
|
+
});
|
218
|
+
}
|
219
|
+
function _setPayPlan(eventOrNumber) {
|
220
|
+
if (typeof eventOrNumber === 'number') {
|
221
|
+
var cardNumber = eventOrNumber;
|
222
|
+
var cardTop = this._internalVars.payPlanCardTopObject[cardNumber - 1];
|
223
|
+
if (cardTop) {
|
224
|
+
resetSelected.call(this);
|
225
|
+
cardTop.classList.add(this._internalVars.payPlanSelectedClass);
|
226
|
+
cardTop.classList.add(this._internalVars.focusClass);
|
227
|
+
cardTop.children[0].checked = true;
|
228
|
+
cardTop.setAttribute('aria-checked', 'true');
|
229
|
+
cardTop.parentNode.parentNode.children[1].children[cardNumber - 1].classList.add(this._internalVars.payPlanSelectedClass);
|
230
|
+
cardTop.parentNode.parentNode.children[1].children[cardNumber - 1].classList.add(this._internalVars.focusClass);
|
231
|
+
payPlanInView.call(this);
|
232
|
+
}
|
233
|
+
} else {
|
234
|
+
var event = eventOrNumber;
|
235
|
+
if (event.type === 'keypress' || event.type === 'keyup' && (event.keyCode || event.which) !== 13) {} else {
|
236
|
+
resetSelected.call(this);
|
237
|
+
event.currentTarget.classList.add(this._internalVars.payPlanSelectedClass);
|
238
|
+
event.currentTarget.classList.add(this._internalVars.focusClass);
|
239
|
+
setRowIndex.call(this, event);
|
240
|
+
if (event.currentTarget.classList.contains('card-top')) {
|
241
|
+
event.currentTarget.children[0].checked = true;
|
242
|
+
event.currentTarget.setAttribute('aria-checked', 'true');
|
243
|
+
} else {
|
244
|
+
event.currentTarget.parentNode.parentNode.children[this._internalVars.rowIndex].children[0].checked = true;
|
245
|
+
event.currentTarget.parentNode.parentNode.children[this._internalVars.rowIndex].setAttribute('aria-checked', 'true');
|
246
|
+
}
|
247
|
+
event.currentTarget.parentNode.parentNode.children[this._internalVars.rowIndex].children[this._internalVars.cardIndex].classList.add(this._internalVars.payPlanSelectedClass);
|
248
|
+
event.currentTarget.parentNode.parentNode.children[this._internalVars.rowIndex].children[this._internalVars.cardIndex].classList.add(this._internalVars.focusClass);
|
249
|
+
payPlanInView.call(this);
|
250
|
+
}
|
251
|
+
}
|
252
|
+
if (this._options.onPayPlanSelection) {
|
253
|
+
this._options.onPayPlanSelection(this.getPayPlan.call(this));
|
254
|
+
}
|
255
|
+
}
|
256
|
+
function resetSelected() {
|
257
|
+
var _this3 = this;
|
258
|
+
var selected = this._internalVars.payPlanObject.querySelectorAll('.' + this._internalVars.payPlanSelectedClass);
|
259
|
+
selected[0].children[0].checked = false;
|
260
|
+
selected[0].setAttribute('aria-checked', 'false');
|
261
|
+
Array.prototype.forEach.call(selected, function (el) {
|
262
|
+
el.classList.remove(_this3._internalVars.payPlanSelectedClass);
|
263
|
+
el.classList.remove(_this3._internalVars.focusClass);
|
264
|
+
});
|
265
|
+
}
|
266
|
+
function carouselMovement(event) {
|
267
|
+
event.preventDefault();
|
268
|
+
if (event.type == 'keypress' || event.type == 'keyup' && (event.keyCode || event.which) != 13) {} else {
|
269
|
+
if (!event.target.hasAttribute('disabled')) {
|
270
|
+
if (!this._internalVars.defaultsSet) {
|
271
|
+
setCarouselDefault.call(this);
|
272
|
+
}
|
273
|
+
if (this._internalVars.carouselInMotion === false) {
|
274
|
+
this._internalVars.carouselInMotion = true;
|
275
|
+
carouselSlide.call(this, event);
|
276
|
+
}
|
277
|
+
}
|
278
|
+
}
|
279
|
+
}
|
280
|
+
function setCarouselDefault() {
|
281
|
+
if (this._internalVars.payPlanWrapperObjects[1]) {
|
282
|
+
this._internalVars.carouselCardObejcts = this._internalVars.payPlanWrapperObjects[1].querySelectorAll(this._internalVars.payPlanCardClass);
|
283
|
+
} else {
|
284
|
+
this._internalVars.carouselCardObejcts = this._internalVars.payPlanWrapperObjects[0].querySelectorAll(this._internalVars.payPlanCardClass);
|
285
|
+
}
|
286
|
+
this._internalVars.corouselCardLength = this._internalVars.carouselCardObejcts.length / 2;
|
287
|
+
this._internalVars.carouselInitialWidth = this._internalVars.carouselMoveObject.clientWidth;
|
288
|
+
this._internalVars.carouselCardWidth = Math.ceil(this._internalVars.carouselCardObejcts[0].offsetWidth) + 10;
|
289
|
+
this._internalVars.carouselAcutalWidth = this._internalVars.carouselCardWidth * this._internalVars.corouselCardLength;
|
290
|
+
this._internalVars.cardsOnLeft = 0;
|
291
|
+
this._internalVars.cardsOnRight = this._internalVars.corouselCardLength - this._internalVars.cardsOnLeft - 3;
|
292
|
+
this._internalVars.defaultsSet = true;
|
293
|
+
}
|
294
|
+
function carouselSlide(event) {
|
295
|
+
var operand = null,
|
296
|
+
currentMarginValue = this._internalVars.carouselMoveObject.style.marginLeft,
|
297
|
+
currentMargin = currentMarginValue.slice(0, -2),
|
298
|
+
movementValue = this._internalVars.carouselCardWidth,
|
299
|
+
newMargin = null,
|
300
|
+
disableRightArrow = false,
|
301
|
+
disableLeftArrow = false;
|
302
|
+
var cardsRight = 0;
|
303
|
+
var cardsLeft = 0;
|
304
|
+
var currentNode = document.querySelectorAll('.' + this._internalVars.payPlanSelectedClass)[0],
|
305
|
+
payPlanWrapper = currentNode.parentNode.parentNode,
|
306
|
+
arrowWdith = document.querySelector('.carousel').offsetWidth,
|
307
|
+
payPlanWrapperLeft = payPlanWrapper.offsetLeft - arrowWdith,
|
308
|
+
outerWrapper = currentNode.parentNode.parentNode.parentNode;
|
309
|
+
Array.prototype.forEach.call(this._internalVars.payPlanCardTopObject, function (card) {
|
310
|
+
if (card.offsetLeft + (card.clientWidth + 5) + payPlanWrapperLeft > outerWrapper.clientWidth) {
|
311
|
+
cardsRight++;
|
312
|
+
}
|
313
|
+
if (card.offsetLeft + payPlanWrapper.offsetLeft < 0) {
|
314
|
+
cardsLeft--;
|
315
|
+
}
|
316
|
+
});
|
317
|
+
if (event.target.classList.contains('icon-chevron-right')) {
|
318
|
+
operand = '-';
|
319
|
+
cardsLeft = cardsLeft - 1;
|
320
|
+
cardsRight = cardsRight - 1;
|
321
|
+
} else {
|
322
|
+
operand = '+';
|
323
|
+
cardsLeft = cardsLeft + 1;
|
324
|
+
cardsRight = cardsRight + 1;
|
325
|
+
}
|
326
|
+
if (operand === '-') {
|
327
|
+
if (cardsRight === 0) {
|
328
|
+
newMargin = -(this._internalVars.corouselCardLength * this._internalVars.carouselCardWidth) + this._internalVars.carouselMoveObject.parentNode.clientWidth;
|
329
|
+
disableRightArrow = true;
|
330
|
+
} else {
|
331
|
+
newMargin = currentMargin - movementValue;
|
332
|
+
disableRightArrow = false;
|
333
|
+
}
|
334
|
+
} else {
|
335
|
+
if (cardsLeft === 0 || cardsLeft === -0) {
|
336
|
+
newMargin = 0;
|
337
|
+
disableLeftArrow = true;
|
338
|
+
} else {
|
339
|
+
newMargin = Number(currentMargin) + movementValue;
|
340
|
+
disableLeftArrow = false;
|
341
|
+
}
|
342
|
+
}
|
343
|
+
this._internalVars.carouselMoveObject.style.marginLeft = newMargin + 'px';
|
344
|
+
this._internalVars.cardsOnLeft = cardsLeft;
|
345
|
+
this._internalVars.cardsOnRight = cardsRight;
|
346
|
+
setTimeout(enableArrows.bind(this), 360);
|
347
|
+
function enableArrows() {
|
348
|
+
this._internalVars.carouselInMotion = false;
|
349
|
+
}
|
350
|
+
setArrowState.call(this, disableRightArrow, disableLeftArrow);
|
351
|
+
}
|
352
|
+
function setArrowState(disableRightArrow, disableLeftArrow) {
|
353
|
+
var rightArrow = document.querySelector('.icon-chevron-right'),
|
354
|
+
leftArrow = document.querySelector('.icon-chevron-left');
|
355
|
+
if (disableRightArrow === true) {
|
356
|
+
rightArrow.setAttribute('disabled', 'disabled');
|
357
|
+
rightArrow.setAttribute('aria-label', 'Right button disabled');
|
358
|
+
rightArrow.parentNode.classList.add(this._internalVars.carouselDisabledClass);
|
359
|
+
} else {
|
360
|
+
rightArrow.removeAttribute('disabled');
|
361
|
+
rightArrow.parentNode.classList.remove(this._internalVars.carouselDisabledClass);
|
362
|
+
rightArrow.setAttribute('aria-label', 'Right button');
|
363
|
+
}
|
364
|
+
if (disableLeftArrow === true) {
|
365
|
+
leftArrow.setAttribute('disabled', 'disabled');
|
366
|
+
leftArrow.parentNode.classList.add(this._internalVars.carouselDisabledClass);
|
367
|
+
leftArrow.setAttribute('aria-label', 'Left button disabled');
|
368
|
+
} else {
|
369
|
+
leftArrow.removeAttribute('disabled');
|
370
|
+
leftArrow.parentNode.classList.remove(this._internalVars.carouselDisabledClass);
|
371
|
+
leftArrow.setAttribute('aria-label', 'Left button');
|
372
|
+
}
|
373
|
+
}
|
374
|
+
function resetCarouselDefaults() {
|
375
|
+
this._internalVars.defaultsSet = false;
|
376
|
+
if (window.innerWidth > 911) {
|
377
|
+
if (this._internalVars.viewPortCheck === true) {
|
378
|
+
var delay = setTimeout(resetCarouselPos.bind(this), 30);
|
379
|
+
this._internalVars.carouselMoveObject.style.position = 'absolute';
|
380
|
+
this._internalVars.carouselMoveObject.style.left = 0 + 'px';
|
381
|
+
this._internalVars.viewPortCheck = false;
|
382
|
+
var disableLeftArrow = true;
|
383
|
+
var disableRightArrow = false;
|
384
|
+
setArrowState.call(this, disableRightArrow, disableLeftArrow);
|
385
|
+
}
|
386
|
+
this._internalVars.cardsOnLeft = 0;
|
387
|
+
this._internalVars.cardsOnRight = this._internalVars.corouselCardLength - this._internalVars.cardsOnLeft - 2;
|
388
|
+
} else {
|
389
|
+
this._internalVars.carouselMoveObject.removeAttribute('style');
|
390
|
+
this._internalVars.viewPortCheck = true;
|
391
|
+
}
|
392
|
+
}
|
393
|
+
function resetCarouselPos() {
|
394
|
+
this._internalVars.carouselMoveObject.style.position = 'relative';
|
395
|
+
this._internalVars.carouselMoveObject.style.marginLeft = 0 + 'px';
|
396
|
+
this._internalVars.carouselMoveObject.style.removeProperty('left');
|
397
|
+
}
|
398
|
+
function payPlanInView() {
|
399
|
+
var currentNode = document.querySelectorAll('.' + this._internalVars.payPlanSelectedClass)[0],
|
400
|
+
payPlanWrapper = currentNode.parentNode.parentNode,
|
401
|
+
arrowWdith = document.querySelector('.carousel').offsetWidth,
|
402
|
+
payPlanWrapperLeft = payPlanWrapper.offsetLeft - arrowWdith,
|
403
|
+
outerWrapper = currentNode.parentNode.parentNode.parentNode,
|
404
|
+
left = null,
|
405
|
+
disableRightArrow = false,
|
406
|
+
disableLeftArrow = false;
|
407
|
+
if (window.innerWidth > 911) {
|
408
|
+
if (!this._internalVars.defaultsSet) {
|
409
|
+
setCarouselDefault.call(this);
|
410
|
+
}
|
411
|
+
var cards = this._internalVars.payPlanCardTopObject.length;
|
412
|
+
var length = (this._internalVars.payPlanCardTopObject[0].offsetWidth + 5) * cards;
|
413
|
+
if (currentNode.offsetLeft + (currentNode.clientWidth + 5) + payPlanWrapperLeft > outerWrapper.clientWidth) {
|
414
|
+
left = currentNode.offsetLeft - (outerWrapper.clientWidth - currentNode.offsetWidth);
|
415
|
+
}
|
416
|
+
if (currentNode.offsetLeft + payPlanWrapper.offsetLeft < 0) {
|
417
|
+
left = currentNode.offsetLeft;
|
418
|
+
}
|
419
|
+
this._internalVars.carouselMoveObject.style.marginLeft = '-' + left + 'px';
|
420
|
+
var cardsRight = 0;
|
421
|
+
var cardsLeft = 0;
|
422
|
+
Array.prototype.forEach.call(this._internalVars.payPlanCardTopObject, function (card) {
|
423
|
+
if (card.offsetLeft + (card.clientWidth + 5) + payPlanWrapperLeft > outerWrapper.clientWidth) {
|
424
|
+
cardsRight++;
|
425
|
+
}
|
426
|
+
if (card.offsetLeft + payPlanWrapper.offsetLeft < 0) {
|
427
|
+
cardsLeft--;
|
428
|
+
}
|
429
|
+
});
|
430
|
+
if (left !== null) {
|
431
|
+
if (left < 10) {
|
432
|
+
disableLeftArrow = true;
|
433
|
+
}
|
434
|
+
if (outerWrapper.clientWidth + left > length) {
|
435
|
+
disableRightArrow = true;
|
436
|
+
}
|
437
|
+
setArrowState.call(this, disableRightArrow, disableLeftArrow);
|
438
|
+
}
|
439
|
+
this._internalVars.cardsOnLeft = cardsLeft;
|
440
|
+
this._internalVars.cardsOnRight = cardsRight;
|
441
|
+
} else {
|
442
|
+
if (currentNode.offsetLeft + currentNode.clientWidth - outerWrapper.scrollLeft > outerWrapper.clientWidth) {
|
443
|
+
left = currentNode.offsetLeft - (outerWrapper.clientWidth - currentNode.clientWidth - 15);
|
444
|
+
$(outerWrapper).animate({
|
445
|
+
scrollLeft: left
|
446
|
+
}, 350);
|
447
|
+
}
|
448
|
+
if (outerWrapper.scrollLeft > currentNode.offsetLeft) {
|
449
|
+
left = currentNode.offsetLeft;
|
450
|
+
$(outerWrapper).animate({
|
451
|
+
scrollLeft: left
|
452
|
+
}, 350);
|
453
|
+
}
|
454
|
+
}
|
455
|
+
}
|
456
|
+
|
457
|
+
/**
|
458
|
+
* hides carousel arrows if 3 or less additional pay plans exist
|
459
|
+
*/
|
460
|
+
function checkPayPlans() {
|
461
|
+
var viewMorePayPlans = this._internalVars.carouselMoveObject.querySelectorAll('.' + this._internalVars.payPlanCardTopClass);
|
462
|
+
if (viewMorePayPlans.length < 4) {
|
463
|
+
Array.prototype.forEach.call(this._internalVars.carouselObjects, function (array) {
|
464
|
+
array.style.display = 'none';
|
465
|
+
});
|
466
|
+
} else {
|
467
|
+
this._internalVars.carouselMoveObject.parentElement.classList.add('pay-plan-carousel');
|
468
|
+
}
|
469
|
+
}
|
470
|
+
function expand(event) {
|
471
|
+
event.preventDefault();
|
472
|
+
var wrapper = event.currentTarget.parentElement;
|
473
|
+
var icon = wrapper.querySelectorAll('span')[1];
|
474
|
+
if (wrapper.classList.contains('collapsed')) {
|
475
|
+
wrapper.classList.remove('collapsed');
|
476
|
+
$(this._internalVars.premiumClass).slideDown();
|
477
|
+
wrapper.querySelector('a').innerHTML = "Hide Payment Schedule";
|
478
|
+
wrapper.setAttribute('aria-expanded', 'true');
|
479
|
+
icon.classList.remove('icon-chevron-down');
|
480
|
+
icon.classList.add('icon-chevron-up');
|
481
|
+
} else {
|
482
|
+
wrapper.classList.add('collapsed');
|
483
|
+
$(this._internalVars.premiumClass).slideUp();
|
484
|
+
wrapper.querySelector('a').innerHTML = "Show Payment Schedule";
|
485
|
+
wrapper.setAttribute('aria-expanded', 'false');
|
486
|
+
icon.classList.remove('icon-chevron-up');
|
487
|
+
icon.classList.add('icon-chevron-down');
|
488
|
+
}
|
489
|
+
}
|
490
|
+
|
491
|
+
/**
|
492
|
+
* setLocalVars()
|
493
|
+
* set local vars to the ones passed in options
|
494
|
+
*/
|
495
|
+
function setLocalVars() {
|
496
|
+
if (this._internalVars.contentType === 'string') {
|
497
|
+
this._internalVars.node = document.querySelector(this._options.content);
|
498
|
+
} else if (this._internalVars.contentType === 'domNode') {
|
499
|
+
this._internalVars.node = this._options.content;
|
500
|
+
}
|
501
|
+
this._internalVars.payPlanObject = this._internalVars.node;
|
502
|
+
this._internalVars.payPlanCardClass = '.payment-plan-card';
|
503
|
+
this._internalVars.payPlanCards = this._internalVars.payPlanObject.querySelectorAll(this._internalVars.payPlanCardClass);
|
504
|
+
this._internalVars.payPlanCardTopClass = 'card-top';
|
505
|
+
this._internalVars.payPlanCardTopObject = this._internalVars.node.querySelectorAll('.' + this._internalVars.payPlanCardTopClass);
|
506
|
+
this._internalVars.hoverClass = 'hover';
|
507
|
+
this._internalVars.focusClass = 'focus';
|
508
|
+
this._internalVars.payPlanSelectedClass = 'payment-plan-selected';
|
509
|
+
this._internalVars.carouselClass = 'carousel';
|
510
|
+
this._internalVars.carouselObjects = this._internalVars.node.querySelectorAll('.' + this._internalVars.carouselClass);
|
511
|
+
this._internalVars.carouselInMotion = false;
|
512
|
+
this._internalVars.carouselBtnClass = 'carousel-icon';
|
513
|
+
this._internalVars.carouselBtnObjects = this._internalVars.node.querySelectorAll('.' + this._internalVars.carouselBtnClass);
|
514
|
+
this._internalVars.carouselDisabledClass = 'disabled';
|
515
|
+
this._internalVars.payPlanWrapperClass = 'payment-plan-wrapper';
|
516
|
+
this._internalVars.payPlanWrapperObjects = this._internalVars.payPlanObject.querySelectorAll('.' + this._internalVars.payPlanWrapperClass);
|
517
|
+
this._internalVars.defaultsSet = false;
|
518
|
+
this._internalVars.payPlanInnerWrapperClass = 'payment-plan-inner-wrapper';
|
519
|
+
this._internalVars.payPlanInnerWrapperObjects = this._internalVars.payPlanObject.querySelectorAll('.' + this._internalVars.payPlanInnerWrapperClass);
|
520
|
+
if (this._internalVars.payPlanWrapperObjects[1]) {
|
521
|
+
this._internalVars.carouselMoveObject = this._internalVars.payPlanWrapperObjects[1].querySelector('.' + this._internalVars.payPlanInnerWrapperClass);
|
522
|
+
} else {
|
523
|
+
this._internalVars.carouselMoveObject = this._internalVars.payPlanWrapperObjects[0].querySelector('.' + this._internalVars.payPlanInnerWrapperClass);
|
524
|
+
}
|
525
|
+
this._internalVars.viewPortCheck = false;
|
526
|
+
this._internalVars.rowIndex = null;
|
527
|
+
this._internalVars.cardIndex = null;
|
528
|
+
this._internalVars.eventType = null;
|
529
|
+
this._internalVars.expandLinkClass = 'payment-schedule-link';
|
530
|
+
this._internalVars.expandLinkWrapper = this._internalVars.payPlanObject.querySelector('.' + this._internalVars.expandLinkClass);
|
531
|
+
this._internalVars.expandLink = this._internalVars.expandLinkWrapper.querySelectorAll('span');
|
532
|
+
this._internalVars.premiumClass = '.payment-schedule';
|
533
|
+
}
|
534
|
+
var _default = exports["default"] = PayPlans;
|