luca 0.9.8 → 0.9.9

data/site/source/app/assets/javascripts/docs/templates/examples_browser/overview.jst.ejs

@@ -0,0 +1,4 @@
+<h3>Luca Component Examples</h3>
+<p>Here is a collection of components developed using the Luca framework.  They make use of the Github API as their data source, and show off some of the neat things you can do with the components you develop.</p>
+<p>For each example, you can see the component in action as it is used, view the source code for the component, and see the documentation that gets generated from your component definition files.</p>
+<p>The first example is the <a href="#examples/api_browser">API Browser</a> which is a simple component that allows you to view the formatted JSON output from an API endpoint that you enter. Use the tabs to the left to browse through the examples.</p>

data/site/source/app/assets/javascripts/docs/templates/examples_browser/selector.jst.ejs

@@ -0,0 +1,11 @@
+<ul class="panel-selector nav nav-pills">
+  <li class="active component">
+    <a class="link" data-index=0 data-navigate-to="#examples/<%= example_name %>/component">Component</a>
+  </li>
+  <li class="source">
+    <a class="link" data-index=1 data-navigate-to="#examples/<%= example_name %>/source">Source</a>
+  </li>
+  <li class="documentation">
+    <a class="link" data-index=2 data-navigate-to="#examples/<%= example_name %>/documentation">Documentation</a>
+  </li>
+</ul>

data/site/source/app/assets/javascripts/docs/templates/github_repository.jst.ejs

@@ -0,0 +1,4 @@
+<div class="github-repository">
+  <i class="icon icon-github" />
+  <span class="name"><%= model.get('name') %></span>
+</div>

data/site/source/app/assets/javascripts/docs/templates/layouts/main.jst.ejs

@@ -0,0 +1,4 @@
+<div class="row-fluid">
+  <div class="span3" data-region="left"></div>
+  <div class="span9" data-region="right"></div>
+</div>

data/site/source/app/assets/javascripts/docs/templates/left_navigation.jst.ejs

@@ -0,0 +1,5 @@
+<ul class="nav nav-pills stacked">
+  <li>
+    <a href="#">What</a>
+  </li>
+</ul>

data/site/source/app/assets/javascripts/docs/templates/pages/getting_started.jst.ejs

@@ -0,0 +1,78 @@
+<h2>1.) Include the libraries</h2>
+<h4>Download the files and serve them yourself:</h4>
+<a href="//datapimp.github.com/luca/downloads/luca-latest.zip">Zip (96k)</a>
+<p>The depencies file includes underscore 1.4.4, backbone 0.9.9, jquery 1.9, underscore.string, and backbone-query.  You will need to bring your own bootstrap.</p>
+
+<h4>Include the files from the CDN</h4>
+
+<pre><code>&lt;html&gt;
+  &lt;head&gt;
+    ...
+    &lt;link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" /&gt;
+    &lt;link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" /&gt;
+    &lt;link rel="stylesheet" href="//datapimp.github.com/luca/vendor/assets/stylesheets/luca-ui.css" /&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    ...
+    &lt;script type="text/javascript" src="//datapimp.github.com/luca/vendor/assets/javascripts/luca-dependencies.min.js"&gt;&lt;/script&gt;
+    &lt;script type="text/javascript" src="//datapimp.github.com/luca/vendor/assets/javascripts/luca.min.js"&gt;&lt;/script&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</code></pre>
+
+<h4>Use the Ruby gem in your Rails app</h4>
+
+<pre><code># Gemfile.lock
+gem 'luca'
+gem 'bootstrap-rails'
+</code></pre>
+
+<p>Including the luca gem makes everything available via the asset pipeline. </p>
+
+<pre><code># application.coffee
+#= require luca-dependencies.min
+#= require luca.min
+</code></pre>
+
+<p>We depend on the bootstrap css externally.</p>
+
+<pre><code>/*
+ *= require twitter/bootstrap
+ *= require luca-ui.css
+ */
+</code></pre>
+
+<h2>2.) Generate your application</h2>
+
+<p>The luca gem ships with a rails generator to generate an application skeleton.  You can run it:
+    rails g luca:application sample    </p>
+
+<p>Doing this will generate an application skeleton for you:</p>
+
+<pre><code>- app/assets/javascripts/sample
+  - collections
+  - lib
+    - collection_manager.coffee
+    - router.coffee
+  - models
+  - views
+  - application.coffee
+  - config.coffee
+  - index.coffee
+</code></pre>
+
+<h2>3.) Start developing</h2>
+
+<p>The style we use to develop Luca applications is to develop all of our components and views as encpasulated modules.  We start with the smallest units, and then build them up into components using containers, and then build them into pages which are controlled by the main Application. </p>
+<ul class="nav">
+  <li>
+    <a href="#samples">View some examples</a>
+  </li>
+  <li>
+    <a href="#tutorials">Follow some tutorials</a>
+  </li>
+  <li>
+    <a href="#docs">Read the auto-generated documentation</a>
+  </li>
+</ul>
+</ul>

data/site/source/app/assets/javascripts/docs/templates/pages/home.jst.ejs

@@ -0,0 +1,57 @@
+<div class="hero-unit">
+  <h1>Luca</h1>
+  <p>A framework and tools for building well architected client side applications.</p>
+  <p>Based on <a href="http://backbonejs.org">Backbone.js</a> and <a href="http://twitter.github.com/bootstrap">Twitter Bootstrap</a>.</p>
+  <a class="btn btn-large btn-primary" href="//datapimp.gitub.com/luca/downloads/luca-latest.zip">Download</a>
+
+  <ul class="links">
+    <li>
+      <i class="icon icon-github" />
+      <a href="https://github.com/datapimp/luca">Github Project</a>
+    </li>
+    <li>
+      <a href="#examples">Examples</a>
+    </li>
+    <li>
+      <a href="#contribute">Contribute</a>
+    </li>
+    <li>
+      Version <%= Luca.VERSION %>
+    </li>
+  </ul>
+
+</div>
+
+<div id="features" class="row-fluid">
+  <div class="span4">
+    <h3><i class="icon icon-coffee" /> Coffeescript, player.</h3>
+    <p>
+      Luca allows you to write most of your app in Coffeescript.  Most of the structural markup is taken care of for you, and Bootstrap handles a lot of CSS styling for you already. We find that this allows us to develop apps and focus primarily on their functionality and interaction first.  
+    </p>
+
+    <p>This also makes it very easy to render your app on the client and on the server.</p> 
+  </div>
+  <div class="span4">
+    <h3><i class="icon icon-sitemap" /> Component Driven Design</h3>
+    <p>Luca encourages you to design your app as a library of components: re-usable, well encapsulated interface elements with their own concerns.  Luca provides ways of joining components together to form more complex pieces which get integrated into the pages of your application.</p> 
+    <p>As your app grows to a certain level, you will find that you have built up a large library of patterns and tools that you can begin to develop new features very quickly without having to solve the same design problems over and over.</p>
+  </div>
+  <div class="span4">
+    <h3><i class="icon icon-wrench" /> Developer Tools</h3>
+    <p>Luca comes with a variety of tools that make developing large browser applications much easier. </p>
+    <ul class="nav">
+      <li><a href="#">Code Sync</a></li>
+      <li><a href="#">Generated Documentation</a></li>
+      <li><a href="#">In browser prototype</a></li>
+    </ul> 
+  </div>
+</div>
+
+<div>
+  A labor of love by <a href="http://twitter.com/soederpop">@soederpop</a> for my son and my comrades at <a href="https://benchprep.com">@benchprep</a>. MIT Licensed.
+</div>
+
+<div>
+  <a href="https://github.com/datapimp/luca/issues">Issues</a>
+  <a href="https://github.com/datapimp/luca/blob/master/CHANGELOG">Changelog</a>
+</div>

data/site/source/app/assets/javascripts/docs/views/components/code_editor.coffee

@@ -0,0 +1,45 @@
+view = Luca.register      "Docs.views.CodeEditor"
+view.extends              "Luca.View"
+
+view.privateConfiguration
+  tagName: "textarea"
+
+view.publicConfiguration
+  # CodeMirror option.  This will control which theme is applied
+  # to the editor.  Make sure the CSS for this theme has been loaded.
+  theme: "twilight"
+
+  # How many spaces a block should be indented.
+  indentUnit: 2
+
+  # Whether to use the context-sensitive indentation that the mode provides 
+  smartIndent: true
+
+  # Which language will we be editing? Support for coffeescript, 
+  # html, javascript, css, sass, less come out of the box
+  mode: "coffeescript" 
+
+  # which keymap to use? default, or vim 
+  keyMap: "default"
+
+  # whether or not to wrap lines when they reach past the set limit
+  lineWrapping: false
+
+view.privateConfiguration
+  codeMirrorOptions: {}
+  codeMirrorConfigKeys:[
+    "theme"
+    "indentUnit"
+    "smartIndent"
+    "mode"
+    "keyMap"
+    "lineWrapping"
+  ]
+
+view.privateMethods  
+  afterRender: ()->
+    defaults = _(@).pick( @codeMirrorConfigKeys... )
+    options = _(@codeMirrorOptions).defaults(defaults)
+    @codeMirror = window.CodeMirror.fromTextArea( @$el[0], options)
+
+view.register()

data/site/source/app/assets/javascripts/docs/views/components/component_documentation.coffee

@@ -0,0 +1,72 @@
+view = Docs.register      "Docs.views.ComponentDocumentation"
+view.extends              "Luca.View"
+
+view.privateConfiguration
+  bodyTemplate: "component_documentation"
+
+  # If set to true, we will render the source code
+  # for the component in addition to all of the information
+  # about the methods and properties
+  displaySource: false
+
+  # If set to true, we will render the header documentation
+  # that is contained in the component
+  displayHeader: false
+
+view.publicMethods
+  # Loads a component definition from the documentation objects that
+  # are generated by the Luca gem's Luca::LucaApplication#export tool.
+  # These objects are the result of parsing component definition files
+  # and determining the public and private properties and methods, and 
+  # the documentation that is rendered from their comments.
+  loadComponent: (@component)->
+    @reset()
+
+    for section in ["private", "public"]
+      @renderMethodGroup(section) 
+      @renderPropertyGroup(section) 
+
+    @$('.source').hide()
+
+    if @displayHeader is true
+      @$('.header-documentation').show()
+      @$('.header-documentation').html( @component.get("header_documentation") )
+
+    if @displaySource is true
+      @$('.source').show()
+      @$('pre.source').html( @component.contentsWithoutHeader() )      
+
+    @$('pre').addClass('prettyprint')
+
+view.privateMethods
+  reset: ()->
+    @$('.table tbody').empty()
+    @$('.properties,.methods').hide()
+    @$('.header-documentation').hide()
+
+  renderMethodGroup: (group="public")->
+    source = @component?.documentation()?.details["#{ group }Methods"]
+    return if _.isEmpty(source)
+    prototype = Luca.util.resolve(@component.get("class_name"))?.prototype  
+    list = @$(".methods.#{ group }").show().find('.table tbody')
+
+    for method, details of source when _.isFunction(prototype[method])
+      details ||= {}
+      arg_details = _( details.arguments ).reduce (memo,pair)->
+        memo += "#{ pair.argument }"
+        memo += "= #{ pair.value || 'undefined' }" if pair.value?
+        memo += "<br/>"
+      , ""
+      list.append "<tr><td>#{ method }</td><td>#{ arg_details }</td><td>#{ details.documentation || "" }</td></tr>"
+
+  renderPropertyGroup: (group="public")->
+    source = @component?.documentation()?.details["#{ group }Properties"]
+    return if _.isEmpty(source)
+    prototype = Luca.util.resolve(@component.get("class_name"))?.prototype
+    list = @$(".properties.#{ group }").show().find('.table tbody')
+
+    for method, details of source when not _.isFunction(prototype[method])
+      details ||= {}
+      list.append "<tr><td>#{ method }</td><td>#{ details.default || "" }</td><td>#{ details.documentation || "" }</td></tr>"
+
+view.register()

data/site/source/app/assets/javascripts/docs/views/index.coffee

@@ -0,0 +1,3 @@
+#= require_tree ./components
+#= require_tree ./views
+#= require_tree ./pages

data/site/source/app/assets/javascripts/docs/views/pages/browse_source.coffee

@@ -0,0 +1,46 @@
+#= require_tree ./browse_source 
+#= require_self
+view = Docs.register "Docs.views.BrowseSource"
+view.extends         "Luca.Container"
+
+view.configuration
+  autoBindEventHandlers: true
+  events:
+    "click .docs-component-list a.link" : "selectComponent"
+
+view.contains
+  component: "component_list"
+,
+  component: "component_details"
+
+view.privateMethods
+
+  index: ()->
+    @selectComponent(@getComponentList().getCollection().at(0))
+
+  show: (componentName)-> 
+    component = @getComponentList().getCollection().detect (model)->
+      model.get("class_name") is componentName
+
+    return @index() unless component?
+
+    @selectComponent(component)
+    
+  selectComponent: (e)->
+    list    = @getComponentList()
+    details = @getComponentDetails() 
+
+    if Luca.isBackboneModel(e) 
+      model = e
+      index = list.getCollection().indexOf(model)
+      row   = list.$("tr[data-index='#{ index }']")
+    else
+      $target   = @$(e.target)
+      row       = $target.parents('tr').eq(0)
+      index     = row.data('index')
+      model     = list.getCollection().at(index) 
+
+    list.$('tr').removeClass('info')
+    row.addClass('info')
+    details.load(model)
+

data/site/source/app/assets/javascripts/docs/views/pages/browse_source/details.coffee

@@ -0,0 +1,37 @@
+view = Docs.register    "Docs.views.ComponentDetails"
+view.extends            "Luca.Container"
+
+view.configuration
+  rowFluid: true
+
+view.contains
+  role: "documentation"
+  span: 5
+  loadComponent: (model)->
+    @$el.empty()
+    @$el.append("<h2>#{ model.get('class_name') }</h2>")
+    @$el.append("<div class='header-documentation'>#{ model.get('header_documentation') }</div>")
+,
+  type: "component_documentation"
+  role: "details"
+  displaySource: true
+  span: 7
+
+view.defines
+  afterRender: ()->
+    @getDetails().$el.hide()
+    @getDocumentation().$el.hide()
+
+  load: (model)->
+    @getDetails().$el.show()
+    @getDocumentation().$el.show()
+
+    @getDetails().loadComponent(model)
+    @getDocumentation().loadComponent(model)
+
+    @prettyPrint()
+
+  # Applies syntax highlighting to all pre elements
+  prettyPrint: ()-> 
+    @$('pre').addClass('prettyprint')
+    window.prettyPrint?()

data/site/source/app/assets/javascripts/docs/views/pages/browse_source/list.coffee

@@ -0,0 +1,31 @@
+view = Docs.register      "Docs.views.ComponentList"
+view.extends              "Luca.components.ScrollableTable"
+view.defines
+  paginatable: false
+  maxHeight: 200
+  collection: "luca_documentation"
+  columns:[
+    reader: "class_name"
+    width: "20%"
+    renderer: (name)->
+      "<a class='link'>#{ name }</a>"
+  ,
+    reader: "class_name"
+    header: "Extends From"
+    width: "20%"
+    renderer: (className)->
+      if component = Luca.util.resolve(className)
+        name = component.prototype.componentMetaData()?.meta["super class name"]
+        "<a class='link'>#{ name }</a>"
+  ,
+    reader: "type_alias"
+    header: "Shortcut"
+    width: "10%"
+  ,
+    reader: "defined_in_file"
+    header: "<i class='icon icon-github'/> Github"
+    renderer: (file)->
+      shortened = file.split("javascripts/luca/")[1]
+      "<a href='https://github.com/datapimp/luca/blob/master/app/assets/javascripts/luca/#{ shortened }'>#{ shortened }</a>"
+  ]
+

data/site/source/app/assets/javascripts/docs/views/pages/component_editor.coffee

@@ -0,0 +1,10 @@
+view = Docs.register    "Docs.views.ComponentEditor"
+view.extends            "Luca.Container"
+
+view.contains
+  type: "code_editor"
+
+view.defines
+  index: ()->
+    1
+

data/site/source/app/assets/javascripts/docs/views/pages/examples_browser.coffee

@@ -0,0 +1,102 @@
+#= require_tree ./examples_browser
+#= require_self
+
+page = Docs.register "Docs.views.ExamplesBrowser"
+page.extends         "Luca.containers.TabView"
+
+page.contains
+  title: "API Browser"
+  type: "api_browser"
+  name: "api_browser"
+,
+  title: "Basic FormView"
+  type: "basic_form_view"
+  name: "basic_form_view"
+,
+  title: "Complex Layout FormView"
+  type: "complex_layout_form"
+  name: "complex_layout_form"
+,
+  title: "Scrollable Table"
+  type: "table_view_example"
+  name: "table_view_example"
+,
+  title: "Grid Layout CollectionView"
+  type: "grid_layout_view_example"
+  name: "grid_layout_view_example"
+
+page.privateConfiguration
+  activeCard: 0
+  tab_position: "left"
+  defaults:
+    activation: ()->
+      Docs().router.navigate("#examples/#{ @name }/component", false)
+
+page.privateMethods
+  # Hack
+  afterSelect: _.debounce ()->
+    if active = @activeComponent()
+      active.findComponentByName?("component")?.runExample?()
+  , 10
+
+  wrapExampleComponents: ()->
+    wrapped = []
+
+    wrapped = _(@components).map (component,index)->
+      title: component.title
+      name: component.name
+      autoBindEventHandlers: true
+      events:
+        "click a.link[data-navigate-to]" : "selectPanel"
+
+      selectPanel: (e)->
+        $target = @$(e.target)
+        link = $target.data("navigate-to")
+        index = $target.data("index")
+        @$('.panel-selector li').removeClass("active")
+        $target.parent('li').addClass("active")
+        @getViewSelector().activate(index)
+        Docs().router.navigate(link, false)
+
+      components:[
+        type: "card"
+        role: "view_selector"
+        afterInitialize: ()->
+          @$el.append("<h3>#{ component.title } Example</h3>")
+        components:[
+          type: component.type
+          name: "component"
+          activation: ()->
+            @runExample?()
+        ,
+          type: "example_source"
+          example: component.name
+          name: "source"
+        ,
+          type: "example_docs"
+          example: component.name
+          name: "documentation"
+        ]        
+      ,
+        bodyTemplate: "examples_browser/selector"
+        bodyTemplateVars: ()->
+         example_name: component.name
+      ]
+
+    @components = wrapped
+    @components.unshift title: "Overview", bodyTemplate: "examples_browser/overview"
+
+  afterInitialize: ()->
+    @wrapExampleComponents()
+
+page.publicMethods
+  show: (exampleName=0, view="component")->
+    @activate exampleName, false, ()->
+      @getViewSelector().activate(view)
+      @$("li").removeClass("active")
+      @$("li.#{view}").addClass("active")
+
+  index: ()->
+    @show()
+
+page.register()