1/******************************************************************************* 2 * Copyright 2019 Adobe 3 * 4 * Licensed under the Apache License, Version 2.0 (the "License"); 5 * you may not use this file except in compliance with the License. 6 * You may obtain a copy of the License at 7 * 8 * http://www.apache.org/licenses/LICENSE2.0 9 * 10 * Unless required by applicable law or agreed to in writing, software 11 * distributed under the License is distributed on an "AS IS" BASIS, 12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 * See the License for the specific language governing permissions and 14 * limitations under the License. 15 ******************************************************************************/ 16 17/** 18 * Element.matches() 19 * https://developer.mozilla.org/enUS/docs/Web/API/Element/matches#Polyfill 20 */ 21if (!Element.prototype.matches) { 22 Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector; 23} 24 25// eslint-disable-next-line valid-jsdoc 26/** 27 * Element.closest() 28 * https://developer.mozilla.org/enUS/docs/Web/API/Element/closest#Polyfill 29 */ 30if (!Element.prototype.closest) { 31 Element.prototype.closest = function(s) { 32 "use strict"; 33 var el = this; 34 if (!document.documentElement.contains(el)) { 35 return null; 36 } 37 do { 38 if (el.matches(s)) { 39 return el; 40 } 41 el = el.parentElement || el.parentNode; 42 } while (el !== null && el.nodeType === 1); 43 return null; 44 }; 45} 46 47/******************************************************************************* 48 * Copyright 2019 Adobe 49 * 50 * Licensed under the Apache License, Version 2.0 (the "License"); 51 * you may not use this file except in compliance with the License. 52 * You may obtain a copy of the License at 53 * 54 * http://www.apache.org/licenses/LICENSE-2.0 55 * 56 * Unless required by applicable law or agreed to in writing, software 57 * distributed under the License is distributed on an "AS IS" BASIS, 58 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 59 * See the License for the specific language governing permissions and 60 * limitations under the License. 61 ******************************************************************************/ 62(function() { 63 "use strict"; 64 65 var containerUtils = window.CQ && window.CQ.CoreComponents && window.CQ.CoreComponents.container && window.CQ.CoreComponents.container.utils ? window.CQ.CoreComponents.container.utils : undefined; 66 if (!containerUtils) { 67 // eslint-disable-next-line no-console 68 console.warn("Accordion: container utilities at window.CQ.CoreComponents.container.utils are not available. This can lead to missing features. Ensure the core.wcm.components.commons.site.container client library is included on the page."); 69 } 70 var dataLayerEnabled; 71 var dataLayer; 72 var dataLayerName; 73 var delay = 100; 74 75 var NS = "cmp"; 76 var IS = "accordion"; 77 78 var keyCodes = { 79 ENTER: 13, 80 SPACE: 32, 81 END: 35, 82 HOME: 36, 83 ARROW_LEFT: 37, 84 ARROW_UP: 38, 85 ARROW_RIGHT: 39, 86 ARROW_DOWN: 40 87 }; 88 89 var selectors = { 90 self: "[data-" + NS + '-is="' + IS + '"]' 91 }; 92
93 var cssClasses = { 94 button: { 95 disabled: "cmp-accordion__button--disabled", 96 expanded: "cmp-accordion__button--expanded" 97 }, 98 panel: { 99 hidden: "cmp-accordion__panel--hidden", 100 expanded: "cmp-accordion__panel--expanded" 101 } 102 }; 103 104 var dataAttributes = { 105 item: { 106 expanded: "data-cmp-expanded" 107 } 108 }; 109 110 var properties = { 111 /** 112 * Determines whether a single accordion item is forced to be expanded at a time. 113 * Expanding one item will collapse all others. 114 * 115 * @memberof Accordion 116 * @type {Boolean} 117 * @default false 118 */ 119 "singleExpansion": { 120 "default": false, 121 "transform": function(value) { 122 return !(value === null || typeof value === "undefined"); 123 } 124 } 125 }; 126 127 /** 128 * Accordion Configuration. 129 * 130 * @typedef {Object} AccordionConfig Represents an Accordion configuration 131 * @property {HTMLElement} element The HTMLElement representing the Accordion 132 * @property {Object} options The Accordion options 133 */ 134 135 /** 136 * Accordion. 137 * 138 * @class Accordion 139 * @classdesc An interactive Accordion component for toggling panels of related content 140 * @param {AccordionConfig} config The Accordion configuration 141 */ 142 function Accordion(config) { 143 var that = this; 144 145 if (config && config.element) { 146 init(config); 147 } 148 149 /** 150 * Initializes the Accordion. 151 * 152 * @private 153 * @param {AccordionConfig} config The Accordion configuration 154 */ 155 function init(config) { 156 that._config = config; 157 158 // prevents multiple initialization 159 config.element.removeAttribute("data-" + NS + "-is"); 160 161 setupProperties(config.options); 162 cacheElements(config.element); 163 164 if (that._elements["item"]) { 165 // ensures multiple element types are arrays. 166 that._elements["item"] = Array.isArray(that._elements["item"]) ? that._elements["item"] : [that._elements["item"]]; 167 that._elements["button"] = Array.isArray(that._elements["button"]) ? that._elements["button"] : [that._elements["button"]]; 168 that._elements["panel"] = Array.isArray(that._elements["panel"]) ? that._elements["panel"] : [that._elements["panel"]]; 169 170 if (that._properties.singleExpansion) { 171 var expandedItems = getExpandedItems(); 172 // multiple expanded items annotated, display the last item open. 173 if (expandedItems.length > 1) { 174 toggle(expandedItems.length - 1); 175 } 176 } 177 178 refreshItems(); 179 bindEvents(); 180 scrollToDeepLinkIdInAccordion(); 181 } 182 if (window.Granite && window.Granite.author && window.Granite.author.MessageChannel) { 183 /* 184 * Editor message handling: 185 * - subscribe to "cmp.panelcontainer" message requests sent by the editor frame 186 * - check that the message data panel container type is correct and that the id (path) matches this specific Accordion component 187 * - if so, route the "navigate" operation to enact a navigation of the Accordion based on index data 188 */ 189 window.CQ.CoreComponents.MESSAGE_CHANNEL = window.CQ.CoreComponents.MESSAGE_CHANNEL || new window.Granite.author.MessageChannel("cqauthor", window); 190 window.CQ.CoreComponents.MESSAGE_CHANNEL.subscribeRequestMessage("cmp.panelcontainer", function(message) { 191 if (message.data && message.data.type === "cmp-accordion" && message.data.id === that._elements.self.dataset["cmpPanelcontainerId"]) { 192 if (message.data.operation === "navigate") { 193 // switch to single expansion mode when navigating in edit mode. 194 var singleExpansion = that._properties.singleExpansion; 195 that._properties.singleExpansion = true; 196 toggle(message.data.index); 197 198 // revert to the configured state. 199 that._properties.singleExpansion = singleExpansion; 200 } 201 } 202 }); 203 } 204 } 205 206 /**
207 * Displays the panel containing the element that corresponds to the deep link in the URI fragment 208 * and scrolls the browser to this element. 209 */ 210 function scrollToDeepLinkIdInAccordion() { 211 if (containerUtils) { 212 var deepLinkItemIdx = containerUtils.getDeepLinkItemIdx(that, "item", "item"); 213 if (deepLinkItemIdx > -1) { 214 var deepLinkItem = that._elements["item"][deepLinkItemIdx]; 215 if (deepLinkItem && !deepLinkItem.hasAttribute(dataAttributes.item.expanded)) { 216 // if single expansion: close all accordion items 217 if (that._properties.singleExpansion) { 218 for (var j = 0; j < that._elements["item"].length; j++) { 219 if (that._elements["item"][j].hasAttribute(dataAttributes.item.expanded)) { 220 setItemExpanded(that._elements["item"][j], false, true); 221 } 222 } 223 } 224 // expand the accordion item containing the deep link 225 setItemExpanded(deepLinkItem, true, true); 226 } 227 var hashId = window.location.hash.substring(1); 228 if (hashId) { 229 var hashItem = document.querySelector("[id='" + hashId + "']"); 230 if (hashItem) { 231 hashItem.scrollIntoView(); 232 } 233 } 234 } 235 } 236 } 237 238 /** 239 * Caches the Accordion elements as defined via the {@code data-accordion-hook="ELEMENT_NAME"} markup API. 240 * 241 * @private 242 * @param {HTMLElement} wrapper The Accordion wrapper element 243 */ 244 function cacheElements(wrapper) { 245 that._elements = {}; 246 that._elements.self = wrapper; 247 var hooks = that._elements.self.querySelectorAll("[data-" + NS + "-hook-" + IS + "]"); 248 249 for (var i = 0; i < hooks.length; i++) { 250 var hook = hooks[i]; 251 if (hook.closest("." + NS + "-" + IS) === that._elements.self) { // only process own accordion elements 252 var capitalized = IS; 253 capitalized = capitalized.charAt(0).toUpperCase() + capitalized.slice(1); 254 var key = hook.dataset[NS + "Hook" + capitalized]; 255 if (that._elements[key]) { 256 if (!Array.isArray(that._elements[key])) { 257 var tmp = that._elements[key]; 258 that._elements[key] = [tmp]; 259 } 260 that._elements[key].push(hook); 261 } else { 262 that._elements[key] = hook; 263 } 264 } 265 } 266 } 267 268 /** 269 * Sets up properties for the Accordion based on the passed options. 270 * 271 * @private 272 * @param {Object} options The Accordion options 273 */ 274 function setupProperties(options) { 275 that._properties = {}; 276 277 for (var key in properties) { 278 if (Object.prototype.hasOwnProperty.call(properties, key)) { 279 var property = properties[key]; 280 var value = null; 281 282 if (options && options[key] != null) { 283 value = options[key]; 284 285 // transform the provided option 286 if (property && typeof property.transform === "function") { 287 value = property.transform(value); 288 } 289 } 290 291 if (value === null) { 292 // value still null, take the property default 293 value = properties[key]["default"]; 294 } 295 296 that._properties[key] = value; 297 } 298 } 299 } 300 301 /** 302 * Binds Accordion event handling. 303 * 304 * @private 305 */ 306 function bindEvents() { 307 window.addEventListener("hashchange", scrollToDeepLinkIdInAccordion, false); 308 var buttons = that._elements["button"]; 309 if (buttons) { 310 for (var i = 0; i < buttons.length; i++) { 311 (function(index) { 312 buttons[i].addEventListener("click", function(event) { 313 toggle(index); 314 focusButton(index); 315 }); 316 buttons[i].addEventListener("keydown", function(event) { 317 onButtonKeyDown(event, index); 318 }); 319 })(i); 320 } 321 } 322 } 323 324 /** 325 * Handles button keydown events. 326 * 327 * @private 328 * @param {Object} event The keydown event 329 * @param {Number} index The index of the button triggering the event 330 */ 331 function onButtonKeyDown(event, index) { 332 var lastIndex = that._elements["button"].length - 1; 333 334 switch (event.keyCode) { 335 case keyCodes.ARROW_LEFT: 336 case keyCodes.ARROW_UP: 337 event.preventDefault(); 338 if (index > 0) { 339 focusButton(index - 1); 340 } 341 break; 342 case keyCodes.ARROW_RIGHT: 343 case keyCodes.ARROW_DOWN: 344 event.preventDefault(); 345 if (index < lastIndex) { 346 focusButton(index + 1); 347 } 348 break; 349 case keyCodes.HOME: 350 event.preventDefault(); 351 focusButton(0); 352 break; 353 case keyCodes.END: 354 event.preventDefault(); 355 focusButton(lastIndex); 356 break;
357 case keyCodes.ENTER: 358 case keyCodes.SPACE: 359 event.preventDefault(); 360 toggle(index); 361 focusButton(index); 362 break; 363 default: 364 return; 365 } 366 } 367 368 /** 369 * General handler for toggle of an item. 370 * 371 * @private 372 * @param {Number} index The index of the item to toggle 373 */ 374 function toggle(index) { 375 var item = that._elements["item"][index]; 376 if (item) { 377 if (that._properties.singleExpansion) { 378 // ensure only a single item is expanded if single expansion is enabled. 379 for (var i = 0; i < that._elements["item"].length; i++) { 380 if (that._elements["item"][i] !== item) { 381 var expanded = getItemExpanded(that._elements["item"][i]); 382 if (expanded) { 383 setItemExpanded(that._elements["item"][i], false); 384 } 385 } 386 } 387 } 388 setItemExpanded(item, !getItemExpanded(item)); 389 390 if (dataLayerEnabled) { 391 var accordionId = that._elements.self.id; 392 var expandedItems = getExpandedItems() 393 .map(function(item) { 394 return getDataLayerId(item); 395 }); 396 397 var uploadPayload = { component: {} }; 398 uploadPayload.component[accordionId] = { shownItems: expandedItems }; 399 400 var removePayload = { component: {} }; 401 removePayload.component[accordionId] = { shownItems: undefined }; 402 403 dataLayer.push(removePayload); 404 dataLayer.push(uploadPayload); 405 } 406 } 407 } 408 409 /** 410 * Sets an item's expanded state based on the provided flag and refreshes its internals. 411 * 412 * @private 413 * @param {HTMLElement} item The item to mark as expanded, or not expanded 414 * @param {Boolean} expanded true to mark the item expanded, false otherwise 415 * @param {Boolean} keepHash true to keep the hash in the URL, false to update it 416 */ 417 function setItemExpanded(item, expanded, keepHash) { 418 if (expanded) { 419 item.setAttribute(dataAttributes.item.expanded, ""); 420 var index = that._elements["item"].indexOf(item); 421 if (!keepHash && containerUtils) { 422 containerUtils.updateUrlHash(that, "item", index); 423 } 424 if (dataLayerEnabled) { 425 dataLayer.push({ 426 event: "cmp:show", 427 eventInfo: { 428 path: "component." + getDataLayerId(item) 429 } 430 }); 431 } 432 433 } else { 434 item.removeAttribute(dataAttributes.item.expanded); 435 if (!keepHash && containerUtils) { 436 containerUtils.removeUrlHash(); 437 } 438 if (dataLayerEnabled) { 439 dataLayer.push({ 440 event: "cmp:hide", 441 eventInfo: { 442 path: "component." + getDataLayerId(item) 443 } 444 }); 445 } 446 } 447 refreshItem(item); 448 } 449 450 /** 451 * Gets an item's expanded state. 452 * 453 * @private 454 * @param {HTMLElement} item The item for checking its expanded state 455 * @returns {Boolean} true if the item is expanded, false otherwise 456 */ 457 function getItemExpanded(item) { 458 return item && item.dataset && item.dataset["cmpExpanded"] !== undefined; 459 } 460 461 /** 462 * Refreshes an item based on its expanded state. 463 * 464 * @private 465 * @param {HTMLElement} item The item to refresh 466 */ 467 function refreshItem(item) { 468 var expanded = getItemExpanded(item); 469 if (expanded) { 470 expandItem(item); 471 } else { 472 collapseItem(item); 473 } 474 } 475 476 /** 477 * Refreshes all items based on their expanded state. 478 * 479 * @private 480 */ 481 function refreshItems() { 482 for (var i = 0; i < that._elements["item"].length; i++) { 483 refreshItem(that._elements["item"][i]); 484 } 485 } 486 487 /** 488 * Returns all expanded items. 489 * 490 * @private 491 * @returns {HTMLElement[]} The expanded items 492 */ 493 function getExpandedItems() { 494 var expandedItems = []; 495 496 for (var i = 0; i < that._elements["item"].length; i++) { 497 var item = that._elements["item"][i]; 498 var expanded = getItemExpanded(item); 499 if (expanded) { 500 expandedItems.push(item); 501 } 502 } 503 504 return expandedItems; 505 } 506 507 /** 508 * Annotates the item and its internals with 509 * the necessary style and accessibility attributes to indicate it is expanded. 510 * 511 * @private 512 * @param {HTMLElement} item The item to annotate as expanded 513 */ 514 function expandItem(item) { 515 var index = that._elements["item"].indexOf(item); 516 if (index > -1) { 517 var button = that._elements["button"][index]; 518 var panel = that._elements["panel"][index];
519 button.classList.add(cssClasses.button.expanded); 520 // used to fix some known screen readers issues in reading the correct state of the 'aria-expanded' attribute 521 // e.g. https://bugs.webkit.org/show_bug.cgi?id=210934 522 setTimeout(function() { 523 button.setAttribute("aria-expanded", true); 524 }, delay); 525 panel.classList.add(cssClasses.panel.expanded); 526 panel.classList.remove(cssClasses.panel.hidden); 527 panel.setAttribute("aria-hidden", false); 528 } 529 } 530 531 /** 532 * Annotates the item and its internals with 533 * the necessary style and accessibility attributes to indicate it is not expanded. 534 * 535 * @private 536 * @param {HTMLElement} item The item to annotate as not expanded 537 */ 538 function collapseItem(item) { 539 var index = that._elements["item"].indexOf(item); 540 if (index > -1) { 541 var button = that._elements["button"][index]; 542 var panel = that._elements["panel"][index]; 543 button.classList.remove(cssClasses.button.expanded); 544 // used to fix some known screen readers issues in reading the correct state of the 'aria-expanded' attribute 545 // e.g. https://bugs.webkit.org/show_bug.cgi?id=210934 546 setTimeout(function() { 547 button.setAttribute("aria-expanded", false); 548 }, delay); 549 panel.classList.add(cssClasses.panel.hidden); 550 panel.classList.remove(cssClasses.panel.expanded); 551 panel.setAttribute("aria-hidden", true); 552 } 553 } 554 555 /** 556 * Focuses the button at the provided index. 557 * 558 * @private 559 * @param {Number} index The index of the button to focus 560 */ 561 function focusButton(index) { 562 var button = that._elements["button"][index]; 563 button.focus(); 564 } 565 } 566 567 /** 568 * Reads options data from the Accordion wrapper element, defined via {@code data-cmp-*} data attributes. 569 * 570 * @private 571 * @param {HTMLElement} element The Accordion element to read options data from 572 * @returns {Object} The options read from the component data attributes 573 */ 574 function readData(element) { 575 var data = element.dataset; 576 var options = []; 577 var capitalized = IS; 578 capitalized = capitalized.charAt(0).toUpperCase() + capitalized.slice(1); 579 var reserved = ["is", "hook" + capitalized]; 580 581 for (var key in data) { 582 if (Object.prototype.hasOwnProperty.call(data, key)) { 583 var value = data[key]; 584 585 if (key.indexOf(NS) === 0) { 586 key = key.slice(NS.length); 587 key = key.charAt(0).toLowerCase() + key.substring(1); 588 589 if (reserved.indexOf(key) === -1) { 590 options[key] = value; 591 } 592 } 593 } 594 } 595 596 return options; 597 } 598 599 /** 600 * Parses the dataLayer string and returns the ID 601 * 602 * @private 603 * @param {HTMLElement} item the accordion item 604 * @returns {String} dataLayerId or undefined 605 */ 606 function getDataLayerId(item) { 607 if (item) { 608 if (item.dataset.cmpDataLayer) { 609 return Object.keys(JSON.parse(item.dataset.cmpDataLayer))[0]; 610 } else { 611 return item.id; 612 } 613 } 614 return null; 615 } 616 617 /** 618 * Document ready handler and DOM mutation observers. Initializes Accordion components as necessary. 619 * 620 * @private 621 */ 622 function onDocumentReady() { 623 dataLayerEnabled = document.body.hasAttribute("data-cmp-data-layer-enabled"); 624 if (dataLayerEnabled) { 625 dataLayerName = document.body.getAttribute("data-cmp-data-layer-name") || "adobeDataLayer"; 626 dataLayer = window[dataLayerName] = window[dataLayerName] || []; 627 } 628 629 var elements = document.querySelectorAll(selectors.self); 630 for (var i = 0; i < elements.length; i++) { 631 new Accordion({ element: elements[i], options: readData(elements[i]) }); 632 } 633 634 var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver; 635 var body = document.querySelector("body"); 636 var observer = new MutationObserver(function(mutations) { 637 mutations.forEach(function(mutation) { 638 // needed for IE 639 var nodesArray = [].slice.call(mutation.addedNodes); 640 if (nodesArray.length > 0) { 641 nodesArray.forEach(function(addedNode) { 642 if (addedNode.querySelectorAll) { 643 var elementsArray = [].slice.call(addedNode.querySelectorAll(selectors.self)); 644 elementsArray.forEach(function(element) { 645 new Accordion({ element: element, options: readData(element) }); 646 }); 647 } 648 }); 649 } 650 }); 651 }); 652 653 observer.observe(body, { 654 subtree: true, 655 childList: true, 656 characterData: true 657 }); 658 } 659 660 if (document.readyState !== "loading") { 661 onDocumentReady(); 662 } else { 663 document.addEventListener("DOMContentLoaded", onDocumentReady); 664 } 665 666 if (containerUtils) { 667 window.addEventListener("load", containerUtils.scrollToAnchor, false); 668 } 669 670}()); 671 672/******************************************************************************* 673 * Copyright 2018 Adobe 674 * 675 * Licensed under the Apache License, Version 2.0 (the "License");
676 * you may not use this file except in compliance with the License. 677 * You may obtain a copy of the License at 678 * 679 * http://www.apache.org/licenses/LICENSE2.0 680 * 681 * Unless required by applicable law or agreed to in writing, software 682 * distributed under the License is distributed on an "AS IS" BASIS, 683 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 684 * See the License for the specific language governing permissions and 685 * limitations under the License. 686 ******************************************************************************/ 687 688/** 689 * Element.matches() 690 * https://developer.mozilla.org/enUS/docs/Web/API/Element/matches#Polyfill 691 */ 692if (!Element.prototype.matches) { 693 Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector; 694} 695 696// eslint-disable-next-line valid-jsdoc 697/** 698 * Element.closest() 699 * https://developer.mozilla.org/enUS/docs/Web/API/Element/closest#Polyfill 700 */ 701if (!Element.prototype.closest) { 702 Element.prototype.closest = function(s) { 703 "use strict"; 704 var el = this; 705 if (!document.documentElement.contains(el)) { 706 return null; 707 } 708 do { 709 if (el.matches(s)) { 710 return el; 711 } 712 el = el.parentElement || el.parentNode; 713 } while (el !== null && el.nodeType === 1); 714 return null; 715 }; 716} 717 718/******************************************************************************* 719 * Copyright 2018 Adobe 720 * 721 * Licensed under the Apache License, Version 2.0 (the "License"); 722 * you may not use this file except in compliance with the License. 723 * You may obtain a copy of the License at 724 * 725 * http://www.apache.org/licenses/LICENSE-2.0 726 * 727 * Unless required by applicable law or agreed to in writing, software 728 * distributed under the License is distributed on an "AS IS" BASIS, 729 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 730 * See the License for the specific language governing permissions and 731 * limitations under the License. 732 ******************************************************************************/ 733/* global 734 CQ 735 */ 736(function() { 737 "use strict"; 738 739 var containerUtils = window.CQ && window.CQ.CoreComponents && window.CQ.CoreComponents.container && window.CQ.CoreComponents.container.utils ? window.CQ.CoreComponents.container.utils : undefined; 740 if (!containerUtils) { 741 // eslint-disable-next-line no-console 742 console.warn("Tabs: container utilities at window.CQ.CoreComponents.container.utils are not available. This can lead to missing features. Ensure the core.wcm.components.commons.site.container client library is included on the page."); 743 } 744 var dataLayerEnabled; 745 var dataLayer; 746 var dataLayerName; 747 748 var NS = "cmp"; 749 var IS = "tabs"; 750 751 var keyCodes = { 752 END: 35, 753 HOME: 36, 754 ARROW_LEFT: 37, 755 ARROW_UP: 38, 756 ARROW_RIGHT: 39, 757 ARROW_DOWN: 40 758 }; 759 760 var selectors = { 761 self: "[data-" + NS + '-is="' + IS + '"]', 762 active: { 763 tab: "cmp-tabs__tab--active", 764 tabpanel: "cmp-tabs__tabpanel--active" 765 } 766 }; 767 768 /** 769 * Tabs Configuration 770 * 771 * @typedef {Object} TabsConfig Represents a Tabs configuration 772 * @property {HTMLElement} element The HTMLElement representing the Tabs 773 * @property {Object} options The Tabs options 774 */ 775 776 /** 777 * Tabs 778 * 779 * @class Tabs 780 * @classdesc An interactive Tabs component for navigating a list of tabs 781 * @param {TabsConfig} config The Tabs configuration 782 */ 783 function Tabs(config) { 784 var that = this; 785 786 if (config && config.element) { 787 init(config); 788 } 789 790 /** 791 * Initializes the Tabs 792 * 793 * @private 794 * @param {TabsConfig} config The Tabs configuration 795 */ 796 function init(config) { 797 that._config = config; 798 799 // prevents multiple initialization 800 config.element.removeAttribute("data-" + NS + "-is"); 801 802 cacheElements(config.element); 803 that._active = getActiveIndex(that._elements["tab"]); 804 805 if (that._elements.tabpanel) { 806 refreshActive(); 807 bindEvents(); 808 scrollToDeepLinkIdInTabs(); 809 } 810 811 if (window.Granite && window.Granite.author && window.Granite.author.MessageChannel) { 812 /* 813 * Editor message handling: 814 * - subscribe to "cmp.panelcontainer" message requests sent by the editor frame
815 * - check that the message data panel container type is correct and that the id (path) matches this specific Tabs component 816 * - if so, route the "navigate" operation to enact a navigation of the Tabs based on index data 817 */ 818 CQ.CoreComponents.MESSAGE_CHANNEL = CQ.CoreComponents.MESSAGE_CHANNEL || new window.Granite.author.MessageChannel("cqauthor", window); 819 CQ.CoreComponents.MESSAGE_CHANNEL.subscribeRequestMessage("cmp.panelcontainer", function(message) { 820 if (message.data && message.data.type === "cmp-tabs" && message.data.id === that._elements.self.dataset["cmpPanelcontainerId"]) { 821 if (message.data.operation === "navigate") { 822 navigate(message.data.index); 823 } 824 } 825 }); 826 } 827 } 828 829 /** 830 * Displays the panel containing the element that corresponds to the deep link in the URI fragment 831 * and scrolls the browser to this element. 832 */ 833 function scrollToDeepLinkIdInTabs() { 834 if (containerUtils) { 835 var deepLinkItemIdx = containerUtils.getDeepLinkItemIdx(that, "tab", "tabpanel"); 836 if (deepLinkItemIdx > -1) { 837 var deepLinkItem = that._elements["tab"][deepLinkItemIdx]; 838 if (deepLinkItem && that._elements["tab"][that._active].id !== deepLinkItem.id) { 839 navigateAndFocusTab(deepLinkItemIdx, true); 840 } 841 var hashId = window.location.hash.substring(1); 842 if (hashId) { 843 var hashItem = document.querySelector("[id='" + hashId + "']"); 844 if (hashItem) { 845 hashItem.scrollIntoView(); 846 } 847 } 848 } 849 } 850 } 851 852 /** 853 * Returns the index of the active tab, if no tab is active returns 0 854 * 855 * @param {Array} tabs Tab elements 856 * @returns {Number} Index of the active tab, 0 if none is active 857 */ 858 function getActiveIndex(tabs) { 859 if (tabs) { 860 for (var i = 0; i < tabs.length; i++) { 861 if (tabs[i].classList.contains(selectors.active.tab)) { 862 return i; 863 } 864 } 865 } 866 return 0; 867 } 868 869 /** 870 * Caches the Tabs elements as defined via the {@code data-tabs-hook="ELEMENT_NAME"} markup API 871 * 872 * @private 873 * @param {HTMLElement} wrapper The Tabs wrapper element 874 */ 875 function cacheElements(wrapper) { 876 that._elements = {}; 877 that._elements.self = wrapper; 878 var hooks = that._elements.self.querySelectorAll("[data-" + NS + "-hook-" + IS + "]"); 879 880 for (var i = 0; i < hooks.length; i++) { 881 var hook = hooks[i]; 882 if (hook.closest("." + NS + "-" + IS) === that._elements.self) { // only process own tab elements 883 var capitalized = IS; 884 capitalized = capitalized.charAt(0).toUpperCase() + capitalized.slice(1); 885 var key = hook.dataset[NS + "Hook" + capitalized]; 886 if (that._elements[key]) { 887 if (!Array.isArray(that._elements[key])) { 888 var tmp = that._elements[key]; 889 that._elements[key] = [tmp]; 890 } 891 that._elements[key].push(hook); 892 } else { 893 that._elements[key] = hook; 894 } 895 } 896 } 897 } 898 899 /** 900 * Binds Tabs event handling 901 * 902 * @private 903 */ 904 function bindEvents() { 905 window.addEventListener("hashchange", scrollToDeepLinkIdInTabs, false); 906 var tabs = that._elements["tab"]; 907 if (tabs) { 908 for (var i = 0; i < tabs.length; i++) { 909 (function(index) { 910 tabs[i].addEventListener("click", function(event) { 911 navigateAndFocusTab(index); 912 }); 913 tabs[i].addEventListener("keydown", function(event) { 914 onKeyDown(event); 915 }); 916 })(i); 917 } 918 } 919 } 920 921 /** 922 * Handles tab keydown events 923 * 924 * @private 925 * @param {Object} event The keydown event 926 */ 927 function onKeyDown(event) { 928 var index = that._active; 929 var lastIndex = that._elements["tab"].length - 1; 930 931 switch (event.keyCode) { 932 case keyCodes.ARROW_LEFT: 933 case keyCodes.ARROW_UP: 934 event.preventDefault(); 935 if (index > 0) { 936 navigateAndFocusTab(index - 1); 937 } 938 break; 939 case keyCodes.ARROW_RIGHT: 940 case keyCodes.ARROW_DOWN: 941 event.preventDefault(); 942 if (index < lastIndex) { 943 navigateAndFocusTab(index + 1); 944 } 945 break; 946 case keyCodes.HOME: 947 event.preventDefault(); 948 navigateAndFocusTab(0); 949 break; 950 case keyCodes.END: 951 event.preventDefault(); 952 navigateAndFocusTab(lastIndex); 953 break; 954 default: 955 return; 956 } 957 } 958 959 /** 960 * Refreshes the tab markup based on the current {@code Tabs#_active} index 961 * 962 * @private 963 */ 964 function refreshActive() { 965 var tabpanels = that._elements["tabpanel"]; 966 var tabs = that._elements["tab"]; 967 968 if (tabpanels) { 969 if (Array.isArray(tabpanels)) { 970 for (var i = 0; i < tabpanels.length; i++) { 971 if (i === parseInt(that._active)) { 972 tabpanels[i].classList.add(selectors.active.tabpanel); 973 tabpanels[i].removeAttribute("aria-hidden"); 974 tabs[i].classList.add(selectors.active.tab); 975 tabs[i].setAttribute("aria-selected", true); 976 tabs[i].setAttribute("tabindex", "0"); 977 } else { 978 tabpanels[i].classList.remove(selectors.active.tabpanel); 979 tabpanels[i].setAttribute("aria-hidden", true); 980 tabs[i].classList.remove(selectors.active.tab); 981 tabs[i].setAttribute("aria-selected", false); 982 tabs[i].setAttribute("tabindex", "-1"); 983 } 984 } 985 } else { 986 // only one tab 987 tabpanels.classList.add(selectors.active.tabpanel); 988 tabs.classList.add(selectors.active.tab); 989 } 990 } 991 } 992 993 /** 994 * Focuses the element and prevents scrolling the element into view 995 * 996 * @param {HTMLElement} element Element to focus 997 */ 998 function focusWithoutScroll(element) { 999 var x = window.scrollX || window.pageXOffset; 1000 var y = window.scrollY || window.pageYOffset; 1001 element.focus(); 1002 window.scrollTo(x, y); 1003 } 1004 1005 /** 1006 * Navigates to the tab at the provided index 1007 * 1008 * @private 1009 * @param {Number} index The index of the tab to navigate to 1010 */ 1011 function navigate(index) { 1012 that._active = index; 1013 refreshActive(); 1014 } 1015 1016 /** 1017 * Navigates to the item at the provided index and ensures the active tab gains focus 1018 * 1019 * @private 1020 * @param {Number} index The index of the item to navigate to 1021 * @param {Boolean} keepHash true to keep the hash in the URL, false to update it 1022 */ 1023 function navigateAndFocusTab(index, keepHash) { 1024 var exActive = that._active; 1025 if (!keepHash && containerUtils) { 1026 containerUtils.updateUrlHash(that, "tab", index); 1027 } 1028 navigate(index); 1029 focusWithoutScroll(that._elements["tab"][index]); 1030 1031 if (dataLayerEnabled) { 1032 1033 var activeItem = getDataLayerId(that._elements.tabpanel[index]); 1034 var exActiveItem = getDataLayerId(that._elements.tabpanel[exActive]); 1035 1036 dataLayer.push({ 1037 event: "cmp:show", 1038 eventInfo: { 1039 path: "component." + activeItem 1040 } 1041 }); 1042 1043 dataLayer.push({ 1044 event: "cmp:hide", 1045 eventInfo: { 1046 path: "component." + exActiveItem 1047 } 1048 }); 1049 1050 var tabsId = that._elements.self.id; 1051 var uploadPayload = { component: {} }; 1052 uploadPayload.component[tabsId] = { shownItems: [activeItem] }; 1053 1054 var removePayload = { component: {} }; 1055 removePayload.component[tabsId] = { shownItems: undefined }; 1056 1057 dataLayer.push(removePayload); 1058 dataLayer.push(uploadPayload); 1059 } 1060 } 1061 } 1062 1063 /**
1064 * Reads options data from the Tabs wrapper element, defined via {@code data-cmp-*} data attributes 1065 * 1066 * @private 1067 * @param {HTMLElement} element The Tabs element to read options data from 1068 * @returns {Object} The options read from the component data attributes 1069 */ 1070 function readData(element) { 1071 var data = element.dataset; 1072 var options = []; 1073 var capitalized = IS; 1074 capitalized = capitalized.charAt(0).toUpperCase() + capitalized.slice(1); 1075 var reserved = ["is", "hook" + capitalized]; 1076 1077 for (var key in data) { 1078 if (Object.prototype.hasOwnProperty.call(data, key)) { 1079 var value = data[key]; 1080 1081 if (key.indexOf(NS) === 0) { 1082 key = key.slice(NS.length); 1083 key = key.charAt(0).toLowerCase() + key.substring(1); 1084 1085 if (reserved.indexOf(key) === -1) { 1086 options[key] = value; 1087 } 1088 } 1089 } 1090 } 1091 1092 return options; 1093 } 1094 1095 /** 1096 * Parses the dataLayer string and returns the ID 1097 * 1098 * @private 1099 * @param {HTMLElement} item the accordion item 1100 * @returns {String} dataLayerId or undefined 1101 */ 1102 function getDataLayerId(item) { 1103 if (item) { 1104 if (item.dataset.cmpDataLayer) { 1105 return Object.keys(JSON.parse(item.dataset.cmpDataLayer))[0]; 1106 } else { 1107 return item.id; 1108 } 1109 } 1110 return null; 1111 } 1112 1113 /** 1114 * Document ready handler and DOM mutation observers. Initializes Tabs components as necessary. 1115 * 1116 * @private 1117 */ 1118 function onDocumentReady() { 1119 dataLayerEnabled = document.body.hasAttribute("data-cmp-data-layer-enabled"); 1120 if (dataLayerEnabled) { 1121 dataLayerName = document.body.getAttribute("data-cmp-data-layer-name") || "adobeDataLayer"; 1122 dataLayer = window[dataLayerName] = window[dataLayerName] || []; 1123 } 1124 1125 var elements = document.querySelectorAll(selectors.self); 1126 for (var i = 0; i < elements.length; i++) { 1127 new Tabs({ element: elements[i], options: readData(elements[i]) }); 1128 } 1129 1130 var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver; 1131 var body = document.querySelector("body"); 1132 var observer = new MutationObserver(function(mutations) { 1133 mutations.forEach(function(mutation) { 1134 // needed for IE 1135 var nodesArray = [].slice.call(mutation.addedNodes); 1136 if (nodesArray.length > 0) { 1137 nodesArray.forEach(function(addedNode) { 1138 if (addedNode.querySelectorAll) { 1139 var elementsArray = [].slice.call(addedNode.querySelectorAll(selectors.self)); 1140 elementsArray.forEach(function(element) { 1141 new Tabs({ element: element, options: readData(element) }); 1142 }); 1143 } 1144 }); 1145 } 1146 }); 1147 }); 1148 1149 observer.observe(body, { 1150 subtree: true, 1151 childList: true, 1152 characterData: true 1153 }); 1154 } 1155 1156 if (document.readyState !== "loading") { 1157 onDocumentReady(); 1158 } else { 1159 document.addEventListener("DOMContentLoaded", onDocumentReady); 1160 } 1161 1162 if (containerUtils) { 1163 window.addEventListener("load", containerUtils.scrollToAnchor, false); 1164 } 1165 1166}()); 1167 1168/******************************************************************************* 1169 * Copyright 2022 Adobe 1170 * 1171 * Licensed under the Apache License, Version 2.0 (the "License"); 1172 * you may not use this file except in compliance with the License. 1173 * You may obtain a copy of the License at 1174 * 1175 * http://www.apache.org/licenses/LICENSE-2.0 1176 * 1177 * Unless required by applicable law or agreed to in writing, software 1178 * distributed under the License is distributed on an "AS IS" BASIS, 1179 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 1180 * See the License for the specific language governing permissions and 1181 * limitations under the License. 1182 ******************************************************************************/ 1183(function(document) { 1184 "use strict"; 1185 1186 window.CMP = window.CMP || {}; 1187 window.CMP.utils = (function() { 1188 var NS = "cmp"; 1189 1190 /**
1191 * Reads options data from the Component wrapper element, defined via {@code data-cmp-*} data attributes 1192 * 1193 * @param {HTMLElement} element The component element to read options data from 1194 * @param {String} is The component identifier 1195 * @returns {String[]} The options read from the component data attributes 1196 */ 1197 var readData = function(element, is) { 1198 var data = element.dataset; 1199 var options = []; 1200 var capitalized = is; 1201 capitalized = capitalized.charAt(0).toUpperCase() + capitalized.slice(1); 1202 var reserved = ["is", "hook" + capitalized]; 1203 1204 for (var key in data) { 1205 if (Object.prototype.hasOwnProperty.call(data, key)) { 1206 var value = data[key]; 1207 1208 if (key.indexOf(NS) === 0) { 1209 key = key.slice(NS.length); 1210 key = key.charAt(0).toLowerCase() + key.substring(1); 1211 1212 if (reserved.indexOf(key) === -1) { 1213 options[key] = value; 1214 } 1215 } 1216 } 1217 } 1218 return options; 1219 }; 1220 1221 /** 1222 * Set up the final properties of a component by evaluating the transform function or fall back to the default value on demand 1223 * @param {String[]} options the options to transform 1224 * @param {Object} properties object of properties of property functions 1225 * @returns {Object} transformed properties 1226 */ 1227 var setupProperties = function(options, properties) { 1228 var transformedProperties = {}; 1229 1230 for (var key in properties) { 1231 if (Object.prototype.hasOwnProperty.call(properties, key)) { 1232 var property = properties[key]; 1233 if (options && options[key] != null) { 1234 if (property && typeof property.transform === "function") { 1235 transformedProperties[key] = property.transform(options[key]); 1236 } else { 1237 transformedProperties[key] = options[key]; 1238 } 1239 } else { 1240 transformedProperties[key] = properties[key]["default"]; 1241 } 1242 } 1243 } 1244 return transformedProperties; 1245 }; 1246 1247 1248 return { 1249 readData: readData, 1250 setupProperties: setupProperties 1251 }; 1252 }()); 1253}(window.document)); 1254 1255/******************************************************************************* 1256 * Copyright 2018 Adobe 1257 * 1258 * Licensed under the Apache License, Version 2.0 (the "License"); 1259 * you may not use this file except in compliance with the License. 1260 * You may obtain a copy of the License at 1261 * 1262 * http://www.apache.org/licenses/LICENSE-2.0 1263 * 1264 * Unless required by applicable law or agreed to in writing, software 1265 * distributed under the License is distributed on an "AS IS" BASIS, 1266 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 1267 * See the License for the specific language governing permissions and 1268 * limitations under the License. 1269 ******************************************************************************/ 1270(function() { 1271 "use strict"; 1272 1273 var containerUtils = window.CQ && window.CQ.CoreComponents && window.CQ.CoreComponents.container && window.CQ.CoreComponents.container.utils ? window.CQ.CoreComponents.container.utils : undefined; 1274 if (!containerUtils) { 1275 // eslint-disable-next-line no-console 1276 console.warn("Tabs: container utilities at window.CQ.CoreComponents.container.utils are not available. This can lead to missing features. Ensure the core.wcm.components.commons.site.container client library is included on the page."); 1277 } 1278 var dataLayerEnabled; 1279 var dataLayer; 1280 var dataLayerName; 1281 1282 var NS = "cmp"; 1283 var IS = "carousel"; 1284 1285 var keyCodes = { 1286 SPACE: 32, 1287 END: 35, 1288 HOME: 36, 1289 ARROW_LEFT: 37, 1290 ARROW_UP: 38, 1291 ARROW_RIGHT: 39, 1292 ARROW_DOWN: 40 1293 }; 1294 1295 var selectors = { 1296 self: "[data-" + NS + '-is="' + IS + '"]' 1297 }; 1298 1299 var properties = { 1300 /** 1301 * Determines whether the Carousel will automatically transition between slides 1302 * 1303 * @memberof Carousel
1304 * @type {Boolean} 1305 * @default false 1306 */ 1307 "autoplay": { 1308 "default": false, 1309 "transform": function(value) { 1310 return !(value === null || typeof value === "undefined"); 1311 } 1312 }, 1313 /** 1314 * Duration (in milliseconds) before automatically transitioning to the next slide 1315 * 1316 * @memberof Carousel 1317 * @type {Number} 1318 * @default 5000 1319 */ 1320 "delay": { 1321 "default": 5000, 1322 "transform": function(value) { 1323 value = parseFloat(value); 1324 return !isNaN(value) ? value : null; 1325 } 1326 }, 1327 /** 1328 * Determines whether automatic pause on hovering the carousel is disabled 1329 * 1330 * @memberof Carousel 1331 * @type {Boolean} 1332 * @default false 1333 */ 1334 "autopauseDisabled": { 1335 "default": false, 1336 "transform": function(value) { 1337 return !(value === null || typeof value === "undefined"); 1338 } 1339 } 1340 }; 1341 1342 /** 1343 * Carousel Configuration 1344 * 1345 * @typedef {Object} CarouselConfig Represents a Carousel configuration 1346 * @property {HTMLElement} element The HTMLElement representing the Carousel 1347 * @property {*[]} options The Carousel options 1348 */ 1349 1350 /** 1351 * Carousel 1352 * 1353 * @class Carousel 1354 * @classdesc An interactive Carousel component for navigating a list of generic items 1355 * @param {CarouselConfig} config The Carousel configuration 1356 */ 1357 function Carousel(config) { 1358 var that = this; 1359 1360 if (config && config.element) { 1361 init(config); 1362 } 1363 1364 /** 1365 * Initializes the Carousel 1366 * 1367 * @private 1368 * @param {CarouselConfig} config The Carousel configuration 1369 */ 1370 function init(config) { 1371 that._config = config; 1372 1373 // prevents multiple initialization 1374 config.element.removeAttribute("data-" + NS + "-is"); 1375 1376 setupProperties(config.options); 1377 cacheElements(config.element); 1378 1379 that._active = 0; 1380 that._paused = false; 1381 1382 if (that._elements.item) { 1383 initializeActive(); 1384 bindEvents(); 1385 resetAutoplayInterval(); 1386 refreshPlayPauseActions(); 1387 scrollToDeepLinkIdInCarousel(); 1388 } 1389 1390 // TODO: This section is only relevant in edit mode and should move to the editor clientLib 1391 if (window.Granite && window.Granite.author && window.Granite.author.MessageChannel) { 1392 /* 1393 * Editor message handling: 1394 * - subscribe to "cmp.panelcontainer" message requests sent by the editor frame 1395 * - check that the message data panel container type is correct and that the id (path) matches this specific Carousel component 1396 * - if so, route the "navigate" operation to enact a navigation of the Carousel based on index data 1397 */ 1398 window.CQ = window.CQ || {}; 1399 window.CQ.CoreComponents = window.CQ.CoreComponents || {}; 1400 window.CQ.CoreComponents.MESSAGE_CHANNEL = window.CQ.CoreComponents.MESSAGE_CHANNEL || new window.Granite.author.MessageChannel("cqauthor", window); 1401 window.CQ.CoreComponents.MESSAGE_CHANNEL.subscribeRequestMessage("cmp.panelcontainer", function(message) { 1402 if (message.data && message.data.type === "cmp-carousel" && message.data.id === that._elements.self.dataset["cmpPanelcontainerId"]) { 1403 if (message.data.operation === "navigate") { 1404 navigate(message.data.index); 1405 } 1406 } 1407 }); 1408 } 1409 } 1410 1411 /** 1412 * Displays the slide containing the element that corresponds to the deep link in the URI fragment 1413 * and scrolls the browser to this element. 1414 */ 1415 function scrollToDeepLinkIdInCarousel() { 1416 if (containerUtils) { 1417 var deepLinkItemIdx = containerUtils.getDeepLinkItemIdx(that, "item", "item"); 1418 if (deepLinkItemIdx > -1) { 1419 var deepLinkItem = that._elements["item"][deepLinkItemIdx]; 1420 if (deepLinkItem && that._elements["item"][that._active].id !== deepLinkItem.id) { 1421 navigateAndFocusIndicator(deepLinkItemIdx, true); 1422 // pause the carousel auto-rotation 1423 pause(); 1424 } 1425 var hashId = window.location.hash.substring(1); 1426 if (hashId) { 1427 var hashItem = document.querySelector("[id='" + hashId + "']"); 1428 if (hashItem) { 1429 hashItem.scrollIntoView(); 1430 } 1431 } 1432 } 1433 } 1434 } 1435 1436 /** 1437 * Caches the Carousel elements as defined via the {@code data-carousel-hook="ELEMENT_NAME"} markup API 1438 * 1439 * @private 1440 * @param {HTMLElement} wrapper The Carousel wrapper element 1441 */ 1442 function cacheElements(wrapper) { 1443 that._elements = {}; 1444 that._elements.self = wrapper; 1445 var hooks = that._elements.self.querySelectorAll("[data-" + NS + "-hook-" + IS + "]"); 1446 1447 for (var i = 0; i < hooks.length; i++) { 1448 var hook = hooks[i]; 1449 var capitalized = IS; 1450 capitalized = capitalized.charAt(0).toUpperCase() + capitalized.slice(1); 1451 var key = hook.dataset[NS + "Hook" + capitalized]; 1452 if (that._elements[key]) { 1453 if (!Array.isArray(that._elements[key])) { 1454 var tmp = that._elements[key]; 1455 that._elements[key] = [tmp]; 1456 } 1457 that._elements[key].push(hook); 1458 } else { 1459 that._elements[key] = hook; 1460 } 1461 } 1462 } 1463 1464 /** 1465 * Sets up properties for the Carousel based on the passed options. 1466 * 1467 * @private 1468 * @param {Object} options The Carousel options 1469 */ 1470 function setupProperties(options) { 1471 that._properties = {}; 1472 1473 for (var key in properties) { 1474 if (Object.prototype.hasOwnProperty.call(properties, key)) { 1475 var property = properties[key]; 1476 var value = null; 1477 1478 if (options && options[key] != null) { 1479 value = options[key]; 1480 1481 // transform the provided option 1482 if (property && typeof property.transform === "function") { 1483 value = property.transform(value); 1484 } 1485 } 1486 1487 if (value === null) { 1488 // value still null, take the property default 1489 value = properties[key]["default"]; 1490 } 1491 1492 that._properties[key] = value; 1493 } 1494 } 1495 } 1496 1497 /** 1498 * Binds Carousel event handling 1499 * 1500 * @private 1501 */ 1502 function bindEvents() { 1503 window.addEventListener("hashchange", scrollToDeepLinkIdInCarousel, false); 1504 if (that._elements["previous"]) { 1505 that._elements["previous"].addEventListener("click", function() { 1506 var index = getPreviousIndex(); 1507 navigate(index); 1508 if (dataLayerEnabled) { 1509 dataLayer.push({ 1510 event: "cmp:show", 1511 eventInfo: { 1512 path: "component." + getDataLayerId(that._elements.item[index]) 1513 } 1514 }); 1515 } 1516 }); 1517 } 1518 1519 if (that._elements["next"]) { 1520 that._elements["next"].addEventListener("click", function() { 1521 var index = getNextIndex(); 1522 navigate(index); 1523 if (dataLayerEnabled) { 1524 dataLayer.push({ 1525 event: "cmp:show", 1526 eventInfo: { 1527 path: "component." + getDataLayerId(that._elements.item[index]) 1528 } 1529 }); 1530 } 1531 }); 1532 } 1533 1534 var indicators = that._elements["indicator"]; 1535 if (indicators) { 1536 for (var i = 0; i < indicators.length; i++) { 1537 (function(index) { 1538 indicators[i].addEventListener("click", function(event) { 1539 navigateAndFocusIndicator(index); 1540 // pause the carousel auto-rotation 1541 pause(); 1542 }); 1543 })(i); 1544 } 1545 } 1546 1547 if (that._elements["pause"]) { 1548 if (that._properties.autoplay) { 1549 that._elements["pause"].addEventListener("click", onPauseClick); 1550 } 1551 } 1552 1553 if (that._elements["play"]) { 1554 if (that._properties.autoplay) { 1555 that._elements["play"].addEventListener("click", onPlayClick); 1556 } 1557 } 1558 1559 that._elements.self.addEventListener("keydown", onKeyDown); 1560 1561 if (!that._properties.autopauseDisabled) { 1562 that._elements.self.addEventListener("mouseenter", onMouseEnter); 1563 that._elements.self.addEventListener("mouseleave", onMouseLeave); 1564 } 1565 1566 // for accessibility we pause animation when a element get focused 1567 var items = that._elements["item"]; 1568 if (items) { 1569 for (var j = 0; j < items.length; j++) { 1570 items[j].addEventListener("focusin", onMouseEnter); 1571 items[j].addEventListener("focusout", onMouseLeave); 1572 } 1573 } 1574 } 1575 1576 /**
1577 * Handles carousel keydown events 1578 * 1579 * @private 1580 * @param {Object} event The keydown event 1581 */ 1582 function onKeyDown(event) { 1583 var index = that._active; 1584 var lastIndex = that._elements["indicator"].length - 1; 1585 1586 switch (event.keyCode) { 1587 case keyCodes.ARROW_LEFT: 1588 case keyCodes.ARROW_UP: 1589 event.preventDefault(); 1590 if (index > 0) { 1591 navigateAndFocusIndicator(index - 1); 1592 } 1593 break; 1594 case keyCodes.ARROW_RIGHT: 1595 case keyCodes.ARROW_DOWN: 1596 event.preventDefault(); 1597 if (index < lastIndex) { 1598 navigateAndFocusIndicator(index + 1); 1599 } 1600 break; 1601 case keyCodes.HOME: 1602 event.preventDefault(); 1603 navigateAndFocusIndicator(0); 1604 break; 1605 case keyCodes.END: 1606 event.preventDefault(); 1607 navigateAndFocusIndicator(lastIndex); 1608 break; 1609 case keyCodes.SPACE: 1610 if (that._properties.autoplay && (event.target !== that._elements["previous"] && event.target !== that._elements["next"])) { 1611 event.preventDefault(); 1612 if (!that._paused) { 1613 pause(); 1614 } else { 1615 play(); 1616 } 1617 } 1618 if (event.target === that._elements["pause"]) { 1619 that._elements["play"].focus(); 1620 } 1621 if (event.target === that._elements["play"]) { 1622 that._elements["pause"].focus(); 1623 } 1624 break; 1625 default: 1626 return; 1627 } 1628 } 1629 1630 /** 1631 * Handles carousel mouseenter events 1632 * 1633 * @private 1634 * @param {Object} event The mouseenter event 1635 */ 1636 function onMouseEnter(event) { 1637 clearAutoplayInterval(); 1638 } 1639 1640 /** 1641 * Handles carousel mouseleave events 1642 * 1643 * @private 1644 * @param {Object} event The mouseleave event 1645 */ 1646 function onMouseLeave(event) { 1647 resetAutoplayInterval(); 1648 } 1649 1650 /** 1651 * Handles pause element click events 1652 * 1653 * @private 1654 * @param {Object} event The click event 1655 */ 1656 function onPauseClick(event) { 1657 pause(); 1658 that._elements["play"].focus(); 1659 } 1660 1661 /** 1662 * Handles play element click events 1663 * 1664 * @private 1665 * @param {Object} event The click event 1666 */ 1667 function onPlayClick() { 1668 play(); 1669 that._elements["pause"].focus(); 1670 } 1671 1672 /** 1673 * Pauses the playing of the Carousel. Sets {@code Carousel#_paused} marker. 1674 * Only relevant when autoplay is enabled 1675 * 1676 * @private 1677 */ 1678 function pause() { 1679 that._paused = true; 1680 clearAutoplayInterval(); 1681 refreshPlayPauseActions(); 1682 } 1683 1684 /** 1685 * Enables the playing of the Carousel. Sets {@code Carousel#_paused} marker. 1686 * Only relevant when autoplay is enabled 1687 * 1688 * @private 1689 */ 1690 function play() { 1691 that._paused = false; 1692 1693 // If the Carousel is hovered, don't begin auto transitioning until the next mouse leave event 1694 var hovered = false; 1695 if (that._elements.self.parentElement) { 1696 hovered = that._elements.self.parentElement.querySelector(":hover") === that._elements.self; 1697 } 1698 if (that._properties.autopauseDisabled || !hovered) { 1699 resetAutoplayInterval(); 1700 } 1701 1702 refreshPlayPauseActions(); 1703 } 1704 1705 /** 1706 * Refreshes the play/pause action markup based on the {@code Carousel#_paused} state 1707 * 1708 * @private 1709 */ 1710 function refreshPlayPauseActions() {
1711 setActionDisabled(that._elements["pause"], that._paused); 1712 setActionDisabled(that._elements["play"], !that._paused); 1713 } 1714 1715 /** 1716 * Initialize {@code Carousel#_active} based on the active item of the carousel. 1717 */ 1718 function initializeActive() { 1719 var items = that._elements["item"]; 1720 if (items && Array.isArray(items)) { 1721 for (var i = 0; i < items.length; i++) { 1722 if (items[i].classList.contains("cmp-carousel__item--active")) { 1723 that._active = i; 1724 break; 1725 } 1726 } 1727 } 1728 } 1729 1730 /** 1731 * Refreshes the item markup based on the current {@code Carousel#_active} index 1732 * 1733 * @private 1734 */ 1735 function refreshActive() { 1736 var items = that._elements["item"]; 1737 var indicators = that._elements["indicator"]; 1738 1739 if (items) { 1740 if (Array.isArray(items)) { 1741 for (var i = 0; i < items.length; i++) { 1742 if (i === parseInt(that._active)) { 1743 items[i].classList.add("cmp-carousel__item--active"); 1744 items[i].removeAttribute("aria-hidden"); 1745 indicators[i].classList.add("cmp-carousel__indicator--active"); 1746 indicators[i].setAttribute("aria-selected", true); 1747 indicators[i].setAttribute("tabindex", "0"); 1748 } else { 1749 items[i].classList.remove("cmp-carousel__item--active"); 1750 items[i].setAttribute("aria-hidden", true); 1751 indicators[i].classList.remove("cmp-carousel__indicator--active"); 1752 indicators[i].setAttribute("aria-selected", false); 1753 indicators[i].setAttribute("tabindex", "-1"); 1754 } 1755 } 1756 } else { 1757 // only one item 1758 items.classList.add("cmp-carousel__item--active"); 1759 indicators.classList.add("cmp-carousel__indicator--active"); 1760 } 1761 } 1762 } 1763 1764 /** 1765 * Focuses the element and prevents scrolling the element into view 1766 * 1767 * @param {HTMLElement} element Element to focus 1768 */ 1769 function focusWithoutScroll(element) { 1770 var x = window.scrollX || window.pageXOffset; 1771 var y = window.scrollY || window.pageYOffset; 1772 element.focus(); 1773 window.scrollTo(x, y); 1774 } 1775 1776 /** 1777 * Retrieves the next active index, with looping 1778 * 1779 * @private 1780 * @returns {Number} Index of the next carousel item 1781 */ 1782 function getNextIndex() { 1783 return that._active === (that._elements["item"].length - 1) ? 0 : that._active + 1; 1784 } 1785 1786 /** 1787 * Retrieves the previous active index, with looping 1788 * 1789 * @private 1790 * @returns {Number} Index of the previous carousel item 1791 */ 1792 function getPreviousIndex() { 1793 return that._active === 0 ? (that._elements["item"].length - 1) : that._active - 1; 1794 } 1795 1796 /** 1797 * Navigates to the item at the provided index 1798 * 1799 * @private 1800 * @param {Number} index The index of the item to navigate to 1801 * @param {Boolean} keepHash true to keep the hash in the URL, false to update it 1802 */ 1803 function navigate(index, keepHash) { 1804 if (index < 0 || index > (that._elements["item"].length - 1)) { 1805 return; 1806 } 1807 1808 that._active = index; 1809 refreshActive(); 1810 1811 if (!keepHash && containerUtils) { 1812 containerUtils.updateUrlHash(that, "item", index); 1813 } 1814 1815 if (dataLayerEnabled) { 1816 var carouselId = that._elements.self.id; 1817 var activeItem = getDataLayerId(that._elements.item[index]); 1818 var updatePayload = { component: {} }; 1819 updatePayload.component[carouselId] = { shownItems: [activeItem] }; 1820 1821 var removePayload = { component: {} }; 1822 removePayload.component[carouselId] = { shownItems: undefined }; 1823 1824 dataLayer.push(removePayload); 1825 dataLayer.push(updatePayload); 1826 } 1827 1828 // reset the autoplay transition interval following navigation, if not already hovering the carousel
1829 if (that._elements.self.parentElement) { 1830 if (that._elements.self.parentElement.querySelector(":hover") !== that._elements.self) { 1831 resetAutoplayInterval(); 1832 } 1833 } 1834 } 1835 1836 /** 1837 * Navigates to the item at the provided index and ensures the active indicator gains focus 1838 * 1839 * @private 1840 * @param {Number} index The index of the item to navigate to 1841 * @param {Boolean} keepHash true to keep the hash in the URL, false to update it 1842 */ 1843 function navigateAndFocusIndicator(index, keepHash) { 1844 navigate(index, keepHash); 1845 focusWithoutScroll(that._elements["indicator"][index]); 1846 1847 if (dataLayerEnabled) { 1848 dataLayer.push({ 1849 event: "cmp:show", 1850 eventInfo: { 1851 path: "component." + getDataLayerId(that._elements.item[index]) 1852 } 1853 }); 1854 } 1855 } 1856 1857 /** 1858 * Starts/resets automatic slide transition interval 1859 * 1860 * @private 1861 */ 1862 function resetAutoplayInterval() { 1863 if (that._paused || !that._properties.autoplay) { 1864 return; 1865 } 1866 clearAutoplayInterval(); 1867 that._autoplayIntervalId = window.setInterval(function() { 1868 if (document.visibilityState && document.hidden) { 1869 return; 1870 } 1871 var indicators = that._elements["indicators"]; 1872 if (indicators !== document.activeElement && indicators.contains(document.activeElement)) { 1873 // if an indicator has focus, ensure we switch focus following navigation 1874 navigateAndFocusIndicator(getNextIndex(), true); 1875 } else { 1876 navigate(getNextIndex(), true); 1877 } 1878 }, that._properties.delay); 1879 } 1880 1881 /** 1882 * Clears/pauses automatic slide transition interval 1883 * 1884 * @private 1885 */ 1886 function clearAutoplayInterval() { 1887 window.clearInterval(that._autoplayIntervalId); 1888 that._autoplayIntervalId = null; 1889 } 1890 1891 /** 1892 * Sets the disabled state for an action and toggles the appropriate CSS classes 1893 * 1894 * @private 1895 * @param {HTMLElement} action Action to disable 1896 * @param {Boolean} [disable] {@code true} to disable, {@code false} to enable 1897 */ 1898 function setActionDisabled(action, disable) { 1899 if (!action) { 1900 return; 1901 } 1902 if (disable !== false) { 1903 action.disabled = true; 1904 action.classList.add("cmp-carousel__action--disabled"); 1905 } else { 1906 action.disabled = false; 1907 action.classList.remove("cmp-carousel__action--disabled"); 1908 } 1909 } 1910 } 1911 1912 /** 1913 * Parses the dataLayer string and returns the ID 1914 * 1915 * @private 1916 * @param {HTMLElement} item the accordion item 1917 * @returns {String} dataLayerId or undefined 1918 */ 1919 function getDataLayerId(item) { 1920 if (item) { 1921 if (item.dataset.cmpDataLayer) { 1922 return Object.keys(JSON.parse(item.dataset.cmpDataLayer))[0]; 1923 } else { 1924 return item.id; 1925 } 1926 } 1927 return null; 1928 } 1929 1930 /** 1931 * Document ready handler and DOM mutation observers. Initializes Carousel components as necessary. 1932 * 1933 * @private 1934 */ 1935 function onDocumentReady() { 1936 dataLayerEnabled = document.body.hasAttribute("data-cmp-data-layer-enabled"); 1937 if (dataLayerEnabled) { 1938 dataLayerName = document.body.getAttribute("data-cmp-data-layer-name") || "adobeDataLayer"; 1939 dataLayer = window[dataLayerName] = window[dataLayerName] || []; 1940 } 1941 1942 var elements = document.querySelectorAll(selectors.self); 1943 for (var i = 0; i < elements.length; i++) { 1944 new Carousel({ element: elements[i], options: CMP.utils.readData(elements[i], IS) }); 1945 } 1946 1947 var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver; 1948 var body = document.querySelector("body"); 1949 var observer = new MutationObserver(function(mutations) { 1950 mutations.forEach(function(mutation) { 1951 // needed for IE 1952 var nodesArray = [].slice.call(mutation.addedNodes); 1953 if (nodesArray.length > 0) { 1954 nodesArray.forEach(function(addedNode) { 1955 if (addedNode.querySelectorAll) { 1956 var elementsArray = [].slice.call(addedNode.querySelectorAll(selectors.self)); 1957 elementsArray.forEach(function(element) { 1958 new Carousel({ element: element, options: CMP.utils.readData(element, IS) }); 1959 }); 1960 } 1961 }); 1962 } 1963 }); 1964 }); 1965 1966 observer.observe(body, { 1967 subtree: true, 1968 childList: true, 1969 characterData: true 1970 }); 1971 } 1972 1973 var documentReady = document.readyState !== "loading" ? Promise.resolve() : new Promise(function(resolve) { 1974 document.addEventListener("DOMContentLoaded", resolve); 1975 }); 1976 Promise.all([documentReady]).then(onDocumentReady); 1977 1978 if (containerUtils) { 1979 window.addEventListener("load", containerUtils.scrollToAnchor, false); 1980 } 1981 1982}()); 1983 1984/******************************************************************************* 1985 * Copyright 2017 Adobe 1986 * 1987 * Licensed under the Apache License, Version 2.0 (the "License");
1988 * you may not use this file except in compliance with the License. 1989 * You may obtain a copy of the License at 1990 * 1991 * http://www.apache.org/licenses/LICENSE-2.0 1992 * 1993 * Unless required by applicable law or agreed to in writing, software 1994 * distributed under the License is distributed on an "AS IS" BASIS, 1995 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 1996 * See the License for the specific language governing permissions and 1997 * limitations under the License. 1998 ******************************************************************************/ 1999if (window.Element && !Element.prototype.closest) { 2000 // eslint valid-jsdoc: "off" 2001 Element.prototype.closest = 2002 function(s) { 2003 "use strict"; 2004 var matches = (this.document || this.ownerDocument).querySelectorAll(s); 2005 var el = this; 2006 var i; 2007 do { 2008 i = matches.length; 2009 while (--i >= 0 && matches.item(i) !== el) { 2010 // continue 2011 } 2012 } while ((i < 0) && (el = el.parentElement)); 2013 return el; 2014 }; 2015} 2016 2017if (window.Element && !Element.prototype.matches) { 2018 Element.prototype.matches = 2019 Element.prototype.matchesSelector || 2020 Element.prototype.mozMatchesSelector || 2021 Element.prototype.msMatchesSelector || 2022 Element.prototype.oMatchesSelector || 2023 Element.prototype.webkitMatchesSelector || 2024 function(s) { 2025 "use strict"; 2026 var matches = (this.document || this.ownerDocument).querySelectorAll(s); 2027 var i = matches.length; 2028 while (--i >= 0 && matches.item(i) !== this) { 2029 // continue 2030 } 2031 return i > -1; 2032 }; 2033} 2034 2035if (!Object.assign) { 2036 Object.assign = function(target, varArgs) { // .length of function is 2 2037 "use strict"; 2038 if (target === null) { 2039 throw new TypeError("Cannot convert undefined or null to object"); 2040 } 2041 2042 var to = Object(target); 2043 2044 for (var index = 1; index < arguments.length; index++) { 2045 var nextSource = arguments[index]; 2046 2047 if (nextSource !== null) { 2048 for (var nextKey in nextSource) { 2049 if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) { 2050 to[nextKey] = nextSource[nextKey]; 2051 } 2052 } 2053 } 2054 } 2055 return to; 2056 }; 2057} 2058 2059(function(arr) { 2060 "use strict"; 2061 arr.forEach(function(item) { 2062 if (Object.prototype.hasOwnProperty.call(item, "remove")) { 2063 return; 2064 } 2065 Object.defineProperty(item, "remove", { 2066 configurable: true, 2067 enumerable: true, 2068 writable: true, 2069 value: function remove() { 2070 this.parentNode.removeChild(this); 2071 } 2072 }); 2073 }); 2074})([Element.prototype, CharacterData.prototype, DocumentType.prototype]); 2075 2076/******************************************************************************* 2077 * Copyright 2022 Adobe 2078 * 2079 * Licensed under the Apache License, Version 2.0 (the "License"); 2080 * you may not use this file except in compliance with the License. 2081 * You may obtain a copy of the License at 2082 * 2083 * http://www.apache.org/licenses/LICENSE-2.0 2084 * 2085 * Unless required by applicable law or agreed to in writing, software 2086 * distributed under the License is distributed on an "AS IS" BASIS, 2087 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 2088 * See the License for the specific language governing permissions and 2089 * limitations under the License. 2090 ******************************************************************************/ 2091(function(document) { 2092 "use strict"; 2093 2094 window.CMP = window.CMP || {}; 2095 window.CMP.utils = (function() { 2096 var NS = "cmp"; 2097 2098 /** 2099 * Reads options data from the Component wrapper element, defined via {@code data-cmp-*} data attributes 2100 * 2101 * @param {HTMLElement} element The component element to read options data from 2102 * @param {String} is The component identifier 2103 * @returns {String[]} The options read from the component data attributes 2104 */ 2105 var readData = function(element, is) { 2106 var data = element.dataset; 2107 var options = []; 2108 var capitalized = is; 2109 capitalized = capitalized.charAt(0).toUpperCase() + capitalized.slice(1); 2110 var reserved = ["is", "hook" + capitalized]; 2111 2112 for (var key in data) { 2113 if (Object.prototype.hasOwnProperty.call(data, key)) { 2114 var value = data[key]; 2115 2116 if (key.indexOf(NS) === 0) { 2117 key = key.slice(NS.length); 2118 key = key.charAt(0).toLowerCase() + key.substring(1); 2119 2120 if (reserved.indexOf(key) === -1) { 2121 options[key] = value; 2122 } 2123 } 2124 } 2125 } 2126 return options; 2127 }; 2128 2129 /** 2130 * Set up the final properties of a component by evaluating the transform function or fall back to the default value on demand 2131 * @param {String[]} options the options to transform 2132 * @param {Object} properties object of properties of property functions 2133 * @returns {Object} transformed properties 2134 */ 2135 var setupProperties = function(options, properties) { 2136 var transformedProperties = {}; 2137 2138 for (var key in properties) { 2139 if (Object.prototype.hasOwnProperty.call(properties, key)) { 2140 var property = properties[key]; 2141 if (options && options[key] != null) { 2142 if (property && typeof property.transform === "function") { 2143 transformedProperties[key] = property.transform(options[key]); 2144 } else { 2145 transformedProperties[key] = options[key]; 2146 } 2147 } else { 2148 transformedProperties[key] = properties[key]["default"]; 2149 } 2150 } 2151 } 2152 return transformedProperties; 2153 }; 2154 2155 2156 return { 2157 readData: readData, 2158 setupProperties: setupProperties 2159 }; 2160 }()); 2161}(window.document)); 2162 2163/******************************************************************************* 2164 * Copyright 2022 Adobe 2165 * 2166 * Licensed under the Apache License, Version 2.0 (the "License");
2167 * you may not use this file except in compliance with the License. 2168 * You may obtain a copy of the License at 2169 * 2170 * http://www.apache.org/licenses/LICENSE-2.0 2171 * 2172 * Unless required by applicable law or agreed to in writing, software 2173 * distributed under the License is distributed on an "AS IS" BASIS, 2174 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 2175 * See the License for the specific language governing permissions and 2176 * limitations under the License. 2177 ******************************************************************************/ 2178(function(document) { 2179 "use strict"; 2180 2181 window.CMP = window.CMP || {}; 2182 window.CMP.image = window.CMP.image || {}; 2183 window.CMP.image.dynamicMedia = (function() { 2184 var autoSmartCrops = {}; 2185 var SRC_URI_TEMPLATE_WIDTH_VAR = "{.width}"; 2186 var SRC_URI_TEMPLATE_DPR_VAR = "{dpr}"; 2187 var SRC_URI_DPR_OFF = "dpr=off"; 2188 var SRC_URI_DPR_ON = "dpr=on,{dpr}"; 2189 var dpr = window.devicePixelRatio || 1; 2190 var config = { 2191 minWidth: 20 2192 }; 2193 2194 /** 2195 * get auto smart crops from dm 2196 * @param {String} src the src uri 2197 * @returns {{}} the smart crop json object 2198 */ 2199 var getAutoSmartCrops = function(src) { 2200 var request = new XMLHttpRequest(); 2201 var url = src.split(SRC_URI_TEMPLATE_WIDTH_VAR)[0] + "?req=set,json"; 2202 request.open("GET", url, false); 2203 request.onload = function() { 2204 if (request.status >= 200 && request.status < 400) { 2205 // success status 2206 var responseText = request.responseText; 2207 var rePayload = new RegExp(/^(?:\/\*jsonp\*\/)?\s*([^()]+)\(([\s\S]+),\s*"[0-9]*"\);?$/gmi); 2208 var rePayloadJSON = new RegExp(/^{[\s\S]*}$/gmi); 2209 var resPayload = rePayload.exec(responseText); 2210 var payload; 2211 if (resPayload) { 2212 var payloadStr = resPayload[2]; 2213 if (rePayloadJSON.test(payloadStr)) { 2214 payload = JSON.parse(payloadStr); 2215 } 2216 2217 } 2218 // check "relation" - only in case of smartcrop preset 2219 if (payload && payload.set.relation && payload.set.relation.length > 0) { 2220 for (var i = 0; i < payload.set.relation.length; i++) { 2221 autoSmartCrops[parseInt(payload.set.relation[i].userdata.SmartCropWidth)] = 2222 ":" + payload.set.relation[i].userdata.SmartCropDef; 2223 } 2224 } 2225 } else { 2226 // error status 2227 } 2228 }; 2229 request.send(); 2230 return autoSmartCrops; 2231 }; 2232 2233 /** 2234 * Build and return the srcset value based on the available auto smart crops 2235 * @param {String} src the src uri 2236 * @param {Object} smartCrops the smart crops object 2237 * @returns {String} the srcset 2238 */ 2239 var getSrcSet = function(src, smartCrops) { 2240 var srcset; 2241 var keys = Object.keys(smartCrops); 2242 if (keys.length > 0) { 2243 srcset = []; 2244 for (var key in autoSmartCrops) { 2245 srcset.push(src.replace(SRC_URI_TEMPLATE_WIDTH_VAR, smartCrops[key]) + " " + key + "w"); 2246 } 2247 } 2248 return srcset.join(","); 2249 }; 2250 2251 /** 2252 * Get the optimal width based on the available sizes 2253 * @param {[Number]} sizes the available sizes 2254 * @param {Number} width the element width 2255 * @returns {String} the optimal width 2256 */ 2257 function getOptimalWidth(sizes, width) { 2258 var len = sizes.length; 2259 var key = 0; 2260 2261 while ((key < len - 1) && (sizes[key] < width)) { 2262 key++; 2263 } 2264 2265 return sizes[key] !== undefined ? sizes[key].toString() : width; 2266 } 2267 2268 /** 2269 * Get the width of an element or parent element if the width is smaller than the minimum width 2270 * @param {HTMLElement} component the image component 2271 * @param {HTMLElement | Node} parent the parent element 2272 * @returns {Number} the width of the element 2273 */ 2274 var getWidth = function(component, parent) { 2275 var width = component.offsetWidth; 2276 while (width < config.minWidth && parent && !component._autoWidth) { 2277 width = parent.offsetWidth; 2278 parent = parent.parentNode; 2279 } 2280 return width; 2281 }; 2282 2283 /** 2284 * Set the src and srcset attribute for a Dynamic Media Image which auto smart crops enabled. 2285 * @param {HTMLElement} component the image component 2286 * @param {{}} properties the component properties 2287 */ 2288 var setDMAttributes = function(component, properties) { 2289 // for v3 we first have to turn the dpr on
2290 var src = properties.src.replace(SRC_URI_DPR_OFF, SRC_URI_DPR_ON); 2291 src = src.replace(SRC_URI_TEMPLATE_DPR_VAR, dpr); 2292 var smartCrops = {}; 2293 var width; 2294 if (properties["smartcroprendition"] === "SmartCrop:Auto") { 2295 smartCrops = getAutoSmartCrops(src); 2296 } 2297 var hasWidths = (properties.widths && properties.widths.length > 0) || Object.keys(smartCrops).length > 0; 2298 if (hasWidths) { 2299 var image = component.querySelector("img"); 2300 var elemWidth = getWidth(component, component.parentNode); 2301 if (properties["smartcroprendition"] === "SmartCrop:Auto") { 2302 image.setAttribute("srcset", CMP.image.dynamicMedia.getSrcSet(src, smartCrops)); 2303 width = getOptimalWidth(Object.keys(smartCrops, elemWidth)); 2304 image.setAttribute("src", CMP.image.dynamicMedia.getSrc(src, smartCrops[width])); 2305 } else { 2306 width = getOptimalWidth(properties.widths, elemWidth); 2307 image.setAttribute("src", CMP.image.dynamicMedia.getSrc(src, width)); 2308 } 2309 } 2310 }; 2311 2312 /** 2313 * Get the src attribute based on the optimal width 2314 * @param {String} src the src uri 2315 * @param {String} width the element width 2316 * @returns {String} the final src attribute 2317 */ 2318 var getSrc = function(src, width) { 2319 if (src.indexOf(SRC_URI_TEMPLATE_WIDTH_VAR) > -1) { 2320 src = src.replace(SRC_URI_TEMPLATE_WIDTH_VAR, width); 2321 } 2322 return src; 2323 }; 2324 2325 2326 return { 2327 getAutoSmartCrops: getAutoSmartCrops, 2328 getSrcSet: getSrcSet, 2329 getSrc: getSrc, 2330 setDMAttributes: setDMAttributes, 2331 getWidth: getWidth 2332 }; 2333 }()); 2334 document.dispatchEvent(new CustomEvent("core.wcm.components.commons.site.image.dynamic-media.loaded")); 2335}(window.document)); 2336 2337/******************************************************************************* 2338 * Copyright 2016 Adobe 2339 * 2340 * Licensed under the Apache License, Version 2.0 (the "License"); 2341 * you may not use this file except in compliance with the License. 2342 * You may obtain a copy of the License at 2343 * 2344 * http://www.apache.org/licenses/LICENSE-2.0 2345 * 2346 * Unless required by applicable law or agreed to in writing, software 2347 * distributed under the License is distributed on an "AS IS" BASIS, 2348 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 2349 * See the License for the specific language governing permissions and 2350 * limitations under the License. 2351 ******************************************************************************/ 2352(function() { 2353 "use strict"; 2354 2355 var NS = "cmp"; 2356 var IS = "image"; 2357 2358 var EMPTY_PIXEL = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"; 2359 var LAZY_THRESHOLD_DEFAULT = 0; 2360 var SRC_URI_TEMPLATE_WIDTH_VAR = "{.width}"; 2361 var SRC_URI_TEMPLATE_WIDTH_VAR_ASSET_DELIVERY = "width={width}"; 2362 var SRC_URI_TEMPLATE_DPR_VAR = "{dpr}"; 2363 2364 var selectors = { 2365 self: "[data-" + NS + '-is="' + IS + '"]', 2366 image: '[data-cmp-hook-image="image"]', 2367 map: '[data-cmp-hook-image="map"]', 2368 area: '[data-cmp-hook-image="area"]' 2369 }; 2370 2371 var lazyLoader = { 2372 "cssClass": "cmp-image__image--is-loading", 2373 "style": { 2374 "height": 0, 2375 "padding-bottom": "" // will be replaced with % ratio 2376 } 2377 }; 2378 2379 var properties = { 2380 /** 2381 * An array of alternative image widths (in pixels). 2382 * Used to replace a {.width} variable in the src property with an optimal width if a URI template is provided. 2383 * 2384 * @memberof Image 2385 * @type {Number[]} 2386 * @default [] 2387 */ 2388 "widths": { 2389 "default": [], 2390 "transform": function(value) { 2391 var widths = []; 2392 value.split(",").forEach(function(item) { 2393 item = parseFloat(item); 2394 if (!isNaN(item)) { 2395 widths.push(item); 2396 } 2397 }); 2398 return widths; 2399 } 2400 }, 2401 /** 2402 * Indicates whether the image should be rendered lazily. 2403 * 2404 * @memberof Image 2405 * @type {Boolean} 2406 * @default false 2407 */ 2408 "lazy": { 2409 "default": false, 2410 "transform": function(value) { 2411 return !(value === null || typeof value === "undefined"); 2412 } 2413 }, 2414 /** 2415 * Indicates image is DynamicMedia image. 2416 * 2417 * @memberof Image 2418 * @type {Boolean} 2419 * @default false 2420 */ 2421 "dmimage": { 2422 "default": false, 2423 "transform": function(value) { 2424 return !(value === null || typeof value === "undefined"); 2425 } 2426 }, 2427 /** 2428 * The lazy threshold. 2429 * This is the number of pixels, in advance of becoming visible, when an lazy-loading image should begin 2430 * to load. 2431 * 2432 * @memberof Image 2433 * @type {Number} 2434 * @default 0 2435 */ 2436 "lazythreshold": { 2437 "default": 0, 2438 "transform": function(value) { 2439 var val = parseInt(value); 2440 if (isNaN(val)) { 2441 return LAZY_THRESHOLD_DEFAULT; 2442 } 2443 return val; 2444 } 2445 }, 2446 /** 2447 * The image source. 2448 * 2449 * Can be a simple image source, or a URI template representation that 2450 * can be variable expanded - useful for building an image configuration with an alternative width. 2451 * e.g. '/path/image.coreimg{.width}.jpeg/1506620954214.jpeg' 2452 * 2453 * @memberof Image 2454 * @type {String} 2455 */ 2456 "src": { 2457 "transform": function(value) { 2458 return decodeURIComponent(value); 2459 } 2460 } 2461 }; 2462 2463 var devicePixelRatio = window.devicePixelRatio || 1; 2464 2465 function Image(config) { 2466 var that = this; 2467 2468 var smartCrops = {}; 2469 2470 var useAssetDelivery = false;
2471 var srcUriTemplateWidthVar = SRC_URI_TEMPLATE_WIDTH_VAR; 2472 2473 function init(config) { 2474 // prevents multiple initialization 2475 config.element.removeAttribute("data-" + NS + "-is"); 2476 2477 // check if asset delivery is used 2478 if (config.options.src && config.options.src.indexOf(SRC_URI_TEMPLATE_WIDTH_VAR_ASSET_DELIVERY) >= 0) { 2479 useAssetDelivery = true; 2480 srcUriTemplateWidthVar = SRC_URI_TEMPLATE_WIDTH_VAR_ASSET_DELIVERY; 2481 } 2482 2483 that._properties = CMP.utils.setupProperties(config.options, properties); 2484 cacheElements(config.element); 2485 // check image is DM asset; if true try to make req=set 2486 if (config.options.src && Object.prototype.hasOwnProperty.call(config.options, "dmimage") && (config.options["smartcroprendition"] === "SmartCrop:Auto")) { 2487 smartCrops = CMP.image.dynamicMedia.getAutoSmartCrops(config.options.src); 2488 } 2489 2490 if (!that._elements.noscript) { 2491 return; 2492 } 2493 2494 that._elements.container = that._elements.link ? that._elements.link : that._elements.self; 2495 2496 unwrapNoScript(); 2497 2498 if (that._properties.lazy) { 2499 addLazyLoader(); 2500 } 2501 2502 if (that._elements.map) { 2503 that._elements.image.addEventListener("load", onLoad); 2504 } 2505 2506 window.addEventListener("resize", onWindowResize); 2507 ["focus", "click", "load", "transitionend", "animationend", "scroll"].forEach(function(name) { 2508 document.addEventListener(name, that.update); 2509 }); 2510 2511 that._elements.image.addEventListener("cmp-image-redraw", that.update); 2512 2513 that._interSectionObserver = new IntersectionObserver(function(entries, interSectionObserver) { 2514 entries.forEach(function(entry) { 2515 if (entry.intersectionRatio > 0) { 2516 that.update(); 2517 } 2518 }); 2519 }); 2520 that._interSectionObserver.observe(that._elements.self); 2521 2522 that.update(); 2523 } 2524 2525 function loadImage() { 2526 var hasWidths = (that._properties.widths && that._properties.widths.length > 0) || Object.keys(smartCrops).length > 0; 2527 var replacement; 2528 if (Object.keys(smartCrops).length > 0) { 2529 var optimalWidth = getOptimalWidth(Object.keys(smartCrops), false); 2530 replacement = smartCrops[optimalWidth]; 2531 } else { 2532 replacement = hasWidths ? (that._properties.dmimage ? "" : ".") + getOptimalWidth(that._properties.widths, true) : ""; 2533 } 2534 if (useAssetDelivery) { 2535 replacement = replacement !== "" ? ("width=" + replacement.substring(1)) : ""; 2536 } 2537 var url = that._properties.src.replace(srcUriTemplateWidthVar, replacement); 2538 url = url.replace(SRC_URI_TEMPLATE_DPR_VAR, devicePixelRatio); 2539 2540 var imgSrcAttribute = that._elements.image.getAttribute("src"); 2541 2542 if (url !== imgSrcAttribute) { 2543 if (imgSrcAttribute === null || imgSrcAttribute === EMPTY_PIXEL) { 2544 that._elements.image.setAttribute("src", url); 2545 } else { 2546 var urlTemplateParts = that._properties.src.split(srcUriTemplateWidthVar); 2547 // check if image src was dynamically swapped meanwhile (e.g. by Target) 2548 var isImageRefSame = imgSrcAttribute.startsWith(urlTemplateParts[0]); 2549 if (isImageRefSame && urlTemplateParts.length > 1) { 2550 isImageRefSame = imgSrcAttribute.endsWith(urlTemplateParts[urlTemplateParts.length - 1]); 2551 } 2552 if (isImageRefSame) { 2553 that._elements.image.setAttribute("src", url); 2554 if (!hasWidths) { 2555 window.removeEventListener("scroll", that.update); 2556 } 2557 } 2558 } 2559 } 2560 if (that._lazyLoaderShowing) { 2561 that._elements.image.addEventListener("load", removeLazyLoader); 2562 } 2563 that._interSectionObserver.unobserve(that._elements.self); 2564 } 2565 2566 function getOptimalWidth(widths, useDevicePixelRatio) { 2567 var container = that._elements.self; 2568 var containerWidth = container.clientWidth; 2569 while (containerWidth === 0 && container.parentNode) { 2570 container = container.parentNode; 2571 containerWidth = container.clientWidth; 2572 } 2573 2574 var dpr = useDevicePixelRatio ? devicePixelRatio : 1; 2575 var optimalWidth = containerWidth * dpr; 2576 var len = widths.length; 2577 var key = 0; 2578 2579 while ((key < len - 1) && (widths[key] < optimalWidth)) { 2580 key++; 2581 } 2582 2583 return widths[key].toString(); 2584 } 2585 2586 function addLazyLoader() { 2587 var width = that._elements.image.getAttribute("width"); 2588 var height = that._elements.image.getAttribute("height"); 2589 2590 if (width && height) { 2591 var ratio = (height / width) * 100; 2592 var styles = lazyLoader.style; 2593 2594 styles["padding-bottom"] = ratio + "%"; 2595 2596 for (var s in styles) { 2597 if (Object.prototype.hasOwnProperty.call(styles, s)) { 2598 that._elements.image.style[s] = styles[s]; 2599 } 2600 } 2601 } 2602 that._elements.image.setAttribute("src", EMPTY_PIXEL); 2603 that._elements.image.classList.add(lazyLoader.cssClass); 2604 that._lazyLoaderShowing = true; 2605 } 2606 2607 function unwrapNoScript() { 2608 var markup = decodeNoscript(that._elements.noscript.textContent.trim()); 2609 var parser = new DOMParser(); 2610 2611 // temporary document avoids requesting the image before removing its src 2612 var temporaryDocument = parser.parseFromString(markup, "text/html"); 2613 var imageElement = temporaryDocument.querySelector(selectors.image); 2614 imageElement.removeAttribute("src"); 2615 that._elements.container.insertBefore(imageElement, that._elements.noscript); 2616 2617 var mapElement = temporaryDocument.querySelector(selectors.map); 2618 if (mapElement) { 2619 that._elements.container.insertBefore(mapElement, that._elements.noscript); 2620 } 2621 2622 that._elements.noscript.parentNode.removeChild(that._elements.noscript); 2623 if (that._elements.container.matches(selectors.image)) { 2624 that._elements.image = that._elements.container; 2625 } else { 2626 that._elements.image = that._elements.container.querySelector(selectors.image); 2627 } 2628 2629 that._elements.map = that._elements.container.querySelector(selectors.map); 2630 that._elements.areas = that._elements.container.querySelectorAll(selectors.area); 2631 } 2632 2633 function removeLazyLoader() { 2634 that._elements.image.classList.remove(lazyLoader.cssClass); 2635 for (var property in lazyLoader.style) { 2636 if (Object.prototype.hasOwnProperty.call(lazyLoader.style, property)) { 2637 that._elements.image.style[property] = ""; 2638 } 2639 } 2640 that._elements.image.removeEventListener("load", removeLazyLoader); 2641 that._lazyLoaderShowing = false;
2642 } 2643 2644 function isLazyVisible() { 2645 if (that._elements.container.offsetParent === null) { 2646 return false; 2647 } 2648 2649 var wt = window.pageYOffset; 2650 var wb = wt + document.documentElement.clientHeight; 2651 var et = that._elements.container.getBoundingClientRect().top + wt; 2652 var eb = et + that._elements.container.clientHeight; 2653 2654 return eb >= wt - that._properties.lazythreshold && et <= wb + that._properties.lazythreshold; 2655 } 2656 2657 function resizeAreas() { 2658 if (that._elements.areas && that._elements.areas.length > 0) { 2659 for (var i = 0; i < that._elements.areas.length; i++) { 2660 var width = that._elements.image.width; 2661 var height = that._elements.image.height; 2662 2663 if (width && height) { 2664 var relcoords = that._elements.areas[i].dataset.cmpRelcoords; 2665 if (relcoords) { 2666 var relativeCoordinates = relcoords.split(","); 2667 var coordinates = new Array(relativeCoordinates.length); 2668 2669 for (var j = 0; j < coordinates.length; j++) { 2670 if (j % 2 === 0) { 2671 coordinates[j] = parseInt(relativeCoordinates[j] * width); 2672 } else { 2673 coordinates[j] = parseInt(relativeCoordinates[j] * height); 2674 } 2675 } 2676 2677 that._elements.areas[i].coords = coordinates; 2678 } 2679 } 2680 } 2681 } 2682 } 2683 2684 function cacheElements(wrapper) { 2685 that._elements = {}; 2686 that._elements.self = wrapper; 2687 var hooks = that._elements.self.querySelectorAll("[data-" + NS + "-hook-" + IS + "]"); 2688 2689 for (var i = 0; i < hooks.length; i++) { 2690 var hook = hooks[i]; 2691 var capitalized = IS; 2692 capitalized = capitalized.charAt(0).toUpperCase() + capitalized.slice(1); 2693 var key = hook.dataset[NS + "Hook" + capitalized]; 2694 that._elements[key] = hook; 2695 } 2696 } 2697 2698 function onWindowResize() { 2699 that.update(); 2700 resizeAreas(); 2701 } 2702 2703 function onLoad() { 2704 resizeAreas(); 2705 } 2706 2707 that.update = function() { 2708 if (that._properties.lazy) { 2709 if (isLazyVisible()) { 2710 loadImage(); 2711 } 2712 } else { 2713 loadImage(); 2714 } 2715 }; 2716 2717 if (config && config.element) { 2718 init(config); 2719 } 2720 } 2721 2722 function onDocumentReady() { 2723 var elements = document.querySelectorAll(selectors.self); 2724 for (var i = 0; i < elements.length; i++) { 2725 new Image({ element: elements[i], options: CMP.utils.readData(elements[i], IS) }); 2726 } 2727 2728 var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver; 2729 var body = document.querySelector("body"); 2730 var observer = new MutationObserver(function(mutations) { 2731 mutations.forEach(function(mutation) { 2732 // needed for IE 2733 var nodesArray = [].slice.call(mutation.addedNodes); 2734 if (nodesArray.length > 0) { 2735 nodesArray.forEach(function(addedNode) { 2736 if (addedNode.querySelectorAll) { 2737 var elementsArray = [].slice.call(addedNode.querySelectorAll(selectors.self)); 2738 elementsArray.forEach(function(element) { 2739 new Image({ element: element, options: CMP.utils.readData(element, IS) }); 2740 }); 2741 } 2742 }); 2743 } 2744 }); 2745 }); 2746 2747 observer.observe(body, { 2748 subtree: true, 2749 childList: true, 2750 characterData: true 2751 }); 2752 } 2753 2754 var documentReady = document.readyState !== "loading" ? Promise.resolve() : new Promise(function(resolve) { 2755 document.addEventListener("DOMContentLoaded", resolve); 2756 }); 2757 2758 Promise.all([documentReady]).then(onDocumentReady); 2759 /* 2760 on drag & drop of the component into a parsys, noscript's content will be escaped multiple times by the editor which creates 2761 the DOM for editing; the HTML parser cannot be used here due to the multiple escaping 2762 */ 2763 function decodeNoscript(text) { 2764 text = text.replace(/&(amp;)*lt;/g, "<"); 2765 text = text.replace(/&(amp;)*gt;/g, ">"); 2766 return text; 2767 } 2768 2769})(); 2770 2771/******************************************************************************* 2772 * Copyright 2017 Adobe 2773 * 2774 * Licensed under the Apache License, Version 2.0 (the "License");
2775 * you may not use this file except in compliance with the License. 2776 * You may obtain a copy of the License at 2777 * 2778 * http://www.apache.org/licenses/LICENSE-2.0 2779 * 2780 * Unless required by applicable law or agreed to in writing, software 2781 * distributed under the License is distributed on an "AS IS" BASIS, 2782 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 2783 * See the License for the specific language governing permissions and 2784 * limitations under the License. 2785 ******************************************************************************/ 2786(function() { 2787 "use strict"; 2788 2789 var NS = "cmp"; 2790 var IS = "search"; 2791 2792 var DELAY = 300; // time before fetching new results when the user is typing a search string 2793 var LOADING_DISPLAY_DELAY = 300; // minimum time during which the loading indicator is displayed 2794 var PARAM_RESULTS_OFFSET = "resultsOffset"; 2795 2796 var keyCodes = { 2797 TAB: 9, 2798 ENTER: 13, 2799 ESCAPE: 27, 2800 ARROW_UP: 38, 2801 ARROW_DOWN: 40 2802 }; 2803 2804 var selectors = { 2805 self: "[data-" + NS + '-is="' + IS + '"]', 2806 item: { 2807 self: "[data-" + NS + "-hook-" + IS + '="item"]', 2808 title: "[data-" + NS + "-hook-" + IS + '="itemTitle"]', 2809 focused: "." + NS + "-search__item--is-focused" 2810 } 2811 }; 2812 2813 var properties = { 2814 /** 2815 * The minimum required length of the search term before results are fetched. 2816 * 2817 * @memberof Search 2818 * @type {Number} 2819 * @default 3 2820 */ 2821 minLength: { 2822 "default": 3, 2823 transform: function(value) { 2824 value = parseFloat(value); 2825 return isNaN(value) ? null : value; 2826 } 2827 }, 2828 /** 2829 * The maximal number of results fetched by a search request. 2830 * 2831 * @memberof Search 2832 * @type {Number} 2833 * @default 10 2834 */ 2835 resultsSize: { 2836 "default": 10, 2837 transform: function(value) { 2838 value = parseFloat(value); 2839 return isNaN(value) ? null : value; 2840 } 2841 } 2842 }; 2843 2844 var idCount = 0; 2845 2846 function readData(element) { 2847 var data = element.dataset; 2848 var options = []; 2849 var capitalized = IS; 2850 capitalized = capitalized.charAt(0).toUpperCase() + capitalized.slice(1); 2851 var reserved = ["is", "hook" + capitalized]; 2852 2853 for (var key in data) { 2854 if (Object.prototype.hasOwnProperty.call(data, key)) { 2855 var value = data[key]; 2856 2857 if (key.indexOf(NS) === 0) { 2858 key = key.slice(NS.length); 2859 key = key.charAt(0).toLowerCase() + key.substring(1); 2860 2861 if (reserved.indexOf(key) === -1) { 2862 options[key] = value; 2863 } 2864 } 2865 } 2866 } 2867 2868 return options; 2869 } 2870 2871 function toggleShow(element, show) { 2872 if (element) { 2873 if (show !== false) { 2874 element.style.display = "block"; 2875 element.setAttribute("aria-hidden", false); 2876 } else { 2877 element.style.display = "none"; 2878 element.setAttribute("aria-hidden", true); 2879 } 2880 } 2881 } 2882 2883 function serialize(form) { 2884 var query = []; 2885 if (form && form.elements) { 2886 for (var i = 0; i < form.elements.length; i++) { 2887 var node = form.elements[i]; 2888 if (!node.disabled && node.name) { 2889 var param = [node.name, encodeURIComponent(node.value)]; 2890 query.push(param.join("=")); 2891 } 2892 } 2893 } 2894 return query.join("&"); 2895 } 2896 2897 function mark(node, regex) { 2898 if (!node || !regex) { 2899 return; 2900 } 2901 2902 // text nodes 2903 if (node.nodeType === 3) { 2904 var nodeValue = node.nodeValue; 2905 var match = regex.exec(nodeValue); 2906 2907 if (nodeValue && match) { 2908 var element = document.createElement("mark"); 2909 element.className = NS + "-search__item-mark"; 2910 element.appendChild(document.createTextNode(match[0])); 2911 2912 var after = node.splitText(match.index); 2913 after.nodeValue = after.nodeValue.substring(match[0].length); 2914 node.parentNode.insertBefore(element, after); 2915 } 2916 } else if (node.hasChildNodes()) { 2917 for (var i = 0; i < node.childNodes.length; i++) { 2918 // recurse 2919 mark(node.childNodes[i], regex); 2920 } 2921 } 2922 } 2923 2924 function Search(config) { 2925 if (config.element) { 2926 // prevents multiple initialization 2927 config.element.removeAttribute("data-" + NS + "-is"); 2928 } 2929 2930 this._cacheElements(config.element); 2931 this._setupProperties(config.options); 2932 2933 this._action = this._elements.form.getAttribute("action"); 2934 this._resultsOffset = 0; 2935 this._hasMoreResults = true; 2936 2937 this._elements.input.addEventListener("input", this._onInput.bind(this)); 2938 this._elements.input.addEventListener("focus", this._onInput.bind(this)); 2939 this._elements.input.addEventListener("keydown", this._onKeydown.bind(this)); 2940 this._elements.clear.addEventListener("click", this._onClearClick.bind(this)); 2941 document.addEventListener("click", this._onDocumentClick.bind(this)); 2942 this._elements.results.addEventListener("scroll", this._onScroll.bind(this)); 2943 2944 this._makeAccessible(); 2945 } 2946 2947 Search.prototype._displayResults = function() { 2948 if (this._elements.input.value.length === 0) { 2949 toggleShow(this._elements.clear, false); 2950 this._cancelResults(); 2951 } else if (this._elements.input.value.length < this._properties.minLength) { 2952 toggleShow(this._elements.clear, true); 2953 } else { 2954 this._updateResults(); 2955 toggleShow(this._elements.clear, true); 2956 } 2957 }; 2958 2959 Search.prototype._onScroll = function(event) { 2960 // fetch new results when the results to be scrolled down are less than the visible results 2961 if (this._elements.results.scrollTop + 2 * this._elements.results.clientHeight >= this._elements.results.scrollHeight) { 2962 this._resultsOffset += this._properties.resultsSize; 2963 this._displayResults(); 2964 } 2965 }; 2966 2967 Search.prototype._onInput = function(event) { 2968 var self = this; 2969 self._cancelResults(); 2970 // start searching when the search term reaches the minimum length 2971 this._timeout = setTimeout(function() { 2972 self._displayResults(); 2973 }, DELAY); 2974 }; 2975 2976 Search.prototype._onKeydown = function(event) { 2977 var self = this; 2978 2979 switch (event.keyCode) { 2980 case keyCodes.TAB: 2981 if (self._resultsOpen()) { 2982 toggleShow(self._elements.results, false); 2983 self._elements.input.setAttribute("aria-expanded", "false"); 2984 } 2985 break;
2986 case keyCodes.ENTER: 2987 event.preventDefault(); 2988 if (self._resultsOpen()) { 2989 var focused = self._elements.results.querySelector(selectors.item.focused); 2990 if (focused) { 2991 focused.click(); 2992 } 2993 } 2994 break; 2995 case keyCodes.ESCAPE: 2996 self._cancelResults(); 2997 break; 2998 case keyCodes.ARROW_UP: 2999 if (self._resultsOpen()) { 3000 event.preventDefault(); 3001 self._stepResultFocus(true); 3002 } 3003 break; 3004 case keyCodes.ARROW_DOWN: 3005 if (self._resultsOpen()) { 3006 event.preventDefault(); 3007 self._stepResultFocus(); 3008 } else { 3009 // test the input and if necessary fetch and display the results 3010 self._onInput(); 3011 } 3012 break; 3013 default: 3014 return; 3015 } 3016 }; 3017 3018 Search.prototype._onClearClick = function(event) { 3019 event.preventDefault(); 3020 this._elements.input.value = ""; 3021 toggleShow(this._elements.clear, false); 3022 toggleShow(this._elements.results, false); 3023 this._elements.input.setAttribute("aria-expanded", "false"); 3024 }; 3025 3026 Search.prototype._onDocumentClick = function(event) { 3027 var inputContainsTarget = this._elements.input.contains(event.target); 3028 var resultsContainTarget = this._elements.results.contains(event.target); 3029 3030 if (!(inputContainsTarget || resultsContainTarget)) { 3031 toggleShow(this._elements.results, false); 3032 this._elements.input.setAttribute("aria-expanded", "false"); 3033 } 3034 }; 3035 3036 Search.prototype._resultsOpen = function() { 3037 return this._elements.results.style.display !== "none"; 3038 }; 3039 3040 Search.prototype._makeAccessible = function() { 3041 var id = NS + "-search-results-" + idCount; 3042 this._elements.input.setAttribute("aria-owns", id); 3043 this._elements.results.id = id; 3044 idCount++; 3045 }; 3046 3047 Search.prototype._generateItems = function(data, results) { 3048 var self = this; 3049 3050 data.forEach(function(item) { 3051 var el = document.createElement("span"); 3052 el.innerHTML = self._elements.itemTemplate.innerHTML; 3053 el.querySelectorAll(selectors.item.title)[0].appendChild(document.createTextNode(item.title)); 3054 el.querySelectorAll(selectors.item.self)[0].setAttribute("href", self._safeHref(item.url)); 3055 results.innerHTML += el.innerHTML; 3056 }); 3057 }; 3058 3059 Search.prototype._safeHref = function(href) { 3060 var a = document.createElement("a"); 3061 a.href = href; 3062 return a.pathname; 3063 }; 3064 3065 Search.prototype._markResults = function() { 3066 var nodeList = this._elements.results.querySelectorAll(selectors.item.self); 3067 var escapedTerm = this._elements.input.value.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&"); 3068 var regex = new RegExp("(" + escapedTerm + ")", "gi"); 3069 3070 for (var i = this._resultsOffset - 1; i < nodeList.length; ++i) { 3071 var result = nodeList[i]; 3072 mark(result, regex); 3073 } 3074 }; 3075 3076 Search.prototype._stepResultFocus = function(reverse) { 3077 var results = this._elements.results.querySelectorAll(selectors.item.self); 3078 var focused = this._elements.results.querySelector(selectors.item.focused); 3079 var newFocused; 3080 var index = Array.prototype.indexOf.call(results, focused); 3081 var focusedCssClass = NS + "-search__item--is-focused"; 3082 3083 if (results.length > 0) { 3084 3085 if (!reverse) { 3086 // highlight the next result 3087 if (index < 0) { 3088 results[0].classList.add(focusedCssClass); 3089 results[0].setAttribute("aria-selected", "true"); 3090 } else if (index + 1 < results.length) { 3091 results[index].classList.remove(focusedCssClass); 3092 results[index].setAttribute("aria-selected", "false"); 3093 results[index + 1].classList.add(focusedCssClass); 3094 results[index + 1].setAttribute("aria-selected", "true"); 3095 } 3096 3097 // if the last visible result is partially hidden, scroll up until it's completely visible 3098 newFocused = this._elements.results.querySelector(selectors.item.focused); 3099 if (newFocused) { 3100 var bottomHiddenHeight = newFocused.offsetTop + newFocused.offsetHeight - this._elements.results.scrollTop - this._elements.results.clientHeight; 3101 if (bottomHiddenHeight > 0) { 3102 this._elements.results.scrollTop += bottomHiddenHeight; 3103 } else { 3104 this._onScroll(); 3105 } 3106 } 3107 3108 } else { 3109 // highlight the previous result 3110 if (index >= 1) { 3111 results[index].classList.remove(focusedCssClass); 3112 results[index].setAttribute("aria-selected", "false"); 3113 results[index - 1].classList.add(focusedCssClass); 3114 results[index - 1].setAttribute("aria-selected", "true"); 3115 } 3116 3117 // if the first visible result is partially hidden, scroll down until it's completely visible 3118 newFocused = this._elements.results.querySelector(selectors.item.focused); 3119 if (newFocused) { 3120 var topHiddenHeight = this._elements.results.scrollTop - newFocused.offsetTop; 3121 if (topHiddenHeight > 0) { 3122 this._elements.results.scrollTop -= topHiddenHeight; 3123 } 3124 } 3125 } 3126 } 3127 }; 3128 3129 Search.prototype._updateResults = function() { 3130 var self = this; 3131 if (self._hasMoreResults) { 3132 var request = new XMLHttpRequest(); 3133 var url = self._action + "?" + serialize(self._elements.form) + "&" + PARAM_RESULTS_OFFSET + "=" + self._resultsOffset; 3134 3135 request.open("GET", url, true); 3136 request.onload = function() { 3137 // when the results are loaded: hide the loading indicator and display the search icon after a minimum period 3138 setTimeout(function() { 3139 toggleShow(self._elements.loadingIndicator, false); 3140 toggleShow(self._elements.icon, true); 3141 }, LOADING_DISPLAY_DELAY); 3142 if (request.status >= 200 && request.status < 400) { 3143 // success status 3144 var data = JSON.parse(request.responseText); 3145 if (data.length > 0) { 3146 self._generateItems(data, self._elements.results); 3147 self._markResults(); 3148 toggleShow(self._elements.results, true); 3149 self._elements.input.setAttribute("aria-expanded", "true"); 3150 } else { 3151 self._hasMoreResults = false;
3152 } 3153 // the total number of results is not a multiple of the fetched results: 3154 // -> we reached the end of the query 3155 if (self._elements.results.querySelectorAll(selectors.item.self).length % self._properties.resultsSize > 0) { 3156 self._hasMoreResults = false; 3157 } 3158 } else { 3159 // error status 3160 } 3161 }; 3162 // when the results are loading: display the loading indicator and hide the search icon 3163 toggleShow(self._elements.loadingIndicator, true); 3164 toggleShow(self._elements.icon, false); 3165 request.send(); 3166 } 3167 }; 3168 3169 Search.prototype._cancelResults = function() { 3170 clearTimeout(this._timeout); 3171 this._elements.results.scrollTop = 0; 3172 this._resultsOffset = 0; 3173 this._hasMoreResults = true; 3174 this._elements.results.innerHTML = ""; 3175 this._elements.input.setAttribute("aria-expanded", "false"); 3176 }; 3177 3178 Search.prototype._cacheElements = function(wrapper) { 3179 this._elements = {}; 3180 this._elements.self = wrapper; 3181 var hooks = this._elements.self.querySelectorAll("[data-" + NS + "-hook-" + IS + "]"); 3182 3183 for (var i = 0; i < hooks.length; i++) { 3184 var hook = hooks[i]; 3185 var capitalized = IS; 3186 capitalized = capitalized.charAt(0).toUpperCase() + capitalized.slice(1); 3187 var key = hook.dataset[NS + "Hook" + capitalized]; 3188 this._elements[key] = hook; 3189 } 3190 }; 3191 3192 Search.prototype._setupProperties = function(options) { 3193 this._properties = {}; 3194 3195 for (var key in properties) { 3196 if (Object.prototype.hasOwnProperty.call(properties, key)) { 3197 var property = properties[key]; 3198 if (options && options[key] != null) { 3199 if (property && typeof property.transform === "function") { 3200 this._properties[key] = property.transform(options[key]); 3201 } else { 3202 this._properties[key] = options[key]; 3203 } 3204 } else { 3205 this._properties[key] = properties[key]["default"]; 3206 } 3207 } 3208 } 3209 }; 3210 3211 function onDocumentReady() { 3212 var elements = document.querySelectorAll(selectors.self); 3213 for (var i = 0; i < elements.length; i++) { 3214 new Search({ element: elements[i], options: readData(elements[i]) }); 3215 } 3216 3217 var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver; 3218 var body = document.querySelector("body"); 3219 var observer = new MutationObserver(function(mutations) { 3220 mutations.forEach(function(mutation) { 3221 // needed for IE 3222 var nodesArray = [].slice.call(mutation.addedNodes); 3223 if (nodesArray.length > 0) { 3224 nodesArray.forEach(function(addedNode) { 3225 if (addedNode.querySelectorAll) { 3226 var elementsArray = [].slice.call(addedNode.querySelectorAll(selectors.self)); 3227 elementsArray.forEach(function(element) { 3228 new Search({ element: element, options: readData(element) }); 3229 }); 3230 } 3231 }); 3232 } 3233 }); 3234 }); 3235 3236 observer.observe(body, { 3237 subtree: true, 3238 childList: true, 3239 characterData: true 3240 }); 3241 } 3242 3243 if (document.readyState !== "loading") { 3244 onDocumentReady(); 3245 } else { 3246 document.addEventListener("DOMContentLoaded", onDocumentReady); 3247 } 3248 3249})(); 3250 3251/******************************************************************************* 3252 * Copyright 2016 Adobe 3253 * 3254 * Licensed under the Apache License, Version 2.0 (the "License"); 3255 * you may not use this file except in compliance with the License. 3256 * You may obtain a copy of the License at 3257 * 3258 * http://www.apache.org/licenses/LICENSE-2.0 3259 * 3260 * Unless required by applicable law or agreed to in writing, softw
3260are 3261 * distributed under the License is distributed on an "AS IS" BASIS, 3262 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 3263 * See the License for the specific language governing permissions and 3264 * limitations under the License. 3265 ******************************************************************************/ 3266(function() { 3267 "use strict"; 3268 3269 var NS = "cmp"; 3270 var IS = "formText"; 3271 var IS_DASH = "form-text"; 3272 var SELF_SELECTOR = "[data-" + NS + '-is="' + IS + '"]'; 3273 3274 var selectors = { 3275 self: SELF_SELECTOR, 3276 validationMessage: SELF_SELECTOR + " .cmp-form-text__validation-message" 3277 }; 3278 3279 var displayValidationMessage = false; 3280 3281 var properties = { 3282 /** 3283 * A validation message to display if there is a type mismatch between the user input and expected input. 3284 * 3285 * @type {String} 3286 */ 3287 constraintMessage: "", 3288 /** 3289 * A validation message to display if no input is supplied, but input is expected for the field. 3290 * 3291 * @type {String} 3292 */ 3293 requiredMessage: "" 3294 }; 3295 3296 function readData(element) { 3297 var data = element.dataset; 3298 var options = []; 3299 var capitalized = IS; 3300 capitalized = capitalized.charAt(0).toUpperCase() + capitalized.slice(1); 3301 var reserved = ["is", "hook" + capitalized]; 3302 3303 for (var key in data) { 3304 if (Object.prototype.hasOwnProperty.call(data, key)) { 3305 var value = data[key]; 3306 3307 if (key.indexOf(NS) === 0) { 3308 key = key.slice(NS.length); 3309 key = key.charAt(0).toLowerCase() + key.substring(1); 3310 3311 if (reserved.indexOf(key) === -1) { 3312 options[key] = value; 3313 } 3314 } 3315 } 3316 } 3317 3318 return options; 3319 } 3320 3321 function FormText(config) { 3322 if (config.element) { 3323 // prevents multiple initialization 3324 config.element.removeAttribute("data-" + NS + "-is"); 3325 } 3326 3327 this._cacheElements(config.element); 3328 this._setupProperties(config.options); 3329 3330 this._elements.input.addEventListener("invalid", this._onInvalid.bind(this)); 3331 this._elements.input.addEventListener("input", this._onInput.bind(this)); 3332 if (displayValidationMessage) { 3333 this._elements.input.checkValidity(); 3334 } 3335 } 3336 3337 FormText.prototype._onInvalid = function(event) { 3338 event.target.setCustomValidity(""); 3339 if (event.target.validity.typeMismatch) { 3340 if (this._properties.constraintMessage) { 3341 event.target.setCustomValidity(this._properties.constraintMessage); 3342 } 3343 } else if (event.target.validity.valueMissing) { 3344 if (this._properties.requiredMessage) { 3345 event.target.setCustomValidity(this._properties.requiredMessage); 3346 } 3347 } 3348 if (displayValidationMessage) { 3349 var validationMessage = event.target.parentElement.querySelector(".cmp-form-text__validation-message"); 3350 if (validationMessage) { 3351 validationMessage.innerText = event.target.validationMessage; 3352 } 3353 } 3354 }; 3355 3356 FormText.prototype._onInput = function(event) { 3357 event.target.setCustomValidity(""); 3358 if (displayValidationMessage) { 3359 event.target.checkValidity(); 3360 } 3361 }; 3362 3363 FormText.prototype._cacheElements = function(wrapper) { 3364 this._elements = {}; 3365 this._elements.self = wrapper; 3366 var hooks = this._elements.self.querySelectorAll("[data-" + NS + "-hook-" + IS_DASH + "]"); 3367 for (var i = 0; i < hooks.length; i++) { 3368 var hook = hooks[i]; 3369 var capitalized = IS; 3370 capitalized = capitalized.charAt(0).toUpperCase() + capitalized.slice(1); 3371 var key = hook.dataset[NS + "Hook" + capitalized]; 3372 this._elements[key] = hook; 3373 } 3374 }; 3375 3376 FormText.prototype._setupProperties = function(options) { 3377 this._properties = {}; 3378 3379 for (var key in properties) { 3380 if (Object.prototype.hasOwnProperty.call(properties, key)) { 3381 var property = properties[key]; 3382 if (options && options[key] != null) { 3383 if (property && typeof property.transform === "function") { 3384 this._properties[key] = property.transform(options[key]); 3385 } else { 3386 this._properties[key] = options[key]; 3387 } 3388 } else { 3389 this._properties[key] = properties[key]["default"]; 3390 } 3391 } 3392 } 3393 }; 3394 3395 function onDocumentReady() {
3396 var validationMessages = document.querySelectorAll(selectors.validationMessage); 3397 if (validationMessages && validationMessages.length > 0) { 3398 displayValidationMessage = true; 3399 } 3400 3401 var elements = document.querySelectorAll(selectors.self); 3402 for (var i = 0; i < elements.length; i++) { 3403 new FormText({ element: elements[i], options: readData(elements[i]) }); 3404 } 3405 3406 var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver; 3407 var body = document.querySelector("body"); 3408 var observer = new MutationObserver(function(mutations) { 3409 mutations.forEach(function(mutation) { 3410 // needed for IE 3411 var nodesArray = [].slice.call(mutation.addedNodes); 3412 if (nodesArray.length > 0) { 3413 nodesArray.forEach(function(addedNode) { 3414 if (addedNode.querySelectorAll) { 3415 var elementsArray = [].slice.call(addedNode.querySelectorAll(selectors.self)); 3416 elementsArray.forEach(function(element) { 3417 new FormText({ element: element, options: readData(element) }); 3418 }); 3419 } 3420 }); 3421 } 3422 }); 3423 }); 3424 3425 observer.observe(body, { 3426 subtree: true, 3427 childList: true, 3428 characterData: true 3429 }); 3430 } 3431 3432 if (document.readyState !== "loading") { 3433 onDocumentReady(); 3434 } else { 3435 document.addEventListener("DOMContentLoaded", onDocumentReady); 3436 } 3437 3438})(); 3439 3440/******************************************************************************* 3441 * Copyright 2020 Adobe 3442 * 3443 * Licensed under the Apache License, Version 2.0 (the "License"); 3444 * you may not use this file except in compliance with the License. 3445 * You may obtain a copy of the License at 3446 * 3447 * http://www.apache.org/licenses/LICENSE-2.0 3448 * 3449 * Unless required by applicable law or agreed to in writing, software 3450 * distributed under the License is distributed on an "AS IS" BASIS, 3451 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 3452 * See the License for the specific language governing permissions and 3453 * limitations under the License. 3454 ******************************************************************************/ 3455(function() { 3456 "use strict"; 3457 3458 var NS = "cmp"; 3459 var IS = "pdfviewer"; 3460 var SDK_URL = "https://acrobatservices.adobe.com/view-sdk/viewer.js"; 3461 var SDK_READY_EVENT = "adobe_dc_view_sdk.ready"; 3462 3463 var selectors = { 3464 self: "[data-" + NS + '-is="' + IS + '"]', 3465 sdkScript: 'script[src="' + SDK_URL + '"]' 3466 }; 3467 3468 function initSDK() { 3469 var sdkIncluded = document.querySelectorAll(selectors.sdkScript).length > 0; 3470 if (!window.adobe_dc_view_sdk && !sdkIncluded) { 3471 var dcv = document.createElement("script"); 3472 dcv.type = "text/javascript"; 3473 dcv.src = SDK_URL; 3474 document.body.appendChild(dcv); 3475 } 3476 } 3477 3478 function previewPdf(component) { 3479 // prevents multiple initialization 3480 component.removeAttribute("data-" + NS + "-is"); 3481 3482 // add the view sdk to the page 3483 initSDK(); 3484 3485 // manage the preview 3486 if (component.dataset && component.id) { 3487 if (window.AdobeDC && window.AdobeDC.View) { 3488 dcView(component); 3489 } else { 3490 document.addEventListener(SDK_READY_EVENT, function() { 3491 dcView(component); 3492 }); 3493 } 3494 } 3495 } 3496 3497 function dcView(component) { 3498 var adobeDCView = new window.AdobeDC.View({ 3499 clientId: component.dataset.cmpClientId, 3500 divId: component.id + "-content", 3501 reportSuiteId: component.dataset.cmpReportSuiteId, 3502 locale: Granite.I18n.getLocale() 3503 }); 3504 adobeDCView.previewFile({ 3505 content: { location: { url: component.dataset.cmpDocumentPath } }, 3506 metaData: { fileName: component.dataset.cmpDocumentFileName } 3507 }, JSON.parse(component.dataset.cmpViewerConfigJson)); 3508 } 3509 3510 /** 3511 * Document ready handler and DOM mutation observers. Initializes Accordion components as necessary. 3512 * 3513 * @private 3514 */ 3515 function onDocumentReady() { 3516 var elements = document.querySelectorAll(selectors.self); 3517 for (var i = 0; i < elements.length; i++) { 3518 previewPdf(elements[i]); 3519 } 3520 3521 var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver; 3522 var body = document.querySelector("body"); 3523 var observer = new MutationObserver(function(mutations) { 3524 mutations.forEach(function(mutation) { 3525 // needed for IE 3526 var nodesArray = [].slice.call(mutation.addedNodes); 3527 if (nodesArray.length > 0) { 3528 nodesArray.forEach(function(addedNode) { 3529 if (addedNode.querySelectorAll) { 3530 var elementsArray = [].slice.call(addedNode.querySelectorAll(selectors.self)); 3531 elementsArray.forEach(function(element) { 3532 previewPdf(element); 3533 }); 3534 } 3535 }); 3536 } 3537 }); 3538 }); 3539 3540 observer.observe(body, { 3541 subtree: true, 3542 childList: true, 3543 characterData: true 3544 }); 3545 3546 } 3547 3548 if (document.readyState !== "loading") { 3549 onDocumentReady(); 3550 } else { 3551 document.addEventListener("DOMContentLoaded", onDocumentReady); 3552 } 3553}()); 3554 3555/******************************************************************************* 3556 * Copyright 2020 Adobe 3557 * 3558 * Licensed under the Apache License, Version 2.0 (the "License");
3559 * you may not use this file except in compliance with the License. 3560 * You may obtain a copy of the License at 3561 * 3562 * http://www.apache.org/licenses/LICENSE2.0 3563 * 3564 * Unless required by applicable law or agreed to in writing, software 3565 * distributed under the License is distributed on an "AS IS" BASIS, 3566 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 3567 * See the License for the specific language governing permissions and 3568 * limitations under the License. 3569 ******************************************************************************/ 3570 3571/** 3572 * Element.matches() 3573 * https://developer.mozilla.org/enUS/docs/Web/API/Element/matches#Polyfill 3574 */ 3575if (!Element.prototype.matches) { 3576 Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector; 3577} 3578 3579// eslint-disable-next-line valid-jsdoc 3580/** 3581 * Element.closest() 3582 * https://developer.mozilla.org/enUS/docs/Web/API/Element/closest#Polyfill 3583 */ 3584if (!Element.prototype.closest) { 3585 Element.prototype.closest = function(s) { 3586 "use strict"; 3587 var el = this; 3588 if (!document.documentElement.contains(el)) { 3589 return null; 3590 } 3591 do { 3592 if (el.matches(s)) { 3593 return el; 3594 } 3595 el = el.parentElement || el.parentNode; 3596 } while (el !== null && el.nodeType === 1); 3597 return null; 3598 }; 3599} 3600 3601// https://tc39.github.io/ecma262/#sec-array.prototype.find 3602if (!Array.prototype.find) { 3603 Object.defineProperty(Array.prototype, "find", { 3604 value: function(predicate) { 3605 "use strict"; 3606 // 1. Let O be ? ToObject(this value). 3607 if (this == null) { 3608 throw TypeError('"this" is null or not defined'); 3609 } 3610 3611 var o = Object(this); 3612 3613 // 2. Let len be ? ToLength(? Get(O, "length")). 3614 var len = o.length >>> 0; 3615 3616 // 3. If IsCallable(predicate) is false, throw a TypeError exception. 3617 if (typeof predicate !== "function") { 3618 throw TypeError("predicate must be a function"); 3619 } 3620 3621 // 4. If thisArg was supplied, let T be thisArg; else let T be undefined. 3622 var thisArg = arguments[1]; 3623 3624 // 5. Let k be 0. 3625 var k = 0; 3626 3627 // 6. Repeat, while k < len 3628 while (k < len) { 3629 // a. Let Pk be ! ToString(k). 3630 // b. Let kValue be ? Get(O, Pk). 3631 // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)). 3632 // d. If testResult is true, return kValue. 3633 var kValue = o[k]; 3634 if (predicate.call(thisArg, kValue, k, o)) { 3635 return kValue; 3636 } 3637 // e. Increase k by 1. 3638 k++; 3639 } 3640 3641 // 7. Return undefined. 3642 return undefined; 3643 }, 3644 configurable: true, 3645 writable: true 3646 }); 3647} 3648 3649"use strict";function _slicedToArray(t,e){return _arrayWithHoles(t)||_iterableToArrayLimit(t,e)||_unsupportedIterableToArray(t,e)||_nonIterableRest()}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _iterableToArrayLimit(t,e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(t)){var n=[],r=!0,o=!1,a=void 0;try{for(var i,u=t[Symbol.iterator]();!(r=(i=u.next()).done)&&(n.push(i.value),!e||n.length!==e);r=!0);}catch(t){o=!0,a=t}finally{try{r||null==u.return||u.return()}finally{if(o)throw a}}return n}}function _arrayWithHoles(t){if(Array.isArray(t))return t}function _createForOfIteratorHelper(t){if("undefined"==typeof Symbol||null==t[Symbol.iterator]){if(Array.isArray(t)||(t=_unsupportedIterableToArray(t))){var e=0,n=function(){};return{s:n,n:function(){return e>=t.length?{done:!0}:{done:!1,value:t[e++]}},e:function(t){throw t},f:n}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var r,o,a=!0,i=!1;return{s:function(){r=t[Symbol.iterator]()},n:function(){var t=r.next();return a=t.done,t},e:function(t){i=!0,o=t},f:function(){try{a||null==r.return||r.return()}finally{if(i)throw o}}}}function _unsupportedIterableToArray(t,e){if(t){if("string"==typeof t)return _arrayLikeToArray(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(n):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?_arrayLikeToArray(t,e):void 0}}function _arrayLikeToArray(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=new Array(e);n<e;n++)r[n]=t[n];return r}function _typeof(t){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}!function a(i,u,c){function f(e,t){if(!u[e]){if(!i[e]){var n="function"==typeof require&&require;if(!t&&n)return n(e,!0);if(s)return s(e,!0);var r=new Error("Cannot find module '"+e+"'");throw r.code="MODULE_NOT_FOUND",r}var o=u[e]={exports:{}};i[e][0].call(o.exports,function(t){return f(i[e][1][t]||t)},o,o.exports,a,i,u,c)}return u[e].exports}for(var s="function"==typeof require&&require,t=0;t<c.length;t++)f(c[t]);return f}({1:[function(t,wn,En){(function(On){(function(){function n(t,e){for(var n=-1,r=null==t?0:t.length,o=0,a=[];++n<r;){var i=t[n];e(i,n,t)&&(a[o++]=i)}return a}function a(t,e){for(var n=-1,r=null==t?0:t.length,o=Array(r);++n<r;)o[n]=e(t[n],n,t);return o}function f(t,e){for(var n=-1,r=e.length,o=t.length;++n<r;)t[o+n]=e[n];return t}function b(t,e){for(var n=-1,r=null==t?0:t.length;++n<r;)if(e(t[n],n,t))return!0;return!1}function o(t,e,n){var r=t.length;for(n+=-1;++n<r;)if(e(t[n],n,t))return n;return-1}function i(t){return t!=t}function t(e){return function(t){return e(t)}}function h(t){var n=-1,r=Array(t.size);return t.forEach(function(t,e){r[++n]=[e,t]}),r}function e(e){var n=Object;return function(t){return e(n(t))}}function v(t){var e=-1,n=Array(t.size);return t.forEach(function(t){n[++e]=t}),n}function r(){}function u(t){var e=-1,n=null==t?0:t.length;for(this.clear();++e<n;){var r=t[e];this.set(r[0],r[1])}}function c(t){var e=-1,n=null==t?0:t.length;for(this.clear();++e<n;){var r=t[e];this.set(r[0],r[1])}}function s(t){var e=-1,n=null==t?0:t.length;for(this.clear();++e<n;){var r=t[e];this.set(r[0],r[1])}}function d(t){var e=-1,n=null==t?0:t.length;for(this.__data__=new s;++e<n;)this.add(t[e])}function g(t){this.size=(this.__data__=new c(t)).size}function l(t,e){var n=hn(t),r=!n&&bn(t),o=!n&&!r&&vn(t),a=!n&&!r&&!o&&_n(t);if(n=n||r||o||a){r=t.length;for(var i=String,u=-1,c=Array(r);++u<r;)c[u]=i(u);r=c}else r=[];var f;i=r.length;for(f in t)!e&&!be.call(t,f)||n&&("length"==f||o&&("offset"==f||"parent"==f)||a&&("buffer"==f||"byteLength"==f||"byteOffset"==f)||Q(f,i))||r.push(f);return r}function _(t,e,n){(n===Mt||ft(t[e],n))&&(n!==Mt||e in t)||j(t,e,n)}function y(t,e,n){var r=t[e];be.call(t,e)&&ft(r,n)&&(n!==Mt||e in t)||j(t,e,n)}function p(t,e){for(var n=t.length;n--;)if(ft(t[n][0],e))return n;return-1}function j(t,e,n){"__proto__"==e&&xe?xe(t,e,{configurable:!0,enumerable:!0,value:n,writable:!0}):t[e]=n}function m(n,r,o,t,e,a){var i,u=1&r,c=2&r,f=4&r;
3649if(o&&(i=e?o(n,t,e,a):o(n)),i!==Mt)return i;if(!bt(n))return n;if(t=hn(n)){if(i=function(t){var e=t.length,n=new t.constructor(e);return e&&"string"==typeof t[0]&&be.call(t,"index")&&(n.index=t.index,n.input=t.input),n}(n),!u)return U(n,i)}else{var s=nn(n),l="[object Function]"==s||"[object GeneratorFunction]"==s;if(vn(n))return M(n,u);if("[object Object]"==s||"[object Arguments]"==s||l&&!e){if(i=c||l?{}:Y(n),!u)return c?function(t,e){return P(t,en(t),e)}(n,function(t,e){return t&&P(e,St(e),t)}(i,n)):function(t,e){return P(t,tn(t),e)}(n,function(t,e){return t&&P(e,Lt(e),t)}(i,n))}else{if(!Kt[s])return e?n:{};i=function(t,e,n){var r=t.constructor;switch(e){case"[object ArrayBuffer]":return z(t);case"[object Boolean]":case"[object Date]":return new r(+t);case"[object DataView]":return e=n?z(t.buffer):t.buffer,new t.constructor(e,t.byteOffset,t.byteLength);case"[object Float32Array]":case"[object Float64Array]":case"[object Int8Array]":case"[object Int16Array]":case"[object Int32Array]":case"[object Uint8Array]":case"[object Uint8ClampedArray]":case"[object Uint16Array]":case"[object Uint32Array]":return C(t,n);case"[object Map]":return new r;case"[object Number]":case"[object String]":return new r(t);case"[object RegExp]":return(e=new t.constructor(t.source,Ht.exec(t))).lastIndex=t.lastIndex,e;case"[object Set]":return new r;case"[object Symbol]":return qe?Object(qe.call(t)):{}}}(n,s,u)}}if(e=(a=a||new g).get(n))return e;if(a.set(n,i),gn(n))return n.forEach(function(t){i.add(m(t,r,o,t,n,a))}),i;if(dn(n))return n.forEach(function(t,e){i.set(e,m(t,r,o,e,n,a))}),i;c=f?c?B:H:c?St:Lt;var p=t?Mt:c(n);return function(t,e){for(var n=-1,r=null==t?0:t.length;++n<r&&!1!==e(t[n],n,t););}(p||n,function(t,e){p&&(t=n[e=t]),y(i,e,m(t,r,o,e,n,a))}),i}function A(t,e){for(var n=0,r=(e=F(e,t)).length;null!=t&&n<r;)t=t[nt(e[n++])];return n&&n==r?t:Mt}function O(t,e,n){return e=e(t),hn(t)?e:f(e,n(t))}function w(t){if(null==t)t=t===Mt?"[object Undefined]":"[object Null]";else if(Te&&Te in Object(t)){var e=be.call(t,Te),n=t[Te];try{t[Te]=Mt;var r=!0}catch(t){}var o=ve.call(t);r&&(e?t[Te]=n:delete t[Te]),t=o}else t=ve.call(t);return t}function E(t,e){return null!=t&&be.call(t,e)}function L(t,e){return null!=t&&e in Object(t)}function S(t){return ht(t)&&"[object Arguments]"==w(t)}function T(t,e,n,r,o){if(t===e)e=!0;else if(null==t||null==e||!ht(t)&&!ht(e))e=t!=t&&e!=e;else t:{var a,i,u=hn(t),c=hn(e),f="[object Object]"==(a="[object Arguments]"==(a=u?"[object Array]":nn(t))?"[object Object]":a);c="[object Object]"==(i="[object Arguments]"==(i=c?"[object Array]":nn(e))?"[object Object]":i);if((i=a==i)&&vn(t)){if(!vn(e)){e=!1;break t}f=!(u=!0)}if(i&&!f)o=o||new g,e=u||_n(t)?V(t,e,n,r,T,o):function(t,e,n,r,o,a,i){switch(n){case"[object DataView]":if(t.byteLength!=e.byteLength||t.byteOffset!=e.byteOffset)break;t=t.buffer,e=e.buffer;case"[object ArrayBuffer]":if(t.byteLength!=e.byteLength||!a(new me(t),new me(e)))break;return!0;case"[object Boolean]":case"[object Date]":case"[object Number]":return ft(+t,+e);case"[object Error]":return t.name==e.name&&t.message==e.message;case"[object RegExp]":case"[object String]":return t==e+"";case"[object Map]":var u=h;case"[object Set]":if(u=u||v,t.size!=e.size&&!(1&r))break;return(n=i.get(t))?n==e:(r|=2,i.set(t,e),e=V(u(t),u(e),r,o,a,i),i.delete(t),e);case"[object Symbol]":if(qe)return qe.call(t)==qe.call(e)}return!1}(t,e,a,n,r,T,o);else{if(!(1&n)&&(u=f&&be.call(t,"__wrapped__"),a=c&&be.call(e,"__wrapped__"),u||a)){e=T(t=u?t.value():t,e=a?e.value():e,n,r,o=o||new g);break t}if(i)e:if(o=o||new g,u=1&n,a=H(t),c=a.length,i=H(e).length,c==i||u){for(f=c;f--;){var s=a[f];if(!(u?s in e:be.call(e,s))){e=!1;break e}}if((i=o.get(t))&&o.get(e))e=i==e;else{i=!0,o.set(t,e),o.set(e,t);for(var l=u;++f<c;){var p=t[s=a[f]],y=e[s];if(r)var b=u?r(y,p,s,e,t,o):r(p,y,s,t,e,o);if(b===Mt?p!==y&&!T(p,y,n,r,o):!b){i=!1;break}l=l||"constructor"==s}i&&!l&&((n=t.constructor)!=(r=e.constructor)&&"constructor"in t&&"constructor"in e&&!("function"==typeof n&&n instanceof n&&"function"==typeof r&&r instanceof r)&&(i=!1)),o.delete(t),o.delete(e),e=i}}else e=!1;else e=!1}}return e}function x(t){return"function"==typeof t?t:null==t?It:"object"==_typeof(t)?hn(t)?function(n,r){return X(n)&&r==r&&!bt(r)?tt(nt(n),r):function(t){var e=wt(t,n);return e===Mt&&e===r?Et(t,n):T(r,e,3)}}(t[0],t[1]):function(e){var n=function(t){for(var e=Lt(t),n=e.length;n--;){var r=e[n],o=t[r];e[n]=[r,o,o==o&&!bt(o)]}return e}(e);return 1==n.length&&n[0][2]?tt(n[0][0],n[0][1]):function(t){return t===e||function(t,e){var n=e.length,r=n;if(null==t)return!r;for(t=Object(t);n--;){if((o=e[n])[2]?o[1]!==t[o[0]]:!(o[0]in t))return!1}for(;++n<r;
3649){var o,a=(o=e[n])[0],i=t[a],u=o[1];if(o[2]){if(i===Mt&&!(a in t))return!1}else if(o=new g,void 0!==Mt||!T(u,i,3,void 0,o))return!1}return!0}(t,n)}}(t):Nt(t)}function I(t){if(!Z(t))return Ne(t);var e,n=[];for(e in Object(t))be.call(t,e)&&"constructor"!=e&&n.push(e);return n}function k(s,l,p,y,b){s!==l&&Xe(l,function(t,e){if(bt(t)){var n=b=b||new g,r="__proto__"==e?Mt:s[e],o="__proto__"==e?Mt:l[e];if(f=n.get(o))_(s,e,f);else{var a=(f=y?y(r,o,e+"",s,l,n):Mt)===Mt;if(a){var i=hn(o),u=!i&&vn(o),c=!i&&!u&&_n(o),f=o;i||u||c?f=hn(r)?r:lt(r)?U(r):u?M(o,!(a=!1)):c?C(o,!(a=!1)):[]:vt(o)||bn(o)?bn(f=r)?f=At(r):(!bt(r)||p&&pt(r))&&(f=Y(o)):a=!1}a&&(n.set(o,f),k(f,o,p,y,n),n.delete(o)),_(s,e,f)}}else(n=y?y("__proto__"==e?Mt:s[e],t,e+"",s,l,b):Mt)===Mt&&(n=t),_(s,e,n)},St)}function N(t){if("string"==typeof t)return t;if(hn(t))return a(t,N)+"";if(gt(t))return Je?Je.call(t):"";var e=t+"";return"0"==e&&1/t==-zt?"-0":e}function D(t,e){var n;if((e=F(e,t)).length<2)n=t;else{var r=0,o=-1,a=-1,i=(n=e).length;for(r<0&&(r=i<-r?0:i+r),(o=i<o?i:o)<0&&(o+=i),i=o<r?0:o-r>>>0,r>>>=0,o=Array(i);++a<i;)o[a]=n[a+r];n=A(t,o)}null==(t=n)||delete t[nt(it(e))]}function F(t,e){return hn(t)?t:X(t,e)?[t]:ln(Ot(t))}function M(t,e){if(e)return t.slice();var n=t.length;n=Ae?Ae(n):new t.constructor(n);return t.copy(n),n}function z(t){var e=new t.constructor(t.byteLength);return new me(e).set(new me(t)),e}function C(t,e){return new t.constructor(e?z(t.buffer):t.buffer,t.byteOffset,t.length)}function U(t,e){var n=-1,r=t.length;for(e=e||Array(r);++n<r;)e[n]=t[n];return e}function P(t,e,n){var r=!n;n=n||{};for(var o=-1,a=e.length;++o<a;){var i=e[o],u=Mt;u===Mt&&(u=t[i]),r?j(n,i,u):y(n,i,u)}return n}function R(f){return function(t){return sn(et(t,void 0,It),t+"")}(function(t,e){var n,r=-1,o=e.length,a=1<o?e[o-1]:Mt,i=2<o?e[2]:Mt;a=3<f.length&&"function"==typeof a?(o--,a):Mt;if(n=i){n=e[0];var u=e[1];if(bt(i)){var c=_typeof(u);n=!!("number"==c?st(i)&&Q(u,i.length):"string"==c&&u in i)&&ft(i[u],n)}else n=!1}for(n&&(a=o<3?Mt:a,o=1),t=Object(t);++r<o;)(i=e[r])&&f(t,i,r,a);return t})}function $(t){return vt(t)?Mt:t}function V(t,e,n,r,o,a){var i=1&n,u=t.length;if(u!=(c=e.length)&&!(i&&u<c))return!1;if((c=a.get(t))&&a.get(e))return c==e;var c=-1,f=!0,s=2&n?new d:Mt;for(a.set(t,e),a.set(e,t);++c<u;){var l=t[c],p=e[c];if(r)var y=i?r(p,l,c,e,t,a):r(l,p,c,t,e,a);if(y!==Mt){if(y)continue;f=!1;break}if(s){if(!b(e,function(t,e){if(!s.has(e)&&(l===t||o(l,t,n,r,a)))return s.push(e)})){f=!1;break}}else if(l!==p&&!o(l,p,n,r,a)){f=!1;break}}return a.delete(t),a.delete(e),f}function H(t){return O(t,Lt,tn)}function B(t){return O(t,St,en)}function W(t,e){var n=(n=r.iteratee||kt)===kt?x:n;return arguments.length?n(t,e):n}function G(t,e){var n=t.__data__,r=_typeof(e);return("string"==r||"number"==r||"symbol"==r||"boolean"==r?"__proto__"!==e:null===e)?n["string"==typeof e?"string":"hash"]:n.map}function q(t,e){var n=null==t?Mt:t[e];return!bt(n)||he&&he in n||!(pt(n)?ge:Gt).test(rt(n))?Mt:n}function J(t,e,n){for(var r=-1,o=(e=F(e,t)).length,a=!1;++r<o;){var i=nt(e[r]);if(!(a=null!=t&&n(t,i)))break;t=t[i]}return a||++r!=o?a:!!(o=null==t?0:t.length)&&yt(o)&&Q(i,o)&&(hn(t)||bn(t))}function Y(t){return"function"!=typeof t.constructor||Z(t)?{}:Ye(Oe(t))}function K(t){return hn(t)||bn(t)||!!(Se&&t&&t[Se])}function Q(t,e){var n=_typeof(t);return!!(e=null==e?9007199254740991:e)&&("number"==n||"symbol"!=n&&Jt.test(t))&&-1<t&&0==t%1&&t<e}function X(t,e){if(hn(t))return!1;var n=_typeof(t);return!("number"!=n&&"symbol"!=n&&"boolean"!=n&&null!=t&&!gt(t))||Pt.test(t)||!Ut.test(t)||null!=e&&t in Object(e)}function Z(t){var e=t&&t.constructor;return t===("function"==typeof e&&e.prototype||le)}function tt(e,n){return function(t){return null!=t&&t[e]===n&&(n!==Mt||e in Object(t))}}function et(o,a,i){return a=De(a===Mt?o.length-1:a,0),function(){for(var t=arguments,e=-1,n=De(t.length-a,0),r=Array(n);++e<n;)r[e]=t[a+e];for(e=-1,n=Array(a+1);++e<a;)n[e]=t[e];return n[a]=i(r),function(t,e,n){switch(n.length){case 0:return t.call(e);case 1:return t.call(e,n[0]);case 2:return t.call(e,n[0],n[1]);case 3:return t.call(e,n[0],n[1],n[2])}return t.apply(e,n)}(o,this,n)}}function nt(t){if("string"==typeof t||gt(t))return t;var e=t+"";return"0"==e&&1/t==-zt?"-0":e}function rt(t){if(null==t)return"";try{return ye.call(t)}catch(t){}return t+""}function ot(t,e,n){var r=null==t?0:t.length;return r?((n=null==n?0:jt(n))<0&&(n=De(r+n,0)),o(t,W(e,3),n)):-1}function at(t){return null!=t&&t.length?function t(e,n,r,o,a){var i=-1,u=e.length;for(r=r||K,a=a||[];++i<u;){var c=e[i];0<n&&r(c)?1<n?t(c,n-1,r,o,a):f(a,c):o||(a[a.length]=c)}return a}(t,1):[]}function it(t){var e=null==t?0:t.length;return e?t[e-1]:Mt}function ut(r,o){function a(){var t=arguments,e=o?o.apply(this,t):t[0],n=a.cache;return n.has(e)?n.get(e):(t=r.apply(this,t),a.cache=n.set(e,t)||n,t)}if("function"!=typeof r||null!=o&&"function"!=typeof o)throw new TypeError("Expected a function");return a.cache=new(ut.Cache||s),a}function ct(e){if("function"!=typeof e)throw new TypeError("Expected a function");return function(){var t=arguments;switch(t.length){case 0:return!e.call(this);case 1:return!e.call(this,t[0]);case 2:return!e.call(this,t[0],t[1]);case 3:return!e.call(this,t[0],t[1],t[2])}return!e.apply(this,t)}}function ft(t,e){return t===e||t!=t&&e!=e}function st(t){return null!=t&&yt(t.length)&&!pt(t)}function lt(t){return ht(t)&&st(t)}function pt(t){return!!bt(t)&&("[object Function]"==(t=w(t))||"[object GeneratorFunction]"==t||"[object AsyncFunction]"==t||"[object Proxy]"==t)}function yt(t){return"number"==typeof t&&-1<t&&0==t%1&&t<=9007199254740991}function bt(t){var e=_typeof(t);return null!=t&&("object"==e||"function"==e)}function ht(t){return null!=t&&"object"==_typeof(t)}function vt(t){return!(!ht(t)||"[object Object]"!=w(t))&&(null===(t=Oe(t))||"function"==typeof(t=be.call(t,"constructor")&&t.constructor)&&t instanceof t&&ye.call(t)==de)}function dt(t){return"string"==typeof t||!hn(t)&&ht(t)&&"[object String]"==w(t)}function gt(t){return"symbol"==_typeof(t)||ht(t)&&"[object Symbol]"==w(t)}function _t(t){return t?(t=mt(t))===zt||t===-zt?17976931348623157e292*(t<0?-1:1):t==t?t:0:0===t?t:0}function jt(t){var e=(t=_t(t))%1;return t==t?e?t-e:t:0}function mt(t){if("number"==typeof t)return t;if(gt(t))return Ct;if(bt(t)&&(t=bt(t="function"==typeof t.valueOf?t.valueOf():t)?t+"":t),"string"!=typeof t)return 0===t?t:+t;t=t.replace($t,"");var e=Wt.test(t);return e||qt.test(t)?Xt(t.slice(2),e?2:8):Bt.test(t)?Ct:+t}function At(t){return P(t,St(t))}function Ot(t){return null==t?"":N(t)}function wt(t,e,n){return(t=null==t?Mt:A(t,e))===Mt?n:t}function Et(t,e){return null!=t&&J(t,e,L)}function Lt(t){return st(t)?l(t):I(t)}function St(t){if(st(t))t=l(t,!0);else if(bt(t)){var e,n=Z(t),r=[];for(e in t)("constructor"!=e||!n&&be.call(t,e))&&r.push(e);t=r}else{if(e=[],null!=t)for(n in Object(t))e.push(n);t=e}return t}function Tt(t){return null==t?[]:function(e,t){return a(t,function(t){return e[t]})}(t,Lt(t))}function xt(t){return function(){return t}}function It(t){return t}function kt(t){return x("function"==typeof t?t:m(t,1))}function Nt(t){return X(t)?function(e){return function(t){return null==t?Mt:t[e]}}(nt(t)):function(e){return function(t){return A(t,e)}}(t)}function Dt(){return[]}function Ft(){return!1}var Mt,zt=1/0,Ct=NaN,Ut=/\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\\]|\\.)*?\1)\]/,Pt=/^\w*$/,Rt=/[^.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|$))/g,$t=/^\s+|\s+$/g,Vt=/\\(\\)?/g,Ht=/\w*$/,Bt=/^[-+]0x[0-9a-f]+$/i,Wt=/^0b[01]+$/i,Gt=/^\[object .+?Constructor\]$/,qt=/^0o[0-7]+$/i,Jt=/^(?:0|[1-9]\d*)$/,Yt={};
3649Yt["[object Float32Array]"]=Yt["[object Float64Array]"]=Yt["[object Int8Array]"]=Yt["[object Int16Array]"]=Yt["[object Int32Array]"]=Yt["[object Uint8Array]"]=Yt["[object Uint8ClampedArray]"]=Yt["[object Uint16Array]"]=Yt["[object Uint32Array]"]=!0,Yt["[object Arguments]"]=Yt["[object Array]"]=Yt["[object ArrayBuffer]"]=Yt["[object Boolean]"]=Yt["[object DataView]"]=Yt["[object Date]"]=Yt["[object Error]"]=Yt["[object Function]"]=Yt["[object Map]"]=Yt["[object Number]"]=Yt["[object Object]"]=Yt["[object RegExp]"]=Yt["[object Set]"]=Yt["[object String]"]=Yt["[object WeakMap]"]=!1;var Kt={};Kt["[object Arguments]"]=Kt["[object Array]"]=Kt["[object ArrayBuffer]"]=Kt["[object DataView]"]=Kt["[object Boolean]"]=Kt["[object Date]"]=Kt["[object Float32Array]"]=Kt["[object Float64Array]"]=Kt["[object Int8Array]"]=Kt["[object Int16Array]"]=Kt["[object Int32Array]"]=Kt["[object Map]"]=Kt["[object Number]"]=Kt["[object Object]"]=Kt["[object RegExp]"]=Kt["[object Set]"]=Kt["[object String]"]=Kt["[object Symbol]"]=Kt["[object Uint8Array]"]=Kt["[object Uint8ClampedArray]"]=Kt["[object Uint16Array]"]=Kt["[object Uint32Array]"]=!0,Kt["[object Error]"]=Kt["[object Function]"]=Kt["[object WeakMap]"]=!1;var Qt,Xt=parseInt,Zt="object"==_typeof(On)&&On&&On.Object===Object&&On,te="object"==("undefined"==typeof self?"undefined":_typeof(self))&&self&&self.Object===Object&&self,ee=Zt||te||Function("return this")(),ne="object"==_typeof(En)&&En&&!En.nodeType&&En,re=ne&&"object"==_typeof(wn)&&wn&&!wn.nodeType&&wn,oe=re&&re.exports===ne,ae=oe&&Zt.process;t:{try{Qt=ae&&ae.binding&&ae.binding("util");break t}catch(t){}Qt=void 0}var ie,ue=Qt&&Qt.isMap,ce=Qt&&Qt.isSet,fe=Qt&&Qt.isTypedArray,se=Array.prototype,le=Object.prototype,pe=ee["__core-js_shared__"],ye=Function.prototype.toString,be=le.hasOwnProperty,he=(ie=/[^.]+$/.exec(pe&&pe.keys&&pe.keys.IE_PROTO||""))?"Symbol(src)_1."+ie:"",ve=le.toString,de=ye.call(Object),ge=RegExp("^"+ye.call(be).replace(/[\\^$.*+?()[\]{}|]/g,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$"),_e=oe?ee.Buffer:Mt,je=ee.Symbol,me=ee.Uint8Array,Ae=_e?_e.a:Mt,Oe=e(Object.getPrototypeOf),we=Object.create,Ee=le.propertyIsEnumerable,Le=se.splice,Se=je?je.isConcatSpreadable:Mt,Te=je?je.toStringTag:Mt,xe=function(){try{var t=q(Object,"defineProperty");return t({},"",{}),t}catch(t){}}(),Ie=Object.getOwnPropertySymbols,ke=_e?_e.isBuffer:Mt,Ne=e(Object.keys),De=Math.max,Fe=Date.now,Me=q(ee,"DataView"),ze=q(ee,"Map"),Ce=q(ee,"Promise"),Ue=q(ee,"Set"),Pe=q(ee,"WeakMap"),Re=q(Object,"create"),$e=rt(Me),Ve=rt(ze),He=rt(Ce),Be=rt(Ue),We=rt(Pe),Ge=je?je.prototype:Mt,qe=Ge?Ge.valueOf:Mt,Je=Ge?Ge.toString:Mt,Ye=function(t){return bt(t)?we?we(t):(Ke.prototype=t,t=new Ke,Ke.prototype=Mt,t):{}};function Ke(){}u.prototype.clear=function(){this.__data__=Re?Re(null):{},this.size=0},u.prototype.delete=function(t){return t=this.has(t)&&delete this.__data__[t],this.size-=t?1:0,t},u.prototype.get=function(t){var e=this.__data__;return Re?"__lodash_hash_undefined__"===(t=e[t])?Mt:t:be.call(e,t)?e[t]:Mt},u.prototype.has=function(t){var e=this.__data__;return Re?e[t]!==Mt:be.call(e,t)},u.prototype.set=function(t,e){var n=this.__data__;return this.size+=this.has(t)?0:1,n[t]=Re&&e===Mt?"__lodash_hash_undefined__":e,this},c.prototype.clear=function(){this.__data__=[],this.size=0},c.prototype.delete=function(t){var e=this.__data__;return!((t=p(e,t))<0||(t==e.length-1?e.pop():Le.call(e,t,1),--this.size,0))},c.prototype.get=function(t){var e=this.__data__;return(t=p(e,t))<0?Mt:e[t][1]},c.prototype.has=function(t){return-1<p(this.__data__,t)},c.prototype.set=function(t,e){var n=this.__data__,r=p(n,t);return r<0?(++this.size,n.push([t,e])):n[r][1]=e,this},s.prototype.clear=function(){this.size=0,this.__data__={hash:new u,map:new(ze||c),string:new u}},s.prototype.delete=function(t){return t=G(this,t).delete(t),this.size-=t?1:0,t},s.prototype.get=function(t){return G(this,t).get(t)},s.prototype.has=function(t){return G(this,t).has(t)},s.prototype.set=function(t,e){var n=G(this,t),r=n.size;return n.set(t,e),this.size+=n.size==r?0:1,this},d.prototype.add=d.prototype.push=function(t){return this.__data__.set(t,"__lodash_hash_undefined__"),this},d.prototype.has=function(t){return this.__data__.has(t)},g.prototype.clear=function(){this.__data__=new c,this.size=0},g.prototype.delete=function(t){var e=this.__data__;return t=e.delete(t),this.size=e.size,t},g.prototype.get=function(t){return this.__data__.get(t)},g.prototype.has=function(t){return this.__data__.has(t)},g.prototype.set=function(t,e){var n=this.__data__;if(n instanceof c){var r=n.__data__;if(!ze||r.length<199)return r.push([t,e]),this.size=++n.size,this;n=this.__data__=new s(r)}return n.set(t,e),this.size=n.size,this};var Qe=function(t,e){if(null==t)return t;if(!st(t))return function(t,e){return t&&Xe(t,e,Lt)}(t,e);for(var n=t.length,r=-1,o=Object(t);++r<n&&!1!==e(o[r],r,o););return t},Xe=function(t,e,n){for(var r=-1,o=Object(t),a=(n=n(t)).length;a--;){var i=n[++r];if(!1===e(o[i],i,o))break}return t},Ze=xe?function(t,e){return xe(t,"toString",{configurable:!0,enumerable:!1,value:xt(e),writable:!0})}:It,tn=Ie?function(e){return null==e?[]:(e=Object(e),n(Ie(e),function(t){return Ee.call(e,t)}))}:Dt,en=Ie?function(t){for(var e=[];t;)f(e,tn(t)),t=Oe(t);return e}:Dt,nn=w;(Me&&"[object DataView]"!=nn(new Me(new ArrayBuffer(1)))||ze&&"[object Map]"!=nn(new ze)||Ce&&"[object Promise]"!=nn(Ce.resolve())||Ue&&"[object Set]"!=nn(new Ue)||Pe&&"[object WeakMap]"!=nn(new Pe))&&(nn=function(t){var e=w(t);if(t=(t="[object Object]"==e?t.constructor:Mt)?rt(t):"")switch(t){case $e:return"[object DataView]";case Ve:return"[object Map]";case He:return"[object Promise]";case Be:return"[object Set]";case We:return"[object WeakMap]"}return e});var rn,on,an,un,cn,fn,sn=(un=Ze,fn=cn=0,function(){var t=Fe(),e=16-(t-fn);if(fn=t,0<e){if(800<=++cn)return arguments[0]}else cn=0;return un.apply(Mt,arguments)}),ln=(an=(on=ut(on=function(t){var o=[];return 46===t.charCodeAt(0)&&o.push(""),t.replace(Rt,function(t,e,n,r){o.push(n?r.replace(Vt,"$1"):e||t)}),o},function(t){return 500===an.size&&an.clear(),t})).cache,on),pn=(rn=ot,function(t,e,n){var r=Object(t);if(!st(t)){var o=W(e,3);t=Lt(t),e=function(t){return o(r[t],t,r)}}return-1<(e=rn(t,e,n))?r[o?t[e]:e]:Mt});ut.Cache=s;var yn,bn=S(function(){return arguments}())?S:function(t){return ht(t)&&be.call(t,"callee")&&!Ee.call(t,"callee")},hn=Array.isArray,vn=ke||Ft,dn=ue?t(ue):function(t){return ht(t)&&"[object Map]"==nn(t)},gn=ce?t(ce):function(t){return ht(t)&&"[object Set]"==nn(t)}
3649,_n=fe?t(fe):function(t){return ht(t)&&yt(t.length)&&!!Yt[w(t)]},jn=R(function(t,e,n){k(t,e,n)}),mn=R(function(t,e,n,r){k(t,e,n,r)}),An=sn(et(yn=function(e,t){var n={};if(null==e)return n;var r=!1;t=a(t,function(t){return t=F(t,e),r=r||1<t.length,t}),P(e,B(e),n),r&&(n=m(n,7,$));for(var o=t.length;o--;)D(n,t[o]);return n},Mt,at),yn+"");r.constant=xt,r.flatten=at,r.iteratee=kt,r.keys=Lt,r.keysIn=St,r.memoize=ut,r.merge=jn,r.mergeWith=mn,r.negate=ct,r.omit=An,r.property=Nt,r.reject=function(t,e){return(hn(t)?n:function(t,r){var o=[];return Qe(t,function(t,e,n){r(t,e,n)&&o.push(t)}),o})(t,ct(W(e,3)))},r.toPlainObject=At,r.values=Tt,r.cloneDeep=function(t){return m(t,5)},r.cloneDeepWith=function(t,e){return m(t,5,e="function"==typeof e?e:Mt)},r.eq=ft,r.find=pn,r.findIndex=ot,r.get=wt,r.has=function(t,e){return null!=t&&J(t,e,E)},r.hasIn=Et,r.identity=It,r.includes=function(t,e,n,r){if(t=st(t)?t:Tt(t),n=n&&!r?jt(n):0,r=t.length,n<0&&(n=De(r+n,0)),dt(t))t=n<=r&&-1<t.indexOf(e,n);else{if(r=!!r){if(e==e)t:{for(n-=1,r=t.length;++n<r;)if(t[n]===e){t=n;break t}t=-1}else t=o(t,i,n);r=-1<t}t=r}return t},r.isArguments=bn,r.isArray=hn,r.isArrayLike=st,r.isArrayLikeObject=lt,r.isBuffer=vn,r.isEmpty=function(t){if(null==t)return!0;if(st(t)&&(hn(t)||"string"==typeof t||"function"==typeof t.splice||vn(t)||_n(t)||bn(t)))return!t.length;var e=nn(t);if("[object Map]"==e||"[object Set]"==e)return!t.size;if(Z(t))return!I(t).length;for(var n in t)if(be.call(t,n))return!1;return!0},r.isEqual=function(t,e){return T(t,e)},r.isFunction=pt,r.isLength=yt,r.isMap=dn,r.isNull=function(t){return null===t},r.isObject=bt,r.isObjectLike=ht,r.isPlainObject=vt,r.isSet=gn,r.isString=dt,r.isSymbol=gt,r.isTypedArray=_n,r.last=it,r.stubArray=Dt,r.stubFalse=Ft,r.toFinite=_t,r.toInteger=jt,r.toNumber=mt,r.toString=Ot,r.VERSION="4.17.5",re&&((re.exports=r)._=r,ne._=r)}).call(this)}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}],2:[function(t,e,n){e.exports={itemType:{DATA:"data",FCTN:"fctn",EVENT:"event",LISTENER_ON:"listenerOn",LISTENER_OFF:"listenerOff"},dataLayerEvent:{CHANGE:"adobeDataLayer:change",EVENT:"adobeDataLayer:event"},listenerScope:{PAST:"past",FUTURE:"future",ALL:"all"}}},{}],3:[function(t,e,n){var r=t("../custom-lodash"),c=t("../version.json").version,l=r.cloneDeep,p=r.get,y=t("./item"),b=t("./listener"),h=t("./listenerManager"),v=t("./constants"),d=t("./utils/customMerge");e.exports=function(t){var f,e=t||{},n=[],r=[],o={},a={getState:function(){return o},getDataLayer:function(){return n}};function i(t){o=d(o,t.data)}function u(t){t.valid?{data:function(t){i(t),f.triggerListeners(t)},fctn:function(t){t.config.call(n,n)},event:function(t){t.data&&i(t),f.triggerListeners(t)},listenerOn:function(t){var e=b(t);switch(e.scope){case v.listenerScope.PAST:var n,r=_createForOfIteratorHelper(c(t));try{for(r.s();!(n=r.n()).done;){var o=n.value;f.triggerListener(e,o)}}catch(t){r.e(t)}finally{r.f()}break;case v.listenerScope.FUTURE:f.register(e);break;case v.listenerScope.ALL:if(f.register(e)){var a,i=_createForOfIteratorHelper(c(t));try{for(i.s();!(a=i.n()).done;){var u=a.value;f.triggerListener(e,u)}}catch(t){i.e(t)}finally{i.f()}}}},listenerOff:function(t){f.unregister(b(t))}}[t.type](t):s(t);function c(t){return 0===n.length||t.index>n.length-1?[]:n.slice(0,t.index).map(function(t){return y(t)})}}function s(t){var e="The following item cannot be handled by the data layer because it does not have a valid format: "+JSON.stringify(t.config);console.error(e)}return function(){Array.isArray(e.dataLayer)||(e.dataLayer=[]);r=e.dataLayer.splice(0,e.dataLayer.length),(n=e.dataLayer).version=c,o={},f=h(a)}(),n.push=function(t){var n=arguments,r=arguments;if(Object.keys(n).forEach(function(t){var e=y(n[t]);switch(e.valid||(s(e),delete r[t]),e.type){case v.itemType.DATA:case v.itemType.EVENT:u(e);break;case v.itemType.FCTN:delete r[t],u(e);break;case v.itemType.LISTENER_ON:case v.itemType.LISTENER_OFF:delete r[t]}}),r[0])return Array.prototype.push.apply(this,r)},n.getState=function(t){return t?p(l(o),t):l(o)},n.addEventListener=function(t,e,n){u(y({on:t,handler:e,scope:n&&n.scope,path:n&&n.path}))},n.removeEventListener=function(t,e){u(y({off:t,handler:e}))},function(){for(var t=0;t<r.length;t++)n.push(r[t])}(),a}},{"../custom-lodash":1,"../version.json":14,"./constants":2,"./item":5,"./listener":7,"./listenerManager":8,"./utils/customMerge":10}],4:[function(t,e,n){var r={Manager:t("./dataLayerManager")};window.adobeDataLayer=window.adobeDataLayer||[],window.adobeDataLayer.version?console.warn("Adobe Client Data Layer v".concat(window.adobeDataLayer.version," has already been imported/initialized on this page. You may be erroneously loading it a second time.")):r.Manager({dataLayer:window.adobeDataLayer}),e.exports=r},{"./dataLayerManager":3}],5:[function(t,e,n){var r=t("../custom-lodash"),i=r.isPlainObject,u=r.isEmpty,c=r.omit,f=r.find,s=t("./utils/dataMatchesContraints"),l=t("./itemConstraints"),p=t("./constants");e.exports=function(t,e){var n=t,r=e,o=f(Object.keys(l),function(t){return s(n,l[t])})||"function"==typeof n&&p.itemType.FCTN||i(n)&&p.itemType.DATA,a=function(){var t=c(n,Object.keys(l.event));if(!u(t))return t}();return{config:n,type:o,data:a,valid:!!o,index:r}}},{"../custom-lodash":1,"./constants":2,"./itemConstraints":6,"./utils/dataMatchesContraints":11}],6:[function(t,e,n){e.exports={event:{event:{type:"string"},eventInfo:{optional:!0}},listenerOn:{on:{type:"string"},handler:{type:"function"},scope:{type:"string",values:["past","future","all"],optional:!0},path:{type:"string",optional:!0}},listenerOff:{off:{type:"string"},handler:{type:"function",optional:!0},scope:{type:"string",values:["past","future","all"],optional:!0},path:{type:"string",optional:!0}}}},{}],7:[function(t,e,n){var r=t("./constants");e.exports=function(t){return{event:t.config.on||t.config.off,handler:t.config.handler||null,scope:t.config.scope||t.config.on&&r.listenerScope.ALL||null,path:t.config.path||null}}},{"./constants":2}],8:[function(t,e,n){var u=t("../custom-lodash").cloneDeep,c=t("./constants"),f=t("./utils/listenerMatch"),s=t("./utils/indexOfListener");e.exports=function(t){var o={},r=t,a=s.bind(null,o);function i(t,e){if(f(t,e)){var n=[u(e.config)];t.handler.apply(r.getDataLayer(),n)}}return{register:function(t){var e=t.event;return Object.prototype.hasOwnProperty.call(o,e)?-1===a(t)&&(o[t.event].push(t),!0):(o[t.event]=[t],!0)},unregister:function(t){var e=t.event;if(Object.prototype.hasOwnProperty.call(o,e))if(t.handler||t.scope||t.path){var n=a(t);-1<n&&o[e].splice(n,1)}else o[e]=[]},triggerListeners:function(r){(function(t){var e=[];switch(t.type){case c.itemType.DATA:e.push(c.dataLayerEvent.CHANGE);break;case c.itemType.EVENT:e.push(c.dataLayerEvent.EVENT),t.data&&e.push(c.dataLayerEvent.CHANGE),t.config.event!==c.dataLayerEvent.CHANGE&&e.push(t.config.event)}return e})(r).forEach(function(t){if(Object.prototype.hasOwnProperty.call(o,t)){var e,n=_createForOfIteratorHelper(o[t]);try{for(n.s();!(e=n.n()).done;){i(e.value,r)}}catch(t){n.e(t)}finally{n.f()}}})},triggerListener:function(t,e){i(t,e)}}}},{"../custom-lodash":1,"./constants":2,"./utils/indexOfListener":12,"./utils/listenerMatch":13}],9:[function(t,e,n){var r=t("../../custom-lodash"),o=r.has,a=r.get;e.exports=function(t,e){for(var n=e.substring(0,e.lastIndexOf("."));n;){if(o(t,n)){var r=a(t,n);if(null==r)return!0}n=n.substring(0,n.lastIndexOf("."))}return!1}},{"../../custom-lodash":1}],10:[function(t,e,n){var r=t("../../custom-lodash"),s=r.cloneDeepWith,l=r.isObject,p=r.isArray,y=r.reject,o=r.mergeWith,a=r.isNull;e.exports=function(t,e){return o(t,e,function(t,e,n,r){if(null==e)return null}),t=function(t,e){return s(t,function(f){return function e(t,n,r,o){if(l(t)){if(p(t))return y(t,f).map(function(t){return s(t,e)});for(var a={},i=0,u=Object.keys(t);i<u.length;i++){var c=u[i];f(t[c])||(a[c]=s(t[c],e))}return a}}}(1<arguments.length&&void 0!==e?e:function(t){return!t}))}(t,a)}},{"../../custom-lodash":1}],11:[function(t,e,n){var r=t("../../custom-lodash"),o=r.find,s=r.includes;e.exports=function(c,f){return void 0===o(Object.keys(f),function(t){var e=f[t].type,n=t&&f[t].values,r=!f[t].optional,o=c[t],a=_typeof(o),i=e&&a!==e,u=n&&!s(n,o);return r?!o||i||u:o&&(i||u)})}},{"../../custom-lodash":1}],12:[function(t,e,n){var c=t("../../custom-lodash").isEqual;e.exports=function(t,e){var n=e.event;if(Object.prototype.hasOwnProperty.call(t,n)){var r,o=_createForOfIteratorHelper(t[n].entries());try{for(o.s();!(r=o.n()).done;){var a=_slicedToArray(r.value,2),i=a[0],u=a[1];if(c(u.handler,e.handler))return i}}catch(t){o.e(t)}finally{o.f()}}return-1}},{"../../custom-lodash":1}],13:[function(t,e,n){var r=t("../../custom-lodash").has,a=t("../constants"),o=t("./ancestorRemoved");function i(t,e){return!e.data||!t.path||(r(e.data,t.path)||o(e.data,t.path))}
3649e.exports=function(t,e){var n=t.event,r=e.config,o=!1;return e.type===a.itemType.DATA?n===a.dataLayerEvent.CHANGE&&(o=i(t,e)):e.type===a.itemType.EVENT&&(n!==a.dataLayerEvent.EVENT&&n!==r.event||(o=i(t,e)),e.data&&n===a.dataLayerEvent.CHANGE&&(o=i(t,e))),o}},{"../../custom-lodash":1,"../constants":2,"./ancestorRemoved":9}],14:[function(t,e,n){e.exports={version:"2.0.2"}},{}]},{},[4]); 3650//# sourceMappingURL=adobe-client-data-layer.min.js.map 3651 3652/******************************************************************************* 3653 * Copyright 2020 Adobe 3654 * 3655 * Licensed under the Apache License, Version 2.0 (the "License"); 3656 * you may not use this file except in compliance with the License. 3657 * You may obtain a copy of the License at 3658 * 3659 * http://www.apache.org/licenses/LICENSE-2.0 3660 * 3661 * Unless required by applicable law or agreed to in writing, software 3662 * distributed under the License is distributed on an "AS IS" BASIS, 3663 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 3664 * See the License for the specific language governing permissions and 3665 * limitations under the License. 3666 ******************************************************************************/ 3667(function() { 3668 "use strict"; 3669 3670 var dataLayerEnabled; 3671 var dataLayerName; 3672 var dataLayer; 3673 3674 function addComponentToDataLayer(component) { 3675 dataLayer.push({ 3676 component: getComponentObject(component) 3677 }); 3678 } 3679 3680 function attachClickEventListener(element) { 3681 element.addEventListener("click", addClickToDataLayer); 3682 } 3683 3684 function getComponentObject(element) { 3685 var component = getComponentData(element); 3686 var componentID = Object.keys(component)[0]; 3687 // if the component does not have a parent ID property, use the ID of the parent element 3688 if (component && component[componentID] && !component[componentID].parentId) { 3689 var parentElement = element.parentNode.closest("[data-cmp-data-layer], body"); 3690 if (parentElement) { 3691 component[componentID].parentId = parentElement.id; 3692 } 3693 } 3694 3695 return component; 3696 } 3697 3698 function addClickToDataLayer(event) { 3699 var element = event.currentTarget; 3700 var componentId = getClickId(element); 3701 3702 dataLayer.push({ 3703 event: "cmp:click", 3704 eventInfo: { 3705 path: "component." + componentId 3706 } 3707 }); 3708 } 3709 3710 function getComponentData(element) { 3711 var dataLayerJson = element.dataset.cmpDataLayer; 3712 if (dataLayerJson) { 3713 return JSON.parse(dataLayerJson); 3714 } else { 3715 return undefined; 3716 } 3717 } 3718 3719 function getClickId(element) { 3720 if (element.dataset.cmpDataLayer) { 3721 return Object.keys(JSON.parse(element.dataset.cmpDataLayer))[0]; 3722 } 3723 3724 var componentElement = element.closest("[data-cmp-data-layer]"); 3725 3726 return Object.keys(JSON.parse(componentElement.dataset.cmpDataLayer))[0]; 3727 } 3728 3729 function onDocumentReady() { 3730 dataLayerEnabled = document.body.hasAttribute("data-cmp-data-layer-enabled"); 3731 if (dataLayerEnabled) { 3732 dataLayerName = document.body.getAttribute("data-cmp-data-layer-name") || "adobeDataLayer"; 3733 dataLayer = window[dataLayerName] = window[dataLayerName] || []; 3734 3735 var components = document.querySelectorAll("[data-cmp-data-layer]"); 3736 var clickableElements = document.querySelectorAll("[data-cmp-clickable]"); 3737 3738 components.forEach(function(component) { 3739 addComponentToDataLayer(component); 3740 }); 3741 3742 clickableElements.forEach(function(element) { 3743 attachClickEventListener(element); 3744 }); 3745 3746 dataLayer.push({ 3747 event: "cmp:loaded" 3748 }); 3749 } 3750 } 3751 3752 if (document.readyState !== "loading") { 3753 onDocumentReady(); 3754 } else { 3755 document.addEventListener("DOMContentLoaded", onDocumentReady); 3756 } 3757 3758}()); 3759 3760(() => { 3761 3762 const selectors = { 3763 self: '[data-cmp-is="slider"]', 3764 autoPlayPauseButton: '[data-cmp-hook-slider="pause"]', 3765 autoPlayPlayButton: '[data-cmp-hook-slider="play"]', 3766 slideContainer: '.slider-container', 3767 slideCountTextContainer: '.slider-number', 3768 slideNavigationArrowButtons: '.slider-nav' 3769 }; 3770 const DEFAULT_DELAY = 2500; 3771 const SLIDE_ACTIVE_CLASS_FOR_EDIT_MODE = 'cmp-slider__item--active'; 3772 const SLIDE_CURRENT_COUNT_TOKEN = '$[currentCount]$';
3773 const SLIDE_TOTAL_COUNT_TOKEN = '$[totalCount]$'; 3774 3775 const navigate = (element, currentIndex) => { 3776 swiffyslider.slideTo(element, currentIndex); 3777 let sliderContainer = element.querySelector(selectors.slideContainer); 3778 let msgChannel = (new Granite.author.MessageChannel("cqauthor", window.parent)).mixin({}); 3779 msgChannel.postMessage("cmp.carousel.slider", {slideChanged: true}, -1); 3780 Array.from(sliderContainer.children).forEach((item, index) => { 3781 if (index === currentIndex) { 3782 item.classList?.add(SLIDE_ACTIVE_CLASS_FOR_EDIT_MODE) 3783 } else { 3784 item.classList?.remove(SLIDE_ACTIVE_CLASS_FOR_EDIT_MODE) 3785 } 3786 }); 3787 } 3788 3789 const sliderPanelContainerNavigation = (element) => { 3790 //This section is only relevant in edit mode and should move to the editor clientLib 3791 if (window.Granite && window.Granite.author 3792 && window.Granite.author.MessageChannel) { 3793 /* 3794 * Editor message handling: 3795 * - subscribe to "cmp.panelcontainer" message requests sent by the editor frame 3796 * - check that the message data panel container type is correct and that the id (path) matches this specific Carousel component 3797 * - if so, route the "navigate" operation to enact a navigation of the Carousel based on index data 3798 */ 3799 window.CQ = window.CQ || {}; 3800 window.CQ.CoreComponents = window.CQ.CoreComponents || {}; 3801 window.CQ.CoreComponents.MESSAGE_CHANNEL = window.CQ.CoreComponents.MESSAGE_CHANNEL 3802 || new window.Granite.author.MessageChannel("cqauthor", window); 3803 window.CQ.CoreComponents.MESSAGE_CHANNEL.subscribeRequestMessage( 3804 "cmp.panelcontainer", (message) => { 3805 if (message.data && message.data.type === "cmp-slider" 3806 && message.data.id 3807 === element.dataset["cmpPanelcontainerId"]) { 3808 if (message.data.operation === "navigate") { 3809 navigate(element, message.data.index); 3810 } 3811 } 3812 }); 3813 } 3814 }; 3815 3816 const handleAutoplay = (element) => { 3817 let autoPlayerTimer; 3818 const pauseButton = element.querySelector(selectors.autoPlayPauseButton); 3819 const playButton = element.querySelector(selectors.autoPlayPlayButton); 3820 const slideNavigationArrowButtons = element.querySelectorAll(selectors.slideNavigationArrowButtons); 3821 const timeout = element.dataset["cmpDelay"] 3822 && !isNaN(parseInt(element.dataset["cmpDelay"])) 3823 && parseInt(element.dataset["cmpDelay"]) 3824 || DEFAULT_DELAY; //ms 3825 const autopause = !(element.dataset["cmpAutopauseDisabled"] === ''); 3826 let pausedByUserOrByUserNavigation = false; 3827 3828 const startAutoPlayer = () => { 3829 autoPlayerTimer = swiffyslider.autoPlay(element, timeout, false); 3830 pauseButton.style.display = 'block'; 3831 playButton.style.display = 'none'; 3832 } 3833 3834 const pauseAutoPlayer = () => { 3835 window.clearTimeout(autoPlayerTimer); 3836 pauseButton.style.display = 'none'; 3837 playButton.style.display = 'block'; 3838 } 3839 3840 if (autopause) { 3841 ["mouseover", "touchstart"].forEach(event => element.querySelector(selectors.slideContainer) 3842 .addEventListener(event, () => !pausedByUserOrByUserNavigation && pauseAutoPlayer())); 3843 ["mouseout", "touchend"].forEach(event => element.querySelector(selectors.slideContainer) 3844 .addEventListener(event, () => !pausedByUserOrByUserNavigation && startAutoPlayer())); 3845 } 3846 3847 pauseButton.addEventListener('click', () => { 3848 pauseAutoPlayer(); 3849 pausedByUserOrByUserNavigation = true; 3850 }); 3851 playButton.addEventListener('click', () => { 3852 startAutoPlayer(); 3853 pausedByUserOrByUserNavigation = false; 3854 }); 3855 3856 slideNavigationArrowButtons.forEach(button => button.addEventListener('click', () => { 3857 pauseAutoPlayer(); 3858 pausedByUserOrByUserNavigation = true; 3859 })); 3860 3861 startAutoPlayer(); 3862 }; 3863 3864 const initAutoPlay = (element) => { 3865 const autoplay = element.dataset["cmpAutoplay"] === ''; 3866 autoplay && handleAutoplay(element); 3867 } 3868 3869 const getVisibleSlides = (element) => { 3870 const container = element.querySelector(selectors.slideContainer); 3871 //We are using a grid layout and the slides left and right properties include the width of the gap, so when comparing with container width add a gap for each side of the slide gap. 3872 const gapWidth = parseInt(window.getComputedStyle(container).columnGap
3872); 3873 //returns an array of slide elements that are fully or partially visible 3874 return Array.from(container.children).filter(slide => { 3875 let slideScrollLeftPosition = Math.ceil(slide.getBoundingClientRect().left) - container.getBoundingClientRect().left; 3876 let slideScrollRightPosition = slideScrollLeftPosition + slide.offsetWidth - gapWidth; 3877 return slideScrollLeftPosition >= 0 && slideScrollRightPosition <= container.offsetWidth; 3878 }); 3879 } 3880 3881 const updateSliderCountText = (element, slideCountTextContainer) => { 3882 const visibleSlideElements = getVisibleSlides(element); 3883 const currentSlide = visibleSlideElements[visibleSlideElements.length - 1] 3884 const currentSlideIndex = currentSlide.dataset["slideIndex"] 3885 && !isNaN(parseInt(currentSlide.dataset["slideIndex"])) 3886 && parseInt(currentSlide.dataset["slideIndex"]); 3887 const currentSlideSet = Math.ceil(currentSlideIndex / visibleSlideElements.length); 3888 const slideContainer = element.querySelector(selectors.slideContainer); 3889 const totalSlides = Array.from(slideContainer.children).length; 3890 const totalSlidesSet = Math.ceil(totalSlides / visibleSlideElements.length); 3891 let slideCountText = slideCountTextContainer.dataset['slideCountText']?.trim(); 3892 slideCountTextContainer.innerHTML = slideCountText.replace(SLIDE_CURRENT_COUNT_TOKEN, currentSlideSet) 3893 .replace(SLIDE_TOTAL_COUNT_TOKEN, totalSlidesSet); 3894 } 3895 3896 const updateSliderCountTextInit = (element) => { 3897 let slideCountTextContainer = element.querySelector(selectors.slideCountTextContainer); 3898 if (slideCountTextContainer) { 3899 swiffyslider.onSlideEnd(element, () => updateSliderCountText(element, slideCountTextContainer)); 3900 updateSliderCountText(element, slideCountTextContainer); 3901 } 3902 } 3903 3904 const slider = (element) => { 3905 updateSliderCountTextInit(element); 3906 initAutoPlay(element); 3907 sliderPanelContainerNavigation(element); 3908 }; 3909 3910 const onDocumentReady = () => { 3911 let elements = document.querySelectorAll(selectors.self);
3912 elements.forEach(slider); 3913 3914 let MutationObserver = window.MutationObserver 3915 || window.WebKitMutationObserver || window.MozMutationObserver; 3916 let body = document.querySelector("body"); 3917 let observer = new MutationObserver((mutations) => 3918 mutations.forEach((mutation) => { 3919 // needed for IE 3920 let nodesArray = [].slice.call(mutation.addedNodes); 3921 if (nodesArray.length > 0) { 3922 nodesArray.forEach((addedNode) => { 3923 if (addedNode.querySelectorAll) { 3924 let elementsArray = [].slice.call( 3925 addedNode.querySelectorAll(selectors.self)); 3926 elementsArray.forEach((element) => { 3927 swiffyslider.initSlider(element); 3928 slider(element); 3929 }); 3930 } 3931 }); 3932 } 3933 }) 3934 ); 3935 3936 observer.observe(body, { 3937 subtree: true, 3938 childList: true, 3939 characterData: true 3940 }); 3941 } 3942 if (document.readyState !== "loading") { 3943 onDocumentReady(); 3944 } else { 3945 document.addEventListener("DOMContentLoaded", onDocumentReady); 3946 } 3947})();
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.