diff options
author | Jose Antonio Marquez Russo | 2012-07-23 18:36:23 -0700 |
---|---|---|
committer | Jose Antonio Marquez Russo | 2012-07-23 18:36:23 -0700 |
commit | 9c74db91b9f0c755eb8e8c36d5270b7db90c8ff7 (patch) | |
tree | 610434d27d3f75d5115628cb1d59422e9fb5a197 /js | |
parent | 5d35e4bb5d59c994a5ffb6064eec774aea76ba64 (diff) | |
parent | 48d9ed19573a07c68da305d14ca6ab3a04d31d64 (diff) | |
download | ninja-9c74db91b9f0c755eb8e8c36d5270b7db90c8ff7.tar.gz |
Merge pull request #44 from ananyasen/Document
first cut to show code editor for design document
Diffstat (limited to 'js')
-rw-r--r-- | js/code-editor/code-editor-wrapper.js | 6 | ||||
-rw-r--r-- | js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.js | 2 | ||||
-rwxr-xr-x | js/components/layout/document-bar.reel/document-bar.js | 38 | ||||
-rwxr-xr-x | js/controllers/document-controller.js | 2 | ||||
-rwxr-xr-x | js/document/document-html.js | 27 | ||||
-rwxr-xr-x | js/document/document-text.js | 4 | ||||
-rw-r--r-- | js/document/views/design-code.js | 130 |
7 files changed, 201 insertions, 8 deletions
diff --git a/js/code-editor/code-editor-wrapper.js b/js/code-editor/code-editor-wrapper.js index 57fe4d3a..65f42db2 100644 --- a/js/code-editor/code-editor-wrapper.js +++ b/js/code-editor/code-editor-wrapper.js | |||
@@ -131,6 +131,12 @@ exports.CodeEditorWrapper = Montage.create(Component, { | |||
131 | this.application.ninja.editorViewOptions.codeEditorWrapper = this; | 131 | this.application.ninja.editorViewOptions.codeEditorWrapper = this; |
132 | } | 132 | } |
133 | 133 | ||
134 | //TODO:add codeEditorWrapper | ||
135 | if(!this.application.ninja.documentBar.codeEditorWrapper){ | ||
136 | this.application.ninja.documentBar.codeEditorWrapper = this; | ||
137 | } | ||
138 | |||
139 | |||
134 | editorOptions = { | 140 | editorOptions = { |
135 | lineNumbers: true, | 141 | lineNumbers: true, |
136 | matchBrackets:true, | 142 | matchBrackets:true, |
diff --git a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.js b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.js index 9344d34c..e2632d35 100644 --- a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.js +++ b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.js | |||
@@ -51,7 +51,7 @@ exports.CodeEditorViewOptions = Montage.create(Component, { | |||
51 | 51 | ||
52 | this._currentDocument = value; | 52 | this._currentDocument = value; |
53 | 53 | ||
54 | if(!value || this._currentDocument.currentView === "design") { | 54 | if(!value || (this._currentDocument.currentView === "design") || ((this._currentDocument.model.views.design !== null))) { |
55 | this.visible = false; | 55 | this.visible = false; |
56 | } else { | 56 | } else { |
57 | this.visible = true; | 57 | this.visible = true; |
diff --git a/js/components/layout/document-bar.reel/document-bar.js b/js/components/layout/document-bar.reel/document-bar.js index 5623f825..803d2c3a 100755 --- a/js/components/layout/document-bar.reel/document-bar.js +++ b/js/components/layout/document-bar.reel/document-bar.js | |||
@@ -61,6 +61,27 @@ exports.DocumentBar = Montage.create(Component, { | |||
61 | } | 61 | } |
62 | // | 62 | // |
63 | this.visible = true; | 63 | this.visible = true; |
64 | |||
65 | //TODO: check if the code's options bar can be unified | ||
66 | if(this._currentDocument && this._currentDocument.model && (this._currentDocument.model.views.design === null) && (this._currentDocument.model.views.code !== null)){ | ||
67 | this.visible = false; | ||
68 | } | ||
69 | } | ||
70 | }, | ||
71 | //////////////////////////////////////////////////////////////////// | ||
72 | // | ||
73 | _codeEditorWrapper:{ | ||
74 | value: null | ||
75 | }, | ||
76 | |||
77 | codeEditorWrapper:{ | ||
78 | get : function() { | ||
79 | return this._codeEditorWrapper; | ||
80 | }, | ||
81 | set : function(value) { | ||
82 | if(this._codeEditorWrapper !== value){ | ||
83 | this._codeEditorWrapper = value; | ||
84 | } | ||
64 | } | 85 | } |
65 | }, | 86 | }, |
66 | //////////////////////////////////////////////////////////////////// | 87 | //////////////////////////////////////////////////////////////////// |
@@ -112,7 +133,12 @@ exports.DocumentBar = Montage.create(Component, { | |||
112 | this._zoomFactor = value; | 133 | this._zoomFactor = value; |
113 | // | 134 | // |
114 | if (!this._firstDraw) { | 135 | if (!this._firstDraw) { |
115 | this.application.ninja.stage.setZoom(value); | 136 | if(this._currentDocument && this._currentDocument.model && this._currentDocument.model.currentView === this._currentDocument.model.views.design){ |
137 | this.application.ninja.stage.setZoom(value); | ||
138 | }else if(this._currentDocument && this._currentDocument.model && this._currentDocument.model.currentView === this._currentDocument.model.views.code){ | ||
139 | this._zoomFactor = value; | ||
140 | if(this.codeEditorWrapper){this.codeEditorWrapper.handleZoom(value)}; | ||
141 | } | ||
116 | } | 142 | } |
117 | } | 143 | } |
118 | } | 144 | } |
@@ -191,6 +217,14 @@ exports.DocumentBar = Montage.create(Component, { | |||
191 | }, | 217 | }, |
192 | //////////////////////////////////////////////////////////////////// | 218 | //////////////////////////////////////////////////////////////////// |
193 | // | 219 | // |
220 | renderCodeView: { | ||
221 | value: function () { | ||
222 | //Reloading in code view (with updates from other view) | ||
223 | this.reloadView('code', this.fileTemplate); | ||
224 | } | ||
225 | }, | ||
226 | //////////////////////////////////////////////////////////////////// | ||
227 | // | ||
194 | showViewDesign: { | 228 | showViewDesign: { |
195 | value: function () { | 229 | value: function () { |
196 | // | 230 | // |
@@ -215,6 +249,8 @@ exports.DocumentBar = Montage.create(Component, { | |||
215 | this._currentDocument.model.switchViewTo('code'); | 249 | this._currentDocument.model.switchViewTo('code'); |
216 | this.btnDesign.setAttribute('class', 'inactive'); | 250 | this.btnDesign.setAttribute('class', 'inactive'); |
217 | this.btnCode.removeAttribute('class'); | 251 | this.btnCode.removeAttribute('class'); |
252 | var render = this.renderCodeView.bind(this._currentDocument); | ||
253 | render(); | ||
218 | } | 254 | } |
219 | } | 255 | } |
220 | }, | 256 | }, |
diff --git a/js/controllers/document-controller.js b/js/controllers/document-controller.js index 5020e27d..ee7ca82c 100755 --- a/js/controllers/document-controller.js +++ b/js/controllers/document-controller.js | |||
@@ -356,7 +356,7 @@ exports.DocumentController = Montage.create(Component, { | |||
356 | break; | 356 | break; |
357 | default: | 357 | default: |
358 | //Open in code view | 358 | //Open in code view |
359 | Montage.create(TextDocument).init(file, this.application.ninja, this.application.ninja.openDocument, 'code'); | 359 | Montage.create(TextDocument).init(file, this.application.ninja, this.application.ninja.openDocument, 'code', document.getElementById("codeViewContainer")); |
360 | break; | 360 | break; |
361 | } | 361 | } |
362 | } | 362 | } |
diff --git a/js/document/document-html.js b/js/document/document-html.js index b7dacf6a..76157a07 100755 --- a/js/document/document-html.js +++ b/js/document/document-html.js | |||
@@ -34,7 +34,8 @@ POSSIBILITY OF SUCH DAMAGE. | |||
34 | var Montage = require("montage/core/core").Montage, | 34 | var Montage = require("montage/core/core").Montage, |
35 | Component = require("montage/ui/component").Component, | 35 | Component = require("montage/ui/component").Component, |
36 | HtmlDocumentModel = require("js/document/models/html").HtmlDocumentModel, | 36 | HtmlDocumentModel = require("js/document/models/html").HtmlDocumentModel, |
37 | DesignDocumentView = require("js/document/views/design").DesignDocumentView; | 37 | DesignDocumentView = require("js/document/views/design").DesignDocumentView, |
38 | DesignCodeView = require("js/document/views/design-code").DesignCodeView; | ||
38 | //////////////////////////////////////////////////////////////////////// | 39 | //////////////////////////////////////////////////////////////////////// |
39 | // | 40 | // |
40 | exports.HtmlDocument = Montage.create(Component, { | 41 | exports.HtmlDocument = Montage.create(Component, { |
@@ -77,6 +78,7 @@ exports.HtmlDocument = Montage.create(Component, { | |||
77 | // | 78 | // |
78 | init: { | 79 | init: { |
79 | value: function(file, context, callback, view, template) { | 80 | value: function(file, context, callback, view, template) { |
81 | var designCodeView = DesignCodeView.create(); | ||
80 | //Storing callback data for loaded dispatch | 82 | //Storing callback data for loaded dispatch |
81 | this.loaded.callback = callback; | 83 | this.loaded.callback = callback; |
82 | this.loaded.context = context; | 84 | this.loaded.context = context; |
@@ -85,7 +87,7 @@ exports.HtmlDocument = Montage.create(Component, { | |||
85 | file: {value: file}, | 87 | file: {value: file}, |
86 | fileTemplate: {value: template}, | 88 | fileTemplate: {value: template}, |
87 | parentContainer: {value: document.getElementById("iframeContainer")}, //Saving reference to parent container of all views (should be changed to buckets approach | 89 | parentContainer: {value: document.getElementById("iframeContainer")}, //Saving reference to parent container of all views (should be changed to buckets approach |
88 | views: {value: {'design': DesignDocumentView.create(), 'code': null}} //TODO: Add code view logic | 90 | views: {value: {'design': DesignDocumentView.create(), 'code': designCodeView}} //TODO: Add code view logic |
89 | }); | 91 | }); |
90 | //Calling the any init routines in the model | 92 | //Calling the any init routines in the model |
91 | this.model.init(); | 93 | this.model.init(); |
@@ -98,6 +100,14 @@ exports.HtmlDocument = Montage.create(Component, { | |||
98 | } else { | 100 | } else { |
99 | //ERROR: Design View not initialized | 101 | //ERROR: Design View not initialized |
100 | } | 102 | } |
103 | |||
104 | |||
105 | //initialize the code view for the html document and hide it since design is the default view | ||
106 | this.model.views.code.initialize(this.model.parentContainer); | ||
107 | |||
108 | this.model.views.code.hide(); | ||
109 | |||
110 | |||
101 | // | 111 | // |
102 | if (view === 'design') { | 112 | if (view === 'design') { |
103 | //TODO: Remove reference and use as part of model | 113 | //TODO: Remove reference and use as part of model |
@@ -125,6 +135,7 @@ exports.HtmlDocument = Montage.create(Component, { | |||
125 | //TODO: Make into one method to use here and one init | 135 | //TODO: Make into one method to use here and one init |
126 | reloadView: { | 136 | reloadView: { |
127 | value: function (view, template) { | 137 | value: function (view, template) { |
138 | var content; | ||
128 | // | 139 | // |
129 | this.model.parentContainer.removeChild(this.model.views.design.iframe); | 140 | this.model.parentContainer.removeChild(this.model.views.design.iframe); |
130 | //Initiliazing views and hiding | 141 | //Initiliazing views and hiding |
@@ -154,8 +165,18 @@ exports.HtmlDocument = Montage.create(Component, { | |||
154 | this._observer = new WebKitMutationObserver(this.handleTemplateReady.bind(this)); | 165 | this._observer = new WebKitMutationObserver(this.handleTemplateReady.bind(this)); |
155 | this._observer.observe(this.model.views.design.document.head, {childList: true}); | 166 | this._observer.observe(this.model.views.design.document.head, {childList: true}); |
156 | }.bind(this), template, {viewCallback: this.handleViewReady, context: this}); | 167 | }.bind(this), template, {viewCallback: this.handleViewReady, context: this}); |
157 | } else { | 168 | } else if(view === 'code'){ |
158 | //TODO: Identify default view (probably code) | 169 | //TODO: Identify default view (probably code) |
170 | |||
171 | //TODO:get the html content from the document | ||
172 | content = '<html><head>'+this.model.file.content.head+'</head><body>'+this.model.file.content.body+'</body></html>';//dummy | ||
173 | |||
174 | this.model.views.code.load(content); | ||
175 | |||
176 | //Setting current view object to code | ||
177 | this.currentView = 'code'; | ||
178 | this.model.currentView = this.model.views.code; | ||