From 6bd8b7c3d415da7ff486f6058057d0afbc33b286 Mon Sep 17 00:00:00 2001 From: Matt Mo Date: Sun, 26 Jul 2020 15:10:12 -0700 Subject: [PATCH] Start of the ignite html project. --- build-dev.bat | 6 ++ build-prod.bat | 6 ++ gulpfile.js | 161 +++++++++++++++++++++++++++++++++++++++++++++ run-dev.bat | 5 ++ src/framework.js | 168 +++++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 346 insertions(+) create mode 100644 build-dev.bat create mode 100644 build-prod.bat create mode 100644 gulpfile.js create mode 100644 run-dev.bat create mode 100644 src/framework.js diff --git a/build-dev.bat b/build-dev.bat new file mode 100644 index 0000000..ded421f --- /dev/null +++ b/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 \ No newline at end of file diff --git a/build-prod.bat b/build-prod.bat new file mode 100644 index 0000000..b27b53f --- /dev/null +++ b/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 \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 0000000..846883a --- /dev/null +++ b/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); \ No newline at end of file diff --git a/run-dev.bat b/run-dev.bat new file mode 100644 index 0000000..f2936c6 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/src/framework.js b/src/framework.js new file mode 100644 index 0000000..5f289b3 --- /dev/null +++ b/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);