https://www.voltmaster.de/templates/NOVA/js/app/plugins/tabdrop.js

1const Tabdrop = function(element, options) {
2	let _this = this;
3
4	this.element = element;
5	this.options = options;
6
7	this.more = element.getElementsByClassName('sr-only');
8	this.tabdrop = document.createElement('li');
9	this.tabdrop.setAttribute('class', 'nav-item tab-drop d-none');
10	this.a = document.createElement('a');
11	this.a.setAttribute('class', 'nav-link' + ((this.options.showCaret) ? ' dropdown-toggle' : ''))
12	this.a.setAttribute('href', '#');
13	this.a.setAttribute('data-toggle', 'dropdown');
14	this.a.setAttribute('role', 'button');
15	this.a.setAttribute('aria-haspopup', 'true');
16	this.a.setAttribute('aria-expanded', 'false');
17	this.a.appendChild(this.more[0]);
18	this.tabdrop.appendChild(this.a);
19	this.dropdown = document.createElement('div');
20	this.dropdown.setAttribute('class', 'dropdown-menu dropdown-menu-right');
21	this.tabdrop.appendChild(this.dropdown);
22
23	this.tabdrop = $(this.tabdrop).appendTo(this.element);
24	this.collection = [];
25
26	this.layout = function() {
27		$.each(this.tabdrop.find('.dropdown-item'), function() {
28			_this._swapClasses(this).insertBefore(_this.tabdrop);
29		});
30
31		this._checkOffsetAndPush();
32	};
33
34	this._checkOffsetAndPush = function(recursion) {
35		recursion = recursion || false;
36
37		$(this.element).find('.nav-item:not(.tab-drop), .dropdown-item').each(function() {
38			if(this.offsetTop > _this.options.offsetTop) {
39				_this.collection.push(_this._swapClasses(this));
40			}
41		});
42
43		if(this.collection.length > 0) {
44			if(!recursion) {
45				this.tabdrop.removeClass('d-none');
46				this.tabdrop.parent().css('padding-right', this.tabdrop.width());
47				this.tabdrop.find('.dropdown-menu').empty();
48			}
49
50			this.tabdrop.find('.dropdown-menu').prepend(this.collection);
51
52			if(this.tabdrop.find('.dropdown-menu .active').length == 1) {
53				this.tabdrop.find('> .nav-link').addClass('active');
54			} else {
55				this.tabdrop.find('> .nav-link').removeClass('active');
56			}
57
58			this.collection = [];
59
60			this._checkOffsetAndPush(true);
61		} else {
62			if (!recursion) {
63				this.tabdrop.addClass('d-none');
64				this.tabdrop.parent().css('padding-right', 0);
65			}
66		}
67	};
68
69	this._swapClasses = function(element) {
70		let item;
71
72		if($(element).hasClass('nav-item')) {
73			item = $(element).find('.nav-link').removeClass('nav-link').addClass('dropdown-item');
74			$(element).detach();
75		} else {
76			item = $(element).removeClass('dropdown-item').addClass('nav-link');
77			item = $('<li />').addClass('nav-item').append(item);
78		}
79
80		return item;
81	};
82
83	$(window).on('resize', $.proxy(this.layout, this));
84	$(this.element).on('shown.bs.tab', $.proxy(this.layout, this));
85
86	this.layout();
87};
88
89$.fn.tabdrop = function(option) {
90	return this.each(function() {
91		let data = $(this).data('tabdrop'),
92			options = typeof option === 'object' && option;
93
94		if(!data) {
95			options = $.extend({}, $.fn.tabdrop.defaults, options);
96			$(this).data('tabdrop', new Tabdrop(this, options));
97		}
98
99		if(typeof option == 'string')
100			data[option]();
101	})
102};
103
104$.fn.tabdrop.defaults = {
105	offsetTop : 0,
106	icon : '',
107	showCaret : true
108};
109
110$.fn.tabdrop.Constructor = Tabdrop;