https://khakassia.travel/themes/js/responsiveMenu.js

1;(function($) {
2
3	// Options
4	const defaults = {
5		containerClass : 'menu',
6		itemClass      : 'item',
7		minItems       : 2,
8		linkText       : 'Ещё',
9		linkTextAll    : 'Меню',
10		minWidth       : 320
11	}
12
13
14	$.fn.responsiveMenu = function(options) {
15		if (this.length === 0) return this
16
17		// Support multiple elements
18		if (this.length > 1) {
19			this.each(function() {
20				$(this).responsiveMenu(options)
21			})
22
23			return this
24		}
25
26		// Create a namespace to be used throughout the plugin
27		const menu = {},
28			  el     = this,
29			  $el    = $(this)
30
31
32		// Return if menu is already initialized
33		if ($el.data('responsiveMenu')) return
34
35
36		/**
37		 * ===================================================================================
38		 * = PRIVATE FUNCTIONS
39		 * ===================================================================================
40		*/
41		const init = () => {
42			// Merge user-supplied options with the defaults
43			menu.settings = $.extend({}, defaults, options)
44
45			// Set container element
46			menu.$container = $('.' + menu.settings.containerClass)
47
48			// Set heights
49			menu.containerHeight = menu.$container.height()
50			menu.menuHeight      = $el.height()
51
52			// Set link more
53			menu.$linkMore = $('<button class="more_btn">'+ menu.settings.linkText +'</button>')
54
55			// Set dropdown
56			menu.$dropdown = $('<div class="dropdown"></div>')
57
58			// Set window width
59			menu.windowW = $(window).width()
60
61			// Call Reduce
62			reduceMenu()
63
64			// Add the resize call to the window
65			$(window).on('resize', resizeWindow)
66		}
67
68
69		// Window resize event
70		const resizeWindow = () => {
71			// Update heights
72			menu.containerHeight = menu.$container.height()
73			menu.menuHeight      = $el.height()
74
75			// Сalling the method depending on the direction
76			$(window).width() < menu.windowW
77				// Call Reduce
78				? reduceMenu()
79				// Call Increase
80				: increaseMenu()
81
82			// Update window width
83			menu.windowW = $(window).width()
84		}
85
86
87		// Reduce method
88		const reduceMenu = (e) => {
89			if(menu.menuHeight > menu.containerHeight && menu.settings.minWidth < $(window).width()) {
90				// Move last item to dropdown
91				const lastItem     = $el.find('> .'+ menu.settings.itemClass +':last'),
92					  lastItemHtml = lastItem.prop('outerHTML')
93
94				lastItem.remove()
95
96				// Add more link
97				if(!$el.find('.more_btn').length) {
98					$el.append(menu.$linkMore)
99
100					// Add click actions to the more btn
101					menu.$linkMore.on('click', clickMoreLink)
102				}
103
104				// Set dropdown
105				menu.$dropdown.prepend(lastItemHtml)
106				$el.append(menu.$dropdown)
107
108				// Update height
109				menu.menuHeight = $el.height()
110
111				// Call Reduce
112				reduceMenu()
113			}
114
115			// Minimum display
116			if( $el.find('> .'+ menu.settings.itemClass).length < menu.settings.minItems ) {
117				$el.find('> .'+ menu.settings.itemClass).each(function(){
118					// Move last item to dropdown
119					const lastItem     = $el.find('> .'+ menu.settings.itemClass +':last'),
120						  lastItemHtml = lastItem.prop('outerHTML')
121
122					lastItem.remove()
123
124					// Set dropdown
125					menu.$dropdown.prepend(lastItemHtml)
126				})
127
128				// Set dropdown
129				$el.append(menu.$dropdown)
130
131				// Change link more text
132				menu.$linkMore.html(menu.settings.linkTextAll)
133			}
134		}
135
136
137		// Increase method
138		const increaseMenu = (e) => {
139			if($el.find('.more_btn').length ) {
140				// Move first item from dropdown
141				const firstItem     = menu.$dropdown.find('> *:first'),
142					  firstItemHtml = firstItem.prop('outerHTML')
143
144				firstItem.remove()
145
146				$el.find('.more_btn').before(firstItemHtml)
147
148				// Checking the link more is needed
149				if(!menu.$dropdown.find('> *').length) $el.find('.more_btn, .dropdown').remove()
150
151				// Update height
152				menu.menuHeight = $el.height()
153
154				// Minimum display
155				if( $el.find('> .'+ menu.settings.itemClass).length < menu.settings.minItems ) {
156					// Call Increase
157					increaseMenu()
158				} else {
159					menu.menuHeight <= menu.containerHeight
160					// Call Increase
161					? increaseMenu()
162					// Call Reduce
163					: reduceMenu()
164				}
165			}
166		}
167
168
169		// Add click action
170		const clickMoreLink = (e) => {
171			const moreBtn = $(e.target)
172
173			if(!moreBtn.hasClass('active')) {
174				moreBtn.addClass('active')
175				menu.$container.find('.responsive_menu').addClass('active')
176				menu.$dropdown.fadeIn(300).addClass('show')
177
178				// Click outside dropdown
179				$(document).click((e) => {
180					if ($(e.target).closest('.responsive_menu').length === 0 && menu.$container.find('.responsive_menu').hasClass('active')) {
181						moreBtn.removeClass('active')
182						menu.$container.find('.responsive_menu').removeClass('active')
183						menu.$dropdown.fadeOut(200).removeClass('show')
184					}
185				})
186			} else {
187				moreBtn.removeClass('active')
188				menu.$container.find('.responsive_menu').removeClass('active')
189				menu.$dropdown.fadeOut(200).removeClass('show')
190			}
191		}
192
193
194		/**
195		 * ===================================================================================
196		 * = INIT PLUGIN
197		 * ===================================================================================
198		*/
199		init()
200
201		$el.data('responsiveMenu', this)
202
203		// Returns the current jQuery object
204		return this
205	}
206})(jQuery)