Fixed URL parsing issue on actual opened document

Still need to implement CSS loaded from a CDN, currently this would break Ninja.

2 files changed, 84 insertions, 6 deletions

diff --git a/js/document/html-document.js b/js/document/html-document.js
index ace1390f..a3424259 100755
--- a/js/document/html-document.js
+++ b/js/document/html-document.js
@@ -436,7 +436,14 @@ exports.HTMLDocument = Montage.create(TextDocument, {
                                 prop = prop.replace(/"([^"]*)"/gi, ninjaUrlPrepend.bind(this));
                         } else if (prop.indexOf('url') !== -1) { //From CSS property
                                 //TODO: Add functionality
-                                console.log('CSS: '+prop);
+                                var docRootUrl = this.application.ninja.coreIoApi.rootUrl+escape((this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]).replace(/\/\//gi, '/'));
+                                prop = prop.replace(/[^()\\""\\'']+/g, test);
+                                function test (s) {
+                                        if (s !== 'url') {
+                                                s = docRootUrl + s;
+                                        }
+                                        return s;
+                                }
                         }
                     }
                 return prop;
@@ -643,11 +650,24 @@ exports.HTMLDocument = Montage.create(TextDocument, {
                                                                 console.log('ERROR: Cross-Domain-Stylesheet detected, unable to load in Ninja');
                                                                 //None local stylesheet, probably on a CDN (locked)
                                                                 /*
-tag = this.iframe.contentWindow.document.createElement('style');
+var tag = this.iframe.contentWindow.document.createElement('style');
                                                                 tag.setAttribute('type', 'text/css');
                                                                 tag.setAttribute('data-ninja-external-url', this._document.styleSheets[i].href);
                                                                 tag.setAttribute('data-ninja-file-read-only', "true");
                                                                 tag.setAttribute('data-ninja-file-name', this._document.styleSheets[i].href.split('/')[this._document.styleSheets[i].href.split('/').length-1]);
+                                                                //Copying attributes to maintain same properties as the <link>
+                                                                for (var n in this._document.styleSheets[i].ownerNode.attributes) {
+                                                                        if (this._document.styleSheets[i].ownerNode.attributes[n].value && this._document.styleSheets[i].ownerNode.attributes[n].name !== 'disabled' && this._document.styleSheets[i].ownerNode.attributes[n].name !== 'disabled') {
+                                                                                if (this._document.styleSheets[i].ownerNode.attributes[n].value.indexOf(docRootUrl) !== -1) {
+                                                                                        tag.setAttribute(this._document.styleSheets[i].ownerNode.attributes[n].name, this._document.styleSheets[i].ownerNode.attributes[n].value.split(docRootUrl)[1]);
+                                                                                } else {
+                                                                                        tag.setAttribute(this._document.styleSheets[i].ownerNode.attributes[n].name, this._document.styleSheets[i].ownerNode.attributes[n].value);
+                                                                                }
+                                                                        }
+                                                                }
+                                                                
+                                                                
+                                                                
                                                                 
                                                                 //TODO: Figure out cross-domain XHR issue, might need cloud to handle
                                                                 var xhr = new XMLHttpRequest();
@@ -658,7 +678,6 @@ tag = this.iframe.contentWindow.document.createElement('style');
                                                 console.log(xhr);
                                         }
                                         //tag.innerHTML = xhr.responseText //xhr.response;
-                                                                
                                                                 //Currently no external styles will load if unable to load via XHR request
                                                                 
                                                                 //Disabling external style sheets
diff --git a/js/mediators/io-mediator.js b/js/mediators/io-mediator.js
index c02710c2..d6b4bd37 100644
--- a/js/mediators/io-mediator.js
+++ b/js/mediators/io-mediator.js
@@ -228,6 +228,8 @@ exports.IoMediator = Montage.create(Component, {
                                 if (styletags[j].getAttribute) {
                                         if(styletags[j].getAttribute('data-ninja-uri') !== null && !styletags[j].getAttribute('data-ninja-template')) {
                                                 toremovetags.push(styletags[j]);
+                                        } else if (styletags[j].getAttribute('data-ninja-external-url')) {
+                                                toremovetags.push(styletags[j]);
                                         }
                                 }
                         }
@@ -342,9 +344,13 @@ exports.IoMediator = Montage.create(Component, {
                                                                 fileUrl = template.css[i].ownerNode.getAttribute('data-ninja-file-url'),
                                                                 fileRootUrl = this.application.ninja.coreIoApi.rootUrl+fileUrl.split(fileUrl.split('/')[fileUrl.split('/').length-1])[0],
                                                                 cleanedCss = dirtyCss.replace(/(\b(?:(?:https?|ftp|file|[A-Za-z]+):\/\/|www\.|ftp\.)(?:\([-A-Z0-9+&@#\/%=~_|$?!:,.]*\)|[-A-Z0-9+&@#\/%=~_|$?!:,.])*(?:\([-A-Z0-9+&@#\/%=~_|$?!:,.]*\)|[A-Z0-9+&@#\/%=~_|$]))/gi, parseNinjaUrl.bind(this));
-                                                                                                                
-                                                        
+                                                                
                                                         function parseNinjaUrl (url) {
+                                                                return this.getUrlfromNinjaUrl(url, fileRootUrl, fileUrl);
+                                                        }
+                                                        
+                                                        /*
+function parseNinjaUrl (url) {
                                                                 //console.log("Getting: " + url);
                                                                 //
                                                                 if (url.indexOf(fileRootUrl) !== -1) {
@@ -376,6 +382,7 @@ exports.IoMediator = Montage.create(Component, {
                                                                 //console.log("-----");
                                                                 return url;
                                                         }
+*/
                                                         
                                                         ///////////////////////////////////////////////////////////////////////////////////////////
                                                         ///////////////////////////////////////////////////////////////////////////////////////////
@@ -433,8 +440,60 @@ exports.IoMediator = Montage.create(Component, {
                         //Setting string in tag
                         webgltag.innerHTML = json;
                 }
+                var cleanHTML = template.document.content.document.documentElement.outerHTML.replace(/(\b(?:(?:https?|ftp|file|[A-Za-z]+):\/\/|www\.|ftp\.)(?:\([-A-Z0-9+&@#\/%=~_|$?!:,.]*\)|[-A-Z0-9+&@#\/%=~_|$?!:,.])*(?:\([-A-Z0-9+&@#\/%=~_|$?!:,.]*\)|[A-Z0-9+&@#\/%=~_|$]))/gi, parseNinjaRootUrl.bind(this));
+                console.log(this.getPrettyHtml(cleanHTML.replace(this.getAppTemplatesUrlRegEx(), '')));
+                function parseNinjaRootUrl (url) {
+                        if (url.indexOf(this.application.ninja.coreIoApi.rootUrl) !== -1) {
+                                return this.getUrlfromNinjaUrl(url, rootUrl, rootUrl.replace(new RegExp((this.application.ninja.coreIoApi.rootUrl).replace(/\//gi, '\\\/'), 'gi'), '')+'file.ext');//Wrong parameters
+                        } else {
+                                return url;
+                        }
+                }                       
+                        //console.log(rootUrl, this.application.ninja.coreIoApi.rootUrl, this.application.ninja.documentController.documentHackReference.root, this.application.ninja.coreIoApi.cloudData.root);
+                //console.log(this.getPrettyHtml(template.document.content.document.documentElement.outerHTML));
+                return;
+                //
+                return this.getPrettyHtml(cleanHTML.replace(this.getAppTemplatesUrlRegEx(), ''));
+        }
+    },
+    ////////////////////////////////////////////////////////////////////
+    //
+    getUrlfromNinjaUrl: {
+        enumerable: false,
+        value: function (url, fileRootUrl, fileUrl) {
+                //console.log("Params: ", url, fileRootUrl, fileUrl);
+                //console.log("Getting: " + url);
+                //
+                if (url.indexOf(fileRootUrl) !== -1) {
+                        url = url.replace(new RegExp(fileRootUrl.replace(/\//gi, '\\\/'), 'gi'), '');
+                } else {
+                        //TODO: Clean up vars
+                        var assetsDirs = (url.replace(new RegExp((this.application.ninja.coreIoApi.rootUrl).replace(/\//gi, '\\\/'), 'gi'), '')).split('/');
+                        var fileDirs = (fileUrl.split(fileUrl.split('/')[fileUrl.split('/').length-1])[0]).split('/');
+                        var counter = 0;
+                        var path = '';
+                        var newURL = '';
+                        //
+                        for (var p=0; p < fileDirs.length-1; p++) {
+                                if (fileDirs[p] === assetsDirs[p]) {
+                                        counter++;
+                                }
+                        }
+                        //
+                        for (var p=0; p < (fileDirs.length-counter)-1; p++) {
+                                path += '../';
+                        }
+                        //
+                        for (var p=counter; p < assetsDirs.length; p++) {
+                                newURL += '/'+assetsDirs[p];
+                        }
+                        //
+                                url = (path+newURL).replace(/\/\//gi, '/');
+                        }
+                //console.log("Returning: " + url);
+                //console.log("-----");
                 //
-                return this.getPrettyHtml(template.document.content.document.documentElement.outerHTML.replace(this.getAppTemplatesUrlRegEx(), ''));
+                return url;
         }
     },
     ////////////////////////////////////////////////////////////////////