Recherche des tweets de réponse avec l'API Tweeter
This commit is contained in:
hugol
1217
resources/js/dashmix/modules/helpers.js
Normal file
1217
resources/js/dashmix/modules/helpers.js
Normal file
File diff suppressed because it is too large
Load Diff
939
resources/js/dashmix/modules/template.js
Normal file
939
resources/js/dashmix/modules/template.js
Normal file
@@ -0,0 +1,939 @@
|
||||
/*
|
||||
* Document : template.js
|
||||
* Author : pixelcave
|
||||
* Description: UI Framework custom functionality
|
||||
*
|
||||
*/
|
||||
|
||||
// Imports
|
||||
import * as bootstrap from "bootstrap";
|
||||
import SimpleBar from "simplebar";
|
||||
import Helpers from "./helpers.js";
|
||||
|
||||
// Assignments
|
||||
window.bootstrap = bootstrap;
|
||||
window.SimpleBar = SimpleBar;
|
||||
|
||||
// Template
|
||||
export default class Template {
|
||||
/*
|
||||
* Auto called when creating a new instance
|
||||
*
|
||||
*/
|
||||
constructor(options) {
|
||||
this.onLoad(() => this._uiInit(options));
|
||||
}
|
||||
|
||||
/*
|
||||
* Init all vital functionality
|
||||
*
|
||||
*/
|
||||
_uiInit(options) {
|
||||
// Layout variables
|
||||
this._lHtml = document.documentElement;
|
||||
this._lBody = document.body;
|
||||
this._lpageLoader = document.getElementById("page-loader");
|
||||
this._lPage = document.getElementById("page-container");
|
||||
this._lSidebar = document.getElementById("sidebar");
|
||||
this._lSidebarScrollCon =
|
||||
this._lSidebar && this._lSidebar.querySelector(".js-sidebar-scroll");
|
||||
this._lSideOverlay = document.getElementById("side-overlay");
|
||||
this._lResize = false;
|
||||
this._lHeader = document.getElementById("page-header");
|
||||
this._lHeaderSearch = document.getElementById("page-header-search");
|
||||
this._lHeaderSearchInput = document.getElementById(
|
||||
"page-header-search-input"
|
||||
);
|
||||
this._lHeaderLoader = document.getElementById("page-header-loader");
|
||||
this._lMain = document.getElementById("main-container");
|
||||
this._lFooter = document.getElementById("page-footer");
|
||||
|
||||
// Helper variables
|
||||
this._darkMode = options?.darkMode || "system";
|
||||
this._lSidebarScroll = false;
|
||||
this._lSideOverlayScroll = false;
|
||||
|
||||
// Base UI Init
|
||||
this._uiHandleTheme();
|
||||
this._uiHandleDarkMode();
|
||||
this._uiHandleSidebars();
|
||||
this._uiHandleHeader();
|
||||
this._uiHandleNav();
|
||||
|
||||
// API Init
|
||||
this._uiApiLayout();
|
||||
this._uiApiBlocks();
|
||||
|
||||
// Init the following helpers by default
|
||||
this.helpers([
|
||||
"bs-tooltip",
|
||||
"bs-popover",
|
||||
"dm-toggle-class",
|
||||
"dm-year-copy",
|
||||
"dm-ripple",
|
||||
]);
|
||||
|
||||
// Page Loader (hide it)
|
||||
this._uiHandlePageLoader();
|
||||
}
|
||||
|
||||
/*
|
||||
* Handles sidebar and side overlay scrolling functionality/styles
|
||||
*
|
||||
*/
|
||||
_uiHandleSidebars(mode = "init") {
|
||||
let self = this;
|
||||
|
||||
if (self._lSidebar || self._lSideOverlay) {
|
||||
if (mode === "init") {
|
||||
// Add 'side-trans-enabled' class to #page-container (enables sidebar and side overlay transition on open/close)
|
||||
// Fixes IE10, IE11 and Edge bug in which animation was executed on each page load
|
||||
self._lPage.classList.add("side-trans-enabled");
|
||||
|
||||
// Remove side transitions on window resizing
|
||||
window.addEventListener("resize", () => {
|
||||
clearTimeout(self._lResize);
|
||||
|
||||
self._lPage.classList.remove("side-trans-enabled");
|
||||
|
||||
self._lResize = setTimeout(() => {
|
||||
self._lPage.classList.add("side-trans-enabled");
|
||||
}, 500);
|
||||
});
|
||||
|
||||
// Init custom scrolling
|
||||
this._uiHandleSidebars("custom-scroll");
|
||||
} else if ((mode = "custom-scroll")) {
|
||||
// If .side-scroll is added to #page-container, enable custom scrolling
|
||||
if (self._lPage.classList.contains("side-scroll")) {
|
||||
// Init custom scrolling on Sidebar
|
||||
if (self._lSidebar && !self._lSidebarScroll) {
|
||||
self._lSidebarScroll = new SimpleBar(self._lSidebarScrollCon);
|
||||
}
|
||||
|
||||
// Init custom scrolling on Side Overlay
|
||||
if (self._lSideOverlay && !self._lSideOverlayScroll) {
|
||||
self._lSideOverlayScroll = new SimpleBar(self._lSideOverlay);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Handles header related classes
|
||||
*
|
||||
*/
|
||||
_uiHandleHeader() {
|
||||
let self = this;
|
||||
|
||||
// If the header is fixed and has the glass style, add the related class on scrolling to add a background color to the header
|
||||
if (
|
||||
self._lPage.classList.contains("page-header-glass") &&
|
||||
self._lPage.classList.contains("page-header-fixed")
|
||||
) {
|
||||
window.addEventListener("scroll", (e) => {
|
||||
if (window.scrollY > 60) {
|
||||
self._lPage.classList.add("page-header-scroll");
|
||||
} else {
|
||||
self._lPage.classList.remove("page-header-scroll");
|
||||
}
|
||||
});
|
||||
|
||||
window.dispatchEvent(new CustomEvent("scroll"));
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Toggle Submenu functionality
|
||||
*
|
||||
*/
|
||||
_uiHandleNav() {
|
||||
let links = document.querySelectorAll('[data-toggle="submenu"]');
|
||||
|
||||
// When a submenu link is clicked
|
||||
if (links) {
|
||||
links.forEach((link) => {
|
||||
link.addEventListener("click", (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
// Get main navigation
|
||||
let mainNav = link.closest(".nav-main");
|
||||
|
||||
// Check if we are in horizontal navigation, large screen and hover is enabled
|
||||
if (
|
||||
!(
|
||||
(window.innerWidth ||
|
||||
document.documentElement.clientWidth ||
|
||||
document.body.clientWidth) > 991 &&
|
||||
mainNav.classList.contains("nav-main-horizontal") &&
|
||||
mainNav.classList.contains("nav-main-hover")
|
||||
)
|
||||
) {
|
||||
// Get link's parent
|
||||
let parentLi = link.closest("li");
|
||||
|
||||
if (parentLi.classList.contains("open")) {
|
||||
// If submenu is open, close it..
|
||||
parentLi.classList.remove("open");
|
||||
|
||||
link.setAttribute("aria-expanded", "false");
|
||||
} else {
|
||||
// .. else if submenu is closed, close all other (same level) submenus first before open it
|
||||
Array.from(link.closest("ul").children).forEach((el) => {
|
||||
el.classList.remove("open");
|
||||
});
|
||||
|
||||
parentLi.classList.add("open");
|
||||
|
||||
link.setAttribute("aria-expanded", "true");
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Page loading screen functionality
|
||||
*
|
||||
*/
|
||||
_uiHandlePageLoader(mode = "hide", colorClass) {
|
||||
if (mode === "show") {
|
||||
if (this._lpageLoader) {
|
||||
if (colorClass) {
|
||||
this._lpageLoader.className = "";
|
||||
this._lpageLoader.classList.add(colorClass);
|
||||
}
|
||||
|
||||
this._lpageLoader.classList.add("show");
|
||||
} else {
|
||||
let pageLoader = document.createElement("div");
|
||||
|
||||
pageLoader.id = "page-loader";
|
||||
|
||||
if (colorClass) {
|
||||
pageLoader.classList.add(colorClass);
|
||||
}
|
||||
|
||||
pageLoader.classList.add("show");
|
||||
|
||||
this._lPage.insertBefore(pageLoader, this._lPage.firstChild);
|
||||
|
||||
this._lpageLoader = document.getElementById("page-loader");
|
||||
}
|
||||
} else if (mode === "hide") {
|
||||
if (this._lpageLoader) {
|
||||
this._lpageLoader.classList.remove("show");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Handles Dark Mode functionality
|
||||
*
|
||||
*/
|
||||
_uiHandleDarkMode(mode) {
|
||||
let self = this;
|
||||
let rememberDarkMode = !self._lHtml.classList.contains(
|
||||
"dark-custom-defined"
|
||||
);
|
||||
|
||||
// Get dark mode toggle buttons
|
||||
let btnLight = document.querySelector('[data-dark-mode="off"]');
|
||||
let btnDark = document.querySelector('[data-dark-mode="on"]');
|
||||
let btnSystem = document.querySelector('[data-dark-mode="system"]');
|
||||
|
||||
// Get dark mode icon
|
||||
let darkModeIcon = document.querySelector("[data-dark-mode-icon]");
|
||||
|
||||
// Set Dark Mode preference
|
||||
if (["on", "off", "system"].includes(mode)) {
|
||||
if (mode === "on") {
|
||||
self._lHtml.classList.add("dark");
|
||||
self._darkMode = "on";
|
||||
|
||||
// Save dark mode preference
|
||||
if (rememberDarkMode) {
|
||||
localStorage.setItem("dashmixDarkMode", "on");
|
||||
}
|
||||
|
||||
// Set active buttons
|
||||
btnLight?.classList.remove("active");
|
||||
btnDark?.classList.add("active");
|
||||
btnSystem?.classList.remove("active");
|
||||
|
||||
// Set dark mode icon
|
||||
if (darkModeIcon) {
|
||||
darkModeIcon.className = "fa fa-fw fa-moon";
|
||||
}
|
||||
} else if (mode === "off") {
|
||||
self._lHtml.classList.remove("dark");
|
||||
self._darkMode = "off";
|
||||
|
||||
// Save dark mode preference
|
||||
if (rememberDarkMode) {
|
||||
localStorage.setItem("dashmixDarkMode", "off");
|
||||
}
|
||||
|
||||
// Set active buttons
|
||||
btnLight?.classList.add("active");
|
||||
btnDark?.classList.remove("active");
|
||||
btnSystem?.classList.remove("active");
|
||||
|
||||
// Set dark mode icon
|
||||
if (darkModeIcon) {
|
||||
darkModeIcon.className = "far fa-fw fa-moon";
|
||||
}
|
||||
} else if (mode === "system") {
|
||||
if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
|
||||
self._lHtml.classList.add("dark");
|
||||
|
||||
// Set dark mode icon
|
||||
if (darkModeIcon) {
|
||||
darkModeIcon.className = "fa fa-fw fa-moon";
|
||||
}
|
||||
} else {
|
||||
self._lHtml.classList.remove("dark");
|
||||
|
||||
// Set dark mode icon
|
||||
if (darkModeIcon) {
|
||||
darkModeIcon.className = "far fa-fw fa-moon";
|
||||
}
|
||||
}
|
||||
|
||||
self._darkMode = "system";
|
||||
|
||||
// Save dark mode preference
|
||||
if (rememberDarkMode) {
|
||||
localStorage.setItem("dashmixDarkMode", "system");
|
||||
}
|
||||
|
||||
// Set active buttons
|
||||
btnLight?.classList.remove("active");
|
||||
btnDark?.classList.remove("active");
|
||||
btnSystem?.classList.add("active");
|
||||
}
|
||||
} else {
|
||||
// We are in init state
|
||||
let darkMode = "";
|
||||
|
||||
// If the preference is saved before, else use the default
|
||||
if (rememberDarkMode) {
|
||||
darkMode = localStorage.getItem("dashmixDarkMode") || self._darkMode;
|
||||
} else {
|
||||
localStorage.removeItem("dashmixDarkMode");
|
||||
darkMode = self._darkMode;
|
||||
}
|
||||
|
||||
// Set Dark Mode Preference
|
||||
if (darkMode === "on") {
|
||||
self._uiHandleDarkMode("on");
|
||||
} else if (darkMode === "off") {
|
||||
self._uiHandleDarkMode("off");
|
||||
} else if (darkMode === "system") {
|
||||
self._uiHandleDarkMode("system");
|
||||
}
|
||||
|
||||
// If dark mode preference is changed on system, update it accordingly if dark mode is set to "system"
|
||||
window
|
||||
.matchMedia("(prefers-color-scheme: dark)")
|
||||
.addEventListener("change", () => {
|
||||
if (self._darkMode === "system") {
|
||||
self._uiHandleDarkMode("system");
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Set active color theme functionality
|
||||
*
|
||||
*/
|
||||
_uiHandleTheme() {
|
||||
let self = this;
|
||||
let themeEl = document.getElementById("css-theme");
|
||||
let rememberTheme = this._lHtml.classList.contains("remember-theme");
|
||||
|
||||
// If remember theme is enabled
|
||||
if (rememberTheme) {
|
||||
let themeName = localStorage.getItem("dashmixColorTheme") || false;
|
||||
|
||||
// Update color theme
|
||||
if (themeName) {
|
||||
self._uiUpdateTheme(themeEl, themeName);
|
||||
}
|
||||
|
||||
// Update theme element
|
||||
themeEl = document.getElementById("css-theme");
|
||||
} else {
|
||||
localStorage.removeItem("dashmixColorTheme");
|
||||
}
|
||||
|
||||
// Set the active color theme link as active
|
||||
document
|
||||
.querySelectorAll(
|
||||
'[data-toggle="theme"][data-theme="' +
|
||||
(themeEl ? themeEl.getAttribute("href") : "default") +
|
||||
'"]'
|
||||
)
|
||||
.forEach((link) => {
|
||||
link.classList.add("active");
|
||||
});
|
||||
|
||||
// When a color theme link is clicked
|
||||
document.querySelectorAll('[data-toggle="theme"]').forEach((el) => {
|
||||
el.addEventListener("click", (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
// Get element's data
|
||||
let themeName = el.dataset.theme;
|
||||
|
||||
// Set this color theme link as active
|
||||
document.querySelectorAll('[data-toggle="theme"]').forEach((link) => {
|
||||
link.classList.remove("active");
|
||||
});
|
||||
|
||||
document
|
||||
.querySelector(
|
||||
'[data-toggle="theme"][data-theme="' + themeName + '"]'
|
||||
)
|
||||
.classList.add("active");
|
||||
|
||||
// Update color theme
|
||||
self._uiUpdateTheme(themeEl, themeName);
|
||||
|
||||
// Update theme element
|
||||
themeEl = document.getElementById("css-theme");
|
||||
|
||||
// If remember theme is enabled, save the new active color theme
|
||||
if (rememberTheme) {
|
||||
localStorage.setItem("dashmixColorTheme", themeName);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
* Updates the color theme
|
||||
*
|
||||
*/
|
||||
_uiUpdateTheme(themeEl, themeName) {
|
||||
if (themeName === "default") {
|
||||
if (themeEl) {
|
||||
themeEl.parentNode.removeChild(themeEl);
|
||||
}
|
||||
} else {
|
||||
if (themeEl) {
|
||||
themeEl.setAttribute("href", themeName);
|
||||
} else {
|
||||
let themeLink = document.createElement("link");
|
||||
|
||||
themeLink.id = "css-theme";
|
||||
themeLink.setAttribute("rel", "stylesheet");
|
||||
themeLink.setAttribute("href", themeName);
|
||||
|
||||
document
|
||||
.getElementById("css-main")
|
||||
.insertAdjacentElement("afterend", themeLink);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Layout API
|
||||
*
|
||||
*/
|
||||
_uiApiLayout(mode = "init") {
|
||||
let self = this;
|
||||
|
||||
// API with object literals
|
||||
let layoutAPI = {
|
||||
init: () => {
|
||||
let buttons = document.querySelectorAll('[data-toggle="layout"]');
|
||||
|
||||
// Call layout API on button click
|
||||
if (buttons) {
|
||||
buttons.forEach((btn) => {
|
||||
btn.addEventListener("click", (e) => {
|
||||
self._uiApiLayout(btn.dataset.action);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Prepend Page Overlay div if enabled (used when Side Overlay opens)
|
||||
if (self._lPage.classList.contains("enable-page-overlay")) {
|
||||
let pageOverlay = document.createElement("div");
|
||||
pageOverlay.id = "page-overlay";
|
||||
|
||||
self._lPage.insertBefore(pageOverlay, self._lPage.firstChild);
|
||||
|
||||
document
|
||||
.getElementById("page-overlay")
|
||||
.addEventListener("click", (e) => {
|
||||
self._uiApiLayout("side_overlay_close");
|
||||
});
|
||||
}
|
||||
},
|
||||
sidebar_pos_toggle: () => {
|
||||
self._lPage.classList.toggle("sidebar-r");
|
||||
},
|
||||
sidebar_pos_left: () => {
|
||||
self._lPage.classList.remove("sidebar-r");
|
||||
},
|
||||
sidebar_pos_right: () => {
|
||||
self._lPage.classList.add("sidebar-r");
|
||||
},
|
||||
sidebar_toggle: () => {
|
||||
if (window.innerWidth > 991) {
|
||||
self._lPage.classList.toggle("sidebar-o");
|
||||
} else {
|
||||
self._lPage.classList.toggle("sidebar-o-xs");
|
||||
}
|
||||
},
|
||||
sidebar_open: () => {
|
||||
if (window.innerWidth > 991) {
|
||||
self._lPage.classList.add("sidebar-o");
|
||||
} else {
|
||||
self._lPage.classList.add("sidebar-o-xs");
|
||||
}
|
||||
},
|
||||
sidebar_close: () => {
|
||||
if (window.innerWidth > 991) {
|
||||
self._lPage.classList.remove("sidebar-o");
|
||||
} else {
|
||||
self._lPage.classList.remove("sidebar-o-xs");
|
||||
}
|
||||
},
|
||||
sidebar_mini_toggle: () => {
|
||||
if (window.innerWidth > 991) {
|
||||
self._lPage.classList.toggle("sidebar-mini");
|
||||
}
|
||||
},
|
||||
sidebar_mini_on: () => {
|
||||
if (window.innerWidth > 991) {
|
||||
self._lPage.classList.add("sidebar-mini");
|
||||
}
|
||||
},
|
||||
sidebar_mini_off: () => {
|
||||
if (window.innerWidth > 991) {
|
||||
self._lPage.classList.remove("sidebar-mini");
|
||||
}
|
||||
},
|
||||
sidebar_style_toggle: () => {
|
||||
if (self._lPage.classList.contains("sidebar-dark")) {
|
||||
self._uiApiLayout("sidebar_style_light");
|
||||
} else {
|
||||
self._uiApiLayout("sidebar_style_dark");
|
||||
}
|
||||
},
|
||||
sidebar_style_dark: () => {
|
||||
self._lPage.classList.add("sidebar-dark");
|
||||
},
|
||||
sidebar_style_light: () => {
|
||||
self._lPage.classList.remove("sidebar-dark");
|
||||
},
|
||||
side_overlay_toggle: () => {
|
||||
if (self._lPage.classList.contains("side-overlay-o")) {
|
||||
self._uiApiLayout("side_overlay_close");
|
||||
} else {
|
||||
self._uiApiLayout("side_overlay_open");
|
||||
}
|
||||
},
|
||||
side_overlay_open: () => {
|
||||
// When ESCAPE key is hit close the side overlay
|
||||
document.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Esc" || e.key === "Escape") {
|
||||
self._uiApiLayout("side_overlay_close");
|
||||
}
|
||||
});
|
||||
|
||||
self._lPage.classList.add("side-overlay-o");
|
||||
},
|
||||
side_overlay_close: () => {
|
||||
self._lPage.classList.remove("side-overlay-o");
|
||||
},
|
||||
side_overlay_mode_hover_toggle: () => {
|
||||
self._lPage.classList.toggle("side-overlay-hover");
|
||||
},
|
||||
side_overlay_mode_hover_on: () => {
|
||||
self._lPage.classList.add("side-overlay-hover");
|
||||
},
|
||||
side_overlay_mode_hover_off: () => {
|
||||
self._lPage.classList.remove("side-overlay-hover");
|
||||
},
|
||||
header_glass_toggle: () => {
|
||||
self._lPage.classList.toggle("page-header-glass");
|
||||
self._uiHandleHeader();
|
||||
},
|
||||
header_glass_on: () => {
|
||||
self._lPage.classList.add("page-header-glass");
|
||||
self._uiHandleHeader();
|
||||
},
|
||||
header_glass_off: () => {
|
||||
self._lPage.classList.remove("page-header-glass");
|
||||
self._uiHandleHeader();
|
||||
},
|
||||
header_mode_toggle: () => {
|
||||
self._lPage.classList.toggle("page-header-fixed");
|
||||
},
|
||||
header_mode_static: () => {
|
||||
self._lPage.classList.remove("page-header-fixed");
|
||||
},
|
||||
header_mode_fixed: () => {
|
||||
self._lPage.classList.add("page-header-fixed");
|
||||
},
|
||||
header_style_toggle: () => {
|
||||
if (self._lPage.classList.contains("page-header-dark")) {
|
||||
self._uiApiLayout("header_style_light");
|
||||
} else {
|
||||
self._uiApiLayout("header_style_dark");
|
||||
}
|
||||
},
|
||||
header_style_dark: () => {
|
||||
self._lPage.classList.add("page-header-dark");
|
||||
},
|
||||
header_style_light: () => {
|
||||
self._lPage.classList.remove("page-header-dark");
|
||||
},
|
||||
header_search_on: () => {
|
||||
self._lHeaderSearch.classList.add("show");
|
||||
self._lHeaderSearchInput.focus();
|
||||
|
||||
// When ESCAPE key is hit close the search section
|
||||
document.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Esc" || e.key === "Escape") {
|
||||
self._uiApiLayout("header_search_off");
|
||||
}
|
||||
});
|
||||
},
|
||||
header_search_off: () => {
|
||||
self._lHeaderSearch.classList.remove("show");
|
||||
self._lHeaderSearchInput.blur();
|
||||
},
|
||||
header_loader_on: () => {
|
||||
self._lHeaderLoader.classList.add("show");
|
||||
},
|
||||
header_loader_off: () => {
|
||||
self._lHeaderLoader.classList.remove("show");
|
||||
},
|
||||
dark_mode_toggle: () => {
|
||||
if (self._lHtml.classList.contains("dark")) {
|
||||
self._uiApiLayout("dark_mode_off");
|
||||
} else {
|
||||
self._uiApiLayout("dark_mode_on");
|
||||
}
|
||||
},
|
||||
dark_mode_on: () => {
|
||||
this._uiHandleDarkMode("on");
|
||||
},
|
||||
dark_mode_off: () => {
|
||||
this._uiHandleDarkMode("off");
|
||||
},
|
||||
dark_mode_system: () => {
|
||||
this._uiHandleDarkMode("system");
|
||||
},
|
||||
content_layout_toggle: () => {
|
||||
if (self._lPage.classList.contains("main-content-boxed")) {
|
||||
self._uiApiLayout("content_layout_narrow");
|
||||
} else if (self._lPage.classList.contains("main-content-narrow")) {
|
||||
self._uiApiLayout("content_layout_full_width");
|
||||
} else {
|
||||
self._uiApiLayout("content_layout_boxed");
|
||||
}
|
||||
},
|
||||
content_layout_boxed: () => {
|
||||
self._lPage.classList.remove("main-content-narrow");
|
||||
self._lPage.classList.add("main-content-boxed");
|
||||
},
|
||||
content_layout_narrow: () => {
|
||||
self._lPage.classList.remove("main-content-boxed");
|
||||
self._lPage.classList.add("main-content-narrow");
|
||||
},
|
||||
content_layout_full_width: () => {
|
||||
self._lPage.classList.remove("main-content-boxed");
|
||||
self._lPage.classList.remove("main-content-narrow");
|
||||
},
|
||||
};
|
||||
|
||||
// Call layout API
|
||||
if (layoutAPI[mode]) {
|
||||
layoutAPI[mode]();
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Blocks API
|
||||
*
|
||||
*/
|
||||
_uiApiBlocks(mode = "init", block = false) {
|
||||
let self = this;
|
||||
|
||||
// Helper variables
|
||||
let elBlock, btnFullscreen, btnContentToggle;
|
||||
|
||||
// Set default icons for fullscreen and content toggle buttons
|
||||
let iconBase = "si";
|
||||
let iconFullscreen = "si-size-fullscreen";
|
||||
let iconFullscreenActive = "si-size-actual";
|
||||
let iconContent = "si-arrow-up";
|
||||
let iconContentActive = "si-arrow-down";
|
||||
|
||||
// API with object literals
|
||||
let blockAPI = {
|
||||
init: () => {
|
||||
// Auto add the default toggle icons to fullscreen and content toggle buttons
|
||||
document
|
||||
.querySelectorAll(
|
||||
'[data-toggle="block-option"][data-action="fullscreen_toggle"]'
|
||||
)
|
||||
.forEach((btn) => {
|
||||
btn.innerHTML =
|
||||
'<i class="' +
|
||||
iconBase +
|
||||
" " +
|
||||
(btn.closest(".block").classList.contains("block-mode-fullscreen")
|
||||
? iconFullscreenActive
|
||||
: iconFullscreen) +
|
||||
'"></i>';
|
||||
});
|
||||
|
||||
document
|
||||
.querySelectorAll(
|
||||
'[data-toggle="block-option"][data-action="content_toggle"]'
|
||||
)
|
||||
.forEach((btn) => {
|
||||
btn.innerHTML =
|
||||
'<i class="' +
|
||||
iconBase +
|
||||
" " +
|
||||
(btn.closest(".block").classList.contains("block-mode-hidden")
|
||||
? iconContentActive
|
||||
: iconContent) +
|
||||
'"></i>';
|
||||
});
|
||||
|
||||
// Call blocks API on option button click
|
||||
document
|
||||
.querySelectorAll('[data-toggle="block-option"]')
|
||||
.forEach((btn) => {
|
||||
btn.addEventListener("click", (e) => {
|
||||
this._uiApiBlocks(btn.dataset.action, btn.closest(".block"));
|
||||
});
|
||||
});
|
||||
},
|
||||
fullscreen_toggle: () => {
|
||||
elBlock.classList.remove("block-mode-pinned");
|
||||
elBlock.classList.toggle("block-mode-fullscreen");
|
||||
|
||||
// Update block option icon
|
||||
if (btnFullscreen) {
|
||||
if (elBlock.classList.contains("block-mode-fullscreen")) {
|
||||
btnFullscreen &&
|
||||
btnFullscreen
|
||||
.querySelector("i")
|
||||
.classList.replace(iconFullscreen, iconFullscreenActive);
|
||||
} else {
|
||||
btnFullscreen &&
|
||||
btnFullscreen
|
||||
.querySelector("i")
|
||||
.classList.replace(iconFullscreenActive, iconFullscreen);
|
||||
}
|
||||
}
|
||||
},
|
||||
fullscreen_on: () => {
|
||||
elBlock.classList.remove("block-mode-pinned");
|
||||
elBlock.classList.add("block-mode-fullscreen");
|
||||
|
||||
// Update block option icon
|
||||
btnFullscreen &&
|
||||
btnFullscreen
|
||||
.querySelector("i")
|
||||
.classList.replace(iconFullscreen, iconFullscreenActive);
|
||||
},
|
||||
fullscreen_off: () => {
|
||||
elBlock.classList.remove("block-mode-fullscreen");
|
||||
|
||||
// Update block option icon
|
||||
btnFullscreen &&
|
||||
btnFullscreen
|
||||
.querySelector("i")
|
||||
.classList.replace(iconFullscreenActive, iconFullscreen);
|
||||
},
|
||||
content_toggle: () => {
|
||||
elBlock.classList.toggle("block-mode-hidden");
|
||||
|
||||
// Update block option icon
|
||||
if (btnContentToggle) {
|
||||
if (elBlock.classList.contains("block-mode-hidden")) {
|
||||
btnContentToggle
|
||||
.querySelector("i")
|
||||
.classList.replace(iconContent, iconContentActive);
|
||||
} else {
|
||||
btnContentToggle
|
||||
.querySelector("i")
|
||||
.classList.replace(iconContentActive, iconContent);
|
||||
}
|
||||
}
|
||||
},
|
||||
content_hide: () => {
|
||||
elBlock.classList.add("block-mode-hidden");
|
||||
|
||||
// Update block option icon
|
||||
btnContentToggle &&
|
||||
btnContentToggle
|
||||
.querySelector("i")
|
||||
.classList.replace(iconContent, iconContentActive);
|
||||
},
|
||||
content_show: () => {
|
||||
elBlock.classList.remove("block-mode-hidden");
|
||||
|
||||
// Update block option icon
|
||||
btnContentToggle &&
|
||||
btnContentToggle
|
||||
.querySelector("i")
|
||||
.classList.replace(iconContentActive, iconContent);
|
||||
},
|
||||
state_toggle: () => {
|
||||
elBlock.classList.toggle("block-mode-loading");
|
||||
|
||||
// Return block to normal state if the demostration mode is on in the refresh option button - data-action-mode="demo"
|
||||
if (
|
||||
elBlock.querySelector(
|
||||
'[data-toggle="block-option"][data-action="state_toggle"][data-action-mode="demo"]'
|
||||
)
|
||||
) {
|
||||
setTimeout(() => {
|
||||
elBlock.classList.remove("block-mode-loading");
|
||||
}, 2000);
|
||||
}
|
||||
},
|
||||
state_loading: () => {
|
||||
elBlock.classList.add("block-mode-loading");
|
||||
},
|
||||
state_normal: () => {
|
||||
elBlock.classList.remove("block-mode-loading");
|
||||
},
|
||||
pinned_toggle: () => {
|
||||
elBlock.classList.remove("block-mode-fullscreen");
|
||||
elBlock.classList.toggle("block-mode-pinned");
|
||||
},
|
||||
pinned_on: () => {
|
||||
elBlock.classList.remove("block-mode-fullscreen");
|
||||
elBlock.classList.add("block-mode-pinned");
|
||||
},
|
||||
pinned_off: () => {
|
||||
elBlock.classList.remove("block-mode-pinned");
|
||||
},
|
||||
close: () => {
|
||||
elBlock.classList.add("d-none");
|
||||
},
|
||||
open: () => {
|
||||
elBlock.classList.remove("d-none");
|
||||
},
|
||||
};
|
||||
|
||||
if (mode === "init") {
|
||||
// Call Block API
|
||||
blockAPI[mode]();
|
||||
} else {
|
||||
// Get block element
|
||||
elBlock =
|
||||
block instanceof Element ? block : document.querySelector(`${block}`);
|
||||
|
||||
// If element exists, procceed with block functionality
|
||||
if (elBlock) {
|
||||
// Get block option buttons if exist (need them to update their icons)
|
||||
btnFullscreen = elBlock.querySelector(
|
||||
'[data-toggle="block-option"][data-action="fullscreen_toggle"]'
|
||||
);
|
||||
btnContentToggle = elBlock.querySelector(
|
||||
'[data-toggle="block-option"][data-action="content_toggle"]'
|
||||
);
|
||||
|
||||
// Call Block API
|
||||
if (blockAPI[mode]) {
|
||||
blockAPI[mode]();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
********************************************************************************************
|
||||
*
|
||||
* Helpers
|
||||
*
|
||||
*********************************************************************************************
|
||||
*/
|
||||
|
||||
/*
|
||||
* On DOM content loaded
|
||||
*
|
||||
*/
|
||||
onLoad(fn) {
|
||||
if (document.readyState != "loading") {
|
||||
fn();
|
||||
} else {
|
||||
document.addEventListener("DOMContentLoaded", fn);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
********************************************************************************************
|
||||
*
|
||||
* Create aliases for easier/quicker access to vital methods
|
||||
*
|
||||
*********************************************************************************************
|
||||
*/
|
||||
|
||||
/*
|
||||
* Init base functionality
|
||||
*
|
||||
*/
|
||||
init() {
|
||||
this._uiInit();
|
||||
}
|
||||
|
||||
/*
|
||||
* Layout API
|
||||
*
|
||||
*/
|
||||
layout(mode) {
|
||||
this._uiApiLayout(mode);
|
||||
}
|
||||
|
||||
/*
|
||||
* Blocks API
|
||||
*
|
||||
*/
|
||||
block(mode, block) {
|
||||
this._uiApiBlocks(mode, block);
|
||||
}
|
||||
|
||||
/*
|
||||
* Handle Page Loader
|
||||
*
|
||||
*/
|
||||
loader(mode, colorClass) {
|
||||
this._uiHandlePageLoader(mode, colorClass);
|
||||
}
|
||||
|
||||
/*
|
||||
* Run Helpers
|
||||
*
|
||||
*/
|
||||
helpers(helpers, options = {}) {
|
||||
Helpers.run(helpers, options);
|
||||
}
|
||||
|
||||
/*
|
||||
* Run Helpers on DOM content loaded
|
||||
*
|
||||
*/
|
||||
helpersOnLoad(helpers, options = {}) {
|
||||
this.onLoad(() => Helpers.run(helpers, options));
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user