ff-attic/es5-ff-spa-loader
2
0
Fork 0
Code Activity

Moved css to seperate file

Browse source
This commit is contained in:
Willem 2016-02-16 16:09:23 +01:00
parent 9f41acfd43
commit 18ae4f6ea5
11 changed files with 105 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
README.md
View file

@ -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.

49
es5-ff-spa-loader.css Normal file
View file

@ -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;
}

16
es5-ff-spa-loader.js
View file

@ -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);

3
example/app_mobile/config.xml
View file

@ -33,6 +33,7 @@
<!-- disable backup to ICloud of db file -->
<preference name="BackupWebStorage" value="none"/>
</platform>
<hook type="before_build" src="scripts/copy-ff-spa-loader.js" />
<hook type="before_build" src="scripts/copy-ff-spa-loader-js.js" />
<hook type="before_build" src="scripts/copy-ff-spa-loader-css.js" />
<hook type="after_build" src="scripts/rename-android-apk.js" />
</widget>

16
example/app_mobile/scripts/copy-ff-spa-loader-css.js Normal file
View file

@ -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;
}

4
example/app_mobile/scripts/copy-ff-spa-loader.js → example/app_mobile/scripts/copy-ff-spa-loader-js.js
View file

@ -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();
})
});

1
example/app_mobile/www/index.html
View file

@ -6,6 +6,7 @@
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="es5-ff-spa-loader.css" />
</head>
<body>
<script type="text/javascript" src="cordova.js"></script>

1
example/app_server/example.js
View file

@ -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());

1
example/app_server/www_views/index.ejs
View file

@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8"/>
<title>Loading</title>
<link rel="stylesheet" type="text/css" href="/static/spa-loader.css" />
</head>
<body>
<script><%- inlineScript %></script>

32
gulpfile.js
View file

@ -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'*/]);

3
package.json
View file

@ -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",