← Back to branch summary

~smagoun/whoopsie/whoopsie-lp1017637

« back to all changes in this revision

Viewing changes to backend/stats/static/js/yui/build/datatable-column-widths/datatable-column-widths.js

  • Committer: Evan Dandrea
  • Date: 2012-05-09 05:53:45 UTC
  • Revision ID: evan.dandrea@canonical.com-20120509055345-z2j41tmcbf4as5uf
The backend now lives in lp:daisy and the website (errors.ubuntu.com) now lives in lp:errors.

Show diffs side-by-side

added added

removed removed

Lines of Context:
backend/stats/static/js/yui/build/datatable-column-widths/datatable-column-widths.js
1
 
/*
2
 
YUI 3.5.0 (build 5089)
3
 
Copyright 2012 Yahoo! Inc. All rights reserved.
4
 
Licensed under the BSD License.
5
 
http://yuilibrary.com/license/
6
 
*/
7
 
YUI.add('datatable-column-widths', function(Y) {
8
 
 
9
 
/**
10
 
Adds basic, programmatic column width support to DataTable via column
11
 
configuration property `width` and method `table.setColumnWidth(id, width);`.
12
 
 
13
 
@module datatable
14
 
@submodule datatable-column-widths
15
 
@since 3.5.0
16
 
**/
17
 
var isNumber = Y.Lang.isNumber,
18
 
    arrayIndex = Y.Array.indexOf;
19
 
 
20
 
Y.Features.add('table', 'badColWidth', {
21
 
    test: function () {
22
 
        var body = Y.one('body'),
23
 
            node, broken;
24
 
 
25
 
        if (body) {
26
 
            // In modern browsers, <col style="width:X"> will make columns,
27
 
            // *including padding and borders* X wide. The cell content width
28
 
            // is reduced.  In old browsers and all Opera versions to date, the
29
 
            // col's width style is passed to the cells, which causes cell
30
 
            // padding/border to bloat the rendered width.
31
 
            node = body.insertBefore(
32
 
                '<table style="position:absolute;visibility:hidden;border:0 none">' +
33
 
                    '<colgroup><col style="width:9px"></colgroup>' +
34
 
                    '<tbody><tr>' +
35
 
                        '<td style="' +
36
 
                            'padding:0 4px;' +
37
 
                            'font:normal 2px/2px arial;' +
38
 
                            'border:0 none">' +
39
 
                        '.' + // Just something to give the cell dimension
40
 
                    '</td></tr></tbody>' +
41
 
                '</table>',
42
 
                body.get('firstChild'));
43
 
 
44
 
            broken = node.one('td').getComputedStyle('width') !== '1px';
45
 
 
46
 
            node.remove(true);
47
 
        }
48
 
 
49
 
        return broken;
50
 
    }
51
 
});
52
 
 
53
 
/**
54
 
_API docs for this extension are included in the DataTable class._
55
 
 
56
 
Adds basic, programmatic column width support to DataTable. Note, this does not
57
 
add support for truncated columns.  Due to the way HTML tables render, column
58
 
width is more like a "recommended width".  Column content wider than the
59
 
assigned width will cause the column to expand, despite the configured width.
60
 
Similarly if the table is too narrow to fit the column with the configured
61
 
column width, the column width will be reduced.
62
 
 
63
 
To set a column width, either add a `width` value to the column configuration
64
 
or call the `setColumnWidth(id, width)` method.
65
 
 
66
 
Note, assigning column widths is possible without this module, as each cell is
67
 
decorated with a class appropriate for that column which you can statically
68
 
target in your site's CSS.
69
 
 
70
 
To achieve absolute column widths, with content truncation, you can either:
71
 
 
72
 
1. Use this module, configure *all* columns to have `width`s, then add
73
 
   `table-layout: fixed;` to your CSS for the appropriate `<table>`, or
74
 
2. Wrap the contents of all cells in the column with a `<div>` (using a
75
 
   `cellTemplate` or `formatter`), assign the div's style `width`, then assign
76
 
   the column `width` or add a CSS `width` to the column class created by
77
 
   DataTable.
78
 
 
79
 
<pre><code>.yui3-datatable .yui3-datatable-col-foo {
80
 
    padding: 0;
81
 
    width: 125px;
82
 
}
83
 
.yui3-datatable .yui3-datatable-col-foo .yui3-datatable-liner {
84
 
    overflow: hidden;
85
 
    padding: 4px 10px;
86
 
    width: 125px;
87
 
}
88
 
</pre></code>
89
 
 
90
 
<pre><code>var table = new Y.DataTable({
91
 
    columns: [
92
 
        {
93
 
            key: 'foo',
94
 
            cellTemplate:
95
 
                '&lt;td class="{className}">' +
96
 
                    '&lt;div class="yui3-datatable-liner">{content}&lt;/div>' +
97
 
                '&lt;/td>'
98
 
        },
99
 
        ...
100
 
    ],
101
 
    ...
102
 
});
103
 
</code></pre>
104
 
 
105
 
To add a liner to all columns, either provide a custom `bodyView` to the
106
 
DataTable constructor or update the default `bodyView`'s `CELL_TEMPLATE` like
107
 
so:
108
 
 
109
 
<pre><code>table.on('renderBody', function (e) {
110
 
    e.view.CELL_TEMPLATE = e.view.CELL_TEMPLATE.replace(/\{content\}/,
111
 
            '&lt;div class="yui3-datatable-liner">{content}&lt;/div>');
112
 
});
113
 
</code></pre>
114
 
 
115
 
Keep in mind that DataTable skins apply cell `padding`, so assign your CSS
116
 
`width`s accordingly or override the `padding` style for that column's `<td>`s
117
 
to 0, and add `padding` to the liner `<div>`'s styles as shown above.
118
 
 
119
 
@class DataTable.ColumnWidths
120
 
@for DataTable
121
 
@since 3.5.0
122
 
**/
123
 
function ColumnWidths() {}
124
 
 
125
 
Y.mix(ColumnWidths.prototype, {
126
 
    /**
127
 
    The HTML template used to create the table's `<col>`s.
128
 
 
129
 
    @property COL_TEMPLATE
130
 
    @type {HTML}
131
 
    @default '<col/>'
132
 
    @since 3.5.0
133
 
    **/
134
 
    COL_TEMPLATE: '<col/>',
135
 
 
136
 
    /**
137
 
    The HTML template used to create the table's `<colgroup>`.
138
 
 
139
 
    @property COLGROUP_TEMPLATE
140
 
    @type {HTML}
141
 
    @default '<colgroup/>'
142
 
    @since 3.5.0
143
 
    **/
144
 
    COLGROUP_TEMPLATE: '<colgroup/>',
145
 
 
146
 
    /**
147
 
    Assigns the style width of the `<col>` representing the column identifed by
148
 
    `id` and updates the column configuration.
149
 
 
150
 
    Pass the empty string for `width` to return a column to auto sizing.
151
 
 
152
 
    This does not trigger a `columnsChange` event today, but I can be convinced
153
 
    that it should.
154
 
 
155
 
    @method setColumnWidth
156
 
    @param {Number|String|Object} id The column config object or key, name, or
157
 
            index of a column in the host's `_displayColumns` array.
158
 
    @param {Number|String} width CSS width value. Numbers are treated as pixels
159
 
    @return {DataTable}
160
 
    @chainable
161
 
    @since 3.5.0
162
 
    **/
163
 
    setColumnWidth: function (id, width) {
164
 
        var col = this.getColumn(id),
165
 
            index = col && arrayIndex(this._displayColumns, col);
166
 
 
167
 
        if (index > -1) {
168
 
            if (isNumber(width)) {
169
 
                width += 'px';
170
 
            }
171
 
 
172
 
            col.width = width;
173
 
 
174
 
            this._setColumnWidth(index, width);
175
 
        }
176
 
 
177
 
        return this;
178
 
    },
179
 
 
180
 
    //----------------------------------------------------------------------------
181
 
    // Protected properties and methods
182
 
    //----------------------------------------------------------------------------
183
 
 
184
 
    /**
185
 
    Renders the table's `<colgroup>` and populates the `_colgroupNode` property.
186
 
 
187
 
    @method _createColumnGroup
188
 
    @protected
189
 
    @since 3.5.0
190
 
    **/
191
 
    _createColumnGroup: function () {
192
 
        return Y.Node.create(this.COLGROUP_TEMPLATE);
193
 
    },
194
 
 
195
 
    /**
196
 
    Hooks up to the rendering lifecycle to also render the `<colgroup>` and
197
 
    subscribe to `columnChange` events.
198
 
 
199
 
    @method initializer
200
 
    @protected
201
 
    @since 3.5.0
202
 
    **/
203
 
    initializer: function (config) {
204
 
        this.after('renderTable', function (e) {
205
 
            this._uiSetColumns();
206
 
 
207
 
            this.after('columnsChange', this._uiSetColumns);
208
 
        });
209
 
    },
210
 
 
211
 
    /**
212
 
    Sets a columns's `<col>` element width style. This is needed to get around
213
 
    browser rendering differences.
214
 
 
215
 
    The colIndex corresponds to the item index of the `<col>` in the table's
216
 
    `<colgroup>`.
217
 
 
218
 
    To unset the width, pass a falsy value for the `width`.
219
 
 
220
 
    @method _setColumnWidth
221
 
    @param {Number} colIndex The display column index
222
 
    @param {Number|String} width The desired width
223
 
    @protected
224
 
    @since 3.5.0
225
 
    **/
226
 
    // TODO: move this to a conditional module
227
 
    _setColumnWidth: function (colIndex, width) {
228
 
        // Opera (including Opera Next circa 1/13/2012) and IE7- pass on the
229
 
        // width style to the cells directly, allowing padding and borders to
230
 
        // expand the rendered width.  Chrome 16, Safari 5.1.1, and FF 3.6+ all
231
 
        // make the rendered width equal the col's style width, reducing the
232
 
        // cells' calculated width.
233
 
        var colgroup  = this._colgroupNode,
234
 
            col       = colgroup && colgroup.all('col').item(colIndex),
235
 
            firstRow, cell, getCStyle;
236
 
 
237
 
        if (col) {
238
 
            if (width && isNumber(width)) {
239
 
                width += 'px';
240
 
            }
241
 
 
242
 
            col.setStyle('width', width);
243
 
 
244
 
            // Adjust the width for browsers that make
245
 
            // td.style.width === col.style.width
246
 
            if  (width && Y.Features.test('table', 'badColWidth')) {
247
 
                firstRow = this._tbodyNode && this._tbodyNode.one('tr');
248
 
                cell     = firstRow && firstRow.all('td').item(colIndex);
249
 
                
250
 
                if (cell) {
251
 
                    getCStyle = function (prop) {
252
 
                        return parseInt(cell.getComputedStyle(prop), 10)|0;
253
 
                    };
254
 
 
255
 
                    col.setStyle('width',
256
 
                        // I hate this
257
 
                        parseInt(width, 10) -
258
 
                        getCStyle('paddingLeft') -
259
 
                        getCStyle('paddingRight') -
260
 
                        getCStyle('borderLeftWidth') -
261
 
                        getCStyle('borderRightWidth') + 'px');
262
 
 
263
 
                }
264
 
            }
265
 
        }
266
 
    },
267
 
 
268
 
    /**
269
 
    Populates the table's `<colgroup>` with a `<col>` per item in the `columns`
270
 
    attribute without children.  It is assumed that these are the columns that
271
 
    have data cells renderered for them.
272
 
 
273
 
    @method _uiSetColumns
274
 
    @protected
275
 
    @since 3.5.0
276
 
    **/
277
 
    _uiSetColumns: function () {
278
 
        var template = this.COL_TEMPLATE,
279
 
            colgroup = this._colgroupNode,
280
 
            columns  = this._displayColumns,
281
 
            i, len;
282
 
 
283
 
        if (!colgroup) {
284
 
            colgroup = this._colgroupNode = this._createColumnGroup();
285
 
 
286
 
            this._tableNode.insertBefore(
287
 
                colgroup,
288
 
                this._tableNode.one('> thead, > tfoot, > tbody'));
289
 
        } else {
290
 
            colgroup.empty();
291
 
        }
292
 
 
293
 
        for (i = 0, len = columns.length; i < len; ++i) {
294
 
 
295
 
            colgroup.append(template);
296
 
 
297
 
            this._setColumnWidth(i, columns[i].width);
298
 
        }
299
 
    }
300
 
}, true);
301
 
 
302
 
Y.DataTable.ColumnWidths = ColumnWidths;
303
 
 
304
 
Y.Base.mix(Y.DataTable, [ColumnWidths]);
305
 
 
306
 
 
307
 
}, '3.5.0' ,{requires:['datatable-base']});