From 2b6970d33afd75be5bfef951dc3691d492004d43 Mon Sep 17 00:00:00 2001 From: George Halkiadakis Date: Tue, 18 Apr 2023 01:11:37 +0300 Subject: admin back-office environment (skeleton); admin categories --- .../js/_dependency-control/plugins/accordion.js | 43 ++++++++++ .../js/_dependency-control/plugins/breadcrumb.js | 9 ++ .../assets/js/_dependency-control/plugins/copy.js | 25 ++++++ .../js/_dependency-control/plugins/expand.js | 38 +++++++++ .../js/_dependency-control/plugins/expandText.js | 5 ++ .../js/_dependency-control/plugins/fileinput.js | 20 +++++ .../js/_dependency-control/plugins/gallery.js | 51 ++++++++++++ .../js/_dependency-control/plugins/infoPopup.js | 8 ++ .../js/_dependency-control/plugins/initialize.js | 11 +++ .../js/_dependency-control/plugins/intersecting.js | 18 ++++ .../assets/js/_dependency-control/plugins/menu.js | 97 ++++++++++++++++++++++ .../_dependency-control/plugins/scrollShadowHor.js | 42 ++++++++++ .../plugins/scrollShadowVert.js | 57 +++++++++++++ .../assets/js/_dependency-control/plugins/tabs.js | 28 +++++++ .../js/_dependency-control/plugins/tabtoggle.js | 27 ++++++ .../js/_dependency-control/plugins/tooltip.js | 45 ++++++++++ 16 files changed, 524 insertions(+) create mode 100644 public/assets/js/_dependency-control/plugins/accordion.js create mode 100644 public/assets/js/_dependency-control/plugins/breadcrumb.js create mode 100644 public/assets/js/_dependency-control/plugins/copy.js create mode 100644 public/assets/js/_dependency-control/plugins/expand.js create mode 100644 public/assets/js/_dependency-control/plugins/expandText.js create mode 100644 public/assets/js/_dependency-control/plugins/fileinput.js create mode 100644 public/assets/js/_dependency-control/plugins/gallery.js create mode 100644 public/assets/js/_dependency-control/plugins/infoPopup.js create mode 100644 public/assets/js/_dependency-control/plugins/initialize.js create mode 100644 public/assets/js/_dependency-control/plugins/intersecting.js create mode 100644 public/assets/js/_dependency-control/plugins/menu.js create mode 100644 public/assets/js/_dependency-control/plugins/scrollShadowHor.js create mode 100644 public/assets/js/_dependency-control/plugins/scrollShadowVert.js create mode 100644 public/assets/js/_dependency-control/plugins/tabs.js create mode 100644 public/assets/js/_dependency-control/plugins/tabtoggle.js create mode 100644 public/assets/js/_dependency-control/plugins/tooltip.js (limited to 'public/assets/js/_dependency-control/plugins') 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)); +}); -- cgit v1.2.3