logo Multi Demo Bootstrap Admin Dashboard Theme

Javascript

Keen's JS codes are written in pure (vanila) Javascript (no jquery dependency) in order to make it easier to integrate with HTML, Angular, React, VueJS and Laravel frameworks. During the build process the JS codes are minified and moved to the assets folder (e.g: dist).

There are 2 types of the JS codes: Custom and Bundlable. The custom JS code is written in a JS file and minified and moved to the assets folder as a single file for each page or element that requires a certain level of customization, while the bundlable JS files are written in separate JS files that are also minified and added bundled into 1 main JS file.

Layout

The Layout Folder in [keen]/theme/[demo]/src/js/layout/ contains javascript files that handle the Layout Partials(Aside, Header, Footer, Subheader, etc). The Layout Javascript files are devided into Base and Extended groups where Base Javascript files are mandatory and Extended Javascript files are optional.

Base

The Base Layout Javascript files in [keen]/theme/[demo]/src/js/layout/base handle the following Layout Partials:

File Description
header.js Defines KTLayoutHeader class to handle the Header behavior and provide a basic API methods.
header-topbar.js Defines KTLayoutHeaderTopbar class to handle the Header Topbar behavior and provide a basic API methods.
header-menu.js Defines KTLayoutHeaderTopbar class to handle the Header Menu for desktop, tablet and mobile breakpoints and provide a basic API methods.
brand.js Defines KTLayoutBrand class to handle the Brand(logo) Panel behavior and provide a basic API methods.
aside.js Defines KTLayoutAside class to handle the Aside behavior and provide a basic API methods.
aside-toggle.js Defines KTLayoutMenu class to handle the Aside Toggle behavior and provide a basic API methods.
aside-menu.js Defines KTLayoutAsideMenu class to handle the Aside Menu for desktop, tablet and mobile breakpoints and provide a basic API methods.
subheader.js Defines KTLayoutSubheader class to handle the Subheader behavior and provide a basic API methods.
content.js Defines KTLayoutAside class to handle the Content behavior and provide a basic API methods.
footer.js Defines KTLayoutFooter class to handle the Footer behavior and provide a basic API methods.
sticky-card.js Defines KTLayoutStickyCard class to handle the Sticky Main Card behavior and provide a basic API methods.
stretched-card.js Defines KTLayoutStretchedCard class to handle the Stretched Main Card behavior and provide a basic API methods.

The Base Components Javascript are mandatory and they must be included in the main bundle javascript file [keen]/theme/[demo]/assets/js/scripts.bundle.js in order Keen to perform properly.

Extended

The Extended Components Javascript are optional to use and if they enabled they will be included in the main bundle javascript file [keen]/theme/[demo]/assets/js/scripts.bundle.js and initialized globally in all pages.

File Description
scrolltop.js Defines KTLayoutScrolltop class to handle Scroll To Page Top Button functionality. Scroll the content and refer to the footer.
chat.js Defines KTLayoutChat class to handle the Chat Popup behavior.
demo-panel.js Defines KTLayoutDemoPanel class to handle the Demo Selection Offcanvas Panel(refer to the right center toolbar).
examples.js Defines KTLayoutExamples class to handle the source code preview functionaly accross the demo pages.
quick-actions.js Defines KTLayoutQuickActions class to handle the Topbar Quick Actions offcanvas panel.
quick-cart.js Defines KTLayoutQuickCartPanel class to handle the Topbar Quick Cart offcanvas panel.
quick-notifications.js Defines KTLayoutQuickNotifications class to handle the Topbar Quick Notifications offcanvas panel.
quick-panel.js Defines KTLayoutQuickPanel class to handle the Topbar Quick Panel offcanvas panel.
quick-search.js Defines KTLayoutQuickSearch class to handle the Topbar Quick Search offcanvas panel.
quick-user.js Defines KTLayoutQuickUser class to handle the Topbar Quick User offcanvas panel.
search.js Defines KTLayoutSearch, KTLayoutSearchInline and KTLayoutSearchOffcanvas classes to handle the Ajax Search Results For Topbar Quick Search Dropdown and Inline Panels.

Vendors

Vendors folder contains 3rd-party plugins global configuration and iinitializion code.

Pages

Pages folder contains custom Javascript files used to initialize all the theme demo features and examples. This Javascript code should be used as a reference. In your product create your own javascript files according to your requirements.

Compilation

  • Keen compiles Layout,Components and Vendor Javascript files into the main Javascript bundle file that is included in all pages and initialized globally: [keen]/theme/[demo]/dist/assets/js/scripts.bundle.js.
  • Pages Javascript files are compiled separately into JS folder and used in pages on demand: [keen]/theme/[demo]/dist/assets/js/pages/