1. Module bundling added to reduce server calls as each file was taking ~440 ms to load on public server.\n2. JavaScript lib files refactored with OOP for use with module bundling.

2024-09-10 19:43:02 +01:00
parent aac01e687f
commit 0c88f161c3
7678 changed files with 778712 additions and 1254 deletions
--- a/static/dist/css/main.css
+++ b/static/dist/css/main.css
@@ -0,0 +1,684 @@
+
+
+
+
+
+
+
+
+
+
+
+
+#overlayConfirm {
+    position: absolute;
+    left: 25vw;
+    width: 50vw;
+    height: 50vh;
+}
+.img-product {
+    max-width: 20vh;
+    max-height: 20vh;
+    border-radius: 3vh;
+    justify-self: left;
+}
+
+.img-thumbnail {
+    max-width: 10vh;
+    max-height: 10vh;
+    border-radius: 3vh;
+    justify-self: left;
+}
+
+.buttonAdd2Basket {
+    background-color: var(--c_blue_pastel);
+    color: var(--c_blue_dark);
+    border-color: var(--c_blue_dark);
+}
+
+#buttonCheckout, .buttonBuyNow {
+    background-color: var(--c_purple_pastel);
+    color: var(--c_purple_dark);
+    border-color: var(--c_purple_dark);
+}
+
+.button-increment, .button-decrement {
+    border: 2px solid darkgrey;
+    background-color: lightgray;
+    margin: 1vh 1vh;
+    width: 2.5vh;
+    height: 2.5vh;
+    border-radius: 1.25vh;
+    font-size: 2vh;
+}
+
+.container-input > input {
+    padding: 0vh 1vh;
+    border-radius: 0.5vh;
+    max-width: 7vh;
+}
+
+#basket {
+    max-width: 100%;
+}
+
+
+
+/* Right column */
+.rightcolumn {
+    min-width: fit-content;
+}
+
+/* Base styles */
+
+/* Layout styles */
+
+/* Component styles */
+
+/* Section styles */
+
+/* Page-specific styles *
+@import 'pages/page_admin.css';
+@import 'pages/page_contact.css';
+@import 'pages/page_home.css';
+@import 'pages/page_license.css';
+@import 'pages/page_services.css';
+@import 'pages/page_store_home.css';
+@import 'pages/page_store_product_permutations.css';
+@import 'pages/page_store_stock_items.css';
+*/
+
+/* Theme styles *
+@import 'themes/light.css';
+/* Uncomment the line below to enable dark theme */
+/* @import 'themes/dark.css'; */
+
+/* Custom styles */
+/* Add any custom styles or overrides here */
+
+body {
+    /* Example of using a CSS variable defined in variables.css */
+    background-color: var(--background-color);
+    color: var(--text-color);
+    font-family: var(--font-family-base);
+}
+
+/* You can add more global styles here */
+
+
+:root {
+    /* Declare global variables */
+    --c_purple: #5B29FF;
+    --c_purple_pastel: #D1D1FF;
+    --c_purple_light: #C6BDFF;
+    --c_purple_dark: #4700B3;
+    --c_blue: #0044FF;
+    --c_blue_pastel: #B8E0FF;
+    --c_blue_light: #73E8FF;
+    --c_blue_dark: #003ADB;
+}
+
+*{
+    /*box-sizing: border-box; */
+    margin: 0;
+}
+
+script, link {
+    display: none !important;
+}
+
+html {
+    height: 100%;
+}
+
+body {
+    font-family: Arial;
+    padding: 0;
+    margin: 0;
+    border: 0;
+    background: linear-gradient(to bottom right, var(--c_purple), #dc2430); /* var(--c_purple_pastel); */
+    height: 100vh;
+    max-height: 100%;
+}
+
+/*
+h1, h2, h3, h4, h5, p, a, label {
+    display: flex;
+    margin: 0;
+    padding: 0;
+}
+*/
+
+h1 {
+    font-size: 24px;
+}
+
+h2 {
+    font-size: 22px;
+}
+
+h3 {
+    font-size: 18px;
+    margin-top: 1vh;
+}
+
+h4 {
+    font-size: 13px;
+    margin: 1vh;
+    text-align: center;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+h5 {
+    font-size: 11px;
+    margin: 1vh;
+}
+
+/* Style the top navigation bar */
+.topnav {
+    /* overflow: hidden; */
+    /* background-color: var(--c_purple); */
+    border-bottom-left-radius: 2.5vh;
+    border-bottom-right-radius: 2.5vh;
+    display: flex;
+    flex-wrap: wrap;
+    flex: 1;
+    flex-direction: row;
+    font-weight: bold;
+    font-size: 1vh;
+    max-height: 15vh;
+    height: 15vh;
+    align-items: flex-start;
+}
+
+/* Style the topnav links */
+.topnav a, .topnav label, .topnav p, .topnav h1 {
+    float: left;
+    display: flex;
+    color: white;
+    text-align: center;
+    /* padding: 14px 16px; */
+    text-decoration: none;
+    width: 100%;
+    max-height: 15vh;
+    font-weight: normal;
+    /* font-size: 20px; */
+    justify-content: center;
+}
+/*
+.topnav a {
+    padding: 3vh 2vw;
+}
+*/
+
+/* Change color on hover */
+.topnav a:hover {
+    background-color: var(--c_purple_light);
+    color: var(--c_purple_dark);
+}
+
+.topnav > .container {
+    max-width: 50%;
+    height: 100%;
+    align-items: center;
+    align-self: center;
+    /* align-content: center; */
+    /* width: fit-content; */
+    display: flex;
+}
+
+.topnav select {
+    padding: 1vh;
+    margin: 1vh;
+    border-radius: 1vh;
+    /* background-color: var(--c_purple_light); */
+    color: var(--c_purple_dark);
+    border: 2px solid white;
+    font-weight: bold;
+    text-align: center;
+}
+.topnav select .collapsed {
+    width: 5vw;
+}
+.topnav select .expanded {
+    width: 25vw;
+}
+
+
+.company-name {
+    font-size: min(28px, calc(1vh * 7));
+    color: white;
+}
+@media screen and (max-width: 450px) {
+    .company-name {
+        font-size: min(24px, calc(1vh * 7));
+    }
+}
+
+
+#pageBody {
+    height: 69vh !important;
+    padding: 1vh;
+    padding-left: 1vw;
+    padding-right: 1vw;
+    margin: 1vh;
+    margin-left: 0;
+    margin-right: 0;
+    border: 0;
+    align-content: center;
+    justify-content: flex-start;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    overflow-y: auto;
+    overflow-x: hidden;
+    position: absolute;
+    width: 98vw;
+
+}
+
+.page-body > * {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    width: 100%;
+    align-self: center;
+    font-size: min(20px, calc(1vh * 6));
+}
+#pageBody > * > * {
+    width: 100%;
+    align-self: center;
+    padding-top: 1vh;
+    padding-bottom: 1vh;
+    color: var(--c_purple_dark);
+}
+#pageBody > .card {
+    height: fit-content;
+    margin-top: 1vh;
+}
+#pageBody > .card:first-of-type{
+    margin-top: 0vh;
+    top: 0;
+}
+#pageBody > .card:last-of-type {
+    /* margin-bottom: 1vh; */
+}
+/* Create two unequal columns that floats next to each other *
+/* Left column *
+.leftcolumn {   
+    float: left;
+    width: 70%;
+    display: flex;
+    flex-wrap: wrap;
+    /* min-width: fit-content; *
+    align-items: center;
+    justify-content: center;
+}
+
+/* Right column *
+.rightcolumn {
+    float: left;
+    width: 30%;
+    display: flex;
+    flex-wrap: wrap;
+    /* min-width: fit-content; only on store?? *
+    /* background-color: #f1f1f1; *
+    padding-left: 20px;
+    height: fit-content;
+    align-items: center;
+    justify-content: center;
+}
+*/
+
+/* Fake image */
+.fakeimg {
+    background-color: var(--c_purple_light);
+    width: 100%;
+    padding: 20px;
+}
+
+img, video {
+    border-radius: 3vh;
+}
+
+/* header image */
+img.header-logo {
+    max-height: 15vh;
+    max-width: 20vw;
+    cursor: pointer;
+    border-radius: 5vh !important;
+}
+
+/* icon images */
+.img-icon {
+    max-width: 16vh;
+    max-height: 8vh;
+    border-radius: 0;
+}
+
+.container-icon-label {
+    padding: 0;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+}
+
+.container-icon-label > * {
+    display: inline-flex;
+    margin-left: 1vh;
+    margin-right: 1vh;
+}
+
+.header > .container:first-of-type {
+    max-width: 25%;
+    justify-self: left;
+}
+.header > .container:last-of-type {
+    max-width: 75%;
+    justify-self: left;
+}
+
+/* Add a card effect for articles */
+.card {
+    background-color: var(--c_purple_pastel);
+    padding: 1vh;
+    margin: 1vh;
+    display: flex !important;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    border-radius: 4vh;
+    /* min-width: fit-content; */
+    position: relative;
+    height: fit-content;
+    max-width: 80vw;
+    padding-left: 2.5vw;
+    padding-right: 2.5vw;
+}
+
+.card.subcard {
+    margin-top: 0;
+}
+
+.header.card {
+    border-radius: 2.5vh;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.container {
+    flex: 1;
+    margin: 0px;
+    align-items: flex-start;
+    justify-content: flex-start;
+    text-align: flex-start;
+    /* max-width: 100%; */
+    /* min-width: fit-content; */
+}
+
+.column {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.row {
+    display: flex; 
+    flex-direction: row;
+    width: 100%;
+    /* min-width: fit-content; */
+}
+
+.container > .card:first-of-type {
+    margin-top: none;
+}
+
+
+/* Clear floats after the columns 
+.row:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+*/
+/* Footer */
+.footer {
+    padding: 1vh;
+    padding-left: 1vw;
+    padding-right: 1vw;
+    text-align: center;
+    margin: 0;
+    height: 8vh !important;
+    overflow-y: auto;
+    background-color: var(--c_purple_pastel);
+    border-top-left-radius: 2.5vh;
+    border-top-right-radius: 2.5vh;
+    position: absolute;
+    /* top: 2.5vh; */
+    bottom: 0;
+    width: 98vw;
+}
+
+.footer > h4, h5 {
+    padding: 0;
+    margin: 0;
+}
+
+/*
+/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other *
+@media screen and (max-width: 800px) {
+    .leftcolumn, .rightcolumn {   
+        width: 100%;
+        /* padding: 0; *
+    }
+}
+
+/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other *
+@media screen and (max-width: 400px) {
+    .topnav a {
+        float: none;
+        width: 100%;
+    }
+}
+*/
+
+/* input container 
+    margin-top: 3vh;
+    */
+.container-input {
+    padding: 1vh;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+}
+
+.container-input > label {
+    width: 100%;
+    margin-bottom: 1vh;
+    margin-top: 0;
+}
+
+.container-input:not(:nth-child(3)) > label {
+    margin-top: 1vh;
+}
+
+.container-input > input, .container-input > textarea {
+    border: 2px solid var(--c_purple);
+    max-width: 66%;
+    min-width: 20%;
+    padding: 1vh;
+}
+
+.label-title {
+    width: 100%;
+}
+
+button, .button-submit, input[type="submit"] {
+    font-size: 20px;
+    font-weight: bold;
+    border: 4px solid;
+    border-radius: 2vh;
+    padding: 1vh 2vh 1vh 2vh;
+    margin: 0.5vh;
+    /*
+    background-color: var(--c_blue_pastel);
+    color: var(--c_blue_dark);
+    border-color: var(--c_blue_dark);
+    */
+    background-color: var(--c_purple_pastel);
+    color: var(--c_purple_dark);
+    border-color: var(--c_purple_dark);
+}
+button.navContactUs {
+    border: 4px solid var(--c_purple_dark);
+    background-color: var(--c_purple_pastel);
+    color: var(--c_purple_dark) !important;
+    border-radius: 2vh;
+    width: 180px !important;
+}
+button:hover, input[type="submit"]:hover, #overlayHamburger .row *:hover {
+    text-decoration: underline;
+}
+#buttonHamburger:hover {
+    text-decoration: none;
+}
+
+.delete {
+    text-decoration: underline;
+}
+
+
+/* Overlay modal */
+.overlay {
+    /*
+    display: none;
+    */
+    position: fixed;
+    top: 15vh;
+    right: 0;
+    width: 100px;
+    /* height: 50%; */ 
+    background: var(--c_purple_pastel);
+    justify-content: right;
+    align-items: right;
+    align-self: right;
+    z-index: 999;
+}
+.overlay.expanded {
+    display: block !important;
+}
+.collapsed {
+    display: none !important;
+}
+
+#overlayHamburger {
+    overflow-x: hidden;
+    overflow-y: auto;
+    max-height: 80%;
+}
+.hamburger {
+    border: 2px solid var(--c_purple_dark);
+    border-radius: 4px;
+}
+.hamburger:first-child {
+    border-top-left-radius: 12px;
+    border-top-right-radius: 12px;
+}
+.hamburger:last-child {
+    border-bottom-left-radius: 12px;
+    border-bottom-right-radius: 12px;
+}
+
+.hamburger > * {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    width: 100%;
+    color: var(--c_purple_dark);
+    font-weight: bold;
+    font-size: 18px;
+    /* height: 18px; */
+}
+.hamburger > :hover {
+    background-color: var(--c_purple_light);
+    color: var(--c_purple_dark);
+}
+.hamburger > * > * {
+    width: 100%;
+    /*
+    margin-top: 4.5px;
+    margin-bottom: 4.5px;
+    */
+}
+.hamburger > .container {
+    padding-top: 4.5px;
+    padding-bottom: 4.5px;
+}
+
+ul {
+    max-width: 90%;
+}
+li {
+    text-align: left;
+    font-size: 18px;
+}
+
+
+.dirty {
+    /* color: var(--c_purple_dark); */
+    border-color: var(--c_purple_dark);
+}
+td.dirty {
+    background-color: var(--c_purple_dark);
+}
+
+
+/* Tables */
+#pageBody > *, button {
+    font-size: min(14px, calc(1vh * 5)) !important;
+}
+thead, tbody {
+    padding-top: 0px !important;
+    padding-bottom: 0px !important;
+}
+
+th {
+    
+}
+td {
+    font-size: min(14px, calc(1vh * 5));
+}
+
+th, td {
+    min-width: fit-content;
+}
+tr:not(:last-child) > td {
+    border-bottom: 1px dashed var(--c_purple_dark);
+}
+td > table > tbody > tr > td {
+    border: none !important;
+}
+tr {
+    min-height: 1px;
+    border-bottom: 1px solid var(--c_purple_dark);
+    border-top: 1px solid var(--c_purple_dark);
+    padding-bottom: 1vh;
+    background-color: transparent;
+}
+
+/*
+.row-new {
+    visibility: hidden;
+}
+*/
+
--- a/static/dist/js/144.bundle.js
+++ b/static/dist/js/144.bundle.js
--- a/static/dist/js/17.bundle.js
+++ b/static/dist/js/17.bundle.js
--- a/static/dist/js/312.bundle.js
+++ b/static/dist/js/312.bundle.js
--- a/static/dist/js/623.bundle.js
+++ b/static/dist/js/623.bundle.js
--- a/static/dist/js/722.bundle.js
+++ b/static/dist/js/722.bundle.js
--- a/static/dist/js/765.bundle.js
+++ b/static/dist/js/765.bundle.js
--- a/static/dist/js/835.bundle.js
+++ b/static/dist/js/835.bundle.js
--- a/static/dist/js/916.bundle.js
+++ b/static/dist/js/916.bundle.js
--- a/static/dist/js/main.bundle.js
+++ b/static/dist/js/main.bundle.js
--- a/static/dist/js/main.bundle.js.LICENSE.txt
+++ b/static/dist/js/main.bundle.js.LICENSE.txt
@@ -0,0 +1 @@
+/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
--- a/static/js/DEPRECATED/init.js
+++ b/static/js/DEPRECATED/init.js
--- a/static/js/DEPRECATED/main.js
+++ b/static/js/DEPRECATED/main.js
--- a/static/js/DEPRECATED/routing.js
+++ b/static/js/DEPRECATED/routing.js
@@ -1,4 +1,6 @@

+import Validation from "./lib/validation";
+
 function mapHashToController(hash) {
    if (hash == null) return mapHashToController(hashPageHome);

@@ -40,7 +42,7 @@ function goToPage(pageHash, parametersJSON) {
    url = mapHashToController(pageHash);

    
-    if (!isEmpty(parametersJSON)) {
+    if (!Validation.isEmpty(parametersJSON)) {
        url += '%3F'; // '?';
        let firstParameter = true;
        for (var p in parametersJSON) {
--- a/static/js/components/input_date.js
+++ b/static/js/components/input_date.js
@@ -1,10 +1,12 @@

+import Validation from "./lib/validation";
+

 // Date picker inputs
 /*
 function hookupInputDatePickers(dateInputs, notFuture, notPast, parent, addClearOption) {

-    if (!isEmpty(dateInputs)) {
+    if (!Validation.isEmpty(dateInputs)) {

        let currentInput, currentDateString, currentDate, exceptionsArray;

@@ -12,13 +14,13 @@ function hookupInputDatePickers(dateInputs, notFuture, notPast, parent, addClear

            currentInput = document.querySelectorAll(dateInputs[i]);
            currentDateString = currentInput.val();
-            currentDate = (!isEmpty(currentDateString)) ? convertDDMMYYYYString2Date(currentDateString, false) : null;
+            currentDate = (!Validation.isEmpty(currentDateString)) ? convertDDMMYYYYString2Date(currentDateString, false) : null;
            exceptionsArray = (currentDate != null) ? [currentDate] : null;

            turnInputIntoDatePicker(currentInput, notFuture, notPast, exceptionsArray);
        }

-        if (!isEmpty(parent)) {
+        if (!Validation.isEmpty(parent)) {
            // stop user from manually typing date except backspace and delete
            // which will clear the whole value to ensure we either have a whole
            // date string or none
@@ -50,7 +52,7 @@ function hookupInputDatePickers(dateInputs, notFuture, notPast, parent, addClear
                        "clears": {
                            name: "Clear Date",
                            icon: "delete",
-                            disabled: function(key, opt) { return isEmpty(document.querySelectorAll(opt.$trigger)); }, // if it's already empty, don't do anything
+                            disabled: function(key, opt) { return Validation.isEmpty(document.querySelectorAll(opt.$trigger)); }, // if it's already empty, don't do anything
                            callback: function(itemKey, opt, rootMenu, originalEvent) { var input = document.querySelectorAll(opt.$trigger); input.val(''); input.trigger('change'); }
                        }
                    }
@@ -73,12 +75,12 @@ function turnInputIntoDatePicker(input, notFuture, notPast, exceptionValueArray)
        tomorrow.setDate(today.getDate() + 1);
        tomorrow.setHours(0, 0, 0, 0);

-        var hasExceptions = !isEmpty(exceptionValueArray);
+        var hasExceptions = !Validation.isEmpty(exceptionValueArray);

        beforeShowDayCallBack = function(date) {

            var selectedDate = date.getTime();
-            var fieldHasException = hasExceptions && arrayContainsItem(exceptionValueArray, date);
+            var fieldHasException = hasExceptions && Validation.arrayContainsItem(exceptionValueArray, date);

            if (notFuture && (tomorrow < selectedDate) && fieldHasException) return [false, 'redday', 'You cannot choose a future date'];
            if (notPast && (selectedDate < today) && fieldHasException) return [false, 'redday', 'You cannot choose a past date'];
@@ -101,7 +103,7 @@ function turnInputIntoDatePicker(input, notFuture, notPast, exceptionValueArray)
 }

 function setDatePickerDate(input, objDate) {
-    if (!isEmpty(objDate)) {
+    if (!Validation.isEmpty(objDate)) {
        input.val('');
    }
    else {
@@ -113,7 +115,7 @@ function getDatePickerDate(input, adjust4DayLightSavings) {

    var date = null;

-    if (!isEmpty(input)) {
+    if (!Validation.isEmpty(input)) {
        date = input.datepicker('getDate');

        if (adjust4DayLightSavings) {
@@ -128,13 +130,13 @@ function formatDateDayLightSavingsTime(date) {
    // JSON.stringify removes hour delta for daylight savings 
    // e.g. 13/11/2023 01:00:00 goes to 13/11/2023 00:00:00
    // this adds an hour so it becomes the correct time when stringified
-    if (!isEmpty(date)) {
+    if (!Validation.isEmpty(date)) {
        date.setTime(date.getTime() - date.getTimezoneOffset() * 60 * 1000)
    }
 }
 */
 function convertJSONDateString2Date(dateStr) {
-    if (isEmpty(dateStr)) return null;
+    if (Validation.isEmpty(dateStr)) return null;
    if (dateStr instanceof Date) return dateStr;
    return new Date(parseInt(dateStr.substr(6)));
 }
@@ -142,7 +144,7 @@ function convertJSONDateString2Date(dateStr) {
 function convertDDMMYYYYString2Date(dateStr, adjust4DayLightSavings) {
    var date = null;

-    if (!isEmpty(dateStr)) {
+    if (!Validation.isEmpty(dateStr)) {
        if (dateStr instanceof Date) {
            date = dateStr;
        }
@@ -154,7 +156,7 @@ function convertDDMMYYYYString2Date(dateStr, adjust4DayLightSavings) {
            }
        }

-        if (adjust4DayLightSavings && !isEmpty(date)) {
+        if (adjust4DayLightSavings && !Validation.isEmpty(date)) {
            formatDateDayLightSavingsTime(date);
        }
    }
@@ -163,7 +165,7 @@ function convertDDMMYYYYString2Date(dateStr, adjust4DayLightSavings) {
 }

 function convertDate2DDMMYYYYString(date) {
-    if (isEmpty(date)) return '';
+    if (Validation.isEmpty(date)) return '';

    try {
        var dd = date.getDate();
--- a/static/js/components/table.js
+++ b/static/js/components/table.js
@@ -1,18 +1,21 @@

+import Validation from "./lib/validation";
+

-// Data tables
-function getDataTableCellByNode(table, elRow, indexColumn) {
-    // normal jQuery selector won't pick up hidden columns
-    return document.querySelectorAll(table.DataTable().cells(elRow, indexColumn, null).nodes());
-}
-
-function outputTableElementDateInput(table, elRow, indexColumn, value) {
-
-    let currentCell = getDataTableCellByNode(table, elRow, indexColumn);
-
-    let dateTxt = '';
-
-    if (!isEmpty(value)) {
-        if (typeof value === 'string') value = convertJSONDateString2Date(value);
+export default class Table {
+    getDataTableCellByNode(table, elRow, indexColumn) {
+        // normal jQuery selector won't pick up hidden columns
+        return document.querySelectorAll(table.DataTable().cells(elRow, indexColumn, null).nodes());
    }
+    
+    outputTableElementDateInput(table, elRow, indexColumn, value) {
+    
+        let currentCell = getDataTableCellByNode(table, elRow, indexColumn);
+    
+        let dateTxt = '';
+    
+        if (!Validation.isEmpty(value)) {
+            if (typeof value === 'string') value = convertJSONDateString2Date(value);
+        }
+    }    
 }
--- a/static/js/components/textarea.js
+++ b/static/js/components/textarea.js
@@ -1,41 +1,44 @@

-function removeBlankTextAreaLines(textarea) {
-    textarea.val(textarea.val.replace(/(?:(?:\r\n|\r|\n)\s*){2}/gm, ''));
-}
+import Validation from "./lib/validation";

-function fitTextAreasToContent(parent) {
-    var textareas = parent.querySelector('textarea');
+export default class TextArea {
+    removeBlankTextAreaLines(textarea) {
+        textarea.val(textarea.val.replace(/(?:(?:\r\n|\r|\n)\s*){2}/gm, ''));
+    }

-    if (!isEmpty(textareas)) {
-        for (var t = 0; t < textareas.length; t++) {
-            fitTextAreaToContent(document.querySelectorAll(textareas[t]));
+    fitTextAreasToContent(parent) {
+        var textareas = parent.querySelector('textarea');
+
+        if (!Validation.isEmpty(textareas)) {
+            for (var t = 0; t < textareas.length; t++) {
+                fitTextAreaToContent(document.querySelectorAll(textareas[t]));
+            }
        }
    }
+
+    fitTextAreaToContent(textarea) {
+        // Trim new text
+        var txtNew = textarea.val().trim();
+        textarea.val(txtNew);
+
+        var elTextarea = textarea[0];
+
+        // Clear style height and set rows = 1
+        elTextarea.style.removeProperty('height');
+        textarea.attr('rows', 1);
+
+        const paddingTop = parseCSSPropertyToFloat(textarea, 'padding-top');
+        const paddingBottom= parseCSSPropertyToFloat(textarea, 'padding-bottom');
+        const borderTop = parseCSSPropertyToFloat(textarea, 'border-top');
+        const borderBottom = parseCSSPropertyToFloat(textarea, 'border-bottom');
+        let heightDelta = paddingTop + paddingBottom + borderTop + borderBottom;
+        let heightNew = elTextarea.scrollHeight + heightDelta;
+
+        // If new height is less than 1 linem default to single line height
+        const heightSingleLine = parseCSSPropertyToFloat(textarea, 'line-height') + heightDelta;
+        if (heightNew < heightSingleLine) heightNew = heightSingleLine;
+
+        elTextarea.style.height = heightNew + 'px';
+    }
 }

-function fitTextAreaToContent(textarea) {
-    // Trim new text
-    var txtNew = textarea.val().trim();
-    textarea.val(txtNew);
-
-    var elTextarea = textarea[0];
-
-    // Clear style height and set rows = 1
-    elTextarea.style.removeProperty('height');
-    textarea.attr('rows', 1);
-
-    const paddingTop = parseCSSPropertyToFloat(textarea, 'padding-top');
-    const paddingBottom= parseCSSPropertyToFloat(textarea, 'padding-bottom');
-    const borderTop = parseCSSPropertyToFloat(textarea, 'border-top');
-    const borderBottom = parseCSSPropertyToFloat(textarea, 'border-bottom');
-    let heightDelta = paddingTop + paddingBottom + borderTop + borderBottom;
-    let heightNew = elTextarea.scrollHeight + heightDelta;
-
-    // If new height is less than 1 linem default to single line height
-    const heightSingleLine = parseCSSPropertyToFloat(textarea, 'line-height') + heightDelta;
-    if (heightNew < heightSingleLine) heightNew = heightSingleLine;
-
-    elTextarea.style.height = heightNew + 'px';
-}
-
-
--- a/static/js/dom.js
+++ b/static/js/dom.js
@@ -1,3 +1,6 @@
+
+import Validation from "./lib/validation";
+
 // Module for DOM manipulation
 export default class DOM {
    static setElementValueCurrent(element, data) {
@@ -23,7 +26,7 @@ export default class DOM {
    }
    static convertForm2JSON(elementForm) {
        let dataForm = {};
-        if (isEmpty(elementForm)) {
+        if (Validation.isEmpty(elementForm)) {
            console.log("empty form element");
            return dataForm;
        }
@@ -64,7 +67,7 @@ export default class DOM {
    static getElementValueCurrent(element) {
        let returnVal = '';
    
-        if (!isEmpty(element)) {
+        if (!Validation.isEmpty(element)) {
    
            if (element.type === "checkbox") {
                returnVal = element.checked;
@@ -82,7 +85,7 @@ export default class DOM {
            }
        }
    
-        if (isEmpty(returnVal)) returnVal = '';
+        if (Validation.isEmpty(returnVal)) returnVal = '';
    
        return returnVal;
    }
@@ -107,4 +110,28 @@ export default class DOM {
    /* non-static method on page object to use
    static handleChangeElement(element) {}
    */
+    scrollToElement(parent, element) {
+        // REQUIRED: parent has scroll-bar
+        parent.scrollTop(parent.scrollTop() + (element.offset().top - parent.offset().top));
+    }
+    isElementInContainer(container, element) {
+
+        if (typeof jQuery === 'function') {
+            if (container instanceof jQuery) container = container[0];
+            if (element instanceof jQuery) element = element[0];
+        }
+
+        var containerBounds = container.getBoundingClientRect();
+        var elementBounds = element.getBoundingClientRect();
+
+        return (
+            containerBounds.top <= elementBounds.top &&
+            containerBounds.left <= elementBounds.left &&
+            ((elementBounds.top + elementBounds.height) <= (containerBounds.top + containerBounds.height)) &&
+            ((elementBounds.left + elementBounds.width) <= (containerBounds.left + containerBounds.width))
+        );
+    }
+    alertError(errorType, errorText) {
+        alert(errorType + '\n' + errorText);
+    }
 }
--- a/static/js/lib/common.js
+++ b/static/js/lib/common.js
@@ -1,117 +1,85 @@

+import Validation from "./validation";

-function parseCSSPropertyToFloat(element, propertyName) {
-    var propertyText = element.css(propertyName);
+export default class Common {
+    static parseCSSPropertyToFloat(element, propertyName) {
+        var propertyText = element.css(propertyName);

-    if (!isEmpty(propertyText)) {
+        if (!Validation.isEmpty(propertyText)) {

-        propertyText = propertyText.replace('px', '');
+            propertyText = propertyText.replace('px', '');

-        if (!isValidNumber(propertyText, true)) return parseFloat(propertyText);
+            if (!Validation.isValidNumber(propertyText, true)) return parseFloat(propertyText);
+        }
+
+        return 0.00;
    }

-    return 0.00;
-}
-
-function scrollToElement(parent, element) {
-    // REQUIRED: parent has scroll-bar
-    parent.scrollTop(parent.scrollTop() + (element.offset().top - parent.offset().top));
-}
-
-function isElementInContainer(container, element) {
-
-    if (typeof jQuery === 'function') {
-        if (container instanceof jQuery) container = container[0];
-        if (element instanceof jQuery) element = element[0];
-    }
-
-    var containerBounds = container.getBoundingClientRect();
-    var elementBounds = element.getBoundingClientRect();
-
-    return (
-        containerBounds.top <= elementBounds.top &&
-        containerBounds.left <= elementBounds.left &&
-        ((elementBounds.top + elementBounds.height) <= (containerBounds.top + containerBounds.height)) &&
-        ((elementBounds.left + elementBounds.width) <= (containerBounds.left + containerBounds.width))
-    );
-}
-
-function getRowFromElement(element) {
-    return document.querySelectorAll(element).closest('tr');
-}
-
-function getCellFromElement(element) {
-    return document.querySelectorAll(element).closest('td');
-}
-
-function alertError(errorType, errorText) {
-    alert(errorType + '\n' + errorText);
-}
-
-function setPageToLoading(isLoading) {
-
-    if (isLoading) {
-        document.querySelectorAll(document.body).classList.add(_dataLoadingFlag);
-    }
-    else {
-        document.querySelectorAll(document.body).classList.remove(_dataLoadingFlag);
-    }
-}
-
-function setBackgroundToLoading(elId, isLoading) {
-
-    if (isEmpty(el)) {
-
-        var elObj = document.querySelectorAll(elId);
+    static setPageToLoading(isLoading) {

        if (isLoading) {
-
-            setTimeout(function() {
-                elObj.innerHTML = "";
-                elObj.css({
-                    "background-image": "url(" + urlImgLoading + ")",
-                    "background-position": "center",
-                    "background-repeat": "no-repeat"
-                });
-            }, 0);
+            document.querySelectorAll(document.body).classList.add(_dataLoadingFlag);
        }
        else {
-            elObj.css("background-image", "");
+            document.querySelectorAll(document.body).classList.remove(_dataLoadingFlag);
        }
    }
-}

-function allowClick() {
-    return !document.querySelectorAll("body").classList.contains(_dataLoadingFlag);
-}
+    static setBackgroundToLoading(elId, isLoading) {

-function displayOverlay(message, show, force) {
+        if (Validation.isEmpty(el)) {

-    if (show) {
-        _overlayLoadingCount += 1;
-    }
-    else if (force) {
-        _overlayLoadingCount = 0;
-    }
-    else {
-        _overlayLoadingCount -= 1;
-        if (_overlayLoadingCount < 0) _overlayLoadingCount = 0;
+            var elObj = document.querySelectorAll(elId);
+
+            if (isLoading) {
+
+                setTimeout(function() {
+                    elObj.innerHTML = "";
+                    elObj.css({
+                        "background-image": "url(" + urlImgLoading + ")",
+                        "background-position": "center",
+                        "background-repeat": "no-repeat"
+                    });
+                }, 0);
+            }
+            else {
+                elObj.css("background-image", "");
+            }
+        }
    }

-    var loadingImg = document.querySelectorAll(idImageLoading);
-    var overlay = document.querySelectorAll(loadingImg.closest("div.overlay"));
-
-    if (_overlayLoadingCount == 0) {
-
-        // Prevent short glimpse of prev. content before switch to new content
-        // caused by data load but not fully rendered
-        setTimeout(function() {
-            overlay.fadeOut();
-        }, 100);
+    static allowClick() {
+        return !document.querySelectorAll("body").classList.contains(_dataLoadingFlag);
    }
-    else if (show && _overlayLoadingCount == 1) {
-        // only show once
-        loadingImg.innerHTML = message;
-        overlay.style.display = "";
+
+    static displayOverlay(message, show, force) {
+
+        if (show) {
+            _overlayLoadingCount += 1;
+        }
+        else if (force) {
+            _overlayLoadingCount = 0;
+        }
+        else {
+            _overlayLoadingCount -= 1;
+            if (_overlayLoadingCount < 0) _overlayLoadingCount = 0;
+        }
+
+        var loadingImg = document.querySelectorAll(idImageLoading);
+        var overlay = document.querySelectorAll(loadingImg.closest("div.overlay"));
+
+        if (_overlayLoadingCount == 0) {
+
+            // Prevent short glimpse of prev. content before switch to new content
+            // caused by data load but not fully rendered
+            setTimeout(function() {
+                overlay.fadeOut();
+            }, 100);
+        }
+        else if (show && _overlayLoadingCount == 1) {
+            // only show once
+            loadingImg.innerHTML = message;
+            overlay.style.display = "";
+        }
    }
-}
+}
--- a/static/js/lib/constants.js
+++ b/static/js/lib/constants.js
@@ -3,5 +3,4 @@ const _dataLoadingFlag = 'data-loading'
 var _domParser = null;
 // var hashPageCurrent; // moved to layout
 const keyPublicStripe = 'pk_test_51OGrxlL7BuLKjoMpfpfw7bSmZZK1MhqMoQ5VhW2jUj7YtoEejO4vqnxKPiqTHHuh9U4qqkywbPCSI9TpFKtr4SYH007KHMWs68';
-var _pageCurrent = null;
 var _verbose = true;
--- a/static/js/lib/events.js
+++ b/static/js/lib/events.js
@@ -1,8 +1,10 @@

-function initialiseEventHandler(selectorElement, classInitialised, eventHandler) {
-    document.querySelectorAll(selectorElement).forEach(function(element) {
-        if (element.classList.contains(classInitialised)) return;
-        element.classList.add(classInitialised);
-        eventHandler(element);
-    });
+export default class Events {
+    static initialiseEventHandler(selectorElement, classInitialised, eventHandler) {
+        document.querySelectorAll(selectorElement).forEach(function(element) {
+            if (element.classList.contains(classInitialised)) return;
+            element.classList.add(classInitialised);
+            eventHandler(element);
+        });
+    }
 }
--- a/static/js/lib/local_storage.js
+++ b/static/js/lib/local_storage.js
@@ -1,5 +1,7 @@

-// Local storage
+import Validation from "./validation";
+
+export default class LocalStorage {
 /*
 function getPageLocalStorage(pageHash) {

@@ -10,7 +12,7 @@ function getPageLocalStorage(pageHash) {

    }

-    if (isEmpty(ls)) return {}
+    if (Validation.isEmpty(ls)) return {}

    return ls;
 }
@@ -32,19 +34,19 @@ function setupPageLocalStorage(pageHash) {

    let ls = getPageLocalStorage(pageHash);

-    if (isEmpty(ls)) ls = {};
+    if (Validation.isEmpty(ls)) ls = {};

    setPageLocalStorage(pageHash, ls);
 }
 */

-function getLocalStorage(key) {
-    return JSON.parse(localStorage.getItem(key));
-}
+    static getLocalStorage(key) {
+        return JSON.parse(localStorage.getItem(key));
+    }

-function setLocalStorage(key, newLS) {
-    localStorage.setItem(key, JSON.stringify(newLS));
-}
+    static setLocalStorage(key, newLS) {
+        localStorage.setItem(key, JSON.stringify(newLS));
+    }

 /*
 function setupPageLocalStorageNext(pageHashNext) {
@@ -56,4 +58,5 @@ function setupPageLocalStorageNext(pageHashNext) {
    lsNew[keyBasket] = (keyBasket in lsOld) ? lsOld[keyBasket] : {'items': []};
    setPageLocalStorage(hashPageCurrent, lsNew);
 }
-*/
+*/
+}
--- a/static/js/lib/validation.js
+++ b/static/js/lib/validation.js
@@ -1,107 +1,93 @@

-// Argument validation
-/*
-function isNullOrWhitespace(v) {
-    let txt = JSON.stringify(v).replace('/\s\g', '');
-    return (txt == '' || 'null');
-}
-*/
+export default class Validation {
+    /*
+    isNullOrWhitespace(v) {
+        let txt = JSON.stringify(v).replace('/\s\g', '');
+        return (txt == '' || 'null');
+    }
+    */

-function isEmpty(object) {
+    static isEmpty(object) {

-    let isEmpty = true;
+        let isEmpty = true;

-    if (object !== null && object !== "null" && object !== undefined && object !== "undefined") {
+        if (object !== null && object !== "null" && object !== undefined && object !== "undefined") {

-        if (object.length == undefined) {
-            isEmpty = false; // object exists but isn't a collection
-        }
-        else if (typeof object === "function") {
-            isEmpty = false; // object is function reference
-        }
-        else { // string or collection
+            if (object.length == undefined) {
+                isEmpty = false; // object exists but isn't a collection
+            }
+            else if (typeof object === "function") {
+                isEmpty = false; // object is reference
+            }
+            else { // string or collection

-            let isString = (typeof object == "string");
+                let isString = (typeof object == "string");

-            if (isString) object = object.trim();
+                if (isString) object = object.trim();

-            if (object.length > 0) {
+                if (object.length > 0) {

-                if (isString) {
-                    isEmpty = false; // String greater than length 0
-                }
-                else {
-
-                    if (typeof object[0] != "string") {
-                        isEmpty = false;
+                    if (isString) {
+                        isEmpty = false; // String greater than length 0
                    }
                    else {
-                        for(let i = 0; i < object.length; i++) {
-                            if (object[i] != "") {
-                                isEmpty = false;
-                                break
+
+                        if (typeof object[0] != "string") {
+                            isEmpty = false;
+                        }
+                        else {
+                            for(let i = 0; i < object.length; i++) {
+                                if (object[i] != "") {
+                                    isEmpty = false;
+                                    break
+                                }
                            }
                        }
                    }
                }
            }
        }
+
+        return isEmpty;
    }

-    return isEmpty;
-}
-
-function isValidNumber(value, positiveOnly) {
-    return !isEmpty(value) && !isNaN(value) && (!positiveOnly || parseFloat(value) > 0);
-}
-
-function getDataContentType(params) {
-
-    var data = null;
-    var contentType = '';
-
-    if (!isEmpty(params)) {
-
-        if (typeof params === "string") {
-            data = params;
-            contentType = "application/x-www-form-urlencoded; charset=UTF-8";
-        }
-        else {
-            data = JSON.stringify(params);
-            contentType = "application/json; charset=UTF-8";
-        }
+    static isValidNumber(value, positiveOnly) {
+        return !Validation.isEmpty(value) && !isNaN(value) && (!positiveOnly || parseFloat(value) > 0);
    }

-    return { Data: data, ContentType: contentType };
-}
+    static getDataContentType(params) {

-function arrayContainsItem(array, itemValue) {
+        var data = null;
+        var contentType = '';

-    var hasItem = false;
+        if (!Validation.isEmpty(params)) {

-    if (!isEmpty(array) && !isEmpty(itemValue)) {
-
-        var isJQueryElementArray = array[0] instanceof jQuery;
-
-        if (isJQueryElementArray) {
-
-            for (let i = 0; i < array.length; i++) {
-
-                if (document.querySelectorAll(array[i]).is(itemValue)) {
-                    hasItem = true;
-                    break;
-                }
+            if (typeof params === "string") {
+                data = params;
+                contentType = "application/x-www-form-urlencoded; charset=UTF-8";
+            }
+            else {
+                data = JSON.stringify(params);
+                contentType = "application/json; charset=UTF-8";
            }
        }
-        else {

-            var isDate = array[0] instanceof Date;
+        return { Data: data, ContentType: contentType };
+    }
+
+    static arrayContainsItem(array, itemValue) {
+
+        var hasItem = false;
+
+        if (!Validation.isEmpty(array) && !Validation.isEmpty(itemValue)) {
+
+            var isJQueryElementArray = array[0] instanceof jQuery;
+
+            if (isJQueryElementArray) {

-            if (isDate) {
-                
                for (let i = 0; i < array.length; i++) {

-                    if (array[i].getTime() === itemValue.getTime()) {
+                    if (document.querySelectorAll(array[i]).is(itemValue)) {
                        hasItem = true;
                        break;
                    }
@@ -109,54 +95,69 @@ function arrayContainsItem(array, itemValue) {
            }
            else {

-                for (let i = 0; i < array.length; i++) {
+                var isDate = array[0] instanceof Date;

-                    if (array[i] == itemValue) {
-                        hasItem = true;
-                        break;
+                if (isDate) {
+                    
+                    for (let i = 0; i < array.length; i++) {
+
+                        if (array[i].getTime() === itemValue.getTime()) {
+                            hasItem = true;
+                            break;
+                        }
+                    }
+                }
+                else {
+
+                    for (let i = 0; i < array.length; i++) {
+
+                        if (array[i] == itemValue) {
+                            hasItem = true;
+                            break;
+                        }
                    }
                }
            }
        }
+
+        return hasItem;
    }

-    return hasItem;
-}
-
-function dictHasKey(d, k) {
-    return (k in d);
-}
-function areEqualDicts(dict1, dict2) {
-    const keys1 = Object.keys(dict1);
-    const keys2 = Object.keys(dict2);
-    
-    if (keys1.length !== keys2.length) {
-      return false;
+    static dictHasKey(d, k) {
+        return (k in d);
    }
-    
-    for (let key of keys1) {
-      if (dict1[key] !== dict2[key]) {
+    static areEqualDicts(dict1, dict2) {
+        const keys1 = Object.keys(dict1);
+        const keys2 = Object.keys(dict2);
+        
+        if (keys1.length !== keys2.length) {
        return false;
-      }
-    }
-    
-    return true;
-  }
-
-function imageExists(url, callback) {
-
-    var img = new Image();
-
-    img.onload = function() { callback(true); };
-    img.onerror = function() { callback(false); };
-    img.src = url;
-}
-
-function validateImageUrl(id, img) {
-    imageExists(img, function(exists) {
-        if (exists) {
-            document.querySelectorAll("#" + id).css({ "background-image": "url(" + url + ")", "background-size": "35px 35px"})
        }
-    })
-}
+        
+        for (let key of keys1) {
+        if (dict1[key] !== dict2[key]) {
+            return false;
+        }
+        }
+        
+        return true;
+    }

+    static imageExists(url, callback) {
+
+        var img = new Image();
+
+        img.onload = function() { callback(true); };
+        img.onerror = function() { callback(false); };
+        img.src = url;
+    }
+
+    static validateImageUrl(id, img) {
+        Validation.imageExists(img, function(exists) {
+            if (exists) {
+                document.querySelectorAll("#" + id).css({ "background-image": "url(" + url + ")", "background-size": "35px 35px"})
+            }
+        })
+    }
+
+}
--- a/static/js/pages/base.js
+++ b/static/js/pages/base.js
@@ -1,3 +1,6 @@
+
+import Events from "../lib/events.js";
+import LocalStorage from "../lib/local_storage.js";
 import API from "../api.js";
 import DOM from "../dom.js";
 import { router } from "../router.js";
@@ -44,7 +47,7 @@ export class BasePage {
        // overlayHamburger.css('height', (countOptions * 27) + 'px');
        /* end of can be removed */

-        initialiseEventHandler(idButtonHamburger, flagInitialised, function(buttonToggleOverlayNavigation) {
+        Events.initialiseEventHandler(idButtonHamburger, flagInitialised, function(buttonToggleOverlayNavigation) {
            buttonToggleOverlayNavigation.addEventListener("click", function(event) {
                event.stopPropagation();
                let overlayHamburger = document.querySelector(idOverlayHamburger);
@@ -71,7 +74,7 @@ export class BasePage {
        this.hookupButtonNavAdminHome();
    }
    hookupButtonNavHome() {
-        initialiseEventHandler('.' + flagNavHome, flagInitialised, function(navigator) {
+        Events.initialiseEventHandler('.' + flagNavHome, flagInitialised, function(navigator) {
            navigator.addEventListener("click", function(event) {
                event.stopPropagation();
                router.navigateToHash(hashPageHome);
@@ -79,7 +82,7 @@ export class BasePage {
        });
    }
    hookupButtonNavServices() {        
-        initialiseEventHandler('.' + flagNavServices, flagInitialised, function(navigator) {
+        Events.initialiseEventHandler('.' + flagNavServices, flagInitialised, function(navigator) {
            navigator.addEventListener("click", function(event) {
                event.stopPropagation();
                console.log('going to services page');
@@ -88,7 +91,7 @@ export class BasePage {
        });
    }
    hookupButtonNavContact() {        
-        initialiseEventHandler('.' + flagNavContact, flagInitialised, function(navigator) {
+        Events.initialiseEventHandler('.' + flagNavContact, flagInitialised, function(navigator) {
            navigator.addEventListener("click", function(event) {
                event.stopPropagation();
                router.navigateToHash(hashPageContact);
@@ -96,7 +99,7 @@ export class BasePage {
        });
    }
    hookupButtonNavUserAccount() {        
-        initialiseEventHandler('.' + flagNavUserAccount, flagInitialised, function(navigator) {
+        Events.initialiseEventHandler('.' + flagNavUserAccount, flagInitialised, function(navigator) {
            navigator.addEventListener("click", function(event) {
                event.stopPropagation();
                router.navigateToHash(hashPageUserAccount);
@@ -104,7 +107,7 @@ export class BasePage {
        });
    }
    hookupButtonNavUserLogout() {        
-        initialiseEventHandler('.' + flagNavUserLogout, flagInitialised, function(navigator) {
+        Events.initialiseEventHandler('.' + flagNavUserLogout, flagInitialised, function(navigator) {
            navigator.addEventListener("click", function(event) {
                event.stopPropagation();
                router.navigateToHash(hashPageUserLogout);
@@ -112,7 +115,7 @@ export class BasePage {
        });
    }
    hookupButtonNavUserLogin() {        
-        initialiseEventHandler('.' + flagNavUserLogin, flagInitialised, function(navigator) {
+        Events.initialiseEventHandler('.' + flagNavUserLogin, flagInitialised, function(navigator) {
            navigator.addEventListener("click", function(event) {
                event.stopPropagation();
                // router.navigateToHash(hashPageUserLogin);
@@ -127,14 +130,14 @@ export class BasePage {
                    if (response.Success) {
                        window.app.router.navigateToUrl(response[keyCallback], null, false);
                    } else {
-                        alertError("Error", response.Message);
+                        DOM.alertError("Error", response.Message);
                    }
                });
            });
        });
    }
    hookupButtonNavStoreHome() {        
-        initialiseEventHandler('.' + flagNavStoreHome, flagInitialised, function(navigator) {
+        Events.initialiseEventHandler('.' + flagNavStoreHome, flagInitialised, function(navigator) {
            navigator.addEventListener("click", function(event) {
                event.stopPropagation();
                router.navigateToHash(hashPageStoreHome);
@@ -142,7 +145,7 @@ export class BasePage {
        });
    }
    hookupButtonNavStoreProductCategories() {
-        initialiseEventHandler('.' + flagNavStoreProductCategories, flagInitialised, function(navigator) {
+        Events.initialiseEventHandler('.' + flagNavStoreProductCategories, flagInitialised, function(navigator) {
            navigator.addEventListener("click", function(event) {
                event.stopPropagation();
                router.navigateToHash(hashPageStoreProductCategories);
@@ -150,7 +153,7 @@ export class BasePage {
        });
    }
    hookupButtonNavStoreProducts() {
-        initialiseEventHandler('.' + flagNavStoreProducts, flagInitialised, function(navigator) {
+        Events.initialiseEventHandler('.' + flagNavStoreProducts, flagInitialised, function(navigator) {
            navigator.addEventListener("click", function(event) {
                event.stopPropagation();
                router.navigateToHash(hashPageStoreProducts);
@@ -158,7 +161,7 @@ export class BasePage {
        });
    }
    hookupButtonNavStoreProductPermutations() {
-        initialiseEventHandler('.' + flagNavStoreProductPermutations, flagInitialised, function(navigator) {
+        Events.initialiseEventHandler('.' + flagNavStoreProductPermutations, flagInitialised, function(navigator) {
            navigator.addEventListener("click", function(event) {
                event.stopPropagation();
                router.navigateToHash(hashPageStoreProductPermutations);
@@ -166,7 +169,7 @@ export class BasePage {
        });
    }
    hookupButtonNavStoreProductPrices() {
-        initialiseEventHandler('.' + flagNavStoreProductPrices, flagInitialised, function(navigator) {
+        Events.initialiseEventHandler('.' + flagNavStoreProductPrices, flagInitialised, function(navigator) {
            navigator.addEventListener("click", function(event) {
                event.stopPropagation();
                router.navigateToHash(hashPageStoreProductPrices);
@@ -174,7 +177,7 @@ export class BasePage {
        });
    }
    hookupButtonNavStoreProductVariations() {
-        initialiseEventHandler('.' + flagNavStoreProductVariations, flagInitialised, function(navigator) {
+        Events.initialiseEventHandler('.' + flagNavStoreProductVariations, flagInitialised, function(navigator) {
            navigator.addEventListener("click", function(event) {
                event.stopPropagation();
                router.navigateToHash(hashPageStoreProductVariations);
@@ -182,7 +185,7 @@ export class BasePage {
        });
    }
    hookupButtonNavStoreStockItems() {
-        initialiseEventHandler('.' + flagNavStoreStockItems, flagInitialised, function(navigator) {
+        Events.initialiseEventHandler('.' + flagNavStoreStockItems, flagInitialised, function(navigator) {
            navigator.addEventListener("click", function(event) {
                event.stopPropagation();
                router.navigateToHash(hashPageStoreStockItems);
@@ -190,7 +193,7 @@ export class BasePage {
        });
    }
    hookupButtonNavAdminHome() {
-        initialiseEventHandler('.' + flagNavAdminHome, flagInitialised, function(navigator) {
+        Events.initialiseEventHandler('.' + flagNavAdminHome, flagInitialised, function(navigator) {
            navigator.addEventListener("click", function(event) {
                event.stopPropagation();
                router.navigateToHash(hashPageAdminHome);
@@ -200,7 +203,7 @@ export class BasePage {

    hookupImagesLogo() {
        let selectorImagesLogo = "img." + flagImageLogo;
-        initialiseEventHandler(selectorImagesLogo, flagInitialised, function(imageLogo) {
+        Events.initialiseEventHandler(selectorImagesLogo, flagInitialised, function(imageLogo) {
            imageLogo.addEventListener("click", function(event) {
                event.stopPropagation();
                router.navigateToHash(hashPageHome);
@@ -209,7 +212,7 @@ export class BasePage {
    }

    hookupOverlayFromId(idOverlay) {
-        initialiseEventHandler(idOverlay, flagInitialised, function(overlay) {
+        Events.initialiseEventHandler(idOverlay, flagInitialised, function(overlay) {
            overlay.querySelector('button.' + flagClose).addEventListener("click", function(event) {
                event.stopPropagation();
                overlay.css('display', 'none');
@@ -219,7 +222,7 @@ export class BasePage {

    
    hookupButtonSave() {
-        initialiseEventHandler('form.' + flagFilter + ' button.' + flagSave, flagInitialised, function(button) {
+        Events.initialiseEventHandler('form.' + flagFilter + ' button.' + flagSave, flagInitialised, function(button) {
            button.addEventListener("click", function(event) {
                event.stopPropagation();
                showOverlayConfirm();
@@ -229,7 +232,7 @@ export class BasePage {
    }

    hookupVideos() {
-        initialiseEventHandler('video', flagInitialised, function(video) {
+        Events.initialiseEventHandler('video', flagInitialised, function(video) {
            video.addEventListener("mouseover", videoPlay(video));
            video.addEventListener("mouseout", videoPause(video));
        });
@@ -237,16 +240,15 @@ export class BasePage {

    leave() {
        console.log('Leaving ' + this.title + ' page');
-        _pageCurrent = null;
        if (this.constructor === BasePage) {
            throw new Error("Must implement leave() method.");
        }
    }
    setLocalStoragePage(dataPage) {
-        setLocalStorage(this.constructor.hash, dataPage);
+        LocalStorage.setLocalStorage(this.constructor.hash, dataPage);
    }
    getLocalStoragePage() {
-        return getLocalStorage(this.constructor.hash);
+        return LocalStorage.getLocalStorage(this.constructor.hash);
    }

    toggleShowButtonsSaveCancel(show, buttonSave = null, buttonCancel = null) {
--- a/static/js/pages/base_table.js
+++ b/static/js/pages/base_table.js
@@ -1,5 +1,7 @@

-
+import Events from "../lib/events.js";
+import LocalStorage from "../lib/local_storage.js";
+import Validation from "../lib/validation";
 import { BasePage } from "./base.js";
 import API from "../api.js";
 import DOM from "../dom.js";
@@ -53,7 +55,7 @@ export class TableBasePage extends BasePage {
            let filters = dataPage[flagFormFilters];
            let formFilters = this.getFormFilters();
            let filtersDefault = DOM.convertForm2JSON(formFilters);
-            if (!areEqualDicts(filters, filtersDefault)) {
+            if (!Validation.areEqualDicts(filters, filtersDefault)) {

            }
        }
@@ -65,7 +67,7 @@ export class TableBasePage extends BasePage {
        this.hookupButtonApplyFilters();
    }
    hookupFilterActive() {
-        initialiseEventHandler(idFormFilters + '.' + flagActive, flagInitialised, (filter) => {
+        Events.initialiseEventHandler(idFormFilters + '.' + flagActive, flagInitialised, (filter) => {
            filter.addEventListener("change", (event) => {
                TableBasePage.isDirtyFilter(filter);
            });
@@ -81,7 +83,7 @@ export class TableBasePage extends BasePage {
        return isDirty;
    }
    hookupButtonApplyFilters() {
-        initialiseEventHandler(idButtonApplyFilters, flagInitialised, (button) => {
+        Events.initialiseEventHandler(idButtonApplyFilters, flagInitialised, (button) => {
            button.addEventListener("click", (event) => {
                event.stopPropagation();
                this.getAndLoadFilteredTableContent();
@@ -108,7 +110,7 @@ export class TableBasePage extends BasePage {
        let bodyTable = table.querySelector('tbody');
        bodyTable.querySelectorAll('tr').forEach(function(row) { row.remove(); });
        let rowsJson = response.data[flagRows];
-        if (!isEmpty(rowsJson) && rowsJson.every(row => row.hasOwnProperty('display_order'))) {
+        if (!Validation.isEmpty(rowsJson) && rowsJson.every(row => row.hasOwnProperty('display_order'))) {
            rowsJson = rowsJson.sort((a, b) => a.display_order - b.display_order);
        }
        rowsJson.forEach(this.loadRowTable.bind(this));
@@ -161,7 +163,7 @@ export class TableBasePage extends BasePage {
        throw new Error("Subclass of TableBasePage must implement method getJsonRow().");
    }
    hookupButtonCancel() {
-        initialiseEventHandler(idFormFilters + ' button.' + flagCancel, flagInitialised, function(button) {
+        Events.initialiseEventHandler(idFormFilters + ' button.' + flagCancel, flagInitialised, function(button) {
            button.addEventListener("click", function(event) {
                event.stopPropagation();
                getAndLoadFilteredTableContent();
@@ -170,7 +172,7 @@ export class TableBasePage extends BasePage {
        });
    }
    hookupButtonAddRowTable() {
-        initialiseEventHandler(idFormFilters + ' button.' + flagAdd, flagInitialised, (button) => {
+        Events.initialiseEventHandler(idFormFilters + ' button.' + flagAdd, flagInitialised, (button) => {
            button.addEventListener("click", (event) => {
                event.stopPropagation();
                let tbody = document.querySelector(idTableMain + ' tbody');
@@ -209,7 +211,7 @@ export class TableBasePage extends BasePage {
    }
    hookupSlidersDisplayOrderTable() {
        let selectorDisplayOrder = idTableMain + ' tbody tr td.' + flagDisplayOrder + ' input.' + flagSlider + '.' + flagDisplayOrder;
-        initialiseEventHandler(selectorDisplayOrder, flagInitialised, (sliderDisplayOrder) => {
+        Events.initialiseEventHandler(selectorDisplayOrder, flagInitialised, (sliderDisplayOrder) => {
            /*
            sliderDisplayOrder.setAttribute('draggable', true);
            sliderDisplayOrder.addEventListener('dragstart', this.handleDragSliderStart.bind(this), false);
@@ -285,7 +287,7 @@ export class TableBasePage extends BasePage {
    */
    hookupTextareasCodeTable() {
        let selectorCode = idTableMain + ' tbody tr td.' + flagCode + ' textarea';
-        initialiseEventHandler(selectorCode, flagInitialised, (textareaCode) => {
+        Events.initialiseEventHandler(selectorCode, flagInitialised, (textareaCode) => {
            textareaCode.addEventListener("change", (event) => {
                console.log("textarea change event");
                this.handleChangeElementCellTable(textareaCode);
@@ -359,7 +361,7 @@ export class TableBasePage extends BasePage {
    }
    hookupTextareasNameTable() {
        let selectorName = idTableMain + ' tbody tr td.' + flagName + ' textarea';
-        initialiseEventHandler(selectorName, flagInitialised, (textareaName) => {
+        Events.initialiseEventHandler(selectorName, flagInitialised, (textareaName) => {
            textareaName.addEventListener("change", (event) => {
                console.log("textarea change event");
                this.handleChangeElementCellTable(textareaName);
@@ -368,7 +370,7 @@ export class TableBasePage extends BasePage {
    }
    hookupTextareasDescriptionTable() {
        let selectorDescription = idTableMain + ' tbody tr td.' + flagDescription + ' textarea';
-        initialiseEventHandler(selectorDescription, flagInitialised, (textareaDescription) => {
+        Events.initialiseEventHandler(selectorDescription, flagInitialised, (textareaDescription) => {
            textareaDescription.addEventListener("change", (event) => {
                console.log("textarea change event");
                this.handleChangeElementCellTable(textareaDescription);
@@ -377,7 +379,7 @@ export class TableBasePage extends BasePage {
    }
    hookupInputsActiveTable() {
        let selectorActive = idTableMain + ' tbody tr td.' + flagActive + ' input[type="checkbox"]';
-        initialiseEventHandler(selectorActive, flagInitialised, (inputActive) => {
+        Events.initialiseEventHandler(selectorActive, flagInitialised, (inputActive) => {
            inputActive.addEventListener("change", (event) => {
                console.log("input change event");
                this.handleChangeElementCellTable(inputActive);
@@ -385,7 +387,7 @@ export class TableBasePage extends BasePage {
        });
    }
    hookupTdsAccessLevel() {
-        initialiseEventHandler(idTableMain + ' tbody td.' + flagAccessLevel, flagInitialised, (tdAccessLevel) => {
+        Events.initialiseEventHandler(idTableMain + ' tbody td.' + flagAccessLevel, flagInitialised, (tdAccessLevel) => {
            tdAccessLevel.addEventListener("click", (event) => { this.handleClickTdAccessLevel(event); } );
        });
    }
@@ -414,7 +416,7 @@ export class TableBasePage extends BasePage {
        this.hookupDdlsAccessLevelTable();
    }
    hookupDdlsAccessLevelTable() {
-        initialiseEventHandler(idTableMain + ' tbody select.' + flagAccessLevel, flagInitialised, (ddlAccessLevel) => {
+        Events.initialiseEventHandler(idTableMain + ' tbody select.' + flagAccessLevel, flagInitialised, (ddlAccessLevel) => {
            ddlAccessLevel.addEventListener("change", (event) => {
                event.stopPropagation();
                this.handleChangeDdlAccessLevelTable(ddlAccessLevel);
--- a/static/js/pages/core/admin_home.js
+++ b/static/js/pages/core/admin_home.js
@@ -1,4 +1,5 @@

+import Events from "../../lib/events.js";
 import { BasePage } from "../base.js";
 // import { router } from "../../router.js";

@@ -26,14 +27,14 @@ export class PageAdminHome extends BasePage {
        this.hookupButtonNavAdminStoreStripePrices();
    }
    hookupButtonNavAdminStoreStripeProducts() {
-        initialiseEventHandler('.' + flagNavAdminStoreStripeProducts, flagInitialised, function(navigator) {
+        Events.initialiseEventHandler('.' + flagNavAdminStoreStripeProducts, flagInitialised, function(navigator) {
            navigator.addEventListener("click", function(event) {
                router.navigateToHash(hashPageAdminStoreStripeProducts);
            });
        });
    }
    hookupButtonNavAdminStoreStripePrices() {
-        initialiseEventHandler('.' + flagNavAdminStoreStripePrices, flagInitialised, function(navigator) {
+        Events.initialiseEventHandler('.' + flagNavAdminStoreStripePrices, flagInitialised, function(navigator) {
            navigator.addEventListener("click", function(event) {
                router.navigateToHash(hashPageAdminStoreStripePrices);
            });
--- a/static/js/pages/core/home.js
+++ b/static/js/pages/core/home.js
@@ -10,7 +10,7 @@ export class PageHome extends BasePage {

    initialize() {
        this.sharedInitialize();
-        this.hookupButtonsContactUs();
+        this.hookupButtonNavContact();
    }

    leave() {
--- a/static/js/pages/store/base.js
+++ b/static/js/pages/store/base.js
@@ -1,11 +1,14 @@

+import Events from "../../lib/events.js";
+import LocalStorage from "../../lib/local_storage.js";
+import Validation from "../../lib/validation";
 // import { BasePage } from "../base.js";
-import { DOM } from "../../dom.js";
+import DOM from "../../dom.js";
 import { isEmpty } from "../../lib/utils.js";

 export class StoreMixinPage { // extends BasePage {
    constructor() {
-        super();
+        // super();
    }

    initialize(thisPage) {
@@ -24,7 +27,7 @@ export class StoreMixinPage { // extends BasePage {
        /*
        let elForm = document.querySelectorAll(idFormCurrency);
        let elSelector = document.querySelectorAll(elForm.querySelector('select')[0]);
-        initialiseEventHandler(elSelector, flagInitialised, function(){
+        Events.initialiseEventHandler(elSelector, flagInitialised, function(){
            elForm = document.querySelectorAll(idFormCurrency);
            elSelector.addEventListener("change", function(event) {
                ajaxData = {};
@@ -52,7 +55,7 @@ export class StoreMixinPage { // extends BasePage {
            option.classList.add(flagCollapsed);
        }
        handleSelectCollapse(dropdownCurrency);
-        initialiseEventHandler(dropdownCurrency, flagInitialised, function() {
+        Events.initialiseEventHandler(dropdownCurrency, flagInitialised, function() {
            dropdownCurrency = document.querySelectorAll(dropdownCurrency);
            dropdownCurrency.addEventListener("focus", function() {
                handleSelectExpand(dropdownCurrency);
@@ -63,10 +66,10 @@ export class StoreMixinPage { // extends BasePage {
            dropdownCurrency.addEventListener("change", function() {
                let selectedCurrency = dropdownCurrency.val();
                console.log("selected currency: ", selectedCurrency);
-                let basket = getLocalStorage(keyBasket);
+                let basket = LocalStorage.getLocalStorage(keyBasket);
                basket[keyIdCurrency] = selectedCurrency;
-                // setLocalStorage(keyIdCurrency, selectedCurrency);
-                setLocalStorage(keyBasket, basket);
+                // LocalStorage.setLocalStorage(keyIdCurrency, selectedCurrency);
+                LocalStorage.setLocalStorage(keyBasket, basket);
                let ajaxData = {};
                ajaxData[keyBasket] = basket;
                ajaxJSONData('update currency', mapHashToController(hashPageCurrent), ajaxData, loadPageBody, false);
@@ -77,7 +80,7 @@ export class StoreMixinPage { // extends BasePage {
        /*
        let elForm = document.querySelectorAll(idFormDeliveryRegion);
        let elSelector = document.querySelectorAll(elForm.querySelector('select')[0]);
-        initialiseEventHandler(elSelector, flagInitialised, function(){
+        Events.initialiseEventHandler(elSelector, flagInitialised, function(){
            elForm = document.querySelectorAll(idFormDeliveryRegion);
            elSelector.addEventListener("change", function(event) {
                ajaxData = {};
@@ -103,7 +106,7 @@ export class StoreMixinPage { // extends BasePage {

        handleSelectCollapse(dropdownRegion);

-        initialiseEventHandler(dropdownRegion, flagInitialised, function() {
+        Events.initialiseEventHandler(dropdownRegion, flagInitialised, function() {
            dropdownRegion = document.querySelectorAll(dropdownRegion);
            dropdownRegion.addEventListener("focus", function() {
                console.log("dropdown region focused");
@@ -117,10 +120,10 @@ export class StoreMixinPage { // extends BasePage {
                handleSelectCollapse(dropdownRegion);
                let selectedRegion = dropdownRegion.val();
                console.log("selected region: ", selectedRegion);
-                let basket = getLocalStorage(keyBasket);
+                let basket = LocalStorage.getLocalStorage(keyBasket);
                basket[keyIdRegionDelivery] = selectedRegion;
-                // setLocalStorage(keyIdRegionDelivery, selectedRegion);
-                setLocalStorage(keyBasket, basket);
+                // LocalStorage.setLocalStorage(keyIdRegionDelivery, selectedRegion);
+                LocalStorage.setLocalStorage(keyBasket, basket);
                let ajaxData = {};
                ajaxData[keyIdRegionDelivery] = selectedRegion;
                ajaxJSONData('update region', mapHashToController(hashStoreSetRegion), ajaxData, null, false);
@@ -130,7 +133,7 @@ export class StoreMixinPage { // extends BasePage {
    hookupFilterIsIncludedVAT() {
        let elForm = document.querySelectorAll(idFormIsIncludedVAT);
        let elSelector = document.querySelectorAll(elForm.querySelector('input[type="checkbox"]')[0]);
-        initialiseEventHandler(elSelector, flagInitialised, function(){
+        Events.initialiseEventHandler(elSelector, flagInitialised, function(){
            elForm = document.querySelectorAll(idFormIsIncludedVAT);
            elSelector.addEventListener("change", function(event) {
                ajaxData = {};
@@ -146,15 +149,15 @@ export class StoreMixinPage { // extends BasePage {
        // setupPageLocalStorage(hashPageCurrent);
        // let lsPage = getPageLocalStorage(hashPageCurrent);
        // let d = {}
-        // d[keyBasket] = getLocalStorage(keyBasket); // (keyBasket in lsPage) ? lsPage[keyBasket] : {'items': []};
+        // d[keyBasket] = LocalStorage.getLocalStorage(keyBasket); // (keyBasket in lsPage) ? lsPage[keyBasket] : {'items': []};
        // console.log('d:'); console.log(d);
        let basket;
        let createNewBasket = true;
        if (true) { // !isUserLoggedIn) {
            try {
-                basket = getLocalStorage(keyBasket);
+                basket = LocalStorage.getLocalStorage(keyBasket);
                console.log('basket found: '); console.log(basket);
-                createNewBasket = isEmpty(basket);
+                createNewBasket = Validation.isEmpty(basket);
            }
            catch {
                
@@ -171,13 +174,13 @@ export class StoreMixinPage { // extends BasePage {
            basket[keyIsIncludedVAT] = true;
            basket[keyIdCurrency] = 1;
            basket[keyIdRegionDelivery] = 1;
-            setLocalStorage(keyBasket, basket);
+            LocalStorage.setLocalStorage(keyBasket, basket);
            console.log("new local basket created");
        }
        let ajaxData = {}
        ajaxData[keyBasket] = basket;
        // console.log("hookupLocalStorageStore\nhashStoreBasketLoad: " + hashStoreBasketLoad + "\n");
-        // ajaxData[keyIsIncludedVAT] = getLocalStorage(keyIsIncludedVAT);
+        // ajaxData[keyIsIncludedVAT] = LocalStorage.getLocalStorage(keyIsIncludedVAT);
        console.log('ajax:' + ajaxData);
        ajaxJSONData(keyBasket, mapHashToController(hashStoreBasketLoad), ajaxData, loadBasket, false);
    }
@@ -201,7 +204,7 @@ export class StoreMixinPage { // extends BasePage {
        // let lsPage = getPageLocalStorage(hashPageCurrent);
        // let basket = lsPage[keyBasket]['items'];
        // let products = containerBasket.filter('');
-        let basket = getLocalStorage(keyBasket);
+        let basket = LocalStorage.getLocalStorage(keyBasket);

        if (basket['items'].length == 0) {
            btnCheckout.style.display = "none";
@@ -217,11 +220,11 @@ export class StoreMixinPage { // extends BasePage {

        const btnCheckout = document.querySelectorAll(idButtonCheckout);
        // let lsPage = getPageLocalStorage(hashPageCurrent);
-        initialiseEventHandler(btnCheckout, flagInitialised, function() {
+        Events.initialiseEventHandler(btnCheckout, flagInitialised, function() {
            btnCheckout.addEventListener("click", function() {
                /*
                //setupPageLocalStorageNext(hashPageStoreBasket);
-                let basket = getLocalStorage(keyBasket);
+                let basket = LocalStorage.getLocalStorage(keyBasket);
                // goToPage(hashPageStoreBasket);
                let ajaxData = {};
                ajaxData[keyBasket] = basket;
@@ -238,7 +241,7 @@ export class StoreMixinPage { // extends BasePage {
        // Increment
        document.querySelectorAll('div.btn-increment[' + attrFormType + '=' + typeFormBasketAdd + ']').each(function() {
            let elButton = this;
-            initialiseEventHandler(elButton, flagInitialised, function(){
+            Events.initialiseEventHandler(elButton, flagInitialised, function(){
                elButton.addEventListener("click", function(event) {
                    event.preventDefault();
                    event.stopPropagation();
@@ -254,7 +257,7 @@ export class StoreMixinPage { // extends BasePage {
        // Decrement
        document.querySelectorAll('div.btn-decrement[' + attrFormType + '=' + typeFormBasketAdd + ']').each(function() {
            let elButton = this;
-            initialiseEventHandler(elButton, flagInitialised, function(){
+            Events.initialiseEventHandler(elButton, flagInitialised, function(){
                elButton.addEventListener("click", function(event) {
                    event.preventDefault();
                    event.stopPropagation();
@@ -272,7 +275,7 @@ export class StoreMixinPage { // extends BasePage {
        // Increment
        document.querySelectorAll('div.btn-increment[' + attrFormType + '=' + typeFormBasketEdit + ']').each(function() {
            let elButton = this;
-            initialiseEventHandler(elButton, flagInitialised, function(){
+            Events.initialiseEventHandler(elButton, flagInitialised, function(){
                elButton.addEventListener("click", function(event) {
                    event.stopPropagation();
                    // basketItem = document.querySelectorAll('.card.subcard[' + attrIdProduct +'=' + elButton.attr(attrIdProduct) + ']');
@@ -289,7 +292,7 @@ export class StoreMixinPage { // extends BasePage {
        // Decrement
        document.querySelectorAll('div.btn-decrement[' + attrFormType + '=' + typeFormBasketEdit + ']').each(function() {
            let elButton = this;
-            initialiseEventHandler(elButton, flagInitialised, function(){
+            Events.initialiseEventHandler(elButton, flagInitialised, function(){
                elButton.addEventListener("click", function(event) {
                    event.stopPropagation();
                    let elInput= document.querySelectorAll(getFormProductSelector(typeFormBasketEdit, elButton)).querySelector('input[type="number"]');
@@ -307,7 +310,7 @@ export class StoreMixinPage { // extends BasePage {
        document.querySelectorAll('form[' + attrFormType + '=' + typeFormBasketAdd + ']').each(function() {
            let elForm = this;
            let elInput = elForm.querySelector('input[type="number"]');
-            initialiseEventHandler(elInput, flagInitialised, function(){
+            Events.initialiseEventHandler(elInput, flagInitialised, function(){
                elInput.addEventListener("change", function(event) {
                    event.preventDefault();
                    event.stopPropagation();
@@ -328,13 +331,13 @@ export class StoreMixinPage { // extends BasePage {
        document.querySelectorAll('form[' + attrFormType + '=' + typeFormBasketEdit + ']').each(function() {
            let elForm = this;
            let elInput = elForm.querySelector('input[type="number"]');
-            initialiseEventHandler(elInput, flagInitialised, function(){
+            Events.initialiseEventHandler(elInput, flagInitialised, function(){
                elInput.addEventListener("change", function(event) {
                    event.preventDefault();
                    event.stopPropagation();
                    // let lsPage = getPageLocalStorageCurrent();
                    d = {};
-                    d[keyBasket]= getLocalStorage(keyBasket); // lsPage[keyBasket]; // JSON.parse(lsPage[keyBasket]);
+                    d[keyBasket]= LocalStorage.getLocalStorage(keyBasket); // lsPage[keyBasket]; // JSON.parse(lsPage[keyBasket]);
                    d[keyIdProduct] = elForm.attr(attrIdProduct); // lsPage[keyIdProduct];
                    d[keyIdPermutation] = elForm.attr(attrIdPermutation);
                    // d[keyQuantity] = lsPage[keyQuantity];
@@ -356,11 +359,11 @@ export class StoreMixinPage { // extends BasePage {
        document.querySelectorAll('form[' + attrFormType + '=' + typeFormBasketEdit + ']').each(function() {
            let elForm = this;
            let elDelete = elForm.querySelector('a.' + flagBasketItemDelete);
-            initialiseEventHandler(elDelete, flagInitialised, function(){
+            Events.initialiseEventHandler(elDelete, flagInitialised, function(){
                elDelete.addEventListener("click", function(event) {
                    event.stopPropagation();
                    ajaxData = {};
-                    ajaxData[keyBasket]= getLocalStorage(keyBasket);
+                    ajaxData[keyBasket]= LocalStorage.getLocalStorage(keyBasket);
                    ajaxData[keyIdProduct] = elForm.attr(attrIdProduct);
                    ajaxData[keyIdPermutation] = elForm.attr(attrIdPermutation);
                    console.log('sending data to basket delete controller: '); console.log(ajaxData);
@@ -387,7 +390,7 @@ export class StoreMixinPage { // extends BasePage {
        
            var form = this;

-            initialiseEventHandler(form, flagInitialised, function() {
+            Events.initialiseEventHandler(form, flagInitialised, function() {
                // form = document.querySelectorAll(form);
                form.submit(function(event) {
                    event.preventDefault();
@@ -398,7 +401,7 @@ export class StoreMixinPage { // extends BasePage {
                    ajaxData = {};
                    ajaxData[keyIdProduct] = form.attr(attrIdProduct);
                    ajaxData[keyIdPermutation] = form.attr(attrIdPermutation);
-                    basket = getLocalStorage(keyBasket);
+                    basket = LocalStorage.getLocalStorage(keyBasket);
                    ajaxData[keyBasket] = basket; // lsShared[keyBasket];
                    console.log("basket before add: ", basket);
                    ajaxData[keyForm] = convertForm2JSON(form); // formData; // form.serialize();
@@ -420,7 +423,7 @@ export class StoreMixinPage { // extends BasePage {

        let basket = response.data[keyBasket]; // JSON.parse(response.data[keyBasket]);
        // setPageLocalStorage(keyShared, lsShared);
-        setLocalStorage(keyBasket, basket);
+        LocalStorage.setLocalStorage(keyBasket, basket);
        items = basket['items'];
        // console.log('old basket:'); console.log(basketContainer.innerHTML);
        // console.log('setting basket:'); console.log(response.data['html_block']);
@@ -446,7 +449,7 @@ export class StoreMixinPage { // extends BasePage {
    getFormProductSelector(typeForm, elementInForm) {
        idPermutation = elementInForm.attr(attrIdPermutation);
        console.log('idPermutation: ', idPermutation);
-        hasPermutation = !isEmpty(idPermutation);
+        hasPermutation = !Validation.isEmpty(idPermutation);
        console.log('has permutation: ', hasPermutation);
        selectorIdPermutation = hasPermutation ? '[' + attrIdPermutation + '=' + idPermutation + ']' : '';
        return 'form[' + attrFormType + '="' + typeForm + '"][' + attrIdProduct + '=' + elementInForm.attr(attrIdProduct) + ']' + selectorIdPermutation;
@@ -462,9 +465,9 @@ export class StoreMixinPage { // extends BasePage {
    }

    addMetadataBasketToJSON(jsonData) {
-        jsonData[keyIdCurrency] = getLocalStorage(keyIdCurrency);
-        jsonData[keyIdRegionDelivery] = getLocalStorage(keyIdRegionDelivery);
-        jsonData[keyIsIncludedVAT] = getLocalStorage(keyIsIncludedVAT);
+        jsonData[keyIdCurrency] = LocalStorage.getLocalStorage(keyIdCurrency);
+        jsonData[keyIdRegionDelivery] = LocalStorage.getLocalStorage(keyIdRegionDelivery);
+        jsonData[keyIsIncludedVAT] = LocalStorage.getLocalStorage(keyIsIncludedVAT);
        return jsonData;
    }

@@ -472,7 +475,7 @@ export class StoreMixinPage { // extends BasePage {
        
        let d; // , lsShared;
        let selectorCardProduct = '.card.subcard';
-        initialiseEventHandler(selectorCardProduct, flagInitialised, function(cardProduct) {
+        Events.initialiseEventHandler(selectorCardProduct, flagInitialised, function(cardProduct) {
            console.log("initialising product card: ", cardProduct);
            cardProduct.addEventListener("click", function(event) {
                // d = { keyIdProduct: product.attr(attrIdProduct) }
--- a/static/js/pages/store/basket.js
+++ b/static/js/pages/store/basket.js
@@ -1,3 +1,6 @@
+
+import Events from "../../lib/events.js";
+import LocalStorage from "../../lib/local_storage.js";
 import { BasePage } from "../base.js";

 export class PageStoreBasket extends BasePage {
@@ -37,7 +40,7 @@ export class PageStoreBasket extends BasePage {
        elForm = elOverlay.querySelector('form');
        
        hookupOverlay(elOverlay);
-        initialiseEventHandler(elForm, flagInitialised, function() {
+        Events.initialiseEventHandler(elForm, flagInitialised, function() {
            elForm.submit(function(event) {
                elForm = document.querySelectorAll(elForm);
                event.preventDefault();
@@ -57,7 +60,7 @@ export class PageStoreBasket extends BasePage {
        elForm = elOverlay.querySelector('form');

        hookupOverlay(elOverlay);
-        initialiseEventHandler(elForm, flagInitialised, function() {
+        Events.initialiseEventHandler(elForm, flagInitialised, function() {
            elForm.submit(function(event) {
                event.preventDefault();
                console.log("billing submit method");
@@ -81,7 +84,7 @@ export class PageStoreBasket extends BasePage {
        console.log('ajax:'); console.log(response.data);
        let infoType = response.data[keyInfoType];
        let infoAddress = response.data[infoType];
-        setLocalStorage(infoType, infoAddress);
+        LocalStorage.setLocalStorage(infoType, infoAddress);

        // update webpage elements in background
        if (infoType == keyInfoBilling) {
@@ -137,14 +140,14 @@ export class PageStoreBasket extends BasePage {
    hookupButtonCheckoutSession() {
        let btnCheckout = document.querySelectorAll(idButtonCheckout);
        btnCheckout.classList.remove(flagInitialised);
-        initialiseEventHandler(idButtonCheckout, flagInitialised, function() {
+        Events.initialiseEventHandler(idButtonCheckout, flagInitialised, function() {

            btnCheckout.removeEventListener("click");
            btnCheckout.addEventListener("click", function(event) {
                
                
                //setupPageLocalStorageNext(hashPageStoreBasket);
-                let basket = getLocalStorage(keyBasket);
+                let basket = LocalStorage.getLocalStorage(keyBasket);
                // goToPage(hashPageStoreBasket);
                let ajaxData = {};
                ajaxData[keyBasket] = basket;
@@ -169,7 +172,7 @@ export class PageStoreBasket extends BasePage {

        // let elButton = document.querySelectorAll(idButtonFormBillingCopy);

-        initialiseEventHandler(idButtonFormBillingCopy, flagInitialised, function() {
+        Events.initialiseEventHandler(idButtonFormBillingCopy, flagInitialised, function() {
            document.querySelectorAll(idButtonFormBillingCopy).addEventListener("click", function (event) {
                
                let keys = [keyNameFull, keyPhoneNumber, keyPostcode, keyAddress1, keyAddress2, keyCity, keyCounty];
--- a/static/js/pages/store/product_categories.js
+++ b/static/js/pages/store/product_categories.js
@@ -1,4 +1,5 @@

+import Events from "../../lib/events.js";
 import { TableBasePage } from "../base_table.js";
 import API from "../../api.js";
 import DOM from "../../dom.js";
@@ -22,7 +23,7 @@ export class PageStoreProductCategories extends TableBasePage {
        this.hookupFilterActive();
    }
    hookupFilterIsNotEmpty() {
-        initialiseEventHandler('.' + flagIsNotEmpty, flagInitialised, (filter) => {
+        Events.initialiseEventHandler('.' + flagIsNotEmpty, flagInitialised, (filter) => {
            filter.addEventListener("change", (event) => {
                PageStoreProductCategories.isDirtyFilter(filter);
            });
--- a/static/js/pages/store/product_permutations.js
+++ b/static/js/pages/store/product_permutations.js
@@ -1,5 +1,8 @@

+import Events from "../../lib/events.js";
 import { BasePage } from "../base.js";
+import Validation from "../../lib/validation";
+

 export class PageStoreProductPermutations extends BasePage {
    static hash = hashPageStoreProductPermutations;
@@ -17,7 +20,7 @@ export class PageStoreProductPermutations extends BasePage {
    }

    hookupFilters() {
-        initialiseEventHandler(idFilterCategory, flagInitialised, function(filterCategory) {
+        Events.initialiseEventHandler(idFilterCategory, flagInitialised, function(filterCategory) {
            console.log("hooking up filter category");
            /*
            listCategories.forEach(function(category) {
@@ -37,7 +40,7 @@ export class PageStoreProductPermutations extends BasePage {
            console.log("hooked up filter category");
        });

-        initialiseEventHandler(idFilterProduct, flagInitialised, function(filterProduct) {
+        Events.initialiseEventHandler(idFilterProduct, flagInitialised, function(filterProduct) {
            listProducts.forEach(function(product) {
                if (product[attrIdCategory] != getElementCurrentValue(document.querySelectorAll(idFilterCategory))) return;
                /*
@@ -52,19 +55,19 @@ export class PageStoreProductPermutations extends BasePage {
            });
        });
        
-        initialiseEventHandler(idFilterIsOutOfStock, flagInitialised, function(filterIsOutOfStock) {
+        Events.initialiseEventHandler(idFilterIsOutOfStock, flagInitialised, function(filterIsOutOfStock) {
            filterIsOutOfStock.addEventListener("change", function(event) {
                loadPermutations();
            });
        });

-        initialiseEventHandler(idFilterQuantityMin, flagInitialised, function(filterQuantityMin) {
+        Events.initialiseEventHandler(idFilterQuantityMin, flagInitialised, function(filterQuantityMin) {
            filterQuantityMin.addEventListener("change", function(event) {
                loadPermutations();
            });
        });
        
-        initialiseEventHandler(idFilterQuantityMax, flagInitialised, function(filterQuantityMax) {
+        Events.initialiseEventHandler(idFilterQuantityMax, flagInitialised, function(filterQuantityMax) {
            filterQuantityMax.addEventListener("change", function(event) {
                loadPermutations();
            });
@@ -127,7 +130,7 @@ export class PageStoreProductPermutations extends BasePage {
    }

    hookupButtonsSaveCancel() {
-        initialiseEventHandler(idButtonSave, flagInitialised, function(button) {
+        Events.initialiseEventHandler(idButtonSave, flagInitialised, function(button) {
            button.addEventListener("click", function(event) {
                event.stopPropagation();
                showOverlayConfirm();
@@ -136,7 +139,7 @@ export class PageStoreProductPermutations extends BasePage {
        // let parentSave = btnSave.closest('div.' + flagColumn);
        // parentSave.classList.add(flagCollapsed);

-        initialiseEventHandler(idButtonCancel, flagInitialised, function(button) {
+        Events.initialiseEventHandler(idButtonCancel, flagInitialised, function(button) {
            button.addEventListener("click", function(event) {
                event.stopPropagation();
                loadPermutations();
@@ -145,7 +148,7 @@ export class PageStoreProductPermutations extends BasePage {
        // let parentCancel = btnCancel.closest('div.' + flagColumn);
        // parentCancel.classList.add(flagCollapsed);

-        initialiseEventHandler(idButtonCancel, flagInitialised, function(button) {
+        Events.initialiseEventHandler(idButtonCancel, flagInitialised, function(button) {
            button.addEventListener("click", function(event) {
                event.stopPropagation();
                let table = document.querySelectorAll(idTableMain);
@@ -213,7 +216,7 @@ export class PageStoreProductPermutations extends BasePage {
    }

    hookupTableMain() {
-        initialiseEventHandler(idTableMain, flagInitialised, function(table) {
+        Events.initialiseEventHandler(idTableMain, flagInitialised, function(table) {

            table.querySelectorAll('td.' + flagCategory + ' select').addEventListener("change", function(event) {
                handleChangeInputPermutations(this);
@@ -277,7 +280,7 @@ export class PageStoreProductPermutations extends BasePage {
        if (wasDirty != isDirty) {
            isRowDirty(row);
            let permutationsDirty = getPermutations(true);
-            if (isEmpty(permutationsDirty)) {
+            if (Validation.isEmpty(permutationsDirty)) {
                buttonCancel.classList.add(flagCollapsed);
                buttonSave.classList.add(flagCollapsed);
            } else {
@@ -341,7 +344,7 @@ export class PageStoreProductPermutations extends BasePage {
        element = document.querySelectorAll(element);
        let variations = element.attr(attrValueCurrent);
        let objVariations = [];
-        if (!isEmpty(variations)) {
+        if (!Validation.isEmpty(variations)) {
            variations = variations.split(',');
            variations.forEach((variation) => {
                let parts = variation.split(':');
@@ -385,7 +388,7 @@ export class PageStoreProductPermutations extends BasePage {
        let tbody = document.createElement("<tbody>");
        console.log('variations:', variations);
        /*
-        if (isEmpty(variations)) {
+        if (Validation.isEmpty(variations)) {
            return;
        }
        */
@@ -459,7 +462,7 @@ export class PageStoreProductPermutations extends BasePage {
        let row = getRowFromElement(element);
        let variations = row.querySelector('td.' + flagVariations + ' textarea');
        let value = variations.value;
-        value = (isEmpty(value)) ? '' : value + '\n';
+        value = (Validation.isEmpty(value)) ? '' : value + '\n';
        value += 'Type: Variation\n';
        variations.value = value;
        handleChangeInputPermutations(variations);
--- a/static/js/pages/store/stock_items.js
+++ b/static/js/pages/store/stock_items.js
@@ -1,6 +1,7 @@


-
+import Events from "../../lib/events.js";
+import Validation from "../../lib/validation";
 import { BasePage } from "../base.js";

 export class PageStoreStockItems extends BasePage {
@@ -20,7 +21,7 @@ export class PageStoreStockItems extends BasePage {

    hookupFilters() {
        let filterCategory = document.querySelectorAll(idFilterCategory);
-        initialiseEventHandler(filterCategory, flagInitialised, function() {
+        Events.initialiseEventHandler(filterCategory, flagInitialised, function() {
            console.log("hooking up filter category");
            filterCategory = document.querySelectorAll(filterCategory);
            /*
@@ -42,7 +43,7 @@ export class PageStoreStockItems extends BasePage {
        });

        let filterProduct = document.querySelectorAll(idFilterProduct);
-        initialiseEventHandler(filterProduct, flagInitialised, function() {
+        Events.initialiseEventHandler(filterProduct, flagInitialised, function() {
            listProducts.forEach(function(product) {
                if (product[attrIdCategory] != getElementCurrentValue(document.querySelectorAll(idFilterCategory))) return;
                /*
@@ -58,21 +59,21 @@ export class PageStoreStockItems extends BasePage {
        });
        
        let filterIsOutOfStock = document.querySelectorAll(idFilterIsOutOfStock);
-        initialiseEventHandler(filterIsOutOfStock, flagInitialised, function() {
+        Events.initialiseEventHandler(filterIsOutOfStock, flagInitialised, function() {
            filterIsOutOfStock.addEventListener("change", function(event) {
                loadPermutations();
            });
        });

        let filterQuantityMin = document.querySelectorAll(idFilterQuantityMin);
-        initialiseEventHandler(filterQuantityMin, flagInitialised, function() {
+        Events.initialiseEventHandler(filterQuantityMin, flagInitialised, function() {
            filterQuantityMin.addEventListener("change", function(event) {
                loadPermutations();
            });
        });
        
        let filterQuantityMax = document.querySelectorAll(idFilterQuantityMax);
-        initialiseEventHandler(filterQuantityMax, flagInitialised, function() {
+        Events.initialiseEventHandler(filterQuantityMax, flagInitialised, function() {
            filterQuantityMax.addEventListener("change", function(event) {
                loadPermutations();
            });
@@ -251,7 +252,7 @@ export class PageStoreStockItems extends BasePage {
            quantityMin = row.querySelector('td.' + flagQuantityMin + ' input');
            quantityMax = row.querySelector('td.' + flagQuantityMax + ' input');
            
-            initialiseEventHandler(ddlCategory, flagInitialised, function() {
+            Events.initialiseEventHandler(ddlCategory, flagInitialised, function() {
                // ddlCategory = document.querySelectorAll(ddlCategory);
                ddlCategory.addEventListener('change', function() {
                    /*
@@ -273,21 +274,21 @@ export class PageStoreStockItems extends BasePage {
                });
            });

-            initialiseEventHandler(ddlProduct, flagInitialised, function() {
+            Events.initialiseEventHandler(ddlProduct, flagInitialised, function() {
                // ddlProduct = document.querySelectorAll(ddlProduct);
                ddlProduct.addEventListener('change', function() {
                    handleChangeInputPermutations(this);
                });
            });

-            initialiseEventHandler(variations, flagInitialised, function() {
+            Events.initialiseEventHandler(variations, flagInitialised, function() {
                // variations = document.querySelectorAll(variations);
                variations.addEventListener('change', function() {
                    handleChangeInputPermutations(this);
                });
            });

-            initialiseEventHandler(quantityStock, flagInitialised, function() {
+            Events.initialiseEventHandler(quantityStock, flagInitialised, function() {
                // quantityStock = document.querySelectorAll(quantityStock);
                quantityStock.addEventListener('change', function() {
                    // console.log(this.value);
@@ -296,14 +297,14 @@ export class PageStoreStockItems extends BasePage {
                });
            });

-            initialiseEventHandler(quantityMin, flagInitialised, function() {
+            Events.initialiseEventHandler(quantityMin, flagInitialised, function() {
                // quantityMin = document.querySelectorAll(quantityMin);
                quantityMin.addEventListener('change', function() {
                    handleChangeInputPermutations(this);
                });
            });

-            initialiseEventHandler(quantityMax, flagInitialised, function() {
+            Events.initialiseEventHandler(quantityMax, flagInitialised, function() {
                // quantityMax = document.querySelectorAll(quantityMax);
                quantityMax.addEventListener('change', function() {
                    handleChangeInputPermutations(this);
@@ -330,7 +331,7 @@ export class PageStoreStockItems extends BasePage {
        if (wasDirty != isDirty) {
            isRowDirty(row);
            let permutationsDirty = getPermutations(true);
-            if (isEmpty(permutationsDirty)) {
+            if (Validation.isEmpty(permutationsDirty)) {
                buttonCancel.classList.add(flagCollapsed);
                buttonSave.classList.add(flagCollapsed);
            } else {
@@ -395,7 +396,7 @@ export class PageStoreProductCategories extends TableBasePage {
        this.hookupFilterActive();
    }
    hookupFilterIsNotEmpty() {
-        initialiseEventHandler('.' + flagIsNotEmpty, flagInitialised, (filter) => {
+        Events.initialiseEventHandler('.' + flagIsNotEmpty, flagInitialised, (filter) => {
            filter.addEventListener("change", (event) => {
                PageStoreProductCategories.isDirtyFilter(filter);
            });
--- a/static/js/pages/user/user.js
+++ b/static/js/pages/user/user.js
@@ -10,7 +10,7 @@ export class PageUser extends BasePage {

    initialize() {
        this.sharedInitialize();
-        hookupButtonsContactUs();
+        this.hookupButtonNavContact();
    }

    leave() {
--- a/static/js/router.js
+++ b/static/js/router.js
@@ -15,31 +15,61 @@ import { PageStoreProductPermutations } from './pages/store/product_permutations
 // import { PageStoreProductVariations } from './pages/store/product_variations.js';
 import { PageStoreStockItems } from './pages/store/stock_items.js';
 */
+import "./lib/common.js";
+import "./lib/constants.js";
+import "./lib/events.js";
+import "./lib/extras.js";
+// import "./DEPRECATED/init.js";
+import "./lib/local_storage.js";
+import "./lib/utils.js";
+import "./lib/validation.js";
 import API from './api.js';
 import DOM from './dom.js';

+// Create a context for the pages
+const pagesContext = require.context('./pages', true, /\.js$/);
+
+/*
+const pageModules = {
+    // Core
+    [hashPageHome]: () => import('./pages/core/home.js'),
+    [hashPageContact]: () => import('./pages/core/contact.js'),
+    [hashPageServices]: () => import('./pages/core/services.js'),
+    [hashPageAdminHome]: () => import('./pages/core/admin_home.js'),
+    // Legal
+    [hashPageAccessibilityStatement]: () => import('./pages/legal/accessibility_statement.js'),
+    [hashPageLicense]: () => import('./pages/legal/license.js'),
+    // Store
+    [hashPageStoreProductCategories]: () => import('./pages/store/product_categories.js'),
+    [hashPageStoreProductPermutations]: () => import('./pages/store/product_permutations.js'),
+    // [hashPageStoreProducts]: () => import('./pages/store/products.js'),
+    // User
+    // Add other pages here...
+};
+*/
+
 export default class Router {
    constructor() {
        // Pages
        this.pages = {};
        // Core
-        this.pages[hashPageHome] = { name: 'PageHome', pathModule: './pages/core/home.js' };
-        this.pages[hashPageContact] = { name: 'PageContact', pathModule: './pages/core/contact.js' };
-        this.pages[hashPageServices] = { name: 'PageServices', pathModule: './pages/core/services.js' };
-        this.pages[hashPageAdminHome] = { name: 'PageAdminHome', pathModule: './pages/core/admin_home.js' };
+        this.pages[hashPageHome] = { name: 'PageHome', pathModule: './core/home.js' };
+        this.pages[hashPageContact] = { name: 'PageContact', pathModule: './core/contact.js' };
+        this.pages[hashPageServices] = { name: 'PageServices', pathModule: './core/services.js' };
+        this.pages[hashPageAdminHome] = { name: 'PageAdminHome', pathModule: './core/admin_home.js' };
        // Legal
-        this.pages[hashPageAccessibilityStatement] = { name: 'PageAccessibilityStatement', pathModule: './pages/legal/accessibility_statement.js' };
-        this.pages[hashPageLicense] = { name: 'PageLicense', pathModule: './pages/legal/license.js' };
+        this.pages[hashPageAccessibilityStatement] = { name: 'PageAccessibilityStatement', pathModule: './legal/accessibility_statement.js' };
+        this.pages[hashPageLicense] = { name: 'PageLicense', pathModule: './legal/license.js' };
        // Store
-        this.pages[hashPageStoreProductCategories] = { name: 'PageStoreProductCategories', pathModule: './pages/store/product_categories.js' };
-        this.pages[hashPageStoreProductPermutations] = { name: 'PageStoreProductPermutations', pathModule: './pages/store/product_permutations.js' };
-        // this.pages[hashPageStoreProductPrices] = { name: 'PageStoreProductPrices', pathModule: './pages/store/product_prices.js' };
-        this.pages[hashPageStoreProducts] = { name: 'PageStoreProducts', pathModule: './pages/store/products.js' };
-        // this.pages[hashPageStoreProductVariations] = { name: 'PageStoreProductVariations', pathModule: './pages/store/product_variations.js' };
+        this.pages[hashPageStoreProductCategories] = { name: 'PageStoreProductCategories', pathModule: './store/product_categories.js' };
+        this.pages[hashPageStoreProductPermutations] = { name: 'PageStoreProductPermutations', pathModule: './store/product_permutations.js' };
+        // this.pages[hashPageStoreProductPrices] = { name: 'PageStoreProductPrices', pathModule: './store/product_prices.js' };
+        this.pages[hashPageStoreProducts] = { name: 'PageStoreProducts', pathModule: './store/products.js' };
+        // this.pages[hashPageStoreProductVariations] = { name: 'PageStoreProductVariations', pathModule: './store/product_variations.js' };
        // User
-        // this.pages[hashPageUserLogin] = { name: 'PageUserLogin', pathModule: './pages/user/login.js' };
-        // this.pages[hashPageUserLogout] = { name: 'PageUserLogout', pathModule: './pages/user/logout.js' };
-        // this.pages[hashPageUserAccount] = { name: 'PageUserAccount', pathModule: './pages/user/account.js' };
+        // this.pages[hashPageUserLogin] = { name: 'PageUserLogin', pathModule: './user/login.js' };
+        // this.pages[hashPageUserLogout] = { name: 'PageUserLogout', pathModule: './user/logout.js' };
+        // this.pages[hashPageUserAccount] = { name: 'PageUserAccount', pathModule: './user/account.js' };
        
        // Routes
        this.routes = {};
@@ -64,14 +94,26 @@ export default class Router {
        this.initialize();
    }
    async loadPage(hashPage, isPopState = false) {
+        console.log("loadPage: " + hashPage);
        const PageClass = await this.getClassPageFromHash(hashPage);
+        console.log("PageClass: ", PageClass);
        this.currentPage = new PageClass();
+        console.log("this.currentPage: ", this.currentPage);
        this.currentPage.initialize(isPopState);
    }
    async getClassPageFromHash(hashPage) {
+        
        let pageJson = this.pages[hashPage];
-        const module = await import(pageJson.pathModule);
-        return module[pageJson.name];
+        console.log("pageJson: ", pageJson);
+        try {
+            const module = await pagesContext(pageJson.pathModule);
+            console.log("module: ", module);
+            return module[pageJson.name];
+        }
+        catch (error) {
+            console.error('Page not found:', hashPage);
+            throw error;
+        }
    }
    initialize() {
        /*
@@ -180,7 +222,7 @@ export default class Router {
    }

    static parameteriseUrl(url, parameters) {
-        if (!isEmpty(parameters)) {
+        if (!Validation.isEmpty(parameters)) {
            url += '%3F'; // '?';
            let firstParameter = true;
            for (var p in parameters) {
				`@@ -0,0 +1 @@`
				`/! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE /`