first commit

.gitignore

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

Procfile

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

app/controllers/currencies.coffee

@@ -0,0 +1,129 @@
+Spine   = require('spine')
+{Panel} = require('spine.mobile')
+Currency = require('models/currency')
+
+class CurrenciesList extends Panel
+  title: 'Currencies'
+
+  className:
+    'currencies list'
+
+  events:
+    'tap .content .item': 'click'
+
+  constructor: (@controller, @callback) ->
+    super()
+    @addButton('Back', @back)
+
+    Currency.bind('refresh change', @render)
+    @render()
+
+    @active(trans: 'right')
+
+  render: =>
+    items = Currency.all()
+    @html require('views/currency/item')(items)
+
+  click: (e) ->
+    item = $(e.currentTarget).item()
+    @callback?(item)
+    @back()
+
+  back: ->
+    @controller.active(trans: 'left')
+
+  activate: ->
+    super
+
+  # Cleanup panel once it's deactivated
+  deactivate: ->
+    super
+    @content.queueNext =>
+      @destroy()
+
+class Currencies extends Panel
+  className:
+    'currencies'
+
+  elements:
+    '.input':  'inputEl'
+    '.output': 'outputEl'
+
+  events:
+    'tap .pad div': 'enter'
+    'tap .pad .clear': 'clear'
+    'tap .pad .period': 'period'
+    'tap .input': 'changeFrom'
+    'tap .output': 'changeTo'
+
+  constructor: ->
+    super
+    @from = @to = Currency.default()
+
+    # Cancel scrolling on main view
+    @el.bind 'touchstart', (e) -> e.preventDefault()
+
+    @clear()
+    @active()
+
+    Currency.fetch()
+
+  rate: ->
+    @from.rate * (1 / @to.rate)
+
+  render: =>
+    # Calculate currency conversion
+    @output = @input and (@input * @rate()).toFixed(2) or 0
+    @html require('views/currency')(@)
+
+  enter: (e) ->
+    num = $(e.target).data('num')
+    return unless num?
+
+    return if @hasOverflow()
+
+    # Convert to string
+    num += ''
+
+    # Prefix with decimel
+    if @addPeriod
+      @addPeriod = false
+      num = ".#{num}"
+
+    # Simple way of combining numbers
+    @input = parseFloat(@input + num)
+    @render()
+
+  hasOverflow: ->
+    (@input + '').length > 10 or
+      (@output + '').length > 8
+
+  clear: ->
+    @input     = 0.0
+    @output    = 0.0
+    @addPeriod = false
+    @render()
+
+  period: ->
+    # Return if already has period
+    return if @input % 1 isnt 0
+
+    @addPeriod = true
+    @render()
+
+  changeFrom: ->
+    new CurrenciesList @, (res) => 
+      @from = res
+      @render()
+
+  changeTo: ->
+    new CurrenciesList @, (res) => 
+      @to = res
+      @render()
+
+  helper:
+    format: (num, addPeriod) ->
+      num = num.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",")
+      num + (addPeriod and '.' or '')
+
+module.exports = Currencies

app/index.coffee

@@ -0,0 +1,20 @@
+require('lib/setup')
+
+$          = jQuery
+Spine      = require('spine')
+{Stage}    = require('spine.mobile')
+Currencies = require('controllers/currencies')
+
+class App extends Stage.Global
+  constructor: ->
+    super
+    @currencies = new Currencies
+
+    $('body').bind 'click', (e) -> 
+      e.preventDefault()
+
+    $('body').bind 'shake', ->
+      if confirm('Reload?')
+        window.location.reload()
+
+module.exports = App

app/lib/setup.coffee

@@ -0,0 +1,15 @@
+require('json2ify')
+require('es5-shimify')
+require('jqueryify')
+require('gfx')
+
+require('spine')
+require('spine/lib/local')
+require('spine/lib/ajax')
+require('spine/lib/manager')
+require('spine/lib/route')
+require('spine/lib/tmpl')
+
+require('spine.mobile')
+
+require('lib/shake')

app/lib/shake.coffee

@@ -0,0 +1,24 @@
+$ = jQuery 
+
+$ ->
+  threshold = 20
+  x1 = y1 = z1 = x2 = y2 = z2 = 0
+
+  checkShake = (e) -> 
+    current = e.accelerationIncludingGravity
+
+    x1 = current.x
+    y1 = current.y
+    z1 = current.z
+
+  setInterval ->
+    change = Math.abs(x1-x2+y1-y2+z1-z2)
+
+    if change > threshold
+      $('body, window').trigger('shake')
+      x2 = x1
+      y2 = y1
+      z2 = z1
+  , 200
+
+  window.addEventListener 'devicemotion', checkShake, false

app/models/currency.coffee

@@ -0,0 +1,14 @@
+Spine = require('spine')
+$     = jQuery
+
+class Currency extends Spine.Model
+  @configure 'Currency', 'name', 'code', 'symbol', 'rate'
+
+  @default: -> 
+    new @(name: 'United States Dollar', code: 'USD', symbol: '$', rate: 1)
+
+  @endpoint: 'http://currency-proxy.herokuapp.com/currencies'
+  @fetch ->
+    $.getJSON(@endpoint, (res) => @refresh(res, clear: true))
+
+module.exports = Currency

app/views/currency/index.eco

@@ -0,0 +1,28 @@
+<section class="status">
+  <span><%= @from.code %> <em>→</em> <%= @to.code %></span>
+</section>
+
+<section class="input">
+  <h1><%= @helper.format(@input, @addPeriod) %></h1>
+  <h2><em><%= @from.symbol %></em> <%= @from.name %></h2>
+</section>
+
+<section class="output">
+  <h1><%= @helper.format(@output) %></h1>
+  <h2><em><%= @to.symbol %></em> <%= @to.name %></h2>
+</section>
+
+<article class="pad">
+  <div data-num="1">1</div>
+  <div data-num="2">2</div>
+  <div data-num="3">3</div>
+  <div data-num="0">0</div>
+  <div data-num="4">4</div>
+  <div data-num="5">5</div>
+  <div data-num="6">6</div>
+  <div class="period">.</div>
+  <div data-num="7">7</div>
+  <div data-num="8">8</div>
+  <div data-num="9">9</div>
+  <div class="clear">Clear</div>
+</article>

app/views/currency/item.jeco

@@ -0,0 +1,5 @@
+<div class="item">
+  <span><%= @name %></span>
+  <em><%= @symbol %></em>
+  <em>(<%= @code %>)</em>
+</div>

css/images.styl

@@ -0,0 +1,18 @@
+@media only screen and (-webkit-min-device-pixel-ratio:1)
+
+  .input, .output
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAPCAYAAADd/14OAAAAaUlEQVQokWNgwAE6OzsDgDgDiDn+//+PU5EDEDdAcQZWhUAJAyRFIByAoRCbIpA4ikIsihJgcnCFWBSBPYGiECiggU8RssIKNIUC6B6EKcRrLeluJBQ0GAqJDkd8ivHFtQfBuEZSjJJ6ALPvvW9ej7+LAAAAAElFTkSuQmCC')
+
+  .pad .clear
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAA8UlEQVR42u3VP0tCURiA8ROEtLQ0OAhGQ01tfgWb+wB+BgchBA2EVNwcXB38HG3t4oWLGOlUewpOQRLy+gxeuBw44XmhK8QZfsvLgQcO548RkaMI4RAO4b8LR1HkUsYEb5gdaIEBCtrwHdYQhS3qmnAJKwhsS3xbs09srFnHN3yND0f0HbeopmYxiuhZa598wnnEEIf71NpHTHEFgxO8aMJneIb8YoxLGJziHGavhh/f8AWGkAPMk3hKA6LZ6gq+jhHO4QGS9VYnupCsD1eiD8nqOrnj+gek7Re243pNXRhoYYFXz09ihJvwH4dwCP+/8A7n95F+p5lWNAAAAABJRU5ErkJggg==')
+
+@media only screen and (-webkit-min-device-pixel-ratio:2)
+
+  .input,
+  .output
+    background-size: 6px 8px
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAQAAACGG/bgAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAg5JREFUOMtjYMAK5AWzrKcn9hW0htbKM+ACzIzi7NbyRe5TsnpLW+NrTZYIPWHFqpCb2U+q1qEtraehq6G1tDZtif0TYSzKxFnsJOrsF2RMrG3v7uhoa25sWBH8VAKLQj++OuOuhAn13Y0dbe2dnY1dJRvdX4hgmiZaZ7QgZmJNe09HW3fjhIaG7CT/Dq07PJimGXXFTKgBm9Y+sX5BcbGvgoorzwlmTNNiJ9Z29Ha0djX1tLTl1fq5qzKw4DKtqbO1s7W3aUpdUaS1hig3AyNO0zobO1smlMyNzTIS5kAxi5fRH8W0juaOlklJS4xL+OSYkCOLzUqoxhBuWkNnc3fZhJQuy1o+NLdliRdptUVOqAWb1tzR2NE8MXmBaa2gLbonpjtOCeqp7OjraAG6rbWroje51aySF0tM9OX3lnTVdYKUNXd292ZNNcnnxJoE+op6y7rqiVA43WNKeE810COErM6SK9Jvi4YGDT7PyHNYidQYoQVPcpdVrQAWU9ECvKWjdVLiEoMSbjlG7MkLZipQ+YTCuYFZqsIs2BMszNS2zvbeuilFRb7WymiJAs3Uvo62rsaehrbsWl8syQwj4XZObMSacFGyQjWBrAA11aQraUJjdxOezAU1VarOdUHexPr2LrzZFVgAsPop1Lq1pffU4y0AwEUKp7VCkQfBIgUEhDjTTGfE9ue1BtaKQUQA61MYeCWsyZYAAAAASUVORK5CYII=')
+
+  .pad .clear
+    background-size: 30px 30px
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAMAAAANIilAAAAAMFBMVEUAAADMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMySLVSoAAAAD3RSTlMAECAwQFBgcICPn7/P3++kfFgMAAAArklEQVR42u2UwQ6EIAxEi7tWLSj//7fGC5M1UjZzNH0nEnyJTAckCIKXk7bcY00jt9Q+hXCBEm5j9eRSedl+vsxYQf7TNdF2UhvKy80V0ZaSDWS9uRfaEjZX/j4ORbFw5M/xPNIJbldOu1sIdQMrbp3UHZW5ZVS3JHNlZKTF/DZ2+cBgE6NCN6mSiFWmnrCZiwGbuZKwuccANv+G2Vjm7UV4+0jio7nLNkkQBC/kBCeMLotUD9YCAAAAAElFTkSuQmCC')

css/index.styl

@@ -0,0 +1,43 @@
+@import './mixin'
+
+body, html
+  height: 100%
+
+.viewport
+  position: relative
+
+  > *
+    position: absolute
+    left: 0
+    right: 0
+    top: 0
+    bottom: 0
+
+    &:not(.active)
+      display: none
+
+body.stage 
+  > header
+    position: absolute
+    left: 0
+    top: 0
+    right: 0
+
+  > .content
+    position: absolute
+    left: 0
+    right: 0
+    top: 0
+    bottom: 0
+
+.panel
+  vbox()
+
+  > .content
+    box-flex(1)
+
+    overflow: auto
+    -webkit-overflow-scrolling: touch
+
+@import './theme'
+@import './views/contacts'