Added lots op options
This commit is contained in:
Willem
parent
b8b21655cf
commit
95a90b51fb
19 changed files with 814 additions and 484 deletions
|
|
@ -1,27 +0,0 @@
|
|||
{
|
||||
"linkMapping" : {
|
||||
"/static/module/bootstrap/": "node_modules/bootstrap/dist/",
|
||||
"/static/module/flot/": "node_modules/flot/",
|
||||
"/static/": "www_static/"
|
||||
},
|
||||
"css": {
|
||||
"linkTarget": "/static/css/lib/assets.css",
|
||||
"linkSources": [
|
||||
"/static/module/bootstrap/css/bootstrap.css"
|
||||
]
|
||||
},
|
||||
"js": {
|
||||
"linkTarget": "/static/js/lib/assets.js",
|
||||
"linkSources": [
|
||||
"/static/js/lib/jquery-2.1.3/jquery.js@http://code.jquery.com/jquery-2.1.3.js",
|
||||
"/static/module/bootstrap/js/bootstrap.js",
|
||||
"/static/module/flot/jquery.flot.js",
|
||||
"/static/module/flot/jquery.flot.resize.js",
|
||||
"/static/module/flot/jquery.flot.pie.js",
|
||||
"/static/js/lib/angularjs-1.4.0-b4/angular.js@https://code.angularjs.org/1.4.0-beta.4/angular.js",
|
||||
"/static/js/lib/angularjs-1.4.0-b4/angular-route.js@https://code.angularjs.org/1.4.0-beta.4/angular-route.js",
|
||||
"/static/js/lib/angularjs-1.4.0-b4/angular-resource.js@https://code.angularjs.org/1.4.0-beta.4/angular-resource.js",
|
||||
"/static/js/lib/angularjs-1.4.0-b4/angular-touch.js@https://code.angularjs.org/1.4.0-beta.4/angular-touch.js"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -1,46 +1,80 @@
|
|||
'use strict';
|
||||
|
||||
var express = require('express');
|
||||
var async = require('async');
|
||||
var path = require('path');
|
||||
var assets = require('node-ff-assets');
|
||||
var fs = require('fs');
|
||||
var minify = require('minify');
|
||||
var fetch = require('fetch');
|
||||
var cors = require('cors');
|
||||
|
||||
function buildAssets(server,callbackDone) {
|
||||
var singleResult = 'false' !== process.env.DEV_ASSETS_SINGLE_RESULT;
|
||||
var assetsConfig = require('./example-assets.json');
|
||||
assets.build({
|
||||
assets: {
|
||||
js: {
|
||||
configCreate: assets.factory.builder.configCreate.fromJSON(assetsConfig,'js'),
|
||||
configFill: function (config, callback) {
|
||||
async.series([
|
||||
assets.factory.lib.async.pushLinkSources(config, '/static/js/', 'www_static/js/'),
|
||||
assets.factory.lib.async.pushLinkSources(config, '/static/js/controller/', 'www_static/js/controller/'),
|
||||
],callback);
|
||||
},
|
||||
},
|
||||
css: {
|
||||
configCreate: assets.factory.builder.configCreate.fromJSON(assetsConfig,'css'),
|
||||
configFill: function (config, callback) {
|
||||
async.series([
|
||||
assets.factory.lib.async.pushLinkSources(config, '/static/css/', 'www_static/css/'),
|
||||
],callback);
|
||||
},
|
||||
},
|
||||
},
|
||||
assemblerCreate: assets.factory.builder.assemblerCreate.readFileRegex(),
|
||||
assemblerFill: function (assembler, callback) {
|
||||
var serverResultKey = 'ff_assets_'+assembler.config.assetType;
|
||||
assembler.on ('log', assets.factory.assembler.event.log.console(assembler.config.assetType));
|
||||
assembler.on ('result', assets.factory.assembler.event.result.objectSet(server,serverResultKey));
|
||||
assembler.config.linkTargetSingleResult = singleResult;
|
||||
callback();
|
||||
},
|
||||
},callbackDone);
|
||||
// example options;
|
||||
var serverUrl = 'http://localhost:8080';
|
||||
var useInline = true; // or false
|
||||
|
||||
var clientResourcesWeb = [];
|
||||
var clientResources = {
|
||||
js: [],
|
||||
css: [],
|
||||
cssData: []
|
||||
}
|
||||
|
||||
var addClientResource = function(clientResource, resourceType) {
|
||||
clientResources[resourceType].push(clientResource);
|
||||
}
|
||||
|
||||
var stringHash = function (str) {
|
||||
var hash = 31; // prime
|
||||
for (var i = 0; i < str.length; i++) {
|
||||
hash = ((hash<<5)-hash)+str.charCodeAt(i);
|
||||
hash = hash & hash; // keep 32b
|
||||
}
|
||||
return hash;
|
||||
};
|
||||
|
||||
var fetchHashResource = function(fetchEntry,cb) {
|
||||
fetch.fetchUrl(serverUrl + fetchEntry.url,function(err, meta, data) {
|
||||
if (err !== null) { return cb(err); }
|
||||
console.log('fetched url: '+fetchEntry.url+' length: '+meta.responseHeaders['content-length']);
|
||||
var assetHash = stringHash(''+data);
|
||||
clientResourcesWeb.push({
|
||||
url: fetchEntry.url,
|
||||
type: fetchEntry.type,
|
||||
hash: assetHash
|
||||
});
|
||||
cb(null);
|
||||
});
|
||||
};
|
||||
|
||||
var fetchHashResources = function(fetchList, cb) {
|
||||
var resourceStack = fetchList;
|
||||
var resourceLoader = function() {
|
||||
resourceStack = resourceStack.slice(1);
|
||||
if (resourceStack.length === 0) {
|
||||
cb(null);
|
||||
} else {
|
||||
fetchHashResource(resourceStack[0],resourceLoader);
|
||||
}
|
||||
};
|
||||
fetchHashResource(resourceStack[0],resourceLoader);
|
||||
};
|
||||
|
||||
var createClientResourceFetchList = function() {
|
||||
var fetchList = [];
|
||||
for (var clientResourceIdx in clientResources.js) {
|
||||
var url = clientResources.js[clientResourceIdx];
|
||||
fetchList.push({url:url,type:'js'});
|
||||
}
|
||||
for (var clientResourceIdx in clientResources.css) {
|
||||
var url = clientResources.css[clientResourceIdx];
|
||||
fetchList.push({url:url,type:'css'});
|
||||
}
|
||||
for (var clientResourceIdx in clientResources.cssData) {
|
||||
var url = clientResources.cssData[clientResourceIdx];
|
||||
fetchList.push({url:url,type:'cssData'});
|
||||
}
|
||||
return fetchList;
|
||||
};
|
||||
|
||||
function renderTemplatePath(viewPath) {
|
||||
return function (req, res) {
|
||||
res.locals.query = req.query;
|
||||
|
|
@ -57,10 +91,7 @@ function renderIndex(server) {
|
|||
minify(__dirname+'/../es5-ff-spa-loader.js', {}, function(err, data) {
|
||||
inline = '\n\t\t<script>'+data+'</script>';
|
||||
});
|
||||
var inlineNot = '\n\t\t<script src=\"/static/es5-ff-spa-loader.js\"></script>';
|
||||
|
||||
var useInline = true; // or false
|
||||
|
||||
var inlineNot = '\n\t\t<script src=\"/static/es5-ff-spa-loader.js\"></script>';
|
||||
return function (req, res) {
|
||||
res.render('index', {
|
||||
inlineNot: useInline?'':inlineNot,
|
||||
|
|
@ -69,80 +100,50 @@ function renderIndex(server) {
|
|||
};
|
||||
}
|
||||
|
||||
function sendRedirect() {
|
||||
return function (req, res) {
|
||||
res.redirect('/example-ui');
|
||||
};
|
||||
}
|
||||
|
||||
var stringHash = function (str) {
|
||||
var hash = 31; // prime
|
||||
for (var i = 0; i < str.length; i++) {
|
||||
hash = ((hash<<5)-hash)+str.charCodeAt(i);
|
||||
hash = hash & hash; // keep 32b
|
||||
}
|
||||
return hash;
|
||||
};
|
||||
|
||||
addClientResource('/static/module/jquery/jquery.js','js');
|
||||
addClientResource('/static/module/angular/angular.js','js');
|
||||
addClientResource('/static/module/angular-route/angular-route.js','js');
|
||||
addClientResource('/static/module/bootstrap/css/bootstrap.css','css');
|
||||
addClientResource('/static/module/bootstrap/js/bootstrap.js','js');
|
||||
addClientResource('/static/css/boot.css','css');
|
||||
addClientResource('/static/css/style.css','css');
|
||||
addClientResource('/static/js/example-app.js','js');
|
||||
addClientResource('/static/js/controller/page-bar.js','js');
|
||||
addClientResource('/static/js/controller/page-foo.js','js');
|
||||
addClientResource('/static/js/controller/page-index.js','js');
|
||||
|
||||
var server = express();
|
||||
buildAssets(server,function(err) {
|
||||
if (err) {
|
||||
throw err;
|
||||
}
|
||||
console.info('Server assets done.');
|
||||
|
||||
server.set('view engine', 'ejs');
|
||||
server.set('views', path.join(__dirname,'www_views'));
|
||||
server.use('/static', express.static(path.join(__dirname,'www_static')));
|
||||
server.use('/static/module/bootstrap', express.static(path.join(__dirname,'node_modules/bootstrap/dist')));
|
||||
server.use('/static/module/flot', express.static(path.join(__dirname,'node_modules/flot')));
|
||||
|
||||
server.get('/static/es5-ff-spa-loader.js', function (req,res) {
|
||||
res.write(fs.readFileSync(__dirname+'/../es5-ff-spa-loader.js', 'utf8'));
|
||||
res.end();
|
||||
});
|
||||
server.get('/static/resources-spa-mobile', function (req,res) {
|
||||
var hashJs = stringHash(fs.readFileSync(__dirname+'/www_static/js/lib/assets.js', 'utf8'));
|
||||
var hashCss = stringHash(fs.readFileSync(__dirname+'/www_static/css/lib/assets.css', 'utf8'));
|
||||
res.json({
|
||||
data: {
|
||||
resources: [
|
||||
{
|
||||
url: '/static/js/lib/assets.js----TODO',
|
||||
type: 'js',
|
||||
hash: hashJs
|
||||
},
|
||||
]
|
||||
}
|
||||
});
|
||||
});
|
||||
server.get('/static/resources-spa-web', function (req,res) {
|
||||
var hashJs = stringHash(fs.readFileSync(__dirname+'/www_static/js/lib/assets.js', 'utf8'));
|
||||
var hashCss = stringHash(fs.readFileSync(__dirname+'/www_static/css/lib/assets.css', 'utf8'));
|
||||
res.json({
|
||||
data: {
|
||||
resources: [
|
||||
{
|
||||
url: '/static/js/lib/assets.js',
|
||||
type: 'js',
|
||||
hash: hashJs
|
||||
},
|
||||
{
|
||||
url: '/static/css/lib/assets.css',
|
||||
type: 'css',
|
||||
hash: hashCss
|
||||
}
|
||||
]
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
server.get('/', sendRedirect());
|
||||
server.get('/example-ui/thtml/*', renderTemplatePath('thtml/'));
|
||||
server.get('/example-ui', renderIndex(server));
|
||||
server.get('/example-ui/*', renderIndex(server)); // must be last; for HTML5 history
|
||||
console.info('Server config done.');
|
||||
|
||||
server.listen(8080);
|
||||
console.info('Server started on port 8080');
|
||||
server.use(cors({credentials: true, origin: '*'}));
|
||||
server.set('view engine', 'ejs');
|
||||
server.set('views', path.join(__dirname,'www_views'));
|
||||
server.use('/static', express.static(path.join(__dirname,'www_static')));
|
||||
server.use('/static/module/bootstrap', express.static(path.join(__dirname,'node_modules/bootstrap/dist')));
|
||||
server.use('/static/module/jquery', express.static(path.join(__dirname,'node_modules/jquery/dist')));
|
||||
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/es5-ff-spa-loader.js', function (req,res) {
|
||||
res.write(fs.readFileSync(__dirname+'/../es5-ff-spa-loader.js', 'utf8'));
|
||||
res.end();
|
||||
});
|
||||
server.get('/static/spa-client-resources', function (req,res) {
|
||||
res.json({data: {resources: clientResourcesWeb}});
|
||||
});
|
||||
|
||||
server.get('/', function (req, res) {res.redirect('/example-ui');});
|
||||
server.get('/example-ui/thtml/*', renderTemplatePath('thtml/'));
|
||||
server.get('/example-ui', renderIndex(server));
|
||||
server.get('/example-ui/*', renderIndex(server)); // must be last; for HTML5 history
|
||||
console.info('Server config done.');
|
||||
|
||||
server.listen(8080);
|
||||
console.info('Server started on port 8080');
|
||||
|
||||
var res = createClientResourceFetchList();
|
||||
fetchHashResources(res, function(err) {
|
||||
if (err !== null) {console.log(err);};
|
||||
console.log('Total assets build: '+clientResourcesWeb.length);
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -7,12 +7,14 @@
|
|||
"start": "node example.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"async": "1.2.x",
|
||||
"angular": "^1.4.8",
|
||||
"angular-route": "^1.4.8",
|
||||
"bootstrap": "3.3.x",
|
||||
"cors": "^2.7.1",
|
||||
"ejs": "2.3.x",
|
||||
"express": "4.11.x",
|
||||
"flot": "0.8.x",
|
||||
"minify": "^2.0.2",
|
||||
"node-ff-assets": "^0.2.5"
|
||||
"fetch": "0.3.x",
|
||||
"jquery": "^2.1.4",
|
||||
"minify": "^2.0.2"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +0,0 @@
|
|||
|
||||
.flot-chart {
|
||||
display: block;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.flot-chart-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
|
||||
.panel-green {
|
||||
border-color: #5cb85c;
|
||||
}
|
||||
|
||||
.panel-green .panel-heading {
|
||||
border-color: #5cb85c;
|
||||
color: #fff;
|
||||
background-color: #5cb85c;
|
||||
}
|
||||
|
||||
.panel-green a {
|
||||
color: #5cb85c;
|
||||
}
|
||||
|
||||
.panel-green a:hover {
|
||||
color: #3d8b3d;
|
||||
}
|
||||
|
||||
.panel-red {
|
||||
border-color: #d9534f;
|
||||
}
|
||||
|
||||
.panel-red .panel-heading {
|
||||
border-color: #d9534f;
|
||||
color: #fff;
|
||||
background-color: #d9534f;
|
||||
}
|
||||
|
||||
.panel-red a {
|
||||
color: #d9534f;
|
||||
}
|
||||
|
||||
.panel-red a:hover {
|
||||
color: #b52b27;
|
||||
}
|
||||
|
||||
.panel-yellow {
|
||||
border-color: #f0ad4e;
|
||||
}
|
||||
|
||||
.panel-yellow .panel-heading {
|
||||
border-color: #f0ad4e;
|
||||
color: #fff;
|
||||
background-color: #f0ad4e;
|
||||
}
|
||||
|
||||
.panel-yellow a {
|
||||
color: #f0ad4e;
|
||||
}
|
||||
|
||||
.panel-yellow a:hover {
|
||||
color: #df8a13;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
pageRouteInit.push(function ($routeProvider, $locationProvider) {
|
||||
$routeProvider.when('/example-ui/bar', {
|
||||
templateUrl: '/example-ui/thtml/bar',
|
||||
templateUrl: window.serverUrl+'/example-ui/thtml/bar',
|
||||
controller: PageFoo
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
pageRouteInit.push(function ($routeProvider, $locationProvider) {
|
||||
$routeProvider.when('/example-ui/foo', {
|
||||
templateUrl: '/example-ui/thtml/foo',
|
||||
template: '<div><h2>Foo</h2><p>Welcome to the foo.</p></div>',
|
||||
controller: PageFoo
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
pageRouteInit.push(function ($routeProvider, $locationProvider) {
|
||||
$routeProvider.when('/example-ui', {
|
||||
templateUrl: '/example-ui/thtml/index',
|
||||
template: '<div><h2>Example UI Index</h2><p>Welcome make yourself at home.</p></div>',
|
||||
controller: PageIndex
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,22 +1,22 @@
|
|||
'use strict';
|
||||
|
||||
document.title = 'FF-Spa-Loader Example';
|
||||
$('html').attr('ng-app', 'exampleUI');
|
||||
$('html').attr('lang', 'en');
|
||||
|
||||
var serverUrl = window.FFServerUrl;
|
||||
console.log('FF provided serverUrl: '+serverUrl);
|
||||
|
||||
$(document.createElement('div')).attr('id', 'wrapper').appendTo($('body'));
|
||||
$(document.createElement('div')).attr('ng-include', '\'/example-ui/thtml/layout/header\'').appendTo($('#wrapper'));
|
||||
$(document.createElement('div')).attr('ng-include', '\''+serverUrl+'/example-ui/thtml/header\'').appendTo($('#wrapper'));
|
||||
$(document.createElement('div')).attr('id', 'page-wrapper').appendTo($('#wrapper'));
|
||||
$(document.createElement('div')).attr('id', 'container-fluid').attr('ng-view', '').appendTo($('#page-wrapper'));
|
||||
$(document.createElement('div')).attr('ng-include', '\'/example-ui/thtml/layout/footer\'').appendTo($('body'));
|
||||
$(document.createElement('div')).attr('ng-include', '\''+serverUrl+'/example-ui/thtml/footer\'').appendTo($('body'));
|
||||
|
||||
var pageRouteInit = [];
|
||||
angular.module('exampleUI', ['ngRoute']).
|
||||
config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
|
||||
for (var i = 0; i < pageRouteInit.length; i++) {
|
||||
pageRouteInit[i]($routeProvider, $locationProvider);
|
||||
}
|
||||
$routeProvider.otherwise({ redirectTo: '/example-ui' });
|
||||
$locationProvider.html5Mode({enabled: true, requireBase: false});
|
||||
}]);
|
||||
angular.module('exampleUI', ['ngRoute']).config(
|
||||
['$routeProvider', '$locationProvider', function
|
||||
($routeProvider, $locationProvider) {
|
||||
|
||||
pageRouteInit.forEach(function(init) { init($routeProvider, $locationProvider); });
|
||||
$routeProvider.otherwise({ redirectTo: '/example-ui' });
|
||||
$locationProvider.html5Mode({enabled: true, requireBase: false});
|
||||
}]);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<title>Loading</title><%- inlineNot %>
|
||||
</head>
|
||||
<body><%- inline %>
|
||||
<script>
|
||||
FFSpaLoader.start({
|
||||
url: '/static/resources-spa-web',
|
||||
debug: true,
|
||||
cacheGetFn: function(key) { return localStorage.getItem(key); },
|
||||
cacheSetFn: function(key,value) { localStorage.setItem(key,value); },
|
||||
cacheDelFn: function(key) { return localStorage.removeItem(key); }
|
||||
FFSpaLoader.options.debug = true;
|
||||
FFSpaLoader.options.server.urlPath = '/static/spa-client-resources';
|
||||
FFSpaLoader.options.cache.factory = FFSpaLoader.autoSelectCache();
|
||||
FFSpaLoader.start(function() {
|
||||
console.log('FFExample.bootstrap angular');
|
||||
angular.bootstrap( $('body'), ['exampleUI']);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -1,32 +1,7 @@
|
|||
<div>
|
||||
<h2>Bar</h2>
|
||||
<p>Welcome to the bar.</p>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-hover table-striped">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Chair</th>
|
||||
<th>Person</th>
|
||||
<th>Drinking</th>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>seat 1</td>
|
||||
<td>empty</td>
|
||||
<td>none</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>seat 2</td>
|
||||
<td>you</td>
|
||||
<td>coffee</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>seat 3</td>
|
||||
<td>cat</td>
|
||||
<td>water</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div><h2>Bar</h2><p>Welcome to the bar.</p><div class="table-responsive">
|
||||
<table class="table table-bordered table-hover table-striped"><tbody>
|
||||
<tr><th>Chair</th><th>Person</th><th>Drinking</th></tr></tbody><tbody>
|
||||
<tr><td>seat 1</td><td>empty</td><td>none</td></tr>
|
||||
<tr><td>seat 2</td><td>you</td><td>coffee</td></tr>
|
||||
<tr><td>seat 3</td><td>cat</td><td>water</td></tr>
|
||||
</tbody></table></div></div>
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
<div>
|
||||
<h2>Foo</h2>
|
||||
<p>Welcome to the foo.</p>
|
||||
</div>
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
<div>
|
||||
<h2>Example UI Index</h2>
|
||||
<p>Welcome make yourself at home.</p>
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue