diff options
author | Jose Antonio Marquez | 2012-03-05 23:18:49 -0800 |
---|---|---|
committer | Jose Antonio Marquez | 2012-03-05 23:18:49 -0800 |
commit | 4f274aa5beff735f63905704e52e6ea938c140d9 (patch) | |
tree | 3849000a0cbb26894257343b0afc639af6547232 | |
parent | a68fe3f0180f5ab3304ff201be8da40c4432bd40 (diff) | |
download | ninja-4f274aa5beff735f63905704e52e6ea938c140d9.tar.gz |
Temp support for CDN CSS
Added a temp fix for allow the viewing of CSS on a CDN, however, the styles should not be editable, but will allow for accurate preview of styles. Need to coordinate with the CSS panel and styles manager to insert styles in the appropriate files or tags that have write permission.
-rwxr-xr-x | js/document/html-document.js | 87 | ||||
-rw-r--r-- | js/mediators/io-mediator.js | 48 |
2 files changed, 13 insertions, 122 deletions
diff --git a/js/document/html-document.js b/js/document/html-document.js index a3424259..323c1488 100755 --- a/js/document/html-document.js +++ b/js/document/html-document.js | |||
@@ -546,13 +546,12 @@ exports.HTMLDocument = Montage.create(TextDocument, { | |||
546 | docRootUrl = this.application.ninja.coreIoApi.rootUrl+escape((this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]).replace(/\/\//gi, '/')); | 546 | docRootUrl = this.application.ninja.coreIoApi.rootUrl+escape((this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]).replace(/\/\//gi, '/')); |
547 | //TODO: Parse out relative URLs and map them to absolute | 547 | //TODO: Parse out relative URLs and map them to absolute |
548 | if (this._document.styleSheets[i].href.indexOf(this.application.ninja.coreIoApi.rootUrl) !== -1) { | 548 | if (this._document.styleSheets[i].href.indexOf(this.application.ninja.coreIoApi.rootUrl) !== -1) { |
549 | 549 | // | |
550 | cssUrl = this._document.styleSheets[i].href.split(this.application.ninja.coreIoApi.rootUrl)[1]; | 550 | cssUrl = this._document.styleSheets[i].href.split(this.application.ninja.coreIoApi.rootUrl)[1]; |
551 | fileUri = this.application.ninja.coreIoApi.cloudData.root+cssUrl; | 551 | fileUri = this.application.ninja.coreIoApi.cloudData.root+cssUrl; |
552 | //TODO: Add error handling for reading file | 552 | //TODO: Add error handling for reading file |
553 | cssData = this.application.ninja.coreIoApi.readFile({uri: fileUri}); | 553 | cssData = this.application.ninja.coreIoApi.readFile({uri: fileUri}); |
554 | 554 | // | |
555 | |||
556 | var tag = this.iframe.contentWindow.document.createElement('style'); | 555 | var tag = this.iframe.contentWindow.document.createElement('style'); |
557 | tag.setAttribute('type', 'text/css'); | 556 | tag.setAttribute('type', 'text/css'); |
558 | tag.setAttribute('data-ninja-uri', fileUri); | 557 | tag.setAttribute('data-ninja-uri', fileUri); |
@@ -569,54 +568,10 @@ exports.HTMLDocument = Montage.create(TextDocument, { | |||
569 | } | 568 | } |
570 | } | 569 | } |
571 | } | 570 | } |
572 | |||
573 | fileCouldDirUrl = this._document.styleSheets[i].href.split(this._document.styleSheets[i].href.split('/')[this._document.styleSheets[i].href.split('/').length-1])[0]; | ||
574 | prefixUrl = 'url('+fileCouldDirUrl; //This should be re-written with better RegEx | ||
575 | tag.innerHTML = cssData.content.replace(/url\(/gi, prefixUrl); | ||
576 | |||
577 | |||
578 | |||
579 | //Looping through DOM to insert style tag at location of link element | ||
580 | query = this._templateDocument.html.querySelectorAll(['link']); | ||
581 | for (var j in query) { | ||
582 | if (query[j].href === this._document.styleSheets[i].href) { | ||
583 | //Disabling style sheet to reload via inserting in style tag | ||
584 | query[j].setAttribute('disabled', 'true'); | ||
585 | //Inserting tag | ||
586 | this._templateDocument.head.insertBefore(tag, query[j]); | ||
587 | } | ||
588 | } | ||
589 | |||
590 | |||
591 | /* | ||
592 | //Getting the url of the CSS file | ||
593 | cssUrl = this._document.styleSheets[i].href.split('js/document/templates/montage-html')[1];//TODO: Parse out relative URLs and map them to absolute | ||
594 | //Creating the URI of the file (this is wrong should not be splitting cssUrl) | ||
595 | fileUri = (this.application.ninja.coreIoApi.cloudData.root+this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]+cssUrl).replace(/\/\//gi, '/'); | ||
596 | //Loading the data from the file | ||
597 | cssData = this.application.ninja.coreIoApi.readFile({uri: fileUri}); | ||
598 | //Creating tag with file content | ||
599 | var tag = this.iframe.contentWindow.document.createElement('style'); | ||
600 | tag.setAttribute('type', 'text/css'); | ||
601 | tag.setAttribute('data-ninja-uri', fileUri); | ||
602 | tag.setAttribute('data-ninja-file-url', cssUrl); | ||
603 | tag.setAttribute('data-ninja-file-read-only', JSON.parse(this.application.ninja.coreIoApi.isFileWritable({uri: fileUri}).content).readOnly); | ||
604 | tag.setAttribute('data-ninja-file-name', cssUrl.split('/')[cssUrl.split('/').length-1]); | ||
605 | //Copying attributes to maintain same properties as the <link> | ||
606 | for (var n in this._document.styleSheets[i].ownerNode.attributes) { | ||
607 | 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') { | ||
608 | tag.setAttribute(this._document.styleSheets[i].ownerNode.attributes[n].name, this._document.styleSheets[i].ownerNode.attributes[n].value); | ||
609 | } | ||
610 | } | ||
611 | // | 571 | // |
612 | 572 | fileCouldDirUrl = this._document.styleSheets[i].href.split(this._document.styleSheets[i].href.split('/')[this._document.styleSheets[i].href.split('/').length-1])[0]; | |
613 | //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, '/')); | ||
614 | fileCouldDirUrl = this.application.ninja.coreIoApi.rootUrl+escape((this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]).replace(/\/\//gi, '/')); | ||
615 | |||
616 | //TODO: Fix regEx to have logic for all possible URLs strings (currently prefixing all url()) | ||
617 | prefixUrl = 'url('+fileCouldDirUrl; //This should be re-written with better RegEx | 573 | prefixUrl = 'url('+fileCouldDirUrl; //This should be re-written with better RegEx |
618 | tag.innerHTML = cssData.content.replace(/url\(/gi, prefixUrl); | 574 | tag.innerHTML = cssData.content.replace(/url\(/gi, prefixUrl); |
619 | |||
620 | //Looping through DOM to insert style tag at location of link element | 575 | //Looping through DOM to insert style tag at location of link element |
621 | query = this._templateDocument.html.querySelectorAll(['link']); | 576 | query = this._templateDocument.html.querySelectorAll(['link']); |
622 | for (var j in query) { | 577 | for (var j in query) { |
@@ -627,30 +582,10 @@ exports.HTMLDocument = Montage.create(TextDocument, { | |||
627 | this._templateDocument.head.insertBefore(tag, query[j]); | 582 | this._templateDocument.head.insertBefore(tag, query[j]); |
628 | } | 583 | } |
629 | } | 584 | } |
630 | */ | ||
631 | |||
632 | |||
633 | |||
634 | |||
635 | |||
636 | |||
637 | |||
638 | |||
639 | |||
640 | |||
641 | |||
642 | |||
643 | |||
644 | |||
645 | |||
646 | |||
647 | |||
648 | |||
649 | } else { | 585 | } else { |
650 | console.log('ERROR: Cross-Domain-Stylesheet detected, unable to load in Ninja'); | 586 | console.log('ERROR: Cross-Domain-Stylesheet detected, unable to load in Ninja'); |
651 | //None local stylesheet, probably on a CDN (locked) | 587 | //None local stylesheet, probably on a CDN (locked) |
652 | /* | 588 | var tag = this.iframe.contentWindow.document.createElement('style'); |
653 | var tag = this.iframe.contentWindow.document.createElement('style'); | ||
654 | tag.setAttribute('type', 'text/css'); | 589 | tag.setAttribute('type', 'text/css'); |
655 | tag.setAttribute('data-ninja-external-url', this._document.styleSheets[i].href); | 590 | tag.setAttribute('data-ninja-external-url', this._document.styleSheets[i].href); |
656 | tag.setAttribute('data-ninja-file-read-only', "true"); | 591 | tag.setAttribute('data-ninja-file-read-only', "true"); |
@@ -669,7 +604,8 @@ var tag = this.iframe.contentWindow.document.createElement('style'); | |||
669 | 604 | ||
670 | 605 | ||
671 | 606 | ||
672 | //TODO: Figure out cross-domain XHR issue, might need cloud to handle | 607 | /* |
608 | //TODO: Figure out cross-domain XHR issue, might need cloud to handle | ||
673 | var xhr = new XMLHttpRequest(); | 609 | var xhr = new XMLHttpRequest(); |
674 | xhr.open("GET", this._document.styleSheets[i].href, true); | 610 | xhr.open("GET", this._document.styleSheets[i].href, true); |
675 | xhr.send(); | 611 | xhr.send(); |
@@ -677,20 +613,21 @@ var tag = this.iframe.contentWindow.document.createElement('style'); | |||
677 | if (xhr.readyState === 4) { | 613 | if (xhr.readyState === 4) { |
678 | console.log(xhr); | 614 | console.log(xhr); |
679 | } | 615 | } |
616 | */ | ||
680 | //tag.innerHTML = xhr.responseText //xhr.response; | 617 | //tag.innerHTML = xhr.responseText //xhr.response; |
618 | tag.innerHTML = 'noRULEjustHACK{background: #000}' | ||
681 | //Currently no external styles will load if unable to load via XHR request | 619 | //Currently no external styles will load if unable to load via XHR request |
682 | 620 | ||
683 | //Disabling external style sheets | 621 | //Disabling external style sheets |
684 | query = this._templateDocument.html.querySelectorAll(['link']); | 622 | query = this._templateDocument.html.querySelectorAll(['link']); |
685 | for (var j in query) { | 623 | for (var k in query) { |
686 | if (query[j].href === this._document.styleSheets[i].href) { | 624 | if (query[k].href === this._document.styleSheets[i].href) { |
687 | //Disabling style sheet to reload via inserting in style tag | 625 | //Disabling style sheet to reload via inserting in style tag |
688 | query[j].setAttribute('disabled', 'true'); | 626 | query[k].setAttribute('disabled', 'true'); |
689 | //Inserting tag | 627 | //Inserting tag |
690 | this._templateDocument.head.insertBefore(tag, query[j]); | 628 | this._templateDocument.head.insertBefore(tag, query[k]); |
691 | } | 629 | } |
692 | } | 630 | } |
693 | */ | ||
694 | } | 631 | } |
695 | } | 632 | } |
696 | } | 633 | } |
diff --git a/js/mediators/io-mediator.js b/js/mediators/io-mediator.js index 07a139c0..6c2147c8 100644 --- a/js/mediators/io-mediator.js +++ b/js/mediators/io-mediator.js | |||
@@ -260,17 +260,6 @@ exports.IoMediator = Montage.create(Component, { | |||
260 | } | 260 | } |
261 | } | 261 | } |
262 | } | 262 | } |
263 | |||
264 | |||
265 | ///////////////////////////////////////////////////////////////////////////////////////// | ||
266 | ///////////////////////////////////////////////////////////////////////////////////////// | ||
267 | |||
268 | //TODO: Add logic for parse CSS string correct URLs since referencing is lost | ||
269 | |||
270 | ///////////////////////////////////////////////////////////////////////////////////////// | ||
271 | ///////////////////////////////////////////////////////////////////////////////////////// | ||
272 | |||
273 | |||
274 | //Checking for type of save: styles = <style> only | css = <style> and <link> (all CSS) | 263 | //Checking for type of save: styles = <style> only | css = <style> and <link> (all CSS) |
275 | if (template.styles) { | 264 | if (template.styles) { |