“use strict”;
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(“Cannot call a class as a function”); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (“value” in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
(function ($) {
var MENU_WIDTH = 240; var SN_BREAKPOINT = 1440; var MENU_WIDTH_HALF = 2; var MENU_LEFT_MIN_BORDER = 0.3; var MENU_LEFT_MAX_BORDER = -0.5; var MENU_RIGHT_MIN_BORDER = -0.3; var MENU_RIGHT_MAX_BORDER = 0.5; var MENU_VELOCITY_OFFSET = 10; var MENU_TIME_DURATION_OPEN = 300; var MENU_TIME_DURATION_CLOSE = 200; var MENU_TIME_DURATION_OVERLAY_OPEN = 50; var MENU_TIME_DURATION_OVERLAY_CLOSE = 200; var MENU_EASING_OPEN = 'easeOutQuad'; var MENU_EASING_CLOSE = 'easeOutCubic'; var SHOW_OVERLAY = true; var SHOW_CLOSE_BUTTON = false; var SideNav = /*#__PURE__*/ function () { function SideNav(element, options) { _classCallCheck(this, SideNav); this.defaults = { MENU_WIDTH: MENU_WIDTH, edge: 'left', closeOnClick: false, breakpoint: SN_BREAKPOINT, timeDurationOpen: MENU_TIME_DURATION_OPEN, timeDurationClose: MENU_TIME_DURATION_CLOSE, timeDurationOverlayOpen: MENU_TIME_DURATION_OVERLAY_OPEN, timeDurationOverlayClose: MENU_TIME_DURATION_OVERLAY_CLOSE, easingOpen: MENU_EASING_OPEN, easingClose: MENU_EASING_CLOSE, showOverlay: SHOW_OVERLAY, showCloseButton: SHOW_CLOSE_BUTTON }; this.$element = element; this.$elementCloned = element.clone().css({ display: 'inline-block', lineHeight: '24px' }); this.options = this.assignOptions(options); this.menuOut = false; this.lastTouchVelocity = { x: { startPosition: 0, startTime: 0, endPosition: 0, endTime: 0 } }; this.$body = $('body'); this.$menu = $("#".concat(this.$element.attr('data-activates'))); this.$sidenavOverlay = $('#sidenav-overlay'); this.$dragTarget = $('<div class="drag-target"></div>'); this.$body.append(this.$dragTarget); this.init(); } _createClass(SideNav, [{ key: "init", value: function init() { this.setMenuWidth(); this.setMenuTranslation(); this.closeOnClick(); this.openOnClick(); this.bindTouchEvents(); this.showCloseButton(); this.inputOnClick(); } }, { key: "bindTouchEvents", value: function bindTouchEvents() { var _this = this; this.$dragTarget.on('click', function () { return _this.removeMenu(); }); this.$elementCloned.on('click', function () { return _this.removeMenu(); }); this.$dragTarget.on('touchstart', function (e) { _this.lastTouchVelocity.x.startPosition = e.touches[0].clientX; _this.lastTouchVelocity.x.startTime = Date.now(); }); this.$dragTarget.on('touchmove', this.touchmoveEventHandler.bind(this)); this.$dragTarget.on('touchend', this.touchendEventHandler.bind(this)); } }, { key: "touchmoveEventHandler", value: function touchmoveEventHandler(e) { if (e.type !== 'touchmove') { return; } var touch = e.touches[0]; var touchX = touch.clientX; // calculate velocity every 20ms if (Date.now() - this.lastTouchVelocity.x.startTime > 20) { this.lastTouchVelocity.x.startPosition = touch.clientX; this.lastTouchVelocity.x.startTime = Date.now(); } this.disableScrolling(); var overlayExists = this.$sidenavOverlay.length !== 0; if (!overlayExists) { this.buildSidenavOverlay(); } // Keep within boundaries if (this.options.edge === 'left') { if (touchX > this.options.MENU_WIDTH) { touchX = this.options.MENU_WIDTH; } else if (touchX < 0) { touchX = 0; } } this.translateSidenavX(touchX); this.updateOverlayOpacity(touchX); } }, { key: "panEventHandler", value: function panEventHandler(e) { if (e.gesture.pointerType !== 'touch') { return; } var touchX = e.gesture.center.x; this.disableScrolling(); var overlayExists = this.$sidenavOverlay.length !== 0; if (!overlayExists) { this.buildSidenavOverlay(); } // Keep within boundaries if (this.options.edge === 'left') { if (touchX > this.options.MENU_WIDTH) { touchX = this.options.MENU_WIDTH; } else if (touchX < 0) { touchX = 0; } } this.translateSidenavX(touchX); this.updateOverlayOpacity(touchX); } }, { key: "translateSidenavX", value: function translateSidenavX(touchX) { if (this.options.edge === 'left') { var isRightDirection = touchX >= this.options.MENU_WIDTH / MENU_WIDTH_HALF; this.menuOut = isRightDirection; this.$menu.css('transform', "translateX(".concat(touchX - this.options.MENU_WIDTH, "px)")); } else { var isLeftDirection = touchX < window.innerWidth - this.options.MENU_WIDTH / MENU_WIDTH_HALF; this.menuOut = isLeftDirection; var rightPos = touchX - this.options.MENU_WIDTH / MENU_WIDTH_HALF; if (rightPos < 0) { rightPos = 0; } this.$menu.css('transform', "translateX(".concat(rightPos, "px)")); } } }, { key: "updateOverlayOpacity", value: function updateOverlayOpacity(touchX) { var overlayPercentage; if (this.options.edge === 'left') { overlayPercentage = touchX / this.options.MENU_WIDTH; } else { overlayPercentage = Math.abs((touchX - window.innerWidth) / this.options.MENU_WIDTH); } this.$sidenavOverlay.velocity({ opacity: overlayPercentage }, { duration: 10, queue: false, easing: this.options.easingOpen }); } }, { key: "buildSidenavOverlay", value: function buildSidenavOverlay() { var _this2 = this; if (this.options.showOverlay === true) { this.$sidenavOverlay = $('<div id="sidenav-overlay"></div>'); this.$sidenavOverlay.css('opacity', 0).on('click', function () { return _this2.removeMenu(); }); this.$body.append(this.$sidenavOverlay); } } }, { key: "disableScrolling", value: function disableScrolling() { var oldWidth = this.$body.innerWidth(); this.$body.css('overflow', 'hidden'); this.$body.width(oldWidth); } }, { key: "touchendEventHandler", value: function touchendEventHandler(e) { if (e.type !== 'touchend') { return; } var touch = e.changedTouches[0]; this.lastTouchVelocity.x.endTime = Date.now(); this.lastTouchVelocity.x.endPosition = touch.clientX; var velocityX = this.calculateTouchVelocityX(); var touchX = touch.clientX; var leftPos = touchX - this.options.MENU_WIDTH; var rightPos = touchX - this.options.MENU_WIDTH / MENU_WIDTH_HALF; if (leftPos > 0) { leftPos = 0; } if (rightPos < 0) { rightPos = 0; } if (this.options.edge === 'left') { // If velocityX <= 0.3 then the user is flinging the menu closed so ignore this.menuOut if (this.menuOut && velocityX <= MENU_LEFT_MIN_BORDER || velocityX < MENU_LEFT_MAX_BORDER) { if (leftPos !== 0) { this.translateMenuX([0, leftPos], '300'); } this.showSidenavOverlay(); } else if (!this.menuOut || velocityX > MENU_LEFT_MIN_BORDER) { this.enableScrolling(); this.translateMenuX([-1 * this.options.MENU_WIDTH - MENU_VELOCITY_OFFSET, leftPos], '200'); this.hideSidenavOverlay(); } this.$dragTarget.css({ width: '10px', right: '', left: 0 }); } else if (this.menuOut && velocityX >= MENU_RIGHT_MIN_BORDER || velocityX > MENU_RIGHT_MAX_BORDER) { this.translateMenuX([0, rightPos], '300'); this.showSidenavOverlay(); this.$dragTarget.css({ width: '50%', right: '', left: 0 }); } else if (!this.menuOut || velocityX < MENU_RIGHT_MIN_BORDER) { this.enableScrolling(); this.translateMenuX([this.options.MENU_WIDTH + MENU_VELOCITY_OFFSET, rightPos], '200'); this.hideSidenavOverlay(); this.$dragTarget.css({ width: '10px', right: 0, left: '' }); } } }, { key: "calculateTouchVelocityX", value: function calculateTouchVelocityX() { var distance = Math.abs(this.lastTouchVelocity.x.endPosition - this.lastTouchVelocity.x.startPosition); var time = Math.abs(this.lastTouchVelocity.x.endTime - this.lastTouchVelocity.x.startTime); return distance / time; } }, { key: "panendEventHandler", value: function panendEventHandler(e) { if (e.gesture.pointerType !== 'touch') { return; } var velocityX = e.gesture.velocityX; var touchX = e.gesture.center.x; var leftPos = touchX - this.options.MENU_WIDTH; var rightPos = touchX - this.options.MENU_WIDTH / MENU_WIDTH_HALF; if (leftPos > 0) { leftPos = 0; } if (rightPos < 0) { rightPos = 0; } if (this.options.edge === 'left') { // If velocityX <= 0.3 then the user is flinging the menu closed so ignore this.menuOut if (this.menuOut && velocityX <= MENU_LEFT_MIN_BORDER || velocityX < MENU_LEFT_MAX_BORDER) { if (leftPos !== 0) { this.translateMenuX([0, leftPos], '300'); } this.showSidenavOverlay(); } else if (!this.menuOut || velocityX > MENU_LEFT_MIN_BORDER) { this.enableScrolling(); this.translateMenuX([-1 * this.options.MENU_WIDTH - MENU_VELOCITY_OFFSET, leftPos], '200'); this.hideSidenavOverlay(); } this.$dragTarget.css({ width: '10px', right: '', left: 0 }); } else if (this.menuOut && velocityX >= MENU_RIGHT_MIN_BORDER || velocityX > MENU_RIGHT_MAX_BORDER) { this.translateMenuX([0, rightPos], '300'); this.showSidenavOverlay(); this.$dragTarget.css({ width: '50%', right: '', left: 0 }); } else if (!this.menuOut || velocityX < MENU_RIGHT_MIN_BORDER) { this.enableScrolling(); this.translateMenuX([this.options.MENU_WIDTH + MENU_VELOCITY_OFFSET, rightPos], '200'); this.hideSidenavOverlay(); this.$dragTarget.css({ width: '10px', right: 0, left: '' }); } } }, { key: "translateMenuX", value: function translateMenuX(fromTo, duration) { this.$menu.velocity({ translateX: fromTo }, { duration: typeof duration === 'string' ? Number(duration) : duration, queue: false, easing: this.options.easingOpen }); } }, { key: "hideSidenavOverlay", value: function hideSidenavOverlay() { this.$sidenavOverlay.velocity({ opacity: 0 }, { duration: this.options.timeDurationOverlayClose, queue: false, easing: this.options.easingOpen, complete: function complete() { $(this).remove(); } }); } }, { key: "showSidenavOverlay", value: function showSidenavOverlay() { this.$sidenavOverlay.velocity({ opacity: 1 }, { duration: this.options.timeDurationOverlayOpen, queue: false, easing: this.options.easingOpen }); } }, { key: "enableScrolling", value: function enableScrolling() { this.$body.css({ overflow: '', width: '' }); } }, { key: "openOnClick", value: function openOnClick() { var _this3 = this; this.$element.on('click', function (e) { e.preventDefault(); if (_this3.menuOut === true) { _this3.menuOut = false; _this3.removeMenu(); } else { if (_this3.options.showOverlay === true) { _this3.$sidenavOverlay = $('<div id="sidenav-overlay"></div>'); _this3.$body.append(_this3.$sidenavOverlay); } else { _this3.showCloseButton(); } var translateX = []; if (_this3.options.edge === 'left') { translateX = [0, -1 * _this3.options.MENU_WIDTH]; } else { translateX = [0, _this3.options.MENU_WIDTH]; } _this3.$menu.velocity({ translateX: translateX }, { duration: _this3.options.timeDurationOpen, queue: false, easing: _this3.options.easingOpen }); _this3.$sidenavOverlay.on('click', function () { return _this3.removeMenu(); }); _this3.$sidenavOverlay.on('touchmove', _this3.touchmoveEventHandler.bind(_this3)); _this3.$menu.on('touchmove', function (e) { e.preventDefault(); _this3.$menu.find('.custom-scrollbar').css('padding-bottom', '30px'); }); } }); } }, { key: "closeOnClick", value: function closeOnClick() { var _this4 = this; if (this.options.closeOnClick === true) { this.$menu.on('click', 'a:not(.collapsible-header)', function () { return _this4.removeMenu(); }); } } }, { key: "showCloseButton", value: function showCloseButton() { if (this.options.showCloseButton === true) { this.$menu.prepend(this.$elementCloned); this.$menu.find('.logo-wrapper').css({ borderTop: '1px solid rgba(153,153,153,.3)' }); } } }, { key: "setMenuTranslation", value: function setMenuTranslation() { var _this5 = this; if (this.options.edge === 'left') { this.$menu.css('transform', 'translateX(-100%)'); this.$dragTarget.css({ left: 0 }); } else { this.$menu.addClass('right-aligned').css('transform', 'translateX(100%)'); this.$dragTarget.css({ right: 0 }); } if (this.$menu.hasClass('fixed')) { if (window.innerWidth > this.options.breakpoint) { this.$menu.css('transform', 'translateX(0)'); } this.$menu.find('input[type=text]').on('touchstart', function () { _this5.$menu.addClass('transform-fix-input'); }); $(window).resize(function () { if (window.innerWidth > _this5.options.breakpoint) { if (_this5.$sidenavOverlay.length) { _this5.removeMenu(true); } else { _this5.$menu.css('transform', 'translateX(0%)'); } } else if (_this5.menuOut === false) { var xValue = _this5.options.edge === 'left' ? '-100' : '100'; _this5.$menu.css('transform', "translateX(".concat(xValue, "%)")); } }); } } }, { key: "setMenuWidth", value: function setMenuWidth() { var $sidenavBg = $("#".concat(this.$menu.attr('id'))).find('> .sidenav-bg'); if (this.options.MENU_WIDTH !== MENU_WIDTH) { this.$menu.css('width', this.options.MENU_WIDTH); $sidenavBg.css('width', this.options.MENU_WIDTH); } } }, { key: "inputOnClick", value: function inputOnClick() { var _this6 = this; this.$menu.find('input[type=text]').on('touchstart', function () { return _this6.$menu.css('transform', 'translateX(0)'); }); } }, { key: "assignOptions", value: function assignOptions(newOptions) { return $.extend({}, this.defaults, newOptions); } }, { key: "removeMenu", value: function removeMenu(restoreMenu) { var _this7 = this; this.$body.css({ overflow: '', width: '' }); this.$menu.velocity({ translateX: this.options.edge === 'left' ? '-100%' : '100%' }, { duration: this.options.timeDurationClose, queue: false, easing: this.options.easingClose, complete: function complete() { if (restoreMenu === true) { _this7.$menu.removeAttr('style'); _this7.$menu.css('width', _this7.options.MENU_WIDTH); } } }); if (this.$menu.hasClass('transform-fix-input')) { this.$menu.removeClass('transform-fix-input'); } this.hideSidenavOverlay(); } }]); return SideNav; }(); $.fn.sideNav = function (options) { return this.each(function () { new SideNav($(this), options); }); };
})(jQuery);
$(function () {
$("#toggle").click(function () { if ($("#slide-out").hasClass('slim')) { $("#slide-out").removeClass('slim'); $(".sv-slim-icon").removeClass('fa-angle-double-right').addClass('fa-angle-double-left'); } else { $("#slide-out").addClass('slim'); $(".sv-slim-icon").removeClass('fa-angle-double-left').addClass('fa-angle-double-right'); } });
});