diff --git a/gulpfile.js b/gulpfile.js index fa36719..3f93dea 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -1,5 +1,5 @@ // Setup project -let config = require('./gulp/config'); +const config = require('./gulp/config'); // Gulp requirements const { watch, series, parallel } = require('gulp'); @@ -21,12 +21,12 @@ const sassLint = require('gulp-sass-lint'); const rename = require('gulp-rename'); const cleanCss = require('gulp-clean-css'); const pump = require('pump'); -// const cache = require('gulp-cached'); +const cache = require('gulp-cached'); // const remember = require('gulp-remember'); const concat = require('gulp-concat'); const uglify = require('gulp-uglify'); const jshint = require('gulp-jshint'); -// const gulpif = require('gulp-if'); +const gulpif = require('gulp-if'); const changed = require('gulp-changed'); const merge = require('merge-stream'); const spritesmith = require('gulp.spritesmith'); @@ -38,17 +38,19 @@ const htmlValidator = require('gulp-w3c-html-validator'); // Data variables const input = { screens: config.src + 'screens/**/*.+(njk|html)', - templates: config.src + 'templates', + templates: config.src + 'templates/', data: config.src + 'data/**/*.json', style: config.src + 'style/**/*.s+(a|c)ss', code: [ + // config.src + 'code/hippie/config.js', + // config.src + 'code/hippie/main.js', config.src + 'code/hippie/variables.js', config.src + 'code/hippie/functions.js', config.src + 'code/hippie/global.js', - config.src + 'code/variables.js', - config.src + 'code/functions.js', - config.src + 'code/global.js', - config.src + 'code/**/*.js', + // config.src + 'code/variables.js', + // config.src + 'code/functions.js', + // config.src + 'code/global.js', + // config.src + 'code/**/*.js', '!' + config.src + 'vendor/**/*' ], fonts: 'node_modules/@fortawesome/fontawesome-free/webfonts/**/*', @@ -75,7 +77,7 @@ const output = { // Show demo content if configured if (config.demo === true) { config.index = 'demo.html'; - config.templateData = config.src + '/templates/demo/data.json'; + config.templateData = config.src + 'templates/demo/data.json'; } else { config.frontendData = [config.src + 'data/**/*.json', '!' + config.src + 'data/demo.json']; } @@ -104,24 +106,33 @@ function json() { .pipe(dest(output.data)); } -const manageEnvironment = function (environment) { +function manageEnvironment(environment) { environment.addFilter('slug', function (str) { return str && str.replace(/\s/g, '-', str).toLowerCase(); }); - environment.addGlobal('titlePrefix', config.hippie.titlePrefix) + environment.addGlobal('hippie', config.hippie); + environment.addGlobal('titlePrefix', config.hippie.titlePrefix); +} + +// function getDataForTemplates (file) { +// const template = JSON.parse(fs.readFileSync(config.templateData)); +// const hippie = config.hippie; +// // console.log(file.relative); +// return { hippie, template }; +// } +function getDataForTemplates (file) { + const data = JSON.parse(fs.readFileSync(config.templateData)); + return { data }; } // Transpile HTML function nunjucks() { return src(input.screens) - .pipe(plumber()) - .pipe(data(function () { - let t = JSON.parse(fs.readFileSync(config.templateData)); - let h = config.hippie; - data = { h, t }; - return data; - })) + // .pipe(plumber()) + .pipe(customPlumber()) + // TODO only add data to pipe for necessary files + .pipe(data(getDataForTemplates)) .pipe(nunjucksRender({ path: input.templates, envOptions: { @@ -197,7 +208,7 @@ function code(cb) { }), plumber(), // cache('code'), - babel({ presets: ['@babel/env'] }), + // babel({ presets: ['@babel/env'] }), concat(config.hippie.jsFile + '.js'), dest(output.code), uglify(), @@ -307,6 +318,7 @@ exports.validate = series(nunjucks, validate); exports.assets = assets; exports.build = build; exports.dev = dev; +exports.serve = series(dev, serve); exports.default = series(dev, serve, overview); // function plumbError(errTitle) { @@ -318,3 +330,13 @@ exports.default = series(dev, serve, overview); // }) // }); // } +function customPlumber() { + return plumber({ + errorHandler: function (err) { + // Logs error in console + console.log(err.message); + // Ends the current pipe, so Gulp watch doesn't break + this.emit('end'); + } + }); +} \ No newline at end of file diff --git a/source/code/hippie/config.js b/source/code/hippie/config.js new file mode 100644 index 0000000..379a767 --- /dev/null +++ b/source/code/hippie/config.js @@ -0,0 +1,22 @@ +var hippie = { + brand: "|-| | |^ |^ | [- ", + screen: { + w: Math.max(document.documentElement.offsetWidth, document.documentElement.clientWidth, window.innerWidth, 0), + vh: Math.max(document.documentElement.clientHeight, window.innerHeight, 0), + dh: Math.max(document.documentElement.offsetHeight, document.documentElement.clientHeight, 0), + y: Math.min($(document).scrollTop(), document.documentElement.scrollTop) + // hippie.screen.y: document.documentElement.scrollTop + }, + body: { + w: Math.max(document.body.offsetWidth, document.body.clientWidth, window.innerWidth, 0), + h: Math.max(document.body.offsetHeight, document.body.clientHeight, 0), + } +}; + +var viewHover = true; +var basicEase = 600; + +var onerowAlphabet = "/\\ ]3 ( |) [- /= (_, |-| | _T /< |_ |\\/| |\\| () |^ ()_ /? _\\~ ~|~ |_| \\/ \\/\\/ >< `/ ~/_ "; +var onerowDigits = "\'| ^/_ -} +| ;~ (o \"/ {} \"| (\\) "; + +export { hippie }; \ No newline at end of file diff --git a/source/code/hippie/global.js b/source/code/hippie/global.js index 0b05906..ef61ad7 100644 --- a/source/code/hippie/global.js +++ b/source/code/hippie/global.js @@ -1,3 +1,3 @@ // Setup // ----------------------------------------------------------------------------- -setup(); +// setup(); diff --git a/source/code/hippie/main.js b/source/code/hippie/main.js new file mode 100644 index 0000000..6de9686 --- /dev/null +++ b/source/code/hippie/main.js @@ -0,0 +1,29 @@ +// Setup +// ----------------------------------------------------------------------------- +import { hippie } from './config.js'; + +// This is called everytime +function setup() { + 'use strict'; + + console.group('Document information'); + console.info('\n', config.brand, '\n\n'); + console.info('\n', hippie.brand, '\n\n'); + console.info('HTML:', hippie.screen, '\nBODY:', hippie.body); + console.groupEnd(); + if (debugOn) { + console.group('Debug information'); + console.dir(hippie); + console.groupEnd(); + } + + // WANNABE MODULE Mouse over effect + // With CSS only + if ($('#js_mob').length && viewHover) { + $('#js_mob').addClass('mouse_over'); + } + // if (viewHover) { + // $('body').prepend('
'); + // } + // With JS +} diff --git a/source/screens/demo.njk b/source/screens/demo.njk index 3a11bf9..b64cab6 100644 --- a/source/screens/demo.njk +++ b/source/screens/demo.njk @@ -60,7 +60,11 @@ {% block script %} {{ super() }} - + + + {# #} + {# #} +