Core Boxx – HTML Javascript Template

LIST OF FILES

• 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.
• pages/PAGE-tut-1~6.php “Very Quick Tutorial”.
• pages/PAGE-about.php About Core Boxx page.
• assets/PAGE-cb.js Standard Core Boxx HTML-Javascript interface.

 

LIBRARIES & FRAMEWORKS

The default Core Boxx HTML template is built using Bootstrap and Material Icons.

Feel free to redevelop the entire HTML interface if you don’t like it. The bare minimum you need is PAGE-home.php and PAGE-404.php.

 

 

COMMON HTML/JAVASCRIPT INTERFACE

PAGE LOAD SPINNER

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

 

TOAST MESSAGE

// "QUESTION" TOAST MESSAGE
cb.toast(2, "TITLE", "MESSAGE");

// "SUCCESS" TOAST MESSAGE
cb.toast(1, "TITLE", "MESSAGE");
 
// "FAILURE" TOAST MESSAGE
cb.toast(0, "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",
  act : "ACTION",
  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 : "ID",              // target html element to load content into
  data : { "KEY" : "VALUE" }, // data to send, if any.
  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.load() 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

<?php
$_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.