https://www.haworth.com/etc.clientlibs/core/wcm/components/commons/site/clientlibs/container.js

1/*******************************************************************************
2 * Copyright 2020 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/LICENSE-2.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(function() {
17    "use strict";
18
19    window.CQ = window.CQ || {};
20    window.CQ.CoreComponents = window.CQ.CoreComponents || {};
21    window.CQ.CoreComponents.container = window.CQ.CoreComponents.container || {};
22    window.CQ.CoreComponents.container.utils = {};
23
24    /**
25     * Utilities for Container Components (accordion, tabs)
26     *
27     * @namespace
28     * @alias CQ.CoreComponents.container.utils
29     * @type {{}}
30     */
31    window.CQ.CoreComponents.container.utils = {
32
33        /**
34         * Returns index of the container component item (accordion, tabs) that corresponds to the deep link in the URL fragment.
35         *
36         * @param {Object} component The Accordion or Tabs component.
37         * @param {String} itemType The type of the item as defined in the component.
38         * @returns {Number} the index within the items array if the item exists, -1 otherwise.
39         */
40        getDeepLinkItemIdx: function(component, itemType) {
41            if (window.location.hash) {
42                var deepLinkId = window.location.hash.substring(1);
43                if (document.getElementById(deepLinkId) &&
44                    deepLinkId && component &&
45                    component._config && component._config.element && component._config.element.id &&
46                    component._elements && component._elements[itemType] &&
47                    deepLinkId.indexOf(component._config.element.id + "-item-") === 0) {
48                    for (var i = 0; i < component._elements[itemType].length; i++) {
49                        var item = component._elements[itemType][i];
50                        if (item.id === deepLinkId) {
51                            return i;
52                        }
53                    }
54                }
55                return -1;
56            }
57        },
58
59        /**
60         * Returns the item of the container component (accordion, tabs) that corresponds to the deep link in the URL fragment.
61         *
62         * @param {Object} component The Accordion or Tabs component.
63         * @param {String} itemType The type of the item as defined in the component.
64         * @returns {Object} the item if it exists, undefined otherwise.
65         */
66        getDeepLinkItem: function(component, itemType) {
67            var idx = window.CQ.CoreComponents.container.utils.getDeepLinkItemIdx(component, itemType);
68            if (component && component._elements && component._elements[itemType]) {
69                return component._elements[itemType][idx];
70            }
71        },
72
73        /**
74         * Scrolls the browser on page reload (if URI contains URI fragment) to the item of the container component (accordion, tabs)
75           that corresponds to the deep link in the URI fragment.
76         * This method fixes the issue existent with Chrome and related browsers, which are not scrolling on page reload (if URI contains URI fragment)
77           to the element that corresponds to the deep link in the URI fragment.
78         * Small setTimeout is needed, otherwise the scrolling will not work on Chrome.
79         */
80        scrollToAnchor: function() {
81            setTimeout(function() {
82                if (window.location.hash) {
83                    var id = decodeURIComponent(window.location.hash.substring(1));
84                    var anchorElement = document.getElementById(id);
85                    if (anchorElement && anchorElement.offsetTop) {
86                        anchorElement.scrollIntoView();
87                    }
88                }
89            }, 100);
90        }
91    };
92}());