Start of the ignite html project.
This commit is contained in:
commit
6bd8b7c3d4
6
build-dev.bat
Normal file
6
build-dev.bat
Normal file
@ -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
|
||||
6
build-prod.bat
Normal file
6
build-prod.bat
Normal file
@ -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
|
||||
161
gulpfile.js
Normal file
161
gulpfile.js
Normal file
@ -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);
|
||||
5
run-dev.bat
Normal file
5
run-dev.bat
Normal file
@ -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
|
||||
168
src/framework.js
Normal file
168
src/framework.js
Normal file
@ -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);
|
||||
Loading…
x
Reference in New Issue
Block a user