aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAnanya Sen2012-07-23 16:59:56 -0700
committerAnanya Sen2012-07-23 16:59:56 -0700
commitc07a7a9d11bc8299fa9686544b18840cc8e640c2 (patch)
tree274641ea13f5fba5c464fbcef2d49a7bc632071f
parentd799a03a52fbf4eaad4e469fabbf84c9bf2cb41d (diff)
downloadninja-c07a7a9d11bc8299fa9686544b18840cc8e640c2.tar.gz
show design code editor - first cut
Signed-off-by: Ananya Sen <Ananya.Sen@motorola.com>
-rw-r--r--js/code-editor/code-editor-wrapper.js6
-rw-r--r--js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.js2
-rwxr-xr-xjs/components/layout/document-bar.reel/document-bar.js38
-rwxr-xr-xjs/document/document-html.js27
-rw-r--r--js/document/views/design-code.js130
5 files changed, 198 insertions, 5 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 dbb4fcad..194b9b23 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 ////////////////////////////////////////////////////////////////////
@@ -101,7 +122,12 @@ exports.DocumentBar = Montage.create(Component, {
101 this._zoomFactor = value; 122 this._zoomFactor = value;
102 // 123 //
103 if (!this._firstDraw) { 124 if (!this._firstDraw) {
104 this.application.ninja.stage.setZoom(value); 125 if(this._currentDocument && this._currentDocument.model && this._currentDocument.model.currentView === this._currentDocument.model.views.design){
126 this.application.ninja.stage.setZoom(value);
127 }else if(this._currentDocument && this._currentDocument.model && this._currentDocument.model.currentView === this._currentDocument.model.views.code){
128 this._zoomFactor = value;
129 if(this.codeEditorWrapper){this.codeEditorWrapper.handleZoom(value)};
130 }
105 } 131 }
106 } 132 }
107 } 133 }
@@ -179,6 +205,14 @@ exports.DocumentBar = Montage.create(Component, {
179 }, 205 },
180 //////////////////////////////////////////////////////////////////// 206 ////////////////////////////////////////////////////////////////////
181 // 207 //
208 renderCodeView: {
209 value: function () {
210 //Reloading in code view (with updates from other view)
211 this.reloadView('code', this.fileTemplate);
212 }
213 },
214 ////////////////////////////////////////////////////////////////////
215 //
182 showViewDesign: { 216 showViewDesign: {
183 value: function () { 217 value: function () {
184 // 218 //
@@ -203,6 +237,8 @@ exports.DocumentBar = Montage.create(Component, {
203 this._currentDocument.model.switchViewTo('code'); 237 this._currentDocument.model.switchViewTo('code');
204 this.btnDesign.setAttribute('class', 'inactive'); 238 this.btnDesign.setAttribute('class', 'inactive');
205 this.btnCode.removeAttribute('class'); 239 this.btnCode.removeAttribute('class');
240 var render = this.renderCodeView.bind(this._currentDocument);
241 render();
206 } 242 }
207 } 243 }
208 } 244 }
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.
34var Montage = require("montage/core/core").Montage, 34var 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//
40exports.HtmlDocument = Montage.create(Component, { 41exports.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;
179
159 } 180 }
160 } 181 }
161 }, 182 },
diff --git a/js/document/views/design-code.js b/js/document/views/design-code.js
new file mode 100644
index 00000000..25073833
--- /dev/null
+++ b/js/document/views/design-code.js
@@ -0,0 +1,130 @@
1/* <copyright>
2Copyright (c) 2012, Motorola Mobility LLC.
3All Rights Reserved.
4
5Redistribution and use in source and binary forms, with or without
6modification, are permitted provided that the following conditions are met:
7
8* Redistributions of source code must retain the above copyright notice,
9 this list of conditions and the following disclaimer.
10
11* Redistributions in binary form must reproduce the above copyright notice,
12 this list of conditions and the following disclaimer in the docum