spa.js Demo

<!DOCTYPE html>
<html>
  <head>
    <link data-require="bootstrap@3.0.0" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
    <link rel="stylesheet" href="styles/app.css" />
    <link rel="stylesheet" href="styles/xcharts.css" />
    <script src="https://dl.dropboxusercontent.com/u/26906414/cdn/js/raphael.2.1.0.min.js"></script>
    <script src="https://dl.dropboxusercontent.com/u/26906414/cdn/js/justgage.1.0.1.min.js"></script>  
    <script data-main="scripts/bootstrap" data-require="require.js@2.1.4" data-semver="2.1.4" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.4/require.js"></script>
  </head>

  <body>
    <div class="navbar navbar-inverse navbar-static-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Dashboard</a>
        </div>
        <div class="collapse navbar-collapse">
          <ul id="app-nav" class="nav navbar-nav pull-right">
          </ul>
        </div>
      </div>
    </div>
    
    <!-- App Container -->
    <div class="container">
      <div class="starter-template jumbotron">
        <h1>spa starter template</h1>
        <p class="lead">Use this document as a way to quickly start any new project.</p>
      </div>
      
      <!-- App root element that all modules get injected to. -->
      <div id="app"></div>
      
      
      <hr/>
      <footer>
        <p>Created by <a href="http://jonniespratley.me" target="_blank">Jonnie Spratley</a></p>
      </footer>
    </div>
  </body>

</html>

define ['sandbox'], (Sandbox) ->
  
  # Define options for the application
  options = 
    el: '#app'
    modules: [
      'modules/module_1',
      'modules/module_2'
    ]
    
  # Generally you shouldn't do this
  window.app = app = new Sandbox(options)
  console.log(app)

/* Styles go here */

.panel {
  margin: 15px 0; 
}
footer a{
  color: #777;
}
footer{
  color: #777;
  text-align:center;
  font-size: 10px;
}

## Create Class





# Wrap the module in define() + anon function for RequireJS
define ["colt", "mustache"], (Colt, Mustache) ->
  module_manager =
    
    # Specify path to dependencies using RequireJS convention, base path
    dependencies:
      some_utility: "utils/some_utility"

    
    # Bind events
    events:
      "click .something": "doSomething"

    
    # Sets the routes in which this module should load
    routes:
      "": "renderModuleManager"
      route_to_module: "renderModuleManager"

    # Handles rendering of the module
    renderModuleManager: ->
      
      # Setup data for template
      data =
        title: @mid
        content: "I am the main module that will invoke methods on all other modules."

      console.log @
      
      #Build template
      tmpl = @template
      html = Mustache.render(tmpl, data)
      elem = document.querySelectorAll("[data-view=\"" + @mid + "\"]")
      
      #Inject template
      elem[0].innerHTML = html
      elem[0].style.display = "block"
      
      Colt.delegateEvents @events, @

    # Example of a method of the module object
    doSomething: (e) ->
      self = @
      # Console logs the current module scope
      console.log this, e


      #Access the module by name
      Colt.access "module_1", (scope) ->
        console.log scope
        self.some_utility.changeColor('module_1', 'primary')
        
      
      
  
  # Return the module object
  module_manager

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">{{title}}</h3>
  </div>
  <div class="panel-body">
    {{content}}
  </div>
  <div class="panel-footer">
    <button class="something" class="btn">Change Module 1 Color</button>
  </div>
</div>

# Wrap the module in define() + anon function for RequireJS
define ['jquery'], ($) ->
  some_utility = 
    
    log: (what) ->
      console.log what
    
    
    # I will change the color of the module specified
    changeColor: (module, color) ->
      $("##{module}").find('.panel').toggleClass("panel-#{color}")
      console.log "Change #{module} to color #{color}"
    
    createGauge: (opts) ->
      new JustGage(
        id: opts.id
        value: opts.value, 
        min: opts.min
        max: opts.max
        levelColorsGradient: false
        label: opts.label
        title: opts.title
      )
    
  # Return the module object
  some_utility

# Wrap the module in define() + anon function for RequireJS
define ['sandbox', 'models/chart', 'd3', 'xcharts'], (Sandbox, model, d3, xChart) ->
  
  
  
  #Module definition
  module_2 =
    
    model: model
    
    # Specify path to dependencies using RequireJS convention, base path
    dependencies:
      utils: "utils/some_utility"

    # Bind events
    events:
      "click .something": "doSomething"

    
    # Sets the routes in which this module should load
    routes:
      "": "renderModule2"
      route_to_module: "renderModule2"

    
    # Handles rendering of the module
    renderModule2: ->
      console.log @
      
      @model.data.content = "I am #{@mid}, I can talk to other modules by using Colt.access( module_name );"
      
      #Build template
      html = Sandbox.template.render(@template, @model.data)
      @$el.html(html).fadeIn()
      Sandbox.mvc.delegateEvents @events, @
    
    # Example of a method of the module object
    doSomething: (e) ->
      # Console logs the current module scope
      console.log e
      
      #Access the module by name
      Sandbox.mvc.access "module_1", (scope) ->
        console.log scope
        scope.update()
        #alert scope.mid
        


  
  # Return the module object
  module_2

# Wrap the module in define() + anon function for RequireJS
define ["colt", "mustache"], (Colt, Mustache) ->
  module_3 =
    
    # Specify path to dependencies using RequireJS convention, base path
    dependencies:
      some_utility: "utils/some_utility"

    
    # Bind events
    events:
      "click .something": "doSomething"

    
    # Sets the routes in which this module should load
    routes:
      "": "renderModule3"
      module3: "renderModule3"

    
    # Handles rendering of the module
    renderModule3: ->
      
      # Setup data for template
      data =
        title: @mid
        content: "I am #{@mid}, I can talk to other modules by using Colt.access( module_name );"

      console.log @
      
      #Build template
      tmpl = @template
      html = Mustache.render(tmpl, data)
      elem = document.querySelectorAll("[data-view=\"" + @mid + "\"]")
      
      #Inject template
      elem[0].innerHTML = html
      elem[0].style.display = "block"
      
      Colt.delegateEvents @events, @

    
    # Example of a method of the module object
    doSomething: (e) ->
      
      # Console logs the current module scope
      console.log this, e
      Colt.navigate('module3')
      self = @
      Colt.access "module_2", (scope) ->
        console.log scope
        self.some_utility.changeColor('module_2', 'success')

  
  # Return the module object
  module_3

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">{{title}}</h3>
  </div>
  <div class="panel-body">
    {{content}}
  </div>
  <div class="panel-footer">
    <button class="btn something">Click me</button> 
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">{{title}}</h3>
  </div>
  <div class="panel-body">
    {{content}}
    
  </div>
  <div class="panel-footer">
   <button class="btn something">Click me</button> 
  </div>
</div>

# Wrap the module in define() + anon function for RequireJS
define ['sandbox', 'models/module'], (Sandbox, model) ->
  
  
  
  #Module definition
  module_1 =
    created: new Date().toString(),
    model: model
    
    # Specify path to dependencies using RequireJS convention, base path
    dependencies:
      utlis: "utils/some_utility"

    # Bind events
    events:
      "click .panel-heading": "doSomething"

    
    # Sets the routes in which this module should load
    routes:
      #Display on home page
      "": "renderModule1"
      #Display on this route
      route_to_module: "renderModule1"
      
      #Display on this route also
      'module1': 'renderModule1'

    
    # Handles rendering of the module
    renderModule1: ->
      console.log @
      @created = new Date().toString()
      @model.data.content = "I am #{@mid}, I was created #{@created}."
      
      #Build template
      html = Sandbox.template.render(@template, @model.data)
      @$el.html(html).fadeIn()
      @update()
      
      
      Sandbox.mvc.delegateEvents @events, @

    
    # Example of a method of the module object
    doSomething: (e) ->
      # Console logs the current module scope
      console.log e
      Sandbox.mvc.navigate('module1')
      
      #Access the module by name
      Sandbox.mvc.access "module_2", (scope) ->
        console.log scope
        alert scope.mid
    
    update: (opts) ->
      #getRandomInt(35, 98)
      @utlis.createGauge(
        id: 'module_1_gauge'
        title: 'My Temp'
        max: 500
        min: 0
        value: getRandomInt(55, 198)
        label: 'Average'
      )



  
  # Return the module object
  module_1

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">{{title}}</h3>
  </div>
  <div class="panel-body">
    {{content}}
    <div id="module_1_gauge" style="height:200px"></div>
  </div>
  <div class="panel-footer">
 <button class="btn something">Click me</button> 
  </div>
</div>

define ['sandbox'], (Sandbox) ->
  ModuleModel = Sandbox.mvc.model(
    name: 'module'
    data: 
      title: 'Module Title'
      content: 'The description'
    url: '/api/v2/modules'
    onchange: (data) ->
      console.log('onchange', data)
    onsync: (data) ->
      console.log('onsync', data)
  )

define ['colt', 'jquery', 'mustache'], (Colt, $, Mustache) ->
  class Sandbox
    @dom = $
    @mvc = Colt
    constructor: (@options) ->
      console.log('sandbox', @options, @mvc, Colt);
      $(document).ready(->
        Colt.modules = @options.modules
        Colt.init(@options.modules)  
      )
    
    
    
    
    
    template:
      render: (data, html) ->
        return Mustache.to_html(data, html);
    setup: () ->
      self = @
      @dom.each(@mvc.modules, (i, o ) =>
       console.log o
       name = o.split('/')
       el = self.dom('<div/>').attr('data-view', name[1] )
       self.dom(@options.el).addClass('row').append(el)
       navEl = self.dom('<a/>').attr('href', '').html(name[1])
       self.dom('#app-nav').append('<li/>');
      )

define ['sandbox'], (Sandbox) ->
  ModuleModel = Sandbox.mvc.model(
    name: 'module'
    data:
      title: 'Chart'
      xScale: "time"
      yScale: "linear"
      type: "line"
      main: [
        data: [
          x: "2013-11-01"
          y: 4
        ,
          x: "2013-11-02"
          y: 8
        ,
          x: "2013-11-03"
          y: -12
        ,        
          x: "2013-11-04"
          y: 15
        ,
          x: "2013-11-05"
          y: 18
        ,
          x: "2013-11-06"
          y: 20

        ]
      ]
    url: '/api/v2/modules'
    onchange: (data) ->
      console.log('onchange', data)
    onsync: (data) ->
      console.log('onsync', data)
  )


.color9 .line
{
	stroke: #0e2e42;
}
.color9 .line .fill
{
	pointer-events: none;
}
.color9 rect,.color9 circle
{
	fill: #0e2e42;
}
.color9 .fill
{
	fill: rgba(14,46,66,0.1);
}
.color9.comp .line
{
	stroke: #2477ab;
}
.color9.comp rect
{
	fill: #2477ab;
}
.color9.comp .fill
{
	display: none;
}
.color9.comp circle,.color9.comp .pointer
{
	fill: #2477ab;
}
.color9.comp.lineshade .fill,.color9.comp.lineshadeup .fill
{
	display: block;
	fill: rgba(14,46,66,0.1);
}
.color8 .line
{
	stroke: #2eb9b4;
}
.color8 .line .fill
{
	pointer-events: none;
}
.color8 rect,.color8 circle
{
	fill: #2eb9b4;
}
.color8 .fill
{
	fill: rgba(46,185,180,0.1);
}
.color8.comp .line
{
	stroke: #86e1de;
}
.color8.comp rect
{
	fill: #86e1de;
}
.color8.comp .fill
{
	display: none;
}
.color8.comp circle,.color8.comp .pointer
{
	fill: #86e1de;
}
.color8.comp.lineshade .fill,.color8.comp.lineshadeup .fill
{
	display: block;
	fill: rgba(46,185,180,0.1);
}
.color7 .line
{
	stroke: #754c24;
}
.color7 .line .fill
{
	pointer-events: none;
}
.color7 rect,.color7 circle
{
	fill: #754c24;
}
.color7 .fill
{
	fill: rgba(117,76,36,0.1);
}
.color7.comp .line
{
	stroke: #c98c50;
}
.color7.comp rect
{
	fill: #c98c50;
}
.color7.comp .fill
{
	display: none;
}
.color7.comp circle,.color7.comp .pointer
{
	fill: #c98c50;
}
.color7.comp.lineshade .fill,.color7.comp.lineshadeup .fill
{
	display: block;
	fill: rgba(117,76,36,0.1);
}
.color6 .line
{
	stroke: #d9ce00;
}
.color6 .line .fill
{
	pointer-events: none;
}
.color6 rect,.color6 circle
{
	fill: #d9ce00;
}
.color6 .fill
{
	fill: rgba(217,206,0,0.1);
}
.color6.comp .line
{
	stroke: #fff75a;
}
.color6.comp rect
{
	fill: #fff75a;
}
.color6.comp .fill
{
	display: none;
}
.color6.comp circle,.color6.comp .pointer
{
	fill: #fff75a;
}
.color6.comp.lineshade .fill,.color6.comp.lineshadeup .fill
{
	display: block;
	fill: rgba(217,206,0,0.1);
}
.color5 .line
{
	stroke: #ce1797;
}
.color5 .line .fill
{
	pointer-events: none;
}
.color5 rect,.color5 circle
{
	fill: #ce1797;
}
.color5 .fill
{
	fill: rgba(206,23,151,0.1);
}
.color5.comp .line
{
	stroke: #f075cb;
}
.color5.comp rect
{
	fill: #f075cb;
}
.color5.comp .fill
{
	display: none;
}
.color5.comp circle,.color5.comp .pointer
{
	fill: #f075cb;
}
.color5.comp.lineshade .fill,.color5.comp.lineshadeup .fill
{
	display: block;
	fill: rgba(206,23,151,0.1);
}
.color4 .line
{
	stroke: #672d8b;
}
.color4 .line .fill
{
	pointer-events: none;
}
.color4 rect,.color4 circle
{
	fill: #672d8b;
}
.color4 .fill
{
	fill: rgba(103,45,139,0.1);
}
.color4.comp .line
{
	stroke: #a869ce;
}
.color4.comp rect
{
	fill: #a869ce;
}
.color4.comp .fill
{
	display: none;
}
.color4.comp circle,.color4.comp .pointer
{
	fill: #a869ce;
}
.color4.comp.lineshade .fill,.color4.comp.lineshadeup .fill
{
	display: block;
	fill: rgba(103,45,139,0.1);
}
.color3 .line
{
	stroke: #c6080d;
}
.color3 .line .fill
{
	pointer-events: none;
}
.color3 rect,.color3 circle
{
	fill: #c6080d;
}
.color3 .fill
{
	fill: rgba(198,8,13,0.1);
}
.color3.comp .line
{
	stroke: #f8555a;
}
.color3.comp rect
{
	fill: #f8555a;
}
.color3.comp .fill
{
	display: none;
}
.color3.comp circle,.color3.comp .pointer
{
	fill: #f8555a;
}
.color3.comp.lineshade .fill,.color3.comp.lineshadeup .fill
{
	display: block;
	fill: rgba(198,8,13,0.1);
}
.color2 .line
{
	stroke: #f26522;
}
.color2 .line .fill
{
	pointer-events: none;
}
.color2 rect,.color2 circle
{
	fill: #f26522;
}
.color2 .fill
{
	fill: rgba(242,101,34,0.1);
}
.color2.comp .line
{
	stroke: #f9b99a;
}
.color2.comp rect
{
	fill: #f9b99a;
}
.color2.comp .fill
{
	display: none;
}
.color2.comp circle,.color2.comp .pointer
{
	fill: #f9b99a;
}
.color2.comp.lineshade .fill,.color2.comp.lineshadeup .fill
{
	display: block;
	fill: rgba(242,101,34,0.1);
}
.color1 .line
{
	stroke: #4da944;
}
.color1 .line .fill
{
	pointer-events: none;
}
.color1 rect,.color1 circle
{
	fill: #4da944;
}
.color1 .fill
{
	fill: rgba(77,169,68,0.1);
}
.color1.comp .line
{
	stroke: #9dd597;
}
.color1.comp rect
{
	fill: #9dd597;
}
.color1.comp .fill
{
	display: none;
}
.color1.comp circle,.color1.comp .pointer
{
	fill: #9dd597;
}
.color1.comp.lineshade .fill,.color1.comp.lineshadeup .fill
{
	display: block;
	fill: rgba(77,169,68,0.1);
}
.color0 .line
{
	stroke: #3880aa;
}
.color0 .line .fill
{
	pointer-events: none;
}
.color0 rect,.color0 circle
{
	fill: #3880aa;
}
.color0 .fill
{
	fill: rgba(56,128,170,0.1);
}
.color0.comp .line
{
	stroke: #89bbd8;
}
.color0.comp rect
{
	fill: #89bbd8;
}
.color0.comp .fill
{
	display: none;
}
.color0.comp circle,.color0.comp .pointer
{
	fill: #89bbd8;
}
.color0.comp.lineshade .fill,.color0.comp.lineshadeup .fill
{
	display: block;
	fill: rgba(56,128,170,0.1);
}
.line
{
	fill: none;
	stroke-width: 3px;
}
.fill
{
	stroke-width: 0;
}
circle
{
	stroke: #FFF;
	stroke-width: 3px;
}
.axis .domain
{
	fill: none;
}
.axis .tick line
{
	stroke: #f1f5f7;
	stroke-width: 1px;
}
.axis text
{
	fill: #7e97a6;
	font-family: Helvetica,Arial,Verdana,sans-serif;
	font-size: 12px;
}

# RequireJS configuration - Wire up names to dependencies to load.
require.config
  # Base path for scripts
  baseUrl: './'
  paths:
    colt: 'https://dl.dropboxusercontent.com/u/26906414/cdn/bower_components/colt.min'
    mustache: '//cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache'
    bootstrap: '//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min'
    jquery: '//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min'
    angular: '//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min'
    xcharts: 'https://dl.dropboxusercontent.com/u/26906414/cdn/js/xcharts.min'
    d3: 'https://dl.dropboxusercontent.com/u/26906414/cdn/js/d3.min'
    
    # Named references to modules
    app: 'scripts/app'
    sandbox: 'scripts/sandbox'

#Load the app
requirejs(['app'])