Skip to content

Commit

Permalink
latest version
Browse files Browse the repository at this point in the history
  • Loading branch information
mape committed Oct 13, 2010
1 parent fa62f79 commit d27a394
Show file tree
Hide file tree
Showing 6 changed files with 215 additions and 84 deletions.
34 changes: 27 additions & 7 deletions public/css/client.css
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,14 @@
}
html
{
gradient: #ddd_#ccc;
height: 100%;
gradient: #222_#555;
}
body
{
height: 100%;
-vendor-box-sizing: border-box;
background: data-url(/img/bg.png);
background: url(/img/bg.png);
color: #222;
margin: 0;
font: 12px 'helvetica neue', helvetica, arial, sans-serif;
Expand All @@ -33,21 +33,41 @@ a:hover
h1,h2,h3,h4,h5
{
font-weight: bold;
-vendor-text-shadow: 1px 1px 0 rgba(255,255,255,0.8), 0 0 15px rgba(0,0,0,0.4);
-vendor-text-shadow: 1px 1px 0 rgba(255,255,255,0.4), 0 0 15px rgba(0,0,0,0.4);
}
h1
{
font-size: 30px;
color: #111;
font-size: 25px;
}
h2
{
font-size: 20px;
padding: 8px 0 10px;
}
hr
{
border: 0;
border-top: 1px solid rgba(0,0,0,0.3);
border-bottom: 1px solid rgba(255,255,255,0.3);
margin: 10px 0;
}
strong
{
font-weight: bold;
font-size: 130%;
}
#page-container
{
text-align: center;
width: 550px;
position: absolute;
top: 50%;
left: 50%;
margin: -32px 0 0 -330px;
margin: -75px 0 0 -290px;
border: 1px rgba(255,255,255,0.3) solid;
gradient: rgba(255,255,255,1)_rgba(255,255,255,0.1);
gradient: rgba(255,255,255,0.5)_rgba(255,255,255,0.1);
-vendor-box-shadow: 0px 0px 15px rgba(0,0,0,0.3), 0px 0px 10px rgba(0,0,0,0.2) inset;
padding: 12px 15px;
-vendor-border-radius: 15px;
-vendor-border-radius: 10px;
}
13 changes: 10 additions & 3 deletions public/js/jquery.client.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,13 @@
if (!window.console) {
var console = {
'log': function(){}
, 'dir': function(){}
, 'time': function(){}
, 'timeEnd': function(){}
, 'profile': function(){}
, 'profileEnd': function(){}
}
}
(function ($) {
$('body').removeClass('nojs');
setInterval(function () {
$('h1').text(new Date().toString());
}, 500);
})(jQuery.noConflict());
82 changes: 68 additions & 14 deletions public/js/jquery.reload.js
Original file line number Diff line number Diff line change
@@ -1,18 +1,72 @@
setTimeout(function () {
(function reload ($) {
var currentPath = window.location.href.replace(new RegExp('https?://' + window.location.host, ''), '');
var doReload = true;
(function ($) {
function doMoveAjax(url) {
if (url) {
$.ajax({
'url': '/reload-content/',
'data': {
'path': url
},
'type': 'post',
'cache': false,
'success': function (text) {
$('.refresh').fadeTo(200, 0.2).fadeTo(200, 1).fadeTo(200, 0.2).fadeTo(200, 1);
}
});
}
}(function reload($) {
$.ajax({
'url': '/reload/'
, 'success': function () {
$('link').each(function(index) {
$(this).attr('href', $(this).attr('href').replace(/[0-9]+/, new Date().getTime()));
});

}
, 'complete': function () {
setTimeout(function() {
reload($);
'url': '/reload-content/',
'cache': false,
'success': function (text) {
if (text === 'css') {
$('link').each(function (index) {
$(this).attr('href', $(this).attr('href').replace(/[0-9]+/, new Date().getTime()));
});
} else if (text === 'content') {
setTimeout(function () {
window.location.reload(true);
}, 200);
} else {
if (text && currentPath !== text) {
doReload = false;
window.location = text;
}
}
},
'complete': function () {
setTimeout(function () {
if (doReload) {
reload($);
}
}, 1000);
}
});
})(jQuery);
}, 1000);
})($);
$('a').live('click', function (event) {
doMoveAjax($(this).attr('href'));
});
var $refresh = $('<div class="refresh">R</div>').click(function (event) {
doMoveAjax(currentPath);
}).appendTo('body').css({
'position': 'fixed',
'bottom': '50%',
'right': '0px',
'cursor': 'pointer',
'color': '#fff',
'background-color': '#000',
'font-weight': 'bold',
'padding': '2px 4px 2px 6px',
'line-height': '100%',
'font-size': '14px'
});
if (!$.browser.msie) {
$refresh.css({
'background-color': 'rgba(0,0,0,0.7)',
'border-radius': '5px 0 0 5px',
'-moz-border-radius': '5px 0 0 5px',
'-webkit-border-radius': '5px 0 0 5px'
});
}
})(jQuery);
124 changes: 80 additions & 44 deletions server.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ var connect = require('connect');
var assetManager = require('connect-assetmanager');
var assetHandler = require('connect-assetmanager-handlers');
var express = require('express');
var fs = require('fs');

process.title = 'node-express-boilerplate';
process.addListener('uncaughtException', function (err, stack) {
Expand All @@ -16,6 +17,7 @@ var assets = assetManager({
, 'dataType': 'js'
, 'files': [
'jquery.js'
, '*'
, 'jquery.client.js'
, 'jquery.reload.js'
]
Expand All @@ -24,7 +26,11 @@ var assets = assetManager({
}
, 'postManipulate': {
'^': [
assetHandler.uglifyJsOptimize
function (file, path, index, isLast, callback) {
// Enables live JS editing auto reload.
callback(file);
lastChangedContent = Date.now();
}
]
}
}, 'css': {
Expand All @@ -33,17 +39,10 @@ var assets = assetManager({
, 'dataType': 'css'
, 'files': [
'reset.css'
, '*'
, 'client.css'
]
, 'preManipulate': {
/*'MSIE': [
assetHandler.yuiCssOptimize
, assetHandler.fixVendorPrefixes
, assetHandler.fixGradients
, assetHandler.stripDataUrlsPrefix
, assetHandler.fixFloatDoubleMargin
]
, */
'^': [
assetHandler.fixVendorPrefixes
, assetHandler.fixGradients
Expand All @@ -53,9 +52,7 @@ var assets = assetManager({
, 'postManipulate': {
'^': [
function (file, path, index, isLast, callback) {
// Notifies the browser to refresh the CSS.
// This enables coupled with jquery.reload.js
// enables live CSS editing without reload.
// Enables live CSS editing without reload.
callback(file);
lastChangedCss = Date.now();
}
Expand All @@ -73,7 +70,6 @@ app.configure(function() {

app.configure(function() {
app.use(connect.conditionalGet());
app.use(connect.gzip());
app.use(connect.bodyDecoder());
app.use(connect.logger());
app.use(assets);
Expand All @@ -82,40 +78,80 @@ app.configure(function() {

app.configure('development', function() {
app.use(connect.errorHandler({ dumpExceptions: true, showStack: true }));
});

app.dynamicHelpers({
cacheTimeStamps: function(req, res) {
return assets.cacheTimestamps;
}
});
// Set as global to allow assetmaanger to change
lastChangedContent = 0;
lastChangedCss = 0;
var path = false;
app.get('/reload-content/', function(req, res) {
var timeoutCss;
var timeoutContent;
var timeoutPath;
var reloadCss = lastChangedCss;
var reloadContent = lastChangedContent;
(function reload () {
timeoutContent = setTimeout(function () {
if (reloadContent < lastChangedContent) {
reloadContent = lastChangedContent;
res.send('content');
reset();
} else {
reload();
}
}, 100);
})();
(function reload () {
timeoutCss = setTimeout(function () {
if (reloadCss < lastChangedCss) {
reloadCss = lastChangedCss;
res.send('css');
reset();
} else {
reload();
}
}, 100);
})();
(function reload () {
timeoutPath = setTimeout(function () {
if (path) {
res.send(path);
reset();
} else {
reload();
}
}, 100);
})();

app.get('/', function(req, res) {
res.render('index', {
locals: {
'date': new Date().toString()
function reset() {
if (timeoutCss) {
clearTimeout(timeoutCss);
}
if (timeoutCss) {
clearTimeout(timeoutPath);
}
if (timeoutContent) {
clearTimeout(timeoutContent);
}
}
});
});

app.post('/', function(req, res) {
console.log(req.body);
res.send('post');
});

var lastChangedCss = 0;
app.get('/reload/', function(req, res) {
var reloadCss = lastChangedCss;
(function reload () {
setTimeout(function () {
if ( reloadCss < lastChangedCss) {
res.send('reload');
reloadCss = lastChangedCss;
} else {
reload();
}
}, 100);
})();
});
app.post('/reload-content/', function(req, res) {
if (req.body.path) {
path = req.body.path;
setTimeout(function() {
path = null;
}, 1000);
}
res.send('');
});

app.listen(80);
fs.readdir(app.settings.views, function(err, files) {
files.forEach(function(file) {
fs.watchFile(app.settings.views+'/'+file, function (old, newFile) {
if (old.mtime.toString() != newFile.mtime.toString()) {
lastChangedContent = Date.now();
}
});
});
});
});
2 changes: 1 addition & 1 deletion views/index.ejs
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<h1><%=date %></h1>
<h1><a href="/test/"><%=date %></a></h1>
Loading

0 comments on commit d27a394

Please sign in to comment.