119 lines
3.2 KiB
JavaScript
119 lines
3.2 KiB
JavaScript
/**
|
|
* MF Layout Component - JavaScript Controller
|
|
* Manages drawer state and provides programmatic control
|
|
*/
|
|
|
|
// Global registry for layout instances
|
|
if (typeof window.mfLayoutInstances === 'undefined') {
|
|
window.mfLayoutInstances = {};
|
|
}
|
|
|
|
/**
|
|
* Initialize a layout instance with drawer controls
|
|
* @param {string} layoutId - The unique ID of the layout (mf-layout-xxx)
|
|
*/
|
|
function initLayout(layoutId) {
|
|
const layoutElement = document.getElementById(layoutId);
|
|
|
|
if (!layoutElement) {
|
|
console.error(`Layout with id "${layoutId}" not found`);
|
|
return;
|
|
}
|
|
|
|
// Create layout controller object
|
|
const layoutController = {
|
|
layoutId: layoutId,
|
|
element: layoutElement,
|
|
|
|
/**
|
|
* Get drawer element by side
|
|
* @param {string} side - 'left' or 'right'
|
|
* @returns {HTMLElement|null} The drawer element
|
|
*/
|
|
getDrawer: function (side) {
|
|
if (side !== 'left' && side !== 'right') {
|
|
console.error(`Invalid drawer side: "${side}". Must be "left" or "right".`);
|
|
return null;
|
|
}
|
|
|
|
const drawerClass = side === 'left' ? '.mf-layout-left-drawer' : '.mf-layout-right-drawer';
|
|
return this.element.querySelector(drawerClass);
|
|
},
|
|
|
|
/**
|
|
* Check if a drawer is currently open
|
|
* @param {string} side - 'left' or 'right'
|
|
* @returns {boolean} True if drawer is open
|
|
*/
|
|
isDrawerOpen: function (side) {
|
|
const drawer = this.getDrawer(side);
|
|
return drawer ? !drawer.classList.contains('collapsed') : false;
|
|
},
|
|
|
|
/**
|
|
* Open a drawer
|
|
* @param {string} side - 'left' or 'right'
|
|
*/
|
|
openDrawer: function (side) {
|
|
const drawer = this.getDrawer(side);
|
|
if (drawer) {
|
|
drawer.classList.remove('collapsed');
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Close a drawer
|
|
* @param {string} side - 'left' or 'right'
|
|
*/
|
|
closeDrawer: function (side) {
|
|
const drawer = this.getDrawer(side);
|
|
if (drawer) {
|
|
drawer.classList.add('collapsed');
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Toggle a drawer between open and closed
|
|
* @param {string} side - 'left' or 'right'
|
|
*/
|
|
toggleDrawer: function (side) {
|
|
if (this.isDrawerOpen(side)) {
|
|
this.closeDrawer(side);
|
|
} else {
|
|
this.openDrawer(side);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Initialize event listeners for toggle buttons
|
|
*/
|
|
initEventListeners: function () {
|
|
// Get all toggle buttons within this layout
|
|
const toggleButtons = this.element.querySelectorAll('[class*="mf-layout-toggle"]');
|
|
|
|
toggleButtons.forEach(button => {
|
|
button.addEventListener('click', (event) => {
|
|
event.preventDefault();
|
|
const side = button.getAttribute('data-side');
|
|
if (side) {
|
|
this.toggleDrawer(side);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
};
|
|
|
|
// Initialize event listeners
|
|
layoutController.initEventListeners();
|
|
|
|
// Store instance in global registry for programmatic access
|
|
window.mfLayoutInstances[layoutId] = layoutController;
|
|
|
|
// Log successful initialization
|
|
console.log(`Layout "${layoutId}" initialized successfully`);
|
|
}
|
|
|
|
// Export for module environments if needed
|
|
if (typeof module !== 'undefined' && module.exports) {
|
|
module.exports = {initLayout};
|
|
} |