aboutsummaryrefslogtreecommitdiff
path: root/js
diff options
context:
space:
mode:
authorJose Antonio Marquez2012-03-05 15:55:30 -0800
committerJose Antonio Marquez2012-03-05 15:55:30 -0800
commit56efed8b1ed9974aade615fce2d96bc214d21540 (patch)
tree02ab232c4a5df53e136396ba3ec6efca4cc62a65 /js
parent195624da6d0c5d15bcde8a8655355544687ef58a (diff)
downloadninja-56efed8b1ed9974aade615fce2d96bc214d21540.tar.gz
Resolved URL path issues in document and CSS
Added logic to allow for files opened and assets linked in any order all under the cloud server root.
Diffstat (limited to 'js')
-rwxr-xr-xjs/document/html-document.js121
-rw-r--r--js/mediators/io-mediator.js63
2 files changed, 143 insertions, 41 deletions
diff --git a/js/document/html-document.js b/js/document/html-document.js
index 1e41a797..ace1390f 100755
--- a/js/document/html-document.js
+++ b/js/document/html-document.js
@@ -409,16 +409,57 @@ exports.HTMLDocument = Montage.create(TextDocument, {
409 if(!this.documentRoot.Ninja) this.documentRoot.Ninja = {}; 409 if(!this.documentRoot.Ninja) this.documentRoot.Ninja = {};
410 //Inserting user's document into template 410 //Inserting user's document into template
411 411
412 //TODO: Add logic to parse URLs from head/body 412
413
414
415
416
417
418
419
420 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
421 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
422 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
423
424 //TODO: Clean up and make public method to prepend properties with Ninja URL
413 this._templateDocument.head.innerHTML = (this._userDocument.content.head.replace(/\b(href|src)\s*=\s*"([^"]*)"/g, ninjaUrlRedirect.bind(this))).replace(/url\(([^"]*)(.+?)\1\)/g, ninjaUrlRedirect.bind(this)); 425 this._templateDocument.head.innerHTML = (this._userDocument.content.head.replace(/\b(href|src)\s*=\s*"([^"]*)"/g, ninjaUrlRedirect.bind(this))).replace(/url\(([^"]*)(.+?)\1\)/g, ninjaUrlRedirect.bind(this));
414 this._templateDocument.body.innerHTML = (this._userDocument.content.body.replace(/\b(href|src)\s*=\s*"([^"]*)"/g, ninjaUrlRedirect.bind(this))).replace(/url\(([^"]*)(.+?)\1\)/g, ninjaUrlRedirect.bind(this)); 426 this._templateDocument.body.innerHTML = (this._userDocument.content.body.replace(/\b(href|src)\s*=\s*"([^"]*)"/g, ninjaUrlRedirect.bind(this))).replace(/url\(([^"]*)(.+?)\1\)/g, ninjaUrlRedirect.bind(this));
415 // 427 //
428 //var docRootUrl = this.application.ninja.coreIoApi.rootUrl+escape((this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]).replace(/\/\//gi, '/'));
429 //
416 function ninjaUrlRedirect (prop) { 430 function ninjaUrlRedirect (prop) {
417 console.log(prop); 431 //Checking for property value to not contain a full direct URL
432 if (!prop.match(/(\b(?:(?:https?|ftp|file|[A-Za-z]+):\/\/|www\.|ftp\.)(?:\([-A-Z0-9+&@#\/%=~_|$?!:,.]*\)|[-A-Z0-9+&@#\/%=~_|$?!:,.])*(?:\([-A-Z0-9+&@#\/%=~_|$?!:,.]*\)|[A-Z0-9+&@#\/%=~_|$]))/gi)) {
433 //Checking for attributes and type of source
434 if (prop.indexOf('href') !== -1 || prop.indexOf('src') !== -1) { //From HTML attribute
435 //
436 prop = prop.replace(/"([^"]*)"/gi, ninjaUrlPrepend.bind(this));
437 } else if (prop.indexOf('url') !== -1) { //From CSS property
438 //TODO: Add functionality
439 console.log('CSS: '+prop);
440 }
441 }
418 return prop; 442 return prop;
419 } 443 }
420 // 444 //
421 445 function ninjaUrlPrepend (url) {
446 var docRootUrl = this.application.ninja.coreIoApi.rootUrl+escape((this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]).replace(/\/\//gi, '/'));
447 return '"'+docRootUrl+url.replace(/\"/gi, '')+'"';
448 }
449
450 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
451 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
452 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
453
454
455
456
457
458
459
460
461
462
422 var scripttags = this._templateDocument.html.getElementsByTagName('script'), webgldata; //TODO: Use querySelectorAll 463 var scripttags = this._templateDocument.html.getElementsByTagName('script'), webgldata; //TODO: Use querySelectorAll
423 // 464 //
424 for (var w in scripttags) { 465 for (var w in scripttags) {
@@ -493,10 +534,55 @@ exports.HTMLDocument = Montage.create(TextDocument, {
493 //If rules are null, assuming cross-origin issue 534 //If rules are null, assuming cross-origin issue
494 if(this._document.styleSheets[i].rules === null) { 535 if(this._document.styleSheets[i].rules === null) {
495 //TODO: Revisit URLs and URI creation logic, very hack right now 536 //TODO: Revisit URLs and URI creation logic, very hack right now
496 var fileUri, cssUrl, cssData, query, prefixUrl, fileCouldDirUrl; 537 var fileUri, cssUrl, cssData, query, prefixUrl, fileCouldDirUrl, docRootUrl;
538 //
539 docRootUrl = this.application.ninja.coreIoApi.rootUrl+escape((this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]).replace(/\/\//gi, '/'));
497 //TODO: Parse out relative URLs and map them to absolute 540 //TODO: Parse out relative URLs and map them to absolute
498 if (this._document.styleSheets[i].href.indexOf(chrome.extension.getURL('')) !== -1) { 541 if (this._document.styleSheets[i].href.indexOf(this.application.ninja.coreIoApi.rootUrl) !== -1) {
499 //Getting the url of the CSS file 542
543 cssUrl = this._document.styleSheets[i].href.split(this.application.ninja.coreIoApi.rootUrl)[1];
544 fileUri = this.application.ninja.coreIoApi.cloudData.root+cssUrl;
545 //TODO: Add error handling for reading file
546 cssData = this.application.ninja.coreIoApi.readFile({uri: fileUri});
547
548
549 var tag = this.iframe.contentWindow.document.createElement('style');
550 tag.setAttribute('type', 'text/css');
551 tag.setAttribute('data-ninja-uri', fileUri);
552 tag.setAttribute('data-ninja-file-url', cssUrl);
553 tag.setAttribute('data-ninja-file-read-only', JSON.parse(this.application.ninja.coreIoApi.isFileWritable({uri: fileUri}).content).readOnly);
554 tag.setAttribute('data-ninja-file-name', cssUrl.split('/')[cssUrl.split('/').length-1]);
555 //Copying attributes to maintain same properties as the <link>
556 for (var n in this._document.styleSheets[i].ownerNode.attributes) {
557 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') {
558 if (this._document.styleSheets[i].ownerNode.attributes[n].value.indexOf(docRootUrl) !== -1) {
559 tag.setAttribute(this._document.styleSheets[i].ownerNode.attributes[n].name, this._document.styleSheets[i].ownerNode.attributes[n].value.split(docRootUrl)[1]);
560 } else {
561 tag.setAttribute(this._document.styleSheets[i].ownerNode.attributes[n].name, this._document.styleSheets[i].ownerNode.attributes[n].value);
562 }
563 }
564 }
565
566 fileCouldDirUrl = this._document.styleSheets[i].href.split(this._document.styleSheets[i].href.split('/')[this._document.styleSheets[i].href.split('/').length-1])[0];
567 prefixUrl = 'url('+fileCouldDirUrl; //This should be re-written with better RegEx
568 tag.innerHTML = cssData.content.replace(/url\(/gi, prefixUrl);
569
570
571
572 //Looping through DOM to insert style tag at location of link element
573 query = this._templateDocument.html.querySelectorAll(['link']);
574 for (var j in query) {
575 if (query[j].href === this._document.styleSheets[i].href) {
576 //Disabling style sheet to reload via inserting in style tag
577 query[j].setAttribute('disabled', 'true');
578 //Inserting tag
579 this._templateDocument.head.insertBefore(tag, query[j]);
580 }
581 }
582
583
584 /*
585//Getting the url of the CSS file
500 cssUrl = this._document.styleSheets[i].href.split('js/document/templates/montage-html')[1];//TODO: Parse out relative URLs and map them to absolute 586 cssUrl = this._document.styleSheets[i].href.split('js/document/templates/montage-html')[1];//TODO: Parse out relative URLs and map them to absolute
501 //Creating the URI of the file (this is wrong should not be splitting cssUrl) 587 //Creating the URI of the file (this is wrong should not be splitting cssUrl)
502 fileUri = (this.application.ninja.coreIoApi.cloudData.root+this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]+cssUrl).replace(/\/\//gi, '/'); 588 fileUri = (this.application.ninja.coreIoApi.cloudData.root+this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]+cssUrl).replace(/\/\//gi, '/');
@@ -517,8 +603,8 @@ exports.HTMLDocument = Montage.create(TextDocument, {
517 } 603 }
518 // 604 //
519 605
520 fileCouldDirUrl = this.application.ninja.coreIoApi.rootUrl+escape((this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]+cssUrl.split(cssUrl.split('/')[cssUrl.split('/').length-1])[0]).replace(/\/\//gi, '/')); 606 //fileCouldDirUrl = this.application.ninja.coreIoApi.rootUrl+escape((this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]+cssUrl.split(cssUrl.split('/')[cssUrl.split('/').length-1])[0]).replace(/\/\//gi, '/'));
521 607 fileCouldDirUrl = this.application.ninja.coreIoApi.rootUrl+escape((this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]).replace(/\/\//gi, '/'));
522 608
523 //TODO: Fix regEx to have logic for all possible URLs strings (currently prefixing all url()) 609 //TODO: Fix regEx to have logic for all possible URLs strings (currently prefixing all url())
524 prefixUrl = 'url('+fileCouldDirUrl; //This should be re-written with better RegEx 610 prefixUrl = 'url('+fileCouldDirUrl; //This should be re-written with better RegEx
@@ -534,6 +620,25 @@ exports.HTMLDocument = Montage.create(TextDocument, {
534 this._templateDocument.head.insertBefore(tag, query[j]); 620 this._templateDocument.head.insertBefore(tag, query[j]);
535 } 621 }
536 } 622 }
623*/
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
537 } else { 642 } else {
538 console.log('ERROR: Cross-Domain-Stylesheet detected, unable to load in Ninja'); 643 console.log('ERROR: Cross-Domain-Stylesheet detected, unable to load in Ninja');
539 //None local stylesheet, probably on a CDN (locked) 644 //None local stylesheet, probably on a CDN (locked)
diff --git a/js/mediators/io-mediator.js b/js/mediators/io-mediator.js
index 5917edba..c02710c2 100644
--- a/js/mediators/io-mediator.js
+++ b/js/mediators/io-mediator.js
@@ -213,9 +213,11 @@ exports.IoMediator = Montage.create(Component, {
213 parseNinjaTemplateToHtml: { 213 parseNinjaTemplateToHtml: {
214 enumerable: false, 214 enumerable: false,
215 value: function (template) { 215 value: function (template) {
216 var regexRootUrl, rootUrl = this.application.ninja.coreIoApi.rootUrl+escape((this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]));
217 regexRootUrl = new RegExp(rootUrl.replace(/\//gi, '\\\/'), 'gi');
216 //Injecting head and body into old document 218 //Injecting head and body into old document
217 template.document.content.document.head.innerHTML = template.head; 219 template.document.content.document.head.innerHTML = template.head.replace(regexRootUrl, '');
218 template.document.content.document.body.innerHTML = template.body; 220 template.document.content.document.body.innerHTML = template.body.replace(regexRootUrl, '');
219 //Getting all CSS (style or link) tags 221 //Getting all CSS (style or link) tags
220 var styletags = template.document.content.document.getElementsByTagName('style'), 222 var styletags = template.document.content.document.getElementsByTagName('style'),
221 linktags = template.document.content.document.getElementsByTagName('link'),