From 18ae4f6ea5bdf3f7e899b4ded632b933257f8ae3 Mon Sep 17 00:00:00 2001 From: Willem Date: Tue, 16 Feb 2016 16:09:23 +0100 Subject: [PATCH] Moved css to seperate file --- README.md | 8 +-- es5-ff-spa-loader.css | 49 +++++++++++++++++++ es5-ff-spa-loader.js | 16 +----- example/app_mobile/config.xml | 3 +- .../scripts/copy-ff-spa-loader-css.js | 16 ++++++ ...spa-loader.js => copy-ff-spa-loader-js.js} | 4 +- example/app_mobile/www/index.html | 1 + example/app_server/example.js | 1 + example/app_server/www_views/index.ejs | 1 + gulpfile.js | 32 +++++++++--- package.json | 3 +- 11 files changed, 105 insertions(+), 29 deletions(-) create mode 100644 es5-ff-spa-loader.css create mode 100644 example/app_mobile/scripts/copy-ff-spa-loader-css.js rename example/app_mobile/scripts/{copy-ff-spa-loader.js => copy-ff-spa-loader-js.js} (81%) diff --git a/README.md b/README.md index 1165f2a..c52b6d5 100644 --- a/README.md +++ b/README.md @@ -78,7 +78,6 @@ A javascript library providing server defined loading of assets for a single pag * debug.prefix = Debug message prefix. (default: 'FFSpaLoader.') * error.handler = The error handler. (default: internal error handler ui) * error.title = The error title. (default: 'Loader '); - * error.style = The error ui css style. (default: red error) * boot.cordova.enable = Use deviceready event to boot when cordova is detected. (default: true) * boot.cordova.timeout = Boot after (if<0=no-)timeout when deviceready event is not received. (default: -1) * boot.cordova.flag = The window flag which is set when cordova is booted. (default: 'FFCordovaDevice') @@ -94,7 +93,6 @@ A javascript library providing server defined loading of assets for a single pag * question.submit = The start button text. (default: 'Start') * question.text = The question ui text. (default: 'Please provide the server name;') * question.size = The question ui input size. (default: 32) - * question.style = The question ui css style. (default: blue input) * question.validate.min.value = The minimal hostname length, false is disabled (default: 3) * question.validate.min.message = The error message (default: 'Server name is to short.') * question.validate.max.value = The maximal hostname length, false is disabled (default: 255) @@ -197,7 +195,6 @@ A javascript library providing server defined loading of assets for a single pag * Server header check support * Add instance websql options so it can also be used in application code. * Split assets per type so do js first then boot then css + cssData. - * Move css to file ? * Add more tests * css: set tag.media = 'only you'; * css: add media in resouces @@ -211,6 +208,11 @@ Add unit tests for any new or changed functionality. Lint and test your code. ## Release History +### 0.2.0 +* Dropped error.style and question.style for css file. +* Change dist with extra css/js folder. + + ### 0.1.1 * Moved websql delete timeout to cleanServerlUrl for faster boot. * Fixed websql db-size and db-name for older androids. diff --git a/es5-ff-spa-loader.css b/es5-ff-spa-loader.css new file mode 100644 index 0000000..866ebe9 --- /dev/null +++ b/es5-ff-spa-loader.css @@ -0,0 +1,49 @@ + +body { + color: #EFF0F1; + background: #484948; +} + +.ffError { + margin: 3em; + border-left: 0.3em solid #B55858; + border-radius: 1em; + padding: 0em 1em 0.3em 1em; +} + +.ffQuestion { + margin: 3em; + border-left: 0.3em solid #3F68AD; + border-radius: 1em; + padding: 0em 1em 0.3em 1em; +} + +.ffQuestion>div>input { + margin: 0.4em; + padding: 0.4em; + line-height: 2em; + background-color: #454442; + color: #EFF0F1; + border: none; + border-radius: 0.4em; + outline: none; + min-width: 5em; +} + +.ffQuestion>div>input:focus { + border: none; +} + +.ffQuestionError { + color: #B55858; +} + +.ffQuestionLoad { + transition: all 0.5s ease; + color: #484948; +} + +.ffQuestionLoad>div>input { + background-color: #484948; + color: #484948; +} diff --git a/es5-ff-spa-loader.js b/es5-ff-spa-loader.js index 52c4bfb..6afa2a7 100644 --- a/es5-ff-spa-loader.js +++ b/es5-ff-spa-loader.js @@ -52,8 +52,7 @@ }, error: { handler: null, // auto filled - title: 'Loader ', - style: 'body {color: #EFF0F1;background: #484948;} .ffError { margin: 3em;border-left: 0.3em solid #B55858;border-radius: 1em;padding: 0em 1em 0.3em 1em;}' + title: 'Loader ' }, boot: { cordova: { @@ -84,8 +83,7 @@ title: 'Question', submit: 'Start', size: 32, - text: 'Please provide the server name', - style: 'body {color: #EFF0F1;background: #484948;} .ffQuestion { margin: 3em;border-left: 0.3em solid #3F68AD;border-radius: 1em;padding: 0em 1em 0.3em 1em;} .ffQuestion > div > input {margin: 0.4em;padding: 0.4em; line-height: 2em;background-color: #454442;color: #EFF0F1;border: none;border-radius: 0.4em;outline: none;min-width: 5em;} .ffQuestion > div > input:focus {border: none;} .ffQuestionError{color: #B55858;} .ffQuestionLoad {transition: all 0.5s ease;color: #484948;} .ffQuestionLoad > div > input {background-color: #484948;color: #484948;}', + text: 'Please provide the server name', validate: { min: { value: 3, @@ -284,11 +282,6 @@ var rootTag = document.createElement('div'); rootTag.setAttribute('class','ffError'); document.getElementsByTagName('body')[0].appendChild(rootTag); - - var cssTag = document.createElement('style'); - cssTag.type = 'text/css'; - cssTag.innerHTML = options.error.style; - rootTag.appendChild(cssTag); var titleTag = document.createElement('h1'); titleTag.appendChild(document.createTextNode(options.error.title+err.name)); @@ -724,11 +717,6 @@ var rootTag = document.createElement('div'); rootTag.setAttribute('class','ffQuestion'); - var cssTag = document.createElement('style'); - cssTag.type = 'text/css'; - cssTag.innerHTML = options.question.style; - rootTag.appendChild(cssTag); - var titleTag = document.createElement('h1'); titleTag.appendChild(document.createTextNode(options.question.title)); rootTag.appendChild(titleTag); diff --git a/example/app_mobile/config.xml b/example/app_mobile/config.xml index 5854a27..75d774f 100644 --- a/example/app_mobile/config.xml +++ b/example/app_mobile/config.xml @@ -33,6 +33,7 @@ - + + diff --git a/example/app_mobile/scripts/copy-ff-spa-loader-css.js b/example/app_mobile/scripts/copy-ff-spa-loader-css.js new file mode 100644 index 0000000..5491de3 --- /dev/null +++ b/example/app_mobile/scripts/copy-ff-spa-loader-css.js @@ -0,0 +1,16 @@ +var fs = require('fs'); + +module.exports = function(context) { + var Q = context.requireCordovaModule('q'); + var deferral = new Q.defer(); + console.log('copy-ff-spa-loader-css start'); + fs.readFile('../../es5-ff-spa-loader.css',function(err,data) { + if (err) return deferral.reject(err); + fs.writeFile('www/es5-ff-spa-loader.css',data,function(err) { + if (err) return deferral.reject(err); + console.log('copy-ff-spa-loader-css done'); + deferral.resolve(); + }) + }); + return deferral.promise; +} diff --git a/example/app_mobile/scripts/copy-ff-spa-loader.js b/example/app_mobile/scripts/copy-ff-spa-loader-js.js similarity index 81% rename from example/app_mobile/scripts/copy-ff-spa-loader.js rename to example/app_mobile/scripts/copy-ff-spa-loader-js.js index 83906f3..abd3692 100644 --- a/example/app_mobile/scripts/copy-ff-spa-loader.js +++ b/example/app_mobile/scripts/copy-ff-spa-loader-js.js @@ -3,12 +3,12 @@ var fs = require('fs'); module.exports = function(context) { var Q = context.requireCordovaModule('q'); var deferral = new Q.defer(); - console.log('copy-ff-spa-loader start'); + console.log('copy-ff-spa-loader-js start'); fs.readFile('../../es5-ff-spa-loader.js',function(err,data) { if (err) return deferral.reject(err); fs.writeFile('www/es5-ff-spa-loader.js',data,function(err) { if (err) return deferral.reject(err); - console.log('copy-ff-spa-loader done'); + console.log('copy-ff-spa-loader-js done'); deferral.resolve(); }) }); diff --git a/example/app_mobile/www/index.html b/example/app_mobile/www/index.html index 9cd21f2..c232cbe 100644 --- a/example/app_mobile/www/index.html +++ b/example/app_mobile/www/index.html @@ -6,6 +6,7 @@ + diff --git a/example/app_server/example.js b/example/app_server/example.js index 4e28f99..b211e63 100644 --- a/example/app_server/example.js +++ b/example/app_server/example.js @@ -110,6 +110,7 @@ server.use('/static/module/jquery', express.static(path.join(__dirname,'. server.use('/static/module/angular', express.static(path.join(__dirname,'../node_modules/angular'))); server.use('/static/module/angular-route', express.static(path.join(__dirname,'../node_modules/angular-route'))); server.get('/static/spa-client-resources', function (req,res) {res.json({data: {resources: clientResourcesWeb}});}); +server.get('/static/spa-loader.css', function (req,res) {res.sendFile('es5-ff-spa-loader.css', { root: path.join(__dirname, '/../../') });}); server.get('/', function (req, res) {res.redirect('/example-ui');}); server.get('/example-ui/thtml/*', renderTemplatePath('thtml/')); server.get('/example-ui', renderIndex()); diff --git a/example/app_server/www_views/index.ejs b/example/app_server/www_views/index.ejs index f69d5b0..15bc3bb 100644 --- a/example/app_server/www_views/index.ejs +++ b/example/app_server/www_views/index.ejs @@ -3,6 +3,7 @@ Loading + diff --git a/gulpfile.js b/gulpfile.js index 84a8bc7..ef25a0a 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -6,18 +6,21 @@ var clean = require('gulp-clean'); var srcmaps = require('gulp-sourcemaps'); var mocha = require('gulp-mocha'); var jsdoc = require('gulp-jsdoc3'); +var cssnano = require('gulp-cssnano'); -var srcPath = './'; -var srcFile = 'es5-ff-spa-loader.js'; -var distPath = 'dist/'; -var testSrc = 'test/*.js'; +var srcPath = './'; +var srcFile = 'es5-ff-spa-loader.js'; +var srcCss = 'es5-ff-spa-loader.css'; +var distPathJS = 'dist/js'; +var distPathCSS = 'dist/css'; +var testSrc = 'test/*.js'; gulp.task('clean', function() { - return gulp.src(distPath).pipe(clean()); + return gulp.src('dist').pipe(clean()); }); gulp.task('buildScript', ['test'], function() { - gulp.src(srcFile, {cwd: srcPath}).pipe(gulp.dest(distPath)); + gulp.src(srcFile, {cwd: srcPath}).pipe(gulp.dest(distPathJS)); }); gulp.task('buildScriptMin', ['buildScript'], function() { @@ -26,7 +29,20 @@ gulp.task('buildScriptMin', ['buildScript'], function() { .pipe(uglify({/*preserveComments: 'license'*/})) .pipe(rename({ extname: '.min.js' })) .pipe(srcmaps.write('.')) - .pipe(gulp.dest(distPath)); + .pipe(gulp.dest(distPathJS)); +}); + +gulp.task('buildCss', ['test'], function() { + gulp.src(srcCss, {cwd: srcPath}).pipe(gulp.dest(distPathCSS)); +}); + +gulp.task('buildCssMin',['buildCss'], function () { + return gulp.src(srcCss, {cwd: srcPath}) + .pipe(srcmaps.init()) + .pipe(cssnano()) + .pipe(rename({ extname: '.min.css' })) + .pipe(srcmaps.write('.')) + .pipe(gulp.dest(distPathCSS)); }); gulp.task('testMocha',['clean'], function() { @@ -49,6 +65,6 @@ gulp.task('buildJSDoc', function (cb) { }); gulp.task('test', ['clean','testMocha']); -gulp.task('build', ['test','buildScript','buildScriptMin'/*,'buildJSDoc'*/]); +gulp.task('build', ['test','buildCssMin','buildScriptMin'/*,'buildJSDoc'*/]); diff --git a/package.json b/package.json index 6ddad4e..69fcbc3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "es5-ff-spa-loader", - "version": "0.1.1", + "version": "0.2.0", "description": "Javascript Single Page Application Loader", "main": "es5-ff-spa-loader.js", "scripts": { @@ -37,6 +37,7 @@ "devDependencies": { "gulp": "^3.9.0", "gulp-clean": "^0.3.1", + "gulp-cssnano": "^2.1.1", "gulp-jsdoc3": "^0.1.0", "gulp-mocha": "^2.2.0", "gulp-rename": "^1.2.2",