Added Systems documentation. Fixed #1115.

app/Router.coffee

@@ -47,7 +47,8 @@ module.exports = class CocoRouter extends Backbone.Router
 
     'db/*path': 'routeToServer'
     'demo(/*subpath)': go('DemoView')
-    'docs/components': go('docs/ComponentDocumentationView')
+    'docs/components': go('docs/ComponentsDocumentationView')
+    'docs/systems': go('docs/SystemsDocumentationView')
 
     'editor': go('CommunityView')
 

app/styles/docs/components-documentation-view.sass

@@ -0,0 +1,27 @@
+#components-documentation-view
+  background-color: #e4cf8c
+  height: 100%
+
+  #toggle-all-component-code
+    margin: 10px
+
+  .container, .row
+    height: 100%
+
+  .index-column, .documentation-column
+    overflow-x: hidden
+
+    > ul
+      padding: 0px 20px 20px 20px
+
+    .doc-name
+      color: rgb(139, 69, 19)
+
+  .index-column
+    width: 25%
+
+  .documentation-column
+    width: 75%
+
+    .special-list, .doc-description, .code-block
+      list-style-type: none

app/styles/docs/components.sass

@@ -1,31 +0,0 @@
-#docs-components-view
-  color: saddlebrown
-
-  .row
-
-
-
-    .index-column, .documentation-column
-      overflow-x: hidden
-      min-height: 600px
-
-      > ul
-        padding: 0px 20px 20px 20px
-
-      .doc-name
-        color: rgb(139, 69, 19)
-
-    .index-column
-      width: 25%
-  
-    .documentation-column
-      width: 75%
-  
-      .specialList
-        list-style-type: none
-
-      .doc-description
-        list-style-type: none
-
-      .codeBlock
-        list-style-type: none

app/styles/docs/systems-documentation-view.sass

@@ -0,0 +1,27 @@
+#systems-documentation-view
+  background-color: #e4cf8c
+  height: 100%
+
+  #toggle-all-system-code
+    margin: 10px
+
+  .container, .row
+    height: 100%
+
+  .index-column, .documentation-column
+    overflow-x: hidden
+
+    > ul
+      padding: 0px 20px 20px 20px
+
+    .doc-name
+      color: rgb(139, 69, 19)
+
+  .index-column
+    width: 25%
+
+  .documentation-column
+    width: 75%
+
+    .special-list, .doc-description, .code-block
+      list-style-type: none

app/styles/editor/level/documentation_tab.sass

@@ -0,0 +1,5 @@
+#editor-level-documentation
+  height: 100%
+
+  .tab-content
+    height: 100%

app/templates/docs/components-documentation-view.jade

@@ -1,13 +1,14 @@
-//extends /templates/base
+.container
+  .pull-right
+    button.btn.btn-primary#toggle-all-component-code Toggle all code
+  .clearfix
 
-
-block content
   .row
     .col-xs-3.index-column.nano
       ul.nav.nav-list.list-group.nano-content
         for component in components
             a.doc-name(href="##{component.get('name')}")
-              li.list-group-item= component.get('name')
+              li.list-group-item= component.get('system') + '.' + component.get('name')
               ul
                 // .list-group for different layout
                 each doc in component.attributes.propertyDocumentation
@@ -19,24 +20,26 @@ block content
         for component in components
           div(id="#{component.get('name')}" class="panel panel-defalt")
             div(class="panel-heading")
-              | #{component.get('name')}
+              strong= component.get('system') + '.' + component.get('name')
             div(class="panel-body")
               | #{component.get('description')}
             ul
               each doc in component.attributes.propertyDocumentation
                 li.list-group-item(id="#{component.get('name')}#{doc.name}")
                   | #{doc.name}
-                  ul.specialList
+                  ul.special-list
                     if doc.description[codeLanguage]
                       li!=marked(doc.description[codeLanguage])
                     else
                       li!=marked(doc.description)
               li.panel-heading
-                a.codeBlock(data-toggle="collapse" data-parent="##{component.get('name')}" href="##{component.get('name')}Code")
+                a.code-block(data-toggle="collapse" data-parent="##{component.get('name')}" href="##{component.get('name')}Code")
                   | Code
             div(id="#{component.get('name')}Code" class="panel-collapse collapse")
               div.panel-body
                 pre
                   | #{component.attributes.code}
 
-
+      .clearfix
+    .clearfix
+  .clearfix

app/templates/docs/systems-documentation-view.jade

@@ -0,0 +1,31 @@
+.container
+  .pull-right
+    button.btn.btn-primary#toggle-all-system-code Toggle all code
+  .clearfix
+
+  .row
+    .col-xs-3.index-column.nano
+      ul.nav.nav-list.list-group.nano-content
+        for system in systems
+            a.doc-name(href="##{system.get('name')}")
+              li.list-group-item= system.get('name')
+    .col-xs-9.documentation-column.nano
+      ul.nano-content
+        for system in systems
+          div(id="#{system.get('name')}" class="panel panel-defalt")
+            div(class="panel-heading")
+              | #{system.get('name')}
+            div(class="panel-body")
+              | #{system.get('description')}
+            ul
+              li.panel-heading
+                a.code-block(data-toggle="collapse" data-parent="##{system.get('name')}" href="##{system.get('name')}Code")
+                  | Code
+            div(id="#{system.get('name')}Code" class="panel-collapse collapse")
+              div.panel-body
+                pre
+                  | #{system.attributes.code}
+
+      .clearfix
+    .clearfix
+  .clearfix

app/templates/editor/level/edit.jade

@@ -36,7 +36,7 @@ block header
         li
           a(href="#related-achievements-view", data-toggle="tab") Achievements
         li
-          a(href="#docs-components-view", data-toggle="tab", data-i18n="editor.level_tab_docs") Documentation
+          a(href="#editor-level-documentation", data-toggle="tab", data-i18n="editor.level_tab_docs") Documentation
       .navbar-header
         span.navbar-brand #{level.attributes.name}
 
@@ -125,7 +125,15 @@ block outer_content
 
       div.tab-pane#related-achievements-view
 
-      div.tab-pane#docs-components-view
+      div.tab-pane#editor-level-documentation
+        ul.nav.nav-pills.nav-justified
+          li
+            a(href="#components-documentation-view", data-toggle="pill", data-i18n="resources.components") Components
+          li
+            a(href="#systems-documentation-view", data-toggle="pill", data-i18n="resources.systems") Systems
+        div.tab-content
+          div.tab-pane#components-documentation-view
+          div.tab-pane#systems-documentation-view
 
     div#error-view
 

app/views/docs/ComponentsDocumentationView.coffee

@@ -1,17 +1,21 @@
-#RootView = require 'views/kinds/RootView'
 CocoView = require 'views/kinds/CocoView'
-template = require 'templates/docs/components'
+template = require 'templates/docs/components-documentation-view'
 CocoCollection = require 'collections/CocoCollection'
 LevelComponent = require 'models/LevelComponent'
 
 class ComponentDocsCollection extends CocoCollection
-  url: '/db/level.component?project=name,description,dependencies,propertyDocumentation,code'
+  url: '/db/level.component?project=system,name,description,dependencies,propertyDocumentation,code'
   model: LevelComponent
+  comparator: 'system'
 
-module.exports = class ComponentDocumentationView extends CocoView
+module.exports = class ComponentsDocumentationView extends CocoView
-  id: 'docs-components-view'
+  id: 'components-documentation-view'
   template: template
   className: 'tab-pane'
+  collapsed: true
+
+  events:
+    'click #toggle-all-component-code': 'onToggleAllCode'
 
   constructor: (options) ->
     super(options)
@@ -24,3 +28,8 @@ module.exports = class ComponentDocumentationView extends CocoView
     c.marked = marked
     c.codeLanguage = me.get('aceConfig')?.language ? 'javascript'
     c
+
+  onToggleAllCode: (e) ->
+    @collapsed = not @collapsed
+    @$el.find('.collapse').collapse(if @collapsed then 'hide' else 'show')
+    @$el.find('#toggle-all-component-code').toggleClass 'active', not @collapsed

app/views/docs/SystemsDocumentationView.coffee

@@ -0,0 +1,35 @@
+CocoView = require 'views/kinds/CocoView'
+template = require 'templates/docs/systems-documentation-view'
+CocoCollection = require 'collections/CocoCollection'
+LevelSystem = require 'models/LevelSystem'
+
+class SystemDocsCollection extends CocoCollection
+  url: '/db/level.system?project=name,description,code'
+  model: LevelSystem
+  comparator: 'name'
+
+module.exports = class SystemsDocumentationView extends CocoView
+  id: 'systems-documentation-view'
+  template: template
+  className: 'tab-pane'
+  collapsed: true
+
+  events:
+    'click #toggle-all-system-code': 'onToggleAllCode'
+
+  constructor: (options) ->
+    super(options)
+    @systemDocs = new SystemDocsCollection()
+    @supermodel.loadCollection @systemDocs, 'systems'
+
+  getRenderData: ->
+    c = super()
+    c.systems = @systemDocs.models
+    c.marked = marked
+    c.codeLanguage = me.get('aceConfig')?.language ? 'javascript'
+    c
+
+  onToggleAllCode: (e) ->
+    @collapsed = not @collapsed
+    @$el.find('.collapse').collapse(if @collapsed then 'hide' else 'show')
+    @$el.find('#toggle-all-system-code').toggleClass 'active', not @collapsed

app/views/editor/level/LevelEditView.coffee

@@ -17,7 +17,8 @@ SaveVersionModal = require 'views/modal/SaveVersionModal'
 PatchesView = require 'views/editor/PatchesView'
 RelatedAchievementsView = require 'views/editor/level/RelatedAchievementsView'
 VersionHistoryView = require './modals/LevelVersionsModal'
-ComponentDocsView = require 'views/docs/ComponentDocumentationView'
+ComponentsDocumentationView = require 'views/docs/ComponentsDocumentationView'
+SystemsDocumentationView = require 'views/docs/SystemsDocumentationView'
 
 module.exports = class LevelEditView extends RootView
   id: 'editor-level-view'
@@ -41,6 +42,7 @@ module.exports = class LevelEditView extends RootView
     'click #level-patch-button': 'startPatchingLevel'
     'click #level-watch-button': 'toggleWatchLevel'
     'click #pop-level-i18n-button': -> @level.populateI18N()
+    'click a[href="#editor-level-documentation"]': 'onClickDocumentationTab'
     'mouseup .nav-tabs > li a': 'toggleTab'
 
   constructor: (options, @levelID) ->
@@ -79,7 +81,8 @@ module.exports = class LevelEditView extends RootView
     @insertSubView new ComponentsTabView supermodel: @supermodel
     @insertSubView new SystemsTabView supermodel: @supermodel
     @insertSubView new RelatedAchievementsView supermodel: @supermodel, level: @level
-    @insertSubView new ComponentDocsView  # Don't give it the supermodel, it'll pollute it!
+    @insertSubView new ComponentsDocumentationView  # Don't give it the supermodel, it'll pollute it!
+    @insertSubView new SystemsDocumentationView  # Don't give it the supermodel, it'll pollute it!
 
     Backbone.Mediator.publish 'editor:level-loaded', level: @level
     @showReadOnly() if me.get('anonymous')
@@ -164,3 +167,9 @@ module.exports = class LevelEditView extends RootView
       li.parent().find('li').hide()
       li.show()
     console.log li.hasClass('active')
+
+  onClickDocumentationTab: (e) ->
+    # It's either too late at night or something is going on with Bootstrap nested tabs, so we do the click instead of using .active.
+    return if @initializedDocs
+    @initializedDocs = true
+    @$el.find('a[href="#components-documentation-view"]').click()

app/views/editor/level/scripts/ScriptsTabView.coffee

@@ -113,7 +113,7 @@ module.exports = class ScriptsTabView extends CocoView
 
   onThangsEdited: (e) ->
     # Update in-place so existing Treema nodes refer to the same array.
-    @thangIDs.splice(0, @thangIDs.length, @getThangIDs()...)
+    @thangIDs?.splice(0, @thangIDs.length, @getThangIDs()...)
 
 
 class ScriptsNode extends TreemaArrayNode

app/views/editor/level/settings/SettingsTabView.coffee

@@ -58,7 +58,7 @@ module.exports = class SettingsTabView extends CocoView
 
   onThangsEdited: (e) ->
     # Update in-place so existing Treema nodes refer to the same array.
-    @thangIDs.splice(0, @thangIDs.length, @getThangIDs()...)
+    @thangIDs?.splice(0, @thangIDs.length, @getThangIDs()...)
 
 
 class SettingsNode extends TreemaObjectNode