localnet/localhost-front
10
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'board-comment' of http://192.168.0.251:3000/localnet/localhost-front into board-comment

Browse Source
This commit is contained in:
kimdaae328 2025-02-24 14:04:21 +09:00
commit 2ba5121c85
2 changed files with 121 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

196
public/js/main.js
View File

@ -2,116 +2,114 @@
* Main * Main
*/ */
'use strict' (function () {
// Initialize menu
//-----------------
let menu, animate;
let menu, animate let layoutMenuEl = document.querySelectorAll('#layout-menu');
;(function () { layoutMenuEl.forEach(function (element) {
// Initialize menu menu = new Menu(element, {
//----------------- orientation: 'vertical',
closeChildren: false,
});
// Change parameter to true if you want scroll animation
window.Helpers.scrollToActive((animate = false));
window.Helpers.mainMenu = menu;
});
let layoutMenuEl = document.querySelectorAll('#layout-menu') // Initialize menu togglers and bind click on each
layoutMenuEl.forEach(function (element) { let menuToggler = document.querySelectorAll('.layout-menu-toggle');
menu = new Menu(element, { menuToggler.forEach(item => {
orientation: 'vertical', item.addEventListener('click', event => {
closeChildren: false, event.preventDefault();
}) window.Helpers.toggleCollapsed();
// Change parameter to true if you want scroll animation });
window.Helpers.scrollToActive((animate = false)) });
window.Helpers.mainMenu = menu
})
// Initialize menu togglers and bind click on each // Display menu toggle (layout-menu-toggle) on hover with delay
let menuToggler = document.querySelectorAll('.layout-menu-toggle') let delay = function (elem, callback) {
menuToggler.forEach((item) => { let timeout = null;
item.addEventListener('click', (event) => { elem.onmouseenter = function () {
event.preventDefault() // Set timeout to be a timer which will invoke callback after 300ms (not for small screen)
window.Helpers.toggleCollapsed() if (!Helpers.isSmallScreen()) {
}) timeout = setTimeout(callback, 300);
}) } else {
timeout = setTimeout(callback, 0);
}
};
// Display menu toggle (layout-menu-toggle) on hover with delay elem.onmouseleave = function () {
let delay = function (elem, callback) { // Clear any timers set to timeout
let timeout = null document.querySelector('.layout-menu-toggle').classList.remove('d-block');
elem.onmouseenter = function () { clearTimeout(timeout);
// Set timeout to be a timer which will invoke callback after 300ms (not for small screen) };
if (!Helpers.isSmallScreen()) { };
timeout = setTimeout(callback, 300) if (document.getElementById('layout-menu')) {
} else { delay(document.getElementById('layout-menu'), function () {
timeout = setTimeout(callback, 0) // not for small screen
} if (!Helpers.isSmallScreen()) {
document.querySelector('.layout-menu-toggle').classList.add('d-block');
}
});
} }
elem.onmouseleave = function () { // Display in main menu when menu scrolls
// Clear any timers set to timeout let menuInnerContainer = document.getElementsByClassName('menu-inner'),
document.querySelector('.layout-menu-toggle').classList.remove('d-block') menuInnerShadow = document.getElementsByClassName('menu-inner-shadow')[0];
clearTimeout(timeout) if (menuInnerContainer.length > 0 && menuInnerShadow) {
menuInnerContainer[0].addEventListener('ps-scroll-y', function () {
if (this.querySelector('.ps__thumb-y').offsetTop) {
menuInnerShadow.style.display = 'block';
} else {
menuInnerShadow.style.display = 'none';
}
});
} }
}
if (document.getElementById('layout-menu')) {
delay(document.getElementById('layout-menu'), function () {
// not for small screen
if (!Helpers.isSmallScreen()) {
document.querySelector('.layout-menu-toggle').classList.add('d-block')
}
})
}
// Display in main menu when menu scrolls // Init helpers & misc
let menuInnerContainer = document.getElementsByClassName('menu-inner'), // --------------------
menuInnerShadow = document.getElementsByClassName('menu-inner-shadow')[0]
if (menuInnerContainer.length > 0 && menuInnerShadow) {
menuInnerContainer[0].addEventListener('ps-scroll-y', function () {
if (this.querySelector('.ps__thumb-y').offsetTop) {
menuInnerShadow.style.display = 'block'
} else {
menuInnerShadow.style.display = 'none'
}
})
}
// Init helpers & misc // Init BS Tooltip
// -------------------- const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl);
});
// Init BS Tooltip // Accordion active class
const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')) const accordionActiveFunction = function (e) {
tooltipTriggerList.map(function (tooltipTriggerEl) { if (e.type == 'show.bs.collapse' || e.type == 'show.bs.collapse') {
return new bootstrap.Tooltip(tooltipTriggerEl) e.target.closest('.accordion-item').classList.add('active');
}) } else {
e.target.closest('.accordion-item').classList.remove('active');
}
};
// Accordion active class const accordionTriggerList = [].slice.call(document.querySelectorAll('.accordion'));
const accordionActiveFunction = function (e) { const accordionList = accordionTriggerList.map(function (accordionTriggerEl) {
if (e.type == 'show.bs.collapse' || e.type == 'show.bs.collapse') { accordionTriggerEl.addEventListener('show.bs.collapse', accordionActiveFunction);
e.target.closest('.accordion-item').classList.add('active') accordionTriggerEl.addEventListener('hide.bs.collapse', accordionActiveFunction);
} else { });
e.target.closest('.accordion-item').classList.remove('active')
// Auto update layout based on screen size
window.Helpers.setAutoUpdate(true);
// Toggle Password Visibility
window.Helpers.initPasswordToggle();
// Speech To Text
window.Helpers.initSpeechToText();
// Manage menu expanded/collapsed with templateCustomizer & local storage
//------------------------------------------------------------------
// If current layout is horizontal OR current window screen is small (overlay menu) than return from here
if (window.Helpers.isSmallScreen()) {
return;
} }
}
const accordionTriggerList = [].slice.call(document.querySelectorAll('.accordion')) // If current layout is vertical and current window screen is > small
const accordionList = accordionTriggerList.map(function (accordionTriggerEl) {
accordionTriggerEl.addEventListener('show.bs.collapse', accordionActiveFunction)
accordionTriggerEl.addEventListener('hide.bs.collapse', accordionActiveFunction)
})
// Auto update layout based on screen size // Auto update menu collapsed/expanded based on the themeConfig
window.Helpers.setAutoUpdate(true) window.Helpers.setCollapsed(true, false);
})();
// Toggle Password Visibility
window.Helpers.initPasswordToggle()
// Speech To Text
window.Helpers.initSpeechToText()
// Manage menu expanded/collapsed with templateCustomizer & local storage
//------------------------------------------------------------------
// If current layout is horizontal OR current window screen is small (overlay menu) than return from here
if (window.Helpers.isSmallScreen()) {
return
}
// If current layout is vertical and current window screen is > small
// Auto update menu collapsed/expanded based on the themeConfig
window.Helpers.setCollapsed(true, false)
})()

49
src/layouts/NormalLayout.vue
View File

@ -24,32 +24,31 @@
</div> </div>
</template> </template>
<script setup> <script setup>
import TheTop from './TheTop.vue'; import TheTop from './TheTop.vue';
import TheFooter from './TheFooter.vue'; import TheFooter from './TheFooter.vue';
import TheMenu from './TheMenu.vue'; import TheMenu from './TheMenu.vue';
import { nextTick } from 'vue'; import { nextTick } from 'vue';
import { wait } from '@/common/utils'; import { wait } from '@/common/utils';
window.isDarkStyle = window.Helpers.isDarkStyle(); window.isDarkStyle = window.Helpers.isDarkStyle();
const loadScript = src => { const loadScript = src => {
const script = document.createElement('script'); const script = document.createElement('script');
script.src = src; script.src = src;
script.type = 'text/javascript'; script.type = 'text/javascript';
script.async = true; script.async = true;
document.body.appendChild(script); document.body.appendChild(script);
script.onload = () => { // script.onload = () => {
console.log(`${src} loaded successfully.`); // console.log(`${src} loaded successfully.`);
// };
script.onerror = () => {
console.error(`Failed to load script: ${src}`);
};
}; };
script.onerror = () => { nextTick(async () => {
console.error(`Failed to load script: ${src}`); await wait(200);
}; loadScript('/vendor/js/menu.js');
}; loadScript('/js/main.js');
nextTick(async () => { });
await wait(200);
loadScript('/vendor/js/menu.js');
loadScript('/js/main.js');
});
</script> </script>
<style> <style></style>
</style>