aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorJose Antonio Marquez2012-05-02 14:18:05 -0700
committerJose Antonio Marquez2012-05-02 14:18:05 -0700
commitca6c4961649836ca175b235cbb0b261b5f9fb307 (patch)
tree17fdb4dd37c4f8ebd03d457a28374b5b95a483ec
parent0df733dd19dc009f3274269dff970e9130ab48b4 (diff)
downloadninja-ca6c4961649836ca175b235cbb0b261b5f9fb307.tar.gz
Switching DOM Mutation Events to HTML5
-rwxr-xr-xjs/document/views/design.js60
1 files changed, 54 insertions, 6 deletions
diff --git a/js/document/views/design.js b/js/document/views/design.js
index 9fafc42f..30a74e9c 100755
--- a/js/document/views/design.js
+++ b/js/document/views/design.js
@@ -33,6 +33,11 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
33 }, 33 },
34 //////////////////////////////////////////////////////////////////// 34 ////////////////////////////////////////////////////////////////////
35 // 35 //
36 _observer: {
37 value: {head: null, body: null}
38 },
39 ////////////////////////////////////////////////////////////////////
40 //
36 content: { 41 content: {
37 value: null 42 value: null
38 }, 43 },
@@ -64,7 +69,7 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
64 //Storing callback for dispatch ready 69 //Storing callback for dispatch ready
65 this._callback = callback; 70 this._callback = callback;
66 //Adding listener to know when template is loaded to then load user content 71 //Adding listener to know when template is loaded to then load user content
67 this.iframe.addEventListener("load", this.onTemplateLoad.bind(this), true); 72 this.iframe.addEventListener("load", this.onTemplateLoad.bind(this), false);
68 //TODO: Add source parameter and root (optional) 73 //TODO: Add source parameter and root (optional)
69 this.iframe.src = "js/document/templates/montage-web/index.html"; 74 this.iframe.src = "js/document/templates/montage-web/index.html";
70 } 75 }
@@ -73,6 +78,8 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
73 // 78 //
74 onTemplateLoad: { 79 onTemplateLoad: {
75 value: function (e) { 80 value: function (e) {
81 //Removing event
82 this.iframe.removeEventListener("load", this.onTemplateLoad.bind(this), false);
76 //TODO: Improve usage of this reference 83 //TODO: Improve usage of this reference
77 this.document = this.iframe.contentWindow.document; 84 this.document = this.iframe.contentWindow.document;
78 //Looping through template styles and marking them with ninja data attribute for I/O clean up 85 //Looping through template styles and marking them with ninja data attribute for I/O clean up
@@ -84,11 +91,13 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
84 //Creating temp code fragement to load head 91 //Creating temp code fragement to load head
85 this._headFragment = this.document.createElement('head'); 92 this._headFragment = this.document.createElement('head');
86 //Adding event listener to know when head is ready, event only dispatched once when using innerHTML 93 //Adding event listener to know when head is ready, event only dispatched once when using innerHTML
87 this._headFragment.addEventListener('DOMSubtreeModified', this.insertHeadContent.bind(this), false); 94 this._observer.head = new WebKitMutationObserver(this.insertHeadContent.bind(this));
95 this._observer.head.observe(this._headFragment, {childList: true});
88 //Inserting <head> HTML and parsing URLs via mediator method 96 //Inserting <head> HTML and parsing URLs via mediator method
89 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)); 97 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));
90 //Adding event listener to know when the body is ready and make callback 98 //Adding event listener to know when the body is ready and make callback (using HTML5 new DOM Mutation Events)
91 this.document.body.addEventListener('DOMSubtreeModified', this.bodyContentLoaded.bind(this), false); 99 this._observer.body = new WebKitMutationObserver(this.bodyContentLoaded.bind(this));
100 this._observer.body.observe(this.document.body, {childList: true});
92 //Inserting <body> HTML and parsing URLs via mediator method 101 //Inserting <body> HTML and parsing URLs via mediator method
93 this.document.body.innerHTML += (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)); 102 this.document.body.innerHTML += (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));
94 } 103 }
@@ -98,7 +107,46 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
98 bodyContentLoaded: { 107 bodyContentLoaded: {
99 value: function (e) { 108 value: function (e) {
100 //Removing event, only needed on initial load 109 //Removing event, only needed on initial load
101 this.document.body.removeEventListener('DOMSubtreeModified', this.bodyContentLoaded.bind(this), false); 110 this._observer.body.disconnect();
111
112
113
114
115
116
117 //Temporarily checking for disabled special case
118 var stags = this.document.getElementsByTagName('style'),
119 ltags = this.document.getElementsByTagName('link');
120 //
121 for (var m = 0; m < ltags.length; m++) {
122 if (ltags[m].getAttribute('data-ninja-template') === null) {
123 if (ltags[m].getAttribute('disabled')) {
124 ltags[m].removeAttribute('disabled');
125 ltags[m].setAttribute('data-ninja-disabled', 'true');
126 }
127 }
128 }
129 //
130 for (var n = 0; n < stags.length; n++) {
131 if (stags[n].getAttribute('data-ninja-template') === null) {
132 if (stags[n].getAttribute('disabled')) {
133 stags[n].removeAttribute('disabled');
134 stags[n].setAttribute('data-ninja-disabled', 'true');
135 }
136 }
137 }
138 //
139 if(this.document.styleSheets.length > 0) {
140 for (var i = 0; i < this.document.styleSheets.length; i++) {
141 console.log(i);
142 }
143 }
144
145
146
147
148
149
102 //Makign callback if specified 150 //Makign callback if specified
103 if (this._callback) this._callback(); 151 if (this._callback) this._callback();
104 } 152 }
@@ -108,7 +156,7 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
108 insertHeadContent: { 156 insertHeadContent: {
109 value: function (e) { 157 value: function (e) {
110 //Removing event 158 //Removing event
111 this._headFragment.removeEventListener('DOMSubtreeModified', this.insertHeadContent, false); 159 this._observer.head.disconnect();
112 //Adding the loaded nodes from code fragment into actual document head 160 //Adding the loaded nodes from code fragment into actual document head
113 for(var i in this._headFragment.childNodes) { 161 for(var i in this._headFragment.childNodes) {
114 //Minor hack to know node is actual HTML node 162 //Minor hack to know node is actual HTML node