Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Commit 1f8942b

Browse files
committed
Implemented csv viewing.
1 parent 244e4fd commit 1f8942b

File tree

4 files changed

+316
-5
lines changed

4 files changed

+316
-5
lines changed

‎css/index.css‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,4 +72,51 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
7272
.styleless {
7373
background-color: transparent;
7474
border: 0px;
75+
}
76+
77+
/* Tables */
78+
79+
.table-title {
80+
background-color: sandybrown;
81+
border-top-right-radius: 8px;
82+
border-top-left-radius: 8px;
83+
padding-top: 5px;
84+
padding-bottom: 5px;
85+
margin-bottom: 0px;
86+
}
87+
88+
.table-holder {
89+
margin-top: 20px;
90+
border: 1px solid lightgray;
91+
border-radius: 8px;
92+
border-bottom: 0px;
93+
border-bottom-left-radius: 0px;
94+
border-bottom-right-radius: 0px;
95+
}
96+
97+
.tables {
98+
margin-bottom: 20px;
99+
}
100+
101+
table {
102+
width: 100%;
103+
border-bottom: 0px;
104+
}
105+
106+
table, th, td {
107+
border: 1px solid lightgrey;
108+
border-collapse: collapse;
109+
}
110+
111+
table tr:nth-child(even) {
112+
background-color: white;
113+
}
114+
115+
table tr:nth-child(odd) {
116+
background-color: #f2f2f2;
117+
}
118+
119+
table th {
120+
background-color: #e1e1e1;
121+
color: black;
75122
}

‎index.html‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -107,18 +107,27 @@
107107
<div class="form-group">
108108
<label for="encoding">Encoding:</label>
109109
<select id="encoding" name="encoding">
110-
<option value="utf-8">UTF-8</option>
110+
<option value="UTF-8">UTF-8</option>
111+
<option value="UTF-16">UTF-16</option>
112+
<option value="ISO-8859-1">ISO-8859-1</option>
111113
</select>
112114
</div>
113115
<div class="form-group">
114116
<label for="column-separator">Column separator</label>
115117
<select id="column-separator" name="column-separator">
116-
<option value="comma">Comma (,)</option>
118+
<option value=",">Comma (,)</option>
119+
<option value=";">Semi-colon (;)</option>
120+
<option value=":">Colon (:)</option>
121+
<option value="|">Bar (|)</option>
122+
<option value="^">Caret (^)</option>
123+
<option value="">Space ( )</option>
124+
<option value=".">Period (.)</option>
125+
<option value="-">Dash (-)</option>
117126
</select>
118127
</div>
119128
<div class="form-group">
120129
<label for="max-rows">Max rows:</label>
121-
<input id="max-rows" type="number" name="max-rows" min="1">
130+
<input id="max-rows" type="number" name="max-rows" min="0" value="0">
122131
</div>
123132
<div class="form-group">
124133
<label for="quotes">Treat quoted text as a single cell:</label>
@@ -129,6 +138,12 @@
129138
</div>
130139
</div>
131140
</div>
141+
<!-- Tables -->
142+
<div class="tables text-center" id="tables">
143+
<div style="margin-top: 100px; margin-bottom: 100px; font-size: 30px;">
144+
No Tables
145+
</div>
146+
</div>
132147
</div>
133148

134149
<!-- index.js & project csv api -->

‎js/index.js‎

Lines changed: 127 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,20 @@
1616
*/
1717

1818
/* Semi constant values */
19-
SM_SCREEN_SIZE = 768;
19+
var SM_SCREEN_SIZE = 768;
20+
21+
var TABLE_COLORS = [
22+
"#0095f9",
23+
"#9df900",
24+
"#00f9ec",
25+
"#f9f400",
26+
"#f99900",
27+
"#f90091",
28+
"#31f7a8",
29+
"#fcf805",
30+
"#14ffeb",
31+
"#ff2323"
32+
];
2033

2134
/**
2235
* Basic controls toggle button callback.
@@ -146,6 +159,119 @@ function getUserInput() {
146159
return userInput;
147160
}
148161

162+
/* Tables */
163+
164+
/**
165+
* Randomly selects the background color of each table title
166+
* (.table-title) from a predefined list of colors.
167+
*
168+
* @returns {undefined}
169+
*/
170+
function colorTables(){
171+
$(".table-title").each(function() {
172+
$(this).css("background-color", randomColor());
173+
});
174+
175+
function randomColor(){
176+
return TABLE_COLORS[Math.floor(Math.random() * TABLE_COLORS.length)];
177+
}
178+
}
179+
180+
/* Table Generation */
181+
182+
/**
183+
* Creates a table holder with the
184+
* given table in it.
185+
*
186+
* @param {type} title
187+
* @param {type} tableHtml
188+
* @returns {String|getTableUnit.tableHolder}
189+
*/
190+
function getTableUnit(title, tableHtml){
191+
var tableHolder = "<div class=\"table-holder\"><p class=\"table-title\"><b>{@name}</b></p>{@table}</div>";
192+
tableHolder = tableHolder.replace("{@name}", title);
193+
tableHolder = tableHolder.replace("{@table}", tableHtml);
194+
return tableHolder;
195+
}
196+
197+
/**
198+
* Clears all tables from the page.
199+
*/
200+
function clearTables(){
201+
$("#tables").html("");
202+
}
203+
204+
/**
205+
* Adds (appends) a table holder to the page.
206+
*
207+
* @param {type} unit
208+
* @returns {undefined}
209+
*/
210+
function addTableUnit(unit){
211+
$("#tables").append(unit);
212+
}
213+
214+
/**
215+
* Gets the users input and creates
216+
* a set of tables from it.
217+
*/
218+
function populate(){
219+
for(var i = 0; i <= getUserInput().files.length; i++){
220+
file = getUserInput().files[i];
221+
var reader = new FileReader();
222+
223+
reader.onload = (function(theFile) {
224+
return function(e) {
225+
var ui = getUserInput();
226+
addTableUnit(
227+
getTableUnit(
228+
theFile.name,
229+
getTable(
230+
csvTo2DArray(
231+
e.target.result,
232+
ui.columnSeparator,
233+
ui.useQuotes,
234+
ui.maxRows
235+
),
236+
ui.firstRowHeaders,
237+
ui.firstRowInlcude
238+
)
239+
)
240+
);
241+
colorTables();
242+
};
243+
})(file);
244+
245+
reader.readAsText(file, getUserInput().encoding);
246+
}
247+
}
248+
149249
$("#go").click(function (){
250+
if(getUserInput().files.length === 0){
251+
alert("No files selected!");
252+
return;
253+
}
150254

255+
clearTables();
256+
$("#go").html("Refresh!");
257+
populate();
258+
});
259+
260+
/**
261+
* Prevents users submitting the form
262+
* with the enter key.
263+
*/
264+
$(document).on("keypress", "form", function(event) {
265+
return event.keyCode !== 13;
266+
});
267+
268+
/**
269+
* Prevents the controls from being
270+
* stuck in collapsed mode.
271+
*/
272+
$(window).resize(function() {
273+
if($(window).width() < SM_SCREEN_SIZE) {
274+
showBasic();
275+
showAdvanced();
276+
}
151277
});

‎js/projectcsv.js‎

Lines changed: 124 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,4 +24,127 @@
2424
*/
2525
function test(){
2626
console.log("projectcsv.test()");
27-
}
27+
}
28+
29+
/**
30+
* Creates an unstyled, bare-bones html table
31+
* from the provided 2D(Multidimentional Array).
32+
*
33+
* @param {type} tableArray the 2D array.
34+
* @param {type} useHeaders will make the first row
35+
* in the table bold if true.
36+
* @param {type} dupeHeaders will duplicate the first row
37+
* in the table if true and useHeaders is true.
38+
* @returns {String} the constructed html table as text.
39+
*/
40+
function getTable(tableArray, useHeaders, dupeHeaders){
41+
var tableOpen = "<table>";
42+
var tableClose = "</table>";
43+
44+
var headerCell = "<th>{@val}</th>";
45+
var cell = "<td>{@val}</td>";
46+
47+
var rowOpen = "<tr>";
48+
var rowClose = "</tr>";
49+
50+
var table = tableOpen;
51+
52+
for(i = 0; i < tableArray.length; i++){
53+
//Row
54+
if(i === 1 && useHeaders && dupeHeaders){
55+
i = 0;
56+
useHeaders = false;
57+
dupeHeaders = false;
58+
}
59+
60+
table += rowOpen;
61+
for(j = 0; j < tableArray[i].length; j++){
62+
//Cell
63+
if(i === 0 && useHeaders){
64+
table += headerCell.replace("{@val}", tableArray[i][j]);
65+
} else {
66+
table += cell.replace("{@val}", tableArray[i][j]);
67+
}
68+
}
69+
70+
table += rowClose;
71+
}
72+
73+
return table + tableClose;
74+
}
75+
76+
/**
77+
* Creates a 2D (Multidimentional) array from
78+
* CSV data in string form.
79+
*
80+
* @param {type} csv the CSV data.
81+
* @param {type} separator the character used
82+
* to separate the columns/cells.
83+
* @param {type} quotes ignores the separator
84+
* in quoted text.
85+
* @param {type} maxRows the maximum rows
86+
* to scan.
87+
* @returns {Array|csvTo2DArray.table} the CSV data
88+
* as a 2D (Multidimentional) array.
89+
*/
90+
function csvTo2DArray(csv, separator, quotes, maxRows){
91+
var table = [];
92+
var rows = 0;
93+
94+
csv.split("\n").map(function(row){
95+
if(maxRows !== "0")
96+
if(rows >= maxRows)
97+
return;
98+
99+
var tableRow = getRow(row, separator, quotes);
100+
101+
if(tableRow === null)
102+
return table;
103+
104+
table.push(tableRow);
105+
rows++;
106+
});
107+
108+
return table;
109+
}
110+
111+
/**
112+
* Creates an array from a CSV row (line)
113+
*
114+
* @param {type} row the CSV row.
115+
* @param {type} separator character used to separate
116+
* cells/columns
117+
* @param {type} quotes ignores the separator
118+
* in quoted text.
119+
* @returns {Array|getRow.trow} the CSV row as an array.
120+
*/
121+
function getRow(row, separator, quotes){
122+
if(row.length === 0)
123+
return null;
124+
125+
isQuoted = false;
126+
var trow = [];
127+
var cell = "";
128+
129+
for(var i = 0; i < row.length; i++){
130+
var char = row.charAt(i);
131+
132+
if(quotes){
133+
if(char === '\"' || char === '\''){
134+
isQuoted = !isQuoted;
135+
continue;
136+
}
137+
}
138+
139+
if(char === separator && !isQuoted){
140+
trow.push(cell);
141+
cell = "";
142+
continue;
143+
}
144+
145+
cell += char;
146+
}
147+
148+
trow.push(cell);
149+
return trow;
150+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /