Initial commit

public/js/main.js

@@ -0,0 +1,34 @@
+import settings from './settings';
+
+// Create global
+window.site = {};
+site.settings = settings;
+
+function initialize() {
+    site.html = document.querySelector('html');
+    site.body = document.querySelector('body');
+
+    console.log('JS Start');
+
+    initializeModules();
+}
+
+/**
+ * Initialize the modules with all the components
+ */
+function initializeModules() {
+    for(let modulesItem = 0; modulesItem < settings.modules.length; modulesItem++) {
+        const module = settings.modules[modulesItem];
+
+        const moduleClass = require(`./modules/${module.group}/${module.module}`);
+        const domElements = document.querySelectorAll(module.el);
+
+        if (typeof moduleClass !== 'undefined' && domElements.length > 0) {
+            new moduleClass({
+                el: domElements
+            });
+        }
+    }
+}
+
+document.addEventListener("DOMContentLoaded", initialize);

public/js/modules/default/Socket.js

@@ -0,0 +1,32 @@
+import io from 'socket.io-client';
+
+class Socket {
+    constructor({el}) {
+        this.el = el;
+        this.socket = false;
+
+        this.init();
+    }
+
+    init() {
+        this.socket = io.connect(`http://${expressConfig.hostname}:${expressConfig.port}`);
+
+        this.socket.on('connect', this.connect);
+        this.socket.on('disconnect', this.disconnect);
+        this.socket.on('error', this.error);
+    }
+
+    connect() {
+        console.log('[SOCKET] Connected!');
+    }
+
+    disconnect() {
+        console.log('[SOCKET] Disconnected!');
+    }
+
+    error() {
+        console.log('[SOCKET] Error!');
+    }
+}
+
+module.exports = Socket;

public/js/modules/index/Index.js

@@ -0,0 +1,7 @@
+class Index {
+    constructor({el}) {
+        this.el = el;
+    }
+}
+
+module.exports = Index;

public/js/settings.js

@@ -0,0 +1,14 @@
+export default {
+    modules: [
+        {
+            module: "Socket",
+            group: "default",
+            el: "main"
+        },
+        {
+            module: "Index",
+            group: "index",
+            el: "#home"
+        }
+    ]
+}

public/js/utils/Api.js

@@ -0,0 +1,33 @@
+/**
+ * Function to post data to the API
+ *
+ * @param method
+ * @param data
+ * @param callback
+ * @param auth
+ */
+export default (method, data, callback, auth = "") => {
+    const xmlhttp = new XMLHttpRequest();
+    let route = "/api";
+
+    xmlhttp.open("POST", route);
+    xmlhttp.setRequestHeader("Content-Type", "application/json");
+    xmlhttp.setRequestHeader("Bearer", auth);
+    xmlhttp.send(JSON.stringify(data));
+
+    xmlhttp.onreadystatechange = function () {
+        if (xmlhttp.readyState === XMLHttpRequest.DONE) {
+            const responseCode = xmlhttp.status;
+            const response = JSON.parse(xmlhttp.responseText);
+            console.log('response', response);
+
+            console.log('responseCode', responseCode);
+
+            if (responseCode === 200) {
+                callback({error: false});
+            } else {
+                callback({error: true, fields: response.fields, raw_error: response.error});
+            }
+        }
+    }
+}

public/scss/components/_form.scss

@@ -0,0 +1,5 @@
+label.invalid {
+  span {
+    color: #F44336;
+  }
+}

public/scss/global/_normalize.scss

@@ -0,0 +1,259 @@
+/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
+
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */
+
+html {
+  font-family: sans-serif; /* 1 */
+  -ms-text-size-adjust: 100%; /* 2 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+  margin: 0;
+}
+
+/* HTML5 display definitions
+   ========================================================================== */
+
+/**
+ * Correct `block` display not defined for any HTML5 element in IE 8/9.
+ * Correct `block` display not defined for `details` or `summary` in IE 10/11
+ * and Firefox.
+ * Correct `block` display not defined for `main` in IE 11.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
+  display: block;
+}
+
+/**
+ * 1. Correct `inline-block` display not defined in IE 8/9.
+ * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+ */
+
+audio,
+canvas,
+progress,
+video {
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
+}
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+ * Address `[hidden]` styling not present in IE 8/9/10.
+ * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
+ */
+
+[hidden],
+template {
+  display: none;
+}
+
+/* Links
+   ========================================================================== */
+
+/**
+ * Remove the gray background color from active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+  outline: 0;
+}
+
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove border when inside `a` element in IE 8/9/10.
+ */
+
+img {
+  border: 0;
+}
+
+/**
+ * Correct overflow not hidden in IE 9/10/11.
+ */
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
+ * styling of `select`, unless a `border` property is set.
+ */
+
+/**
+ * 1. Correct color not being inherited.
+ *    Known issue: affects color of disabled elements.
+ * 2. Correct font properties not being inherited.
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  color: inherit; /* 1 */
+  font: inherit; /* 2 */
+  margin: 0; /* 3 */
+}
+
+/**
+ * Address `overflow` set to `hidden` in IE 8/9/10/11.
+ */
+
+button {
+  overflow: visible;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+ * Correct `select` style inheritance in Firefox.
+ */
+
+button,
+select {
+  text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+  appearance: none; /* 2 */
+  border: none;
+  cursor: pointer; /* 3 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+input {
+  line-height: normal;
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
+ *    (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box; /* 2 */
+  box-sizing: content-box;
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari and Chrome on OS X.
+ * Safari (but not Chrome) clips the cancel button when the search input has
+ * padding (and `textfield` appearance).
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * Remove default vertical scrollbar in IE 8/9/10/11.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/* Tables
+   ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+td,
+th {
+  padding: 0;
+}

public/scss/global/_utils.scss

@@ -0,0 +1,22 @@
+// Visibility
+.hidden {
+  visibility: hidden;
+}
+
+.visible {
+  visibility: visible;
+}
+
+/**
+ * Accessibility: Positioning content offscreen
+ * @see https://www.paciellogroup.com/blog/2012/05/html5-accessibility-chops-hidden-and-aria-hidden/
+ * @see http://alistapart.com/article/now-you-see-me
+ * @see http://accessibilitytips.com/2008/03/04/positioning-content-offscreen/
+ */
+.off-screen,
+.visually-hidden {
+  position: absolute;
+  // never use the top property!
+  left: -999em;
+  margin: 0; // fix uncontrolled whitespace still being displayed
+}

public/scss/style.scss

@@ -0,0 +1,19 @@
+@charset "UTF-8";
+
+//
+// General
+//
+
+// Variables
+@import "variables/colors";
+
+// Global
+@import "global/normalize";
+@import "global/utils";
+
+//
+// Local App
+//
+
+// Components
+@import "components/form";

public/scss/variables/_colors.scss

@@ -0,0 +1,4 @@
+// colors
+$black: #000000;
+$white: #ffffff;
+$orange: #ff9800;