mirror of
https://github.com/codeninjasllc/codecombat.git
synced 2024-11-23 23:58:02 -05:00
Added Systems documentation. Fixed #1115.
This commit is contained in:
parent
124f999bc8
commit
a4b2333fd3
13 changed files with 175 additions and 51 deletions
|
@ -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')
|
||||
|
||||
|
|
27
app/styles/docs/components-documentation-view.sass
Normal file
27
app/styles/docs/components-documentation-view.sass
Normal 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
|
|
@ -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
|
27
app/styles/docs/systems-documentation-view.sass
Normal file
27
app/styles/docs/systems-documentation-view.sass
Normal 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
|
5
app/styles/editor/level/documentation_tab.sass
Normal file
5
app/styles/editor/level/documentation_tab.sass
Normal file
|
@ -0,0 +1,5 @@
|
|||
#editor-level-documentation
|
||||
height: 100%
|
||||
|
||||
.tab-content
|
||||
height: 100%
|
|
@ -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
|
31
app/templates/docs/systems-documentation-view.jade
Normal file
31
app/templates/docs/systems-documentation-view.jade
Normal 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
|
|
@ -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
|
||||
|
||||
|
|
|
@ -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
|
35
app/views/docs/SystemsDocumentationView.coffee
Normal file
35
app/views/docs/SystemsDocumentationView.coffee
Normal 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
|
|
@ -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()
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue