From ca026610b1b0edb7c08a47807eee6e068b5b0a33 Mon Sep 17 00:00:00 2001 From: Scott Erickson Date: Mon, 27 Jan 2014 21:06:27 -0800 Subject: [PATCH 1/2] Component part of #266. --- app/styles/editor/level/component/edit.sass | 13 +++- app/styles/editor/level/edit.sass | 4 +- .../editor/level/component/edit.jade | 27 ++++++-- app/templates/editor/level/edit.jade | 12 ++-- app/views/editor/level/component/edit.coffee | 67 +++++++++++++++---- 5 files changed, 94 insertions(+), 29 deletions(-) diff --git a/app/styles/editor/level/component/edit.sass b/app/styles/editor/level/component/edit.sass index c223c214f..ec43e912b 100644 --- a/app/styles/editor/level/component/edit.sass +++ b/app/styles/editor/level/component/edit.sass @@ -1 +1,12 @@ -//#editor-level-component-edit-view \ No newline at end of file +#editor-level-component-edit-view + .navbar-text + float: left + + #component-code-editor + position: absolute + left: 0 + right: 0 + bottom: 0 + top: 50px + border: 2px solid black + border-top: none \ No newline at end of file diff --git a/app/styles/editor/level/edit.sass b/app/styles/editor/level/edit.sass index 0830b7914..295a877c9 100644 --- a/app/styles/editor/level/edit.sass +++ b/app/styles/editor/level/edit.sass @@ -35,14 +35,14 @@ // keeps the editor tabs a certain height - .tab-content + #level-editor-tabs margin-top: 108px // keeps the tab content at a specific ratio width: 100% padding-bottom: 45% position: relative - .tab-pane + .level-editor-tab-pane // makes sure the pane itself fills the whole ratio'd space position: absolute top: 0 diff --git a/app/templates/editor/level/component/edit.jade b/app/templates/editor/level/component/edit.jade index fe63ed317..d04d03c33 100644 --- a/app/templates/editor/level/component/edit.jade +++ b/app/templates/editor/level/component/edit.jade @@ -1,7 +1,22 @@ -h3.edit-component-name - span(data-i18n="editor.level_component_edit_title") - | Edit Component - span : - | "#{editTitle}" +.navbar + .navbar-inner + p.navbar-text + span(data-i18n="editor.level_component_edit_title") + | Edit Component + span : + | "#{editTitle}" + ul.nav.nav-pills + li + a(href="#code" data-toggle="tab") Code + li + a(href="#config-schema" data-toggle="tab") Config Schema + li + a(href="#settings" data-toggle="tab") Settings -#edit-component-treema +.tab-content + .tab-pane.active#code + #component-code-editor + .tab-pane#config-schema + #config-schema-treema + .tab-pane#settings + #edit-component-treema diff --git a/app/templates/editor/level/edit.jade b/app/templates/editor/level/edit.jade index c030430a7..9f7ec239e 100644 --- a/app/templates/editor/level/edit.jade +++ b/app/templates/editor/level/edit.jade @@ -41,15 +41,15 @@ block outer_content li a(href="#editor-level-systems-tab-view", data-toggle="tab", data-i18n="editor.level_tab_systems") Systems - div.tab-content - div.tab-pane.active#editor-level-thangs-tab-view + div.tab-content#level-editor-tabs + div.tab-pane.level-editor-tab-pane.active#editor-level-thangs-tab-view - div.tab-pane#editor-level-scripts-tab-view + div.tab-pane.level-editor-tab-pane#editor-level-scripts-tab-view - div.tab-pane#editor-level-settings-tab-view + div.tab-pane.level-editor-tab-pane#editor-level-settings-tab-view - div.tab-pane#editor-level-components-tab-view + div.tab-pane.level-editor-tab-pane#editor-level-components-tab-view - div.tab-pane#editor-level-systems-tab-view + div.tab-pane.level-editor-tab-pane#editor-level-systems-tab-view block footer \ No newline at end of file diff --git a/app/views/editor/level/component/edit.coffee b/app/views/editor/level/component/edit.coffee index 0a1cbf405..bf81f9a6c 100644 --- a/app/views/editor/level/component/edit.coffee +++ b/app/views/editor/level/component/edit.coffee @@ -5,9 +5,11 @@ LevelComponent = require 'models/LevelComponent' module.exports = class LevelComponentEditView extends View id: "editor-level-component-edit-view" template: template + editableSettings: ['name', 'description', 'system', 'language', 'dependencies', 'propertyDocumentation', 'i18n'] # not thangs or scripts or events: 'click #done-editing-component-button': 'endEditing' + 'click .nav a': (e) -> $(e.target).tab('show') constructor: (options) -> super options @@ -21,30 +23,67 @@ module.exports = class LevelComponentEditView extends View afterRender: -> super() - @buildTreema() + @buildSettingsTreema() + @buildConfigSchemaTreema() + @buildCodeEditor() + + buildSettingsTreema: -> + data = _.pick @levelComponent.attributes, (value, key) => key in @editableSettings + schema = _.cloneDeep LevelComponent.schema.attributes + schema.properties = _.pick schema.properties, (value, key) => key in @editableSettings + schema.required = _.intersection schema.required, @editableSettings - buildTreema: -> - data = $.extend(true, {}, @levelComponent.attributes) treemaOptions = supermodel: @supermodel - schema: LevelComponent.schema.attributes + schema: schema data: data - callbacks: {change: @onComponentEdited} - unless me.isAdmin() - treemaOptions.readOnly = true - @componentTreema = @$el.find('#edit-component-treema').treema treemaOptions - @componentTreema.build() - @componentTreema.open() - # TODO: schema is not loaded for the first one here? - @componentTreema.tv4.addSchema('metaschema', LevelComponent.schema.get('properties').configSchema) + callbacks: {change: @onComponentSettingsEdited} + treemaOptions.readOnly = true unless me.isAdmin() + @componentSettingsTreema = @$el.find('#edit-component-treema').treema treemaOptions + @componentSettingsTreema.build() + @componentSettingsTreema.open() - onComponentEdited: (e) => + onComponentSettingsEdited: => # Make sure it validates first? - for key, value of @componentTreema.data + for key, value of @componentSettingsTreema.data @levelComponent.set key, value unless key is 'js' # will compile code if needed Backbone.Mediator.publish 'level-component-edited', levelComponent: @levelComponent null + buildConfigSchemaTreema: -> + treemaOptions = + supermodel: @supermodel + schema: LevelComponent.schema.get('properties').configSchema + data: @levelComponent.get 'configSchema' + callbacks: {change: @onConfigSchemaEdited} + treemaOptions.readOnly = true unless me.isAdmin() + @configSchemaTreema = @$el.find('#config-schema-treema').treema treemaOptions + @configSchemaTreema.build() + @configSchemaTreema.open() + # TODO: schema is not loaded for the first one here? + @configSchemaTreema.tv4.addSchema('metaschema', LevelComponent.schema.get('properties').configSchema) + + onConfigSchemaEdited: => + @levelComponent.set 'configSchema', @configSchemaTreema.data + Backbone.Mediator.publish 'level-component-edited', levelComponent: @levelComponent + + buildCodeEditor: -> + editorEl = @$el.find '#component-code-editor' + editorEl.text @levelComponent.get('code') + @editor = ace.edit(editorEl[0]) + @editor.setReadOnly(not me.isAdmin()) + session = @editor.getSession() + session.setMode 'ace/mode/coffee' + session.setTabSize 2 + session.setNewLineMode = 'unix' + session.setUseSoftTabs true + @editor.on 'change', @onEditorChange + + onEditorChange: => + @levelComponent.set 'code', @editor.getValue() + Backbone.Mediator.publish 'level-component-edited', levelComponent: @levelComponent + null + endEditing: (e) -> Backbone.Mediator.publish 'level-component-editing-ended', levelComponent: @levelComponent null From a82a6a4188a2088a6a5c18b98907b761918ceb5a Mon Sep 17 00:00:00 2001 From: Scott Erickson Date: Mon, 27 Jan 2014 21:25:01 -0800 Subject: [PATCH 2/2] Systems part of #266. --- app/styles/editor/level/system/edit.sass | 13 +++- app/templates/editor/level/system/edit.jade | 28 ++++++-- app/views/editor/level/component/edit.coffee | 2 +- app/views/editor/level/system/edit.coffee | 67 ++++++++++++++++---- 4 files changed, 87 insertions(+), 23 deletions(-) diff --git a/app/styles/editor/level/system/edit.sass b/app/styles/editor/level/system/edit.sass index a608f48c2..d910b605f 100644 --- a/app/styles/editor/level/system/edit.sass +++ b/app/styles/editor/level/system/edit.sass @@ -1 +1,12 @@ -//#editor-level-system-edit-view +#editor-level-system-edit-view + .navbar-text + float: left + + #system-code-editor + position: absolute + left: 0 + right: 0 + bottom: 0 + top: 50px + border: 2px solid black + border-top: none \ No newline at end of file diff --git a/app/templates/editor/level/system/edit.jade b/app/templates/editor/level/system/edit.jade index 37a774d3d..02959a17a 100644 --- a/app/templates/editor/level/system/edit.jade +++ b/app/templates/editor/level/system/edit.jade @@ -1,7 +1,21 @@ -h3.edit-system-name - span(data-i18n="editor.level_system_edit_title") - | Edit System - span : - | "#{editTitle}" - -#edit-system-treema +.navbar + .navbar-inner + p.navbar-text + span(data-i18n="editor.level_system_edit_title") + | Edit System + span : + | "#{editTitle}" + ul.nav.nav-pills + li + a(href="#code" data-toggle="tab") Code + li + a(href="#config-schema" data-toggle="tab") Config Schema + li + a(href="#settings" data-toggle="tab") Settings +.tab-content + .tab-pane.active#code + #system-code-editor + .tab-pane#config-schema + #config-schema-treema + .tab-pane#settings + #edit-system-treema diff --git a/app/views/editor/level/component/edit.coffee b/app/views/editor/level/component/edit.coffee index bf81f9a6c..d7fe88f9e 100644 --- a/app/views/editor/level/component/edit.coffee +++ b/app/views/editor/level/component/edit.coffee @@ -5,7 +5,7 @@ LevelComponent = require 'models/LevelComponent' module.exports = class LevelComponentEditView extends View id: "editor-level-component-edit-view" template: template - editableSettings: ['name', 'description', 'system', 'language', 'dependencies', 'propertyDocumentation', 'i18n'] # not thangs or scripts or + editableSettings: ['name', 'description', 'system', 'language', 'dependencies', 'propertyDocumentation', 'i18n'] events: 'click #done-editing-component-button': 'endEditing' diff --git a/app/views/editor/level/system/edit.coffee b/app/views/editor/level/system/edit.coffee index 39612be6d..3acb8d323 100644 --- a/app/views/editor/level/system/edit.coffee +++ b/app/views/editor/level/system/edit.coffee @@ -5,9 +5,11 @@ LevelSystem = require 'models/LevelSystem' module.exports = class LevelSystemEditView extends View id: "editor-level-system-edit-view" template: template + editableSettings: ['name', 'description', 'language', 'dependencies', 'propertyDocumentation', 'i18n'] events: 'click #done-editing-system-button': 'endEditing' + 'click .nav a': (e) -> $(e.target).tab('show') constructor: (options) -> super options @@ -21,30 +23,67 @@ module.exports = class LevelSystemEditView extends View afterRender: -> super() - @buildTreema() + @buildSettingsTreema() + @buildConfigSchemaTreema() + @buildCodeEditor() + + buildSettingsTreema: -> + data = _.pick @levelSystem.attributes, (value, key) => key in @editableSettings + schema = _.cloneDeep LevelSystem.schema.attributes + schema.properties = _.pick schema.properties, (value, key) => key in @editableSettings + schema.required = _.intersection schema.required, @editableSettings - buildTreema: -> - data = $.extend(true, {}, @levelSystem.attributes) treemaOptions = supermodel: @supermodel - schema: LevelSystem.schema.attributes + schema: schema data: data - callbacks: {change: @onSystemEdited} - unless me.isAdmin() - treemaOptions.readOnly = true - @systemTreema = @$el.find('#edit-system-treema').treema treemaOptions - @systemTreema.build() - @systemTreema.open() - # TODO: schema is not loaded for the first one here? - @systemTreema.tv4.addSchema('metaschema', LevelSystem.schema.get('properties').configSchema) + callbacks: {change: @onSystemSettingsEdited} + treemaOptions.readOnly = true unless me.isAdmin() + @systemSettingsTreema = @$el.find('#edit-system-treema').treema treemaOptions + @systemSettingsTreema.build() + @systemSettingsTreema.open() - onSystemEdited: (e) => + onSystemSettingsEdited: => # Make sure it validates first? - for key, value of @systemTreema.data + for key, value of @systemSettingsTreema.data @levelSystem.set key, value unless key is 'js' # will compile code if needed Backbone.Mediator.publish 'level-system-edited', levelSystem: @levelSystem null + buildConfigSchemaTreema: -> + treemaOptions = + supermodel: @supermodel + schema: LevelSystem.schema.get('properties').configSchema + data: @levelSystem.get 'configSchema' + callbacks: {change: @onConfigSchemaEdited} + treemaOptions.readOnly = true unless me.isAdmin() + @configSchemaTreema = @$el.find('#config-schema-treema').treema treemaOptions + @configSchemaTreema.build() + @configSchemaTreema.open() + # TODO: schema is not loaded for the first one here? + @configSchemaTreema.tv4.addSchema('metaschema', LevelSystem.schema.get('properties').configSchema) + + onConfigSchemaEdited: => + @levelSystem.set 'configSchema', @configSchemaTreema.data + Backbone.Mediator.publish 'level-system-edited', levelSystem: @levelSystem + + buildCodeEditor: -> + editorEl = @$el.find '#system-code-editor' + editorEl.text @levelSystem.get('code') + @editor = ace.edit(editorEl[0]) + @editor.setReadOnly(not me.isAdmin()) + session = @editor.getSession() + session.setMode 'ace/mode/coffee' + session.setTabSize 2 + session.setNewLineMode = 'unix' + session.setUseSoftTabs true + @editor.on 'change', @onEditorChange + + onEditorChange: => + @levelSystem.set 'code', @editor.getValue() + Backbone.Mediator.publish 'level-system-edited', levelSystem: @levelSystem + null + endEditing: (e) -> Backbone.Mediator.publish 'level-system-editing-ended', levelSystem: @levelSystem null