Merge pull request #48 from UNC-Libraries/add-nodes

Add nodes

bower.json

@@ -4,7 +4,7 @@
   "version": "1.0.0",
   "homepage": "https://github.com/UNC-Libraries/jquery.xmleditor",
   "authors": [
-    "Ben Pennell <bpennel@email.unc.edu>",
+    "Ben Pennell <bbpennel@email.unc.edu>",
     "Mike Daines <[email protected]>",
     "Dean Farrell <[email protected]>"
   ],

css/jquery.xmleditor.css

@@ -1,10 +1,16 @@
+/*
+    Steven Spungin <[email protected]>
+    Use box sizing to cause (text input and area) to fit within parent div instead of using 99% width hack
+*/
+
 /* Layout helpers
 ----------------------------------*/
 .xml_editor_container .ui-helper-hidden { display: none; }
 .xml_editor_container .ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
 .xml_editor_container .ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
 .xml_editor_container .ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
 .xml_editor_container .ui-helper-clearfix { display: inline-block; }
+.ui-helper-hidden-accessible { display: none; }
 /* required comment for clearfix to work in Opera \*/
 * html .ui-helper-clearfix { height:1%; }
 .xml_editor_container .ui-helper-clearfix { display:block; }
@@ -102,18 +108,86 @@
 
 /****************/
 
+.xml_text_node {
+	/*border-radius: 5px;*/
+	position: relative;
+	padding: 0;
+	width: 100%;
+	border: 1px solid #cccfdd;
+	background-color: #F0F8FF;
+}
+
+.xml_text_node.selected {
+	background-color: #c4eff5;
+}
+
+.xml_text_node + .xml_text_node {
+	border-top-width: 0;
+}
+
+.xml_text_node .xml_input_column {
+	box-shadow: -2px 2px 2px #ddddee inset;
+	border-right: 1px solid #ddd;
+	width: calc(100% - 27px);
+	padding: 0;
+	margin: 0;
+	overflow-x: hidden;
+	background-color: #F0F8FF;
+}
+
+.xml_text_node .xml_input_column textarea, .xml_text_node .xml_input_column input {
+	background: transparent;
+	border: none;
+	width: 100%;
+	margin: 0;
+	min-height: 3em;
+	overflow-y: auto;
+}
+
+.xml_text_node .xml_input_column input {
+	min-height: 1.5em;
+}
+
+.xml_text_node .xml_delete {
+	position: absolute;
+	right: 4px;
+	top: 4px;
+	background-color: #e4e4e4;
+    border-radius: 2px;
+    padding: 2px 5px;
+	border: 1px solid #aaaabb;
+	font-size: 11px;
+	color: #4C4C4C;
+	font-weight: 400;
+	vertical-align: 50%;
+	cursor: pointer;
+}
+
+.xml_text_node .xml_type_header {
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	padding: 5px;
+	display: block;
+	font-weight: bold;
+	cursor: default;
+}
+
+.xml_text_node.xml_comment_node .xml_type_header {
+	color : #B6B5BE;
+}
+
 .xml_input, .xml_select, .xml_textarea {
 	max-width: 100%;
 	display: block;
-	border: 1px solid #cccfdd;
-	box-shadow: -2px 2px 2px #ddddee inset;
 	font-size: 13px;
-	background-color: #F0F8FF;
-	padding-left: 4px;
 }
 
 .xml_input {
-	width: 99%;
+	box-sizing: border-box;
 	height: 25px;
 }
 
@@ -124,7 +198,7 @@
 
 .xml_textarea, .textareaClone {
 	max-height: 18em;
-	width: 99%;
+	box-sizing: border-box;
 	resize: vertical;
 	font-size: 13px;
 	padding: 4px 0 0 5px;
@@ -182,6 +256,13 @@
 	margin-bottom: 12px;
 }
 
+.xml_element.collapsed .element_header {
+	margin-bottom: 0;
+	-webkit-border-radius: 6px 6px 6px 6px;
+	-moz-border-radius: 6px 6px 6px 6px;
+	border-radius: 6px 6px 6px 6px;
+}
+
 .xml_root_element > .element_header {
 	background-color: #eeeeee;
 	background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#eeeeee));
@@ -196,21 +277,21 @@
 	background: linear-gradient(to bottom,  #FFFFFF,  #dddddd);
 }
 
-.top_level_element_group > .xml_children > .xml_element > .element_header {
+.top_level_element_group > div > .xml_children > .xml_element > .element_header {
 	background-color: #e9e9eb;
 	background: -webkit-gradient(linear, left top, left bottom, from(#FAFFFF), to(#e9e9eb));
 	background: -moz-linear-gradient(top,  #FAFFFF,  #e9e9eb);
 	background: linear-gradient(to bottom,  #FAFFFF,  #e9e9eb);
 }
 
-.top_level_element_group > .xml_children > .xml_element > .xml_children > .xml_element > .element_header {
+.top_level_element_group > div > .xml_children > .xml_element > div > .xml_children > .xml_element > .element_header {
 	background-color: #f1f1f3;
 	background: -webkit-gradient(linear, left top, left bottom, from(#F5FFFF), to(#f1f1f3));
 	background: -moz-linear-gradient(top,  #F5FFFF,  #f1f1f3);
 	background: linear-gradient(to bottom,  #F5FFFF,  #f1f1f3);
 }
 
-.top_level_element_group > .xml_children > .xml_element > .xml_children > .xml_element > .xml_children > .xml_element > .element_header {
+.top_level_element_group > div > .xml_children > .xml_element > div > .xml_children > .xml_element > div > .xml_children > .xml_element > .element_header {
 	background-color: #f5f5f9;
 	background: -webkit-gradient(linear, left top, left bottom, from(#F0FFFF), to(#f5f5f9));
 	background: -moz-linear-gradient(top,  #F0FFFF,  #f5f5f9);
@@ -263,8 +344,9 @@
 }
 
 .element_header > .top_actions > span {
-	padding: 1px 5px;
+	padding: 2px 5px;
 	border: 1px solid #aaaabb;
+	border-radius: 2px;
 	font-size: 11px;
 	margin: 0px 2px;
 	background-color: #eee;
@@ -298,6 +380,64 @@
 	padding: 5px;
 }
 
+.element_header .edit_title, .xml_attr_stub label {
+	min-width: 160px;
+	height: 1.3em;
+	padding: 2px 7px;
+	border: 1px solid #eee;
+	background-color: #fff;
+	display: inline-block;
+}
+
+.xml_stub.selected .element_header .edit_title {
+	background-color: #D4F1F5;
+	border-color: #5ECFE6;
+	box-shadow: 2px 2px 2px #CBDBDF inset;
+
+}
+
+.xml_stub .element_header {
+	margin-bottom: 0;
+	padding-bottom: 5px;
+	border-radius: 6px 6px 6px 6px;
+}
+
+.xml_stub .element_header .top_actions > span {
+	vertical-align: middle;
+}
+
+.xml_stub .create_element {
+	display: inline-block;
+	margin-left: 10px;
+	font-weight: 400;
+	cursor: pointer;
+	color: #667;
+	vertical-align: top;
+	text-decoration: underline;
+}
+
+.xml_autocomplete {
+	overflow-x: hidden;
+	max-height: 8em;
+	box-shadow: 4px 4px 5px 0 rgba(0, 0, 0, 0.15);
+}
+
+.xml_autocomplete .ui-menu-item {
+	padding: 2px 7px;
+}
+
+.xml_autocomplete .ui-menu-item span {
+	font-weight: bold;
+}
+
+.xml_autocomplete .ui-state-focus {
+	background-color: #eef;
+}
+
+.xml_attr_stub .create_attr {	
+	text-decoration: underline;
+}
+
 /* Attributes */
 
 .attribute_container {
@@ -330,7 +470,8 @@
 	resize: horizontal;
 	min-width: 100px;
 	height: 1.5em;
-	width: 160px;	
+	width: 160px;
+	overflow: hidden;
 }
 
 .attribute_container > select {
@@ -341,7 +482,7 @@
 	*display: inline;
 }
 
-.attribute_container > a {
+.attribute_container > a, .attribute_container .create_attr {
 	color: #1C94C4;
 	vertical-align: 45%;
 	cursor: pointer;
@@ -360,6 +501,10 @@
 	padding-top: 0px;
 }
 
+.xml_text_node + .xml_element {
+	margin-top: 20px;
+}
+
 /* Menu */
 
 .xml_menu_column {

demo/atom.html

@@ -11,7 +11,6 @@
 <script src="../lib/json2.js"></script>
 <script src="../lib/cycle.js"></script>
 <script src="../lib/jquery.autosize-min.js"></script>
-<script src="../lib/vkbeautify.js"></script>
 <script src="../xsd/xsd2json.js"></script>
 <script src="../jquery.xmleditor.js"></script>
 </head>

demo/cpf.html

@@ -11,7 +11,6 @@
 <script src="../lib/json2.js"></script>
 <script src="../lib/cycle.js"></script>
 <script src="../lib/jquery.autosize-min.js"></script>
-<script src="../lib/vkbeautify.js"></script>
 <script src="../xsd/xsd2json.js"></script>
 <script src="../jquery.xmleditor.js"></script>
 <style>
@@ -35,25 +34,36 @@ <h1>EAC-CPF Example with Language Autocomplete</h1>
 	</div>
 <script>
 	$(function() {
-	    var availableTags = [ "Aguano", "Tucanoan", "English", "Spanish",
-	            "French", "Chinese", "German", "C++", "Japanese", "Urdu",
-	            "Hindi" ];
-	    var extractor = new Xsd2Json("cpf.xsd", {
-		    "schemaURI" : "examples/eac-cpf/"
-	    });
-	    $("#xml_editor").xmlEditor(
-	            {
-	                schema : extractor.getSchema(),
-	                elementUpdated : function(event) {
-		                if (event.action == 'render'
-		                        && this.objectType.localName == 'language') {
-			                this.textInput.autocomplete({
-				                source : availableTags
-			                });
-		                }
-	                }
-	            });
-    });
+		var availableTags = [ "Aguano", "Tucanoan", "English", "Spanish",
+				"French", "Chinese", "German", "C++", "Japanese", "Urdu",
+				"Hindi" ];
+		var extractor = new Xsd2Json("cpf.xsd", {
+			"schemaURI" : "examples/eac-cpf/"
+		});
+		$("#xml_editor").xmlEditor(
+				{
+					schema : extractor.getSchema(),
+					elementUpdated : function(event) {
+						if (event.action == 'render'
+								&& this.objectType.localName == 'language') {
+
+							var textInputs = this.getTextInputs();
+
+							textInputs.keypress(function(event){
+								var keycode = (event.keyCode ? event.keyCode : event.which);
+								if (keycode == '13') {
+									event.preventDefault();
+									event.stopPropagation();
+								}
+							});
+
+							textInputs.autocomplete({
+								source : availableTags
+							});
+						}
+					}
+				});
+	});
 </script>
 </body>
 </html>

demo/include-test.html

@@ -11,7 +11,6 @@
 <script src="../lib/jquery-ui.min.js"></script>
 <script src="../lib/json2.js"></script>
 <script src="../lib/cycle.js"></script>
-<script src="../lib/vkbeautify.js"></script>
 <script src="../xsd/xsd2json.js"></script>
 <script src="../jquery.xmleditor.js"></script>
 </head>

demo/mods.html

@@ -12,7 +12,6 @@
 <script src="../lib/json2.js"></script>
 <script src="../lib/cycle.js"></script>
 <script src="../lib/jquery.autosize-min.js"></script>
-<script src="../lib/vkbeautify.js"></script>
 <script src="../jquery.xmleditor.js"></script>
 </head>
 <body>

demo/no-target-ns.html

@@ -11,7 +11,6 @@
 <script src="../lib/jquery-ui.min.js"></script>
 <script src="../lib/json2.js"></script>
 <script src="../lib/cycle.js"></script>
-<script src="../lib/vkbeautify.js"></script>
 <script src="../xsd/xsd2json.js"></script>
 <script src="../jquery.xmleditor.js"></script>
 </head>

demo/xsd2json_example.html

@@ -11,7 +11,6 @@
 <script src="../lib/jquery-ui.min.js"></script>
 <script src="../lib/json2.js"></script>
 <script src="../lib/cycle.js"></script>
-<script src="../lib/vkbeautify.js"></script>
 <script src="../xsd/xsd2json.js"></script>
 <script src="../jquery.xmleditor.js"></script>
 </head>

demo/xsd2json_example2.html

@@ -11,7 +11,6 @@
 <script src="../lib/jquery-ui.min.js"></script>
 <script src="../lib/json2.js"></script>
 <script src="../lib/cycle.js"></script>
-<script src="../lib/vkbeautify.js"></script>
 <script src="../xsd/xsd2json.js"></script>
 <script src="../jquery.xmleditor.js"></script>
 </head>

index.html

@@ -12,7 +12,6 @@
 <script src="lib/json2.js"></script>
 <script src="lib/cycle.js"></script>
 <script src="lib/jquery.autosize-min.js"></script>
-<script src="lib/vkbeautify.js"></script>
 <script src="jquery.xmleditor.js"></script>
 </head>
 <body>