luca 0.9.89 → 0.9.91

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/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/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/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/docs.coffee

@@ -0,0 +1,12 @@
+view = Docs.register  "Docs.views.ExampleDocs"
+view.extends          "Docs.views.ComponentDocumentation"
+view.defines
+  collection: "docs_documentation"
+  displayHeader: true
+  beforeRender: ()->
+    component = @collection.detect (component)=>
+      component.get("type_alias") is @example
+
+    if component?
+      @loadComponent(component)
+

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

@@ -0,0 +1,13 @@
+view = Docs.register  "Docs.views.ExampleSource"
+view.extends          "Luca.View"
+view.defines
+  tagName: "pre"
+  className: "prettyprint pre-scrollable"
+  collection: "docs_documentation"
+  beforeRender: ()->
+    component = @collection.detect (component)=>
+      component.get("type_alias") is @example
+
+    @$el.html( component.get("source_file_contents") )
+    window.prettyPrint()
+

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()

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

@@ -0,0 +1,10 @@
+page = Docs.register      "Docs.views.Home"
+page.extends              "Luca.components.Page"
+page.configuration
+  template: "pages/home"
+
+page.defines
+  index: ()->
+    @trigger "index"
+
+page.register()

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

@@ -0,0 +1,43 @@
+# The `Docs.components.ApiBrowser` is an example of using
+# a `Luca.Container` with a `@componentEvents` configuration
+# to broker communication between two child components.
+view = Docs.register        "Docs.components.ApiBrowser"
+view.extends                "Luca.Container"
+
+view.configuration
+  componentEvents:
+    "* button:click" : "loadUrl"
+
+view.contains
+  type: "container"
+  rowFluid: true
+  className: "url-selector"
+  components:[
+    type: "text_field"
+    name: "endpoint_url"
+    label: "Enter a URL"
+    span: 9
+  ,
+    type: "button_field"
+    input_value: "Browse"
+    span: 3
+  ]
+,
+  tagName: "pre"
+  className: "prettyprint pre-scrollable"
+  role: "output"
+  afterInitialize: ()->
+    @$el.html("Loading...")
+
+view.privateMethods
+  runExample: ()->
+    @findComponentByName("endpoint_url", true).setValue("https://api.github.com/users/datapimp/gists")
+    @loadUrl()
+
+  loadUrl: ()->
+    url = @findComponentByName("endpoint_url", true).getValue()
+    $.get url, (parsed, state, options)=>
+      @getOutput().$html( options.responseText )
+      window.prettyPrint()
+
+view.register()

data/site/source/app/assets/javascripts/docs/views/views/collection_view_examples/grid_layout_view_example.coffee

@@ -0,0 +1,14 @@
+view = Docs.register      "Docs.views.GridLayoutViewExample"
+view.extends              "Luca.components.GridLayoutView"
+
+view.publicConfiguration
+  collection: "github_repositories"
+  itemPerRow: 4
+  paginatable: 12
+  itemTemplate: "github_repository"
+
+view.publicMethods
+  runExample: ()->
+    @getCollection().fetch()
+
+view.register()

data/site/source/app/assets/javascripts/docs/views/views/collection_view_examples/table_view_example.coffee

@@ -0,0 +1,39 @@
+view = Docs.register      "Docs.views.TableViewExample"
+view.extends              "Luca.components.ScrollableTable"
+view.publicConfiguration
+  # Only render 100 models at a time.  The `Luca.CollectionView` has
+  # automatic pagination control rendering, if you specify a pagination
+  # view class and render area. 
+  paginatable: 100
+  
+  # The scrollable table element has a max height. 
+  maxHeight: 300
+
+  # The string "github_repositories" is an alias for the collection manager
+  # which is created by the `Docs.Application`.  It represents a singular
+  # global instance of the `Docs.collections.GithubRepositories` collection. 
+  collection: "github_repositories"
+
+  # The `Luca.components.TableView` component accepts an array of column
+  # configurations.  Each column can specify the following properties:
+  # - header
+  # - reader ( a method, or attribute on the collection's model )
+  # - renderer ( a custom function which renders the model / reader )
+  # - width ( a percentage width for the column )
+  columns:[
+    reader: "name"
+    renderer: (name, model)->
+      "<a href=#{ model.get('html_url') }>#{ name }</a>"
+  ,  
+    reader: "description"
+  ,
+    reader: "language"
+  ,
+    reader: "watchers"
+  ]
+
+view.publicMethods
+  runExample: ()->
+    @getCollection().fetch()
+
+view.register()

data/site/source/app/assets/javascripts/docs/views/views/form_view_examples/basic_example.coffee

@@ -0,0 +1,38 @@
+# The `Docs.views.BasicFormView` is an example of the `Luca.components.FormView`.
+# In this basic example, the form contains a range of different fields.  They are
+# rendered one on top of another.  You can get more advanced and nest containers within
+# your form, or use a `@bodyTemplate` and specify your own DOM structure, and assign
+# components to custom CSS selectors within it.
+form = Docs.register    "Docs.views.BasicFormView"
+form.extends            "Luca.components.FormView"
+
+form.privateConfiguration
+  # Any values you specify in the `@defaults` property will be
+  # set on each of the components in this container.
+  defaults:
+    type: "text"
+
+form.publicConfiguration
+  # You can manually define a `@components` property, or in your component
+  # definition you can use the special `contains` directive, the only difference
+  # is your personal preference for readability.  I did it this way 
+  components:[
+    label: "Text Field One"
+  ,
+    type: "select"
+    label: "Select Field One"
+    collection:
+      data:[
+        ['Alpha','Alpha']
+        ['Bravo','Bravo']
+        ['Charlie','Charlie']
+        ['Delta','Delta']
+      ]
+  ,
+    type: "checkbox_field"
+    label: "Checkbox Field"
+
+  ]
+
+form.register()  
+

data/site/source/app/assets/javascripts/docs/views/views/form_view_examples/complex_layout.coffee

@@ -0,0 +1,110 @@
+# The `Docs.views.ComplexLayoutForm` is an example of a `Luca.components.FormView` which contains
+# a nested container, and which uses the bootstrap grid helper properties `@rowFluid` and `@span` 
+# to arrange the nested components inside of a grid layout.
+#
+# In addition to laying out the form components visually, there is a nested `Luca.containers.CardView`
+# component which shows / hides various field sets depending on what options you select on the form.
+# This is an example of how Luca framework components can be assembled together arbitrarily to build
+# whatever type of user interface you can imagine.
+form = Docs.register      "Docs.views.ComplexLayoutForm"
+form.extends              "Luca.components.FormView"
+
+form.privateConfiguration
+  # By setting `@rowFluid` to true, this container
+  # will support the twitter bootstrap grid layout.  Applying
+  # the `@span` property to the direct children of this component
+  # will control their width 
+  rowFluid: true
+
+  # Here is an example of using the `@componentEvents` property to listen
+  # to the change event on the select field identified by the role 'group_selector'.
+  # once that field emits its change event, we change the active display card in the
+  # nested card selector.
+  componentEvents:
+    "group_selector on:change" : "selectGroup"
+
+form.privateMethods
+  # The selectGroup method is bound to the componentEvent listener.  Whenever
+  # the group_selector field changes its value, we want to change which field
+  # group is visible on the form.
+  selectGroup: ()->
+    desiredGroup = @getGroupSelector().getValue()
+    selector = @getGroupDisplaySelector()
+    selector.activate(desiredGroup) 
+
+form.contains
+  type: "container"
+  span: 6
+  components:[
+    type: "text"
+    label: "Field One"
+  ,
+    type: "text"
+    label: "Field Two"
+  ,
+    type: "text"
+    label: "Field Three"
+  ]
+,
+  type: "container"
+  span: 6
+  components:[
+    label: "Select a Group"
+    type: "select"
+    role: "group_selector"
+    includeBlank: false
+    valueType: "string"
+    collection:
+      data:[
+        ["alpha","Alpha Group"]
+        ["bravo", "Bravo Group"]
+        ["charlie","Charlie Group"]
+      ]
+  ,
+    type: "card"
+    role: "group_display_selector"
+    components:[
+      name: "alpha"
+      defaults:
+        type: "text"
+      components:[
+        type: "view"
+        tagName: "h4"
+        bodyTemplate: ()-> "Group One"
+      , 
+        label: "Alpha"
+      ,
+        label: "Bravo"
+      ,
+        label: "Charlie"
+      ]
+    ,
+      name: "bravo"
+      defaults:
+        type: "checkbox_field"
+      components:[
+        type: "view"
+        tagName: "h4"
+        bodyTemplate: ()-> "Group Two"
+      ,
+        label: "One"
+      ,
+        label: "Two"
+      ]
+    ,
+      name: "charlie"
+      defaults:
+        type: "button_field"      
+      components:[
+        type: "view"
+        tagName: "h4"
+        bodyTemplate: ()-> "Group Three"
+      ,
+        input_value: "Button One"
+        icon_class: "chevron-up"
+      ,
+        input_value: "Button Two"
+        icon_class: "pencil"
+      ] 
+    ]
+  ]

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

@@ -0,0 +1,6 @@
+nav = Docs.register       "Docs.views.TopNavigation"
+nav.extends               "Luca.components.NavBar"
+nav.defines
+  brand: "Luca.js"
+  inverse: true
+  orientation: "top"