Add slider

xudafeng · Sep 17, 2014 · 7d030cd · 7d030cd
1 parent 7e3731c
commit 7d030cd
Show file tree

Hide file tree

Showing 5 changed files with 106 additions and 7 deletions.
diff --git a/bin/startserver b/bin/startserver
@@ -45,7 +45,7 @@ var server = new StartServer();
 
 middleware(server);
 
-server.listen(port, ipv4, function() {
+server.listen(port, ipv4, function(e) {
   var url = 'http://' + ipv4 + ':' + port;
   var opener = platform === 'win32' ? 'start' : platform === 'linux' ? 'xdg-open' : 'open';
   exec(opener + ' ' + url);

diff --git a/lib/middleware/directory/index.js b/lib/middleware/directory/index.js
@@ -94,7 +94,7 @@ function Directory(req, res, next) {
       return next();
     }
 
-    if (indexRouter(res, next, localPath, req.url)){
+    if (indexRouter(res, next, localPath, req.url)) {
       return next();
     }
 
@@ -113,7 +113,7 @@ function Directory(req, res, next) {
   });
 }
 
-function indexRouter(res, next, localPath, standardPath){
+function indexRouter(res, next, localPath, standardPath) {
   var indexArray = ['index.html', 'index.htm'];
   var indexPath = '';
   var indexFile;
@@ -125,7 +125,7 @@ function indexRouter(res, next, localPath, standardPath){
     next();
   }
 
-  for (var i = 0; i < indexArray.length; i++){
+  for (var i = 0; i < indexArray.length; i++) {
     indexPath = localPath + indexArray[i];
 
     if (!fileUtil.isExistedFile(indexPath)){

diff --git a/lib/middleware/markdown/default.tpl b/lib/middleware/markdown/default.tpl
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
+<title><#=$title#></title>
+<style>
+body {padding: 0 20%; opacity: 0; -webkit-transition: all 1s ease;}
+.right-top {position: absolute; top: 20px; right: 20px;}
+</style>
+</head>
+<body>
+<#=$content#>
+<div class="right-top" id="radios">
+  <label>normal</label>
+  <input type="radio" name="slide" checked value="true" />
+  <label>slide</label>
+  <input id="slide" type="radio" name="slide" value="false"/>
+</div>
+<script>
+function setCookie(name, value, expiresHours) {
+  var cookieString = name + "=" + escape(value);
+  if(expiresHours>0) {
+    var date = new Date();
+    date.setTime( date.getTime + expiresHours * 3600 * 1000);
+    cookieString = cookieString + "; expires=" + date.toGMTString();
+  }
+  document.cookie = cookieString;
+}
+
+setTimeout(function() {
+  document.body.style.opacity = 1;
+  var isSlide = document.getElementById("slide").checked;
+  document.getElementById("radios").addEventListener("click", function(e) {
+    if (e.target.nodeName === "INPUT" && e.target.value === "false") {
+      setCookie("startserver-slide", true, 240);
+      location.href = "";
+    }
+  }, false);
+}, 16);
+</script>
+</body>
+</html>
diff --git a/lib/middleware/markdown/index.js b/lib/middleware/markdown/index.js
@@ -19,25 +19,37 @@ var path = require('path');
 var url = require('url');
 var fs = require('fs');
 var xutil = require('xutil');
+var minitpl = require('minitpl');
 var fileUtil = xutil.file;
 var parse = url.parse;
 var join = path.join;
 var normalize = path.normalize;
 
-module.exports = Markdown;
+function render(type, data) {
+  var template = path.join(__dirname, type + '.tpl');
+  template = fs.readFileSync(template, 'utf-8');
+  template = minitpl.compile(template);
+  return template(data);
+}
 
-function Markdown(req, res, next){
+function Markdown(req, res, next) {
   var url = parse(req.url),
     dir = decodeURIComponent(url.pathname),
     file = normalize(join(root, dir));
 
   if (path.extname(file).toLowerCase() === '.md'){
+    var type = req.headers.cookie && !!~req.headers.cookie.indexOf('startserver-slide=true') ? 'slide' : 'default';
     file = fileUtil.readFile(file, 'utf-8');
-    file = marked(file)
+    file = render(type, {
+      content: marked(file),
+      title: dir
+    });
     res.writeHead(200, {'Content-Type': 'text/html; charset=UTF-8'});
     res.write(file, 'utf-8');
     res.end();
   } else {
     next();
   }
 }
+
+module.exports = Markdown;
diff --git a/lib/middleware/markdown/slide.tpl b/lib/middleware/markdown/slide.tpl
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
+<title><#=$title#></title>
+<style>
+.right-top {position: absolute; top: 20px; right: 20px;}
+</style>
+</head>
+<body>
+<#=$content#>
+<div class="right-top" id="radios">
+  <label>normal</label>
+  <input type="radio" name="slide" value="true" />
+  <label>slide</label>
+  <input id="slide" type="radio" name="slide" checked value="false"/>
+</div>
+<script>
+function setCookie(name, value, expiresHours) {
+  var cookieString = name + "=" + escape(value);
+  if(expiresHours>0) {
+    var date = new Date();
+    date.setTime( date.getTime + expiresHours * 3600 * 1000);
+    cookieString = cookieString + "; expires=" + date.toGMTString();
+  }
+  document.cookie = cookieString;
+}
+function initSlider() {
+}
+setTimeout(function() {
+  document.body.style.opacity = 1;
+  var isSlide = document.getElementById("slide").checked;
+  document.getElementById("radios").addEventListener("click", function(e) {
+    if (e.target.nodeName === "INPUT" && e.target.value === "true") {
+      setCookie("startserver-slide", false, 240);
+      location.href = "";
+    }
+  }, false);
+  initSlider();
+}, 16);
+</script>
+</body>
+</html>