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