Skip to content
This repository has been archived by the owner on Jan 8, 2024. It is now read-only.

Commit

Permalink
Merge branch 'master' of https://github.com/c0ff3m4kr/SelecTable.js
Browse files Browse the repository at this point in the history
  • Loading branch information
c0ff3m4kr committed Sep 12, 2014
2 parents 737aed1 + badaf26 commit 5e8f3f0
Show file tree
Hide file tree
Showing 3 changed files with 118 additions and 77 deletions.
2 changes: 1 addition & 1 deletion LICENSE
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
The MIT License (MIT)

Copyright (c) 2014
Copyright (c) 2014 c0ff3m4kr

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
Expand Down
27 changes: 16 additions & 11 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,30 @@
SelecTable.js
==================

Selectable Tables.
This piece of code allows every table to be turned into a user friendly seletable table. Each row can be selected by
clicking on it and marked by a user defined class (by default <code>class="selected"</code>). You can also safely select multiple rows by pressing the CTRL or SHIFT key.

Note that you **don't** need JQuery




Nothing special in the table:
```HTML
<table class="my-selectable">
<thead>
<tr>
<th>
<!-- add here the checkbox to toggle all -->
<input type="checkbox" id="all_checkbox" />
</th>
<th>Filename</th>
</tr>
<tr>
<th>
<!-- add here the checkbox to toggle all -->
<input type="checkbox" id="all_checkbox" />
</th>
<th>Filename</th>
</tr>
</thead>
<tbody>
<tr>
<tr>
<td><input id="file_001" type="checkbox" /></td>
<td class="">Somefile.jpg</td>
</tr>
</tr>
<tr>
<td><input id="file_002" type="checkbox" /></td>
<td>Somefile2.jpg</td>
Expand Down
166 changes: 101 additions & 65 deletions SelecTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,28 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.


function clear_selection(){
if (window.getSelection) {
if (window.getSelection().empty) { // Chrome
window.getSelection().empty();
} else if (window.getSelection().removeAllRanges) { // Firefox
window.getSelection().removeAllRanges();
}
} else if (document.selection) { // IE?
document.selection.empty();
}
}

/** @constructor */
var SelecTable = function(table, options)
{

var checkbox, row_i, cb_i;
this.defaults = {
'cssSelected': 'selected',
'cssFocused': 'focused',
'focusCheckbox': true,
'allCheckbox': false,
'allCheckbox': false
}

// parse options to this.config
Expand All @@ -40,20 +54,25 @@ var SelecTable = function(table, options)
else
this.config[variable] = this.defaults[variable];
}
console.log(this.config)

if(this.config.cssFocused)
this.reFocused = new RegExp("(?:^|\\s)"+ this.config.cssFocused +"(?!\\S)","g");
if(this.config.cssSelected)
this.reSelected = new RegExp("(?:^|\\s)"+ this.config.cssSelected +"(?!\\S)","g");

if (typeof table == "string")
this.table = document.getElementById(table);
else
this.table = table;

// assuming we have only one body
this.rows = this.table.tBodies[0].rows;
this.checkboxes = $(this.rows).find('input[type=checkbox]');
this.selected = null;
this.selectedCount = 0;
// configure checkboxes



if(this.config.allCheckbox)
{
if (typeof this.config.allCheckbox == "string")
Expand All @@ -62,31 +81,86 @@ var SelecTable = function(table, options)
this.config.allCheckbox.onchange = this.getAllCheckboxOnchange();
}

for(var c=0; c<this.rows.length; c++)
for(row_i=0; row_i<this.rows.length; row_i++)
{
this.rows[c].setAttribute('unselectable', 'on'); // IE fix
this.checkboxes[c].setAttribute('data-rowid', c);
this.checkboxes[c].onclick = this.getCheckboxOnclick();
if(this.checkboxes[c].checked)
this.select(c);
this.rows[c].onclick = this.getRowOnclick()
checkbox = this.rows[row_i].getElementsByTagName('input');
for(cb_i=0; cb_i < checkbox.length && checkbox[cb_i].type != "checkbox"; cb_i++){}
checkbox = checkbox[cb_i];
this.rows[row_i].setAttribute('unselectable', 'on'); // IE fix
checkbox.onclick = this.getCheckboxOnclick();
if(checkbox.checked)
this.select(row_i, true);
this.rows[row_i].onclick = this.getRowOnclick()
this.rows[row_i].checkbox = checkbox;
this.rows[row_i].checkbox.row = this.rows[row_i];
}
}

SelecTable.prototype.select = function(index, changefocus){
if(typeof(changefocus) === 'undefined') changefocus = true;
index = this.getRowIndex(index);
if (changefocus){
if(this.config.cssFocused)
{
if (this.selected != null)
{
this.selected.className = this.selected.className.replace(this.reFocused, "");
}
this.rows[index].className += ' ' + this.config.cssFocused;
}
this.selected = this.rows[index];
if (this.config.focusCheckbox)
this.rows[index].checkbox.focus();
}
if (this.config.cssSelected)
this.rows[index].className += ' ' + this.config.cssSelected;
if(!this.rows[index].checkbox.checked)
// increment counter only if it wasn't checked
this.selectedCount += 1;
this.rows[index].checkbox.checked = true;
};

SelecTable.prototype.unselect = function(index)
{
index = this.getRowIndex(index);
if (this.config.cssSelected)
{
this.rows[index].className = this.rows[index].className.replace(this.reSelected, "");
}
if(this.rows[index].checkbox.checked)
// decrement counter only if it was checked
this.selectedCount -= 1;
this.rows[index].checkbox.checked = false;
};

SelecTable.prototype.toggle = function(index)
{
index = this.getRowIndex(index);
if(this.rows[index].checkbox.checked) this.unselect(index);
else this.select(index, true);
};

SelecTable.prototype.getRowIndex = function(row){
if (typeof row.rowIndex == "undefined") return row;
return row.rowIndex - this.table.tHead.rows.length;
}

SelecTable.prototype.selectAll = function(){
SelecTable.prototype.getRowIsSelected = function(row)
{
return this.rows[this.getRowIndex(row)].checkbox.checked;
}

SelecTable.prototype.selectAll = function()
{
for(var i=this.rows.length - 1; i >= 0; i--)
this.select(i);
this.select(i, true);
};

SelecTable.prototype.getAllCheckboxOnchange = function(){
SelecTable.prototype.getAllCheckboxOnchange = function()
{
var table = this
return function(){
return function()
{
if(this.checked)
{
table.selectAll()
Expand All @@ -96,14 +170,13 @@ SelecTable.prototype.getAllCheckboxOnchange = function(){
}
}

SelecTable.prototype.select_only = function(index){
SelecTable.prototype.select_only = function(index)
{
index = this.getRowIndex(index);
this.unselectAll();
this.select(index);
}



SelecTable.prototype.select_range = function(start, stop)
{
var i, a=1;
Expand All @@ -116,68 +189,31 @@ SelecTable.prototype.select_range = function(start, stop)
this.select(stop, true);
}

SelecTable.prototype.unselectAll = function(){
SelecTable.prototype.unselectAll = function()
{
for (var i=0; i<this.rows.length; i++)
this.unselect(i);
}

SelecTable.prototype.select = function(index, changefocus){
if(typeof(changefocus) === 'undefined') changefocus = true;
index = this.getRowIndex(index);

if (changefocus){
if (this.selected != null)
$(this.rows[this.selected]).removeClass(this.config.cssFocused);
this.selected = index;
this.rows[index].className += ' ' + this.config.cssFocused;
if (this.config.focusCheckbox)
this.checkboxes[index].focus();
}
this.rows[index].className += ' ' + this.config.cssSelected;
if(!this.checkboxes[index].checked)
// increment counter only if it wasn't checked
this.selectedCount += 1;
this.checkboxes[index].checked = true;
};

SelecTable.prototype.unselect = function(index){
index = this.getRowIndex(index);
$(this.rows[index]).removeClass(this.config.cssSelected);
if(this.checkboxes[index].checked)
// decrement counter only if it was checked
this.selectedCount -= 1;
this.checkboxes[index].checked = false;
};

SelecTable.prototype.toggle = function(index){
index = this.getRowIndex(index);
if(this.checkboxes[index].checked) this.unselect(index);
else this.select(index);
};

SelecTable.prototype.getRowOnclick = function(){
SelecTable.prototype.getRowOnclick = function()
{
var table = this;
return function(e){
//e.stopPropagation();
// select functionallity
var i, index, rows;
if (event.ctrlKey == 1) {
table.toggle(this);
}else if (event.shiftKey == 1){
if (table.selected != null)
table.select_range(table.selected, this);
}else{
// select it if it wasn't selected already
var select_it = (this.className.indexOf(table.config.cssSelected) == -1);
// or select it if the object wasn't the only one
select_it = select_it || table.selectedCount > 1;
console.log(select_it);

if(select_it)
// or if the object wasn't the only one
if(!table.getRowIsSelected(this) || table.selectedCount > 1)
table.select_only(this);
else
table.unselectAll();

}
if (event.shiftKey == 1)
// if there was something selected
Expand All @@ -186,16 +222,16 @@ SelecTable.prototype.getRowOnclick = function(){
}
}

SelecTable.prototype.getCheckboxOnclick = function(checkbox)
SelecTable.prototype.getCheckboxOnclick = function()
{
var table = this;
return function(e)
{
e.stopPropagation();
var index = parseInt(this.getAttribute('data-rowid'));
var index = table.checkboxes.indexOf(this).row;
if(this.checked)
table.select(index);
table.select(index, true);
else
table.unselect(index);
}
}
}

0 comments on commit 5e8f3f0

Please sign in to comment.