Skip to content

Commit

Permalink
Remove input borders, add form builder, ugly buttons
Browse files Browse the repository at this point in the history
  • Loading branch information
@guntrip
guntrip committed May 13, 2017
1 parent 6bc411a commit e41ff30
Show file tree
Hide file tree
Showing 3 changed files with 285 additions and 9 deletions.
27 changes: 26 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,34 @@
</nav>
</div>

<div class="form-tools">

<div class="form-button" id="tablebuilder-start">
N
</div>

<div class="form-button" id="new-row">
R
</div>

<div class="form-button" id="new-column">
C
</div>

<div class="form-button" id="toggle-delete">
D
</div>

</div>

</div>
<div class="container" id="viewport">

<div id="display"></div>

</div>
<div class="container">

<div id="csv-options" class="options">
<p>
<button class="btn" type="button" onclick="downloadCsv();"><span class="octicon octicon-cloud-download"></span> Download</button>
Expand All @@ -56,7 +82,6 @@
</p>
</div>


<div class="footer">
built by <a href="http://www.github.com/stevecat/">stevecat</a> &bull;
<a href="http://www.github.com/stevecat/table-magic">repo</a> &bull;
Expand Down
176 changes: 168 additions & 8 deletions magic.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
var tab = "csv", header_alignment=[], array_storage="", form_rows=0, form_cols=0, prettify_md=true, debug=false;
var tab = "csv", header_alignment=[], array_storage="", form_rows=0, form_cols=0, prettify_md=true, debug=false, global_form_cols=0;

var example_csv='Feature, Description, Example\n'+
'Renders markdown, Uses showdown library to render contents of table cells, **Just** *like* ``this``\n'+
Expand All @@ -18,8 +18,21 @@ $(window).load(function() {
if (tab!=="md") { $('#md-options').hide(); }
if (tab!="csv") { $('#csv-options').hide(); }
if (tab!="sql") { $('#sql-info').hide(); }
if (tab!="form") { $('.form-tools').hide(); }

// bind form buttons
$("body").delegate("#new-row", "click", function() {
form_add_row();
});

$("body").delegate("#new-column", "click", function() {
form_add_col();
});

$("body").delegate("#toggle-delete", "click", function() {
$('table.form td.button').toggle();
});

$("body").delegate(".button-row-duplicate", "click", function() {
if (typeof $(this).closest("tr")[0].rowIndex === 'number') {
form_duplicate_row($(this).closest("tr")[0].rowIndex);
Expand Down Expand Up @@ -60,7 +73,31 @@ $(window).load(function() {

});

// Table-builder

// Opening square
$("body").delegate("#tablebuilder-start", "mousedown", function() {
tablebuilder_create();
});

// When other squares are entered
$("body").delegate(".table-builder>div>div", "mouseenter mouseup", function() {
if ($(this).attr('id')!=='start') {
if (event.buttons===0) {
var x = parseInt($(this).attr('x')), y = parseInt($(this).attr('y'));
tablebuilder_clear();
tablebuilder_build(x,y);
} else {
var x = parseInt($(this).attr('x'))+1, y = parseInt($(this).attr('y'))+1;
tablebuilder_draw(x,y);
}
}
});

// Mouse up on a square
$("body").delegate(".table-builder", "mouseout", function() {
tablebuilder_clear();
});

});

Expand Down Expand Up @@ -151,11 +188,16 @@ function changeTab(newTab) {
if (newTab==='sql') $('#sql-info').show();
}

if (tab==='form') {
$('.form-tools').hide();
}


$('.options').hide();
if (newTab==="md") { $('#md-options').show(); }
if (newTab==="csv") { $('#csv-options').show(); }
if (newTab==="sql") { $('#sql-info').show(); }
if (newTab==="form") { $('.form-tools').show(); form_resize(); }

// Update variables
tab = newTab;
Expand Down Expand Up @@ -919,12 +961,14 @@ function array2form(array) {

form_cols=0;

var html = "<div class=\"buttonbar\">"+
/*var html = "<div class=\"buttonbar\">"+
"<button class=\"btn btn-sm\" type=\"button\" onclick=\"form_add_row();\">Add row</button> "+
"<button class=\"btn btn-sm\" type=\"button\" onclick=\"form_add_col();\">Add column</button>"+
"</div>";
"</div>";*/



html += "<table class=form><thead>";
var html = "<table class=form><thead>";

for (var r = 0; r < array.length; r++) {

Expand All @@ -948,8 +992,8 @@ function array2form(array) {
}

html += "<td class=\"button\">"+
"<button class=\"btn btn-sm button-row-duplicate\" type=\"button\"><span class=\"octicon octicon-repo-forked\"></span></button> "+
"<button class=\"btn btn-sm btn-danger button-row-remove\" type=\"button\"><span class=\"octicon octicon-trashcan\"></span></button>"+
//"<button class=\"btn btn-sm button-row-duplicate\" type=\"button\"><span class=\"octicon octicon-repo-forked\"></span></button> "+
"<button class=\"btn-formmod button-row-remove\" type=\"button\" title=\"Delete row\"><span class=\"octicon octicon-trashcan\"></span></button>"+
"</td>";


Expand All @@ -973,8 +1017,8 @@ function array2form(array) {

for (var c = 0; c < form_cols; c++) {
html += "<td class=\"button\" align=\"center\">"+
"<button class=\"btn btn-sm button-col-duplicate\" type=\"button\"><span class=\"octicon octicon-repo-forked\"></span></button> "+
"<button class=\"btn btn-sm btn-danger button-col-remove\" type=\"button\"><span class=\"octicon octicon-trashcan\"></span></button>"+
//"<button class=\"btn btn-sm button-col-duplicate\" type=\"button\"><span class=\"octicon octicon-repo-forked\"></span></button> "+
"<button class=\"btn-formmod button-col-remove\" type=\"button\" title=\"Delete column\"><span class=\"octicon octicon-trashcan\"></span></button>"+
"</td>";
}

Expand All @@ -989,6 +1033,8 @@ function array2form(array) {
"You can use the tools above to create your table or enter some markdown or CSV on the other tabs.</div>"
}

global_form_cols = form_cols;

return html;

}
Expand All @@ -1006,6 +1052,7 @@ function md2html(md) {
function form_redraw(array) {
var html = array2form(array);
$('.preview').html(html);
form_resize();
}

function form_add_row() {
Expand Down Expand Up @@ -1116,6 +1163,119 @@ function form_remove_col(col) {

}

function form_resize() {

// <6 - scaled in display
// 6>12 - display 150%
// 12>20 - scaled in container
// >20 - container scrolls
console.log(global_form_cols);
$('#viewport').removeAttr('style');

if (global_form_cols<6) {
//
}

if ((global_form_cols>5)&&(global_form_cols<13)) {
$('#viewport').css('width', '75%');
}

}

function tablebuilder_create() {

// Gather position of #tablebuilder-start
var pos = $('#tablebuilder-start').offset();

// Create a table builder
$( "<div></div>" )
.addClass( "table-button" )
.html ("<div class=\"table-builder\"></div>")
.css('left', (pos.left-10)) // negate margin :)
.css('top', (pos.top-10))
.appendTo( "body" );

tablebuilder_draw(2, 2);

}

function tablebuilder_draw(cols, rows) {

// Draw a table
var builderHtml = "<div class=\"first\">";

for (var y = 0; y < rows; y++) {

for (var x = 0; x < cols; x++) {

builderHtml += "<div x="+(x+1)+" y="+(y+1)+"";

if (x==0) builderHtml += " class=\"first\"";
if (x==(cols-1)) builderHtml += " class=\"last\"";

builderHtml += "></div>";

}

if (y<(rows-1)) {
builderHtml+="</div><div";
if ((y+1)==(rows-1)) builderHtml += " class=\"last\"";
builderHtml += ">";
}

}

builderHtml += "</div>";

$('.table-builder').html(builderHtml);

}

function tablebuilder_clear() {
$('.table-button').remove();
}

function tablebuilder_build(x,y) {

// Is there already data?
var array = form2array(), proceed=true;
if (array.length>0) {

var r = confirm("Do you want to create a new "+x+"x"+y+" table and replace this one?");
if (!r) proceed = false;

}

// Make a new empty table!
if (proceed) {

var table = [];

for (var by = 0; by < y; by++) {

var row = [];

for (var bx = 0; bx < x; bx++) {

row.push('');

}

table.push(row);

}

var output = array2form(table);

$('.preview').html(output);

global_form_cols=x;
form_resize();

}

}

function fill_example() {

var r = confirm("This will clear whatever you're working on and replace it with some example data. Cool?");
Expand Down
91 changes: 91 additions & 0 deletions styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,43 @@ table.form thead td.button, table.form tbody td.button {
border: 1px solid #fff;
}

table.form td {
padding: 3px 4px;
}

table.form tr:nth-child(2n) input {
background-color: #f8f8f8;
}

table.form input {
border:none;
width:98%;
}

table.form input:focus {
outline:0;
}

table.form td.button {
display:none;
}

button.btn-formmod {
border:none;
background-color: #fff;
color:#615f5f;
border-radius: 2px;
}

button.btn-formmod:hover {
color:#dd1010;
}

/* form scaling */
table.form {
width:100%;
}

input.header {
font-weight:bold;
}
Expand All @@ -85,3 +122,57 @@ input.header {
text-align:center;
color:#9d9d9d;
}

.form-tools {
overflow:hidden;
margin-bottom:10px;
}

.form-tools .form-button {
float:left;
background-color: red;
width:20px;
width:20px;
margin:5px;
}

.form-tools .form-button.tablePos {
margin-top:-10px;
}

.table-button {
position:absolute;
z-index: 1;
}

.table-builder {
display:table;
padding:10px 40px 40px 10px;
}

.table-builder div {
display:table-row;
}

.table-builder div div {
display:table-cell;
height:20px;
width:20px;
border-bottom:2px solid #BE3B77;
border-right:2px solid #BE3B77;
background-color: #ead7e0;
}

.table-builder { cursor: pointer; }

.table-builder div.last div, .table-builder div div.last {
border-bottom:2px solid #ccc;
border-right:2px solid #ccc;
background-color: #fff;
}

/* stop the top and left borders over-running.. */
.table-builder div.first div { border-top:2px solid #BE3B77; }
.table-builder div div.first { border-left:2px solid #BE3B77; }
.table-builder div.first div.last { border-top:2px solid #ccc; }
.table-builder div.last div.first { border-left:2px solid #ccc; }

0 comments on commit e41ff30

Please sign in to comment.