Core Boxx – HTML Javascript Template

LIBRARIES & FRAMEWORKS

The default Core Boxx HTML template is built using Bootstrap and Material Icons. It is also PWA-ready.

 

CORE PAGES

• pages/TEMPLATE-top.php Top half of the HTML template.
• pages/TEMPLATE-bottom.php Bottom half of the HTML template.
• pages/PAGE-home.php The default home page.
• pages/PAGE-404.php Default “not found” page.
• pages/PAGE-demo.php Pretty much a compilation of examples below.
• assets/PAGE-cb.php Standard Core Boxx HTML-Javascript interface.

 

COMMON HTML/JAVASCRIPT INTERFACE

PAGE LOAD SPINNER

// TO SHOW SPINNER IN JS
cb.loading(1);
 
// TO HIDE SPINNER IN JS
cb.loading(0);

 

TOAST MESSAGE

// "SUCCESS" TOAST MESSAGE
cb.toast(true, "TITLE", "MESSAGE");
 
// "FAILURE" TOAST MESSAGE
cb.toast(false, "TITLE", "MESSAGE");

 

MODAL DIALOG BOX

// TO SHOW A TOAST MESSAGE
cb.modal("TITLE", "MESSAGE", "OPTIONAL FOOT");

// ALTERNATIVELY, A YES/NO BUTTON
cb.modal("TITLE", "MESSAGE", () => {
  alert("This will run if user click on yes.");
});

 

 

API CALLS

cb.api({
  mod : "MODULE",
  req : "REQUEST",
  data : { "KEY" : "VALUE" },
  loading : true/false, // show loading spinner? default true.
  debug : true/false, // debug mode? default false.
  passmsg : "Add user successful", // toast message to show on success, false for none.
  nofail : true/false, // supress "fetch failed" message? default false.
  onpass : FUNCTION, // function to call on success, optional
  onfail : FUNCTION, // function to call on failure, optional
  onerr : FUNCTION // function to call on error, optional
});

 

AJAX FETCH CONTENT

cb.load({
  page : "PAGE", // http://site.com/PAGE/
  target : "cb-page-2", // target html element to load content into
  data : { "KEY" : "VALUE" },
  loading : true/false, // show loading screen? default false.
  debug : true/false, // debug mode? default false.
  onload : FUNCTION, // do this on content load, optional.
  onerr : FUNCTION // do this on ajax error, optional.
});

 

SINGLE PAGE APP

• There are 5 <div id="cb-page-N"> in the main content area.
• By default, we use cb-page-1 to display the content; cb-page-2 to cb-page-5 are hidden.
• We can use cb.lad() to AJAX load more content into cb-page-N, then use cb.page(N) to switch pages.

cb.load({
  page : "MYPAGE",
  target : "cb-page-2",
  data : { "KEY" : "VALUE" },
  onload : () => { cb.page(2); }
});

 

DEFINE PAGE TITLE & DESC

$_PMETA = [
  "title" => "FOO BAR TITLE",
  "desc" => "Test page title"
];
require PATH_PAGES . "TEMPLATE-top.php"; ?>
<p>Contents Here.</p>
<?php require PATH_PAGES . "TEMPLATE-bottom.php"; ?>

Just define $_PMETA["title"] and $_PMETA["desc"] before including TEMPLATE-top.php.

 

LOADING MORE JS & CSS

$_PMETA = [
  "load" => [
    ["s", "https://site.com/some.js", "defer"],
    ["s", "https://cdnjs.com/some.js", "async"],
    ["l", "https://site.com/some.css"]
  ]
];
require PATH_PAGES . "TEMPLATE-top.php"; ?>
<p>Contents Here.</p>
<?php require PATH_PAGES . "TEMPLATE-bottom.php"; ?>

You can edit the template and hard code them in. Or if it is just for a specific page – Define the list of scripts to load in $_PMETA["load"] before including TEMPLATE-top.php.