https://www.daltile.com/-/media/Base-Themes/Components-Theme/Scripts/component-breadcrumb.js

1/**
2 * Component Breadcrumb
3 * @module Breadcrumb
4 * @param  {jQuery} $ Instance of jQuery
5 * @return {Object} List of archive methods
6 */
7XA.component.breadcrumb = (function($) {
8    /**
9     * This object stores all public api methods
10     * @type {Object.<Methods>}
11     * @memberOf module:Breadcrumb
12     * */
13    var api = {};
14    /**
15     * This class is used by [Breadcrumb]{@link module:Breadcrumb} module
16     * @class BreadcrumbManager
17     * @memberOf module:Breadcrumb
18     * @param {jQuery} elem DOM Root element of
19     */
20    function BreadcrumbManager(elem) {
21        this.breadcrumb = elem;
22        this.hideHistory = [];
23        this.hideHistory.elems = [];
24        this.hideHistory.widths = [];
25    }
26
27    /**
28     * @method
29     * @alias getElements
30     * @memberOf module:Breadcrumb.BreadcrumbManager
31     * @param {$OrderedList} list Ordered List of 
32     * breadcrumb elements wrapped by jquery
33     */
34    BreadcrumbManager.prototype.getElements = function($list) {
35        var elements = [];
36
37        $list.find("li").each(function() {
38            elements.push(this);
39        });
40
41        return elements;
42    };
43    /**
44     * Calculates width of component elements
45     * @name calculateListElementsWidth
46     * @function
47     * @memberOf module:Breadcrumb.BreadcrumbManager
48     * @return {number} widthSum
49     */
50    BreadcrumbManager.prototype.calculateListElementsWidth = function($list) {
51        var widthSum = 0;
52
53        $list.find(">li").each(function() {
54            widthSum += $(this).width();
55        });
56
57        return widthSum;
58    };
59    /**
60     * In case breadcrumb elements do no fit the component width
61     * several breadcrum items will be replaced by "..."
62     * @name calculateWidth
63     * @function
64     * @memberOf module:Breadcrumb.BreadcrumbManager
65     */
66    BreadcrumbManager.prototype.calculateWidth = function() {
67        var inst = this,
68            $list = $(inst.breadcrumb).find("nav>ol"),
69            listWidth = $list.width(),
70            widthSum = this.calculateListElementsWidth($list),
71            elements = this.getElements($list),
72            $elementToHide,
73            removeIndx = 0;
74
75        var width = inst.hideHistory.widths[inst.hideHistory.widths.length - 1];
76        if (listWidth > widthSum + width) {
77            var elem = inst.hideHistory.elems.pop();
78            inst.hideHistory.widths.pop();
79            $(elem).removeClass("item-hide");
80        }
81
82        while (listWidth < widthSum && elements.length > 2) {
83            removeIndx = Math.round(elements.length / 2) - 1;
84            $elementToHide = $(elements[removeIndx]);
85
86            inst.hideHistory.elems.push(elements[removeIndx]);
87            inst.hideHistory.widths.push($elementToHide.width());
88            $elementToHide.addClass("item-hide");
89
90            widthSum = inst.calculateListElementsWidth($list);
91            elements.splice(removeIndx, 1);
92        }
93    };
94    /**
95     * Calls when "breadcrumb-hide" class is added.
96     * It does initial
97     * [calculation]{@link module:Breadcrumb.BreadcrumbManager.calculateWidth}
98     * of component width and also adds 
99     * [recalculation]{@link module:Breadcrumb.BreadcrumbManager.calculateWidth}
100     * to window resize event.
101     * @method
102     * @alias module:Breadcrumb.BreadcrumbManager.init
103     * @memberOf module:Breadcrumb.BreadcrumbManager
104     */
105    BreadcrumbManager.prototype.init = function() {
106        var inst = this;
107
108        inst.calculateWidth();
109        $(window).resize(function() {
110            inst.calculateWidth();
111        });
112    };
113    /**
114     * Default behavior of breadcrumb.
115     * If children exist, it adds
116     * "breadcrumb-navigation" class
117     * @method
118     * @alias makeNavigation
119     * @memberOf module:Breadcrumb.BreadcrumbManager
120     */
121    BreadcrumbManager.prototype.makeNavigation = function() {
122        var breadcrumb = $(this.breadcrumb),
123            children = breadcrumb.find("li > ol");
124
125        if (children.length > 0) {
126            breadcrumb.addClass("breadcrumb-navigation");
127        }
128    };
129    /**
130     * initIstance methods creates new instance of
131     * [BreadcrumbManager]{@link module:Breadcrumb.BreadcrumbManager}
132     * @memberOf module:Breadcrumb
133     * @method
134     * @param {jQuery} component Root DOM element of
135     * breadcrumb component wrapped by jQuery
136     * @alias module:Breadcrumb.initInstance
137     */
138    api.initInstance = function(component) {
139        var breadcrumb = new BreadcrumbManager(component),
140            $component = $(component);
141        /** breadcrumb-hide - can be added manually in component setups */
142        if ($component.hasClass("breadcrumb-hide")) {
143            breadcrumb.init();
144        } else {
145            breadcrumb.makeNavigation();
146        }
147    };
148    /**
149     * init method calls in a loop for each
150     * breadcrumb component on a page and runs Breadcrumb's
151     * [".initInstance"]{@link module:Breadcrumb.api.initInstance}  method.
152     * @memberOf module:Breadcrumb
153     * @alias module:Breadcrumb.init
154     */
155    api.init = function() {
156        var breadcrumb = $(".breadcrumb:not(.initialized)");
157        breadcrumb.each(function() {
158            api.initInstance($(this));
159            $(this).addClass("initialized");
160        });
161    };
162
163    return api;
164})(jQuery, document);
165
166XA.register("breadcrumb", XA.component.breadcrumb);