diff options
author | Ananya Sen | 2012-07-23 16:59:56 -0700 |
---|---|---|
committer | Ananya Sen | 2012-07-23 16:59:56 -0700 |
commit | c07a7a9d11bc8299fa9686544b18840cc8e640c2 (patch) | |
tree | 274641ea13f5fba5c464fbcef2d49a7bc632071f /js/document | |
parent | d799a03a52fbf4eaad4e469fabbf84c9bf2cb41d (diff) | |
download | ninja-c07a7a9d11bc8299fa9686544b18840cc8e640c2.tar.gz |
show design code editor - first cut
Signed-off-by: Ananya Sen <Ananya.Sen@motorola.com>
Diffstat (limited to 'js/document')
-rwxr-xr-x | js/document/document-html.js | 27 | ||||
-rw-r--r-- | js/document/views/design-code.js | 130 |
2 files changed, 154 insertions, 3 deletions
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; | ||
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> | ||
2 | Copyright (c) 2012, Motorola Mobility LLC. | ||
3 | All Rights Reserved. | ||
4 | |||
5 | Redistribution and use in source and binary forms, with or without | ||
6 | modification, 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 documentation | ||
13 | and/or other materials provided with the distribution. | ||
14 | |||
15 | * Neither the name of Motorola Mobility LLC nor the names of its | ||
16 | contributors may be used to endorse or promote products derived from this | ||
17 | software without specific prior written permission. | ||
18 | |||
19 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" | ||
20 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE | ||
21 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE | ||
22 | ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE | ||
23 | LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR | ||
24 | CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF | ||
25 | SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS | ||
26 | INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN | ||
27 | CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) | ||
28 | ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE | ||
29 | POSSIBILITY OF SUCH DAMAGE. | ||
30 | </copyright> */ | ||
31 | |||
32 | //////////////////////////////////////////////////////////////////////// | ||
33 | // | ||
34 | var Montage = require("montage/core/core").Montage, | ||
35 | Component = require("montage/ui/component").Component, | ||
36 | CodeDocumentView = require("js/document/views/code").CodeDocumentView; | ||
37 | //////////////////////////////////////////////////////////////////////// | ||
38 | //Code View for the HTML file | ||
39 | // | ||
40 | exports.DesignCodeView = Montage.create(CodeDocumentView, { | ||
41 | //////////////////////////////////////////////////////////////////// | ||
42 | // | ||
43 | hasTemplate: { | ||
44 | value: false | ||
45 | }, | ||
46 | //////////////////////////////////////////////////////////////////// | ||
47 | // | ||
48 | init:{ | ||
49 | value: function (content) { | ||
50 | |||
51 | } | ||
52 | }, | ||
53 | //////////////////////////////////////////////////////////////////// | ||
54 | // | ||
55 | load:{ | ||
56 | value:function(content){ | ||
57 | //initialize the editor if not yet created | ||
58 | if(this.editor === null){ | ||
59 | //todo: get the proper content | ||
60 | this.textArea.value = content; | ||
61 | this.initializeTextView(this.application.ninja.currentDocument.model.file, this.application.ninja.currentDocument); | ||
62 | return true; | ||
63 | }else{//reload the editor | ||
64 | this.editor.setValue(content); | ||
65 | this.editor.focus(); | ||
66 | } | ||
67 | } | ||
68 | }, | ||
69 | //////////////////////////////////////////////////////////////////// | ||
70 | // | ||
71 | show: { | ||
72 | value: function (callback) { | ||
73 | |||
74 | this.textViewContainer.style.display = "block"; | ||
75 | this.textViewContainer.style.background = "white"; | ||
76 | this.textViewContainer.style.height = "100%"; | ||
77 | |||
78 | |||
79 | ///todo-remove after the switch view logic is added in all the components | ||
80 | this.application.ninja.stage.collapseAllPanels(); | ||
81 | this.application.ninja.stage.hideCanvas(true); | ||
82 | this.application.ninja.stage.hideRulers(); | ||
83 | |||
84 | document.getElementsByClassName("bindingView")[0].style.display = "none"; | ||
85 | |||
86 | //bindingView div needs to be display noned | ||
87 | //timeline error on switching back to design view | ||
88 | |||
89 | ///-end todo-remove | ||
90 | |||
91 | |||
92 | |||
93 | |||
94 | //todo : update options bar | ||
95 | |||
96 | // | ||
97 | if (callback) callback(); | ||
98 | } | ||
99 | }, | ||
100 | //////////////////////////////////////////////////////////////////// | ||
101 | // | ||
102 | hide: { | ||
103 | value: function (callback) { | ||
104 | if(this.editor){ | ||
105 | this.editor.save();//save to textarea | ||
106 | } | ||
107 | this.textViewContainer.style.display = "none"; | ||
108 | |||
109 | ///todo-remove after the switch view logic is added in all the components | ||
110 | this.application.ninja.stage.restoreAllPanels(false); | ||
111 | this.application.ninja.stage.hideCanvas(false); | ||
112 | this.application.ninja.stage.showRulers(); | ||
113 | ///-end todo-remove | ||
114 | |||
115 | |||
116 | //todo : update options bar | ||
117 | |||
118 | // | ||
119 | if (callback) callback(); | ||
120 | } | ||
121 | }, | ||
122 | //////////////////////////////////////////////////////////////////// | ||
123 | // | ||
124 | applyTheme:{ | ||
125 | value:function(themeClass){ | ||
126 | //Todo: change for bucket structure of documents | ||
127 | this.textViewContainer.className = "codeViewContainer "+themeClass; | ||
128 | } | ||
129 | } | ||
130 | }); \ No newline at end of file | ||