Start of the ignite html project.

build-dev.bat

@@ -0,0 +1,6 @@
+SET BUILD_OPTIMIZE=false
+SET BUILD_WEBAPI_ADDRESS=http://localhost:30659
+SET BUILD_OUTPUT_DIR=build
+call gulp
+cordova build android
+pause

build-prod.bat

@@ -0,0 +1,6 @@
+SET BUILD_OPTIMIZE=true
+SET BUILD_WEBAPI_ADDRESS=https://api.competitrax.com/v1
+SET BUILD_OUTPUT_DIR=build
+CALL gulp
+cordova build --release android
+pause

gulpfile.js

@@ -0,0 +1,161 @@
+var gulp = require('gulp'),
+    autoprefixer = require('gulp-autoprefixer'),
+    sass = require('gulp-sass'),
+    cleanCSS = require('gulp-clean-css'),
+    sourcemaps = require('gulp-sourcemaps'),
+    imagemin = require('gulp-imagemin'),
+    minify = require('gulp-minify'),
+    minifyInline = require('gulp-minify-inline'),
+    lineec = require('gulp-line-ending-corrector'),
+    htmlmin = require('gulp-htmlmin'),
+    replace = require('gulp-replace'),
+    del = require('del'),
+    rename = require('gulp-rename'),
+    browserSync = require('browser-sync').create();
+
+//Get the environment from the gulp command line, options (dev, prod)
+const optimizeBuild = ((process.env.BUILD_OPTIMIZE || '').trim().toLowerCase() === 'true'); //Default is false.
+const outputDirectory = (process.env.BUILD_OUTPUT_DIR || 'dev');
+
+console.log(`Optimize Build: ${optimizeBuild}`);
+console.log(`Output Directory: ${outputDirectory}`);
+
+function cleanOutputTask() {
+    console.log("Cleaning up output directory..");
+    return del([
+        `${outputDirectory}/**/*`
+    ]);
+}
+
+function htmlTask() {
+    if (!optimizeBuild) {
+        return gulp.src(['!src/_*.html', 'src/*.html', 'src/**/*.html'])
+            .pipe(htmlmin({ caseSensitive: true, removeComments: true, conservativeCollapse: true, collapseWhitespace: true }))
+            .pipe(minifyInline({ js: { mangle: false, compress: true } }))
+            .pipe(lineec())
+            .pipe(gulp.dest(`${outputDirectory}/`));
+    } else {
+        return gulp.src(['!src/_*.html', 'src/*.html', 'src/**/*.html'])
+            .pipe(htmlmin({ caseSensitive: true, removeComments: true, conservativeCollapse: true, collapseWhitespace: true }))
+            .pipe(minifyInline({ js: { mangle: false, compress: true } }))
+            .pipe(lineec())
+            .pipe(gulp.dest(`${outputDirectory}/`));
+    }
+}
+
+function scssTask() {
+    if (!optimizeBuild) {
+        return gulp.src([
+            'src/**/*.scss',
+            'src/*.scss'])
+            .pipe(sourcemaps.init({ loadMaps: true }))
+            .pipe(sass({
+                outputStyle: 'expanded'
+            }).on('error', sass.logError))
+            .pipe(autoprefixer('last 2 versions'))
+            .pipe(cleanCSS())
+            .pipe(sourcemaps.write())
+            .pipe(lineec())
+            .pipe(gulp.dest(`${outputDirectory}/`));
+    } else {
+        return gulp.src([
+            'src/**/*.scss',
+            'src/*.scss',
+            '!src/_*.scss',
+            '!src/**/_*.scss'])
+            .pipe(sass({
+                outputStyle: 'expanded'
+            }).on('error', sass.logError))
+            .pipe(autoprefixer('last 2 versions'))
+            .pipe(cleanCSS())
+            .pipe(lineec())
+            .pipe(gulp.dest(`${outputDirectory}/`));
+    }
+}
+
+function jsTask() {
+    if (!optimizeBuild) {
+        return gulp.src([
+            'src/**/*.js',
+            'src/*.js'])
+            .pipe(sourcemaps.init({ loadMaps: true }))
+            .pipe(minify({
+                mangle: false,
+                compress: true,
+                noSource: true,
+                ext: {
+                    min: '.js'
+                }
+            }))
+            .pipe(sourcemaps.write())
+            .pipe(lineec())
+            .pipe(gulp.dest(`${outputDirectory}/`));
+    } else {
+        return gulp.src([
+            'src/**/*.js',
+            'src/*.js'])
+            .pipe(minify({
+                mangle: false,
+                compress: true,
+                noSource: true,
+                ext: {
+                    min: '.js'
+                }
+            }))
+            .pipe(lineec())
+            .pipe(gulp.dest(`${outputDirectory}/`));
+    }
+}
+
+function fontsTask() {
+    return gulp.src([
+        'src/*.ttf',
+        'src/**/*.ttf',
+        'src/*.woff',
+        'src/**/*.woff',
+        'src/*.woff2',
+        'src/**/*.woff2',
+        'src/*.eot',
+        'src/**/*.eot'])
+        .pipe(rename({ dirname: '' }))
+        .pipe(gulp.dest(`${outputDirectory}/`));
+}
+
+function watchTask() {
+    console.log("Starting browserSync... hold on");
+
+    browserSync.init({
+        open: 'local',
+        port: 8080,
+        server: `${outputDirectory}/`,
+    });
+
+    //Watch for any site changes
+    gulp.watch(['src/*.scss', 'src/**/*.scss'], gulp.series(site_scssTask)).on('change', browserSync.reload);;
+    gulp.watch(['src/*.js', 'src/**/*.js'], gulp.series(site_jsTask)).on('change', browserSync.reload);;
+    gulp.watch(['src/*.html', 'src/**/*.html'], gulp.series(site_htmlTask)).on('change', browserSync.reload);;
+
+    return Promise.resolve();
+}
+
+//Site Tasks
+exports.htmlTask = htmlTask;
+exports.scssTask = scssTask;
+exports.jsTask = jsTask;
+exports.fontsTask = fontsTask;
+exports.cleanOutputTask = cleanOutputTask;
+exports.watchTask = watchTask;
+
+var build = gulp.series(
+    [
+        cleanOutputTask,
+        gulp.parallel(
+            htmlTask,
+            scssTask,
+            jsTask,
+            fontsTask
+        )
+    ]);
+
+gulp.task('default', build);
+gulp.task('run', watchTask);

run-dev.bat

@@ -0,0 +1,5 @@
+SET BUILD_OUTPUT_DIR=build
+START /B gulp run
+START /B cordova run browser --live-reload
+START /B cordova run android --live-reload
+pause

src/framework.js

@@ -0,0 +1,168 @@
+class attribute {
+    constructor(name, value) {
+        this.name = name;
+        this.value = value;
+    }
+}
+
+class collection {
+    constructor(items) {
+        this.siblings = [];
+        this.children = [];
+        this.attributes = [];
+        this.classes = [];
+        this.tagName = null;
+        this.element = null;
+
+        for (var i = 0; i < items.length; i++) {
+            if (items[i] instanceof attribute) {
+                this.attributes.push(items[i]);
+            } else if (items[i] instanceof property) {
+                this.children.push(new propertyObserver(items[i]));
+            } else {
+                this.children.push(items[i]);
+            }
+        }
+    }
+
+    class(...items) {
+        for (var i = 0; i < items.length; i++) {
+            if (items[i] instanceof property) {
+                items[i].onPropertyChange.push((oldValue, newValue) => this.onClassChanged(oldValue, newValue));
+            } else {
+                this.classes.push(items[i]);
+            }
+        }
+
+        return this;
+    }
+
+    div(...items) {
+        this.siblings.push(new div(...items));
+        return this;
+    }
+
+    p(...items) {
+        this.siblings.push(new p(...items));
+        return this;
+    }
+
+    construct(parent) {
+        if (!parent) {
+            parent = window.document.body;
+        }
+
+        this.element = window.document.createElement(this.tagName);
+        parent.appendChild(this.element);
+
+        for (var i = 0; i < this.children.length; i++) {
+            if (this.children[i] instanceof String || typeof this.children[i] === 'string') {
+                this.element.appendChild(document.createTextNode(this.children[i]));
+            } else if (this.children[i] instanceof collection || this.children[i].prototype instanceof collection || this.children[i].prototype.constructor === collection) {
+                this.children[i].construct(this.element);
+            }
+        }
+
+        for (var i = 0; i < this.siblings.length; i++) {
+            if (this.siblings[i] instanceof String || typeof this.siblings[i] === 'string') {
+                this.parent.appendChild(document.createTextNode(this.siblings[i]));
+            } else if (this.siblings[i] instanceof collection || this.siblings[i].prototype instanceof collection || this.siblings[i].prototype.constructor === collection) {
+                this.siblings[i].construct(parent);
+            }
+        }
+    }
+
+    onClassChanged(oldValue, newValue) {
+        console.log(`Class changed, oldValue: ${oldValue} newValue: ${newValue}`);
+
+        if (oldValue && oldValue !== "" && oldValue !== " ") {
+            this.element.classList.remove(oldValue);
+        }
+
+        if (newValue && newValue !== "" && newValue !== " ") {
+            this.element.classList.add(newValue);
+        }
+    }
+}
+
+class div extends collection {
+    constructor(...items) {
+        super(items);
+
+        this.tagName = "div";
+    }
+}
+
+class p extends collection {
+    constructor(...items) {
+        super(items);
+
+        this.tagName = "p";
+    }
+}
+
+class h1 extends collection {
+    constructor(...items) {
+        super(items);
+
+        this.tagName = "h1";
+    }
+}
+
+class propertyObserver extends collection {
+    constructor(property) {
+        super([]);
+
+        this.property = property;
+        this.property.onPropertyChange.push((oldValue, newValue) => this.onUpdateProperty(oldValue, newValue));
+    }
+
+    construct(parent) {
+        this.element = document.createTextNode("");
+        parent.appendChild(this.element);
+    }
+
+    onUpdateProperty(oldValue, newValue) {
+        this.element.nodeValue = newValue;
+    }
+}
+
+class property {
+    constructor() {
+        this.onPropertyChange = [];
+        this._value = null;
+    }
+
+    get value() {
+        return this._value;
+    }
+
+    set value(val) {
+        var old = this._value;
+        this._value = val;
+
+        for (var i = 0; i < this.onPropertyChange.length; i++) {
+            this.onPropertyChange[i](old, val);
+        }
+    }
+}
+
+var prop = new property();
+var classProp = new property();
+
+console.log("Property:");
+console.log(prop);
+
+console.log("Class Property:");
+console.log(classProp);
+
+var test = new div(
+    new h1("I am a heading").class(classProp),
+    new p(prop)
+).div(new p("This is content"));
+
+
+test.construct(window.document.body);
+
+
+console.log(test);