diff options
Diffstat (limited to 'js/document/html-document.js')
-rwxr-xr-x | js/document/html-document.js | 187 |
1 files changed, 150 insertions, 37 deletions
diff --git a/js/document/html-document.js b/js/document/html-document.js index 5d507476..80930af2 100755 --- a/js/document/html-document.js +++ b/js/document/html-document.js | |||
@@ -59,6 +59,27 @@ exports.HTMLDocument = Montage.create(TextDocument, { | |||
59 | _gridVerticalSpacing: {value:0}, | 59 | _gridVerticalSpacing: {value:0}, |
60 | //end - drawUtils state | 60 | //end - drawUtils state |
61 | 61 | ||
62 | _undoStack: { value: [] }, | ||
63 | undoStack: { | ||
64 | get: function() { | ||
65 | return this._undoStack; | ||
66 | }, | ||
67 | set:function(value){ | ||
68 | this._undoStack = value; | ||
69 | } | ||
70 | }, | ||
71 | |||
72 | _redoStack: { value: [], enumerable: false }, | ||
73 | |||
74 | redoStack: { | ||
75 | get: function() { | ||
76 | return this._redoStack; | ||
77 | }, | ||
78 | set:function(value){ | ||
79 | this._redoStack = value; | ||
80 | } | ||
81 | }, | ||
82 | |||
62 | 83 | ||
63 | // GETTERS / SETTERS | 84 | // GETTERS / SETTERS |
64 | 85 | ||
@@ -387,10 +408,66 @@ exports.HTMLDocument = Montage.create(TextDocument, { | |||
387 | // | 408 | // |
388 | if(!this.documentRoot.Ninja) this.documentRoot.Ninja = {}; | 409 | if(!this.documentRoot.Ninja) this.documentRoot.Ninja = {}; |
389 | //Inserting user's document into template | 410 | //Inserting user's document into template |
390 | this._templateDocument.head.innerHTML = this._userDocument.content.head; | 411 | |
391 | this._templateDocument.body.innerHTML = this._userDocument.content.body; | 412 | |
392 | //TODO: Use querySelectorAll | 413 | |
393 | var scripttags = this._templateDocument.html.getElementsByTagName('script'), webgldata; | 414 | |
415 | |||
416 | |||
417 | |||
418 | |||
419 | |||
420 | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// | ||
421 | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// | ||
422 | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// | ||
423 | |||
424 | //TODO: Clean up and make public method to prepend properties with Ninja URL | ||
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)); | ||
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)); | ||
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 | // | ||
430 | function ninjaUrlRedirect (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 | var docRootUrl = this.application.ninja.coreIoApi.rootUrl+escape((this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]).replace(/\/\//gi, '/')); | ||
440 | prop = prop.replace(/[^()\\""\\'']+/g, test); | ||
441 | function test (s) { | ||
442 | if (s !== 'url') { | ||
443 | s = docRootUrl + s; | ||
444 | } | ||
445 | return s; | ||
446 | } | ||
447 | } | ||
448 | } | ||
449 | return prop; | ||
450 | } | ||
451 | // | ||
452 | function ninjaUrlPrepend (url) { | ||
453 | var docRootUrl = this.application.ninja.coreIoApi.rootUrl+escape((this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]).replace(/\/\//gi, '/')); | ||
454 | return '"'+docRootUrl+url.replace(/\"/gi, '')+'"'; | ||
455 | } | ||
456 | |||
457 | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// | ||
458 | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// | ||
459 | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// | ||
460 | |||
461 | |||
462 | |||
463 | |||
464 | |||
465 | |||
466 | |||
467 | |||
468 | |||
469 | |||
470 | var scripttags = this._templateDocument.html.getElementsByTagName('script'), webgldata; //TODO: Use querySelectorAll | ||
394 | // | 471 | // |
395 | for (var w in scripttags) { | 472 | for (var w in scripttags) { |
396 | if (scripttags[w].getAttribute) { | 473 | if (scripttags[w].getAttribute) { |
@@ -464,16 +541,18 @@ exports.HTMLDocument = Montage.create(TextDocument, { | |||
464 | //If rules are null, assuming cross-origin issue | 541 | //If rules are null, assuming cross-origin issue |
465 | if(this._document.styleSheets[i].rules === null) { | 542 | if(this._document.styleSheets[i].rules === null) { |
466 | //TODO: Revisit URLs and URI creation logic, very hack right now | 543 | //TODO: Revisit URLs and URI creation logic, very hack right now |
467 | var fileUri, cssUrl, cssData, tag, query; | 544 | var fileUri, cssUrl, cssData, query, prefixUrl, fileCouldDirUrl, docRootUrl; |
468 | if (this._document.styleSheets[i].href.indexOf('js/document/templates/montage-html') !== -1) { | 545 | // |
469 | //Getting the url of the CSS file | 546 | docRootUrl = this.application.ninja.coreIoApi.rootUrl+escape((this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]).replace(/\/\//gi, '/')); |
470 | cssUrl = this._document.styleSheets[i].href.split('js/document/templates/montage-html')[1]; | 547 | //TODO: Parse out relative URLs and map them to absolute |
471 | //Creating the URI of the file (this is wrong should not be splitting cssUrl) | 548 | if (this._document.styleSheets[i].href.indexOf(this.application.ninja.coreIoApi.rootUrl) !== -1) { |
472 | fileUri = this.application.ninja.coreIoApi.cloudData.root+this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]+cssUrl.split('/')[1]; | 549 | // |
473 | //Loading the data from the file | 550 | cssUrl = this._document.styleSheets[i].href.split(this.application.ninja.coreIoApi.rootUrl)[1]; |
551 | fileUri = this.application.ninja.coreIoApi.cloudData.root+cssUrl; | ||
552 | //TODO: Add error handling for reading file | ||
474 | cssData = this.application.ninja.coreIoApi.readFile({uri: fileUri}); | 553 | cssData = this.application.ninja.coreIoApi.readFile({uri: fileUri}); |
475 | //Creating tag with file content | 554 | // |
476 | tag = this.iframe.contentWindow.document.createElement('style'); | 555 | var tag = this.iframe.contentWindow.document.createElement('style'); |
477 | tag.setAttribute('type', 'text/css'); | 556 | tag.setAttribute('type', 'text/css'); |
478 | tag.setAttribute('data-ninja-uri', fileUri); | 557 | tag.setAttribute('data-ninja-uri', fileUri); |
479 | tag.setAttribute('data-ninja-file-url', cssUrl); | 558 | tag.setAttribute('data-ninja-file-url', cssUrl); |
@@ -481,11 +560,18 @@ exports.HTMLDocument = Montage.create(TextDocument, { | |||
481 | tag.setAttribute('data-ninja-file-name', cssUrl.split('/')[cssUrl.split('/').length-1]); | 560 | tag.setAttribute('data-ninja-file-name', cssUrl.split('/')[cssUrl.split('/').length-1]); |
482 | //Copying attributes to maintain same properties as the <link> | 561 | //Copying attributes to maintain same properties as the <link> |
483 | for (var n in this._document.styleSheets[i].ownerNode.attributes) { | 562 | for (var n in this._document.styleSheets[i].ownerNode.attributes) { |
484 | if (this._document.styleSheets[i].ownerNode.attributes[n].value && this._document.styleSheets[i].ownerNode.attributes[n].name !== 'disabled') { | 563 | 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') { |
485 | tag.setAttribute(this._document.styleSheets[i].ownerNode.attributes[n].name, this._document.styleSheets[i].ownerNode.attributes[n].value); | 564 | if (this._document.styleSheets[i].ownerNode.attributes[n].value.indexOf(docRootUrl) !== -1) { |
565 | tag.setAttribute(this._document.styleSheets[i].ownerNode.attributes[n].name, this._document.styleSheets[i].ownerNode.attributes[n].value.split(docRootUrl)[1]); | ||
566 | } else { | ||
567 | tag.setAttribute(this._document.styleSheets[i].ownerNode.attributes[n].name, this._document.styleSheets[i].ownerNode.attributes[n].value); | ||
568 | } | ||
486 | } | 569 | } |
487 | } | 570 | } |
488 | tag.innerHTML = cssData.content; | 571 | // |
572 | fileCouldDirUrl = this._document.styleSheets[i].href.split(this._document.styleSheets[i].href.split('/')[this._document.styleSheets[i].href.split('/').length-1])[0]; | ||
573 | prefixUrl = 'url('+fileCouldDirUrl; //This should be re-written with better RegEx | ||
574 | tag.innerHTML = cssData.content.replace(/url\(/gi, prefixUrl); | ||
489 | //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 |
490 | query = this._templateDocument.html.querySelectorAll(['link']); | 576 | query = this._templateDocument.html.querySelectorAll(['link']); |
491 | for (var j in query) { | 577 | for (var j in query) { |
@@ -498,15 +584,28 @@ exports.HTMLDocument = Montage.create(TextDocument, { | |||
498 | } | 584 | } |
499 | } else { | 585 | } else { |
500 | 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'); |
501 | /* | 587 | //None local stylesheet, probably on a CDN (locked) |
502 | //None local stylesheet, probably on a CDN (locked) | 588 | var tag = this.iframe.contentWindow.document.createElement('style'); |
503 | tag = this.iframe.contentWindow.document.createElement('style'); | ||
504 | tag.setAttribute('type', 'text/css'); | 589 | tag.setAttribute('type', 'text/css'); |
505 | tag.setAttribute('data-ninja-external-url', this._document.styleSheets[i].href); | 590 | tag.setAttribute('data-ninja-external-url', this._document.styleSheets[i].href); |
506 | tag.setAttribute('data-ninja-file-read-only', "true"); | 591 | tag.setAttribute('data-ninja-file-read-only', "true"); |
507 | tag.setAttribute('data-ninja-file-name', this._document.styleSheets[i].href.split('/')[this._document.styleSheets[i].href.split('/').length-1]); | 592 | tag.setAttribute('data-ninja-file-name', this._document.styleSheets[i].href.split('/')[this._document.styleSheets[i].href.split('/').length-1]); |
593 | //Copying attributes to maintain same properties as the <link> | ||
594 | for (var n in this._document.styleSheets[i].ownerNode.attributes) { | ||
595 | 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') { | ||
596 | if (this._document.styleSheets[i].ownerNode.attributes[n].value.indexOf(docRootUrl) !== -1) { | ||
597 | tag.setAttribute(this._document.styleSheets[i].ownerNode.attributes[n].name, this._document.styleSheets[i].ownerNode.attributes[n].value.split(docRootUrl)[1]); | ||
598 | } else { | ||
599 | tag.setAttribute(this._document.styleSheets[i].ownerNode.attributes[n].name, this._document.styleSheets[i].ownerNode.attributes[n].value); | ||
600 | } | ||
601 | } | ||
602 | } | ||
508 | 603 | ||
509 | //TODO: Figure out cross-domain XHR issue, might need cloud to handle | 604 | |
605 | |||
606 | |||
607 | /* | ||
608 | //TODO: Figure out cross-domain XHR issue, might need cloud to handle | ||
510 | var xhr = new XMLHttpRequest(); | 609 | var xhr = new XMLHttpRequest(); |
511 | xhr.open("GET", this._document.styleSheets[i].href, true); | 610 | xhr.open("GET", this._document.styleSheets[i].href, true); |
512 | xhr.send(); | 611 | xhr.send(); |
@@ -514,21 +613,24 @@ exports.HTMLDocument = Montage.create(TextDocument, { | |||
514 | if (xhr.readyState === 4) { |