Added functionality to Md. Data Converter to allow some data transformation

README.md

@@ -1,4 +1,4 @@
 ## DESCRIPTION
 
 Takes CSV or tab-delimited data from Excel and converts it into several web-friendly formats, include JSON and XML.
-View it in action here: http://shancarter.github.com/mr-data-converter/
+View it in action here: http://deepinthecode.github.io/mr-csv-transformer/

css/converter.css

@@ -5,7 +5,66 @@ http://developer.yahoo.com/yui/license.html
 version: 3.1.2
 build: 56
 */
-html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}
+html{
+	color:#000;
+	background:#00304A;
+}
+
+body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
+	margin:0;
+	padding:0;
+}
+
+table{
+	border-collapse:collapse;border-spacing:0;
+}
+
+fieldset,img{
+	border:0;
+}
+address,caption,cite,code,dfn,em,strong,th,var{
+	font-style:normal;
+	font-weight:normal;
+}
+
+li{
+	list-style:none;
+}
+
+caption,th{
+	text-align:left;
+}
+
+h1,h2,h3,h4,h5,h6{
+	font-size:100%;
+	font-weight:normal;
+}
+
+q:before,q:after{
+	content:'';
+}
+
+abbr,acronym{
+	border:0;font-variant:normal;
+}
+
+sup{
+	vertical-align:text-top;
+}
+
+sub{
+	vertical-align:text-bottom;
+}
+
+input,textarea,select{
+	font-family:inherit;
+	font-size:100%;
+	font-weight:inherit;
+}
+
+legend{
+	color:#000;
+}
 
 
 /*
@@ -15,16 +74,16 @@ Mr. Data Converter styles
 
 html {
 	font-family: Helvetica, Arial;
-	background: #141414 url('../images/background.png') no-repeat;
+	background: #00304A /*url('../images/background.png') no-repeat*/;
 }
 
 body {
-  overflow: hidden;
+	overflow: hidden;
 }
 
 #base {
-  padding: 15px;
-  position: relative;
+	padding: 15px;
+	position: relative;
 }
 
 
@@ -33,35 +92,39 @@ body {
 /*header*/
 
 #header {
-
 	color: #FFF;
 	width: 300px;
 	overflow: auto;
 }
 #header a {
 	color: #99FFFF;
-/*  opacity: 0.7;*/
+	/*  opacity: 0.7;*/
 }
 
 #header p {
 	color: #CCC;
 }
 
+#header img {
+	vertical-align: middle;
+	text-align: center;
+}
+
 #description p {
 	margin-bottom: 18px;
 }
 
 #header h3 {
-  font-size: 12px;
-  margin: 15px 0 10px 0;
-  padding: 15px 0 0 0;
-  border-top: solid 1px #CCC;
-  text-transform: uppercase;
+	font-size: 12px;
+	margin: 15px 0 10px 0;
+	padding: 15px 0 0 0;
+	border-top: solid 1px #CCC;
+	text-transform: uppercase;
 }
 
 h1 {
-  color: #DEDEDE;
-  font-family: palatino, Georgia;
+	color: #DEDEDE;
+	font-family: palatino, Georgia;
 	font-size: 40px;
 	line-height: 40px;
 	font-weight: bold;
@@ -79,20 +142,19 @@ p {
 
 }
 
-
 #settings h5 {
-  font-size: 13px;
-  line-height: 24px;
+	font-size: 13px;
+	line-height: 24px;
 }
 
 #settings p {
-  font-size: 13px;
-  line-height: 24px;
+	font-size: 13px;
+	line-height: 24px;
 }
 
 
 #settings .settingsGroup p {
-  padding-left: 20px;
+	padding-left: 20px;
 }
 
 /*converter*/
@@ -102,8 +164,8 @@ p {
 	top: 15px;
 	left: 330px;
 	border-color:#000000 #666666 #666666 #000000;
-  border-style:solid;
-  border-width:2px;
+  	border-style:solid;
+  	border-width:2px;
 }
 
 
@@ -113,40 +175,39 @@ p.dataHeaders{
 }
 
 .textInputs {
-
-  background-color: #C9B7C7;
-  border: none;
-  color: #664D63;
-  font-family: monospace;
-  font-size: 12px;
-  height: 300px;
-  line-height: 18px;
-  padding: 10px;
-  text-shadow: #DED4DD 0px 1px 0px;
-  -webkit-box-shadow: #333 1px 1px 10px inset;
-  -moz-box-shadow: #333 1px 1px 10px inset;
+	background-color: #B0E0E6;
+	border: none;
+	color: #00304A;
+	font-family: monospace;
+	font-size: 12px;
+	height: 300px;
+	line-height: 18px;
+	padding: 10px;
+	text-shadow: #DED4DD 0px 1px 0px;
+	/*-webkit-box-shadow: #333 1px 1px 10px inset;
+	-moz-box-shadow: #333 1px 1px 10px inset;*/
 }
 
 
 .groupHeader{
-  width: 100%;
-  color: #FFF;
-  height: 45px;
-  background-color:#5F255C;
-  background-image: url('../images/header_gradient.png');
+	width: 100%;
+	color: #B0E0E6;
+	height: 45px;
+	background-color:#0047AB;
+	/*background-image: url('../images/header_gradient.png');*/
 }
 
 
 p.groupHeadline {
-  padding: 10px;
+  	padding: 10px;
 }
 .groupHeader span.subhead {
-  opacity: 0.7;
-  font-size: 12px;
+  	opacity: 0.7;
+  	font-size: 12px;
 }
 
 .groupHeader a {
-  color: #FF66FF;
+  	color: #6699CC;
 }
 
 
@@ -171,4 +232,8 @@ p.groupHeadline {
 
 #dataSelector option {
 
-}
+}
+
+#InputWrapper {
+	height: auto;
+}

index.html

@@ -1,70 +1,71 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
-   "http://www.w3.org/TR/html4/loose.dtd">
+<!DOCTYPE html>
 
 <html lang="en">
-<head>
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-  <title>Mr. Data Converter</title>
-  <meta name="author" content="Shan Carter">
-  <!-- Date: 2010-08-26 -->
-  <link rel="stylesheet" href="css/converter.css" type="text/css" media="screen" title="no title" charset="utf-8">
-
-  <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
-  <script src="js/CSVParser.js" type="text/javascript" charset="utf-8"></script>
-  <script src="js/DataGridRenderer.js" type="text/javascript" charset="utf-8"></script>
-  <script src="js/converter.js" type="text/javascript" charset="utf-8"></script>
-  <script src="js/Controller.js" type="text/javascript" charset="utf-8"></script>
-
-</head>
-<body>
-  <div id='base'>
-    <div id='header'>
-      <div id="description">
-        <h1>Mr. Data Converter</h1>
-        <p>I will convert your Excel data into one of several web-friendly formats, including HTML, JSON and XML.</p>
-        <p>Fork me on <a href="http://github.com/shancarter/Mr-Data-Converter">github</a>.</p>
-      </div>
-      <div id='settings'>
-        <h3>Settings</h3>
-        <form id='settingsForm'>
-           <p>Delimiter:
-
-             <label><input class="settingsElement" type="radio" name="delimiter" id='delimiterAuto'   value="auto" checked/> Auto</label>
-             <label><input class="settingsElement" type="radio" name="delimiter" id='delimiterComma'  value="comma" /> Comma</label>
-             <label><input class="settingsElement" type="radio" name="delimiter" id='delimiterTab'    value="tab" /> Tab</label>
-            </p>
-          <p>Decimal Sign:
-
-             <label><input class="settingsElement" type="radio" name="decimal" id='decimalDot'   value="dot" checked/> Dot</label>
-             <label><input class="settingsElement" type="radio" name="decimal" id='decimalComma'  value="comma" /> Comma</label>
-            </p>
-          <p><label><input class="settingsElement" type="checkbox" name="" value="" id="headersProvidedCB" checked /> First row is the header</label></p>
-          <div class="settingsGroup">
-            <p>Transform: <label><input class="settingsElement" type="radio" name="headerModifications" value="downcase" id='headersDowncase' /> downcase</label>
-            <label><input class="settingsElement" type="radio" name="headerModifications" id='headersUpcase' value="upcase" /> upcase</label>
-            <label><input class="settingsElement" type="radio" name="headerModifications" id='headersNoTransform' value="none" checked /> none</label></p>
-          </div>
-
-          <p><label><input class="settingsElement" type="checkbox" name="some_name" value="" id="includeWhiteSpaceCB" checked /> Include white space in output</label></p>
-          <div class="settingsGroup">
-            <p>Indent with: <label><input class="settingsElement" type="radio" name="indentType" value="tabs" id='includeWhiteSpaceTabs'/> tabs</label> <label><input class="settingsElement" type="radio" name="indentType" value="spaces" id='includeWhiteSpaceSpaces' checked/> spaces</label></p>
-          </div>
-
-
-        </form>
-
-
-      </div>
-    </div>
-
-
-
-    <div id='converter' class=''>
-
-    </div>
-
-  </div>
-
-
-</body>
+   <head>
+     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+     <title>Mr. CSV Transformer</title>
+     <meta name="author" content="David Young, Drew Shefman, Dr. Robert L. Read" />
+     <!-- Date: 2014-05-31 -->
+     <link rel="stylesheet" href="css/converter.css" type="text/css" media="screen" title="no title" />
+     <link rel="shortcut icon" href="images/glider.png" />
+     <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
+     <script src="js/applyMap.js" type="text/javascript" charset="utf-8"></script>
+     <script src="js/getUrlVars.js" type="text/javascript" charset="utf-8"></script>
+     <script src="js/jsonToCsv.js" type="text/javascript" charset="utf-8"></script>
+     <script src="js/CSVParser.js" type="text/javascript" charset="utf-8"></script>
+     <script src="js/DataGridRenderer.js" type="text/javascript" charset="utf-8"></script>
+     <script src="js/addTextInputs.js" type="text/javascript" charset="utf-8"></script>
+     <script src="js/enableTab.js" type="text/javascript" charset="utf-8"></script>
+     <script src="js/converter.js" type="text/javascript" charset="utf-8"></script>
+     <script src="js/Controller.js" type="text/javascript" charset="utf-8"></script>
+     <script src="js/SaveVarAsFile.js" type="text/javascript" charset="utf-8"></script>
+   </head>
+   <body>
+     <div id='base'>
+       <div id='header'>
+         <div id="description">
+           <h1>Mr. CSV Transformer</h1>
+           <p>I will convert your Excel / comma- or tab-delimited data into one of several web-friendly formats, including HTML, JSON and XML.  Data structures in languages including Python, Ruby, and PHP are available.  Lastly, database insertion statements for MySQL and mongoDB can be generated.  To include only certain columns, add "?targets=<i>[names]</i>" to the end of the URL; <i>[names]</i> is the column names separated by commas (no quotes, no brackets) in the order in which you wish them to appear to the URL above and refresh the page.</p>
+           <p><a href="http://validator.w3.org/check?uri=http://deepinthecode.github.io/mr-csv-transformer" target="_blank"><img src="http://www.w3.org/html/logo/badge/html5-badge-h-css3.png" width="133" height="64" alt="HTML5 Powered with CSS3 / Styling" title="HTML5 Powered with CSS3 / Styling" /></a><a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" /></a></p>
+           <p>Fork me on <a href="http://github.com/deepinthecode/Mr-CSV-Transformer" target="_blank">GitHub</a>.</p>
+         </div>
+         <div id='settings'>
+           <h3>Settings</h3>
+           <form id='settingsForm'>
+              <p>Delimiter:
+                <label><input class="settingsElement" type="radio" name="delimiter" id='delimiterAuto'   value="auto" checked/> Auto</label>
+                <label><input class="settingsElement" type="radio" name="delimiter" id='delimiterComma'  value="comma" /> Comma</label>
+                <label><input class="settingsElement" type="radio" name="delimiter" id='delimiterTab'    value="tab" /> Tab</label>
+               </p>
+             <p>Decimal Sign:
+                <label><input class="settingsElement" type="radio" name="decimal" id='decimalDot'   value="dot" checked/> Dot</label>
+                <label><input class="settingsElement" type="radio" name="decimal" id='decimalComma'  value="comma" /> Comma</label>
+               </p>
+             <p><label><input class="settingsElement" type="checkbox" name="" value="" id="headersProvidedCB" checked /> First row is the header</label></p>
+             <div class="settingsGroup">
+               <p>Transform: <label><input class="settingsElement" type="radio" name="headerModifications" value="downcase" id='headersDowncase' /> downcase</label>
+               <label><input class="settingsElement" type="radio" name="headerModifications" id='headersUpcase' value="upcase" /> upcase</label>
+               <label><input class="settingsElement" type="radio" name="headerModifications" id='headersNoTransform' value="none" checked /> none</label></p>
+             </div>
+             <p><label><input class="settingsElement" type="checkbox" name="some_name" value="" id="includeWhiteSpaceCB" checked /> Include white space in output</label></p>
+             <div class="settingsGroup">
+               <p>Indent with: <label><input class="settingsElement" type="radio" name="indentType" value="tabs" id='includeWhiteSpaceTabs'/> tabs</label> <label><input class="settingsElement" type="radio" name="indentType" value="spaces" id='includeWhiteSpaceSpaces' checked/> spaces</label></p>
+             </div>
+             <div class="settingsGroup">
+                <br /><br />
+                <!--<p><label><input class="settingsElement" type="checkbox" name="useTargets" value="" id="useTargetsCB" checked /> Use target mapping</label></p> -->
+             </div>
+             <div class="settingsGroup" id="InputsWrapper">
+             </div>
+             <div>
+                <p><br /><br /></p>
+                <p>Forked from: <a href="http://github.com/shancarter/Mr-Data-Converter" target="_blank">Mr. Data Converter by Shan Carter</a></p>
+             </div>
+           </form>
+         </div>
+       </div>
+       <div id='converter' class=''>
+       </div>
+     </div>
+   </body>
 </html>