aboutsummaryrefslogtreecommitdiff
path: root/js/document/views
diff options
context:
space:
mode:
Diffstat (limited to 'js/document/views')
-rwxr-xr-xjs/document/views/base.js46
-rwxr-xr-xjs/document/views/design.js193
2 files changed, 232 insertions, 7 deletions
diff --git a/js/document/views/base.js b/js/document/views/base.js
index 50c0a78d..d1c65b5e 100755
--- a/js/document/views/base.js
+++ b/js/document/views/base.js
@@ -7,15 +7,57 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
7//////////////////////////////////////////////////////////////////////// 7////////////////////////////////////////////////////////////////////////
8// 8//
9var Montage = require("montage/core/core").Montage, 9var Montage = require("montage/core/core").Montage,
10 Component = require("montage/ui/component").Component; 10 Component = require("montage/ui/component").Component,
11 UrlParser = require("js/document/helpers/url-parser").UrlParser;
11//////////////////////////////////////////////////////////////////////// 12////////////////////////////////////////////////////////////////////////
12// 13//
13exports.BaseDocumentView = Montage.create(Component, { 14exports.BaseDocumentView = Montage.create(Component, {
14 //////////////////////////////////////////////////////////////////// 15 ////////////////////////////////////////////////////////////////////
15 // 16 //
16 hasTemplate: { 17 hasTemplate: {
17 enumerable: false,
18 value: false 18 value: false
19 },
20 ////////////////////////////////////////////////////////////////////
21 //
22 urlParser: {
23 value: UrlParser
24 },
25 ////////////////////////////////////////////////////////////////////
26 //
27 _iframe: {
28 value: null
29 },
30 ////////////////////////////////////////////////////////////////////
31 //
32 iframe: {
33 get: function() {return this._iframe;},
34 set: function(value) {this._iframe= value;}
35 },
36 ////////////////////////////////////////////////////////////////////
37 //
38 show: {
39 value: function (callback) {
40 if (this.iframe) {
41 this.iframe.style.display = 'block';
42 } else {
43 console.log('Error: View has no iframe to show!');
44 }
45 //
46 if (callback) callback();
47 }
48 },
49 ////////////////////////////////////////////////////////////////////
50 //
51 hide: {
52 value: function (callback) {
53 if (this.iframe) {
54 this.iframe.style.display = 'none';
55 } else {
56 console.log('Error: View has no iframe to hide!');
57 }
58 //
59 if (callback) callback();
60 }
19 } 61 }
20 //////////////////////////////////////////////////////////////////// 62 ////////////////////////////////////////////////////////////////////
21 //////////////////////////////////////////////////////////////////// 63 ////////////////////////////////////////////////////////////////////
diff --git a/js/document/views/design.js b/js/document/views/design.js
index 84871257..fa9d412e 100755
--- a/js/document/views/design.js
+++ b/js/document/views/design.js
@@ -7,17 +7,200 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
7//////////////////////////////////////////////////////////////////////// 7////////////////////////////////////////////////////////////////////////
8// 8//
9var Montage = require("montage/core/core").Montage, 9var Montage = require("montage/core/core").Montage,
10 Component = require("montage/ui/component").Component, 10 BaseDocumentView = require("js/document/views/base").BaseDocumentView;
11 CodeDocumentView = require("js/document/views/code").CodeDocumentView;
12//////////////////////////////////////////////////////////////////////// 11////////////////////////////////////////////////////////////////////////
13// 12//
14exports.DesignDocumentView = Montage.create(CodeDocumentView, { 13exports.DesignDocumentView = Montage.create(BaseDocumentView, {
15 //////////////////////////////////////////////////////////////////// 14 ////////////////////////////////////////////////////////////////////
16 // 15 //
17 hasTemplate: { 16 hasTemplate: {
18 enumerable: false,
19 value: false 17 value: false
20 } 18 },
19 ////////////////////////////////////////////////////////////////////
20 //
21 _callback: {
22 value: null
23 },
24 ////////////////////////////////////////////////////////////////////
25 //
26 _document: {
27 value: null
28 },
29 ////////////////////////////////////////////////////////////////////
30 //
31 _headFragment: {
32 value: null
33 },
34 ////////////////////////////////////////////////////////////////////
35 //
36 _observer: {
37 value: {head: null, body: null}
38 },
39 ////////////////////////////////////////////////////////////////////
40 //
41 content: {
42 value: null
43 },
44 ////////////////////////////////////////////////////////////////////
45 //
46 document: {
47 get: function() {return this._document;},
48 set: function(value) {this._document = value;}
49 },
50 ////////////////////////////////////////////////////////////////////
51 //
52 initiliaze: {
53 value: function (parent) {
54 //Creating iFrame for view
55 this.iframe = document.createElement("iframe");
56 //Setting default styles
57 this.iframe.style.border = "none";
58 this.iframe.style.background = "#FFF";
59 this.iframe.style.height = "100%";
60 this.iframe.style.width = "100%";
61 //Returning reference to iFrame created
62 return parent.appendChild(this.iframe);
63 }
64 },
65 ////////////////////////////////////////////////////////////////////
66 //
67 render: {
68 value: function (callback) {
69 //Storing callback for dispatch ready
70 this._callback = callback;
71 //Adding listener to know when template is loaded to then load user content
72 this.iframe.addEventListener("load", this.onTemplateLoad.bind(this), false);
73 //TODO: Add source parameter and root (optional)
74 this.iframe.src = "js/document/templates/montage-web/index.html";
75 }
76 },
77 ////////////////////////////////////////////////////////////////////
78 //
79 onTemplateLoad: {
80 value: function (e) {
81 //Removing event
82 this.iframe.removeEventListener("load", this.onTemplateLoad.bind(this), false);
83 //TODO: Improve usage of this reference
84 this.document = this.iframe.contentWindow.document;
85 //Looping through template styles and marking them with ninja data attribute for I/O clean up
86 for (var k in this.document.styleSheets) {
87 if (this.document.styleSheets[k].ownerNode && this.document.styleSheets[k].ownerNode.setAttribute) {
88 this.document.styleSheets[k].ownerNode.setAttribute('data-ninja-template', 'true');
89 }
90 }
91
92 //Creating temp code fragement to load head
93 this._headFragment = this.document.createElement('head');
94 //Adding event listener to know when head is ready, event only dispatched once when using innerHTML
95 this._observer.head = new WebKitMutationObserver(this.insertHeadContent.bind(this));
96 this._observer.head.observe(this._headFragment, {childList: true});
97 //Inserting <head> HTML and parsing URLs via mediator method
98 this._headFragment.innerHTML = (this.content.head.replace(/\b(href|src)\s*=\s*"([^"]*)"/g, this.application.ninja.ioMediator.getNinjaPropUrlRedirect.bind(this.application.ninja.ioMediator))).replace(/url\(([^"]*)(.+?)\1\)/g, this.application.ninja.ioMediator.getNinjaPropUrlRedirect.bind(this.application.ninja.ioMediator));
99 //Adding event listener to know when the body is ready and make callback (using HTML5 new DOM Mutation Events)
100 this._observer.body = new WebKitMutationObserver(this.bodyContentLoaded.bind(this));
101 this._observer.body.observe(this.document.body, {childList: true});
102 //Inserting <body> HTML and parsing URLs via mediator method
103 this.document.body.innerHTML += '<ninjaloadinghack></ninjaloadinghack>'+(this.content.body.replace(/\b(href|src)\s*=\s*"([^"]*)"/g, this.application.ninja.ioMediator.getNinjaPropUrlRedirect.bind(this.application.ninja.ioMediator))).replace(/url\(([^"]*)(.+?)\1\)/g, this.application.ninja.ioMediator.getNinjaPropUrlRedirect.bind(this.application.ninja.ioMediator));
104 }
105 },
106 ////////////////////////////////////////////////////////////////////
107 //
108 bodyContentLoaded: {
109 value: function (e) {
110 //Removing event, only needed on initial load
111 this._observer.body.disconnect();
112 //Removing loading container
113 this.document.body.removeChild(this.document.getElementsByTagName('ninjaloadinghack')[0]);
114
115
116
117
118
119
120
121
122 //Temporarily checking for disabled special case
123 var stags = this.document.getElementsByTagName('style'),
124 ltags = this.document.getElementsByTagName('link');
125 //
126 for (var m = 0; m < ltags.length; m++) {
127 if (ltags[m].getAttribute('data-ninja-template') === null) {
128 if (ltags[m].getAttribute('disabled')) {
129 ltags[m].removeAttribute('disabled');
130 ltags[m].setAttribute('data-ninja-disabled', 'true');
131 }
132 }
133 }
134 //
135 for (var n = 0; n < stags.length; n++) {
136 if (stags[n].getAttribute('data-ninja-template') === null) {
137 if (stags[n].getAttribute('disabled')) {
138 stags[n].removeAttribute('disabled');
139 stags[n].setAttribute('data-ninja-disabled', 'true');
140 }
141 }
142 }
143 //
144 if(this.document.styleSheets.length > 0) {
145 for (var i = 0; i < this.document.styleSheets.length; i++) {
146 //
147 }
148 }
149
150
151
152
153
154
155