CMintS logo

JavaScript Modules

CMintS is using Node.js-style modules and makes Theme functionality implementation modular out of the box. All that magic is done using browserify.

JavaScript files that are placed in theme/js directory and don't have starting _ in the filename ex.: _contextMenu.js are being compiled into the public/js directory.

Consider:

/* theme/js/_contextMenu.js */
const toggleContextMenu = (buttonElem) =>
{
  const contextMenus = buttonElem.closest(".contextMenu");
  if (contextMenus)
    contextMenus.classList.toggle("visible");
};

module.exports.toggleContextMenu = toggleContextMenu;

And:

/* theme/js/main */
const {toggleContextMenu} = require("./_contextMenu");

document.body.addEventListener("click", (e)=>
{
  toggleContextMenu(e.target);
}, false);

The example above will be compiled into the public/js/main.js and can be included into the Theme's layout:

<!DOCTYPE html>
<html lang="<%= page.locale %>">
<head>
  <script src="/js/main.js" defer></script>
</head>
<body>
  ...