diff options
author | Jose Antonio Marquez | 2012-05-01 15:26:37 -0700 |
---|---|---|
committer | Jose Antonio Marquez | 2012-05-01 15:26:37 -0700 |
commit | 4ba680a7e9168d0f505a81e42a287dfbc54b4d7d (patch) | |
tree | 861610e3676bdcfd5d1e54ce268fdceb66016238 /js/document/document-html.js | |
parent | 7812925f6864a6f3a01e4a76924dc5c71706ff37 (diff) | |
download | ninja-4ba680a7e9168d0f505a81e42a287dfbc54b4d7d.tar.gz |
Preliminary IO to new DOM view
Diffstat (limited to 'js/document/document-html.js')
-rwxr-xr-x | js/document/document-html.js | 191 |
1 files changed, 72 insertions, 119 deletions
diff --git a/js/document/document-html.js b/js/document/document-html.js index 28406ee8..ad82c371 100755 --- a/js/document/document-html.js +++ b/js/document/document-html.js | |||
@@ -7,117 +7,108 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
7 | //////////////////////////////////////////////////////////////////////// | 7 | //////////////////////////////////////////////////////////////////////// |
8 | // | 8 | // |
9 | var Montage = require("montage/core/core").Montage, | 9 | var Montage = require("montage/core/core").Montage, |
10 | Component = require("montage/ui/component").Component; | 10 | Component = require("montage/ui/component").Component, |
11 | HtmlDocumentModel = require("js/document/models/html").HtmlDocumentModel; | 11 | HtmlDocumentModel = require("js/document/models/html").HtmlDocumentModel, |
12 | DesignDocumentView = require("js/document/views/design").DesignDocumentView; | ||
12 | //////////////////////////////////////////////////////////////////////// | 13 | //////////////////////////////////////////////////////////////////////// |
13 | // | 14 | // |
14 | exports.HtmlDocument = Montage.create(Component, { | 15 | exports.HtmlDocument = Montage.create(Component, { |
15 | //////////////////////////////////////////////////////////////////// | 16 | //////////////////////////////////////////////////////////////////// |
16 | // | 17 | // |
17 | hasTemplate: { | 18 | hasTemplate: { |
18 | enumerable: false, | ||
19 | value: false | 19 | value: false |
20 | }, | 20 | }, |
21 | //////////////////////////////////////////////////////////////////// | 21 | //////////////////////////////////////////////////////////////////// |
22 | // | 22 | // |
23 | model: { | 23 | model: { |
24 | enumerable: false, | ||
25 | value: null | 24 | value: null |
26 | }, | 25 | }, |
27 | //////////////////////////////////////////////////////////////////// | 26 | //////////////////////////////////////////////////////////////////// |
28 | // | ||
29 | loadDelegate: { | ||
30 | enumerable: false, | ||
31 | value: null | ||
32 | }, | ||
33 | //////////////////////////////////////////////////////////////////// | ||
34 | // | 27 | // |
35 | delegateContext: { | 28 | _document: { |
36 | enumerable: false, | 29 | value: null //TODO: Figure out if this will be needed, probably not |
37 | value: null | ||
38 | }, | 30 | }, |
39 | //////////////////////////////////////////////////////////////////// | 31 | //////////////////////////////////////////////////////////////////// |
40 | // | 32 | // |
41 | exclusionList: { | 33 | exclusionList: { |
42 | enumerable: false, | 34 | value: [] //TODO: Update to correct list |
43 | value: ["HTML", "BODY"] | ||
44 | }, | 35 | }, |
45 | //////////////////////////////////////////////////////////////////// | 36 | //////////////////////////////////////////////////////////////////// |
46 | //////////////////////////////////////////////////////////////////// | 37 | // |
47 | //TODO: Remove these setters/getters, should call model directly | ||
48 | name: { | ||
49 | get: function() { | ||
50 | return this.model._name; | ||
51 | }, | ||
52 | set: function(value) { | ||
53 | this.model._name = value; | ||
54 | } | ||
55 | }, | ||
56 | // | ||
57 | isActive: { | ||
58 | get: function() { | ||
59 | return this.model._isActive; | ||
60 | }, | ||
61 | set: function(value) { | ||
62 | this.model._isActive = value; | ||
63 | } | ||
64 | }, | ||
65 | // | ||
66 | needsSave: { | ||
67 | get: function() { | ||
68 | return this.model._needsSave; | ||
69 | }, | ||
70 | set: function(value) { | ||
71 | this.model._needsSave = value; | ||
72 | } | ||
73 | }, | ||
74 | // | ||
75 | uuid: { | 38 | uuid: { |
76 | get: function() { | 39 | get: function() { |
77 | return this._uuid; | 40 | return this._uuid; |
78 | } | 41 | } |
79 | }, | 42 | }, |
80 | // | 43 | //////////////////////////////////////////////////////////////////// |
81 | currentView: { | 44 | // |
82 | value: "design" | 45 | inExclusion: { |
83 | }, | 46 | value: function(element) { |
84 | //////////////////////////////////////////////////////////////////// | 47 | if(this.exclusionList.indexOf(element.nodeName) === -1) { |
85 | //////////////////////////////////////////////////////////////////// | 48 | return -1; |
86 | // | 49 | } |
87 | iframe: { //MOVE TO: base.js in views | 50 | return 1; |
88 | value: null | ||
89 | }, | ||
90 | // | ||
91 | createView: { //MOVE TO: design.js in views | ||
92 | value: function() { | ||
93 | var ifr = document.createElement("iframe"); | ||
94 | // | ||
95 | ifr.id = "document_" + this._uuid; | ||
96 | ifr.style.border = "none"; | ||
97 | ifr.style.background = "#FFF"; | ||
98 | ifr.style.height = "100%"; | ||
99 | ifr.style.width = "100%"; | ||
100 | // | ||
101 | ifr.src = "js/document/templates/montage-web/index.html"; | ||
102 | ifr.addEventListener("load", this.handleWebTemplateLoad.bind(this), true); | ||
103 | // | ||
104 | return document.getElementById("iframeContainer").appendChild(ifr); | ||
105 | } | 51 | } |
106 | }, | 52 | }, |
107 | //////////////////////////////////////////////////////////////////// | 53 | //////////////////////////////////////////////////////////////////// |
108 | //////////////////////////////////////////////////////////////////// | ||
109 | // | 54 | // |
110 | init: { | 55 | init: { |
111 | value:function(file, context, callback) { | 56 | value:function(file, context, callback, view) { |
112 | this.model = Montage.create(HtmlDocumentModel, { | 57 | //Creating instance of HTML Document Model |
113 | file: { | 58 | this.model = Montage.create(HtmlDocumentModel,{ |
114 | value: file | 59 | file: {value: file}, |
115 | } | 60 | views: {value: {'design': DesignDocumentView.create(), 'code': null}} //TODO: Add code view logic |
116 | }); | 61 | }); |
117 | this.name = file.name; | 62 | //Initiliazing views and hiding |
118 | this.iframe = this.createView(); | 63 | if (this.model.views.design.initiliaze(document.getElementById("iframeContainer"))) { |
119 | this.delegateContext = context; | 64 | //Hiding iFrame, just initiliazing |
120 | this.loadDelegate = callback; | 65 | this.model.views.design.hide(); |
66 | } else { | ||
67 | //ERROR: Design View not initilized | ||
68 | } | ||
69 | // | ||
70 | if (view === 'design') { | ||
71 | //Showing design iFrame | ||
72 | this.model.views.design.show(); | ||
73 | this.model.views.design.iframe.style.opacity = 0; | ||
74 | this.model.views.design.content = this.model.file.content; | ||
75 | // | ||
76 | this.model.views.design.render(function () { | ||
77 | //Setting opacity to be viewable after load | ||
78 | this.model.views.design.iframe.style.opacity = 1; | ||
79 | |||
80 | |||
81 | |||
82 | |||
83 | //TODO: Identify and remove usage of '_document' | ||
84 | this._document = this.model.views.design.document; | ||
85 | //TODO: Check for needed | ||
86 | this.documentRoot = this.model.views.design.document.body; | ||
87 | // | ||
88 | this._liveNodeList = this.documentRoot.getElementsByTagName('*'); | ||
89 | // | ||
90 | document.application.njUtils.makeElementModel(this.documentRoot, "Body", "body"); | ||
91 | |||
92 | |||
93 | |||
94 | |||
95 | this.hack = {callback: callback, context: context}; | ||
96 | |||
97 | setTimeout(function () { | ||
98 | //Making callback after view is loaded | ||
99 | this.hack.callback.call(this.hack.context, this); | ||
100 | }.bind(this), 1000); | ||
101 | |||
102 | |||
103 | |||
104 | |||
105 | |||
106 | |||
107 | |||
108 | }.bind(this)); | ||
109 | } else { | ||
110 | //TODO: Identify default view (probably code) | ||
111 | } | ||
121 | } | 112 | } |
122 | }, | 113 | }, |
123 | //////////////////////////////////////////////////////////////////// | 114 | //////////////////////////////////////////////////////////////////// |
@@ -137,21 +128,9 @@ exports.HtmlDocument = Montage.create(Component, { | |||
137 | } | 128 | } |
138 | } | 129 | } |
139 | 130 | ||
140 | // TODO: We don't need this anymore -> need to setup the main container still | ||
141 | //Adding a handler for the main user document reel to finish loading | ||
142 | // this.documentRoot.addEventListener("userTemplateDidLoad", this.userTemplateDidLoad.bind(this), false); | ||
143 | |||
144 | // Live node list of the current loaded document | 131 | // Live node list of the current loaded document |
145 | this._liveNodeList = this.documentRoot.getElementsByTagName('*'); | 132 | this._liveNodeList = this.documentRoot.getElementsByTagName('*'); |
146 | 133 | ||
147 | // TODO Move this to the appropriate location | ||
148 | /* | ||
149 | var len = this._liveNodeList.length; | ||
150 | |||
151 | for(var i = 0; i < len; i++) { | ||
152 | NJUtils.makeModelFromElement(this._liveNodeList[i]); | ||
153 | } | ||
154 | */ | ||
155 | 134 | ||
156 | setTimeout(function () { | 135 | setTimeout(function () { |
157 | 136 | ||
@@ -322,32 +301,6 @@ exports.HtmlDocument = Montage.create(Component, { | |||
322 | 301 | ||
323 | }.bind(this), 1000); | 302 | }.bind(this), 1000); |
324 | } | 303 | } |
325 | }, | ||