Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

12/6/12

  • Loading branch information...
commit 1b2f2fc79d3b84035d94c6e7755698ed30a55194 1 parent 96cc947
@jsweeneydev authored
Showing with 423 additions and 68 deletions.
  1. +7 −0 README
  2. +44 −20 index.html
  3. +232 −26 scripts.js
  4. +139 −21 style.css
  5. +1 −1  template.xml
View
7 README
@@ -7,6 +7,13 @@ Created by: Jeffrey Sweeney
--------------------
Changes:
--------------------
+V12 (6/12/12):
+- Still need to fix localStorage bug
+* Revamped loading functionality: files can now be loaded via URL
+* Added template loading functionality
+* The XML view can now be hidden entirely
+
+
V11 (6/5/12):
* Re-wrote much of the code (100 less lines)
* Template is now XML as opposed to object literal. Means of generating and uploading template files is underway (and what better way to make an XML template than with the XML template editor?)
View
64 index.html
@@ -120,28 +120,49 @@
</div>
<div class="dialog_content" id="dialog_load">
-
-
-
- <h3>Load</h3>
-
- <div id="dialog_load_list">
-
- </div>
-
-
-
- <textarea id="dialog_load_preview" readonly="true">
+
+
+
+<h3>Load</h3>
+
+
+<div class="dialog_load_url_tab dialog_load_url_tab_highlighted">URL</div>
+
+<div class="dialog_load_file_tab">File</div>
+
+<div id="dialog_load_url_container">
+
+ <h3>XML File URL:</h3>
+ <input type="text" id="dialog_load_url_address" />
+
+ <br>
+ <h3>Template:</h3>
+ <input type="text" id="dialog_load_url_template_address" />
+
+ <div id="dialog_load_url_button">Load</div>
+
+</div>
+
+<div id="dialog_load_file_container">
+
+<div id="dialog_load_file_list"></div>
+
+
+
+<textarea id="dialog_load_file_preview" readonly="true">
Select a file on the left (if any), and click the Load button.
</textarea>
-
- <div class="dialog_load_button_container">
- <div id="dialog_load_button">Load</div>
-
- <div id="dialog_load_delete_button">(delete)</div>
- </div>
- </div>
-
+
+<div class="dialog_load_file_button_container">
+<div id="dialog_load_file_button">Load</div>
+
+<div id="dialog_load_file_delete_button">(delete)</div>
+</div>
+
+
+</div>
+
+</div>
<div class="dialog_content" id="dialog_options">
@@ -228,10 +249,12 @@ <h3 title="">Undo Buffer Length:</h3>
&#8592; Load XML &#8592;
</div>
+ <div class="xml_wrapper">
<textarea id="xml">XML Content will be updated here.
You can also paste XML content in to this text area
and click the "Load xml" button to load and parse it.
</textarea>
+ </div>
<div class="divider_right_bottom">
@@ -245,5 +268,6 @@ <h3 title="">Undo Buffer Length:</h3>
<!--<script type="text/javascript" src="JSON.js"></script>-->
<script type="text/javascript" src="scripts.js"></script>
+ <!--<script>Dialog.show('dialog_load')</script>-->
</body>
</html>
View
258 scripts.js
@@ -223,6 +223,12 @@ var XMLEditor = {
+
+
+
+
+
+
//Load the template file on the server via a synchronous request
//(This will likely be replaced my a codified XML object (NOT JSON!) )
template : new function() {
@@ -249,6 +255,24 @@ var XMLEditor = {
},
+
+ setTemplate : function(template) {
+
+ var temp = parseXML(template);
+
+ if(temp == null) return;
+
+ //Ensure that the template is valid here
+
+
+
+
+ XMLEditor.template = temp;
+
+ },
+
+
+
//Add a tag to a defined parent tag.
//All of the tag's variables and functions are defined in this function.
@@ -917,6 +941,7 @@ var XMLEditor = {
//If the childNode is a tag, remove it.
if(cn.isTag){
+
XMLEditor.wrapper.removeChild(cn);
continue;
@@ -964,15 +989,19 @@ var XMLEditor = {
+
+
//First, clear the content
XMLEditor.clear();
+
XMLEditor.headerInformation.value = loadedXML.xml +
"\n" +
loadedXML.doctype;
+
//Recursive inline function for adding nodes to the visual editor
function addNode(xmlTag, parent, parentTemplate) {
@@ -1137,6 +1166,40 @@ var XMLEditor = {
+ //Make sure that at least the root element can be added
+ var rootTemplateName = "";
+ for(var i = 0; i < XMLEditor.template.length; i++) {
+
+ var root = XMLEditor.template[i];
+
+ if(root.name == "root") {
+
+ for(var j = 0; j < root.length; j++) {
+
+ if(root[j].name == "name") {
+ rootTemplateName = root[j].value;
+ break;
+ }
+
+ }
+ break;
+
+ }
+
+ }
+
+ if(loadedXML.name != rootTemplateName) {
+
+ alert("Error: The root element names do not match!");
+
+ //Create the root element
+ XMLEditor.add(XMLEditor.template.t("root")[0], XMLEditor.wrapper);
+
+ return;
+ }
+
+
+
//Add the root node, and subsequenty all of its children.
addNode(loadedXML, XMLEditor.wrapper, XMLEditor.template);
@@ -1606,7 +1669,7 @@ XMLEditor.headerInformation.value += "\n" + XMLEditor.template.t("doctype")[0].v
//Create the root element
-XMLEditor.add(XMLEditor.template.t("root")[0], XMLEditor.wrapper);
+//XMLEditor.add(XMLEditor.template.t("root")[0], XMLEditor.wrapper);
@@ -1628,6 +1691,9 @@ var Divider = {
divider : document.getElementById("divider_divider"),
+ LEFT_MIN : 300,
+ RIGHT_MIN : 140,
+
//True if the user is holding down the divider, false otherwise.
mouseIsDown : false,
@@ -1674,17 +1740,18 @@ var Divider = {
var right = Divider.right.offsetWidth;
var totalWidth = Divider.divider.parentNode.offsetWidth;
- if(right < 140) {
-
- percent = ((totalWidth - 140) / totalWidth) * 100;
+ var percent;
+
+ if(right < Divider.RIGHT_MIN) {
+ percent = ((totalWidth - 6) / totalWidth) * 100;
Divider.left.style.right = (100 - percent) + "%";
Divider.right.style.left = (percent) + "%";
Divider.divider.style.left = percent + "%";
- } else if(left < 300) {
+ } else if(left < Divider.LEFT_MIN) {
- percent = ((totalWidth - 300) / totalWidth) * 100;
+ percent = ((totalWidth - Divider.LEFT_MIN) / totalWidth) * 100;
percent = 100 - percent;
Divider.left.style.right = (100 - percent) + "%";
@@ -1833,20 +1900,33 @@ var FileManager = new function() {
var files = new Array();
+ //Makes things simpler
+ function g(id){return document.getElementById(id)};
+ function c(cl){return document.getElementsByClassName(cl)[0]};
+
+
+ var fileName = g("dialog_save_name");
+ var fileExistsWarning = g("dialog_save_warning");
+ var saveButton = g("dialog_save_button");
- var fileName = document.getElementById("dialog_save_name");
- var fileExistsWarning = document.getElementById("dialog_save_warning");
- var saveButton = document.getElementById("dialog_save_button");
+ var loadURLTab = c("dialog_load_url_tab");
+ var loadFileTab = c("dialog_load_file_tab");
+ var loadURLWindow = g("dialog_load_url_container");
+ var loadFileWindow = g("dialog_load_file_container");
- var loadList = document.getElementById("dialog_load_list");
- var loadPreview = document.getElementById("dialog_load_preview");
- var loadButton = document.getElementById("dialog_load_button");
- var deleteButton = document.getElementById("dialog_load_delete_button");
+ var loadURLXML = g("dialog_load_url_address");
+ var loadURLTemplate = g("dialog_load_url_template_address");
+ var loadURLButton = g("dialog_load_url_button");
+
+ var loadFileList = g("dialog_load_file_list");
+ var loadFilePreview = g("dialog_load_file_preview");
+ var loadFileButton = g("dialog_load_file_button");
+ var deleteFileButton = g("dialog_load_file_delete_button");
var currentSelectedLoadItem = null;
@@ -1892,6 +1972,10 @@ var FileManager = new function() {
+
+
+
+
fileName.addEventListener
("keyup", function() {
@@ -1932,10 +2016,62 @@ var FileManager = new function() {
+ this.displayLoadURL = function() {
+
+ loadFileTab.className = "dialog_load_file_tab";
+ loadURLTab.className = "dialog_load_url_tab dialog_load_url_tab_highlighted";
+
+ loadURLWindow.style.display = "block";
+ loadFileWindow.style.display = "none";
+
+
+ }
+
+ this.displayLoadFile = function() {
+
+ loadFileTab.className = "dialog_load_file_tab dialog_load_file_tab_highlighted";
+ loadURLTab.className = "dialog_load_url_tab";
+
+ loadURLWindow.style.display = "none";
+ loadFileWindow.style.display = "block";
+ }
+
+
+
+ this.loadFromURL = function(address) {
+
+ var req = (window.XMLHttpRequest)?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");
+ if(req == null) {
+ console.log("Error: XMLHttpRequest failed to initiate.");
+ }
+ try {
+
+ req.open("GET", address, false);
+ req.setRequestHeader('Content-Type', 'text/xml');
+ req.send(null);
+
+ } catch(e) {
+ console.log("Error retrieving data httpReq.");
+ }
+
+ if(req.responseText == "") {
+ return null;
+ }
+
+ return req.responseText;
+
+
+
+ }
+
+
+
+
+
this.addToLoadList = function(name, data) {
var newListItem = document.createElement("div");
- newListItem.className = "dialog_load_item";
+ newListItem.className = "dialog_load_file_item";
newListItem.innerHTML = name;
newListItem.data = data;
@@ -1944,25 +2080,27 @@ var FileManager = new function() {
("click", function() {
if(currentSelectedLoadItem != null) {
- currentSelectedLoadItem.className = "dialog_load_item";
+ currentSelectedLoadItem.className = "dialog_load_file_item";
}
- newListItem.className += " dialog_load_item_highlighted";
+ newListItem.className += " dialog_load_file_item_highlighted";
currentSelectedLoadItem = newListItem;
- loadPreview.value = data;
+ loadFilePreview.value = data;
}, true);
- loadList.appendChild(newListItem);
+ loadFileList.appendChild(newListItem);
}
+
+
this.load = function() {
XMLEditor.outputXML.value =
@@ -1978,7 +2116,75 @@ var FileManager = new function() {
}
- loadButton.addEventListener
+
+
+
+
+
+
+ loadURLTab.addEventListener
+ ("click", function() {FileManager.displayLoadURL()},true);
+
+ loadFileTab.addEventListener
+ ("click", function() {FileManager.displayLoadFile()},true);
+
+
+
+ loadURLButton.addEventListener
+ ("click", function(){
+
+ loadURLButton.innerHTML = "Loading...";
+
+ var file = FileManager.loadFromURL(loadURLXML.value);
+ var template = FileManager.loadFromURL(loadURLTemplate.value);
+
+ if(file == null) {
+ alert("Bad address for XML file");
+ }
+ if(template == null) {
+ alert("Bad address for template file");
+ }
+
+ console.log(file);
+
+ loadURLButton.innerHTML = "Load";
+
+ if(file != null && template != null)
+ Dialog.hide();
+
+
+ XMLEditor.setTemplate(template);
+ XMLEditor.outputXML.value = file;
+ XMLEditor.load(file);
+ //XMLEditor.save();
+
+
+ }, true);
+
+
+ //Auto-update the template address
+ loadURLXML.addEventListener
+ ("blur", function() {
+
+
+ if(!loadURLTemplate.value == "")
+ return;
+
+
+ alert("!");
+
+ var templateName = loadURLXML.value.substring
+ (0, loadURLXML.value.lastIndexOf("/")+1);
+
+ templateName += "template.xml";
+
+ loadURLTemplate.value = templateName;
+
+ }, true);
+
+
+
+ loadFileButton.addEventListener
("click", function() {
if(currentSelectedLoadItem == null) return;
@@ -1995,13 +2201,13 @@ var FileManager = new function() {
//Select all the text in the load preview when clicked
//This makes copying saved xml data easier
- loadPreview.addEventListener
+ loadFilePreview.addEventListener
("click", function() {
this.select();
}, true);
- deleteButton.addEventListener
+ deleteFileButton.addEventListener
("click", function() {
if(currentSelectedLoadItem == null) return;
@@ -2013,7 +2219,7 @@ var FileManager = new function() {
localStorage.removeItem("xml:" + name);
currentSelectedLoadItem.parentNode.removeChild(currentSelectedLoadItem);
- loadPreview.value =
+ loadFilePreview.value =
"Select a file on the left (if any), and click the Load button.";
}
@@ -2028,16 +2234,16 @@ var FileManager = new function() {
//When the application starts, load all the data currently in localStorage
- //into the loadList
+ //into the loadFileList
for(var i = 0; i < localStorage.length; i++) {
var name = localStorage.key(i);
if(name.substring(0, 4) == "xml:") {
- this.addToLoadList
- (name.substring(4, name.length),
- localStorage.getItem(name));
+ //this.addToLoadList
+ //(name.substring(4, name.length),
+ //localStorage.getItem(name));
}
View
160 style.css
@@ -1,4 +1,4 @@
-
+
body {
padding: 0;
margin: 0;
@@ -192,7 +192,109 @@ h3 {
-#dialog_load_list {
+
+
+
+
+
+
+
+
+
+
+.dialog_load_url_tab, .dialog_load_file_tab {
+
+ margin-top:8px;
+
+ font-size:26px;
+ height:30px;
+
+ float:left;
+
+ width:230px;
+ padding:4px;
+
+ background-color:#222;
+ color:#FFF;
+ text-align:center;
+ cursor:pointer;
+ border-radius:20px 0px 0px 20px;
+}
+.dialog_load_file_tab {
+ margin-left:2px;
+ border-radius:0px 20px 20px 0px;
+}
+.dialog_load_url_tab_highlighted, .dialog_load_file_tab_highlighted,
+.dialog_load_url_tab:hover, .dialog_load_file_tab:hover {
+ background-color:#AAF;
+}
+
+
+#dialog_load_url_container,
+#dialog_load_file_container {
+ position:absolute;
+ top:100px;
+ width:480px;
+ height:450px;
+ display:none;
+}
+#dialog_load_url_container {
+ display:block;
+}
+
+
+#dialog_load_url_container h3 {
+ margin-bottom:0px;
+ margin-left:10px;
+}
+#dialog_load_url_address, #dialog_load_url_template_address {
+
+ position:relative;
+
+ margin:10px;
+
+ font-size:30px;
+ height:32px;
+ width:450px;
+
+
+ text-align:left;
+
+}
+
+#dialog_load_url_button {
+
+ float:right;
+
+ margin-top:60px;
+ margin-right:20px;
+
+ font-size:26px;
+ height:30px;
+
+ width:200px;
+ padding:4px;
+
+ background-color:#222;
+ color:#FFF;
+ text-align:center;
+ cursor:pointer;
+ border-radius:20px;
+
+ z-index:100;
+
+}
+#dialog_load_url_button:hover {
+ background-color:#22F;
+}
+
+
+
+
+
+
+
+#dialog_load_file_list {
width:300px;
height:247px;
float:left;
@@ -202,7 +304,8 @@ h3 {
}
-.dialog_load_item {
+
+.dialog_load_file_item {
left:0px;
right:0px;
height:20px;
@@ -211,16 +314,16 @@ h3 {
cursor:pointer;
}
-.dialog_load_item:hover {
+.dialog_load_file_item:hover {
background-color:#CCC;
}
-.dialog_load_item_highlighted, .dialog_load_item_highlighted:hover {
+.dialog_load_file_item_highlighted, .dialog_load_file_item_highlighted:hover {
background-color:#AAF;
}
-#dialog_load_preview {
+#dialog_load_file_preview {
float:left;
border-width:0px;
width:150px;
@@ -229,11 +332,11 @@ h3 {
resize:none;
}
-.dialog_load_button_container {
+.dialog_load_file_button_container {
width:380px;
}
-#dialog_load_button, #dialog_load_delete_button {
+#dialog_load_file_button, #dialog_load_file_delete_button {
float:left;
@@ -255,10 +358,10 @@ h3 {
z-index:100;
}
-#dialog_load_button:hover {
+#dialog_load_file_button:hover {
background-color:#00C;
}
-#dialog_load_delete_button {
+#dialog_load_file_delete_button {
float:left;
@@ -270,10 +373,10 @@ h3 {
z-index:100;
}
-#dialog_load_delete_button:hover {
+#dialog_load_file_delete_button:hover {
background-color:#C00;
}
-
+*/
@@ -311,7 +414,7 @@ h3 {
#divider_left {
position:absolute;
- left:2px;
+ left:3px;
top:0px;
right:50%;
bottom:0px;
@@ -320,15 +423,21 @@ h3 {
}
#divider_divider {
- background-color:#000;
+ background-color:#888;
+
+ border:2px double #000;
+ border-width:0px 0px 0px 6px;
+ /*
+ border-width:0px 3px 0px 3px;
+ */
cursor:col-resize;
position:absolute;
left:50%;
top:0px;
bottom:0px;
- width:3px;
+ width:0px;
z-index:2;
@@ -342,7 +451,7 @@ h3 {
right:6px;
bottom:0px;
-
+ overflow:hidden;
z-index:1;
}
@@ -388,13 +497,22 @@ h3 {
-
-#xml {
+.xml_wrapper {
position:absolute;
+ left:2px;
+ top:20px;
+ right:2px;
+ bottom:0px;
+
+ margin-left:2px;
+}
+#xml {
+
+ position:relative;
display:block;
left:0px;
- top:20px;
+ top:0px;
width:100%;
height:100%;
@@ -406,9 +524,9 @@ h3 {
overflow-y:scroll;
- padding:2px;
+ padding:0px 2px;
padding-right:0px;
- margin-left:2px;
+
resize:none;
}
View
2  template.xml
@@ -7,7 +7,7 @@
</xml>
<doctype>
- &lt;!DOCTYPE xml PUBLIC&gt;
+ &lt;!DOCTYPE root xml PUBLIC&gt;
</doctype>
<root>
Please sign in to comment.
Something went wrong with that request. Please try again.