Browse files

added in fronted examples

  • Loading branch information...
1 parent f994e1f commit ece661cb42063f6644b8dcff80dd791c9002f13c @conancat committed Aug 6, 2011
View
21 docs/module.html
@@ -1,3 +1,22 @@
-<!DOCTYPE html> <html> <head> <title>module.coffee</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <div id="jump_to"> Jump To &hellip; <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="conf.html"> conf.coffee </a> <a class="source" href="helpers.html"> helpers.coffee </a> <a class="source" href="module.html"> module.coffee </a> <a class="source" href="routes.html"> routes.coffee </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> module.coffee </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">&#182;</a> </div> <p>Example module file</p> </td> <td class="code"> <div class="highlight"><pre>
+<!DOCTYPE html> <html> <head> <title>module.coffee</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <div id="jump_to"> Jump To &hellip; <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="conf.html"> conf.coffee </a> <a class="source" href="helpers.html"> helpers.coffee </a> <a class="source" href="module.html"> module.coffee </a> <a class="source" href="routes.html"> routes.coffee </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> module.coffee </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">&#182;</a> </div> <h2>Private Function</h2>
+
+<p>You can define as many private functions as you wish, as long as it is not exported using
+module.exports, the function will not be exposed to other modules.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nv">privateFn = </span><span class="nf">(fnType) -&gt;</span>
+ <span class="k">switch</span> <span class="nx">fnType</span>
+ <span class="k">when</span> <span class="s1">&#39;async&#39;</span> <span class="k">then</span> <span class="k">return</span> <span class="s1">&#39;Asynchronous Result&#39;</span>
+ <span class="k">when</span> <span class="s1">&#39;sync&#39;</span> <span class="k">then</span> <span class="k">return</span> <span class="s1">&#39;Synchronous Result&#39;</span></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">&#182;</a> </div> <h2>Synchronous Function</h2>
+
+<p>A synchronous function can return a value directly. This is probably the most direct form of
+functions that we are used to, right?</p> </td> <td class="code"> <div class="highlight"><pre><span class="nv">syncFn = </span><span class="o">-&gt;</span>
+ <span class="k">return</span> <span class="nx">privateFn</span><span class="p">(</span><span class="s1">&#39;sync&#39;</span><span class="p">)</span></pre></div> </td> </tr> <tr id="section-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">&#182;</a> </div> <h2>Asynchronous function</h2>
+
+<p>In Node, asynchronous functions are pretty much the norm and the bread and butter of every
+app. As long as the function requires any operation that is asynchronous, a <code>callback(err, result)</code>
+should be used to return the final result back to the caller function. See <code>routes.coffee</code>
+for example on how to call asynchronous functions.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nv">asyncFn = </span><span class="nf">(callback) -&gt;</span>
+ <span class="nx">setTimeout</span><span class="p">((</span><span class="o">-&gt;</span><span class="nx">callback</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span> <span class="nx">privateFn</span><span class="p">(</span><span class="s1">&#39;async&#39;</span><span class="p">))),</span> <span class="mi">300</span><span class="p">)</span>
+ <span class="k">return</span></pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">&#182;</a> </div> <h2>Export module</h2> </td> <td class="code"> <div class="highlight"><pre><span class="nv">module.exports = </span>
+ <span class="nv">syncFn: </span><span class="nx">syncFn</span>
+ <span class="nv">asyncFn: </span><span class="nx">asyncFn</span>
</pre></div> </td> </tr> </tbody> </table> </div> </body> </html>
View
22 lib/module.js
@@ -1,3 +1,23 @@
(function() {
-
+ var asyncFn, privateFn, syncFn;
+ privateFn = function(fnType) {
+ switch (fnType) {
+ case 'async':
+ return 'Asynchronous Function';
+ case 'sync':
+ return 'Synchronous Function';
+ }
+ };
+ syncFn = function() {
+ return privateFn('sync');
+ };
+ asyncFn = function(callback) {
+ setTimeout((function() {
+ return callback(null, privateFn('async'));
+ }), 300);
+ };
+ module.exports = {
+ syncFn: syncFn,
+ asyncFn: asyncFn
+ };
}).call(this);
View
37 lib/routes.js
@@ -1,9 +1,38 @@
(function() {
- var app;
+ var app, asyncFn, syncFn, _ref;
app = require('../app');
+ _ref = require('./module'), syncFn = _ref.syncFn, asyncFn = _ref.asyncFn;
app.get("/", function(req, res) {
- return res.render("index", {
- title: 'Express'
- });
+ return res.render("index");
+ });
+ app.get("/fn-test/:type?", function(req, res) {
+ var locals;
+ locals = {};
+ try {
+ if (req.params.type != null) {
+ if (req.params.type === 'async') {
+ return asyncFn(function(err, result) {
+ if (err != null) {
+ throw err;
+ } else {
+ locals.fnType = result;
+ }
+ return res.render('functionTest', locals);
+ });
+ } else if (req.params.type === 'sync') {
+ locals.fnType = syncFn();
+ return res.render('functionTest', locals);
+ } else {
+ locals.error = "There is no function called " + req.params.type + ".";
+ return res.render('error', locals);
+ }
+ } else {
+ locals.chooseTest = true;
+ return res.render('functionTest', locals);
+ }
+ } catch (e) {
+ locals.error = e;
+ return res.render('error', locals);
+ }
});
}).call(this);
View
137 public/css/style.css
@@ -1,49 +1,3 @@
-h1,
-h2,
-h3 {
- font-weight: normal;
- text-shadow: 0 1px 1px rgba(0,0,0,0.3);
-}
-h1 {
- font-family: "Shanti", sans-serif;
-}
-a {
- color: #00717d;
- text-decoration: none;
- border: none;
-}
-a:active {
- color: #00717d;
-}
-a:visited {
- color: #00717d;
-}
-a:hover {
- color: #a4a66a;
-}
-p,
-ol,
-ul,
-table {
- margin: 21px 0;
-}
-header ul,
-footer ul,
-nav ul,
-header p,
-footer p,
-nav p {
- margin: 0;
- padding: 0;
-}
-nav li {
- display: inline-block;
- vertical-align: top;
-}
-.ie7 nav li {
- display: inline;
- zoom: 1;
-}
html,
body,
div,
@@ -116,8 +70,6 @@ video {
margin: 0;
padding: 0;
border: 0;
- font-size: 1400px;
- line-height: 1.5em;
font: inherit;
vertical-align: baseline;
}
@@ -216,7 +168,7 @@ nav li {
list-style-image: none;
}
small {
- font-size: 1190px;
+ font-size: 1785px;
line-height: 1.5em;
}
strong,
@@ -228,7 +180,7 @@ td {
}
sub,
sup {
- font-size: 1050px;
+ font-size: 1575px;
line-height: 1.5em;
line-height: 0;
position: relative;
@@ -290,12 +242,12 @@ textarea:invalid {
background-color: #f0dddd;
}
::-moz-selection {
- background: #ff5e99;
+ background: #ff9f8f;
color: #fff;
text-shadow: none;
}
::selection {
- background: #ff5e99;
+ background: #ff9f8f;
color: #fff;
text-shadow: none;
}
@@ -309,28 +261,6 @@ button {
.ie7 img {
-ms-interpolation-mode: bicubic;
}
-body,
-select,
-input,
-textarea {
- color: #444;
-}
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
- font-weight: bold;
-}
-a,
-a:active,
-a:visited {
- color: #607890;
-}
-a:hover {
- color: #036;
-}
.ir {
display: block;
text-indent: -999em;
@@ -378,6 +308,65 @@ a:hover {
.clearfix {
zoom: 1;
}
+body,
+select,
+input,
+textarea {
+ color: $c-font-color;
+}
+h1,
+h2,
+h3 {
+ font-weight: normal;
+ text-shadow: 0 1px 1px rgba(0,0,0,0.3);
+}
+h1 {
+ font-family: "Helvetica", sans-serif;
+ font-size: 50.4px;
+ line-height: 1.5em;
+}
+p,
+ol,
+ul,
+table {
+ margin-bottom: 31.5px;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ margin-bottom: 15.75px;
+}
+h1 {
+ border-left: 7.875px dotted #8d9e71;
+ padding-left: 15.75px;
+}
+a {
+ color: #8d9e71;
+ border-bottom: 1px dotted #8d9e71;
+ text-decoration: none;
+}
+a:active {
+ color: #8d9e71;
+}
+a:visited {
+ color: #8d9e71;
+}
+a:hover {
+ color: #ff9f8f;
+ border-color: #ff9f8f;
+}
+body {
+ font-size: 21px;
+ line-height: 1.5em;
+ font-family: "Georgia", serif;
+ background: #f9f0e0;
+ padding: 94.5px;
+ border-top: 31.5px solid #332822;
+ border-bottom: 15.75px solid #7f7e60;
+}
@media all and (orientation:portrait) {
}
@media all and (orientation:landscape) {
View
29 src/lib/module.coffee
@@ -1 +1,28 @@
-# Example module file
+# ## Private Function
+# You can define as many private functions as you wish, as long as it is not exported using
+# module.exports, the function will not be exposed to other modules.
+privateFn = (fnType) ->
+ switch fnType
+ when 'async' then return 'Asynchronous Function'
+ when 'sync' then return 'Synchronous Function'
+
+# ## Synchronous Function
+# A synchronous function can return a value directly. This is probably the most direct form of
+# functions that we are used to, right?
+syncFn = ->
+ return privateFn('sync')
+
+# ## Asynchronous function
+# In Node, asynchronous functions are pretty much the norm and the bread and butter of every
+# app. As long as the function requires any operation that is asynchronous, a `callback(err, result)`
+# should be used to return the final result back to the caller function. See `routes.coffee`
+# for example on how to call asynchronous functions.
+
+asyncFn = (callback) ->
+ setTimeout((->callback(null, privateFn('async'))), 300)
+ return
+
+# ## Export module
+module.exports =
+ syncFn: syncFn
+ asyncFn: asyncFn
View
34 src/lib/routes.coffee
@@ -1,6 +1,36 @@
-# Get app as dependency
+# Get app to set routes to app
app = require '../app'
+# Get functions for function type tests
+{syncFn, asyncFn} = require './module'
+
app.get "/", (req, res) ->
res.render "index"
- title: 'Express'
+
+
+app.get "/fn-test/:type?", (req, res) ->
+ locals = {}
+
+ try
+ if req.params.type?
+ if req.params.type is 'async'
+ asyncFn (err, result) ->
+ if err? then throw err
+ else locals.fnType = result
+ res.render 'functionTest', locals
+
+ else if req.params.type is 'sync'
+ locals.fnType = syncFn()
+ res.render 'functionTest', locals
+
+ else
+ locals.error = "There is no function called #{req.params.type}."
+ res.render 'error', locals
+
+ else
+ locals.chooseTest = true
+ res.render 'functionTest', locals
+
+ catch e
+ locals.error = e
+ res.render 'error', locals
View
24 src/public/css/conf/base.styl
@@ -2,7 +2,7 @@
$images = '/images'
/* Global variables vertical rhythm variables */
-$base-font-size = 14px
+$base-font-size = 21px
$base-line-height = 1.5
$base-gap = $base-font-size * $base-line-height
@@ -12,23 +12,5 @@ $inner-wrapper-min-width = 960px
$gutter-width = gap(1)
/* Font-families */
-$base-font-family = 'Lora', serif
-$display-font-family = 'Shanti', sans-serif
-
-// Color-scheme, adapted from http://kuler.adobe.com/#themeID/1431231
-$c-background = #fffff8
-
-$c-light = #F2D8A7
-$c-mid-cool = #00717D
-$c-dark-cool = #003647
-$c-mid-warm = #A4A66A
-$c-dark-warm = #515932
-
-
-// URL colors
-$link-color = $c-mid-cool
-$link-hover-color = $c-mid-warm
-$link-visited-color = $c-mid-cool
-$link-active-color = $c-mid-cool
-$base-link-style()
- border none
+$base-font-family = 'Georgia', serif
+$display-font-family = 'Helvetica', sans-serif
View
19 src/public/css/conf/colors.styl
@@ -0,0 +1,19 @@
+// Color-scheme Coffee-Break, by kristi
+// From http://kuler.adobe.com/#themeID/90894
+
+$c-light = #F2DFBC
+$c-mid-cool = #8D9E71
+$c-dark-cool = #7F7E60
+$c-mid-warm = #FF9F8F
+$c-dark-warm = #332822
+
+
+$c-background = lighten($c-light, 10%)
+$c-font = $c-dark-warm
+$c-highlight = $c-mid-warm
+
+
+$c-link = $c-mid-cool
+$c-link-hover = $c-mid-warm
+$c-link-visited = $c-mid-cool
+$c-link-active = $c-mid-cool
View
21 src/public/css/elems/reset.styl
@@ -3,8 +3,7 @@ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pr
margin: 0
padding: 0
border: 0
- font-size: 100%
- font: inherit
+ font inherit
vertical-align: baseline
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
@@ -137,12 +136,12 @@ input:invalid, textarea:invalid
background-color: #f0dddd
::-moz-selection
- background: #FF5E99
+ background: $c-highlight
color: #fff
text-shadow: none
::selection
- background: #FF5E99
+ background: $c-highlight
color: #fff
text-shadow: none
@@ -154,16 +153,4 @@ button
overflow: visible
.ie7 img
- -ms-interpolation-mode: bicubic
-
-body, select, input, textarea
- color: #444
-
-h1, h2, h3, h4, h5, h6
- font-weight: bold
-
-a, a:active, a:visited
- color: #607890
-
-a:hover
- color: #036
+ -ms-interpolation-mode: bicubic
View
37 src/public/css/elems/typography.styl
@@ -0,0 +1,37 @@
+// Basic typographic rules and colors
+
+body, select, input, textarea
+ color $c-font-color
+
+h1, h2, h3
+ font-weight normal
+ text-shadow 0 1px 1px rgba(0,0,0,0.3)
+
+h1
+ font-family $display-font-family
+ font-size(2.4)
+
+p, ol, ul, table
+ margin-bottom gap(1)
+
+h1, h2, h3, h4, h5, h6
+ margin-bottom gap(0.5)
+
+h1
+ border-left gap(0.25) dotted $c-mid-cool
+ padding-left gap(0.5)
+
+a
+ color $c-link
+ border-bottom 1px dotted $c-link
+ text-decoration none
+
+a:active
+ color $c-link-active
+
+a:visited
+ color $c-link-visited
+
+a:hover
+ color $c-link-hover
+ border-color $c-link-hover
View
8 src/public/css/pages/layout.styl
@@ -0,0 +1,8 @@
+// Page layout
+body
+ font-size(1)
+ font-family $base-font-family
+ background $c-background
+ padding gap(3)
+ border-top gap(1) solid $c-dark-warm
+ border-bottom gap(0.5) solid $c-dark-cool
View
11 src/public/css/style.styl
@@ -1,20 +1,23 @@
// Base configurations and helper functions
@import "conf/base"
@import "conf/helpers"
-
-// Base typographic styles
-@import "conf/typography"
+@import "conf/colors"
// Reset stylesheet
@import "elems/reset"
// HTML5 helper classes, remove this if you don't use them
@import "elems/helpers"
+// Base typographic styles
+@import "elems/typography"
+
+
// Styles for common elements
@import "elems/common"
-// Individual pages
+// Page level elements
+@import "pages/layout"
@import "pages/index"
// Media queries
View
4 views/error.jade
@@ -0,0 +1,4 @@
+h1 Houston, we have a problem.
+p= error
+p
+ a(href="/fn-test") &laquo; Go Back
View
19 views/functionTest.jade
@@ -0,0 +1,19 @@
+h1 Function test
+- if (typeof(chooseTest) != 'undefined')
+ p Choose test:
+ ul
+ li
+ a(href="/fn-test/sync") Synchronous Function Test
+ li
+ a(href="/fn-test/async") Asynchronous Function Test
+
+
+
+- else
+ p We have just ran a #{fnType}. Isn't that awesome?
+
+ ul
+ li
+ a(href="/fn-test") Back to tests
+ li
+ a(href="/") Back to homepage
View
8 views/index.jade
@@ -1,2 +1,6 @@
-h1= title
-p Welcome to #{title}
+h1 Cham
+p Welcome to Cham's test page. I hope you enjoy your drink!
+
+p
+ | Try out the
+ a(href="/fn-test") sync/async function test!
View
6 views/layout.jade
@@ -11,7 +11,7 @@ head
meta(name='viewport', content='width=device-width, initial-scale=1.0')
link(rel='shortcut icon', href='/favicon.ico')
link(rel='apple-touch-icon', href='/apple-touch-icon.png')
- link(rel='stylesheet', href='css/style.css?v=2')
+ link(rel='stylesheet', href='/css/style.css?v=2')
//if lt IE 9
script(src='http://html5shiv.googlecode.com/svn/trunk/html5.js')
@@ -24,7 +24,7 @@ body
script(src='//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js')
script
!window.jQuery && document.write(unescape('%3Cscript src="/js/libs/jquery-1.6.2.min.js"%3E%3C/script%3E'))
- script(src='js/plugins.js')
- script(src='js/script.js')
+ script(src='/js/plugins.js')
+ script(src='/js/script.js')
| </html>

0 comments on commit ece661c

Please sign in to comment.