diff options
author | Jose Antonio Marquez | 2012-03-05 15:55:30 -0800 |
---|---|---|
committer | Jose Antonio Marquez | 2012-03-05 15:55:30 -0800 |
commit | 56efed8b1ed9974aade615fce2d96bc214d21540 (patch) | |
tree | 02ab232c4a5df53e136396ba3ec6efca4cc62a65 /js | |
parent | 195624da6d0c5d15bcde8a8655355544687ef58a (diff) | |
download | ninja-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-x | js/document/html-document.js | 121 | ||||
-rw-r--r-- | js/mediators/io-mediator.js | 63 |
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 |