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

made example working

Browse source
This commit is contained in:
Willem 2015-12-23 01:16:54 +01:00
parent 76fb554cff
commit b8b21655cf
22 changed files with 982 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

27
example/example-assets.json Normal file
View file

@ -0,0 +1,27 @@
{
"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"
]
}
}

148
example/example.js Normal file
View file

@ -0,0 +1,148 @@
'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');
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);
}
function renderTemplatePath(viewPath) {
return function (req, res) {
res.locals.query = req.query;
var qi = req.url.indexOf('?');
if (qi === -1) {
qi = req.url.length;
}
res.render(viewPath + req.url.substring(req.route.path.length-1, qi));
};
}
function renderIndex(server) {
var inline = '';
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
return function (req, res) {
res.render('index', {
inlineNot: useInline?'':inlineNot,
inline: useInline?inline:''
});
};
}
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;
};
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');
});

18
example/package.json Normal file
View file

@ -0,0 +1,18 @@
{
"name": "es5-ff-spa-loader-example",
"description": "es5-ff-spa-loader-example",
"version": "1.0.0",
"private": true,
"scripts": {
"start": "node example.js"
},
"dependencies": {
"async": "1.2.x",
"bootstrap": "3.3.x",
"ejs": "2.3.x",
"express": "4.11.x",
"flot": "0.8.x",
"minify": "^2.0.2",
"node-ff-assets": "^0.2.5"
}
}

140
example/www_static/css/boot.css Normal file
View file

@ -0,0 +1,140 @@
body {
margin-top: 100px;
background-color: #222;
}
@media ( min-width :768px) {
body {
margin-top: 50px;
}
}
#wrapper {
padding-left: 0;
}
#page-wrapper {
width: 100%;
padding: 0;
background-color: #fff;
}
.huge {
font-size: 50px;
line-height: normal;
}
@media ( min-width :768px) {
#wrapper {
padding-left: 225px;
}
#page-wrapper {
padding: 10px;
}
}
/* Top Navigation */
.top-nav {
padding: 0 15px;
}
.top-nav>li {
display: inline-block;
float: left;
}
.top-nav>li>a {
padding-top: 15px;
padding-bottom: 15px;
line-height: 20px;
color: #999;
}
.top-nav>li>a:hover, .top-nav>li>a:focus, .top-nav>.open>a, .top-nav>.open>a:hover,
.top-nav>.open>a:focus {
color: #fff;
background-color: #000;
}
.top-nav>.open>.dropdown-menu {
float: left;
position: absolute;
margin-top: 0;
border: 1px solid rgba(0, 0, 0, .15);
border-top-left-radius: 0;
border-top-right-radius: 0;
background-color: #fff;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
.top-nav>.open>.dropdown-menu>li>a {
white-space: normal;
}
ul.message-dropdown {
padding: 0;
max-height: 250px;
overflow-x: hidden;
overflow-y: auto;
}
li.message-preview {
width: 275px;
border-bottom: 1px solid rgba(0, 0, 0, .15);
}
li.message-preview>a {
padding-top: 15px;
padding-bottom: 15px;
}
li.message-footer {
margin: 5px 0;
}
ul.alert-dropdown {
width: 200px;
}
/* Side Navigation */
@media ( min-width :768px) {
.side-nav {
position: fixed;
top: 51px;
left: 225px;
width: 225px;
margin-left: -225px;
border: none;
border-radius: 0;
overflow-y: auto;
background-color: #222;
}
.side-nav>li>a {
width: 225px;
}
.side-nav li a:hover, .side-nav li a:focus {
outline: none;
background-color: #000 !important;
}
}
.side-nav>li>ul {
padding: 0;
}
.side-nav>li>ul>li>a {
display: block;
padding: 10px 15px 10px 38px;
text-decoration: none;
color: #999;
}
.side-nav>li>ul>li>a:hover {
color: #fff;
}
.huge {
font-size: 40px;
}

10
example/www_static/css/flot.css Normal file
View file

@ -0,0 +1,10 @@
.flot-chart {
display: block;
height: 400px;
}
.flot-chart-content {
width: 100%;
height: 100%;
}

56
example/www_static/css/panel.css Normal file
View file

@ -0,0 +1,56 @@
.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;
}

44
example/www_static/css/style.css Normal file
View file

@ -0,0 +1,44 @@
#wrapper {
padding-right: 0px;
padding-left: 0px;
}
.side-nav {
right: 0px;
left: 0px;
}
.btn {
margin-right: 10px;
}
.navbar-footer {
margin-left: 45%;
}
.navbar-toggle {
display: none;
}
.navbar-brand {
background-color: #C110D8;
}
.navbar-inverse .navbar-brand {
color: #FFFFFF;
}
.navbar-inverse .navbar-brand:focus {
outline: none;
}
.navbar-inverse .navbar-brand:hover {
background-color: #0F9A28;
outline: none;
}
.navbar-inverse {
background-color: #C110D8;
}

10
example/www_static/js/controller/page-bar.js Normal file
View file

@ -0,0 +1,10 @@
pageRouteInit.push(function ($routeProvider, $locationProvider) {
$routeProvider.when('/example-ui/bar', {
templateUrl: '/example-ui/thtml/bar',
controller: PageFoo
});
});
function PageFoo($scope, $http) {
}

10
example/www_static/js/controller/page-foo.js Normal file
View file

@ -0,0 +1,10 @@
pageRouteInit.push(function ($routeProvider, $locationProvider) {
$routeProvider.when('/example-ui/foo', {
templateUrl: '/example-ui/thtml/foo',
controller: PageFoo
});
});
function PageFoo($scope, $http) {
}

10
example/www_static/js/controller/page-index.js Normal file
View file

@ -0,0 +1,10 @@
pageRouteInit.push(function ($routeProvider, $locationProvider) {
$routeProvider.when('/example-ui', {
templateUrl: '/example-ui/thtml/index',
controller: PageIndex
});
});
function PageIndex($scope, $http) {
}

22
example/www_static/js/example-app.js Normal file
View file

@ -0,0 +1,22 @@
'use strict';
document.title = 'FF-Spa-Loader Example';
$('html').attr('ng-app', 'exampleUI');
$('html').attr('lang', 'en');
$(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('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'));
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});
}]);

18
example/www_views/index.ejs Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<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); }
});
</script>
</body>
</html>

32
example/www_views/thtml/bar.ejs Normal file
View file

@ -0,0 +1,32 @@
<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>

4
example/www_views/thtml/foo.ejs Normal file
View file

@ -0,0 +1,4 @@
<div>
<h2>Foo</h2>
<p>Welcome to the foo.</p>
</div>

4
example/www_views/thtml/index.ejs Normal file
View file

@ -0,0 +1,4 @@
<div>
<h2>Example UI Index</h2>
<p>Welcome make yourself at home.</p>
</div>

5
example/www_views/thtml/layout/footer.ejs Normal file
View file

@ -0,0 +1,5 @@
<nav class="navbar">
<div class="navbar-footer">
Example footer
</div>
</nav>

13
example/www_views/thtml/layout/header.ejs Normal file
View file

@ -0,0 +1,13 @@
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/example-ui/">Home</a>
<a class="navbar-brand" href="/example-ui/foo">Foo</a>
<a class="navbar-brand" href="/example-ui/bar">Bar</a>
</div>
</nav>