Switching DOM Mutation Events to HTML5

author: Jose Antonio Marquez 2012-05-02 14:18:05 -0700
committer: Jose Antonio Marquez 2012-05-02 14:18:05 -0700
commit: ca6c4961649836ca175b235cbb0b261b5f9fb307 (patch)
tree: 17fdb4dd37c4f8ebd03d457a28374b5b95a483ec /js/document
parent: 0df733dd19dc009f3274269dff970e9130ab48b4 (diff)
download: ninja-ca6c4961649836ca175b235cbb0b261b5f9fb307.tar.gz
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, {
    },
    ////////////////////////////////////////////////////////////////////
        //
+        _observer: {
+        value: {head: null, body: null}
+    },
+    ////////////////////////////////////////////////////////////////////
+        //
        content: {
        value: null
    },
@@ -64,7 +69,7 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
                //Storing callback for dispatch ready
                this._callback = callback;
                //Adding listener to know when template is loaded to then load user content
-                this.iframe.addEventListener("load", this.onTemplateLoad.bind(this), true);
+                this.iframe.addEventListener("load", this.onTemplateLoad.bind(this), false);
                //TODO: Add source parameter and root (optional)
                this.iframe.src = "js/document/templates/montage-web/index.html";
        }
@@ -73,6 +78,8 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
        //
    onTemplateLoad: {
        value: function (e) {
+                //Removing event
+                this.iframe.removeEventListener("load", this.onTemplateLoad.bind(this), false);
                //TODO: Improve usage of this reference
                this.document = this.iframe.contentWindow.document;
                //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, {
                //Creating temp code fragement to load head
                this._headFragment = this.document.createElement('head');
                //Adding event listener to know when head is ready, event only dispatched once when using innerHTML
-                this._headFragment.addEventListener('DOMSubtreeModified', this.insertHeadContent.bind(this), false);
+                this._observer.head = new WebKitMutationObserver(this.insertHeadContent.bind(this));
+                this._observer.head.observe(this._headFragment, {childList: true});
                //Inserting <head> HTML and parsing URLs via mediator method
                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));    
-                //Adding event listener to know when the body is ready and make callback
+                //Adding event listener to know when the body is ready and make callback (using HTML5 new DOM Mutation Events)
-                this.document.body.addEventListener('DOMSubtreeModified', this.bodyContentLoaded.bind(this), false);
+                this._observer.body = new WebKitMutationObserver(this.bodyContentLoaded.bind(this));
+                this._observer.body.observe(this.document.body, {childList: true});
                //Inserting <body> HTML and parsing URLs via mediator method
                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));
        }
@@ -98,7 +107,46 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
    bodyContentLoaded: {
        value: function (e) {
                //Removing event, only needed on initial load
-                this.document.body.removeEventListener('DOMSubtreeModified', this.bodyContentLoaded.bind(this), false);
+                this._observer.body.disconnect();
+                
+                
+                
+                
+                
+                
+                        //Temporarily checking for disabled special case
+            var stags = this.document.getElementsByTagName('style'),
+                ltags = this.document.getElementsByTagName('link');
+                //
+            for (var m = 0; m < ltags.length; m++) {
+                if (ltags[m].getAttribute('data-ninja-template') === null) {
+                        if (ltags[m].getAttribute('disabled')) {
+                                        ltags[m].removeAttribute('disabled');
+                                        ltags[m].setAttribute('data-ninja-disabled', 'true');
+                                }
+                        }
+                }
+            //
+                for (var n = 0; n < stags.length; n++) {
+                        if (stags[n].getAttribute('data-ninja-template') === null) {
+                                if (stags[n].getAttribute('disabled')) {
+                                        stags[n].removeAttribute('disabled');
+                                        stags[n].setAttribute('data-ninja-disabled', 'true');
+                        }
+                }
+            }
+                        //
+                        if(this.document.styleSheets.length > 0) {
+                                for (var i = 0; i < this.document.styleSheets.length; i++) {
+                                        console.log(i);
+                                }
+                        }
+                
+                
+                
+                
+                
+                
                //Makign callback if specified
                if (this._callback) this._callback();
        }
@@ -108,7 +156,7 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
    insertHeadContent: {
        value: function (e) {
                //Removing event
-                this._headFragment.removeEventListener('DOMSubtreeModified', this.insertHeadContent, false);
+                this._observer.head.disconnect();
                //Adding the loaded nodes from code fragment into actual document head
                for(var i in this._headFragment.childNodes) {
                        //Minor hack to know node is actual HTML node
author	Jose Antonio Marquez	2012-05-02 14:18:05 -0700
committer	Jose Antonio Marquez	2012-05-02 14:18:05 -0700
commit	ca6c4961649836ca175b235cbb0b261b5f9fb307 (patch)
tree	17fdb4dd37c4f8ebd03d457a28374b5b95a483ec /js/document
parent	0df733dd19dc009f3274269dff970e9130ab48b4 (diff)
download	ninja-ca6c4961649836ca175b235cbb0b261b5f9fb307.tar.gz

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