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

Commit

Permalink
New version with gulp, coffee and bower
Browse files Browse the repository at this point in the history
  • Loading branch information
roparz committed Apr 13, 2014
1 parent 82971be commit e44488b
Show file tree
Hide file tree
Showing 9 changed files with 211 additions and 101 deletions.
3 changes: 3 additions & 0 deletions .gitignore
@@ -0,0 +1,3 @@
node_modules/
*.sublime-project
*.sublime-workspace
27 changes: 23 additions & 4 deletions bower.json
@@ -1,6 +1,25 @@
{
"name": "Light Javascript Table Sorter",
"version": "1.0",
"main": "light-table-sorter.js",
"dependencies": {}
"name": "Light-Javascript-Table-Sorter",
"version": "0.0.1",
"homepage": "https://github.com/roparz/Light-Javascript-Table-Sorter",
"authors": [
"Christophe Gourmelon <christophe.gourmelon@gmail.com>"
],
"description": "Lightweight javascript table sorter",
"main": "light-table-sorter.min.js",
"keywords": [
"javascript",
"table",
"sorter",
"light",
"lightweight"
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
]
}
13 changes: 13 additions & 0 deletions gulpfile.coffee
@@ -0,0 +1,13 @@
gulp = require('gulp')
coffee = require('gulp-coffee')
uglify = require('gulp-uglify')
rename = require('gulp-rename')

gulp.task 'default', ->

gulp.src('light-table-sorter.coffee')
.pipe(coffee({ bare: true }))
.pipe(gulp.dest(__dirname))
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(gulp.dest(__dirname))
55 changes: 31 additions & 24 deletions index.html
@@ -1,45 +1,51 @@
<!DOCTYPE html>
<title>Light Javascript Table Sorter</title>
<title>light javascript table sorter</title>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap.no-icons.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">

<section class="container">

<h2>Light Javascript Table Sorter</h2>
<h2>light javascript table sorter</h2>

<table>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Price</th>
<th>name</th>
<th>email</th>
<th>phone</th>
<th>price</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>john.doe@gmail.com</td>
<td>0123456789</td>
<td>99</td>
</tr>
<tr>
<td>Jane Vanda</td>
<td>jane@vanda.org</td>
<td>9876543210</td>
<td>349</td>
</tr>
<tr>
<td>Alferd Penyworth</td>
<td>alfred@batman.com</td>
<td>6754328901</td>
<td>199</td>
</tr>
<td>john doe</td>
<td>john.doe@gmail.com</td>
<td>0123456789</td>
<td>99</td>
</tr>
<tr>
<td>jane vanda</td>
<td>jane@vanda.org</td>
<td>9876543210</td>
<td>349</td>
</tr>
<tr>
<td>Jane Vanda</td>
<td>jane@vanda.org</td>
<td>9876543210</td>
<td>999</td>
</tr>
<tr>
<td>alferd penyworth</td>
<td>alfred@batman.com</td>
<td>6754328901</td>
<td>199</td>
</tr>
</tbody>
</table>


<p class="github">Fork me on <a href="http://github.com/Roparz/Light-Javascript-Table-Sorter" target="_blank">Github</a></p>
<p class="github">fork me on <a href="http://github.com/Roparz/Light-Javascript-Table-Sorter" target="_blank">github</a></p>

</section>

Expand All @@ -48,3 +54,4 @@ <h2>Light Javascript Table Sorter</h2>


<script src="light-table-sorter.js"></script>
<script> LightTableSorter.init() </script>
50 changes: 50 additions & 0 deletions light-table-sorter.coffee
@@ -0,0 +1,50 @@
LightTableSorter = do ->

_th = null
_cellIndex = null
_order = ''

_text = (row) ->
return row.cells.item(_cellIndex).textContent.toLowerCase()

_sort = (a, b) ->
textA = _text(a)
textB = _text(b)
n = parseInt(textA, 10)
if n
textA = n
textB = parseInt(textB, 10)
if textA > textB then return 1
if textA < textB then return -1
return 0

_toggle = ->
c = if _order isnt 'asc' then 'asc' else 'desc'
_th.className = (_th.className.replace(_order, '') + ' ' + c).trim()
_order = c

_reset = ->
_th.className = _th.className.replace('asc', '').replace('desc', '')
_order = ''

_onClickEvent = (e) ->
_reset() if _th and (_cellIndex isnt e.target.cellIndex)
_th = e.target
if _th.nodeName.toLowerCase() is 'th'
_cellIndex = _th.cellIndex
tbody = _th.offsetParent.getElementsByTagName('tbody')[0]
rows = tbody.rows
if rows
rows = Array.prototype.slice.call(rows, 0)
rows = Array.prototype.sort.call(rows, _sort)
Array.prototype.reverse.call(rows) if _order is 'asc'
_toggle()
tbody.innerHtml = ''
tbody.appendChild(row) for row in rows
return


return init: ->
ths = document.getElementsByTagName('th')
th.onclick = _onClickEvent for th in ths

140 changes: 74 additions & 66 deletions light-table-sorter.js
@@ -1,67 +1,75 @@
(function(document) {
'use strict';
var LightTableSorter;

var LightTableSorter = (function(Arr) {

var _th, _cellIndex, _order = '';

function _text(row) {
return row.cells.item(_cellIndex).textContent.toLowerCase();
}

function _sort(a, b) {
var va = _text(a), vb = _text(b), n = parseInt(va, 10);
if (n) {
va = n;
vb = parseInt(vb, 10);
}
return va > vb ? 1 : va < vb ? -1 : 0;
}

function _toggle() {
var c = _order !== 'asc' ? 'asc' : 'desc';
_th.className = (_th.className.replace(_order, '') + ' ' + c).trim();
_order = c;
}

function _reset() {
_th.className = _th.className.replace('asc', '').replace('desc', '');
_order = '';
}

function onClickEvent(e) {
if (_th && _cellIndex !== e.target.cellIndex) {
_reset();
}
_th = e.target;
if (_th.nodeName.toLowerCase() === 'th') {
_cellIndex = _th.cellIndex;
var tbody = _th.offsetParent.getElementsByTagName('tbody')[0],
rows = tbody.rows;
if (rows) {
rows = Arr.sort.call(Arr.slice.call(rows, 0), _sort);
if (_order === 'asc') {
Arr.reverse.call(rows);
}
_toggle();
tbody.innerHtml = '';
Arr.forEach.call(rows, function(row) { tbody.appendChild(row); });
}
}
}

return {
init: function() {
var ths = document.getElementsByTagName('th');
Arr.forEach.call(ths, function(th) { th.onclick = onClickEvent; });
}
};
})(Array.prototype);

document.addEventListener('readystatechange', function() {
if (document.readyState === 'complete') {
LightTableSorter.init();
}
});

})(document);
LightTableSorter = (function() {
var _cellIndex, _onClickEvent, _order, _reset, _sort, _text, _th, _toggle;
_th = null;
_cellIndex = null;
_order = '';
_text = function(row) {
return row.cells.item(_cellIndex).textContent.toLowerCase();
};
_sort = function(a, b) {
var n, textA, textB;
textA = _text(a);
textB = _text(b);
n = parseInt(textA, 10);
if (n) {
textA = n;
textB = parseInt(textB, 10);
}
if (textA > textB) {
return 1;
}
if (textA < textB) {
return -1;
}
return 0;
};
_toggle = function() {
var c;
c = _order !== 'asc' ? 'asc' : 'desc';
_th.className = (_th.className.replace(_order, '') + ' ' + c).trim();
return _order = c;
};
_reset = function() {
_th.className = _th.className.replace('asc', '').replace('desc', '');
return _order = '';
};
_onClickEvent = function(e) {
var row, rows, tbody, _i, _len;
if (_th && (_cellIndex !== e.target.cellIndex)) {
_reset();
}
_th = e.target;
if (_th.nodeName.toLowerCase() === 'th') {
_cellIndex = _th.cellIndex;
tbody = _th.offsetParent.getElementsByTagName('tbody')[0];
rows = tbody.rows;
if (rows) {
rows = Array.prototype.slice.call(rows, 0);
rows = Array.prototype.sort.call(rows, _sort);
if (_order === 'asc') {
Array.prototype.reverse.call(rows);
}
_toggle();
tbody.innerHtml = '';
for (_i = 0, _len = rows.length; _i < _len; _i++) {
row = rows[_i];
tbody.appendChild(row);
}
}
}
};
return {
init: function() {
var th, ths, _i, _len, _results;
ths = document.getElementsByTagName('th');
_results = [];
for (_i = 0, _len = ths.length; _i < _len; _i++) {
th = ths[_i];
_results.push(th.onclick = _onClickEvent);
}
return _results;
}
};
})();
2 changes: 1 addition & 1 deletion light-table-sorter.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

11 changes: 11 additions & 0 deletions package.json
@@ -0,0 +1,11 @@
{
"name": "Light-Table-Sorter",
"version": "0.0.1",
"devDependencies": {
"coffee-script": "^1.7.1",
"gulp": "^3.6.0",
"gulp-coffee": "^1.4.1",
"gulp-rename": "^1.2.0",
"gulp-uglify": "^0.2.1"
}
}
11 changes: 5 additions & 6 deletions readme.md
Expand Up @@ -8,14 +8,13 @@ Here is a simple implementation [demo](http://roparz.me/play/light-javascript-ta

## How to use it?

Installation is very simple. Just add the script in your html (head or foot, whatever):
```html
<script src="light-table-sorter.js"></script>
```

Or the minified version:
Installation is very simple. Just add the script at the end of your html (just before `</body>`) and then call the `init` function:
```html
<body>
...
<script src="light-table-sorter.min.js"></script>
<script> LightTableSorter.init() </script>
</body>
```

You just need to respect this table structure:
Expand Down

0 comments on commit e44488b

Please sign in to comment.