https://www.wuerth.de/web/media/system/layout_wl2bootstrap/bootstrap_library/breadcrumb/breadcrumb.js

1'use strict';
2
3var breadcrumb = function() {
4  var breadcrumbItems = $(document).find('.breadcrumb-item').toArray();
5  breadcrumbItems.shift();
6
7  var hideElements = function() {
8
9    if (breadcrumbItems.length <= 1) {
10
11      $(".breadcrumb").removeClass("invisible");
12      return;
13    }
14
15    $("li.breadcrumb-item").eq(1).after("<li class='breadcrumb-item breadcrumb-dots'><p>...</p></li>");
16
17    var leftWidth = 0;
18
19    $('ol.breadcrumb > #backLink, ol.breadcrumb > li.breadcrumb-item:lt(1), ol.breadcrumb > li.breadcrumb-dots').each(function() {
20      leftWidth += $(this).outerWidth();
21    });
22
23    var maxRightWidth = $('ol.breadcrumb').parent().width() - leftWidth - 10;
24
25
26    var i = 0;
27
28
29    while (i < breadcrumbItems.length) {
30
31      if (i < (breadcrumbItems.length - 1)) {
32
33        var j = 0;
34        var rightWidth = 0;
35        while (j < breadcrumbItems.length) {
36
37          rightWidth += breadcrumbItems[j].offsetWidth;
38          j++;
39        }
40
41        if (rightWidth > maxRightWidth) {
42
43          breadcrumbItems[i].style.display = "none";
44        }
45        else {
46
47          break;
48        }
49      }
50      else {
51
52        if (i == (breadcrumbItems.length - 1)) {
53
54          breadcrumbItems[i].style.maxWidth = maxRightWidth + "px";
55          breadcrumbItems[i].children[0].style.overflow = "hidden";
56          breadcrumbItems[i].children[0].style.textOverflow = "ellipsis";
57        }
58      }
59
60      i++;
61    }
62
63    if (i == 0) {
64
65      $(".breadcrumb-dots").remove();
66    }
67    $(".breadcrumb").removeClass("invisible");
68  };
69
70  var resetDisplay = function() {
71
72    var $breadCrumbDots = $(".breadcrumb-dots");
73
74    if ($breadCrumbDots && $breadCrumbDots.length > 0) {
75
76      $(".breadcrumb-dots").remove();
77    }
78
79    var i = 0;
80
81    while (i < breadcrumbItems.length) {
82      breadcrumbItems[i].style.display = "";
83      breadcrumbItems[i].style.maxWidth = "";
84      if (!$.isEmptyObject(breadcrumbItems[i].children[0])) {
85        breadcrumbItems[i].children[0].style.overflow = "";
86        breadcrumbItems[i].children[0].style.textOverflow = "";
87      }
88      i++;
89    }
90  };
91
92  var init = function() {
93    resetDisplay();
94    hideElements();
95  };
96
97  $(document).ready(function() {
98    init();
99  });
100
101  $(window).on("resize", function() {
102    init();
103  });
104
105};