tabsNavSpoiler.js

/* global $, CRD: {}*/

// =require _crd.js

/* More button for navigation items */
$.fn.tabsNavSpoiler = function (enabledOnMediaArrayParam) {
	this.each(function () {
		var nav,
			items,
			btn,
			itemHeight,
			btnOpen = false,
			resizeTimeout,
			enabledOnMediaArray = [],
			enabledOnMedia = function () {
				if (enabledOnMediaArray && enabledOnMediaArray.length) {
					for (var i = 0; i < enabledOnMediaArray.length; i++) {
						if (CRD.device.media[enabledOnMediaArray[i]]) {
							return true;
						}
					}

					return false;
				}

				return true;
			},
			calcItemHeight = function () {
				itemHeight = items.first().outerHeight(true);
			},
			calcItemLimit = function () {
				var offsetTopFirstEl = items.first().offset().top,
					offsetToptLastEl = items.last().offset().top;

				if (offsetTopFirstEl !== offsetToptLastEl) {
					nav.addClass('-with-btn');
					if (!btnOpen) {
						nav.height(itemHeight);
					}
				} else {
					reset();
				}
			},
			reset = function () {
				nav.removeClass('-with-btn').css('height', '');
				btn.removeClass('-less');
				btnOpen = false;
			};

		if ($(this).length) {
			nav = $(this);
			enabledOnMediaArray = enabledOnMediaArrayParam || [];
			items = nav.find('.link');
			btn = nav.find('.btn');
			btnOpen = false;

			if (items.length) {
				btn.on('click', function () {
					var _that = $(this);

					btnOpen = !btnOpen;
					_that.toggleClass('-less', btnOpen);

					if (btnOpen) {
						nav.css('height', '');
					} else {
						nav.height(itemHeight);
					}
				});

				$(window).resize(function () {
					clearTimeout(resizeTimeout);
					resizeTimeout = setTimeout(function () {
						if (enabledOnMedia()) {
							calcItemLimit();
						}
					}, 100);
				});

				CRD.device.mediaChange(function () {
					if (enabledOnMedia()) {
						calcItemHeight();
					} else {
						reset();
					}
				});

				if (enabledOnMedia()) {
					calcItemHeight();
					calcItemLimit();
				}
			}
		}
	});
};