diff options
Diffstat (limited to 'js/document')
-rwxr-xr-x | js/document/html-document.js | 201 |
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 | } else { | ||
739 |