Added Systems documentation. Fixed #1115.

This commit is contained in:
Nick Winter 2014-08-28 22:32:55 -07:00
parent 124f999bc8
commit a4b2333fd3
13 changed files with 175 additions and 51 deletions

View file

@ -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')

View file

@ -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

View file

@ -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

View file

@ -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

View file

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

View file

@ -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

View file

@ -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

View file

@ -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

View file

@ -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
id: 'docs-components-view'
module.exports = class ComponentsDocumentationView extends CocoView
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

View file

@ -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

View file

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

View file

@ -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

View file

@ -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