Skip to content

Commit

Permalink
Merge pull request #4 from Ictinus/develop
Browse files Browse the repository at this point in the history 
Develop
  • Loading branch information
@Ictinus
Ictinus committed Sep 21, 2014
2 parents c88e289 + 540e069 commit 3f1f3ff
Show file tree
Hide file tree
Showing 7 changed files with 373 additions and 126 deletions.
139 changes: 121 additions & 18 deletions embeddedXMLViewer.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
var iibpd = {
debug: false,
options: {
enableIIBPD: true,
discardMetadata: true,
hide_metadata: true,
autoOpenDepth: 1
},

simulateClick: function (elem) {
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent(
Expand All @@ -27,7 +28,7 @@ var iibpd = {
);
elem.dispatchEvent(evt);
},

processKey: function (e) { //e is event object passed from function invocation
var kc, btnStep, btnRun; //sk
e = e || window.event || "";
Expand All @@ -52,29 +53,65 @@ var iibpd = {
}
}
},

loadOptions: function () {
chrome.storage.sync.get({
enableIIBPD: true,
discardMetadata: true,
hide_metadata: true,
autoOpenDepth: 1
autoOpenDepth: 1,
attrWidth: 7,
colourTagEnds: '#000000',
colourTagName: '#800080',
colourAttrName: '#000000',
colourAttrValue: '#0000FF',
colourData: '#008000',
colourBackground: '#dae3ec',
colourForeground: '#000000'
}, function (items) {
iibpd.options.enableIIBPD = items.enableIIBPD;
iibpd.options.discardMetadata = items.discardMetadata;
iibpd.options.hide_metadata = items.hide_metadata;
iibpd.options.autoOpenDepth = items.autoOpenDepth;
var element, arrEl = document.getElementsByTagName('pre');
for (var i=0; i < arrEl.length; i++) {
element = arrEl[i];
LoadXMLString(element, element.textContent);
iibpd.options.attrWidth = items.attrWidth;
iibpd.options.colourTagEnds = items.colourTagEnds;
iibpd.options.colourTagName = items.colourTagName;
iibpd.options.colourAttrName = items.colourAttrName;
iibpd.options.colourAttrValue = items.colourAttrValue;
iibpd.options.colourData = items.colourData;
iibpd.options.colourBackground = items.colourBackground;
iibpd.options.colourForeground = items.colourForeground;
if (iibpd.options.enableIIBPD) {
var element, arrEl = document.getElementsByTagName('pre');
for (var i=0; i < arrEl.length; i++) {
element = arrEl[i];
LoadXMLString(element, element.textContent);
}
//load colour styles
var styleEl = document.createElement('style'),
styleSheet;
document.head.appendChild(styleEl);
styleSheet = styleEl.sheet;
styleSheet.insertRule(".NodeName, .Clickable {color: " + iibpd.options.colourTagName + ";}", 0);
styleSheet.insertRule(".AttributeName {color: " + iibpd.options.colourAttrName + ";", 0);
styleSheet.insertRule(".AttributeValue {color: " + iibpd.options.colourAttrValue + ";}", 0);
styleSheet.insertRule(".NodeValue {color: " + iibpd.options.colourData + ";}", 0);
styleSheet.insertRule(".NodeName + .NodeValue:before, .NodeName:not(.endTag):before, .NodeName.endTag:before, .NodeName.endTag:after, .NodeName:nth-last-child(2):after, .AttributeValue:last-child:after, .AttributeValue.last-of-class:after {color:"+ iibpd.options.colourTagEnds +";}", 0);
styleSheet.insertRule("table tr[id] {background-color: " + iibpd.options.colourBackground + ";}", 0);
styleSheet.insertRule("table tr[id] td, div.info1 {color: " + iibpd.options.colourForeground + ";}", 0);
styleSheet.insertRule(".AttributeValue {min-width: " + iibpd.options.attrWidth + "em;}", 0);
}

console.info("iibpd.options: " + JSON.stringify(iibpd.options));
});
},

init: function () {
iibpd.loadOptions();

document.addEventListener("keydown", iibpd.processKey, true);
chrome.storage.onChanged.addListener(function (changes, namespace) {
var options = {};
for (key in changes) {
var storageChange = changes[key];
if (iibpd.debug) {
Expand All @@ -87,28 +124,94 @@ var iibpd = {
}
if (key === "hide_metadata") {
iibpd.options.hide_metadata = storageChange.newValue;
iibpd.processConfigOptions();
options.metaData = true;
}
if (key === "autoOpenDepth") {
iibpd.options.autoOpenDepth = storageChange.newValue;
}
if (key === "discardMetadata") {
iibpd.options.discardMetadata = storageChange.newValue;
}
if (key === "attrWidth") {
iibpd.options.attrWidth = storageChange.newValue;
options.attrWidth = true;
}
if (key === "colourTagEnds") {
iibpd.options.colourTagEnds = storageChange.newValue;
options.colourTagEnds = true;
}
if (key === "colourTagName") {
iibpd.options.colourTagName = storageChange.newValue;
options.colourTagName = true;
}
if (key === "colourAttrName") {
iibpd.options.colourAttrName = storageChange.newValue;
options.colourAttrName = true;
}
if (key === "colourAttrValue") {
iibpd.options.colourAttrValue = storageChange.newValue;
options.colourAttrValue = true;
}
if (key === "colourData") {
iibpd.options.colourData = storageChange.newValue;
options.colourData = true;
}
if (key === "colourForeground") {
iibpd.options.colourForeground = storageChange.newValue;
options.colourForeground = true;
}
if (key === "colourBackground") {
iibpd.options.colourBackground = storageChange.newValue;
options.colourBackground = true;
}
}
iibpd.processConfigOptions(options);
});
},

processConfigOptions: function () {
//hide/show metadata
var arrMetadata = document.querySelectorAll("div.metadata");
for (var i=0; i < arrMetadata.length; i++) {
if (!!arrMetadata[i]) {
arrMetadata[i].classList.toggle("hide_metadata", iibpd.options.hide_metadata);

processConfigOptions: function (options) {
if (!!options.metaData) {
//hide/show metadata
var arrMetadata = document.querySelectorAll("div.metadata");
for (var i=0; i < arrMetadata.length; i++) {
if (!!arrMetadata[i]) {
arrMetadata[i].classList.toggle("hide_metadata", iibpd.options.hide_metadata);
}
}
}

// stylesheet updates
var styleEl = document.createElement('style'),
styleSheet;
document.head.appendChild(styleEl);
styleSheet = styleEl.sheet;
if (!!options.attrWidth) {
styleSheet.insertRule(".AttributeValue {min-width: " + iibpd.options.attrWidth + "em;}", 0);
}
if (!!options.colourTagEnds) {
styleSheet.insertRule(".NodeName + .NodeValue:before, .NodeName:not(.endTag):before, .NodeName.endTag:before, .NodeName.endTag:after, .NodeName:nth-last-child(2):after, .AttributeValue:last-child:after, .AttributeValue.last-of-class:after {color:"+ iibpd.options.colourTagEnds +";}", 0);
}
if (!!options.colourTagName) {
styleSheet.insertRule(".NodeName, .Clickable {color: " + iibpd.options.colourTagName + ";}", 0);
}
if (!!options.colourAttrName) {
styleSheet.insertRule(".AttributeName {color: " + iibpd.options.colourAttrName + ";", 0);
}
if (!!options.colourAttrValue) {
styleSheet.insertRule(".AttributeValue {color: " + iibpd.options.colourAttrValue + ";}", 0);
}
if (!!options.colourData) {
styleSheet.insertRule(".NodeValue {color: " + iibpd.options.colourData + ";}", 0);
}
if (!!options.colourForeground) {
styleSheet.insertRule("table tr[id] td, div.info1 {color: " + iibpd.options.colourForeground + ";}", 0);
}
if (!!options.colourBackground) {
styleSheet.insertRule("table tr[id] {background-color: " + iibpd.options.colourBackground + ";}", 0);
}

},

load: function () {
document.addEventListener("readystatechange", function () {
if (document.readyState === "complete") {
Expand Down
90 changes: 76 additions & 14 deletions loadxml.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,61 +3,123 @@
pre {
/* using line-height rather than Element.padding so to ease max-height calculations*/
line-height: 1.5em;
font-family: "Lucida Console", Consolas, monospace;
}
.Utility {
color: black;
}

.NodeName {
font-weight:bold;
color: #800080;
transition: color 2s;
}
.NodeName:not(.endTag):before {
content:"<";
color: #000;
transition: color 2s;
}
.NodeName.endTag:before {
content:"</";
color: #000;
transition: color 2s;
}
.NodeName:nth-last-child(2):after {
content:">";
color: #000;
transition: color 2s;
}

.NodeName.endTag:after {
content:">";
color: #000;
transition: color 2s;
}

.AttributeName {
font-weight:bold;
color: black;
transition: color 2s;
}
.AttributeName:after {
content:"=";
}

.AttributeValue {
color:blue;
min-width: 7em;
display: inline-block;
transition: min-width 2s, color 2s;
}

.AttributeValue:last-child:after {
content: " />";
float: right;
color: #000;
transition: color 2s;
}
.AttributeValue.last-of-class:after {
content: ">";
float: right;
transition: color 2s;
}
.NodeValue {
color: green;
transition: color 2s;
}
.NodeName + .NodeValue:before {
content: ">";
color: #000;
}
.endTag {
opacity: 1;
transition: opacity .50s ease-in-out;
transition: opacity 1s, color 2s;
}
.fade {
opacity: 0;
transition: opacity .25s ease-in-out;
}
.Element {
border-left-color:#C2C2C2;
border-left-width:thin;
border-left-style:solid;
padding: 0px 0px;
position: relative;

opacity: 1;
/*max-height: set by javascript*/
overflow: hidden;
/*opacity: 1;*/
transition: max-height 0.4s ease-in-out;/*, opacity .5s ease-in;*/
transition: max-height 0.5s ease-in-out, opacity 1s;
}
.Element > .Element {
left:15px;
}
.Element_hide, .hide_metadata {
max-height: 0 !important;
/*opacity: 0;*/
transition: max-height 0.4s ease-in-out; /*, opacity .5s ease-out;*/
opacity: 0;
overflow: hidden;

}
.Clickable {
font-weight:900;
.Clickable {
font-weight: 900;
font-size:large;
color: #800080;
color: #800080;
cursor:pointer;
padding-left: 5px;
padding-right:5px;
vertical-align:middle;
user-select: none;
transition: color 2s;
}

body {
background-size: auto 100%;
}

#content {
margin: 5px 0px;
}

td {
padding: 3px;
}

table {
font-family: Verdana, sans-serif;
}
table tr[id] { transition: background-color 1s;}
table tr[id] td, div.info1 { transition: color 2s;}
Loading

0 comments on commit 3f1f3ff

Please sign in to comment.