first commit
This commit is contained in:
230
media/templates/administrator/atum/js/template.js
Normal file
230
media/templates/administrator/atum/js/template.js
Normal file
@ -0,0 +1,230 @@
|
||||
/**
|
||||
* @copyright (C) 2019 Open Source Matters, Inc. <https://www.joomla.org>
|
||||
* @license GNU General Public License version 2 or later; see LICENSE.txt
|
||||
*/
|
||||
|
||||
if (!Joomla) {
|
||||
throw new Error('Joomla API is not initialized');
|
||||
}
|
||||
const getCookie = () => {
|
||||
var _document$cookie$spli;
|
||||
return document.cookie.length && ((_document$cookie$spli = document.cookie.split('; ').find(row => row.startsWith('atumSidebarState='))) == null ? void 0 : _document$cookie$spli.split('=')[1]);
|
||||
};
|
||||
const mobile = window.matchMedia('(max-width: 992px)');
|
||||
const small = window.matchMedia('(max-width: 575.98px)');
|
||||
const tablet = window.matchMedia('(min-width: 576px) and (max-width:991.98px)');
|
||||
const menu = document.querySelector('.sidebar-menu');
|
||||
const sidebarNav = [].slice.call(document.querySelectorAll('.sidebar-nav'));
|
||||
const subhead = document.querySelector('#subhead-container');
|
||||
const wrapper = document.querySelector('.wrapper');
|
||||
const sidebarWrapper = document.querySelector('.sidebar-wrapper');
|
||||
const logo = document.querySelector('.logo');
|
||||
const isLogin = document.querySelector('body.com_login');
|
||||
const menuToggleIcon = document.getElementById('menu-collapse-icon');
|
||||
const navDropDownIcon = document.querySelectorAll('.nav-item.dropdown span[class*="icon-angle-"]');
|
||||
const headerTitleArea = document.querySelector('#header .header-title');
|
||||
const headerItemsArea = document.querySelector('#header .header-items');
|
||||
const headerExpandedItems = [].slice.call(headerItemsArea.children).filter(element => element.classList.contains('header-item'));
|
||||
const headerCondensedItemContainer = document.getElementById('header-more-items');
|
||||
const headerCondensedItems = [].slice.call(headerCondensedItemContainer.querySelectorAll('.header-dd-item'));
|
||||
let headerTitleWidth = headerTitleArea.getBoundingClientRect().width;
|
||||
const headerItemWidths = headerExpandedItems.map(element => element.getBoundingClientRect().width);
|
||||
|
||||
// Get the ellipsis button width
|
||||
headerCondensedItemContainer.classList.remove('d-none');
|
||||
// eslint-disable-next-line no-unused-expressions
|
||||
headerCondensedItemContainer.paddingTop;
|
||||
const ellipsisWidth = headerCondensedItemContainer.getBoundingClientRect().width;
|
||||
headerCondensedItemContainer.classList.add('d-none');
|
||||
|
||||
/**
|
||||
* Shrink or extend the logo, depending on sidebar
|
||||
*
|
||||
* @param {string} [change] is the sidebar 'open' or 'closed'
|
||||
*
|
||||
* @since 4.0.0
|
||||
*/
|
||||
function changeLogo(change) {
|
||||
if (!logo || isLogin) {
|
||||
return;
|
||||
}
|
||||
if (small.matches) {
|
||||
logo.classList.add('small');
|
||||
return;
|
||||
}
|
||||
const state = change || getCookie();
|
||||
if (state === 'closed') {
|
||||
logo.classList.add('small');
|
||||
} else {
|
||||
logo.classList.remove('small');
|
||||
}
|
||||
if (menuToggleIcon) {
|
||||
if (wrapper.classList.contains('closed')) {
|
||||
menuToggleIcon.classList.add('icon-toggle-on');
|
||||
menuToggleIcon.classList.remove('icon-toggle-off');
|
||||
} else {
|
||||
menuToggleIcon.classList.remove('icon-toggle-on');
|
||||
menuToggleIcon.classList.add('icon-toggle-off');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* toggle arrow icon between down and up depending on position of the nav header
|
||||
*
|
||||
* @param {string} [positionTop] set if the nav header positioned to the 'top' otherwise 'bottom'
|
||||
*
|
||||
* @since 4.0.0
|
||||
*/
|
||||
function toggleArrowIcon(positionTop) {
|
||||
const remIcon = positionTop ? 'icon-angle-up' : 'icon-angle-down';
|
||||
const addIcon = positionTop ? 'icon-angle-down' : 'icon-angle-up';
|
||||
if (!navDropDownIcon) {
|
||||
return;
|
||||
}
|
||||
navDropDownIcon.forEach(item => {
|
||||
item.classList.remove(remIcon);
|
||||
item.classList.add(addIcon);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {[]} arr
|
||||
* @returns {Number}
|
||||
*/
|
||||
const getSum = arr => arr.reduce((a, b) => Number(a) + Number(b), 0);
|
||||
|
||||
/**
|
||||
* put elements that are too much in the header in a dropdown
|
||||
*
|
||||
* @since 4.0.0
|
||||
*/
|
||||
function headerItemsInDropdown() {
|
||||
headerTitleWidth = headerTitleArea.getBoundingClientRect().width;
|
||||
const minViable = headerTitleWidth + ellipsisWidth;
|
||||
const totalHeaderItemWidths = 50 + getSum(headerItemWidths);
|
||||
if (headerTitleWidth + totalHeaderItemWidths < document.body.getBoundingClientRect().width) {
|
||||
headerExpandedItems.map(element => element.classList.remove('d-none'));
|
||||
headerCondensedItemContainer.classList.add('d-none');
|
||||
} else {
|
||||
headerCondensedItemContainer.classList.remove('d-none');
|
||||
headerCondensedItems.map(el => el.classList.add('d-none'));
|
||||
headerCondensedItemContainer.classList.remove('d-none');
|
||||
headerItemWidths.forEach((width, index) => {
|
||||
const tempArr = headerItemWidths.slice(index, headerItemWidths.length);
|
||||
if (minViable + getSum(tempArr) < document.body.getBoundingClientRect().width) {
|
||||
return;
|
||||
}
|
||||
if (headerExpandedItems[index].children && !headerExpandedItems[index].children[0].classList.contains('dropdown')) {
|
||||
headerExpandedItems[index].classList.add('d-none');
|
||||
headerCondensedItems[index].classList.remove('d-none');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Change appearance for mobile devices
|
||||
*
|
||||
* @since 4.0.0
|
||||
*/
|
||||
function setMobile() {
|
||||
if (small.matches) {
|
||||
toggleArrowIcon();
|
||||
if (menu) {
|
||||
wrapper.classList.remove('closed');
|
||||
}
|
||||
} else {
|
||||
toggleArrowIcon('top');
|
||||
}
|
||||
if (tablet.matches && menu) {
|
||||
wrapper.classList.add('closed');
|
||||
}
|
||||
if (small.matches) {
|
||||
sidebarNav.map(el => el.classList.add('collapse'));
|
||||
if (subhead) subhead.classList.add('collapse');
|
||||
if (sidebarWrapper) sidebarWrapper.classList.add('collapse');
|
||||
} else {
|
||||
sidebarNav.map(el => el.classList.remove('collapse'));
|
||||
if (subhead) subhead.classList.remove('collapse');
|
||||
if (sidebarWrapper) sidebarWrapper.classList.remove('collapse');
|
||||
}
|
||||
changeLogo('closed');
|
||||
}
|
||||
|
||||
/**
|
||||
* Change appearance for mobile devices
|
||||
*
|
||||
* @since 4.0.0
|
||||
*/
|
||||
function setDesktop() {
|
||||
if (!sidebarWrapper) {
|
||||
changeLogo('closed');
|
||||
} else {
|
||||
changeLogo(getCookie() || 'open');
|
||||
sidebarWrapper.classList.remove('collapse');
|
||||
}
|
||||
sidebarNav.map(el => el.classList.remove('collapse'));
|
||||
if (subhead) subhead.classList.remove('collapse');
|
||||
toggleArrowIcon('top');
|
||||
}
|
||||
|
||||
/**
|
||||
* React on resizing window
|
||||
*
|
||||
* @since 4.0.0
|
||||
*/
|
||||
function reactToResize() {
|
||||
window.addEventListener('resize', () => {
|
||||
if (mobile.matches) {
|
||||
setMobile();
|
||||
} else {
|
||||
setDesktop();
|
||||
}
|
||||
headerItemsInDropdown();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Subhead gets white background when user scrolls down
|
||||
*
|
||||
* @since 4.0.0
|
||||
*/
|
||||
function subheadScrolling() {
|
||||
if (subhead) {
|
||||
document.addEventListener('scroll', () => {
|
||||
if (window.scrollY > 0) {
|
||||
subhead.classList.add('shadow-sm');
|
||||
} else {
|
||||
subhead.classList.remove('shadow-sm');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize
|
||||
headerItemsInDropdown();
|
||||
reactToResize();
|
||||
subheadScrolling();
|
||||
if (small.matches) {
|
||||
changeLogo('closed');
|
||||
if (subhead) {
|
||||
subhead.classList.remove('show');
|
||||
subhead.classList.add('collapse');
|
||||
}
|
||||
}
|
||||
if (!navigator.cookieEnabled) {
|
||||
Joomla.renderMessages({
|
||||
error: [Joomla.Text._('JGLOBAL_WARNCOOKIES')]
|
||||
}, undefined, false, 6000);
|
||||
}
|
||||
window.addEventListener('joomla:menu-toggle', event => {
|
||||
headerItemsInDropdown();
|
||||
document.cookie = `atumSidebarState=${event.detail};`;
|
||||
if (mobile.matches) {
|
||||
changeLogo('closed');
|
||||
} else {
|
||||
changeLogo(event.detail);
|
||||
}
|
||||
});
|
||||
1
media/templates/administrator/atum/js/template.min.js
vendored
Normal file
1
media/templates/administrator/atum/js/template.min.js
vendored
Normal file
@ -0,0 +1 @@
|
||||
if(!Joomla)throw new Error("Joomla API is not initialized");const getCookie=()=>{var e;return document.cookie.length&&(null==(e=document.cookie.split("; ").find((e=>e.startsWith("atumSidebarState="))))?void 0:e.split("=")[1])},mobile=window.matchMedia("(max-width: 992px)"),small=window.matchMedia("(max-width: 575.98px)"),tablet=window.matchMedia("(min-width: 576px) and (max-width:991.98px)"),menu=document.querySelector(".sidebar-menu"),sidebarNav=[].slice.call(document.querySelectorAll(".sidebar-nav")),subhead=document.querySelector("#subhead-container"),wrapper=document.querySelector(".wrapper"),sidebarWrapper=document.querySelector(".sidebar-wrapper"),logo=document.querySelector(".logo"),isLogin=document.querySelector("body.com_login"),menuToggleIcon=document.getElementById("menu-collapse-icon"),navDropDownIcon=document.querySelectorAll('.nav-item.dropdown span[class*="icon-angle-"]'),headerTitleArea=document.querySelector("#header .header-title"),headerItemsArea=document.querySelector("#header .header-items"),headerExpandedItems=[].slice.call(headerItemsArea.children).filter((e=>e.classList.contains("header-item"))),headerCondensedItemContainer=document.getElementById("header-more-items"),headerCondensedItems=[].slice.call(headerCondensedItemContainer.querySelectorAll(".header-dd-item"));let headerTitleWidth=headerTitleArea.getBoundingClientRect().width;const headerItemWidths=headerExpandedItems.map((e=>e.getBoundingClientRect().width));headerCondensedItemContainer.classList.remove("d-none"),headerCondensedItemContainer.paddingTop;const ellipsisWidth=headerCondensedItemContainer.getBoundingClientRect().width;function changeLogo(e){if(!logo||isLogin)return;if(small.matches)return void logo.classList.add("small");"closed"===(e||getCookie())?logo.classList.add("small"):logo.classList.remove("small"),menuToggleIcon&&(wrapper.classList.contains("closed")?(menuToggleIcon.classList.add("icon-toggle-on"),menuToggleIcon.classList.remove("icon-toggle-off")):(menuToggleIcon.classList.remove("icon-toggle-on"),menuToggleIcon.classList.add("icon-toggle-off")))}function toggleArrowIcon(e){const o=e?"icon-angle-up":"icon-angle-down",a=e?"icon-angle-down":"icon-angle-up";navDropDownIcon&&navDropDownIcon.forEach((e=>{e.classList.remove(o),e.classList.add(a)}))}headerCondensedItemContainer.classList.add("d-none");const getSum=e=>e.reduce(((e,o)=>Number(e)+Number(o)),0);function headerItemsInDropdown(){headerTitleWidth=headerTitleArea.getBoundingClientRect().width;const e=headerTitleWidth+ellipsisWidth,o=50+getSum(headerItemWidths);headerTitleWidth+o<document.body.getBoundingClientRect().width?(headerExpandedItems.map((e=>e.classList.remove("d-none"))),headerCondensedItemContainer.classList.add("d-none")):(headerCondensedItemContainer.classList.remove("d-none"),headerCondensedItems.map((e=>e.classList.add("d-none"))),headerCondensedItemContainer.classList.remove("d-none"),headerItemWidths.forEach(((o,a)=>{const s=headerItemWidths.slice(a,headerItemWidths.length);e+getSum(s)<document.body.getBoundingClientRect().width||headerExpandedItems[a].children&&!headerExpandedItems[a].children[0].classList.contains("dropdown")&&(headerExpandedItems[a].classList.add("d-none"),headerCondensedItems[a].classList.remove("d-none"))})))}function setMobile(){small.matches?(toggleArrowIcon(),menu&&wrapper.classList.remove("closed")):toggleArrowIcon("top"),tablet.matches&&menu&&wrapper.classList.add("closed"),small.matches?(sidebarNav.map((e=>e.classList.add("collapse"))),subhead&&subhead.classList.add("collapse"),sidebarWrapper&&sidebarWrapper.classList.add("collapse")):(sidebarNav.map((e=>e.classList.remove("collapse"))),subhead&&subhead.classList.remove("collapse"),sidebarWrapper&&sidebarWrapper.classList.remove("collapse")),changeLogo("closed")}function setDesktop(){sidebarWrapper?(changeLogo(getCookie()||"open"),sidebarWrapper.classList.remove("collapse")):changeLogo("closed"),sidebarNav.map((e=>e.classList.remove("collapse"))),subhead&&subhead.classList.remove("collapse"),toggleArrowIcon("top")}function reactToResize(){window.addEventListener("resize",(()=>{mobile.matches?setMobile():setDesktop(),headerItemsInDropdown()}))}function subheadScrolling(){subhead&&document.addEventListener("scroll",(()=>{window.scrollY>0?subhead.classList.add("shadow-sm"):subhead.classList.remove("shadow-sm")}))}headerItemsInDropdown(),reactToResize(),subheadScrolling(),small.matches&&(changeLogo("closed"),subhead&&(subhead.classList.remove("show"),subhead.classList.add("collapse"))),navigator.cookieEnabled||Joomla.renderMessages({error:[Joomla.Text._("JGLOBAL_WARNCOOKIES")]},void 0,!1,6e3),window.addEventListener("joomla:menu-toggle",(e=>{headerItemsInDropdown(),document.cookie=`atumSidebarState=${e.detail};`,mobile.matches?changeLogo("closed"):changeLogo(e.detail)}));
|
||||
BIN
media/templates/administrator/atum/js/template.min.js.gz
Normal file
BIN
media/templates/administrator/atum/js/template.min.js.gz
Normal file
Binary file not shown.
Reference in New Issue
Block a user