public
Description: NSTableView For The Web
Homepage:
Clone URL: git://github.com/joannou/nstableviewftw.git
Click here to lend your support to: nstableviewftw and make a donation at www.pledgie.com !
nstableviewftw / nstableviewftw.js
100644 84 lines (61 sloc) 2.946 kb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
var NSTableViewFTW = {
    render: function() {
        $$('table.NSTableViewFTW').each(function(aTable) {
            // Set <thead> width and <tbody> width & height
            var aTableWidth = aTable.getStyle('width').slice(0, -2);
            var aTBody = aTable.select('tbody').first();
 
            aTable.select('thead').first().setStyle({
                width: aTableWidth + 'px',
            });
 
            aTBody.setStyle({
                width: aTableWidth + 'px',
                height: aTable.getStyle('height').slice(0, -2) - 17 + 'px'
            });
 
 
 
            // Set <td> widths
            var allRows = aTable.select('tr');
 
            allRows.each(function(aRow) {
                aRow.select('td').each(function(aCell, aColumnIndex) {
                    aCell.addClassName('NSTableViewFTWColumn' + aColumnIndex);
                });
            });
    
            var firstRowCells = allRows.first().select('td');
            var columnCount = firstRowCells.size();
 
            columnCount.times(function(i) {
                var aColumnOfCells = aTable.select('td.NSTableViewFTWColumn' + i);
 
                var aCellWidth = (aColumnOfCells.inject(0, function(anAccumulator, aCell) {
                    return anAccumulator + aCell.innerHTML.stripScripts().stripTags().strip().length;
                }) / allRows.size()).round() * 10;
                
                var aHeaderCellWidth = aColumnOfCells[0].innerHTML.stripScripts().stripTags().strip().length * 10;
                
                if (aCellWidth < aHeaderCellWidth) {
                    aCellWidth = aHeaderCellWidth;
                }
        
                aColumnOfCells.invoke('setStyle', {
                    width: aCellWidth + 'px'
                });
 
                if (i) {
                    aColumnOfCells.first().setStyle({
                        width: ++aCellWidth + 'px'
                    });
                }
            });
 
 
 
            // Set <tr> widths
            var rowWidth = firstRowCells.inject(0, function(anAccumulator, aCell) {
                return anAccumulator + aCell.getStyle('width').slice(0, -2) * 1;
            }) + columnCount - 1 + columnCount * 8;
 
            allRows.invoke('setStyle', {
               width: rowWidth + 'px'
            });
    
    
 
            // Horizontally scroll <thead>'s <tr> and vertically scroll <tbody>'s background image with <tbody>'s <tr>s
            aTBody.observe('scroll', function(anEvent) {
                var thisTBody = anEvent.element();
        
                thisTBody.up('table.NSTableViewFTW').select('thead tr').first().setStyle({
                    left: '-' + thisTBody.scrollLeft + 'px'
                });
        
                thisTBody.setStyle({
                    backgroundPosition: '0px -' + thisTBody.scrollTop + 'px'
                });
            });
            
            aTable.show();
        });
    }
};