CSS attributes

Setting up logic to include attributes in <link> for the <style> duplicates and add attributes created in Ninja back to <link> tag on save.

2 files changed, 61 insertions, 1 deletions

diff --git a/js/document/html-document.js b/js/document/html-document.js
index 75628731..6853f4d7 100755
--- a/js/document/html-document.js
+++ b/js/document/html-document.js
@@ -409,6 +409,33 @@ exports.HTMLDocument = Montage.create(TextDocument, {
             }
             
             
+            
+            
+            //Temporarily checking for disabled special case
+            var stags = this.iframe.contentWindow.document.getElementsByTagName('style'),
+                ltags = this.iframe.contentWindow.document.getElementsByTagName('link');
+                //
+            for (var m = 0; m < ltags.length; m++) {
+                if (ltags[m].getAttribute('data-ninja-template') === null) {
+                        if (ltags[m].getAttribute('disabled')) {
+                                        ltags[m].removeAttribute('disabled');
+                                        ltags[m].setAttribute('data-ninja-disabled', 'true');
+                                }
+                        }
+                }
+            //
+                for (var n = 0; n < stags.length; n++) {
+                        if (stags[n].getAttribute('data-ninja-template') === null) {
+                                if (stags[n].getAttribute('disabled')) {
+                                        stags[n].removeAttribute('disabled');
+                                        stags[n].setAttribute('data-ninja-disabled', 'true');
+                        }
+                }
+            }
+            
+            
+            
+            
             //Adding a handler for the main user document reel to finish loading
             this._document.body.addEventListener("userTemplateDidLoad",  this.userTemplateDidLoad.bind(this), false);
 
@@ -428,7 +455,6 @@ exports.HTMLDocument = Montage.create(TextDocument, {
             setTimeout(function () {
                 
                 
-                
                 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
                 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
                 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
@@ -453,6 +479,12 @@ exports.HTMLDocument = Montage.create(TextDocument, {
                                                                 tag.setAttribute('data-ninja-file-url', cssUrl);
                                                                 tag.setAttribute('data-ninja-file-read-only', JSON.parse(this.application.ninja.coreIoApi.isFileWritable({uri: fileUri}).content).readOnly);
                                                                 tag.setAttribute('data-ninja-file-name', cssUrl.split('/')[cssUrl.split('/').length-1]);
+                                                                //Copying attributes to maintain same properties as the <link>
+                                                                for (var n in this._document.styleSheets[i].ownerNode.attributes) {
+                                                                        if (this._document.styleSheets[i].ownerNode.attributes[n].value && this._document.styleSheets[i].ownerNode.attributes[n].name !== 'disabled') {
+                                                                                tag.setAttribute(this._document.styleSheets[i].ownerNode.attributes[n].name, this._document.styleSheets[i].ownerNode.attributes[n].value);
+                                                                        }
+                                                                }
                                                                 tag.innerHTML = cssData.content;
                                                                 //Looping through DOM to insert style tag at location of link element
                                                                 query = this._templateDocument.html.querySelectorAll(['link']);
@@ -465,6 +497,7 @@ exports.HTMLDocument = Montage.create(TextDocument, {
                                                                         }
                                                                 }
                                                         } else {
+                                                                console.log('ERROR: Cross-Domain-Stylesheet detected, unable to load in Ninja');
                                                                 /*
 //None local stylesheet, probably on a CDN (locked)
                                                                 tag = this.iframe.contentWindow.document.createElement('style');
diff --git a/js/mediators/io-mediator.js b/js/mediators/io-mediator.js
index 733e44b2..6b26668b 100644
--- a/js/mediators/io-mediator.js
+++ b/js/mediators/io-mediator.js
@@ -260,6 +260,17 @@ exports.IoMediator = Montage.create(Component, {
                         var styleCounter = 0,
                                 docStyles = template.document.content.document.getElementsByTagName('style'),
                                 docLinks = template.document.content.document.getElementsByTagName('link');
+                        //Removing Ninja Data Attributes
+                        for (var n in docLinks) {
+                                if (docLinks[n].attributes) {
+                                        for (var m in docLinks[n].attributes) {
+                                                        if (docLinks[n].attributes[m].name && docLinks[n].attributes[m].name.indexOf('data-ninja')!=-1) {
+                                                                docLinks[n].removeAttribute(docLinks[n].attributes[m].name);
+                                                        }
+                                                }
+                                }
+                        }
+                        //
                         for(var i in template.css) {
                                 if (template.css[i].ownerNode) {
                                         if (template.css[i].ownerNode.getAttribute) {
@@ -268,6 +279,22 @@ exports.IoMediator = Montage.create(Component, {
                                                         docStyles[styleCounter].innerHTML = this.getCssFromRules(template.css[i].cssRules);
                                                         styleCounter++;
                                                 } else {
+                                                        //Checking for attributes to be added to tag upon saving
+                                                        for (var k in docLinks) {
+                                                                if (docLinks[k].getAttribute) {
+                                                                        if (docLinks[k].getAttribute('href') && ('/'+docLinks[k].getAttribute('href')) === template.css[i].ownerNode.getAttribute('data-ninja-file-url')) {
+                                                                                for (var l in template.css[i].ownerNode.attributes) {
+                                                                                        if (template.css[i].ownerNode.attributes[l].value) {
+                                                                                                if (template.css[i].ownerNode.attributes[l].name.indexOf('data-ninja')!=-1) {
+                                                                                                        //Ninja attribute...
+                                                                                                } else {
+                                                                                                        docLinks[k].setAttribute(template.css[i].ownerNode.attributes[l].name, template.css[i].ownerNode.attributes[l].value);
+                                                                                                }
+                                                                                        }
+                                                                                }
+                                                                        }
+                                                                }
+                                                        }
                                                         //Saving data from rules array converted to string into <link> file
                                                         var save = this.fio.saveFile({uri: template.css[i].ownerNode.getAttribute('data-ninja-uri'), contents: this.getCssFromRules(template.css[i].cssRules)});
                                                 }