Initialize app, start sketching out the classifier

.gitignore

@@ -0,0 +1 @@
+node_modules

.npmignore

@@ -0,0 +1 @@
+node_modules

Procfile

@@ -0,0 +1 @@
+web: serveup ./public

app/controllers/classifier.coffee

@@ -0,0 +1,19 @@
+{Controller} = require 'spine'
+animals = require 'lib/animals'
+template = require 'views/classifier'
+FilteringCombobox = require './filtering_combobox'
+
+class Classifier extends Controller
+  elements:
+    '.filtering-select': 'filteringComboboxNode'
+
+  constructor: ->
+    super
+
+    @html template
+
+    @filteringCombobox = new FilteringCombobox
+      el: @filteringComboboxNode
+      set: animals
+
+module.exports = Classifier

app/controllers/filtering_combobox.coffee

@@ -0,0 +1,19 @@
+{Controller} = require 'spine'
+template = require 'views/filtering_select'
+
+class FilteringSelect extends Controller
+  set: null
+  itemTemplate: (item) -> "<span>#{item.id}</span>"
+
+  className: 'filtering-select'
+
+  elements:
+    '.filtering-select-menu': 'menu'
+
+  constructor: ->
+    super
+    throw new Error 'FilteringSelect needs a FilteringSet' unless @set?
+
+    @el.html template @
+
+module.exports = FilteringSelect

app/controllers/image_switcher.coffee

@@ -0,0 +1,11 @@
+{Controller} = require 'spine'
+$ = require 'jqueryify'
+
+class ImageSwitcher extends Controller
+  events:
+    'click button[name="toggle"]': onClickToggle
+
+  onClickToggle: ({currentTarget}) =>
+    imgIndex = $(currentTarget).val()
+
+module.exports = ImageSwitcher

app/index.coffee

@@ -0,0 +1,8 @@
+require 'lib/setup'
+
+Classifier = require 'controllers/classifier'
+
+classifier = new Classifier
+classifier.el.appendTo 'body'
+
+module.exports = {classifier}

app/lib/animals.coffee

@@ -0,0 +1,48 @@
+FilteringSet = require 'models/filtering_set'
+
+animals = []
+
+animals.push
+  id: 'aardvark'
+  face: ['long', 'snout']
+  back: ['round']
+  coat: ['short']
+  frontLimbs: ['short']
+  backLimbs: ['short']
+  build: ['stocky']
+  horns: ['none']
+  ears: ['large']
+  tail: ['thin']
+  color: ['red', 'brown', 'gray']
+
+animals.push
+  id: 'batEaredFox'
+  face: ['short']
+  back: ['round']
+  frontChest: ['light']
+  ears: ['large']
+  tail: ['bushy']
+  color: ['red', 'gray']
+
+animals.push
+  id: 'cheetah'
+  face: ['short']
+  back: ['flat']
+  frontLimbs: ['thin']
+  backLimbs: ['thin']
+  feet: ['small']
+  pattern: ['spots']
+  build: ['lean']
+
+animals.push
+  id: 'dikDik'
+  face: ['long', 'snout']
+  frontChest: ['light']
+  build: ['small']
+  horns: ['small', 'backward']
+  ears: ['large']
+  eyes: ['large']
+  tail: ['short']
+  color: ['gray', 'brown']
+
+module.exports = new FilteringSet items: animals

app/lib/setup.coffee

@@ -0,0 +1,4 @@
+require 'json2ify'
+require 'es5-shimify'
+require 'jqueryify'
+require 'spine'

app/models/filtering_set.coffee

@@ -0,0 +1,24 @@
+class FilteringSet
+  items: null
+  matches: null
+
+  constructor: (params = {}) ->
+    @[property] = value for own property, value of params
+    @items ?= []
+
+    @filter()
+
+  filter: (given = {}) ->
+    @matches = for item in @items
+      mismatch = false
+      for feature, value of given
+        if value instanceof RegExp and typeof item[feature] is 'string'
+          mismatch = true unless value.test item[feature]
+        else if item[feature] instanceof Array
+          mismatch = true unless value in item[feature]
+        else
+          mismatch = true unless item[feature] is value
+      continue if mismatch
+      item
+
+module.exports = FilteringSet

app/translations/en_us.coffee

@@ -0,0 +1,8 @@
+module.exports =
+  navigation:
+    home: 'Home'
+    about: 'About'
+    classify: 'Classify'
+    profile: 'Profile'
+    discuss: 'Discuss'
+    blog: 'Blog'

app/views/classifier.eco

@@ -0,0 +1,3 @@
+<div class="image-switcher"></div>
+<div class="filtering-select"></div>
+<div class="select interface"></div>

app/views/filtering_select.eco

@@ -0,0 +1,13 @@
+<input type="text" value="" />
+<button>
+  <span class="possible-values"></span>
+  <span class="arrow">&darr;</span>
+</button>
+
+<div class="filtering-select-menu">
+  <% for item in @set.items: %>
+    <div data-item="<%= item.id %>">
+      <%- @itemTemplate item %>
+    </div>
+  <% end %>
+</div>

package.json

@@ -0,0 +1,13 @@
+{
+  "name": "serengeti",
+  "version": "0.0.1",
+  "dependencies": {
+    "serveup": "~0.0.5",
+    "hem": "~0.1.8",
+    "es5-shimify": "~0.0.1",
+    "json2ify": "~0.0.1",
+    "jqueryify": "~0.0.1",
+    "spine": "~1.0.7",
+    "nib": "~0.8.2"
+  }
+}

public/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Serengeti</title>
+    <link rel="stylesheet" href="/application.css" />
+  </head>
+
+  <body>
+    <p>Serengeti</p>
+    <script src="/application.js"></script>
+    <script type="text/javascript">
+      window.app = require('index');
+    </script>
+  </body>
+</html>

slug.json

@@ -0,0 +1,10 @@
+{
+  "dependencies": [
+    "es5-shimify",
+    "json2ify",
+    "jqueryify",
+    "spine"
+  ],
+
+  "libs": []
+}

test/public/index.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Jasmine Test Runner</title>
+  <link rel="stylesheet" type="text/css" href="/test/lib/jasmine.css">
+  <script type="text/javascript" src="/test/lib/jasmine.js"></script>
+  <script type="text/javascript" src="/test/lib/jasmine.html.js"></script>
+
+  <script src="/application.js" type="text/javascript" charset="utf-8"></script>
+  <script src="/test/specs.js" type="text/javascript" charset="utf-8"></script>
+  <script type="text/javascript" charset="utf-8">
+    for(var key in specs.modules) specs(key);
+  </script>
+</head>
+<body>
+  <script type="text/javascript">
+    jasmine.getEnv().addReporter(new jasmine.TrivialReporter());
+    window.onload = function(){
+      jasmine.getEnv().execute();
+    };
+  </script>
+</body>
+</html>