admin back-office environment (skeleton); admin categories

16 files changed, 524 insertions, 0 deletions

diff --git a/public/assets/js/_dependency-control/plugins/accordion.js b/public/assets/js/_dependency-control/plugins/accordion.js
new file mode 100644
index 0000000..62e25ad
--- /dev/null
+++ b/public/assets/js/_dependency-control/plugins/accordion.js
@@ -0,0 +1,43 @@
+$$plugins.define('accordion', ['domHelper'], function (element, options, $) {

+    var animating = false,

+        $header = $(element).find('.acc:not(.acc--disabled) .acc__header'),

+        $content,

+        $prevActiveAcc,

+        $this,

+        $accItem,

+        singleOpen = options.singleOpen ? options.singleOpen : false;

+

+    $header.on('click', function (e) {

+        $this = $(this);

+        $accItem = $this.parent('.acc');

+        $content = $this.next('.acc__content');

+        if (animating === true) {

+            return;

+        }

+        animating = true;

+        if ($accItem.is('.open')) {

+            $content.slideUp(300, function () {

+                $accItem.removeClass('open');

+                $content.removeAttr('style');

+                animating = false;

+            });

+        } else {

+            $content.slideDown(300, function () {

+                $accItem.addClass('open');

+                $content.removeAttr('style');

+                animating = false;

+            });

+

+            if (singleOpen) {

+                $prevActiveAcc = $accItem.siblings('.acc.open');

+                if ($prevActiveAcc.length != 0) {

+                    $prevActiveAcc.find('.acc__content').slideUp(300, function () {

+                        $prevActiveAcc.removeClass('open');

+                        $prevActiveAcc.find('.acc__content').removeAttr('style');

+                        animating = false;

+                    });

+                }

+            }

+        }

+    });

+});

diff --git a/public/assets/js/_dependency-control/plugins/breadcrumb.js b/public/assets/js/_dependency-control/plugins/breadcrumb.js
new file mode 100644
index 0000000..112824b
--- /dev/null
+++ b/public/assets/js/_dependency-control/plugins/breadcrumb.js
@@ -0,0 +1,9 @@
+$$plugins.define('breadcrumb', function (element, options) {

+    var scrollPos = element.querySelector('.breadcrumb__item:last-child').offsetLeft - element.offsetLeft;

+

+    element.scroll({

+        top: 0,

+        left: scrollPos,

+        behavior: 'smooth'

+    });

+});

diff --git a/public/assets/js/_dependency-control/plugins/copy.js b/public/assets/js/_dependency-control/plugins/copy.js
new file mode 100644
index 0000000..c33430f
--- /dev/null
+++ b/public/assets/js/_dependency-control/plugins/copy.js
@@ -0,0 +1,25 @@
+$$plugins.define('copy', function (element, options) {

+    //copyButton: data-copy-btn

+    //content to be copied: data-copy-text

+    //tooltip: data-copy-tooltip

+

+    const copyButton = element,

+        copyButtonId = copyButton.getAttribute('data-copy-btn'),

+        copyText = document.querySelector(`[data-copy-text='${copyButtonId}']`),

+        tooltip = document.querySelector(`[data-copy-tooltip='${copyButtonId}']`);

+

+    function copy() {

+        var r = document.createRange();

+        r.selectNode(copyText);

+        window.getSelection().removeAllRanges();

+        window.getSelection().addRange(r);

+        document.execCommand('copy');

+        window.getSelection().removeAllRanges();

+        tooltip.classList.add('copyText__tooltip--open');

+        setTimeout(function () {

+            tooltip.classList.remove('copyText__tooltip--open');

+        }, 1600);

+    }

+

+    copyButton.addEventListener("click", copy);

+});

diff --git a/public/assets/js/_dependency-control/plugins/expand.js b/public/assets/js/_dependency-control/plugins/expand.js
new file mode 100644
index 0000000..533e978
--- /dev/null
+++ b/public/assets/js/_dependency-control/plugins/expand.js
@@ -0,0 +1,38 @@
+$$plugins.define('expand', ['domHelper'], function (element, options, $) {

+    //triggerButton: data-trigger-expand

+    //content to be initialized: data-content-expand

+    const triggerButton = element.querySelector('[data-trigger-expand]'),

+        triggerButtonId = triggerButton.getAttribute('data-trigger-expand'),

+        content = $(`[data-content-expand='${triggerButtonId}']`);

+

+    var $triggerButton = $(triggerButton);

+

+    $triggerButton.on('click', function (e) {

+        e.preventDefault();

+        if ($triggerButton.hasClass('active')) {

+            content.slideUp(300, function () {

+                $triggerButton.removeClass('active');

+                content.removeAttr('style');

+            });

+		} else {

+			$triggerButton.addClass('active');

+            content.slideDown(300, function () {

+                if (content.find('.scrollbarShadow').length > 0 && !content.find('.scrollbarShadow').hasClass('initialized')) {

+                    content.find('.scrollbarShadow').addClass('initialized');

+                }

+            });

+        }

+    });

+

+    if (options.closeOnCLickAway == true) {

+        document.addEventListener('click', function (event) {

+            if (!$triggerButton.hasClass('active') || element == event.target || $(event.target).parents().contains(element)) {

+                return;

+            }

+            content.slideUp(300, function () {

+                $triggerButton.removeClass('active');

+                content.removeAttr('style');

+            });

+        });

+    }

+});

diff --git a/public/assets/js/_dependency-control/plugins/expandText.js b/public/assets/js/_dependency-control/plugins/expandText.js
new file mode 100644
index 0000000..0b58cb7
--- /dev/null
+++ b/public/assets/js/_dependency-control/plugins/expandText.js
@@ -0,0 +1,5 @@
+$$plugins.define('expandText', function (element, options) {

+    element.querySelector('.expandText__button').addEventListener('click', () => {

+        element.classList.toggle('open');

+    });

+});

diff --git a/public/assets/js/_dependency-control/plugins/fileinput.js b/public/assets/js/_dependency-control/plugins/fileinput.js
new file mode 100644
index 0000000..10ba891
--- /dev/null
+++ b/public/assets/js/_dependency-control/plugins/fileinput.js
@@ -0,0 +1,20 @@
+$$plugins.define('fileinput', function (element, options) {

+	const inputfile = element.querySelector('.file-upload__input');

+	const filedelete = element.querySelector('.file-upload__delete');

+

+	inputfile.addEventListener('change', (event) => {

+		const inputname = element.querySelector('.file-upload__name');

+		const filename = inputfile.files[0].name;

+		inputname.innerText = filename;		

+		element.classList.add('file-upload__filled');

+	});

+

+	filedelete.addEventListener('click', (event) => {

+		const inputname = element.querySelector('.file-upload__name');

+

+		inputname.innerText = "";

+		element.classList.remove('file-upload__filled');

+		inputfile.value = "";

+	});

+

+});

diff --git a/public/assets/js/_dependency-control/plugins/gallery.js b/public/assets/js/_dependency-control/plugins/gallery.js
new file mode 100644
index 0000000..6ac147a
--- /dev/null
+++ b/public/assets/js/_dependency-control/plugins/gallery.js
@@ -0,0 +1,51 @@
+$$plugins.define('gallery', ['swiper-bundle', 'domHelper'], function (element, options, Swiper, $) {

+	var $galleryImg = $('.gallery__figure img'),

+		thumbs = document.querySelector('.galleryThumbs'),

+		sliderModal = document.querySelector('.gallerySliderModal'),

+		$image;

+

+	var swiperThumbs = new Swiper(".galleryThumbs", {

+		direction: "horizontal",

+		freeMode: true,

+		init: false,

+		slidesPerView: 4,

+		spaceBetween: 8,

+		speed: 800,

+		watchSlidesProgress: true,

+		pagination: {

+			el: '.swiper-pagination',

+		},

+		breakpoints: {

+			768: {

+				slidesPerView: 5,

+				spaceBetween: 17,

+			}

+		},

+	});

+

+	var swiperMain = new Swiper(".galleryMainImg", {

+		init: false,

+		loop: true,

+		navigation: {

+			nextEl: ".swiper-button-next",

+			prevEl: ".swiper-button-prev",

+		},

+		speed: 800,

+		thumbs: {

+			swiper: swiperThumbs,

+		},

+	});

+

+	$galleryImg.on('click', function () {

+		if (!thumbs.classList.contains('swiper-initialized')) {

+		swiperThumbs.init();

+			swiperMain.init();

+		}

+		sliderModal.classList.add('open');

+		$image = $(this).parents('.gallery__figure');

+		swiperMain.slideTo($image.index() + 1, 0);

+

+		//document.documentElement.classList.add('noScroll');

+

+	});

+});
\ No newline at end of file
diff --git a/public/assets/js/_dependency-control/plugins/infoPopup.js b/public/assets/js/_dependency-control/plugins/infoPopup.js
new file mode 100644
index 0000000..e11ad16
--- /dev/null
+++ b/public/assets/js/_dependency-control/plugins/infoPopup.js
@@ -0,0 +1,8 @@
+$$plugins.define('infoPopup', function (element, options) {

+    element.addEventListener('click', event => {

+        element.closest('.infoPopup').classList.add('moveOut');

+        setTimeout(function () {

+            element.closest('.infoPopup').remove()

+        }, 500);

+    });

+});

diff --git a/public/assets/js/_dependency-control/plugins/initialize.js b/public/assets/js/_dependency-control/plugins/initialize.js
new file mode 100644
index 0000000..ecdca48
--- /dev/null
+++ b/public/assets/js/_dependency-control/plugins/initialize.js
@@ -0,0 +1,11 @@
+$$plugins.define('initialize', function (element, options) {

+    //triggerButton: data-trigger-initialize

+    //content to be initialized: data-content-initialize

+

+    const triggerButton = element.getAttribute('data-trigger-initialize'),

+        content = document.querySelector(`[data-content-initialize='${triggerButton}']`);

+

+    element.addEventListener('click', function (event) {

+        content.classList.add("initialized");

+    });

+});

diff --git a/public/assets/js/_dependency-control/plugins/intersecting.js b/public/assets/js/_dependency-control/plugins/intersecting.js
new file mode 100644
index 0000000..87faf61
--- /dev/null
+++ b/public/assets/js/_dependency-control/plugins/intersecting.js
@@ -0,0 +1,18 @@
+$$plugins.define('intersecting', function (element, options) {

+    const el = document.querySelector(options.target);

+

+    const observer = new window.IntersectionObserver(([entry]) => {

+        const intersectionRatio = entry.intersectionRatio.toFixed(2);

+        if (entry.isIntersecting) {

+            element.classList.add("sticky");

+        } else {

+            element.classList.remove("sticky");

+        }

+    }, {

+        root: null,

+        rootMargin: '-30% 0px -70%',

+        threshold: 0

+    })

+

+    observer.observe(el)

+});

diff --git a/public/assets/js/_dependency-control/plugins/menu.js b/public/assets/js/_dependency-control/plugins/menu.js
new file mode 100644
index 0000000..d6dced2
--- /dev/null
+++ b/public/assets/js/_dependency-control/plugins/menu.js
@@ -0,0 +1,97 @@
+$$plugins.define('menu', ['domHelper'], function (element, options, $) {

+    var level1 = $('.mainNav__link--hasChildren', element),

+        closeElements = $('.mainLayer, .megamenu__close'),

+        body = $('body'),

+        burgerMenu = $('.burgerMenu'),

+        mainContainer = $('.mainContainer'),

+        header = $('.header'),

+        megaMenuBack = $('.megamenu__back'),

+        positionTopDesktop,

+        scrollBarWidth;

+

+

+    level1.on('click', function (event) {

+        event.preventDefault();

+        var $this = $(this);

+        if ($this.parent('.mainNav__item').is('.mainNav__item--active')) {

+            closeMenuLevel1($this);

+        }

+        else {

+            openMenuLevel1($this);

+        }

+    });

+

+    //close menu

+    closeElements.on('click', function () {

+        if (window.innerWidth < 1024) {

+            closeMobileMenu();

+        } else {

+            closeMenuLevel1($('.mainNav__item--active .mainNav__link'));

+        }

+    });

+

+    function openMenuLevel1($activeItem) {

+        var $activeItemParent = $activeItem.parent('.mainNav__item');

+

+        positionTopDesktop = -window.scrollY;

+        scrollBarWidth = window.innerWidth - mainContainer.innerWidth();

+

+        var activeItemsExceptCurrent = $('.mainNav__item--active').not($activeItemParent);

+        if (activeItemsExceptCurrent.length > 0) {

+            activeItemsExceptCurrent.removeClass('mainNav__item--active').addClass('mainNav__item--fadeOut');

+            setTimeout(function () {

+                activeItemsExceptCurrent.removeClass('mainNav__item--fadeOut');

+            }, 350);

+        }

+

+        $activeItemParent.addClass('mainNav__item--active');

+        body.addClass('menuOpened menuOpened--level2').each(e => e.style.paddingRight = scrollBarWidth + "px");

+        burgerMenu.addClass('burgerMenu--opened');

+

+        mainContainer.each(e => e.style.transform = "translateY(" + positionTopDesktop + "px)");

+        header.each(e => e.style.width = "calc(100vw - " + scrollBarWidth + "px)");

+    }

+

+    function closeMenuLevel1($activeItem) {

+        var $activeItemParent = $activeItem.parent('.mainNav__item');

+        $activeItemParent.removeClass('mainNav__item--active');

+        body.removeClass('menuOpened').each(e => e.style.paddingRight = "");

+        burgerMenu.removeClass('burgerMenu--opened');

+        mainContainer.each(e => e.style.transform = "");

+        header.each(e => e.style.width = "");

+        body.scroll({

+            top: -positionTopDesktop

+        });

+    }

+

+    burgerMenu.on('click', function (e) {

+        e.preventDefault();

+        if (e.target.matches('.burgerMenu--opened')) {

+            closeMobileMenu();

+        } else {

+            openMobileMenu();

+        }

+    });

+

+    var positionTop;

+    function openMobileMenu() {

+        positionTop = -window.scrollY;

+        burgerMenu.addClass('burgerMenu--opened');

+        body.addClass('menuOpened menuOpened--level2');

+        mainContainer.each(e => e.style.transform = "translateY(" + positionTop + "px)");

+    }

+

+    function closeMobileMenu() {

+        burgerMenu.removeClass('burgerMenu--opened');

+        body.removeClass('menuOpened menuOpened--level2');

+        mainContainer.each(e => e.style.transform = "");

+        body.scroll({

+            top: -positionTop

+        });

+    }

+

+    megaMenuBack.on('click', function (event) {

+        $('.mainNav__item--active').removeClass('mainNav__item--active');

+        body.removeClass('menuOpened--level2');

+    });

+});

diff --git a/public/assets/js/_dependency-control/plugins/scrollShadowHor.js b/public/assets/js/_dependency-control/plugins/scrollShadowHor.js
new file mode 100644
index 0000000..eed0325
--- /dev/null
+++ b/public/assets/js/_dependency-control/plugins/scrollShadowHor.js
@@ -0,0 +1,42 @@
+$$plugins.define('scrollShadowHor', function (element, options) {

+    var scrollElm = element.querySelector('.scrollbar'),

+        listInner = element.querySelector('.scrollbar__inner');

+

+    const observer = new MutationObserver(function(mutations) {

+        var childrenMutations = mutations.filter((x) => x.type === "childList");

+        if (childrenMutations.length > 0){

+            checkScrollPos(scrollElm);

+        }

+    });

+

+    observer.observe(listInner, { subtree: true, childList: true });

+

+    checkScrollPos(scrollElm);

+

+    scrollElm.addEventListener("scroll", function () {

+        checkScrollPos(this);

+    });

+

+    function checkScrollPos(scrollContainer) {

+        if (scrollContainer.scrollLeft + element.offsetWidth > listInner.offsetWidth - 8) {

+            element.classList.add('scrollbarShadow--right');

+        } else {

+            element.classList.remove('scrollbarShadow--right');

+        }

+        if (scrollContainer.scrollLeft < 8) {

+            element.classList.add('scrollbarShadow--left');

+        } else {

+            element.classList.remove('scrollbarShadow--left');

+        }

+    }

+

+    //checkScrollInit();

+

+    //function checkScrollInit() {

+    //    if (element.offsetWidth >= listInner.offsetWidth) {

+    //        element.classList.add('scrollbarShadow--noScroll');

+    //    } else {

+    //        element.classList.remove('scrollbarShadow--noScroll');

+    //    }

+    //}

+});

diff --git a/public/assets/js/_dependency-control/plugins/scrollShadowVert.js b/public/assets/js/_dependency-control/plugins/scrollShadowVert.js
new file mode 100644
index 0000000..2824c22
--- /dev/null
+++ b/public/assets/js/_dependency-control/plugins/scrollShadowVert.js
@@ -0,0 +1,57 @@
+$$plugins.define('scrollShadowVert', function (element, options) {

+    var scrollElm = element.querySelector('.scrollbar'),

+        listInner = element.querySelector('.scrollbar__inner');

+

+    //observer for adding/removing children elements

+    const observer = new MutationObserver(function (mutations) {

+        var childrenMutations = mutations.filter((x) => x.type === "childList");

+        if (childrenMutations.length > 0) {

+            checkScrollPos(scrollElm);

+        }

+    });

+

+    observer.observe(listInner, { subtree: true, childList: true });

+

+    //observer for initialized class

+    if (options.initialize == true) {

+        const targetNode = element;

+

+        const observer2 = new MutationObserver(function (mutations) {

+            var classMutations = mutations.filter((x) => x.type === "attributes");

+            if (classMutations.length > 0 && targetNode.classList.contains('initialized')) {

+                checkScrollPos(scrollElm);

+                observer2.disconnect();

+            }

+        });

+        observer2.observe(targetNode, { attributes: true, attributeFilter: ['class'] });

+    }

+

+    checkScrollPos(scrollElm);

+

+    scrollElm.addEventListener("scroll", function () {

+        checkScrollPos(this);

+    });

+

+    function checkScrollPos(scrollContainer) {

+        if (scrollContainer.scrollTop + element.offsetHeight > listInner.offsetHeight - 8) {

+            element.classList.add('scrollbarShadow--bottom');

+        } else {

+            element.classList.remove('scrollbarShadow--bottom');

+        }

+        if (scrollContainer.scrollTop < 8) {

+            element.classList.add('scrollbarShadow--top');

+        } else {

+            element.classList.remove('scrollbarShadow--top');

+        }

+    }

+

+    //checkScrollInit();

+

+    //function checkScrollInit() {

+    //    if (element.offsetHeight >= listInner.offsetHeight) {

+    //        element.classList.add('scrollbarShadow--noScroll');

+    //    } else {

+    //        element.classList.remove('scrollbarShadow--noScroll');

+    //    }

+    //}

+});

diff --git a/public/assets/js/_dependency-control/plugins/tabs.js b/public/assets/js/_dependency-control/plugins/tabs.js
new file mode 100644
index 0000000..74d4efc
--- /dev/null
+++ b/public/assets/js/_dependency-control/plugins/tabs.js
@@ -0,0 +1,28 @@
+$.defineAttributePlugin('tabs', function ($element, options) {

+    var animating = false,

+        dataTab,

+        slideSpeed = options.slideSpeed ? options.slideSpeed : 400;

+

+    if (!$element.find("[data-tab-trigger]").hasClass('active')) {

+        setTimeout(function () { $element.find("[data-tab-trigger]").first().trigger('click'); }, 50);

+    }

+

+    $element.find("[data-tab-trigger]").click(function (e) {

+        e.preventDefault();

+        if (animating === true || $(this).hasClass('active')) {

+            return;

+        }

+        animating = true;

+        $(this).addClass('active').siblings().removeClass('active');

+        dataTab = $(this).data('tab-trigger');

+

+        $('[data-tab-content="' + dataTab + '"]').siblings('.active').slideUp(slideSpeed, function () {

+            $(this).removeClass('active').removeAttr('style');

+        });

+

+        $('[data-tab-content="' + dataTab + '"]').slideDown(slideSpeed, function () {

+            $(this).addClass('active').removeAttr('style');

+            animating = false;

+        });

+    });

+});

diff --git a/public/assets/js/_dependency-control/plugins/tabtoggle.js b/public/assets/js/_dependency-control/plugins/tabtoggle.js
new file mode 100644
index 0000000..84a0508
--- /dev/null
+++ b/public/assets/js/_dependency-control/plugins/tabtoggle.js
@@ -0,0 +1,27 @@
+$$plugins.define('tabtoggle', function (element, options) {

+	var activeTab = element.querySelector(".active");

+	var sliderNav = element.querySelector(".tabToggle__tabs");

+	var activeTabContent = document.querySelector("[data-tabToggle-content].active");

+

+	if (element.querySelector(".tabToggle__tab:nth-child(2)").classList.contains("active")) {

+		sliderNav.classList.add("slide");

+	}

+

+	element.addEventListener("click", function (e) {

+		if (!(e.target.classList.contains("active"))) {

+			activeTab.classList.remove("active");

+			activeTab = e.target;

+

+            activeTab.classList.add("active");

+            sliderNav.classList.toggle("slide");

+			activeTabContent.classList.remove("active");

+			activeTabContent = document.querySelector("[data-tabToggle-content=" + activeTab.dataset.tabtoggleTarget)

+            activeTabContent.classList.add("active");

+

+            window.scrollTo({

+                top: activeTabContent.getBoundingClientRect().top + window.scrollY - document.querySelector(".header").offsetHeight,

+                behavior: 'smooth'

+            });

+		}

+	});

+});

diff --git a/public/assets/js/_dependency-control/plugins/tooltip.js b/public/assets/js/_dependency-control/plugins/tooltip.js
new file mode 100644
index 0000000..2326caf
--- /dev/null
+++ b/public/assets/js/_dependency-control/plugins/tooltip.js
@@ -0,0 +1,45 @@
+$$plugins.define('tooltip', ['throttle'], function (element, options, throttle) {

+    var openBtn = element.querySelector('.tooltip__btn'),

+        tooltipMain = element.querySelector('.tooltip__main');

+

+    openBtn.addEventListener('click', (event) => {

+        event.preventDefault();

+        if (element.classList.contains('tooltip--open')) {

+            element.classList.remove('tooltip--open');

+        } else {

+            $('.tooltip').not(element).removeClass('tooltip--open');

+            element.classList.add('tooltip--open');

+        }

+    });

+

+    document.addEventListener('click', function (event) {

+        if (element !== event.target && !element.contains(event.target) && element.classList.contains('tooltip--open')) {

+            element.classList.remove('tooltip--open');

+        }

+    });

+

+    function tooltipPosition() {

+        element.classList.remove('tooltip--bottom');

+        element.classList.remove('tooltip--right');

+        element.classList.remove('tooltip--left');

+

+        if (element.getBoundingClientRect().top < window.innerHeight / 2) {

+            element.classList.add('tooltip--bottom');

+        } else {

+            element.classList.remove('tooltip--bottom');

+        }

+

+        if (element.getBoundingClientRect().left < tooltipMain.offsetWidth / 2) {

+            element.classList.add('tooltip--right');

+        }

+

+        if (document.body.clientWidth - element.getBoundingClientRect().left < tooltipMain.offsetWidth / 2) {

+            element.classList.add('tooltip--left');

+        }

+    }

+

+    tooltipPosition();

+

+    window.addEventListener('scroll', throttle(tooltipPosition, 50));

+    window.addEventListener('resize', throttle(tooltipPosition, 200));

+});