Core Boxx – HTML Javascript Template

TABLE OF CONTENTS

 

 

FILES LIST

• pages/TEMPLATE-top.php Top half of the HTML template.
• pages/TEMPLATE-bottom.php Bottom half of the HTML template.
• pages/PAGE-home.php Default home page.
• pages/PAGE-404.php Default “not found” page.
• pages/PAGE-empty.php Empty page template.
• pages/PAGE-demo-clean.php Access this page to delete all demo pages and start fresh.
• pages/PAGE-demo-html.php HTML template walk-through.
• pages/PAGE-demo-icomoon.php List of icons.
• pages/PAGE-demo-php.php List of PHP available variables on all pages.
• pages/PAGE-demo-transit.php List of transition animations.
• assets/PAGE-cb.js Standard Core Boxx HTML-Javascript interface.
• lib/LIB-CCache.php Related to the service worker/client-side assets cache.

 

NOTES

• 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.

 

SERVICE WORKER & CACHE STORAGE

• Long story short – This template creates a Javascript Cache Storage to save assets files and install a service worker to speed up loading.
• $_CORE->CCache->init() will create CB-cache-files.json, a list of files to cache in the assets folder.
• Edit CCache->init() to add/remove files that you want to cache.
• Simply run CCache->init() again to update CB-cache-files.json, this will also force all clients to flush and update their Cache Storage.

 

 

 

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.
  noerr : true/false,              // supress "ajax failed/bad server response" messages? default false. 
  passmsg : "Add user successful", // toast message to show on success, false for none.
  nofail : true/false,             // supress "process 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 fetch/server 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.
  noerr : true/false,         // supress "ajax failed/bad server response" messages? 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.