diff options
Diffstat (limited to 'js/io/document/html-document.js')
-rw-r--r-- | js/io/document/html-document.js | 424 |
1 files changed, 424 insertions, 0 deletions
diff --git a/js/io/document/html-document.js b/js/io/document/html-document.js new file mode 100644 index 00000000..c44dfe75 --- /dev/null +++ b/js/io/document/html-document.js | |||
@@ -0,0 +1,424 @@ | |||
1 | /* <copyright> | ||
2 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
3 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | ||
4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
5 | </copyright> */ | ||
6 | |||
7 | var Montage = require("montage/core/core").Montage, | ||
8 | baseDocumentModule = require("js/io/document/base-document"), | ||
9 | NJUtils = require("js/lib/NJUtils").NJUtils; | ||
10 | |||
11 | var HTMLDocument = exports.HTMLDocument = Montage.create(baseDocumentModule.BaseDocument, { | ||
12 | // PRIVATE MEMBERS | ||
13 | _selectionExclude: { value: null, enumerable: false }, | ||
14 | _cloudTemplateUri: { value: "user-document-templates/montage-application-cloud/index.html", enumerable: false}, | ||
15 | _iframe: { value: null, enumerable: false }, | ||
16 | _server: { value: null, enumerable: false }, | ||
17 | _selectionModel: { value: [], enumerable: false }, | ||
18 | _undoModel: { value: { "queue" : [], "position" : 0 }, enumerable: false}, | ||
19 | |||
20 | _document: { value: null, enumerable: false }, | ||
21 | _documentRoot: { value: null, enumerable: false }, | ||
22 | _stageBG: { value: null, enumerable: false }, | ||
23 | _window: { value: null, enumerable: false }, | ||
24 | _styles: { value: null, enumerable: false }, | ||
25 | _stylesheets: { value: null, enumerable: false }, | ||
26 | _stageStyleSheetId : { value: 'nj-stage-stylesheet', enumerable: false }, | ||
27 | _initialUserDocument: { value: null, enumerable: false }, | ||
28 | _htmlSource: {value: "<html></html>", enumerable: false}, | ||
29 | _glData: {value: null, enumerable: false }, | ||
30 | |||
31 | _elementCounter: { value: 1, enumerable: false }, | ||
32 | _snapping : { value: true, enumerable: false }, | ||
33 | _layoutMode: { value: "all", enumerable: false }, | ||
34 | _draw3DGrid: { value: false, writable: true }, | ||
35 | _swfObject: { value: false, enumerable: false }, | ||
36 | |||
37 | _zoomFactor: { value: 100, enumerable: false }, | ||
38 | |||
39 | // PUBLIC MEMBERS | ||
40 | cssLoadInterval: { value: null, enumerable: false }, | ||
41 | |||
42 | /* | ||
43 | * PUBLIC API | ||
44 | */ | ||
45 | |||
46 | // GETTERS / SETTERS | ||
47 | selectionExclude: { | ||
48 | get: function() { return this._selectionExclude; }, | ||
49 | set: function(value) { this._selectionExclude = value; } | ||
50 | }, | ||
51 | |||
52 | iframe: { | ||
53 | get: function() { return this._iframe; }, | ||
54 | set: function(value) { this._iframe = value; } | ||
55 | }, | ||
56 | |||
57 | server: { | ||
58 | get: function() { return this._server; }, | ||
59 | set: function(value) { this._server = value; } | ||
60 | }, | ||
61 | |||
62 | selectionModel: { | ||
63 | get: function() { return this._selectionModel; }, | ||
64 | set: function(value) { this._selectionModel = value; } | ||
65 | }, | ||
66 | |||
67 | undoModel: { | ||
68 | get: function() { return this._undoModel; }, | ||
69 | set: function(value) { this._undoModel.queue = value.queue; this._undoModel.position = value.position; } | ||
70 | }, | ||
71 | |||
72 | documentRoot: { | ||
73 | get: function() { return this._documentRoot; }, | ||
74 | set: function(value) { this._documentRoot = value; } | ||
75 | }, | ||
76 | |||
77 | stageBG: { | ||
78 | get: function() { return this._stageBG; }, | ||
79 | set: function(value) { this._stageBG = value; } | ||
80 | }, | ||
81 | |||
82 | elementCounter: { | ||
83 | set: function(value) { this._elementCounter = value; }, | ||
84 | get: function() { return this._elementCounter; } | ||
85 | }, | ||
86 | |||
87 | snapping: { | ||
88 | get: function() { return this._snapping; }, | ||
89 | set: function(value) { | ||
90 | if(this._snapping !== value) { | ||
91 | this._snapping = value; | ||
92 | } | ||
93 | } | ||
94 | }, | ||
95 | |||
96 | // TODO SEND THE EVENT --> Redraw the desired layout | ||
97 | layoutMode: { | ||
98 | get: function() { return this._layoutMode; }, | ||
99 | set: function(mode) { this._layoutMode = mode; } | ||
100 | }, | ||
101 | |||
102 | draw3DGrid: { | ||
103 | get: function() { return this._draw3DGrid; }, | ||
104 | set: function(value) { | ||
105 | if(this._draw3DGrid !== value) { | ||
106 | this._draw3DGrid = value; | ||
107 | } | ||
108 | } | ||
109 | }, | ||
110 | |||
111 | _userComponentSet: { | ||
112 | value: {}, | ||
113 | writable: true, | ||
114 | enumerable:true | ||
115 | }, | ||
116 | |||
117 | // userComponentSet:{ | ||
118 | // enumerable: true, | ||
119 | // get: function() { | ||
120 | // return this._userComponentSet; | ||
121 | // }, | ||
122 | // set: function(value) { | ||
123 | // this._userComponentSet = value; | ||
124 | // this._drawUserComponentsOnOpen(); | ||
125 | // } | ||
126 | // }, | ||
127 | // | ||
128 | // _drawUserComponentsOnOpen:{ | ||
129 | // value:function(){ | ||
130 | // for(var i in this._userComponentSet){ | ||
131 | // console.log(this._userComponentSet[i].control) | ||
132 | // this._userComponentSet[i].control.needsDraw = true; | ||
133 | // } | ||
134 | // } | ||
135 | // }, | ||
136 | |||
137 | glData: { | ||
138 | get: function() | ||
139 | { | ||
140 | var elt = this.iframe; | ||
141 | var elt = this.iframe.contentWindow.document.getElementById("UserContent"); | ||
142 | this._glData = null; | ||
143 | if (elt) | ||
144 | { | ||
145 | this._glData = new Array(); | ||
146 | this.collectGLData( elt, this._glData ); | ||
147 | } | ||
148 | |||
149 | return this._glData | ||
150 | }, | ||
151 | |||
152 | set: function(value) | ||
153 | { | ||
154 | var nWorlds = value.length; | ||
155 | for (var i=0; i<nWorlds; i++) | ||
156 | { | ||
157 | var importStr = value[i]; | ||
158 | var startIndex = importStr.indexOf( "id: " ); | ||
159 | if (startIndex >= 0) | ||
160 | { | ||
161 | var endIndex = importStr.indexOf( "\n", startIndex ); | ||
162 | if (endIndex > 0) | ||
163 | { | ||
164 | var id = importStr.substring( startIndex+4, endIndex ); | ||
165 | var canvas = this.iframe.contentWindow.document.getElementById( id ); | ||
166 | if (canvas) | ||
167 | { | ||
168 | if (!canvas.elementModel) | ||
169 | { | ||
170 | NJUtils.makeElementModel(canvas, "Canvas", "shape", true); | ||
171 | } | ||
172 | |||
173 | if (canvas.elementModel) | ||
174 | { | ||
175 | if (canvas.elementModel.shapeModel.GLWorld) | ||
176 | canvas.elementModel.shapeModel.GLWorld.clearTree(); | ||
177 | |||
178 | var world = new GLWorld( canvas ); | ||
179 | canvas.elementModel.shapeModel.GLWorld = world; | ||
180 | world.import( importStr ); | ||
181 | } | ||
182 | } | ||
183 | } | ||
184 | } | ||
185 | } | ||
186 | } | ||
187 | }, | ||
188 | |||
189 | zoomFactor: { | ||
190 | get: function() { return this._zoomFactor; }, | ||
191 | set: function(value) { this._zoomFactor = value; } | ||
192 | }, | ||
193 | |||
194 | //****************************************// | ||
195 | // PUBLIC METHODS | ||
196 | initialize: { | ||
197 | value: function(doc, uuid, iframe, callback) { | ||
198 | // Shell mode is not used anymore | ||
199 | //if(!window.IsInShellMode()) { | ||
200 | |||
201 | this.init("index-cloud", this._cloudTemplateUri, doc.type, iframe, uuid, callback); | ||
202 | /* | ||
203 | } else { | ||
204 | var tmpurl = doc.uri.split('\\'); | ||
205 | var fileUrl = doc.server.url + "/" + tmpurl[tmpurl.length -1] + "?fileio=true&template=/user-document-templates/montage-application/index.html"; | ||
206 | this.init(name, fileUrl, doc.type, iframe, uuid, callback); | ||
207 | this.server = doc.server; | ||
208 | this._initialUserDocument = doc; | ||
209 | } | ||
210 | */ | ||
211 | this.iframe = iframe; | ||
212 | this.selectionExclude = ["HTML", "BODY", "Viewport", "UserContent", "stageBG"]; | ||
213 | this.currentView = "design"; | ||
214 | |||
215 | this._loadDocument(this.uri); | ||
216 | } | ||
217 | }, | ||
218 | |||
219 | collectGLData: { | ||
220 | value: function( elt, dataArray ) | ||
221 | { | ||
222 | if (elt.elementModel && elt.elementModel.shapeModel && elt.elementModel.shapeModel.GLWorld) | ||
223 | { | ||
224 | var data = elt.elementModel.shapeModel.GLWorld.export(); | ||
225 | dataArray.push( data ); | ||
226 | } | ||
227 | |||
228 | if (elt.children) | ||
229 | { | ||
230 | var nKids = elt.children.length; | ||
231 | for (var i=0; i<nKids; i++) | ||
232 | { | ||
233 | var child = elt.children[i]; | ||
234 | this.collectGLData( child, dataArray ); | ||
235 | } | ||