tomify 0.0.0

data/app/assets/javascripts/tomify/dynamic/react/components/index.coffee

@@ -0,0 +1,87 @@
+Component.create "Index.Container",
+  componentWillInitialize: ->
+    @model = Model.findOrCreate @props.name
+    @store = Store.findOrCreate "#{@props.name}.Index"
+    @records = @store.findOrCreate "Records", []
+    @followStores.push records: @records
+    @follow @model.on "all", @modelAll
+    @follow @model.on "create", @modelCreate
+    @follow @model.on "update", @modelUpdate
+    @follow @model.on "destroy", @modelDestroy
+    @newForm = @props.newForm || @props.form.copy()
+    @editForm = @props.editForm || @props.form.copy()
+  componentDidMount: ->
+    @model.all()
+  modelAll: (response) ->
+    @records.set(response.data)
+    @setPage(1)
+  modelCreate: (response) ->
+    @model.all() if response.type == "success"
+  modelUpdate: (response) ->
+    @model.all() if response.type == "success"
+  modelDestroy: (response) ->
+    @model.all() if response.type == "danger"
+  setPage: (page) ->
+    @setState(page: 1, currentRecords: @state.records[(page*10 - 10)..page*10])
+  new: (e) ->
+    e.preventDefault()
+    @model.new()
+    false
+  edit: (id, e) ->
+    e.preventDefault()
+    @model.edit(id)
+    false
+  destroy: (id, e) ->
+    e.preventDefault()
+    @model.destroy(id).then (response) ->
+      message type: response.type, text: response.message
+    false
+  render: ->
+    <div>
+      <div className="row">
+        <div className="col-xs-12">
+          <div className="panel panel-default">
+            <div className="panel-heading">
+              <h4>
+                {@model.name.pluralize.titleize}
+                <a className="btn btn-primary btn-xs" href="#" onClick={@new}>New</a>
+              </h4>
+              <Pagination page="1" total={@state.records.length} setPage={@setPage} />
+            </div>
+            <div className="table-responsive">
+              <table className="table table-bordered table-hover">
+                <thead>
+                  <tr>
+                    {for field, i in @model.columns
+                      <th key={i}>{field.name.titleize}</th>
+                    }
+                  </tr>
+                </thead>
+                <tbody>
+                  {for record, i in @state.records
+                    <tr key={i}>
+                      {for field, j in @model.columns
+                        if field.name == "actions"
+                          <td key={j}>
+                            {[
+                              field.view && field.view(record)
+                              field.view && field.edit && " | "
+                              field.edit && <a key="edit" onClick={@edit.bind(null, record.id)} href="#">Edit</a>
+                              field.destroy && " | "
+                              field.destroy && <a key="destroy" onClick={@destroy.bind(null, record.id)} href="#" data-confirm="Are you sure you want to delete #{record.name}?">Delete</a>
+                            ]}
+                          </td>
+                        else
+                          <td key={j}>{field.value?(record) ? record[field.name]}</td>
+                      }
+                    </tr>
+                  }
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+      <New.Container name={@props.name} form={@newForm} />
+      <Edit.Container name={@props.name} form={@editForm} />
+    </div>

data/app/assets/javascripts/tomify/dynamic/react/components/layout/admin_navbar.coffee

@@ -0,0 +1,29 @@
+Component.create "Layout.AdminNavbar",
+  followStores: ["user", pages: "navbar.admin"]
+  componentWillInitialize: ->
+    env = Store.find "Env"
+    Store.create "Navbar.Admin", env.get().navbar.admin || []
+    @follow env.on "change", -> pages.set(env.get().navbar.admin)
+  render: ->
+    return <div /> unless @state.user.admin
+    <div className="brand-navbar navbar navbar-default center">
+      <div className="container-fluid">
+        <div className="navbar-header">
+          <a href="/admin" className="navbar-brand visible-xs-block">Admin</a>
+          <button className="navbar-toggle collapsed" data-toggle="collapse" data-target="#admin-navbar">
+            <span className="icon-bar" />
+            <span className="icon-bar" />
+            <span className="icon-bar" />
+          </button>
+        </div>
+        <div id="admin-navbar" className="navbar-collapse collapse">
+          <ul className="nav navbar-nav">
+            {for page in @state.pages
+              <li key={page.name}>
+                <a href="/#{page.path}">{page.name}</a>
+              </li>
+            }
+          </ul>
+        </div>
+      </div>
+    </div>

data/app/assets/javascripts/tomify/dynamic/react/components/layout/analytics.coffee

@@ -0,0 +1,34 @@
+Component.create "Layout.Analytics",
+  componentDidMount: ->
+    @google()
+    @itunes()
+  google: ->
+    return unless code = setting "google_analytics_code"
+
+    window.GoogleAnalyticsObject = "ga"
+    window.ga = (args...) -> window[window.GoogleAnalyticsObject] args...
+    window?[window.GoogleAnalyticsObject] ?= (args...) ->
+      api = window[window.GoogleAnalyticsObject]
+      (api.q or= []).push args
+      return
+    window.ga.l = new Date().getTime()
+    script = document.createElement "script"
+    script.type = "text/javascript"
+    script.src = "//www.google-analytics.com/analytics.js"
+    script.async = true
+    tag = document.getElementsByTagName("script")[0]
+    tag.parentNode.insertBefore script, tag
+
+    ga "create", code, "auto"
+    ga "send", "pageview"
+  itunes: ->
+    window._merchantSettings ?= []
+    window._merchantSettings.push ["AT", "1001lbag"]
+    script = document.createElement "script"
+    script.type = "text/javascript"
+    script.src = "//autolinkmaker.itunes.apple.com/js/itunes_autolinkmaker.js"
+    script.async = true
+    tag = document.getElementsByTagName("script")[0]
+    tag.parentNode.insertBefore script, tag
+  render: ->
+    <script />

data/app/assets/javascripts/tomify/dynamic/react/components/layout/footer.coffee

@@ -0,0 +1,11 @@
+Component.create "Layout.Footer",
+  render: ->
+    <footer>
+      <div className="container">
+        <div className="row tomify">
+          <div className="col-xs-12 text-center">
+            Website by <a href="http://www.tomify.me" target="_blank">Tomify</a>
+          </div>
+        </div>
+      </div>
+    </footer>

data/app/assets/javascripts/tomify/dynamic/react/components/layout/header.coffee

@@ -0,0 +1,28 @@
+Component.create "Layout.Header",
+  render: ->
+    image = setting "header_image"
+    text = setting "header_text"
+    return <div /> unless image && text
+
+    <div className="navbar navbar-default center header">
+      <div className="container-fluid">
+        <div className="row">
+          <div className="col-lg-8 col-lg-offset-2">
+            <div className="row">
+              <div className="col-sm-3">
+                <div className="navbar-header">
+                  <a href="/" class="navbar-brand">
+                    <img src={image.url} alt="Logo" />
+                  </a>
+                </div>
+              </div>
+              <div className="col-sm-9">
+                <div className="navbar-text">
+                  <h3>{text}</h3>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>

data/app/assets/javascripts/tomify/dynamic/react/components/layout/messages.coffee

@@ -0,0 +1,18 @@
+Component.create "Layout.Messages",
+  followStores: ["messages"]
+  componentWillInitialize: ->
+    @store = Store.create "Messages", window.env.messages
+    @follow @store.on "push", -> $("body").scrollTop(0)
+  remove: (i, e) ->
+    e.preventDefault()
+    @store.remove(i)
+    false
+  render: ->
+    <div>
+      {for message, i in @state.messages
+        <div key={i} className="alert alert-#{message.type} text-center">
+          {message.text}
+          <a className="btn btn-danger btn-xs pull-right" href="#" onClick={@remove.bind(null, i)}><i className="fa fa-close" /></a>
+        </div>
+      }
+    </div>

data/app/assets/javascripts/tomify/dynamic/react/components/layout/navbar.coffee

@@ -0,0 +1,6 @@
+Component.create "Layout.Navbar",
+  render: ->
+    <nav>
+      <Layout.AdminNavbar />
+      <Layout.PublicNavbar />
+    </nav>

data/app/assets/javascripts/tomify/dynamic/react/components/layout/public_navbar.coffee

@@ -0,0 +1,56 @@
+Component.create "Layout.PublicNavbar",
+  followStores: ["user", pages: "navbar.public"]
+  componentWillInitialize: ->
+    env = Store.find "Env"
+    Store.create "Navbar.Public", env.get().navbar.public || []
+    @follow env.on "change", -> pages.set(env.get().navbar.public)
+  logout: (e) ->
+    e.preventDefault()
+    Model.find("Public.Session").destroy().then (response) ->
+      window.location.replace "/" if response.type == "success"
+  link: (page) ->
+    <li key={page.name}>
+      <a href="/#{page.path}">{page.name}</a>
+    </li>
+  render: ->
+    root = @state.pages.find (page) -> page.root
+    <div className="navbar navbar-default center">
+      <div className="container-fluid">
+        <div className="navbar-header">
+          <a href="/" className="navbar-brand visible-xs-block">{root?.name || "Home"}</a>
+          <button className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
+            <span className="icon-bar" />
+            <span className="icon-bar" />
+            <span className="icon-bar" />
+          </button>
+        </div>
+        <div id="navbar" className="navbar-collapse collapse">
+          <ul className="nav navbar-nav">
+            {if @state.user.id
+              @link(name: "Profile", path: "user/edit")
+            else if setting "allow_signup"
+              @link(name: "Login", path: "session")
+            }
+            {for page in @state.pages when page.active
+              if page.children[0]
+                <li key={page.name} className="dropdown">
+                  <a href="#" className="dropdown-toggle" data-toggle="dropdown">
+                    {page.name} <i className="fa fa-caret-down" />
+                  </a>
+                  <ul className="dropdown-menu">
+                    {@link(page)}
+                    {@link(child) for child in page.children}
+                  </ul>
+                </li>
+              else
+                @link(page)
+            }
+            {if @state.user.id
+              <li>
+                <a href="#" onClick={@logout}>Logout</a>
+              </li>
+            }
+          </ul>
+        </div>
+      </div>
+    </div>

data/app/assets/javascripts/tomify/dynamic/react/components/new.coffee

@@ -0,0 +1,48 @@
+Component.create "New.Container",
+  componentWillInitialize: ->
+    @model = Model.findOrCreate @props.name
+    @store = Store.findOrCreate "#{@props.name}.New"
+    @form = @props.form.setComponent @
+    @follow @model.on "new", @modelNew
+    @follow @model.on "create", @modelCreate
+    @follow @model.on "edit", @modelEdit
+  modelNew: ->
+    @form.record.set({})
+    @form.setDefaultValues()
+    @store.merge(show: true)
+  modelCreate: (response) ->
+    message type: response.type, text: response.message
+    @store.merge(show: false) if response.type == "success"
+  modelEdit: ->
+    @store.merge(show: false)
+  submit: (e) ->
+    e.preventDefault()
+    if @form.changes.empty()
+      message type: "warning", text: "#{@model.name.titleize} was not created"
+    else
+      @model.create @form.changes.get()
+    false
+  cancel: (e) ->
+    e.preventDefault()
+    @store.merge(show: false)
+    false
+  render: ->
+    return <div /> unless @state.store.show
+    <div className="row">
+      <div className="col-xs-12">
+        <div className="panel panel-default">
+          <div className="panel-heading">
+            <h4>New {@model.name.titleize}</h4>
+            <a className="btn btn-danger pull-right" href="#" onClick={@cancel}><i className="fa fa-close" /></a>
+          </div>
+          <div className="panel-body">
+            <form className="form-horizontal" onSubmit={@submit}>
+              {@form.render()}
+              <div className="col-sm-offset-2 col-sm-10">
+                <input type="submit" name="commit" value="Create #{@model.name.titleize}" className="btn btn-primary" />
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>

data/app/assets/javascripts/tomify/dynamic/react/components/pagination.coffee

@@ -0,0 +1,29 @@
+Component.create "Pagination",
+  setPage: (page, e) ->
+    e.preventDefault()
+    @props.setPage(page)
+    false
+  render: ->
+    first = 1
+    prev = @props.page - 1
+    next = @props.page + 1
+    last = Math.ceil(@props.total / 10)
+    prevDisabled = first > prev
+    nextDisabled = next > last
+    <ul className="pagination">
+      <li className="pagination-first#{' disabled' if prevDisabled}">
+        <a href="#" onClick={@setPage.bind(null, first)} className="fa fa-angle-double-left" />
+      </li>
+      <li className="pagination-prev#{' disabled' if prevDisabled}">
+        <a href="#" onClick={@setPage.bind(null, prev)} className="fa fa-angle-left" />
+      </li>
+      <li className="pagination-link active">
+        <a href="#" onClick={@setPage.bind(null, @props.page)}>{@props.page}</a>
+      </li>
+      <li className="pagination-next#{' disabled' if nextDisabled}">
+        <a href="#" onClick={@setPage.bind(null, next)} className="fa fa-angle-right" />
+      </li>
+      <li className="pagination-last#{' disabled' if nextDisabled}">
+        <a href="#" onClick={@setPage.bind(null, @props.total)} className="fa fa-angle-double-right" />
+      </li>
+    </ul>

data/app/assets/javascripts/tomify/dynamic/react/components/public/passwords/new.coffee

@@ -0,0 +1,38 @@
+Model.create "Public.Password", path: "password"
+
+form = new Form
+form.add "email", "email"
+
+Component.create "Public.Passwords.New",
+  componentWillInitialize: ->
+    @model = Model.find "Public.Password"
+    @store = Store.findOrCreate "Public.Passwords.New"
+    @form = form.setComponent @
+    @follow @model.on "create", @modelCreate
+  modelCreate: (response) ->
+    message type: response.type, text: response.message
+  submit: (e) ->
+    e.preventDefault()
+    if @form.changes.empty()
+      message type: "warning", text: "You shall not pass!"
+    else
+      @model.create @form.changes.get()
+    false
+  newSession: (e) ->
+    e.preventDefault()
+    Model.findOrCreate("Public.Session").new()
+  render: ->
+    <div>
+      <h3>Forgot Password</h3>
+      <form onSubmit={@submit}>
+        {@form.render()}
+        <div className="form-group">
+          <input type="submit" name="commit" value="Submit" className="btn btn-primary" />
+        </div>
+        <div className="form-group">
+          <small>
+            <a href="#" onClick={@newSession}>Back</a>
+          </small>
+        </div>
+      </form>
+    </div>

data/app/assets/javascripts/tomify/dynamic/react/components/public/sessions/new.coffee

@@ -0,0 +1,40 @@
+Model.create "Public.Session", path: "session"
+
+form = new Form
+form.add "email", "email"
+form.add "password", "password"
+
+Component.create "Public.Sessions.New",
+  componentWillInitialize: ->
+    @model = Model.find "Public.Session"
+    @store = Store.findOrCreate "Public.Sessions.New"
+    @form = form.setComponent @
+    @follow @model.on "create", @modelCreate
+  modelCreate: (response) ->
+    return window.location.replace "/" if response.type == "success"
+    message type: response.type, text: response.message
+  submit: (e) ->
+    e.preventDefault()
+    if @form.changes.empty()
+      message type: "warning", text: "You shall not pass!"
+    else
+      @model.create @form.changes.get()
+    false
+  newPassword: (e) ->
+    e.preventDefault()
+    Model.findOrCreate("Public.Password").new()
+  render: ->
+    <div>
+      <h3>Sign In</h3>
+      <form onSubmit={@submit}>
+        {@form.render()}
+        <div className="form-group">
+          <input type="submit" name="commit" value="Sign In" className="btn btn-primary" />
+        </div>
+        <div className="form-group">
+          <small>
+            <a href="#" onClick={@newPassword}>Forgot Password?</a>
+          </small>
+        </div>
+      </form>
+    </div>

data/app/assets/javascripts/tomify/dynamic/react/components/public/sessions/show.coffee

@@ -0,0 +1,35 @@
+Component.create "Public.Sessions.Show",
+  getInitialState: ->
+    { forgotPassword: false }
+  componentWillInitialize: ->
+    @follow Model.find("Public.Session").on "new", @newSession
+    @follow Model.find("Public.Password").on "new", @newPassword
+  newSession: ->
+    @setState(newPassword: false)
+  newPassword: ->
+    @setState(newPassword: true)
+  render: ->
+    <div className="container-fluid">
+      <div className="row text-center">
+        {if @state.newPassword
+          <div className="col-md-4 col-md-offset-4">
+            <Public.Passwords.New />
+          </div>
+        else if setting "allow_signup"
+          <div className="col-md-8 col-md-offset-2">
+            <div className="row">
+              <div className="col-md-6">
+                <Public.Sessions.New />
+              </div>
+              <div className="col-md-6">
+                <Public.Users.New />
+              </div>
+            </div>
+          </div>
+        else
+          <div className="col-md-4 col-md-offset-4">
+            <Public.Sessions.New />
+          </div>
+        }
+      </div>
+    </div>

data/app/assets/javascripts/tomify/dynamic/react/components/public/users/edit.coffee

@@ -0,0 +1,42 @@
+form = new Form
+form.add "email", "email"
+form.add "first_name", "text"
+form.add "last_name", "text"
+form.add "password", "password"
+form.add "password_confirmation", "password"
+
+Component.create "Public.Users.Edit",
+  componentWillInitialize: ->
+    @model = Model.find "Public.User"
+    @store = Store.findOrCreate "Public.Users.Edit"
+    @form = form.setComponent @
+    @follow @model.on "update", @modelUpdate
+    @follow Store.find("User").on "change", @userChange
+    @userChange()
+  userChange: ->
+    @form.record.set Store.find("User").get()
+    @form.setDefaultValues()
+  modelUpdate: (response) ->
+    message type: response.type, text: response.message
+    Store.find("User").merge @form.changes.get() if response.type == "success"
+  submit: (e) ->
+    e.preventDefault()
+    if @form.changes.empty()
+      message type: "warning", text: "Profile was not updated"
+    else
+      @model.update @form.changes.get()
+    false
+  render: ->
+    <div className="container-fluid">
+      <div className="row text-center">
+        <div className="col-md-4 col-md-offset-4">
+          <h3>Edit Profile</h3>
+          <form onSubmit={@submit}>
+            {@form.render()}
+            <div className="form-group">
+              <input type="submit" name="commit" value="Save" className="btn btn-primary" />
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>

data/app/assets/javascripts/tomify/dynamic/react/components/public/users/new.coffee

@@ -0,0 +1,35 @@
+Model.create "Public.User", path: "user"
+
+form = new Form
+form.add "email", "email"
+form.add "first_name", "text"
+form.add "last_name", "text"
+form.add "password", "password"
+form.add "password_confirmation", "password"
+
+Component.create "Public.Users.New",
+  componentWillInitialize: ->
+    @model = Model.find "Public.User"
+    @store = Store.findOrCreate "Public.Users.New"
+    @form = form.setComponent @
+    @follow @model.on "create", @modelCreate
+  modelCreate: (response) ->
+    return window.location.replace "/" if response.type == "success"
+    message type: response.type, text: response.message
+  submit: (e) ->
+    e.preventDefault()
+    if @form.changes.empty()
+      message type: "warning", text: "You shall not pass!"
+    else
+      @model.create @form.changes.get()
+    false
+  render: ->
+    <div>
+      <h3>Sign Up</h3>
+      <form onSubmit={@submit}>
+        {@form.render()}
+        <div className="form-group">
+          <input type="submit" name="commit" value="Sign Up" className="btn btn-primary" />
+        </div>
+      </form>
+    </div>

data/app/assets/javascripts/tomify/dynamic/react/mixins/follow.coffee

@@ -0,0 +1,51 @@
+@FollowMixin = {
+  getInitialSetup: ->
+    @followModels ?= []
+    @followStores ?= []
+  getInitialState: ->
+    @events ?= []
+    @setupStores()
+    @setupModels()
+    @stores["store"] = @store if @store
+    state = {}
+    state[key] = store.get() for key, store of @stores
+    state
+  componentDidMount: ->
+    context = @
+    for key, store of @stores
+      do (key, store) ->
+        callback = ->
+          state = {}
+          state[key] = store.get()
+          context.setState(state)
+        context.events.push store.on("change", callback)
+    model.all() for key, model in @models when !model.requested("all")
+  componentWillUnmount: ->
+    event.off() for event in @events
+  follow: (event) ->
+    @events ?= []
+    @events.push(event)
+  setupStores: ->
+    @stores = @convertToHash(@followStores?() || @followStores || [])
+    for key, value of @stores when not (value instanceof Store)
+      store = @stores[key.lowercase] = Store.find(value.capitalize)
+      throw "Component: Invalid Store (#{value.capitalize})" unless store?
+  setupModels: ->
+    @models = @convertToHash(@followModels?() || @followModels || [])
+    for key, value of @models when not (value instanceof Store)
+      store = @stores[key.lowercase] = @store.findOrCreate value.capitalize, []
+      model = @models[key.lowercase] = Model.findOrCreate(value)
+      context = @
+      do (context, store) ->
+        context.follow model.on "all", (response) -> store.set(response.data)
+  convertToHash: (object) ->
+    return object unless object instanceof Array
+    hash = {}
+    for item in object
+      if item instanceof Object
+        key = Object.keys(item)[0]
+        hash[key] = item[key]
+      else
+        hash[item] = item
+    hash
+}

data/app/assets/javascripts/tomify/dynamic/react/mixins/will-initialize.coffee

@@ -0,0 +1,7 @@
+@WillInitializeMixin = {
+  getInitialState: ->
+    @getInitialSetup?()
+    @componentWillInitialize?()
+
+    {}
+}

data/app/assets/javascripts/tomify/dynamic/react/mount.coffee

@@ -0,0 +1,9 @@
+@reactNodes = []
+
+$ ->
+  $(".react-component").each ->
+    reactNodes.push(@)
+    react = $(@).data("react")
+    component = Component.find(react.component)
+    props = JSON.parse(react.props) if react.props
+    ReactDOM.render(React.createElement(component, props), @)

data/app/assets/javascripts/tomify/turbolinks/compatibility.coffee

@@ -0,0 +1,29 @@
+# From https://github.com/turbolinks/turbolinks/blob/master/src/turbolinks/compatibility.coffee
+{defer, dispatch} = Turbolinks
+
+handleEvent = (eventName, handler) ->
+  document.addEventListener(eventName, handler, false)
+
+translateEvent = ({from, to}) ->
+  handler = (event) ->
+    event = dispatch(to, target: event.target, cancelable: event.cancelable, data: event.data)
+    event.preventDefault() if event.defaultPrevented
+  handleEvent(from, handler)
+
+translateEvent from: "turbolinks:click", to: "page:before-change"
+translateEvent from: "turbolinks:request-start", to: "page:fetch"
+translateEvent from: "turbolinks:request-end", to: "page:receive"
+translateEvent from: "turbolinks:before-cache", to: "page:before-unload"
+translateEvent from: "turbolinks:render", to: "page:update"
+translateEvent from: "turbolinks:load", to: "page:change"
+translateEvent from: "turbolinks:load", to: "page:update"
+
+loaded = false
+handleEvent "DOMContentLoaded", ->
+  defer -> loaded = true
+handleEvent "turbolinks:load", ->
+  dispatch("page:load") if loaded
+
+jQuery?(document).on "ajaxSuccess", (event, xhr, settings) ->
+  if jQuery.trim(xhr.responseText).length > 0
+    dispatch("page:update")

data/app/assets/javascripts/tomify/turbolinks/react.coffee

@@ -0,0 +1,5 @@
+@reactNodes = []
+
+$(document).on "turbolinks:before-render", ->
+  ReactDOM.unmountComponentAtNode(node) for node in window.reactNodes
+  window.reactNodes = []