Initial Commit

public/front/src/js/aos.js

@@ -0,0 +1,18 @@
+//
+// aos.js
+// Theme module
+//
+
+import AOS from 'aos';
+
+const options = {
+  duration: 700,
+  easing: 'ease-out-quad',
+  once: true,
+  startEvent: 'load',
+};
+
+AOS.init(options);
+
+// Make available globally
+window.AOS = AOS;

public/front/src/js/bigpicture.js

@@ -0,0 +1,30 @@
+//
+// bigpicture.js
+// Theme module
+
+import BigPicture from 'bigpicture';
+
+const toggles = document.querySelectorAll('[data-bigpicture]');
+
+toggles.forEach(function (toggle) {
+  toggle.addEventListener('click', function (e) {
+    e.preventDefault();
+
+    const elementOptions = JSON.parse(toggle.dataset.bigpicture);
+
+    const defaultOptions = {
+      el: toggle,
+      noLoader: true,
+    };
+
+    const options = {
+      ...defaultOptions,
+      ...elementOptions,
+    };
+
+    BigPicture(options);
+  });
+});
+
+// Make available globally
+window.BigPicture = BigPicture;

public/front/src/js/bootstrap.js

@@ -0,0 +1,28 @@
+import {
+  Alert,
+  Button,
+  Carousel,
+  Collapse,
+  Dropdown,
+  Modal,
+  Offcanvas,
+  Popover,
+  ScrollSpy,
+  Tab,
+  Toast,
+  Tooltip,
+} from 'bootstrap';
+
+// Make available globally
+window.Alert = Alert;
+window.Button = Button;
+window.Carousel = Carousel;
+window.Collapse = Collapse;
+window.Dropdown = Dropdown;
+window.Modal = Modal;
+window.Offcanvas = Offcanvas;
+window.Popover = Popover;
+window.ScrollSpy = ScrollSpy;
+window.Tab = Tab;
+window.Toast = Toast;
+window.Tooltip = Tooltip;

public/front/src/js/choices.js

@@ -0,0 +1,36 @@
+//
+// choices.js
+// Theme module
+//
+
+import Choices from 'choices.js';
+
+const toggles = document.querySelectorAll('[data-choices]');
+
+toggles.forEach((toggle) => {
+  const elementOptions = toggle.dataset.choices ? JSON.parse(toggle.dataset.choices) : {};
+
+  const defaultOptions = {
+    shouldSort: false,
+    searchEnabled: false,
+    classNames: {
+      containerInner: toggle.className,
+      input: 'form-control',
+      inputCloned: 'form-control-xs',
+      listDropdown: 'dropdown-menu',
+      itemChoice: 'dropdown-item',
+      activeState: 'show',
+      selectedState: 'active',
+    },
+  };
+
+  const options = {
+    ...elementOptions,
+    ...defaultOptions,
+  };
+
+  new Choices(toggle, options);
+});
+
+// Make available globally
+window.Choices = Choices;

public/front/src/js/countup.js

@@ -0,0 +1,37 @@
+//
+// countup.js
+// Theme module
+//
+
+import { CountUp } from 'countup.js';
+
+const toggles = document.querySelectorAll('[data-countup]');
+
+function init(toggle) {
+  const endVal = toggle.dataset.to ? +toggle.dataset.to : null;
+  const options = toggle.dataset.countup ? JSON.parse(toggle.dataset.countup) : {};
+
+  const countUp = new CountUp(toggle, endVal, options);
+
+  countUp.start();
+}
+
+toggles.forEach((toggle) => {
+  if (toggle.getAttribute('data-aos-id') !== 'countup:in') {
+    init(toggle);
+  }
+});
+
+document.addEventListener('aos:in:countup:in', function (e) {
+  const counts =
+    e.detail instanceof Element
+      ? [e.detail]
+      : document.querySelectorAll('.aos-animate[data-aos-id="countup:in"]:not(.counted)');
+
+  counts.forEach((count) => {
+    init(count);
+  });
+});
+
+// Make available globally
+window.CountUp = CountUp;

public/front/src/js/dropzone.js

@@ -0,0 +1,48 @@
+//
+// dropzone.js
+// Theme module
+//
+
+import Dropzone from 'dropzone';
+
+Dropzone.autoDiscover = false;
+Dropzone.thumbnailWidth = null;
+Dropzone.thumbnailHeight = null;
+
+const toggles = document.querySelectorAll('[data-dropzone]');
+
+toggles.forEach((toggle) => {
+  let currentFile = undefined;
+
+  const elementOptions = toggle.dataset.dropzone ? JSON.parse(toggle.dataset.dropzone) : {};
+
+  const defaultOptions = {
+    previewsContainer: toggle.querySelector('.dz-preview'),
+    previewTemplate: toggle.querySelector('.dz-preview').innerHTML,
+    init: function () {
+      this.on('addedfile', function (file) {
+        const maxFiles = elementOptions.maxFiles;
+
+        if (maxFiles == 1 && currentFile) {
+          this.removeFile(currentFile);
+        }
+
+        currentFile = file;
+      });
+    },
+  };
+
+  const options = {
+    ...elementOptions,
+    ...defaultOptions,
+  };
+
+  // Clear preview
+  toggle.querySelector('.dz-preview').innerHTML = '';
+
+  // Init dropzone
+  new Dropzone(toggle, options);
+});
+
+// Make available globally
+window.Dropzone = Dropzone;

public/front/src/js/flickity.js

@@ -0,0 +1,4 @@
+import Flickity from 'flickity';
+
+// Make available globally
+window.Flickity = Flickity;

public/front/src/js/highlight.js

@@ -0,0 +1,21 @@
+//
+// highlight.js
+// Theme module
+//
+
+import hljs from 'highlight.js/lib/core';
+import javascript from 'highlight.js/lib/languages/javascript';
+import xml from 'highlight.js/lib/languages/xml';
+
+const highlights = document.querySelectorAll('.highlight');
+
+// Only register the languages we need to reduce the download footprint
+hljs.registerLanguage('xml', xml);
+hljs.registerLanguage('javascript', javascript);
+
+highlights.forEach((highlight) => {
+  hljs.highlightBlock(highlight);
+});
+
+// Make available globally
+window.hljs = hljs;

public/front/src/js/isotope.js

@@ -0,0 +1,36 @@
+//
+// isotope.js
+// Theme module
+//
+
+import imagesLoaded from 'imagesloaded';
+import Isotope from 'isotope-layout';
+
+const toggles = document.querySelectorAll('[data-isotope]');
+const filters = document.querySelectorAll('[data-filter]');
+
+toggles.forEach(function (toggle) {
+  imagesLoaded(toggle, function () {
+    const options = JSON.parse(toggle.dataset.isotope);
+
+    new Isotope(toggle, options);
+  });
+});
+
+filters.forEach(function (filter) {
+  filter.addEventListener('click', function (e) {
+    e.preventDefault();
+
+    const cat = filter.dataset.filter;
+    const target = filter.dataset.bsTarget;
+    const instance = Isotope.data(target);
+
+    instance.arrange({
+      filter: cat,
+    });
+  });
+});
+
+// Make available globally
+window.Isotope = Isotope;
+window.imagesLoaded = imagesLoaded;

public/front/src/js/jarallax.js

@@ -0,0 +1,22 @@
+//
+// jarallax.js
+// Theme module
+//
+
+import { jarallax, jarallaxElement, jarallaxVideo } from 'jarallax';
+
+const toggles = document.querySelectorAll('[data-jarallax], [data-jarallax-element]');
+
+// Add Video extension
+jarallaxVideo();
+
+// Add Element extension
+jarallaxElement();
+
+// Init Jarallax
+jarallax(toggles);
+
+// Make available globally
+window.jarallax = jarallax;
+window.jarallaxElement = jarallaxElement;
+window.jarallaxVideo = jarallaxVideo;

public/front/src/js/map.js

@@ -0,0 +1,29 @@
+//
+// map.js
+// Theme module
+//
+
+const maps = document.querySelectorAll('[data-map]');
+const accessToken = 'pk.eyJ1IjoiZ29vZHRoZW1lcyIsImEiOiJjanU5eHR4N2cybDU5NGVwOHZwNGprb3E0In0.msdw9q16dh8v4azJXUdiXg';
+
+maps.forEach((map) => {
+  const elementOptions = map.dataset.map ? JSON.parse(map.dataset.map) : {};
+
+  const defaultOptions = {
+    container: map,
+    style: 'mapbox://styles/mapbox/light-v9',
+    scrollZoom: false,
+    interactive: false,
+  };
+
+  const options = {
+    ...defaultOptions,
+    ...elementOptions,
+  };
+
+  // Get access token
+  mapboxgl.accessToken = accessToken;
+
+  // Init map
+  new mapboxgl.Map(options);
+});

public/front/src/js/modal.js

@@ -0,0 +1,19 @@
+//
+// modal.js
+// Theme module
+//
+
+const modals = document.querySelectorAll('.modal');
+
+function overflowHide() {
+  document.documentElement.style.overflowX = 'visible';
+}
+
+function overflowShow() {
+  document.documentElement.style.overflowX = '';
+}
+
+modals.forEach((modal) => {
+  modal.addEventListener('show.bs.modal', overflowHide);
+  modal.addEventListener('hidden.bs.modal', overflowShow);
+});

public/front/src/js/navbar-dropdown.js

@@ -0,0 +1,73 @@
+//
+// navbar-dropdown.js
+// Theme module
+//
+
+// Selectors
+const drops = document.querySelectorAll('.navbar-nav .dropdown, .navbar-nav .dropend');
+
+// Events
+const showEvents = ['mouseenter'];
+const hideEvents = ['mouseleave', 'click'];
+
+// Transition
+const transitionDuration = 200;
+
+// Breakpoint
+const desktopSize = 992;
+
+// Show drop
+function showDrop(menu) {
+  if (window.innerWidth < desktopSize) {
+    return;
+  }
+
+  menu.classList.add('showing');
+
+  setTimeout(function() {
+    menu.classList.remove('showing');
+    menu.classList.add('show');
+  }, 1);
+}
+
+// Hide drop
+function hideDrop(e, menu) {
+  setTimeout(function() {
+    if (window.innerWidth < desktopSize) {
+      return;
+    }
+
+    if (!menu.classList.contains('show')) {
+      return;
+    }
+
+    if (e.type === 'click' && e.target.closest('.dropdown-menu form')) {
+      return;
+    }
+
+    menu.classList.add('showing');
+    menu.classList.remove('show');
+
+    setTimeout(function() {
+      menu.classList.remove('showing');
+    }, transitionDuration);
+  }, 2);
+}
+
+drops.forEach(function(dropdown) {
+  const menu = dropdown.querySelector('.dropdown-menu');
+
+  // Show drop
+  showEvents.forEach(function(event) {
+    dropdown.addEventListener(event, function() {
+      showDrop(menu);
+    });
+  });
+
+  // Hide drop
+  hideEvents.forEach(function(event) {
+    dropdown.addEventListener(event, function(e) {
+      hideDrop(e, menu);
+    });
+  });
+});

public/front/src/js/navbar.js

@@ -0,0 +1,72 @@
+//
+// navbar.js
+// Theme module
+//
+
+const navbarTogglable = document.querySelectorAll('.navbar-togglable');
+const navbarCollapse = document.querySelectorAll('.navbar-collapse');
+const windowEvents = ['load', 'scroll'];
+
+let isLight = false;
+
+function makeNavbarDark(navbar) {
+  navbar.classList.remove('navbar-light');
+  navbar.classList.remove('bg-white');
+  navbar.classList.add('navbar-dark');
+
+  isLight = false;
+}
+
+function makeNavbarLight(navbar) {
+  navbar.classList.remove('navbar-dark');
+  navbar.classList.add('navbar-light');
+  navbar.classList.add('bg-white');
+
+  isLight = true;
+}
+
+function toggleNavbar(navbar) {
+  const scrollTop = window.pageYOffset;
+
+  if (scrollTop && !isLight) {
+    makeNavbarLight(navbar);
+  }
+
+  if (!scrollTop) {
+    makeNavbarDark(navbar);
+  }
+}
+
+function overflowHide() {
+  const scrollbarWidth = getScrollbarWidth();
+
+  document.documentElement.style.overflow = 'hidden';
+  document.body.style.paddingRight = scrollbarWidth + 'px';
+}
+
+function overflowShow() {
+  document.documentElement.style.overflow = '';
+  document.body.style.paddingRight = '';
+}
+
+function getScrollbarWidth() {
+  return window.innerWidth - document.documentElement.clientWidth;
+}
+
+navbarTogglable.forEach(function(navbar) {
+  windowEvents.forEach(function(event) {
+    window.addEventListener(event, function() {
+      toggleNavbar(navbar);
+    });
+  });
+});
+
+navbarCollapse.forEach(function(collapse) {
+  collapse.addEventListener('show.bs.collapse', function() {
+    overflowHide();
+  });
+
+  collapse.addEventListener('hidden.bs.collapse', function() {
+    overflowShow();
+  });
+});

public/front/src/js/popover.js

@@ -0,0 +1,12 @@
+//
+// popover.js
+// Theme module
+//
+
+import { Popover } from 'bootstrap';
+
+const popovers = document.querySelectorAll('[data-bs-toggle="popover"]');
+
+popovers.forEach(popover => {
+  new Popover(popover);
+});

public/front/src/js/pricing.js

@@ -0,0 +1,32 @@
+//
+// pricing.js
+// Theme module
+//
+
+import { CountUp } from 'countup.js';
+
+const toggles = document.querySelectorAll('[data-toggle="price"]');
+const DURATION = 1;
+
+toggles.forEach(toggle => {
+  toggle.addEventListener('change', (e) => {
+    const input = e.target;
+    const isChecked = input.checked;
+
+    const target = input.dataset.target;
+    const targets = document.querySelectorAll(target);
+
+    targets.forEach(target => {
+      const annual = target.dataset.annual;
+      const monthly = target.dataset.monthly;
+      const options = target.dataset.options ? JSON.parse(target.dataset.options) : {};
+
+      options.startVal = isChecked ? annual : monthly;
+      options.duration = options.duration ? options.duration : DURATION;
+
+      const countUp = isChecked ? new CountUp(target, monthly, options) : new CountUp(target, annual, options);
+
+      countUp.start();
+    });
+  });
+});

public/front/src/js/quill.js

@@ -0,0 +1,40 @@
+//
+// quill.js
+// Theme module
+//
+
+import Quill from 'quill';
+
+const toggles = document.querySelectorAll('[data-quill]');
+
+toggles.forEach((toggle) => {
+  const elementOptions = toggle.dataset.quill ? JSON.parse(toggle.dataset.quill) : {};
+
+  const defaultOptions = {
+    modules: {
+      toolbar: [
+        ['bold', 'italic'],
+        ['link', 'blockquote', 'code', 'image'],
+        [
+          {
+            list: 'ordered',
+          },
+          {
+            list: 'bullet',
+          },
+        ],
+      ],
+    },
+    theme: 'snow',
+  };
+
+  const options = {
+    ...defaultOptions,
+    ...elementOptions,
+  };
+
+  new Quill(toggle, options);
+});
+
+// Make available globally
+window.Quill = Quill;

public/front/src/js/smooth-scroll.js

@@ -0,0 +1,24 @@
+//
+// smooth-scroll.js
+// Theme module
+//
+
+import SmoothScroll from 'smooth-scroll';
+
+const toggle = '[data-scroll]';
+const header = '.navbar.fixed-top';
+const offset = 24;
+
+const options = {
+  header: header,
+  offset: function (anchor, toggle) {
+    return toggle.dataset.scroll && JSON.parse(toggle.dataset.scroll).offset !== undefined
+      ? JSON.parse(toggle.dataset.scroll).offset
+      : offset;
+  },
+};
+
+new SmoothScroll(toggle, options);
+
+// Make available globally
+window.SmoothScroll = SmoothScroll;

public/front/src/js/theme.js

@@ -0,0 +1,31 @@
+// Vendor
+import 'bootstrap';
+import 'flickity';
+import 'flickity-imagesloaded';
+import 'flickity-as-nav-for';
+import 'flickity-fade';
+import 'jarallax';
+
+// Theme
+import './aos';
+import './bigpicture';
+import './bootstrap';
+import './choices';
+import './countup';
+import './dropzone';
+import './flickity';
+import './highlight';
+import './isotope';
+import './jarallax';
+import './map';
+import './modal';
+import './navbar-dropdown';
+import './navbar';
+import './popover';
+import './pricing';
+import './quill';
+import './smooth-scroll';
+import './tooltip';
+import './typed';
+// User
+import './user.js';

public/front/src/js/tooltip.js

@@ -0,0 +1,12 @@
+//
+// tooltip.js
+// Theme module
+//
+
+import { Tooltip } from 'bootstrap';
+
+const tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]');
+
+tooltips.forEach((tooltip) => {
+  new Tooltip(tooltip);
+});

public/front/src/js/typed.js

@@ -0,0 +1,29 @@
+//
+// typed.js
+// Theme module
+//
+
+import Typed from 'typed.js';
+
+const toggles = document.querySelectorAll('[data-typed]');
+
+toggles.forEach((toggle) => {
+  const elementOptions = toggle.dataset.typed ? JSON.parse(toggle.dataset.typed) : {};
+
+  const defaultOptions = {
+    typeSpeed: 40,
+    backSpeed: 40,
+    backDelay: 1000,
+    loop: true,
+  };
+
+  const options = {
+    ...defaultOptions,
+    ...elementOptions,
+  };
+
+  new Typed(toggle, options);
+});
+
+// Make available globally
+window.Typed = Typed;

public/front/src/js/user.js

@@ -0,0 +1,4 @@
+// 
+// user.js
+// Use this to write your custom JS
+//