├── src
    ├── partials
    │   └── _test.hbs
    ├── scss
    │   ├── _colors.scss
    │   ├── _general-variables.scss
    │   ├── no-mq-base.scss
    │   ├── _normalize.scss
    │   ├── _layout.scss
    │   ├── mq-base.scss
    │   ├── _z-index-scale.scss
    │   ├── _side-by-side.scss
    │   ├── _utilities.scss
    │   ├── _text.scss
    │   ├── _grunticons.scss
    │   ├── _mixins.scss
    │   ├── README.md
    │   └── _spacing.scss
    ├── patterns
    │   ├── pages
    │   │   ├── test.hbs
    │   │   └── _pattern-listing.hbs
    │   ├── molecules
    │   │   └── test.hbs
    │   ├── atoms
    │   │   ├── headings.hbs
    │   │   ├── link.hbs
    │   │   └── button.hbs
    │   └── organisms
    │   │   └── test.hbs
    ├── js
    │   └── app.js
    ├── data
    │   └── test.yml
    ├── templates
    │   ├── layouts
    │   │   ├── _meta.hbs
    │   │   ├── page.hbs
    │   │   └── pattern.hbs
    │   └── styleguide_page.hbs
    ├── vendor
    │   ├── README.md
    │   └── pattern-list.js
    ├── assets
    │   └── index.html
    └── grunticon
    │   └── source
    │       └── email.svg
├── .gitignore
├── divshot.json
├── specs
    ├── unit
    │   └── test-spec.js
    ├── README.md
    └── integration
    │   └── lib
    │       └── jasmine-fixture.js
├── tasks
    ├── clean.coffee
    ├── grunticon.coffee
    ├── assets.coffee
    ├── server.coffee
    ├── watch.coffee
    ├── styles.coffee
    ├── scripts.coffee
    ├── templates.coffee
    └── test.coffee
├── Gruntfile.coffee
├── circle.yml
├── lib
    ├── helpers
    │   ├── helper-add-context.js
    │   ├── helper-dump-json.js
    │   ├── helper-print-data-json.js
    │   ├── helper-get-first-photo.js
    │   ├── helper-class.js
    │   └── helper-atomic.js
    ├── specs
    │   └── unit
    │   │   └── dump-json.spec.js
    └── error-handler.coffee
├── bower.json
├── gulpfile.coffee
├── package.json
├── README.md
├── .jscsrc
└── .jshintrc


/src/partials/_test.hbs:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/scss/_colors.scss:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/patterns/pages/test.hbs:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/patterns/molecules/test.hbs:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/scss/_general-variables.scss:
--------------------------------------------------------------------------------
1 | $max-width: 70em;
2 | 


--------------------------------------------------------------------------------
/src/js/app.js:
--------------------------------------------------------------------------------
1 | /**
2 |  * Include application JS here.
3 |  */
4 | 


--------------------------------------------------------------------------------
/src/data/test.yml:
--------------------------------------------------------------------------------
1 | things:
2 |   - item: 'foo'
3 |   - item: 'bar'
4 | 


--------------------------------------------------------------------------------
/src/scss/no-mq-base.scss:
--------------------------------------------------------------------------------
1 | $no-mq-support: true;
2 | 
3 | @import "mq-base";
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | bower_components/*
2 | build/*
3 | .divshot-cache
4 | node_modules/
5 | .DS_Store
6 | 


--------------------------------------------------------------------------------
/src/templates/layouts/_meta.hbs:
--------------------------------------------------------------------------------
1 | <div class="pl-max-width meta-layout">
2 |   {% body %}
3 | </div>
4 | 


--------------------------------------------------------------------------------
/src/vendor/README.md:
--------------------------------------------------------------------------------
1 | # `src/vendor`
2 | 
3 | Need to include external libraries? Drop those JS files in here.
4 | 


--------------------------------------------------------------------------------
/src/scss/_normalize.scss:
--------------------------------------------------------------------------------
1 | body {
2 |   margin: 0;
3 |   padding: 0;
4 | }
5 | 
6 | img {
7 |   max-width: 100%;
8 | }
9 | 


--------------------------------------------------------------------------------
/divshot.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "templates",
3 |   "root": "build",
4 |   "clean_urls": true,
5 |   "error_page": "error.html"
6 | }
7 | 


--------------------------------------------------------------------------------
/specs/unit/test-spec.js:
--------------------------------------------------------------------------------
1 | describe('test', function() {
2 |   it("should test things", function() {
3 |     expect(true).toBe(true);
4 |   });
5 | });
6 | 


--------------------------------------------------------------------------------
/tasks/clean.coffee:
--------------------------------------------------------------------------------
1 | module.exports = (gulp, cfg, env) ->
2 |   del = require 'del'
3 | 
4 |   gulp.task 'clean', (cb) ->
5 |     del cfg.paths.dest, cb
6 | 


--------------------------------------------------------------------------------
/src/patterns/atoms/headings.hbs:
--------------------------------------------------------------------------------
1 | ---
2 | level: 1
3 | header_text: This is cool
4 | ---
5 | <h{{level}}{{#if header_class}} class="{{header_class}}"{{/if}}>{{{header_text}}}</h{{level}}>
6 | 


--------------------------------------------------------------------------------
/src/patterns/atoms/link.hbs:
--------------------------------------------------------------------------------
1 | ---
2 | link_class: ''
3 | link_href: '#'
4 | link_text: 'link'
5 | ---
6 | <a href="{{link_href}}" {{#if link_class}}{{link_class}}{{/if}}>{{link_text}}</a>
7 | 


--------------------------------------------------------------------------------
/src/patterns/atoms/button.hbs:
--------------------------------------------------------------------------------
1 | ---
2 | button_text: 'An atom button'
3 | button_class: ''
4 | button_link: '#'
5 | ---
6 | <a href="{{button_link}}" class="{{button_class}}">
7 |   {{button_text}}
8 | </a>
9 | 


--------------------------------------------------------------------------------
/tasks/grunticon.coffee:
--------------------------------------------------------------------------------
1 | shell = require("gulp-shell")
2 | 
3 | module.exports = (gulp, cfg, env) ->
4 | 
5 |   gulp.task('grunticon', shell.task([
6 |     'node_modules/.bin/grunt grunticon'
7 |   ]))
8 | 
9 | 


--------------------------------------------------------------------------------
/tasks/assets.coffee:
--------------------------------------------------------------------------------
1 | module.exports = (gulp, cfg, env) ->
2 | 
3 |   gulp.task 'moveAssets', ->
4 |     gulp.src(cfg.paths.assets + "**/*")
5 |     .pipe(gulp.dest(cfg.paths.dest))
6 | 
7 |   gulp.task 'assets', ['moveAssets']
8 | 


--------------------------------------------------------------------------------
/tasks/server.coffee:
--------------------------------------------------------------------------------
1 | module.exports = (gulp, cfg, env) ->
2 |   webserver = require 'gulp-webserver'
3 | 
4 |   gulp.task 'server', ->
5 |     gulp.src('build/')
6 |       .pipe webserver
7 |         livereload: true
8 |         host: '0.0.0.0'
9 | 


--------------------------------------------------------------------------------
/src/scss/_layout.scss:
--------------------------------------------------------------------------------
 1 | .pl-max-width {
 2 |   width: 95%;
 3 |   max-width: $max-width;
 4 |   margin-left: auto;
 5 |   margin-right: auto;
 6 | }
 7 | 
 8 | .pl-max-width_relative {
 9 |   @extend .pl-max-width;
10 |   position: relative;
11 | }
12 | 


--------------------------------------------------------------------------------
/src/assets/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title></title>
 6 | </head>
 7 | <body>
 8 |   <script>
 9 |     window.location = 'patterns/pages/_pattern-listing.html';
10 |   </script>
11 | </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/src/scss/mq-base.scss:
--------------------------------------------------------------------------------
 1 | @import "general-variables";
 2 | @import "mixins";
 3 | @import "colors";
 4 | @import "normalize";
 5 | @import "utilities";
 6 | @import "layout";
 7 | @import "z-index-scale";
 8 | @import "text";
 9 | @import "spacing";
10 | @import "side-by-side";
11 | @import "grunticons";
12 | 


--------------------------------------------------------------------------------
/Gruntfile.coffee:
--------------------------------------------------------------------------------
 1 | module.exports = (grunt) ->
 2 | 
 3 |   grunt.config "grunticon",
 4 |     icons:
 5 |       files: [
 6 |         expand: true,
 7 |         cwd: 'src/grunticon/source',
 8 |         src: ["*.svg", ".png"],
 9 |         dest: 'build/grunticon'
10 |       ]
11 | 
12 |   grunt.loadNpmTasks 'grunt-grunticon'
13 | 


--------------------------------------------------------------------------------
/circle.yml:
--------------------------------------------------------------------------------
 1 | dependencies:
 2 |   post:
 3 |     - node_modules/.bin/bower install
 4 | 
 5 | test:
 6 |   override:
 7 |     - ./node_modules/.bin/gulp ci
 8 | 
 9 | deployment:
10 |   staging:
11 |     branch: master
12 |     commands:
13 |       - ./node_modules/.bin/divshot deploy staging --token $DivshotToken
14 |       - ./node_modules/.bin/gulp test-perf
15 | 


--------------------------------------------------------------------------------
/lib/helpers/helper-add-context.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | var _ = require('lodash');
 4 | 
 5 | module.exports.register = function (Handlebars){
 6 |   Handlebars.registerHelper('addContext', function(givenContext, context){
 7 |     var newContext = _.extend({}, context.data.root, givenContext);
 8 | 
 9 |     return context.fn(newContext);
10 |   });
11 | };
12 | 


--------------------------------------------------------------------------------
/src/scss/_z-index-scale.scss:
--------------------------------------------------------------------------------
 1 | // Idea from Medium
 2 | // https://gist.github.com/fat/1f6da6b3bd0311a1f8a0
 3 | //
 4 | // Z-Index Scale 
 5 | // (Don't edit this part)
 6 | $z-index-1: 100;
 7 | $z-index-2: 200;
 8 | $z-index-3: 300;
 9 | $z-index-4: 400;
10 | $z-index-5: 500;
11 | $z-index-6: 600;
12 | $z-index-7: 700;
13 | $z-index-8: 800;
14 | $z-index-9: 900;
15 | $z-index-10: 1000;
16 | 
17 | // Z-Index Applications
18 | // All z-indices should be set here
19 | 


--------------------------------------------------------------------------------
/lib/helpers/helper-dump-json.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Handlebars Helpers for Pattern Lab
 3 |  * Copyright (c) 2014 Jon Schlinkert
 4 |  * Licensed under the MIT License (MIT).
 5 |  */
 6 | 'use strict';
 7 | 
 8 | var path = require('path');
 9 | 
10 | module.exports.register = function (Handlebars, options, params) {
11 | 
12 |   Handlebars.registerHelper('dumpJSON', function(context) {
13 |     var dumpage = arguments.length > 1 ? context : this;
14 | 
15 |     return JSON.stringify(dumpage);
16 |   });
17 | };
18 | 


--------------------------------------------------------------------------------
/src/patterns/pages/_pattern-listing.hbs:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: _meta
 3 | ---
 4 | 
 5 | <div class="sp_xl pl-max-width">
 6 |   <div class="g-inner">
 7 |     <h1 class="tx_xl tx_light">Pattern List</h1>
 8 |   </div>
 9 |   <a class="grunticon" href="/grunticon/preview.html">Grunticon Preview of All Icons</a>
10 | </div>
11 | 
12 | <script>
13 |   window.patternList = {{{ patternJSON }}};
14 | </script>
15 | 
16 | <div class="js-pattern-list pattern-list grid-root"><!-- this becomes populated with patterns --></div>
17 | 
18 | 


--------------------------------------------------------------------------------
/src/scss/_side-by-side.scss:
--------------------------------------------------------------------------------
 1 | // These side-by-side classes are adopted 
 2 | // from Bootstrap's Input Groups - http://getbootstrap.com/components/#input-groups
 3 | 
 4 | .side-by-side--wrapper {
 5 |   display: table;
 6 |   border-collapse: separate;
 7 |   width: 100%;
 8 | }
 9 | 
10 | .side-by-side {
11 |   vertical-align: middle;
12 |   display: table-cell;
13 | }
14 | 
15 | .side-by-side--major {
16 |   float: left;
17 |   width: 100%;
18 | }
19 | 
20 | .side-by-side--minor {
21 |   white-space: nowrap;
22 |   width: 1%;
23 | }
24 | 


--------------------------------------------------------------------------------
/tasks/watch.coffee:
--------------------------------------------------------------------------------
 1 | module.exports = (gulp, cfg, env) ->
 2 | 
 3 |   gulp.task 'watch', ->
 4 |     gulp.watch(cfg.paths.assets + '**/*', ['build'])
 5 |     gulp.watch(cfg.paths.scriptsIn + '**/*.js', ['scripts'])
 6 |     gulp.watch(cfg.paths.stylesIn + '**/*.scss', ['styles'])
 7 |     gulp.watch(['src/partials/**/*.hbs', 'src/templates/**/*.hbs', 'src/patterns/**/*.hbs', 'lib/helpers/**/*', 'src/data/**/*.json', 'src/data/**/*.yml'], ['templates'])
 8 | 
 9 | 
10 |     # This doesn't seem to be picking up on bower installs.
11 |     gulp.watch(cfg.paths.vendorIn + '**/*.js', ['vendor'])
12 | 


--------------------------------------------------------------------------------
/lib/helpers/helper-print-data-json.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * This helper returns a JSON string based on a string representation of
 3 |  * a data file. So, if you have a data file called 'myData' it is stored in the
 4 |  * top context as an object key. This helper returns the JSON string version of 
 5 |  * that file.
 6 |  *
 7 |  * Specific use case where the data file needs to be printed for debugging or
 8 |  * to be stored in a variable in JS or other access.
 9 |  *
10 | */
11 | 'use strict';
12 | 
13 | module.exports.register = function(Handlebars) {
14 |   Handlebars.registerHelper('printDataJSON', function(data) {
15 |     return JSON.stringify(this[data]);
16 |   });
17 | };
18 | 


--------------------------------------------------------------------------------
/src/scss/_utilities.scss:
--------------------------------------------------------------------------------
 1 | .visuallyhidden {
 2 |   position: absolute; 
 3 |   overflow: hidden; 
 4 |   clip: rect(0 0 0 0); 
 5 |   height: 1px; width: 1px; 
 6 |   margin: -1px; padding: 0; border: 0; 
 7 | }
 8 | 
 9 | .inline-block {
10 |   display: inline-block;
11 |   margin-right: -5px;
12 | 
13 |   .lt-ie8 & {
14 |     zoom: 1;
15 |     display: inline;
16 |   }
17 | }
18 | 
19 | .block {
20 |   display: block;
21 | }
22 | 
23 | .no-list-style {
24 |   list-style: none;
25 | }
26 | 
27 | .no-list-space {
28 |   margin: 0;
29 |   padding-left: 0;
30 | }
31 | 
32 | .shadow-outline {
33 |   box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.1), -1px -1px 5px 1px rgba(0,0,0,0.1)
34 | }
35 | 
36 | 


--------------------------------------------------------------------------------
/lib/specs/unit/dump-json.spec.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | var dump = require('../../helpers/helper-dump-json'),
 4 |     Handlebars = require('assemble/node_modules/handlebars');
 5 | 
 6 | dump.register(Handlebars, {});
 7 | 
 8 | describe('JSON dump handlebars test', function() {
 9 |   var html, data;
10 | 
11 |   beforeEach(function() {
12 |     data = {product: "test information"};
13 |     html = "{{#dumpJSON product}}{{/dumpJSON}}";
14 |   });
15 | 
16 |   it('will return valid JSON when given valid JSON', function() {
17 |     var template = Handlebars.compile(html);
18 |     var result = template(data);
19 |     expect(result).toEqual(JSON.stringify(data.product));
20 |   });
21 | });
22 | 


--------------------------------------------------------------------------------
/lib/helpers/helper-get-first-photo.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | var _ = require('lodash');
 4 | 
 5 | module.exports.register = function (Handlebars){
 6 |   Handlebars.registerHelper('getFirstPhoto', function(size, context){
 7 |     var root = context.data.root,
 8 |         location,
 9 |         splitKeys,
10 |         url;
11 | 
12 |     if(Array.isArray(root.productStyleColors[0])) {
13 |       location = root.productStyleColors[0][0].productStyleColorImages[0];
14 |     } else {
15 |       location = root.productStyleColors[0].productStyleColorImages[0];
16 |     }
17 | 
18 |     splitKeys = location.split('.')
19 | 
20 |     url = root.productImages[splitKeys[0]][splitKeys[1]][size];
21 | 
22 |     return url;
23 |   });
24 | };
25 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "templates",
 3 |   "version": "0.1.0",
 4 |   "authors": [
 5 |     "Adam Simpson <adam@heysparkbox.com>"
 6 |   ],
 7 |   "license": "MIT",
 8 |   "ignore": [
 9 |     "**/.*",
10 |     "node_modules",
11 |     "bower_components",
12 |     "test",
13 |     "tests"
14 |   ],
15 |   "dependencies": {
16 |     "jquery": "~2.x",
17 |     "modernizr": "~2.8.3",
18 |     "jasmine-jquery": "~2.0.5"
19 |   },
20 |   "overrides": {
21 |     "jasmine-jquery": {
22 |       "ignore": true
23 |     },
24 |     "modernizr": {
25 |       "ignore": true
26 |     },
27 |     "jquery": {
28 |       "main": {
29 |         "development": "dist/jquery.js",
30 |         "production": "dist/jquery.min.js"
31 |       }
32 |     }
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/src/grunticon/source/email.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="utf-8"?>
2 | <!-- Generated by IcoMoon.io -->
3 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
4 | <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50" height="38" viewBox="0 0 50 38">
5 | <path d="M50.408 38h-50.408v-38h50.408v38zM5.971 34.471h38.465l-12.68-12.951-2.404 2.404c-1.047 1.047-2.52 1.629-4.071 1.629 0 0 0 0-0.039 0-1.551 0-3.063-0.62-4.071-1.667l-2.443-2.482-12.757 13.067zM3.529 6.049v25.941l12.757-13.029-12.757-12.912zM34.278 19.039l12.641 12.912v-25.631l-12.641 12.718zM5.971 3.529l17.72 17.914c0.388 0.388 0.969 0.62 1.59 0.62 0 0 0 0 0 0 0.62 0 1.202-0.233 1.59-0.582l17.837-17.953h-38.737z" fill="#b2b2b2"></path>
6 | </svg>
7 | 


--------------------------------------------------------------------------------
/tasks/styles.coffee:
--------------------------------------------------------------------------------
 1 | module.exports = (gulp, cfg, env) ->
 2 |   plumber = require 'gulp-plumber'
 3 |   errorHandler = require '../lib/error-handler'
 4 |   sass = require 'gulp-sass'
 5 |   minifyCSS = require 'gulp-minify-css'
 6 |   gulpif = require 'gulp-if'
 7 |   postcss = require 'gulp-postcss'
 8 |   sourcemaps = require "gulp-sourcemaps"
 9 | 
10 |   gulp.task "styles", ->
11 |     processors = [
12 |       require("autoprefixer-core")
13 |     ]
14 |     stream = gulp.src(cfg.paths.stylesIn + '**/*.scss')
15 |       .pipe plumber errorHandler: errorHandler.error
16 |       .pipe gulpif((env is 'development'), sourcemaps.init())
17 |       .pipe sass()
18 |       .pipe postcss(processors)
19 |       .pipe gulpif((env is 'development'), sourcemaps.write cfg.paths.stylesOut)
20 |       .pipe gulp.dest cfg.paths.stylesOut
21 | 


--------------------------------------------------------------------------------
/src/scss/_text.scss:
--------------------------------------------------------------------------------
 1 | .tx-uppercase {
 2 |   text-transform: uppercase;
 3 | }
 4 | 
 5 | .tx-no-underline {
 6 |   text-decoration: none;
 7 | }
 8 | 
 9 | .tx-underline {
10 |   text-decoration: underline;
11 | }
12 | 
13 | h1, h2, h3, h4, h5, h6 {
14 |   letter-spacing: .03em;
15 |   font-weight: normal;
16 | }
17 | 
18 | .tx-lg {
19 |   font-size: 1.8em;
20 | }
21 | 
22 | .tx-md {
23 |   font-size: 1.1em;
24 | }
25 | 
26 | 
27 | .tx-center {
28 |   text-align: center;
29 | }
30 | 
31 | label {
32 |   .faux-header {
33 |     @include rem(font-size, 1.3);
34 |   }
35 | }
36 | 
37 | .tx-body_md {
38 |   font-size: 1.2em;
39 | }
40 | 
41 | .tx-body_lg {
42 |   font-size: 1.3em;
43 | }
44 | 
45 | .tx-small {
46 |   font-size: .8em;
47 | }
48 | 
49 | .tx-big {
50 |   font-size: 1.3em;
51 | }
52 | 
53 | .tx-lg {
54 |   font-size: 2em;
55 | }
56 | 
57 | .tx-xl {
58 |   font-size: 2.5em;
59 | }
60 | 
61 | .tx-xxl {
62 |   font-size: 3.5em;
63 | }
64 | 


--------------------------------------------------------------------------------
/src/scss/_grunticons.scss:
--------------------------------------------------------------------------------
 1 | // There are two or three pieces to each grunticon icon
 2 | 
 3 | //  <span class="icon-thing-outer">                <!-- 1 -->
 4 | //    <span class="icon-thing">                    <!-- 2 -->
 5 | //      <span class="visuallyhidden">Thing</span> <!-- 3 -->
 6 | //    </span>
 7 | //  </span>
 8 | 
 9 | // 1. icon-thing-outer
10 | // This sets a width and gives spacing to the icon itself.
11 | 
12 | // 2. icon-thing
13 | // This is the icon itself. This gets a background image generated by
14 | // grunticon. Also, in this file, it is given an intrinsic ratio to correspond
15 | // with its icon, so that it can fluidly stretch like an image.
16 | 
17 | // 3. visuallyhidden
18 | // (optional) This is text describing the icon for users who can't see them.
19 | 
20 | %icon-outer-base {
21 |   vertical-align: top;
22 |   display: inline-block;
23 |   line-height: 0;
24 | }
25 | 
26 | %icon-base {
27 |   vertical-align: top;
28 |   display: inline-block;
29 | }
30 | 


--------------------------------------------------------------------------------
/lib/error-handler.coffee:
--------------------------------------------------------------------------------
 1 | gutil = require 'gulp-util'
 2 | 
 3 | fatalLevel = require('yargs').argv.fatal
 4 | 
 5 | ERROR_LEVELS = ['error', 'warning']
 6 | 
 7 | ERROR_COLORS =
 8 |   warning: gutil.colors.yellow
 9 |   error: gutil.colors.red
10 | 
11 | ERROR_EMOTES =
12 |   warning: [
13 |     '¯\\_(ツ)_/¯'
14 |     '(╯︵╰,)'
15 |     '(ಠ_ಠ)'
16 |   ]
17 |   error: [
18 |     '(╯°□°）╯︵ ┻━┻'
19 |     '┻━┻  ︵ \\(°□°)/ ︵ ┻━┻'
20 |     'ლ (ಠ益ಠ)ლ'
21 |   ]
22 | 
23 | isFatal = (level) ->
24 |   ERROR_LEVELS.indexOf(level) <= ERROR_LEVELS.indexOf(fatalLevel || 'error')
25 | 
26 | handleError = (level, error) ->
27 | 
28 |   emotes = ERROR_EMOTES[level]
29 |   color = ERROR_COLORS[level]
30 | 
31 |   msg = color(level.toUpperCase()) + ' triggered by ' + gutil.colors.magenta(error.plugin)
32 | 
33 |   randomEmote = emotes[Math.floor(Math.random()*emotes.length)]
34 | 
35 |   gutil.beep()
36 |   gutil.log(msg)
37 |   gutil.log(color(randomEmote))
38 |   gutil.log(color(error.message))
39 |   process.exit(1) if isFatal(level)
40 | 
41 | module.exports =
42 |   error: (error) ->
43 |     handleError.call(this, 'error', error)
44 |     this.emit 'end'
45 | 
46 |   warning: (error) ->
47 |     handleError.call(this, 'warning', error)
48 |     this.emit 'end'
49 | 


--------------------------------------------------------------------------------
/lib/helpers/helper-class.js:
--------------------------------------------------------------------------------
 1 | (function() {
 2 |   module.exports.register = function(Handlebars, options, params) {
 3 | 
 4 |     /**
 5 |      * Helper name
 6 |      * @param  {[type]} str [description]
 7 |      * @return {[type]}     [description]
 8 |      */
 9 |     Handlebars.registerHelper('class', function(str) {
10 |       var count = 0;
11 |       var out = 'class="';
12 |       var classSplit, prop, className;
13 |       var classes = str.split(' ');
14 |       var mustacheRegex = /{{([^}]+)}}/;
15 | 
16 |       classes.forEach(function(){
17 |         classSplit = classes[count].split(':');
18 |         prop = classSplit[0];
19 |         className = classSplit[1];
20 | 
21 |         // check if classname has mustache tag in it
22 |         if (typeof className !== 'undefined' && className.match(mustacheRegex)) {
23 |           var dynamicProp = className.match(mustacheRegex)[1];
24 |           className = className.replace(mustacheRegex, this[dynamicProp]);
25 |         }
26 | 
27 |         if (prop === '' || !!this[prop]) {
28 |           if (count > 0) {
29 |             // add preceding space
30 |             out = out + ' ';
31 |           }
32 |           out = out + (className || prop);
33 |         }
34 |         count++
35 |       }, this);
36 | 
37 |       out = out + '"';
38 | 
39 |       return new Handlebars.SafeString(out);
40 |     });
41 | 
42 |   };
43 | }).call(this);
44 | 


--------------------------------------------------------------------------------
/gulpfile.coffee:
--------------------------------------------------------------------------------
 1 | gulp = require "gulp"
 2 | _ = require "lodash"
 3 | runSequence = require "run-sequence"
 4 | requireDir = require "require-dir"
 5 | 
 6 | config =
 7 |   paths:
 8 |     dest: 'build/'
 9 | 
10 |     assets: 'src/assets/'
11 |     scriptsIn: 'src/js/'
12 |     stylesIn: 'src/scss/'
13 |     testsIn: 'specs/'
14 |     vendorIn: 'src/vendor/'
15 | 
16 |     scriptsOut: 'build/js/'
17 |     stylesOut: 'build/css/'
18 | 
19 | # Load all tasks
20 | tasks = requireDir "tasks/"
21 | 
22 | # Get environment, for environment-specific activities
23 | env = process.env.BUILD_ENV or "development"
24 | 
25 | # Loop through all tasks and create them
26 | _.each tasks, (task) ->
27 |   task(gulp, config, env)
28 | 
29 | # The "default" and "build" tasks will be your most commonly-used tasks from
30 | # the CLI.  The more granular tasks are in "tasks/"
31 | 
32 | gulp.task "build", (callback) ->
33 |   # runSequence is a gulp plugin that is a little bit of a hack.  It lets us
34 |   # define synchronous tasks without requiring that task to be a dependency.
35 |   # To add more async tasks, add them to the array.
36 |   runSequence(
37 |     'clean'
38 |     'assets'
39 |     'grunticon'
40 |     [
41 |       'scripts'
42 |       'styles'
43 |       'templates'
44 |     ]
45 |     callback
46 |   )
47 | 
48 | gulp.task "default", (callback) ->
49 |   runSequence('build', 'watch', 'server', callback)
50 | 
51 | gulp.task "ci", (callback) ->
52 |   runSequence('jsstyle-tests', 'jshint', 'build', callback)
53 | 


--------------------------------------------------------------------------------
/src/templates/styleguide_page.hbs:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
 3 | <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <title>{{ title }}</title>
 7 |   <meta name="description" content="">
 8 |   <meta name="viewport" content="width=device-width,initial-scale=1.0">
 9 |   <meta name="msapplication-TileColor" content="#73c5d3"/>
10 |   <meta name="msapplication-TileImage" content="sbx_144x144.png"/>
11 |   <!--[if (lt IE 9) & (!IEMobile)]>
12 |       <link href="/static/css/ataglance/no-mq-base.css" rel="stylesheet">
13 |       <![endif]-->
14 |       <!--[if (gte IE 9) | (IEMobile)]><!-->
15 |       <link href="/static/css/ataglance/mq-base.css" rel="stylesheet">
16 |       <!--<![endif]-->
17 | 
18 |   <script src="/static/js/libs/modernizr.js"></script>
19 | </head>
20 | 
21 | <body>
22 | 
23 |   <!-- START header -->
24 |   <header role="banner">
25 |   </header>
26 |   <!-- END header -->
27 | 
28 |   <!-- START main -->
29 |   <div class="clearfix sp_xl" role="main">
30 |   {% body %}
31 |   </div>
32 |   <!-- END main -->
33 | 
34 |   <!-- START footer -->
35 |   <footer role="contentinfo">
36 |   </footer>
37 |   <!-- END footer -->
38 | 
39 |   <script src="/static/js/app.js"></script>
40 |   <script src="/static/js/styleguide.js"></script>
41 |   <script>
42 |     var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
43 |     (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
44 |     g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
45 |     s.parentNode.insertBefore(g,s)}(document,'script'));
46 |   </script>
47 | </body>
48 | </html>
49 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "templates",
 3 |   "version": "0.1.0",
 4 |   "scripts": {
 5 |     "test": ""
 6 |   },
 7 |   "repository": {
 8 |     "type": "git",
 9 |     "url": ""
10 |   },
11 |   "devDependencies": {
12 |     "assemble": "git://github.com/assemble/assemble#05dc7493a31c3e9016418186719c72c8ef5781aa",
13 |     "coffee-script": "^1.7.1",
14 |     "del": "^0.1.3",
15 |     "divshot-cli": "^1.0.8",
16 |     "front-matter": "^0.2.0",
17 |     "fs-utils": "^0.4.3",
18 |     "grunt": "^0.4.5",
19 |     "grunt-grunticon": "^1.4.0",
20 |     "gulp": "^3.8.6",
21 |     "gulp-coffee": "^2.1.1",
22 |     "gulp-concat": "^2.3.3",
23 |     "gulp-flatten": "0.0.3",
24 |     "gulp-if": "^1.2.5",
25 |     "gulp-jasmine-phantom": "^1.0.13",
26 |     "gulp-jscs": "^1.3.1",
27 |     "gulp-jshint": "^1.11.0",
28 |     "gulp-minify-css": "^0.3.6",
29 |     "gulp-order": "^1.1.1",
30 |     "gulp-plumber": "^0.6.3",
31 |     "gulp-sass": "^0.7.2",
32 |     "gulp-shell": "^0.2.11",
33 |     "gulp-sourcemaps": "^1.0.0",
34 |     "gulp-uglify": "^0.3.1",
35 |     "gulp-util": "^2.2.20",
36 |     "gulp-webserver": "^0.6.0",
37 |     "handlebars-helpers": "^0.5.8",
38 |     "js-yaml": "^3.2.2",
39 |     "jscs-jsdoc": "^1.1.0",
40 |     "jshint-stylish": "^2.0.0",
41 |     "lodash": "^2.4.1",
42 |     "main-bower-files": "^2.4.0",
43 |     "merge-stream": "^0.1.5",
44 |     "ncp": "^0.6.0",
45 |     "node-bourbon": "^1.2.3",
46 |     "require-dir": "^0.1.0",
47 |     "run-sequence": "^0.3.6",
48 |     "webpagetest": "^0.3.0",
49 |     "yargs": "^1.2.6",
50 |     "gulp-rename": "^1.2.0"
51 |   },
52 |   "dependencies": {
53 |     "autoprefixer-core": "^4.0.2",
54 |     "bower": "^1.3.12",
55 |     "divshot-cli": "^1.3.2",
56 |     "grunt-cli": "^0.1.13",
57 |     "gulp-postcss": "^3.0.0"
58 |   }
59 | }
60 | 


--------------------------------------------------------------------------------
/tasks/scripts.coffee:
--------------------------------------------------------------------------------
 1 | module.exports = (gulp, cfg, env) ->
 2 |   jshint = require 'gulp-jshint'
 3 |   jscs = require 'gulp-jscs'
 4 |   concat = require "gulp-concat"
 5 |   uglify = require "gulp-uglify"
 6 |   order = require "gulp-order"
 7 |   sourcemaps = require "gulp-sourcemaps"
 8 |   coffee = require "gulp-coffee"
 9 |   mainBowerFiles = require "main-bower-files"
10 |   merge = require 'merge-stream'
11 |   gulpif = require "gulp-if"
12 |   errorHandler = require '../lib/error-handler'
13 |   plumber = require 'gulp-plumber'
14 | 
15 |   gulp.task 'moveModernizr', ->
16 |     return gulp.src("bower_components/modernizr/modernizr.js")
17 |     .pipe gulp.dest(cfg.paths.scriptsOut + 'libs/')
18 | 
19 |   gulp.task 'jsstyle', ->
20 |     gulp.src("src/js/**/*.js")
21 |       .pipe(jscs())
22 | 
23 |   gulp.task 'jshint', ->
24 |     gulp.src('src/js/**/*.js')
25 |       .pipe jshint()
26 |       .pipe jshint.reporter('jshint-stylish')
27 |       .pipe jshint.reporter('fail')
28 | 
29 |   gulp.task "concat-all-js", ['moveModernizr'], ->
30 |     bowerFiles = gulp.src(mainBowerFiles(
31 |       env: env
32 |     ), base: 'bower_components')
33 | 
34 |     otherJS = gulp.src([
35 |       cfg.paths.vendorIn + '**/*.js'
36 |     ])
37 | 
38 |     appJS = gulp.src("src/js/*.js")
39 | 
40 |     merge(bowerFiles, appJS, otherJS)
41 |       .pipe order([
42 |         "bower_components/jquery/**/*.js"
43 |         "bower_components/**/*.js"
44 |         cfg.paths.vendorIn + '**/*.js'
45 |         "src/js/*.js"
46 |       ], base: './')
47 |       .pipe gulpif((env is 'development'), sourcemaps.init())
48 |       .pipe plumber(errorHandler: errorHandler.error)
49 |       .pipe concat("app.js")
50 |       .pipe gulpif((env is 'production'), uglify())
51 |       .pipe gulpif((env is 'development'), sourcemaps.write())
52 |       .pipe gulp.dest(cfg.paths.scriptsOut)
53 | 
54 |   gulp.task 'scripts', ['concat-all-js', 'jsstyle']
55 | 


--------------------------------------------------------------------------------
/tasks/templates.coffee:
--------------------------------------------------------------------------------
 1 | module.exports = (gulp, cfg, env) ->
 2 |   gulp = require 'gulp'
 3 |   _ = require "lodash"
 4 |   requireDir = require "require-dir"
 5 |   assemble = require 'assemble'
 6 |   flatten = require 'gulp-flatten'
 7 |   Handlebars = require 'assemble/node_modules/handlebars'
 8 |   handlebarsHelpers = require 'handlebars-helpers'
 9 |   helpers = requireDir "../lib/helpers/"
10 | 
11 |   templateDir = 'src/templates/'
12 |   options =
13 |     pages: templateDir + 'pages/**/*.hbs'
14 |     layouts: templateDir + 'layouts/**/*.hbs'
15 |     partials: 'src/partials/**/*.hbs'
16 |     patternDir: 'src/patterns/'
17 |     patternsOut: cfg.paths.dest + 'patterns/'
18 | 
19 |   params =
20 |     grunt: {}
21 |     assemble: assemble
22 | 
23 |   pages = [
24 |     'src/patterns/{pages,templates}/**/*.hbs'
25 |   ]
26 | 
27 |   patterns = [
28 |     options.patternDir + '**/*.hbs'
29 |     '!' + pages
30 |   ]
31 | 
32 |   # register handlebars-helpers package
33 |   handlebarsHelpers.register(Handlebars, options, params)
34 | 
35 |   # Without this, streams will pollute each other
36 |   # Not quite sure why. Leave this alone unless you understand the
37 |   # consequences.
38 |   assemble.disable 'buffer plugin'
39 | 
40 |   setupAssemble = ->
41 |     # register our custom handlebars helpers
42 |     _.each helpers, (helper)->
43 |       helper.register(Handlebars, options)
44 | 
45 |     assemble.namespace(':basename', ['src/data/**/*.json', 'src/data/**/*.yml'])
46 |     assemble.layouts([options.layouts])
47 |     assemble.partials([options.partials])
48 | 
49 |   gulp.task 'patterns', ->
50 |     setupAssemble()
51 |     assemble.src(patterns, layout: 'pattern')
52 |       .pipe(assemble.dest(options.patternsOut))
53 | 
54 |   gulp.task 'pages', ->
55 |     setupAssemble()
56 |     assemble.src(pages, layout: 'page')
57 |       .pipe(assemble.dest(options.patternsOut))
58 | 
59 |   gulp.task 'templates', ['patterns', 'pages']
60 | 


--------------------------------------------------------------------------------
/src/scss/_mixins.scss:
--------------------------------------------------------------------------------
 1 | @mixin intrinsic-ratio($w, $h) {
 2 |   // Use this mixin when you want to make
 3 |   // an element with no intrinsic height
 4 |   // to scale with a given ratio as an image would.
 5 | 
 6 |   // NOTE: This forces a width of 100%, as the height
 7 |   // is based on the parent's width.
 8 |   // If you want an icon to be a width other than 100%,
 9 |   // put that width on a wrapper
10 | 
11 |   $ratio: $h/$w;
12 |   $percentage: $ratio * 100%;
13 | 
14 |   width: 100%;
15 |   height: 0;
16 |   padding-bottom: $percentage;
17 | }
18 | 
19 | @mixin sb-media($query) {
20 |   $no-mq-support: false !default;
21 |   $serve-to-nomq-max-width: 63em;
22 | 
23 |   @if $no-mq-support{
24 |     @if $query < $serve-to-nomq-max-width {
25 |       @content;
26 |     }
27 |   } @else {
28 |     @media ( min-width: + $query ) {
29 |       @content;
30 |     }
31 |   }
32 | }
33 | 
34 | @mixin rem( $property, $a:0, $b:$a, $c:$a, $d:$b ) {
35 |   $base-font-multiplier: 1 !default;
36 | 
37 | // Font Families
38 |   @if ( $property == "font-size" ) {
39 |     // $a is the font size
40 |     // %b is the keyword
41 |     @if ( $a != $b ) {
42 |       font-size: $b;
43 |     }
44 |     @else {
45 |       font-size: $a * $base-font-multiplier * 16px;
46 |     }
47 |     font-size: $a * 1rem;
48 |   } @else {
49 |     $apx: $a * $base-font-multiplier * 16px;
50 |     $bpx: $b * $base-font-multiplier * 16px;
51 |     $cpx: $c * $base-font-multiplier * 16px;
52 |     $dpx: $d * $base-font-multiplier * 16px;
53 |     $arem: $a * 1rem;
54 |     $brem: $b * 1rem;
55 |     $crem: $c * 1rem;
56 |     $drem: $d * 1rem;
57 | 
58 |     @if ( $property == "padding" or $property == "margin" ){
59 |       #{$property}: $apx $bpx $cpx $dpx;
60 |       #{$property}: $arem $brem $crem $drem;
61 |     } @else {
62 |       #{$property}: $apx;
63 |       #{$property}: $arem;
64 |     }
65 |   }
66 | }
67 | 
68 | %strip_input {
69 |   border: none;
70 |   border-radius: 0;
71 |   background: none;
72 | }
73 | 
74 | 


--------------------------------------------------------------------------------
/specs/README.md:
--------------------------------------------------------------------------------
 1 | # Testing
 2 | 
 3 | 
 4 | As much of the JavaScript as possible should be tested using Jasmine. To test the modules, the tests need to be setup as follows:
 5 | 
 6 | ```
 7 | describe("Color Picker", function() {
 8 |   it("Defaults to 'rust'", function() {
 9 |     expect(colorPicker.selectedColor()).toBe("rust");
10 |   }
11 | }
12 | ```
13 | 
14 | We use the [gulp-jasmine-phantom](https://github.com/dflynn15/gulp-jasmine-phantom) plugin to run our tests with either PhantomJS or minijasminenode2.
15 | 
16 | All unit tests will be placed in the [unit folder](/unit), and the integration tests will be placed in the [integration folder](/integration). If you need to add any fixtures for testing you can place them in the [fixtures folder](/fixtures).
17 | 
18 | Tests will run automatically through Gulp. You can also run them manually from the command line:
19 | 
20 | Unit Tests:
21 | ```
22 | gulp tests-unit
23 | ```
24 | 
25 | Integration Tests (running with PhantomJS):
26 | ```
27 | gulp tests-integration
28 | ```
29 | 
30 | Unit & Integration tests:
31 | ```
32 | gulp test
33 | ```
34 | 
35 | Run all test in PhantomJS and generate coverage data.
36 | ```
37 | gulp karma
38 | ```
39 | 
40 | To correctly run the tests please make sure that you have the following dependencies installed.
41 | 
42 | 
43 | ## Dependencies
44 | 
45 | Before you install `gulp-jasmine-phantom` please enusre that you have PhantomJS
46 | installed on your machine. The plugin assumes that the `phantomjs` binary is
47 | available in the PATH and executable from the command line.
48 | 
49 | **If you do not have `phantomjs` installed please install following [these directions.](http://phantomjs.org/download.html)
50 | 
51 | ### Gulp plugin options
52 | 
53 | #### integration
54 | Type: `boolean`
55 | Default: false
56 | 
57 | Run your tests with `phantomjs`
58 | 
59 | #### keepRunner
60 | Type: `boolean | string`
61 | Default: false
62 | 
63 | Keep the `specRunner.html` file after build. If given a string, it will keep the runner at the string path.
64 | 


--------------------------------------------------------------------------------
/tasks/test.coffee:
--------------------------------------------------------------------------------
 1 | module.exports = (gulp, cfg, env) ->
 2 |   jasmine = require "gulp-jasmine-phantom"
 3 |   webpagetest = require "webpagetest"
 4 |   jscs = require 'gulp-jscs'
 5 | 
 6 | 
 7 |   gulp.task "tests-integration", ->
 8 |     gulp.src([
 9 |       "bower_components/jquery/dist/jquery.js",
10 |       "bower_components/jasmine-jquery/lib/jasmine-jquery.js",
11 |       "specs/integration/lib/*.js",
12 |       "specs/integration/**/*[spec].js"
13 |     ]).pipe jasmine
14 |       integration: true
15 | 
16 |   gulp.task "tests-unit", ->
17 |     gulp.src([
18 |       "specs/unit/lib/*.js",
19 |       "specs/unit/**/*[spec].js"
20 |     ]).pipe jasmine
21 |       integration: false
22 | 
23 |   gulp.task 'test-handlebars', ->
24 |     gulp.src('lib/specs/unit/**/*.spec.js')
25 |       .pipe jasmine
26 |         integration: false
27 | 
28 |   gulp.task 'test-perf', ->
29 |     wpt = new webpagetest('www.webpagetest.org', '')
30 |     parameters =
31 |       disableHTTPHeaders: true
32 |       private: true
33 |       video: true
34 |       location: 'Dulles:Chrome'
35 | 
36 |     testSpecs =
37 |       runs:
38 |         1:
39 |           firstView:
40 |             SpeedIndex: 1500
41 |       median:
42 |         firstView:
43 |           bytesIn: 1000000
44 |           visualComplete: 4000
45 | 
46 |     wpt.runTest '', parameters, (err, data) ->
47 |       testID = data.data.testId
48 |       checkStatus = ->
49 |         wpt.getTestStatus testID, (err, data) ->
50 |           console.log "Status for #{testID}: #{data.data.statusText}"
51 |           unless data.data.completeTime
52 |             setTimeout checkStatus, 5000
53 |           else
54 |             wpt.getTestResults testID, specs: testSpecs, (err, data) ->
55 |               process.exit 1 if err > 0
56 | 
57 |       checkStatus()
58 | 
59 |   gulp.task 'jsstyle-tests', ->
60 |     gulp.src(['!specs/integration/lib/*.js', 'specs/**/*.js'])
61 |       .pipe(jscs())
62 | 
63 |   gulp.task "test", ['jsstyle-tests', 'jshint', 'tests-integration', 'tests-unit']
64 | 


--------------------------------------------------------------------------------
/src/patterns/organisms/test.hbs:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
 3 | <!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
 4 | <!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
 5 | <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
 6 | <head>
 7 |   <meta charset="utf-8">
 8 |   <title>{{ title }}</title>
 9 |   <meta name="description" content="">
10 |   <meta name="viewport" content="width=device-width,initial-scale=1.0">
11 |   <meta name="msapplication-TileColor" content="#73c5d3"/>
12 |   <meta name="msapplication-TileImage" content="sbx_144x144.png"/>
13 |   <!--[if (lt IE 9) & (!IEMobile)]>
14 |       <link href="/css/no-mq-base.css" rel="stylesheet">
15 |       <![endif]-->
16 |       <!--[if (gte IE 9) | (IEMobile)]><!-->
17 |       <link href="/css/mq-base.css" rel="stylesheet">
18 |       <!--<![endif]-->
19 | 
20 |   <script src="/js/libs/modernizr.js"></script>
21 | 
22 |   <script>
23 |   /* grunticon Stylesheet Loader | https://github.com/filamentgroup/grunticon | (c) 2012 Scott Jehl, Filament Group, Inc. | MIT license. */
24 |   window.grunticon=function(e){if(e&&3===e.length){var t=window,n=!(!t.document.createElementNS||!t.document.createElementNS("http://www.w3.org/2000/svg","svg").createSVGRect||!document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image","1.1")||window.opera&&-1===navigator.userAgent.indexOf("Chrome")),o=function(o){var r=t.document.createElement("link"),a=t.document.getElementsByTagName("script")[0];r.rel="stylesheet",r.href=e[o&&n?0:o?1:2],a.parentNode.insertBefore(r,a)},r=new t.Image;r.onerror=function(){o(!1)},r.onload=function(){o(1===r.width&&1===r.height)},r.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="}};
25 |   grunticon(["/grunticon/icons.data.svg.css", "/grunticon/icons.data.png.css", "/grunticon/icons.fallback.css"]);
26 |   </script>
27 | 
28 |   <noscript><link href="/grunticon/icons.fallback.css" rel="stylesheet"></noscript>
29 | </head>
30 | <body>
31 |   {% body %}
32 |   <script src="/js/app.js"></script>
33 | </body>
34 | </html>
35 | 


--------------------------------------------------------------------------------
/src/templates/layouts/page.hbs:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
 3 | <!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
 4 | <!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
 5 | <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
 6 | <head>
 7 |   <meta charset="utf-8">
 8 |   <title>{{ title }}</title>
 9 |   <meta name="description" content="">
10 |   <meta name="viewport" content="width=device-width,initial-scale=1.0">
11 |   <meta name="msapplication-TileColor" content="#73c5d3"/>
12 |   <meta name="msapplication-TileImage" content="sbx_144x144.png"/>
13 |   <!--[if (lt IE 9) & (!IEMobile)]>
14 |       <link href="/css/no-mq-base.css" rel="stylesheet">
15 |       <![endif]-->
16 |       <!--[if (gte IE 9) | (IEMobile)]><!-->
17 |       <link href="/css/mq-base.css" rel="stylesheet">
18 |       <!--<![endif]-->
19 | 
20 |   <script src="/js/libs/modernizr.js"></script>
21 | 
22 |   <script>
23 |   /* grunticon Stylesheet Loader | https://github.com/filamentgroup/grunticon | (c) 2012 Scott Jehl, Filament Group, Inc. | MIT license. */
24 |   window.grunticon=function(e){if(e&&3===e.length){var t=window,n=!(!t.document.createElementNS||!t.document.createElementNS("http://www.w3.org/2000/svg","svg").createSVGRect||!document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image","1.1")||window.opera&&-1===navigator.userAgent.indexOf("Chrome")),o=function(o){var r=t.document.createElement("link"),a=t.document.getElementsByTagName("script")[0];r.rel="stylesheet",r.href=e[o&&n?0:o?1:2],a.parentNode.insertBefore(r,a)},r=new t.Image;r.onerror=function(){o(!1)},r.onload=function(){o(1===r.width&&1===r.height)},r.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="}};
25 |   grunticon(["/grunticon/icons.data.svg.css", "/grunticon/icons.data.png.css", "/grunticon/icons.fallback.css"]);
26 |   </script>
27 | 
28 |   <noscript><link href="/grunticon/icons.fallback.css" rel="stylesheet"></noscript>
29 | </head>
30 | <body>
31 |   {% body %}
32 |   <script src="/js/app.js"></script>
33 | </body>
34 | </html>
35 | 


--------------------------------------------------------------------------------
/src/templates/layouts/pattern.hbs:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
 3 | <!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
 4 | <!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
 5 | <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
 6 | <head>
 7 |   <meta charset="utf-8">
 8 |   <title>{{ title }}</title>
 9 |   <meta name="description" content="">
10 |   <meta name="viewport" content="width=device-width,initial-scale=1.0">
11 |   <meta name="msapplication-TileColor" content="#73c5d3"/>
12 |   <meta name="msapplication-TileImage" content="sbx_144x144.png"/>
13 |   <!--[if (lt IE 9) & (!IEMobile)]>
14 |       <link href="/css/no-mq-base.css" rel="stylesheet">
15 |       <![endif]-->
16 |       <!--[if (gte IE 9) | (IEMobile)]><!-->
17 |       <link href="/css/mq-base.css" rel="stylesheet">
18 |       <!--<![endif]-->
19 | 
20 |   <script src="/js/libs/modernizr.js"></script>
21 | 
22 |   <script>
23 |   /* grunticon Stylesheet Loader | https://github.com/filamentgroup/grunticon | (c) 2012 Scott Jehl, Filament Group, Inc. | MIT license. */
24 |   window.grunticon=function(e){if(e&&3===e.length){var t=window,n=!(!t.document.createElementNS||!t.document.createElementNS("http://www.w3.org/2000/svg","svg").createSVGRect||!document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image","1.1")||window.opera&&-1===navigator.userAgent.indexOf("Chrome")),o=function(o){var r=t.document.createElement("link"),a=t.document.getElementsByTagName("script")[0];r.rel="stylesheet",r.href=e[o&&n?0:o?1:2],a.parentNode.insertBefore(r,a)},r=new t.Image;r.onerror=function(){o(!1)},r.onload=function(){o(1===r.width&&1===r.height)},r.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="}};
25 |   grunticon(["/grunticon/icons.data.svg.css", "/grunticon/icons.data.png.css", "/grunticon/icons.fallback.css"]);
26 |   </script>
27 | 
28 |   <noscript><link href="/grunticon/icons.fallback.css" rel="stylesheet"></noscript>
29 | </head>
30 | <body>
31 |   {% body %}
32 |   <script src="/js/app.js"></script>
33 | </body>
34 | </html>
35 | 


--------------------------------------------------------------------------------
/src/scss/README.md:
--------------------------------------------------------------------------------
 1 | # SCSS
 2 | 
 3 | ## CSS
 4 | 
 5 | - When you are naming something, **do not** name it based on its content,
 6 |   unless you're applying specific, non-reusable styles. Exceptions can be made if
 7 |   the pieces you are developing are unlikely to be used elsewhere, such as in a
 8 |   header or footer.
 9 | 
10 | - Name classes based on the function of their styles. A lot of the time,
11 |   the function of a class is to change the presentation of something.
12 |   Err on the side of naming things based on *presentation* rather than *content.*
13 | 
14 | - Only scope styles when necessary:
15 | 
16 | ```css
17 | /* avoid this: */
18 | .sidebar .child {
19 |   width: 50%;
20 | }
21 | 
22 | /* better: */
23 | .child_constrained {
24 |   width: 50%;
25 | }
26 | ```
27 | 
28 | ## Naming Style
29 | 
30 | We follow [SMACSS](http://smacss.com/)-like conventions when naming CSS classes.
31 | 
32 | **Modules** are the building blocks of a website. Multi-word module names should be *hyphen-separated*:
33 | ```css
34 | .module {}
35 | /* or */
36 | .special-list {}
37 | ```
38 | 
39 | **Subcomponents** are bits and pieces of a module that are specific to that module. A module is separated from a subcomponent with *double--hyphens*:
40 | ```css
41 | .module--subcomponent {}
42 | /* or */
43 | .special-list--item {}
44 | ```
45 | 
46 | **Modifiers** change or add styling in certain cases. They should be separated from what they modify with *underscores*:
47 | ```css
48 | .module--subcomponent_modifier {}
49 | /* or */
50 | .special-list--item_has-image {}
51 | ```
52 | 
53 | **Alternate modules** (a.k.a. subclassed modules) are simply modified modules. That means we use the modifier's *underscore* convention on them:
54 | ```css
55 | .module_modifier {}
56 | /* or */
57 | .special-list_constrained {}
58 | ```
59 | 
60 | So if a subcomponent requires special styling inside of an alternate module, do this:
61 | ```css
62 | .module_modifier--subcomponent {}
63 | /* or */
64 | .special-list_constrained--item { /* add me to an element in addition to .special-list--item */}
65 | ```
66 | 
67 | **Only be as verbose as you need to be.** Don't allude to DOM structure when you don't need to:
68 | ```css
69 | /* don't do */
70 | .special-list--contents--image {}
71 | 
72 | /* do */
73 | .special-list--image {}
74 | ```
75 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | README
 2 | ===========
 3 | 
 4 | ### Getting Startd
 5 | 
 6 | 1. `npm install -g gulp`
 7 | 2. `npm install`
 8 | 3. `bower install`
 9 | 4. `gulp` (or [this one cool trick](#errors))
10 | 
11 | Open your browser to http://0.0.0.0:8000
12 | 
13 | ### Icons
14 | 
15 | We are using [Grunticon](https://github.com/filamentgroup/grunticon) to generate SVG stylesheets and appropriate fallbacks for all icons. To install grunt on your system simply re-run `npm install`.
16 | 
17 | Grunticon accepts source `.svg` files in the `src/grunticon/source` directory. Add new icon files to that directory and re-run `gulp` to generate new stylesheets with the new icons.
18 | 
19 | Grunticon can also generate different color versions of the same icon. To create a color variation:
20 | 
21 | - define a color in the `Gruntfile.coffee` like so:
22 | 
23 | ```coffeescript
24 | options:
25 |   colors:
26 |     orange: "#ff7c00"
27 | ```
28 | - rename the icon file you want to change to include the color variation, e.g. `thing.colors-orange.svg`.
29 | 
30 | ### Errors
31 | 
32 | By default, plugin errors (such as errors with Sass compilation) will cause
33 | Gulp to halt. Errors and warnings are fatal. If you want to keep Gulp running,
34 | use the `--fatal=off` flag. This is useful if you are watching files and you
35 | don't want to have to manually start gulp again.
36 | 
37 | ```
38 | gulp              # Errors will stop the build
39 | gulp --fatal=off  # Errors will not stop the build
40 | ```
41 | 
42 | If you run into an error that includes:
43 | 
44 | `Error: watch EMFILE`
45 | 
46 | run the following command in your terminal:
47 | 
48 | `ulimit -S -n 2048`
49 | 
50 | This allows your OS to allow Gulp to watch up to 2048 files instead of whatever
51 | limitation the OS currently has. The error is documented in
52 | [Gulp's bugs.](https://github.com/sindresorhus/gulp-imagemin/issues/10)
53 | 
54 | ```
55 |  ____________________________
56 | /          Protip:           \
57 | | alias g='gulp --fatal=off' |
58 | | for udderly effortless     |
59 | \ development.               /
60 |  ----------------------------
61 |         \   ^__^
62 |          \  (oo)\_______
63 |             (__)\       )\/\
64 |                 ||----w |
65 |                 ||     ||
66 | ```
67 | 


--------------------------------------------------------------------------------
/src/vendor/pattern-list.js:
--------------------------------------------------------------------------------
 1 | window.patternLister = {
 2 | 
 3 |   list: window.patternList,
 4 | 
 5 |   printList: function(){
 6 |     var output = '';
 7 | 
 8 |     function recurse(node, recursionDepth){
 9 |       var recursionDepth = recursionDepth || 1;
10 | 
11 |       output = output + '<li class="sp_sm">';
12 |       if (node.children) {
13 |         output = output + node.prettyName;
14 |         output = output + '<ul class="sp_top_sm">';
15 |         $.each(node.children, function(i, child){
16 |           recurse(child, recursionDepth + 1);
17 |         });
18 | 
19 |         output = output + '</ul>';
20 |       } else {
21 |         // final node
22 |         // output = output + '<li>';
23 |         output = output + '<a href="' + node.path + '" title="' + node.name + '" class="link_default">';
24 |         output = output + node.prettyName;
25 |         output = output + '</a>';
26 |         if (node.modifiers) {
27 |           output = output + ' (' + node.modifiers.join(', ') + ')';
28 |         }
29 |         // output = output + '</li>';
30 |       }
31 |       output = output + '</li>';
32 |     }
33 | 
34 |     $.each(patternList, $.proxy(function(i, type){
35 |       output = output + '<div class="g-1-1 g-md-1-3 sp_xl"><div class="g-inner">';
36 | 
37 |       output = output + '<div class="tx_bold tx_lg">';
38 |       output = output + type.prettyName;
39 |       output = output + '</div>';
40 | 
41 |       output = output + '<div class="sp">';
42 |       output = output + '<ul>';
43 |       $.each(type.children, function(i, child){
44 |         recurse(child, 2);
45 |       });
46 |       output = output + '</ul>';
47 |       output = output + '</div>';
48 | 
49 |       output = output + '</div></div>';
50 |     }, this));
51 | 
52 |     return output;
53 |     
54 |   },
55 | 
56 |   createList: function(){
57 |     if (window.patternList) {
58 |       var groupOrder = {
59 |         'atoms': 0,
60 |         'molecules': 1,
61 |         'organisms': 2,
62 |         'templates': 3,
63 |         'pages': 4,
64 |         'systems': 99
65 |       };
66 | 
67 |       window.patternList.sort(function(a,b){
68 |         return groupOrder[a.name] - groupOrder[b.name];
69 |       });
70 | 
71 |       $('.js-pattern-list').append(this.printList());
72 |     }
73 |   },
74 | 
75 |   init: function(){
76 |     this.createList();
77 |   }
78 | };
79 | 
80 | window.patternLister.init();
81 | 


--------------------------------------------------------------------------------
/src/scss/_spacing.scss:
--------------------------------------------------------------------------------
  1 | $sp_sm: 0.5em;
  2 | $sp_md: 1em;
  3 | $sp_lg: 1.5em;
  4 | $sp_xl: 2.5em;
  5 | $sp_xxl: 4.5em;
  6 | 
  7 | //--- Named spacing classes ---//
  8 | .sp_none {
  9 |   margin: 0;
 10 | }
 11 | 
 12 | .sp {
 13 |   margin-bottom: $sp_md;
 14 | }
 15 | 
 16 | .sp_none {
 17 |   margin: 0;
 18 | }
 19 | 
 20 | .sp_all {
 21 |   margin: $sp_md;
 22 | }
 23 | 
 24 | .sp_sm {
 25 |   margin-bottom: $sp_sm;
 26 | }
 27 | 
 28 | .sp_lg {
 29 |   margin-bottom: $sp_lg;
 30 | }
 31 | 
 32 | .sp_xl {
 33 |   margin-bottom: $sp_xl;
 34 | }
 35 | 
 36 | .sp_xxl {
 37 |   margin-bottom: $sp_xxl;
 38 | }
 39 | 
 40 | .sp_top_sm {
 41 |   margin-top: $sp_sm;
 42 | }
 43 | 
 44 | .sp_top {
 45 |   margin-top: $sp_md;
 46 | }
 47 | 
 48 | .sp_left {
 49 |   margin-left: $sp_md;
 50 | }
 51 | 
 52 | .sp_right {
 53 |   margin-right: $sp_md;
 54 | }
 55 | 
 56 | .sp_right_sm {
 57 |   margin-right: $sp_sm;
 58 | }
 59 | 
 60 | .sp_left_sm {
 61 |   margin-left: $sp_sm;
 62 | }
 63 | 
 64 | .sp_horizontal {
 65 |   @extend .sp_right;
 66 |   @extend .sp_left;
 67 | }
 68 | 
 69 | .sp_horizontal_sm {
 70 |   @extend .sp_right_sm;
 71 |   @extend .sp_left_sm;
 72 | }
 73 | 
 74 | .sp_bottom {
 75 |   margin-bottom: $sp_md;
 76 | }
 77 | 
 78 | .pd_all_sm {
 79 |   padding: $sp_sm;
 80 | }
 81 | 
 82 | .pd_all_xl {
 83 |   padding: $sp_xl;
 84 | }
 85 | 
 86 | .pd_all {
 87 |   padding: $sp_md;
 88 | }
 89 | 
 90 | .pd_left_sm {
 91 |   padding-left: $sp_sm;
 92 | }
 93 | 
 94 | .pd_left {
 95 |   padding-left: $sp_md;
 96 | }
 97 | 
 98 | .pd_right_sm {
 99 |   padding-right: $sp_sm;
100 | }
101 | 
102 | .pd_right {
103 |   padding-right: $sp_md;
104 | }
105 | 
106 | .pd_horizontal_sm {
107 |   @extend .pd_left_sm;
108 |   @extend .pd_right_sm;
109 | }
110 | 
111 | .pd_horizontal {
112 |   @extend .pd_left;
113 |   @extend .pd_right;
114 | }
115 | 
116 | .pd_vertical_sm {
117 |   @extend .pd_top_sm;
118 |   @extend .pd_sm;
119 | }
120 | 
121 | .pd_vertical_lg {
122 |   @extend .pd_top_lg;
123 |   @extend .pd_lg;
124 | }
125 | 
126 | .pd_vertical {
127 |   @extend .pd_top;
128 |   @extend .pd;
129 | }
130 | 
131 | .pd {
132 |   padding-bottom: $sp_md;
133 | }
134 | 
135 | .pd_sm {
136 |   padding-bottom: $sp_sm;
137 | }
138 | 
139 | .pd_lg {
140 |   padding-bottom: $sp_lg;
141 | }
142 | 
143 | .pd_top {
144 |   padding-top: $sp_md;
145 | }
146 | 
147 | .pd_top_sm {
148 |   padding-top: $sp_sm;
149 | }
150 | 
151 | .pd_top_lg {
152 |   padding-top: $sp_lg;
153 | }
154 | 
155 | 


--------------------------------------------------------------------------------
/.jscsrc:
--------------------------------------------------------------------------------
  1 | {
  2 |   "disallowMultipleLineStrings": true,
  3 |   "disallowMixedSpacesAndTabs": "smart",
  4 |   "disallowSpacesInsideArrayBrackets": "all",
  5 |   "requireSpaceBeforeObjectValues": true,
  6 |   "requireCommaBeforeLineBreak": true,
  7 |   "requireBlocksOnNewline": 1,
  8 |   "disallowKeywordsOnNewLine": ["else"],
  9 |   "disallowKeywords": [ "with" ],
 10 |   "disallowNewlineBeforeBlockStatements": true,
 11 |   "requireSpacesInFunctionExpression": {
 12 |     "beforeOpeningCurlyBrace": true
 13 |   },
 14 |   "requireSpacesInConditionalExpression": {
 15 |     "afterTest": true,
 16 |     "beforeConsequent": true,
 17 |     "afterConsequent": true,
 18 |     "beforeAlternate": true
 19 |   },
 20 |   "disallowSpacesInCallExpression": true,
 21 |   "disallowEmptyBlocks": true,
 22 |   "requireSpacesInsideObjectBrackets": "all",
 23 |   "requireCurlyBraces": [
 24 |     "if",
 25 |     "else",
 26 |     "for",
 27 |     "while",
 28 |     "do",
 29 |     "try",
 30 |     "catch"
 31 |   ],
 32 |   "requireLineFeedAtFileEnd": true,
 33 |   "disallowTrailingWhitespace": true,
 34 |   "disallowTrailingComma": true,
 35 |   "requireSpaceBeforeBlockStatements": true,
 36 |   "validateIndentation": 2,
 37 |   "validateParameterSeparator": ", ",
 38 |   "requireSpaceAfterBinaryOperators": true,
 39 |   "requireSpaceBeforeKeywords": [
 40 |     "else",
 41 |     "while",
 42 |     "catch"
 43 |   ],
 44 |   "requireSpaceBeforeBinaryOperators": [
 45 |     "=", "+=", "-=", "*=", "/=", "%=", "<<=", ">>=", ">>>=",
 46 |     "&=", "|=", "^=", "+=",
 47 | 
 48 |     "+", "-", "*", "/", "%", "<<", ">>", ">>>", "&",
 49 |     "|", "^", "&&", "||", "===", "==", ">=",
 50 |     "<=", "<", ">", "!=", "!=="
 51 |   ],
 52 |   "requireSpaceAfterKeywords": [
 53 |     "do",
 54 |     "for",
 55 |     "if",
 56 |     "else",
 57 |     "switch",
 58 |     "case",
 59 |     "try",
 60 |     "while",
 61 |     "with",
 62 |     "return"
 63 |   ],
 64 |   "requireSpacesInAnonymousFunctionExpression": {
 65 |     "beforeOpeningCurlyBrace": true
 66 |   },
 67 |   "disallowSpacesInAnonymousFunctionExpression": {
 68 |     "beforeOpeningRoundBrace": true
 69 |   },
 70 |   "requireSpaceBetweenArguments": true,
 71 |   "requireOperatorBeforeLineBreak": true,
 72 |   "requireParenthesesAroundIIFE": true,
 73 |   "requireMultipleVarDecl": "onevar",
 74 |   "requireDotNotation": true,
 75 |   "maximumLineLength": {
 76 |     "value": 120,
 77 |     "tabSize": 2,
 78 |     "allowUrlComments": true,
 79 |     "allowRegex": true
 80 |   },
 81 |   "requireSpacesInNamedFunctionExpression": {
 82 |     "beforeOpeningCurlyBrace": true
 83 |   },
 84 |   "disallowSpacesInNamedFunctionExpression": {
 85 |     "beforeOpeningRoundBrace": true
 86 |   },
 87 |   "disallowSpaceAfterObjectKeys": true,
 88 |   "disallowSpaceAfterPrefixUnaryOperators": true,
 89 |   "disallowSpaceBeforePostfixUnaryOperators": true,
 90 |   "disallowSpaceBeforeBinaryOperators": [ ",", ":" ],
 91 |   "plugins": [
 92 |     "jscs-jsdoc"
 93 |   ],
 94 |   "jsDoc": {
 95 |     "checkAnnotations": true,
 96 |     "checkTypes": true,
 97 |     "enforceExistence": "exceptExports"
 98 |   }
 99 | }
100 | 


--------------------------------------------------------------------------------
/.jshintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |     // Enforcing
 3 |     "bitwise"       : true,     // true: Prohibit bitwise operators (&, |, ^, etc.)
 4 |     "camelcase"     : false,    // true: Identifiers must be in camelCase
 5 |     "curly"         : true,     // true: Require {} for every new block or scope
 6 |     "eqeqeq"        : true,     // true: Require triple equals (===) for comparison
 7 |     "forin"         : true,     // true: Require filtering for..in loops with obj.hasOwnProperty()
 8 |     "freeze"        : true,     // true: prohibits overwriting prototypes of native objects such as Array, Date etc.
 9 |     "immed"         : false,    // true: Require immediate invocations to be wrapped in parens e.g. `(function () { } ());`
10 |     "indent"        : 2,        // {int} Number of spaces to use for indentation
11 |     "latedef"       : false,    // true: Require variables/functions to be defined before being used
12 |     "newcap"        : false,    // true: Require capitalization of all constructor functions e.g. `new F()`
13 |     "noarg"         : true,     // true: Prohibit use of `arguments.caller` and `arguments.callee`
14 |     "noempty"       : true,     // true: Prohibit use of empty blocks
15 |     "nonbsp"        : true,     // true: Prohibit "non-breaking whitespace" characters.
16 |     "nonew"         : false,    // true: Prohibit use of constructors for side-effects (without assignment)
17 |     "plusplus"      : false,    // true: Prohibit use of `++` & `--`
18 |     "quotmark"      : true,    // Quotation mark consistency:
19 |                                 //   false    : do nothing (default)
20 |                                 //   true     : ensure whatever is used is consistent
21 |                                 //   "single" : require single quotes
22 |                                 //   "double" : require double quotes
23 |     "undef"         : true,     // true: Require all non-global variables to be declared (prevents global leaks)
24 |     "unused"        : true,     // Unused variables:
25 |                                 //   true     : all variables, last function parameter
26 |                                 //   "vars"   : all variables only
27 |                                 //   "strict" : all variables, all function parameters
28 |     "maxparams"     : false,    // {int} Max number of formal params allowed per function
29 |     "maxdepth"      : false,    // {int} Max depth of nested blocks (within functions)
30 |     "maxstatements" : false,    // {int} Max number statements per function
31 |     "maxcomplexity" : false,    // {int} Max cyclomatic complexity per function
32 |     "maxlen"        : false,    // {int} Max number of characters per line
33 | 
34 |     // Relaxing
35 |     "asi"           : false,     // true: Tolerate Automatic Semicolon Insertion (no semicolons)
36 |     "boss"          : false,     // true: Tolerate assignments where comparisons would be expected
37 |     "debug"         : false,     // true: Allow debugger statements e.g. browser breakpoints.
38 |     "eqnull"        : false,     // true: Tolerate use of `== null`
39 |     "es5"           : false,     // true: Allow ES5 syntax (ex: getters and setters)
40 |     "esnext"        : false,     // true: Allow ES.next (ES6) syntax (ex: `const`)
41 |     "moz"           : false,     // true: Allow Mozilla specific syntax (extends and overrides esnext features)
42 |                                  // (ex: `for each`, multiple try/catch, function expression…)
43 |     "evil"          : false,     // true: Tolerate use of `eval` and `new Function()`
44 |     "expr"          : false,     // true: Tolerate `ExpressionStatement` as Programs
45 |     "funcscope"     : false,     // true: Tolerate defining variables inside control statements
46 |     "globalstrict"  : false,     // true: Allow global "use strict" (also enables 'strict')
47 |     "iterator"      : false,     // true: Tolerate using the `__iterator__` property
48 |     "lastsemic"     : false,     // true: Tolerate omitting a semicolon for the last statement of a 1-line block
49 |     "laxbreak"      : false,     // true: Tolerate possibly unsafe line breakings
50 |     "laxcomma"      : false,     // true: Tolerate comma-first style coding
51 |     "loopfunc"      : false,     // true: Tolerate functions being defined in loops
52 |     "multistr"      : false,     // true: Tolerate multi-line strings
53 |     "noyield"       : false,     // true: Tolerate generator functions with no yield statement in them.
54 |     "notypeof"      : false,     // true: Tolerate invalid typeof operator values
55 |     "proto"         : false,     // true: Tolerate using the `__proto__` property
56 |     "scripturl"     : false,     // true: Tolerate script-targeted URLs
57 |     "shadow"        : false,     // true: Allows re-define variables later in code e.g. `var x=1; x=2;`
58 |     "sub"           : false,     // true: Tolerate using `[]` notation when it can still be expressed in dot notation
59 |     "supernew"      : false,     // true: Tolerate `new function () { ... };` and `new Object;`
60 |     "validthis"     : false,     // true: Tolerate using this in a non-constructor function
61 | 
62 |     // Environments
63 |     "browser"       : true,     // Web Browser (window, document, etc)
64 |     "devel"         : true,     // Development/debugging (alert, confirm, etc)
65 |     "jasmine"       : true,    // Jasmine
66 |     "jquery"        : true,    // jQuery
67 |     "node"          : true,    // Node.js
68 |     "nonstandard"   : false,    // Widely adopted globals (escape, unescape, etc)
69 |     "phantom"       : false,    // PhantomJS
70 |     "prototypejs"   : false,    // Prototype and Scriptaculous
71 | 
72 |     // Custom Globals
73 |     "globals" : {
74 |     }        // additional predefined global variables
75 | }
76 | 


--------------------------------------------------------------------------------
/lib/helpers/helper-atomic.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Handlebars Helpers for Pattern Lab
  3 |  * Copyright (c) 2014 Jon Schlinkert
  4 |  * Licensed under the MIT License (MIT).
  5 |  */
  6 | 'use strict';
  7 | 
  8 | var path = require('path');
  9 | var fs = require('fs');
 10 | var util = require('util');
 11 | var file = require('fs-utils');
 12 | var _ = require('lodash');
 13 | var jsyaml = require('js-yaml');
 14 | var fm = require('front-matter');
 15 | 
 16 | var templateCache = [];
 17 | 
 18 | module.exports.register = function (Handlebars, options, params) {
 19 |   options = options || {};
 20 |   var config = _.extend(options, options.data || {});
 21 | 
 22 |   function getDirectories(rootDir) {
 23 |     return fs.readdirSync(rootDir).filter(function (file) {
 24 |       return fs.statSync(rootDir + file).isDirectory();
 25 |     });
 26 |   }
 27 | 
 28 |   var patterns = getDirectories('src/patterns/');
 29 | 
 30 |   patterns.forEach(function(pattern) {
 31 |     file.expand(options.patternDir + pattern + '/**/*.hbs').map(function(filepath) {
 32 |       var dir = file.dirname(filepath);
 33 |       var cleanName = file.base(filepath).replace(/\d+-/, '').replace(/^_/, '');
 34 | 
 35 |       var name = pattern + '-' + cleanName;
 36 | 
 37 |       var template = file.readFileSync(filepath);
 38 |       Handlebars.registerPartial(name, template);
 39 |     });
 40 | 
 41 |     Handlebars.registerHelper(pattern, function() {
 42 |       var self = this,
 43 |           name,
 44 |           context = {},
 45 |           options = {},
 46 |           data = {},
 47 |           templateName,
 48 |           template,
 49 |           yfm,
 50 |           fn;
 51 | 
 52 |       // name is required
 53 |       // context is optional
 54 |       // options is always passed last, even if it's not passed
 55 |       if (arguments.length === 2) {
 56 |         name = _.clone(arguments[0]);
 57 |         options = _.clone(arguments[1]);
 58 |       } else {
 59 |         name = _.clone(arguments[0]);
 60 |         context = _.clone(arguments[1]);
 61 |         options = _.clone(arguments[2]);
 62 |       }
 63 | 
 64 |       templateName = Handlebars.partials[pattern + '-' + name];
 65 | 
 66 |       // extract yaml front matter from template
 67 |       yfm = fm(templateName);
 68 |       template = yfm.body;
 69 | 
 70 |       // mix all available data together.
 71 |       // order of these is lowest priority to highest
 72 |       data = _.extend({}, yfm.attributes, self, context, options.hash);
 73 | 
 74 |       if (typeof options.fn !== 'undefined') {
 75 |         // helper is called as a block,
 76 |         // so lets compile the contents of the block,
 77 |         // and set it as data's outlet property
 78 |         data.outlet = options.fn(data);
 79 |       }
 80 | 
 81 |       if (pattern == 'organism') {
 82 |         var template = "\n<!---start " + pattern + ": " + name + "--->\n\n" + template + "\n<!---end " + pattern + ": " + name + "--->";
 83 |       }
 84 | 
 85 |       if (!templateCache[template]) {
 86 |         templateCache[template] = Handlebars.compile(template);
 87 |       }
 88 |       fn = templateCache[template];
 89 | 
 90 |       return new Handlebars.SafeString(fn(data));
 91 |     });
 92 |   });
 93 | 
 94 |   function prettify(str) {
 95 |     var numbersAndExtension = /^\d*-(.*?)|\.hbs/g;
 96 | 
 97 |     // remove numbers and extension,
 98 |     str = str.replace(numbersAndExtension, '');
 99 | 
100 |     // hyphens to spaces,
101 |     str = str.replace(/-/g, ' ');
102 | 
103 |     // title case
104 |     str = str.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
105 | 
106 |     str = str.split('_')[0];
107 | 
108 |     return str;
109 |   }
110 | 
111 |   function getPatterns(dir) {
112 |     var allPatterns = file.expand(dir + '/**/*.hbs');
113 | 
114 |     var patterns = [];
115 | 
116 |     _.each(allPatterns, function(fullFilepath){
117 |       // remove directory
118 |       var filepath = fullFilepath.replace(dir + '/', '');
119 | 
120 |       var splitPath = filepath.split('/');
121 | 
122 |       // If you aren't me, I'm sorry about this.
123 |       if (splitPath.length === 3){
124 |       // nested in groups
125 | 
126 |         var type = splitPath[0],
127 |             group = splitPath[1],
128 |             patternName = splitPath[2];
129 | 
130 |         var prettyType = prettify(type),
131 |             prettyGroup = prettify(group),
132 |             prettyName = prettify(patternName),
133 |             modifiers;
134 | 
135 |         if (patternName[0] === '_') {
136 |           return;
137 |         }
138 | 
139 |         if (patternName.split('_').length > 1) {
140 |           modifiers = patternName.split('_');
141 | 
142 |           // Remove the first item, which is the actual name
143 |           modifiers.shift();
144 | 
145 |           // Remove extension
146 |           var last = modifiers.length - 1;
147 |           modifiers[last] = modifiers[last].replace('.hbs', '');
148 |         }
149 | 
150 |         var destPath = fullFilepath.replace('src', '').replace(/hbs$/, 'html');
151 | 
152 |         var pattern = {
153 |           'name': patternName,
154 |           'prettyName': prettyName,
155 |           'path': destPath,
156 |         };
157 | 
158 |         if (modifiers) {
159 |           pattern.modifiers = modifiers;
160 |         }
161 | 
162 |         if (_.find(patterns, { 'name': type }) === undefined) {
163 |           // create type
164 |           patterns.push({ 'name': type, 'prettyName': prettyType, 'children': [] });
165 |         }
166 | 
167 |         var types = _.find(patterns, { 'name': type }).children;
168 | 
169 |         if (_.find(types, { 'name': group }) === undefined) {
170 |           // create group
171 |           types.push({ 'name': group, 'prettyName': prettyGroup, 'children': [] });
172 |         }
173 | 
174 |         var patternItems = _.find(types, { 'name': group }).children;
175 | 
176 |         // lowest level
177 |         patternItems.push(pattern);
178 | 
179 |       } else {
180 |       // not nested in groups
181 | 
182 |         var type = splitPath[0],
183 |             patternName = splitPath[1]
184 |             modifiers;
185 | 
186 |         if (patternName[0] === '_') {
187 |           return;
188 |         }
189 | 
190 |         if (patternName.split('_').length > 1) {
191 |           modifiers = patternName.split('_');
192 | 
193 |           // Remove the first item, which is the actual name
194 |           modifiers.shift();
195 | 
196 |           // Remove extension
197 |           var last = modifiers.length - 1;
198 |           modifiers[last] = modifiers[last].replace('.hbs', '');
199 |         }
200 | 
201 |         if (patternName.match(/index/)) {
202 |           // prevent index page from being listed
203 |           return;
204 |         }
205 | 
206 |         var prettyType = prettify(type),
207 |             prettyName = prettify(patternName);
208 | 
209 |         var destPath = fullFilepath.replace('src', '').replace(/hbs$/, 'html');
210 | 
211 |         var pattern = {
212 |           'name': patternName,
213 |           'prettyName': prettyName,
214 |           'path': destPath
215 |         };
216 | 
217 |         if (modifiers) {
218 |           pattern.modifiers = modifiers;
219 |         }
220 | 
221 |         if (_.find(patterns, { 'name': type }) === undefined) {
222 |           // create type
223 |           patterns.push({ 'name': type, 'prettyName': prettyType, 'children': [] });
224 |         }
225 | 
226 |         var types = _.find(patterns, { 'name': type }).children;
227 | 
228 |         // lowest level
229 |         types.push(pattern);
230 | 
231 |       }
232 |     });
233 |     return patterns;
234 |   }
235 | 
236 |   Handlebars.registerHelper('patternJSON', function() {
237 |     return JSON.stringify(getPatterns('src/patterns'));
238 |   });
239 | 
240 | };
241 | 


--------------------------------------------------------------------------------
/specs/integration/lib/jasmine-fixture.js:
--------------------------------------------------------------------------------
  1 | 
  2 | /*
  3 | jasmine-fixture 1.0.5
  4 | Makes injecting HTML snippets into the DOM easy & clean!
  5 | site: https://github.com/searls/jasmine-fixture
  6 | */
  7 | 
  8 | 
  9 | (function() {
 10 |   var createHTMLBlock;
 11 | 
 12 |   (function($) {
 13 |     var jasmineFixture, originalAffix, originalInject, originalJasmineFixture, root, _;
 14 |     root = this;
 15 |     originalJasmineFixture = root.jasmineFixture;
 16 |     originalInject = root.inject;
 17 |     originalAffix = root.affix;
 18 |     _ = function(list) {
 19 |       return {
 20 |         inject: function(iterator, memo) {
 21 |           var item, _i, _len, _results;
 22 |           _results = [];
 23 |           for (_i = 0, _len = list.length; _i < _len; _i++) {
 24 |             item = list[_i];
 25 |             _results.push(memo = iterator(memo, item));
 26 |           }
 27 |           return _results;
 28 |         }
 29 |       };
 30 |     };
 31 |     root.jasmineFixture = function($) {
 32 |       var $whatsTheRootOf, applyAttributes, defaultConfiguration, defaults, init, injectContents, isReady, isString, itLooksLikeHtml, rootId, tidyUp;
 33 |       $.fn.affix = root.affix = function(selectorOptions) {
 34 |         var $top;
 35 |         $top = null;
 36 |         _(selectorOptions.split(/[ ](?=[^\]]*?(?:\[|$))/)).inject(function($parent, elementSelector) {
 37 |           var $el;
 38 |           if (elementSelector === ">") {
 39 |             return $parent;
 40 |           }
 41 |           $el = createHTMLBlock($, elementSelector).appendTo($parent);
 42 |           $top || ($top = $el);
 43 |           return $el;
 44 |         }, $whatsTheRootOf(this));
 45 |         return $top;
 46 |       };
 47 |       $whatsTheRootOf = function(that) {
 48 |         if (that.jquery != null) {
 49 |           return that;
 50 |         } else if ($('#jasmine_content').length > 0) {
 51 |           return $('#jasmine_content');
 52 |         } else {
 53 |           return $('<div id="jasmine_content"></div>').appendTo('body');
 54 |         }
 55 |       };
 56 |       afterEach(function() {
 57 |         return $('#jasmine_content').remove();
 58 |       });
 59 |       isReady = false;
 60 |       rootId = "specContainer";
 61 |       defaultConfiguration = {
 62 |         el: "div",
 63 |         cssClass: "",
 64 |         id: "",
 65 |         text: "",
 66 |         html: "",
 67 |         defaultAttribute: "class",
 68 |         attrs: {}
 69 |       };
 70 |       defaults = $.extend({}, defaultConfiguration);
 71 |       $.jasmine = {
 72 |         inject: function(arg, context) {
 73 |           var $toInject, config, parent;
 74 |           if (isReady !== true) {
 75 |             init();
 76 |           }
 77 |           parent = (context ? context : $("#" + rootId));
 78 |           $toInject = void 0;
 79 |           if (itLooksLikeHtml(arg)) {
 80 |             $toInject = $(arg);
 81 |           } else {
 82 |             config = $.extend({}, defaults, arg, {
 83 |               userString: arg
 84 |             });
 85 |             $toInject = $("<" + config.el + "></" + config.el + ">");
 86 |             applyAttributes($toInject, config);
 87 |             injectContents($toInject, config);
 88 |           }
 89 |           return $toInject.appendTo(parent);
 90 |         },
 91 |         configure: function(config) {
 92 |           return $.extend(defaults, config);
 93 |         },
 94 |         restoreDefaults: function() {
 95 |           return defaults = $.extend({}, defaultConfiguration);
 96 |         },
 97 |         noConflict: function() {
 98 |           root.jasmineFixture = originalJasmineFixture;
 99 |           root.inject = originalInject;
100 |           root.affix = originalAffix;
101 |           return this;
102 |         }
103 |       };
104 |       $.fn.inject = function(html) {
105 |         return $.jasmine.inject(html, $(this));
106 |       };
107 |       applyAttributes = function($html, config) {
108 |         var attrs, key, _results;
109 |         attrs = $.extend({}, {
110 |           id: config.id,
111 |           "class": config["class"] || config.cssClass
112 |         }, config.attrs);
113 |         if (isString(config.userString)) {
114 |           attrs[config.defaultAttribute] = config.userString;
115 |         }
116 |         _results = [];
117 |         for (key in attrs) {
118 |           if (attrs[key]) {
119 |             _results.push($html.attr(key, attrs[key]));
120 |           } else {
121 |             _results.push(void 0);
122 |           }
123 |         }
124 |         return _results;
125 |       };
126 |       injectContents = function($el, config) {
127 |         if (config.text && config.html) {
128 |           throw "Error: because they conflict, you may only configure inject() to set `html` or `text`, not both! \n\nHTML was: " + config.html + " \n\n Text was: " + config.text;
129 |         } else if (config.text) {
130 |           return $el.text(config.text);
131 |         } else {
132 |           if (config.html) {
133 |             return $el.html(config.html);
134 |           }
135 |         }
136 |       };
137 |       itLooksLikeHtml = function(arg) {
138 |         return isString(arg) && arg.indexOf("<") !== -1;
139 |       };
140 |       isString = function(arg) {
141 |         return arg && arg.constructor === String;
142 |       };
143 |       init = function() {
144 |         $("body").append("<div id=\"" + rootId + "\"></div>");
145 |         return isReady = true;
146 |       };
147 |       tidyUp = function() {
148 |         $("#" + rootId).remove();
149 |         return isReady = false;
150 |       };
151 |       $(function($) {
152 |         return init();
153 |       });
154 |       afterEach(function() {
155 |         return tidyUp();
156 |       });
157 |       return $.jasmine;
158 |     };
159 |     if ($) {
160 |       jasmineFixture = root.jasmineFixture($);
161 |       return root.inject = root.inject || jasmineFixture.inject;
162 |     }
163 |   })(window.jQuery);
164 | 
165 |   createHTMLBlock = (function() {
166 |     var bindData, bindEvents, parseAttributes, parseClasses, parseContents, parseEnclosure, parseReferences, parseVariableScope, regAttr, regAttrDfn, regAttrs, regCBrace, regClass, regClasses, regData, regDatas, regEvent, regEvents, regExclamation, regId, regReference, regTag, regTagNotContent, regZenTagDfn;
167 |     createHTMLBlock = function($, ZenObject, data, functions, indexes) {
168 |       var ZenCode, arr, block, blockAttrs, blockClasses, blockHTML, blockId, blockTag, blocks, el, el2, els, forScope, indexName, inner, len, obj, origZenCode, paren, result, ret, zc, zo;
169 |       if ($.isPlainObject(ZenObject)) {
170 |         ZenCode = ZenObject.main;
171 |       } else {
172 |         ZenCode = ZenObject;
173 |         ZenObject = {
174 |           main: ZenCode
175 |         };
176 |       }
177 |       origZenCode = ZenCode;
178 |       if (indexes === undefined) {
179 |         indexes = {};
180 |       }
181 |       if (ZenCode.charAt(0) === "!" || $.isArray(data)) {
182 |         if ($.isArray(data)) {
183 |           forScope = ZenCode;
184 |         } else {
185 |           obj = parseEnclosure(ZenCode, "!");
186 |           obj = obj.substring(obj.indexOf(":") + 1, obj.length - 1);
187 |           forScope = parseVariableScope(ZenCode);
188 |         }
189 |         while (forScope.charAt(0) === "@") {
190 |           forScope = parseVariableScope("!for:!" + parseReferences(forScope, ZenObject));
191 |         }
192 |         zo = ZenObject;
193 |         zo.main = forScope;
194 |         el = $();
195 |         if (ZenCode.substring(0, 5) === "!for:" || $.isArray(data)) {
196 |           if (!$.isArray(data) && obj.indexOf(":") > 0) {
197 |             indexName = obj.substring(0, obj.indexOf(":"));
198 |             obj = obj.substr(obj.indexOf(":") + 1);
199 |           }
200 |           arr = ($.isArray(data) ? data : data[obj]);
201 |           zc = zo.main;
202 |           if ($.isArray(arr) || $.isPlainObject(arr)) {
203 |             $.map(arr, function(value, index) {
204 |               var next;
205 |               zo.main = zc;
206 |               if (indexName !== undefined) {
207 |                 indexes[indexName] = index;
208 |               }
209 |               if (!$.isPlainObject(value)) {
210 |                 value = {
211 |                   value: value
212 |                 };
213 |               }
214 |               next = createHTMLBlock($, zo, value, functions, indexes);
215 |               if (el.length !== 0) {
216 |                 return $.each(next, function(index, value) {
217 |                   return el.push(value);
218 |                 });
219 |               }
220 |             });
221 |           }
222 |           if (!$.isArray(data)) {
223 |             ZenCode = ZenCode.substr(obj.length + 6 + forScope.length);
224 |           } else {
225 |             ZenCode = "";
226 |           }
227 |         } else if (ZenCode.substring(0, 4) === "!if:") {
228 |           result = parseContents("!" + obj + "!", data, indexes);
229 |           if (result !== "undefined" || result !== "false" || result !== "") {
230 |             el = createHTMLBlock($, zo, data, functions, indexes);
231 |           }
232 |           ZenCode = ZenCode.substr(obj.length + 5 + forScope.length);
233 |         }
234 |         ZenObject.main = ZenCode;
235 |       } else if (ZenCode.charAt(0) === "(") {
236 |         paren = parseEnclosure(ZenCode, "(", ")");
237 |         inner = paren.substring(1, paren.length - 1);
238 |         ZenCode = ZenCode.substr(paren.length);
239 |         zo = ZenObject;
240 |         zo.main = inner;
241 |         el = createHTMLBlock($, zo, data, functions, indexes);
242 |       } else {
243 |         blocks = ZenCode.match(regZenTagDfn);
244 |         block = blocks[0];
245 |         if (block.length === 0) {
246 |           return "";
247 |         }
248 |         if (block.indexOf("@") >= 0) {
249 |           ZenCode = parseReferences(ZenCode, ZenObject);
250 |           zo = ZenObject;
251 |           zo.main = ZenCode;
252 |           return createHTMLBlock($, zo, data, functions, indexes);
253 |         }
254 |         block = parseContents(block, data, indexes);
255 |         blockClasses = parseClasses($, block);
256 |         if (regId.test(block)) {
257 |           blockId = regId.exec(block)[1];
258 |         }
259 |         blockAttrs = parseAttributes(block, data);
260 |         blockTag = (block.charAt(0) === "{" ? "span" : "div");
261 |         if (ZenCode.charAt(0) !== "#" && ZenCode.charAt(0) !== "." && ZenCode.charAt(0) !== "{") {
262 |           blockTag = regTag.exec(block)[1];
263 |         }
264 |         if (block.search(regCBrace) !== -1) {
265 |           blockHTML = block.match(regCBrace)[1];
266 |         }
267 |         blockAttrs = $.extend(blockAttrs, {
268 |           id: blockId,
269 |           "class": blockClasses,
270 |           html: blockHTML
271 |         });
272 |         el = $("<" + blockTag + ">", blockAttrs);
273 |         el.attr(blockAttrs);
274 |         el = bindEvents(block, el, functions);
275 |         el = bindData(block, el, data);
276 |         ZenCode = ZenCode.substr(blocks[0].length);
277 |         ZenObject.main = ZenCode;
278 |       }
279 |       if (ZenCode.length > 0) {
280 |         if (ZenCode.charAt(0) === ">") {
281 |           if (ZenCode.charAt(1) === "(") {
282 |             zc = parseEnclosure(ZenCode.substr(1), "(", ")");
283 |             ZenCode = ZenCode.substr(zc.length + 1);
284 |           } else if (ZenCode.charAt(1) === "!") {
285 |             obj = parseEnclosure(ZenCode.substr(1), "!");
286 |             forScope = parseVariableScope(ZenCode.substr(1));
287 |             zc = obj + forScope;
288 |             ZenCode = ZenCode.substr(zc.length + 1);
289 |           } else {
290 |             len = Math.max(ZenCode.indexOf("+"), ZenCode.length);
291 |             zc = ZenCode.substring(1, len);
292 |             ZenCode = ZenCode.substr(len);
293 |           }
294 |           zo = ZenObject;
295 |           zo.main = zc;
296 |           els = $(createHTMLBlock($, zo, data, functions, indexes));
297 |           els.appendTo(el);
298 |         }
299 |         if (ZenCode.charAt(0) === "+") {
300 |           zo = ZenObject;
301 |           zo.main = ZenCode.substr(1);
302 |           el2 = createHTMLBlock($, zo, data, functions, indexes);
303 |           $.each(el2, function(index, value) {
304 |             return el.push(value);
305 |           });
306 |         }
307 |       }
308 |       ret = el;
309 |       return ret;
310 |     };
311 |     bindData = function(ZenCode, el, data) {
312 |       var datas, i, split;
313 |       if (ZenCode.search(regDatas) === 0) {
314 |         return el;
315 |       }
316 |       datas = ZenCode.match(regDatas);
317 |       if (datas === null) {
318 |         return el;
319 |       }
320 |       i = 0;
321 |       while (i < datas.length) {
322 |         split = regData.exec(datas[i]);
323 |         if (split[3] === undefined) {
324 |           $(el).data(split[1], data[split[1]]);
325 |         } else {
326 |           $(el).data(split[1], data[split[3]]);
327 |         }
328 |         i++;
329 |       }
330 |       return el;
331 |     };
332 |     bindEvents = function(ZenCode, el, functions) {
333 |       var bindings, fn, i, split;
334 |       if (ZenCode.search(regEvents) === 0) {
335 |         return el;
336 |       }
337 |       bindings = ZenCode.match(regEvents);
338 |       if (bindings === null) {
339 |         return el;
340 |       }
341 |       i = 0;
342 |       while (i < bindings.length) {
343 |         split = regEvent.exec(bindings[i]);
344 |         if (split[2] === undefined) {
345 |           fn = functions[split[1]];
346 |         } else {
347 |           fn = functions[split[2]];
348 |         }
349 |         $(el).bind(split[1], fn);
350 |         i++;
351 |       }
352 |       return el;
353 |     };
354 |     parseAttributes = function(ZenBlock, data) {
355 |       var attrStrs, attrs, i, parts;
356 |       if (ZenBlock.search(regAttrDfn) === -1) {
357 |         return undefined;
358 |       }
359 |       attrStrs = ZenBlock.match(regAttrDfn);
360 |       attrs = {};
361 |       i = 0;
362 |       while (i < attrStrs.length) {
363 |         parts = regAttr.exec(attrStrs[i]);
364 |         attrs[parts[1]] = "";
365 |         if (parts[3] !== undefined) {
366 |           attrs[parts[1]] = parseContents(parts[3], data);
367 |         }
368 |         i++;
369 |       }
370 |       return attrs;
371 |     };
372 |     parseClasses = function($, ZenBlock) {
373 |       var classes, clsString, i;
374 |       ZenBlock = ZenBlock.match(regTagNotContent)[0];
375 |       if (ZenBlock.search(regClasses) === -1) {
376 |         return undefined;
377 |       }
378 |       classes = ZenBlock.match(regClasses);
379 |       clsString = "";
380 |       i = 0;
381 |       while (i < classes.length) {
382 |         clsString += " " + regClass.exec(classes[i])[1];
383 |         i++;
384 |       }
385 |       return $.trim(clsString);
386 |     };
387 |     parseContents = function(ZenBlock, data, indexes) {
388 |       var html;
389 |       if (indexes === undefined) {
390 |         indexes = {};
391 |       }
392 |       html = ZenBlock;
393 |       if (data === undefined) {
394 |         return html;
395 |       }
396 |       while (regExclamation.test(html)) {
397 |         html = html.replace(regExclamation, function(str, str2) {
398 |           var begChar, fn, val;
399 |           begChar = "";
400 |           if (str.indexOf("!for:") > 0 || str.indexOf("!if:") > 0) {
401 |             return str;
402 |           }
403 |           if (str.charAt(0) !== "!") {
404 |             begChar = str.charAt(0);
405 |             str = str.substring(2, str.length - 1);
406 |           }
407 |           fn = new Function("data", "indexes", "var r=undefined;" + "with(data){try{r=" + str + ";}catch(e){}}" + "with(indexes){try{if(r===undefined)r=" + str + ";}catch(e){}}" + "return r;");
408 |           val = unescape(fn(data, indexes));
409 |           return begChar + val;
410 |         });
411 |       }
412 |       html = html.replace(/\\./g, function(str) {
413 |         return str.charAt(1);
414 |       });
415 |       return unescape(html);
416 |     };
417 |     parseEnclosure = function(ZenCode, open, close, count) {
418 |       var index, ret;
419 |       if (close === undefined) {
420 |         close = open;
421 |       }
422 |       index = 1;
423 |       if (count === undefined) {
424 |         count = (ZenCode.charAt(0) === open ? 1 : 0);
425 |       }
426 |       if (count === 0) {
427 |         return;
428 |       }
429 |       while (count > 0 && index < ZenCode.length) {
430 |         if (ZenCode.charAt(index) === close && ZenCode.charAt(index - 1) !== "\\") {
431 |           count--;
432 |         } else {
433 |           if (ZenCode.charAt(index) === open && ZenCode.charAt(index - 1) !== "\\") {
434 |             count++;
435 |           }
436 |         }
437 |         index++;
438 |       }
439 |       ret = ZenCode.substring(0, index);
440 |       return ret;
441 |     };
442 |     parseReferences = function(ZenCode, ZenObject) {
443 |       ZenCode = ZenCode.replace(regReference, function(str) {
444 |         var fn;
445 |         str = str.substr(1);
446 |         fn = new Function("objs", "var r=\"\";" + "with(objs){try{" + "r=" + str + ";" + "}catch(e){}}" + "return r;");
447 |         return fn(ZenObject, parseReferences);
448 |       });
449 |       return ZenCode;
450 |     };
451 |     parseVariableScope = function(ZenCode) {
452 |       var forCode, rest, tag;
453 |       if (ZenCode.substring(0, 5) !== "!for:" && ZenCode.substring(0, 4) !== "!if:") {
454 |         return undefined;
455 |       }
456 |       forCode = parseEnclosure(ZenCode, "!");
457 |       ZenCode = ZenCode.substr(forCode.length);
458 |       if (ZenCode.charAt(0) === "(") {
459 |         return parseEnclosure(ZenCode, "(", ")");
460 |       }
461 |       tag = ZenCode.match(regZenTagDfn)[0];
462 |       ZenCode = ZenCode.substr(tag.length);
463 |       if (ZenCode.length === 0 || ZenCode.charAt(0) === "+") {
464 |         return tag;
465 |       } else if (ZenCode.charAt(0) === ">") {
466 |         rest = "";
467 |         rest = parseEnclosure(ZenCode.substr(1), "(", ")", 1);
468 |         return tag + ">" + rest;
469 |       }
470 |       return undefined;
471 |     };
472 |     regZenTagDfn = /([#\.\@]?[\w-]+|\[([\w-!?=:"']+(="([^"]|\\")+")? {0,})+\]|\~[\w$]+=[\w$]+|&[\w$]+(=[\w$]+)?|[#\.\@]?!([^!]|\\!)+!){0,}(\{([^\}]|\\\})+\})?/i;
473 |     regTag = /(\w+)/i;
474 |     regId = /#([\w-!]+)/i;
475 |     regTagNotContent = /((([#\.]?[\w-]+)?(\[([\w!]+(="([^"]|\\")+")? {0,})+\])?)+)/i;
476 |     regClasses = /(\.[\w-]+)/g;
477 |     regClass = /\.([\w-]+)/i;
478 |     regReference = /(@[\w$_][\w$_\d]+)/i;
479 |     regAttrDfn = /(\[([\w-!]+(="?([^"]|\\")+"?)? {0,})+\])/ig;
480 |     regAttrs = /([\w-!]+(="([^"]|\\")+")?)/g;
481 |     regAttr = /([\w-!]+)(="?(([^"\]]|\\")+)"?)?/i;
482 |     regCBrace = /\{(([^\}]|\\\})+)\}/i;
483 |     regExclamation = /(?:([^\\]|^))!([^!]|\\!)+!/g;
484 |     regEvents = /\~[\w$]+(=[\w$]+)?/g;
485 |     regEvent = /\~([\w$]+)=([\w$]+)/i;
486 |     regDatas = /&[\w$]+(=[\w$]+)?/g;
487 |     regData = /&([\w$]+)(=([\w$]+))?/i;
488 |     return createHTMLBlock;
489 |   })();
490 | 
491 | }).call(this);


--------------------------------------------------------------------------------