aboutsummaryrefslogtreecommitdiff
path: root/js/document/html-document.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/document/html-document.js')
-rwxr-xr-xjs/document/html-document.js201
1 files changed, 165 insertions, 36 deletions
diff --git a/js/document/html-document.js b/js/document/html-document.js
index 078a73b5..05c7d6c0 100755
--- a/js/document/html-document.js
+++ b/js/document/html-document.js
@@ -61,6 +61,27 @@ exports.HTMLDocument = Montage.create(TextDocument, {
61 _gridVerticalSpacing: {value:0}, 61 _gridVerticalSpacing: {value:0},
62 //end - drawUtils state 62 //end - drawUtils state
63 63
64 _undoStack: { value: [] },
65 undoStack: {
66 get: function() {
67 return this._undoStack;
68 },
69 set:function(value){
70 this._undoStack = value;
71 }
72 },
73
74 _redoStack: { value: [], enumerable: false },
75
76 redoStack: {
77 get: function() {
78 return this._redoStack;
79 },
80 set:function(value){
81 this._redoStack = value;
82 }
83 },
84
64 85
65 // GETTERS / SETTERS 86 // GETTERS / SETTERS
66 87
@@ -510,10 +531,69 @@ exports.HTMLDocument = Montage.create(TextDocument, {
510 // 531 //
511 if(!this.documentRoot.Ninja) this.documentRoot.Ninja = {}; 532 if(!this.documentRoot.Ninja) this.documentRoot.Ninja = {};
512 //Inserting user's document into template 533 //Inserting user's document into template
513 this._templateDocument.head.innerHTML = this._userDocument.content.head; 534
514 this._templateDocument.body.innerHTML = this._userDocument.content.body; 535
515 //TODO: Use querySelectorAll 536
516 var scripttags = this._templateDocument.html.getElementsByTagName('script'), webgldata; 537
538
539
540
541
542
543 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
544 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
545 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
546
547 //TODO: Clean up and make public method to prepend properties with Ninja URL
548 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));
549 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));
550 //
551 //var docRootUrl = this.application.ninja.coreIoApi.rootUrl+escape((this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]).replace(/\/\//gi, '/'));
552 //
553 function ninjaUrlRedirect (prop) {
554 //Checking for property value to not contain a full direct URL
555 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)) {
556 //Checking for attributes and type of source
557 if (prop.indexOf('href') !== -1 || prop.indexOf('src') !== -1) { //From HTML attribute
558 //
559 prop = prop.replace(/"([^"]*)"/gi, ninjaUrlPrepend.bind(this));
560 } else if (prop.indexOf('url') !== -1) { //From CSS property
561 //TODO: Add functionality
562 var docRootUrl = this.application.ninja.coreIoApi.rootUrl+escape((this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]).replace(/\/\//gi, '/'));
563 prop = prop.replace(/[^()\\""\\'']+/g, cssUrlToNinjaUrl);
564 function cssUrlToNinjaUrl (s) {
565 if (s !== 'url') {
566 s = docRootUrl + s;
567 }
568 return s;
569 }
570 }
571 }
572 return prop;
573 }
574 //
575 function ninjaUrlPrepend (url) {
576 var docRootUrl = this.application.ninja.coreIoApi.rootUrl+escape((this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]).replace(/\/\//gi, '/'));
577 if (url.indexOf('data:image') !== -1) {
578 return url;
579 } else {
580 return '"'+docRootUrl+url.replace(/\"/gi, '')+'"';
581 }
582 }
583 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
584 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
585 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
586
587
588
589
590
591
592
593
594
595
596 var scripttags = this._templateDocument.html.getElementsByTagName('script'), webgldata; //TODO: Use querySelectorAll
517 // 597 //
518 for (var w in scripttags) { 598 for (var w in scripttags) {
519 if (scripttags[w].getAttribute) { 599 if (scripttags[w].getAttribute) {
@@ -587,16 +667,18 @@ exports.HTMLDocument = Montage.create(TextDocument, {
587 //If rules are null, assuming cross-origin issue 667 //If rules are null, assuming cross-origin issue
588 if(this._document.styleSheets[i].rules === null) { 668 if(this._document.styleSheets[i].rules === null) {
589 //TODO: Revisit URLs and URI creation logic, very hack right now 669 //TODO: Revisit URLs and URI creation logic, very hack right now
590 var fileUri, cssUrl, cssData, tag, query; 670 var fileUri, cssUrl, cssData, query, prefixUrl, fileCouldDirUrl, docRootUrl;
591 if (this._document.styleSheets[i].href.indexOf('js/document/templates/montage-html') !== -1) { 671 //
592 //Getting the url of the CSS file 672 docRootUrl = this.application.ninja.coreIoApi.rootUrl+escape((this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]).replace(/\/\//gi, '/'));
593 cssUrl = this._document.styleSheets[i].href.split('js/document/templates/montage-html')[1]; 673 //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) 674 if (this._document.styleSheets[i].href.indexOf(this.application.ninja.coreIoApi.rootUrl) !== -1) {
595 fileUri = this.application.ninja.coreIoApi.cloudData.root+this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]+cssUrl.split('/')[1]; 675 //
596 //Loading the data from the file 676 cssUrl = this._document.styleSheets[i].href.split(this.application.ninja.coreIoApi.rootUrl)[1];
677 fileUri = this.application.ninja.coreIoApi.cloudData.root+cssUrl;
678 //TODO: Add error handling for reading file
597 cssData = this.application.ninja.coreIoApi.readFile({uri: fileUri}); 679 cssData = this.application.ninja.coreIoApi.readFile({uri: fileUri});
598 //Creating tag with file content 680 //
599 tag = this.iframe.contentWindow.document.createElement('style'); 681 var tag = this.iframe.contentWindow.document.createElement('style');
600 tag.setAttribute('type', 'text/css'); 682 tag.setAttribute('type', 'text/css');
601 tag.setAttribute('data-ninja-uri', fileUri); 683 tag.setAttribute('data-ninja-uri', fileUri);
602 tag.setAttribute('data-ninja-file-url', cssUrl); 684 tag.setAttribute('data-ninja-file-url', cssUrl);
@@ -604,11 +686,32 @@ exports.HTMLDocument = Montage.create(TextDocument, {
604 tag.setAttribute('data-ninja-file-name', cssUrl.split('/')[cssUrl.split('/').length-1]); 686 tag.setAttribute('data-ninja-file-name', cssUrl.split('/')[cssUrl.split('/').length-1]);
605 //Copying attributes to maintain same properties as the <link> 687 //Copying attributes to maintain same properties as the <link>
606 for (var n in this._document.styleSheets[i].ownerNode.attributes) { 688 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') { 689 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); 690 if (this._document.styleSheets[i].ownerNode.attributes[n].value.indexOf(docRootUrl) !== -1) {
691 tag.setAttribute(this._document.styleSheets[i].ownerNode.attributes[n].name, this._document.styleSheets[i].ownerNode.attributes[n].value.split(docRootUrl)[1]);
692 } else {
693 tag.setAttribute(this._document.styleSheets[i].ownerNode.attributes[n].name, this._document.styleSheets[i].ownerNode.attributes[n].value);
694 }
609 } 695 }
610 } 696 }
611 tag.innerHTML = cssData.content; 697 //
698 fileCouldDirUrl = this._document.styleSheets[i].href.split(this._document.styleSheets[i].href.split('/')[this._document.styleSheets[i].href.split('/').length-1])[0];
699
700 tag.innerHTML = cssData.content.replace(/url\(()(.+?)\1\)/g, detectUrl);
701
702 function detectUrl (prop) {
703 return prop.replace(/[^()\\""\\'']+/g, prefixUrl);;
704 }
705
706 function prefixUrl (url) {
707 if (url !== 'url') {
708 if (!url.match(/(\b(?:(?:https?|ftp|file|[A-Za-z]+):\/\/|www\.|ftp\.)(?:\([-A-Z0-9+&@#\/%=~_|$?!:,.]*\)|[-A-Z0-9+&@#\/%=~_|$?!:,.])*(?:\([-A-Z0-9+&@#\/%=~_|$?!:,.]*\)|[A-Z0-9+&@#\/%=~_|$]))/gi)) {
709 url = fileCouldDirUrl+url;
710 }
711 }
712 return url;
713 }
714
612 //Looping through DOM to insert style tag at location of link element 715 //Looping through DOM to insert style tag at location of link element
613 query = this._templateDocument.html.querySelectorAll(['link']); 716 query = this._templateDocument.html.querySelectorAll(['link']);
614 for (var j in query) { 717 for (var j in query) {
@@ -621,13 +724,23 @@ exports.HTMLDocument = Montage.create(TextDocument, {
621 } 724 }
622 } else { 725 } else {
623 console.log('ERROR: Cross-Domain-Stylesheet detected, unable to load in Ninja'); 726 console.log('ERROR: Cross-Domain-Stylesheet detected, unable to load in Ninja');
624 /* 727 //None local stylesheet, probably on a CDN (locked)
625//None local stylesheet, probably on a CDN (locked) 728 var tag = this.iframe.contentWindow.document.createElement('style');
626 tag = this.iframe.contentWindow.document.createElement('style');
627 tag.setAttribute('type', 'text/css'); 729 tag.setAttribute('type', 'text/css');
628 tag.setAttribute('data-ninja-external-url', this._document.styleSheets[i].href); 730 tag.setAttribute('data-ninja-external-url', this._document.styleSheets[i].href);
629 tag.setAttribute('data-ninja-file-read-only', "true"); 731 tag.setAttribute('data-ninja-file-read-only', "true");
630 tag.setAttribute('data-ninja-file-name', this._document.styleSheets[i].href.split('/')[this._document.styleSheets[i].href.split('/').length-1]); 732 tag.setAttribute('data-ninja-file-name', this._document.styleSheets[i].href.split('/')[this._document.styleSheets[i].href.split('/').length-1]);
733 //Copying attributes to maintain same properties as the <link>
734 for (var n in this._document.styleSheets[i].ownerNode.attributes) {
735 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') {
736 if (this._document.styleSheets[i].ownerNode.attributes[n].value.indexOf(docRootUrl) !== -1) {
737 tag.setAttribute(this._document.styleSheets[i].ownerNode.attributes[n].name, this._document.styleSheets[i].ownerNode.attributes[n].value.split(docRootUrl)[1]);
738