← Back to branch summary

~ubuntuone-pqm-team/yui/stable-min

« back to all changes in this revision

Viewing changes to build/datatable-formatters/datatable-formatters-debug.js

  • Committer: Ricardo Kirkner
  • Date: 2014-09-23 20:17:06 UTC
  • Revision ID: ricardo.kirkner@canonical.com-20140923201706-17kwxwckw6orp28k
re-added all .js files

Show diffs side-by-side

added added

removed removed

Lines of Context:
build/datatable-formatters/datatable-formatters-debug.js
 
1
YUI.add('datatable-formatters', function (Y, NAME) {
 
2
 
 
3
/**
 
4
Adds predefined cell formatters to `Y.DataTable.BodyView`.
 
5
 
 
6
@module datatable-formatters
 
7
**/
 
8
var Lang = Y.Lang,
 
9
    isValue = Lang.isValue,
 
10
    escape = Y.Escape.html,
 
11
 
 
12
    getCName = Y.ClassNameManager.getClassName,
 
13
    cName = function (name) {
 
14
        return getCName('datatable', name);
 
15
    },
 
16
    stringValue = function (value, def) {
 
17
        return (isValue(value) ? escape(value.toString()) : def || '');
 
18
    },
 
19
    /**
 
20
    Registry of function producing cell formatting functions.
 
21
    Allows for names to be used in the column
 
22
    definition `formatter` property:
 
23
 
 
24
        {key:"myColumn", formatter:"date"}
 
25
 
 
26
    These functions are not meant to be used directly.  Instead, they will be
 
27
    automatically called when their names are used as values for the `formatter`
 
28
    property in a columnd definition.
 
29
    They will be called just once per rendering cycle and will receive
 
30
    the column configuration.  They are expected to return a function that will
 
31
    then be called once per row and will do the actual formatting.
 
32
    They are expected to do all the preparatory once-per-render work
 
33
    so that the actual formatting function doesn't need to repeat it.
 
34
 
 
35
    @class DataTable.BodyView.Formatters
 
36
    **/
 
37
    Formatters = {
 
38
 
 
39
        /**
 
40
        Returns a formatter that produces a BUTTON element using the value of
 
41
        the [buttonLabel](DataTable.Column.html#property_buttonLabel)
 
42
        column definition attribute as its label or the text
 
43
        `Click` if not found.
 
44
 
 
45
        Applies the CSS className `yui3-datatable-button` to the cell.
 
46
 
 
47
        @method button
 
48
        @param col {Object} The column definition.
 
49
        @return {Function} A formatter function that produces a `<button>` element.
 
50
        @static
 
51
        **/
 
52
       button: function (col) {
 
53
           var className = cName('button'),
 
54
               html = '<button>' + (col.buttonLabel || 'Click') + '</button>';
 
55
           col.allowHTML = true;
 
56
           return function(o) {
 
57
               o.className = className;
 
58
               return html;
 
59
 
 
60
           };
 
61
       },
 
62
 
 
63
       /**
 
64
       Returns a formatter function that returns the texts `"true"` or `"false"`
 
65
       and assigns the CSS classNames `yui3-datatable-true` or `yui3-datatable-false`
 
66
       based on the value of the cell.
 
67
 
 
68
       If either a [booleanLabels](DataTable.Column.html#property_booleanLabels)
 
69
        configuration object is defined for the column
 
70
       or a [booleanLabels](DataTable.html#attr_booleanLabels)
 
71
       configuration attribute is defined for the datatable,
 
72
       the formatter will use the values for the properties `true` or `false`
 
73
       of either of those objects as the text to show.
 
74
 
 
75
       It returns `null`s or `undefined`s unchanged so that the `emptyCellValue`
 
76
       configuration attribute will eventually apply.
 
77
 
 
78
            {key:"active", formatter: "boolean", booleanLabels: {
 
79
                "true": "yes",
 
80
                "false": "no"
 
81
            }}
 
82
 
 
83
 
 
84
       @method boolean
 
85
       @param col {Object} The column definition.
 
86
       @return {Function} A formatter function that formats boolean data.
 
87
       @static
 
88
       **/
 
89
       'boolean': function (col) {
 
90
            var labels = col.booleanLabels || this.get('booleanLabels') || {'true':'true', 'false':'false'};
 
91
            return function(o) {
 
92
                var value = o.value;
 
93
                if (!value && value !== false) {
 
94
                    return value;
 
95
                }
 
96
                value = value?'true':'false';
 
97
                o.className = cName(value);
 
98
                return labels[value];
 
99
            };
 
100
       },
 
101
 
 
102
       /**
 
103
       Returns a formatter function that formats values as currency using
 
104
       the [Number.format](Number.html#method_format) method.
 
105
       It looks for the format to apply in the
 
106
       [currencyFormat](DataTable.Column.html#property_currencyFormat) property
 
107
       of the column or in the
 
108
       [currencyFormat](DataTable.html#attr_currencyFormat)
 
109
        attribute of the whole table.
 
110
 
 
111
           {key: "amount", formatter: "currency", currencyFormat: {
 
112
               decimalPlaces:2,
 
113
               decimalSeparator: ",",
 
114
               thousandsSeparator: ".",
 
115
               suffix: "&euro;"
 
116
           }}
 
117
 
 
118
       See [Number.format](Number.html#method_format) for the available format specs.
 
119
 
 
120
       Anything that cannot be parsed as a number will be returned unchanged.
 
121
 
 
122
       Applies the CSS className `yui3-datatable-currency` to the cell.
 
123
 
 
124
       @method currency
 
125
       @param col {Object} The column definition.
 
126
       @return {Function} A formatter function that formats numerical data as currency.
 
127
       @static
 
128
       **/
 
129
        currency: function (col) {
 
130
            var className = cName('currency'),
 
131
                format = col.currencyFormat || this.get('currencyFormat'),
 
132
                fn = Y.Number.format;
 
133
            return function (o) {
 
134
                o.className = className;
 
135
                var value = parseFloat(o.value);
 
136
                if (!value && value !== 0) {
 
137
                    return o.value;
 
138
                }
 
139
                return fn(value, format);
 
140
            };
 
141
        },
 
142
 
 
143
 
 
144
        /**
 
145
        Returns a date formatting function based on the given format.
 
146
 
 
147
        @method _date
 
148
        @param format {String} The format spec definition.
 
149
        @return {Function} A formatter function that formats numerical data as currency.
 
150
        @private
 
151
        @static
 
152
        **/
 
153
        _date: function (format) {
 
154
            var className = cName('date'),
 
155
                fn = Y.Date.format;
 
156
            format = {format: format};
 
157
            return function (o) {
 
158
                o.className = className;
 
159
                return fn(o.value, format);
 
160
            };
 
161
        },
 
162
        /**
 
163
        Returns a date formatting function.
 
164
        It looks for the format to apply in the
 
165
        [dateFormat](DataTable.Column.html#property_dateFormat)
 
166
        property of the column or in the
 
167
        [dateFormat](DataTable.html#attr_dateFormat)
 
168
         attribute of the whole table.
 
169
 
 
170
            {key: "DOB", formatter: "date", dateFormat: "%I:%M:%S %p"}
 
171
 
 
172
        See [Date.format](Date.html#method_format) for the available format specs.
 
173
 
 
174
        Anything that is not a date is returned unchanged.
 
175
 
 
176
        Applies the CSS className `yui3-datatable-date` to the cell.
 
177
 
 
178
        @method date
 
179
        @param col {Object} The column definition.
 
180
        @return {Function} A formatter function that formats dates.
 
181
        @static
 
182
        **/
 
183
        'date' : function (col) {
 
184
            return Formatters._date(col.dateFormat || this.get('dateFormat'));
 
185
        },
 
186
        /**
 
187
        Returns a date-only (no time part) formatting function using the current locale.
 
188
 
 
189
            {key: "DOB", formatter: "localDate"}
 
190
 
 
191
        Anything that is not a date is returned unchanged.
 
192
 
 
193
        Applies the CSS className `yui3-datatable-date` to the cell.
 
194
        @method localDate
 
195
        @return {Function} A formatter function that formats dates.
 
196
        @static
 
197
        **/
 
198
        localDate : function () {
 
199
            return Formatters._date('%x');
 
200
        },
 
201
        /**
 
202
        Returns a time-only (no date part) formatting function using the current locale.
 
203
 
 
204
            {key: "startTime", formatter: "localTime"}
 
205
 
 
206
        Anything that is not a date is returned unchanged.
 
207
 
 
208
        Applies the CSS className `yui3-datatable-date` to the cell.
 
209
        @method localTime
 
210
        @return {Function} A formatter function that formats dates.
 
211
        @static
 
212
        **/
 
213
        localTime : function () {
 
214
            return Formatters._date('%X');
 
215
        },
 
216
        /**
 
217
        Returns a date formatting function using the current locale.
 
218
 
 
219
            {key: "DOB", formatter: "localDateTime"}
 
220
 
 
221
        Anything that is not a date is returned unchanged.
 
222
 
 
223
        Applies the CSS className `yui3-datatable-date` to the cell.
 
224
        @method localDateTime
 
225
        @return {Function} A formatter function that formats dates.
 
226
        @static
 
227
        **/
 
228
        localDateTime : function () {
 
229
            return Formatters._date('%c');
 
230
        },
 
231
 
 
232
 
 
233
        /**
 
234
        Returns a function that produces email links.
 
235
        If the column definition contains a property
 
236
        [linkFrom](DataTable.Column.html#property_linkFrom) it will use the value
 
237
        in that field for the link, otherwise, the same column value will be used for both
 
238
        link and text.
 
239
 
 
240
            {key: "contact", formatter: "email", linkFrom: "contactEmail"}
 
241
 
 
242
        It will use the respective
 
243
        [emptyCellValue](DataTable.Column.html#property_emptyCellValue)
 
244
        column configuration attribute
 
245
        for each of the value and the link if either is empty.
 
246
        If the link value is still empty, it will return the value with no link.
 
247
 
 
248
        Applies the CSS className `yui3-datatable-email` to the cell.
 
249
 
 
250
        @method email
 
251
        @param col {Object} The column definition.
 
252
        @return {Function} A formatter function that adds a mailto: link to the value.
 
253
        @static
 
254
        **/
 
255
 
 
256
        email: function (col) {
 
257
            var className = cName('email'),
 
258
                linkFrom = col.linkFrom,
 
259
                emptyValue = col.emptyCellValue,
 
260
                emptyLink = (this.getColumn(linkFrom) || {}).emptyCellValue;
 
261
            col.allowHTML = true;
 
262
            return function (o) {
 
263
                var value = stringValue(o.value, emptyValue),
 
264
                    link = (linkFrom ? stringValue(o.data[linkFrom], emptyLink) : value);
 
265
                o.className = className;
 
266
                if (link) {
 
267
                    return '<a href="mailto:' + link + '">' + value + '</a>';
 
268
                }
 
269
                return value;
 
270
            };
 
271
 
 
272
        },
 
273
 
 
274
        /**
 
275
        Returns a function that produces links.
 
276
        If the column definition contains a property
 
277
        [linkFrom](DataTable.Column.html#property_linkFrom) it will use the value
 
278
        in that field for the link, otherwise, the same column value will be used for both
 
279
        link and text.
 
280
 
 
281
            {key: "company", formatter: "link", linkFrom: "webSite"}
 
282
 
 
283
        It will use the respective
 
284
        [emptyCellValue](DataTable.Column.html#property_emptyCellValue)
 
285
         column configuration attribute
 
286
        for each of the value and the link if either is empty.
 
287
        If the link value is still empty, it will return the value with no link.
 
288
 
 
289
        Applies the CSS className `yui3-datatable-link` to the cell.
 
290
        @method link
 
291
        @param col {Object} The column definition.
 
292
        @return {Function} A formatter function that adds a link to the value.
 
293
        @static
 
294
        **/
 
295
 
 
296
        link: function (col) {
 
297
            var className = cName('link'),
 
298
                linkFrom = col.linkFrom,
 
299
                emptyValue = col.emptyCellValue,
 
300
                emptyLink = (this.getColumn(linkFrom) || {}).emptyCellValue;
 
301
            col.allowHTML = true;
 
302
            return function (o) {
 
303
                var value = stringValue(o.value, emptyValue),
 
304
                    link = (linkFrom ? stringValue(o.data[linkFrom], emptyLink) : value);
 
305
                o.className = className;
 
306
                if (link) {
 
307
                    return '<a href="' + link + '">' + value + '</a>';
 
308
                }
 
309
                return value;
 
310
            };
 
311
 
 
312
        },
 
313
 
 
314
       /**
 
315
       Returns a formatter function that formats values using
 
316
       the [Number.format](Number.html#method_format) method.
 
317
       It looks for the format to apply in the
 
318
       [numberFormat](DataTable.Column.html#property_numberFormat)
 
319
       property of the column or in the
 
320
       [numberFormat](DataTable.html#attr_numberFormat)
 
321
       attribute of the whole table.
 
322
 
 
323
            {key: "weight", formatter: "number", numberFormat: {
 
324
                decimalPlaces:2,
 
325
                decimalSeparator: ",",
 
326
                thousandsSeparator: ",",
 
327
                suffix: "kg"
 
328
            }}
 
329
 
 
330
       See [Number.format](Number.html#method_format) for the available format specs.
 
331
 
 
332
       Anything that cannot be parsed as a number will be returned unchanged.
 
333
 
 
334
       Applies the CSS className `yui3-datatable-number` to the cell.
 
335
 
 
336
       @method number
 
337
       @param col {Object} The column definition.
 
338
       @return {Function} A formatter function that formats numerical data as currency.
 
339
       @static
 
340
       **/
 
341
        number: function (col) {
 
342
            var className = cName('number'),
 
343
                format = col.numberFormat || this.get('numberFormat'),
 
344
                fn = Y.Number.format;
 
345
            return function (o) {
 
346
                o.className = className;
 
347
                var value = parseFloat(o.value);
 
348
                if (!value && value !== 0) {
 
349
                    return o.value;
 
350
                }
 
351
                return fn(value, format);
 
352
            };
 
353
        },
 
354
        /**
 
355
        Returns a formatter function that returns texts from a lookup table
 
356
        based on the stored value.
 
357
 
 
358
        It looks for the translation to apply in the
 
359
        [lookupTable](DataTable.Column.html#property_lookupTable) property of the
 
360
        column in either of these two formats:
 
361
 
 
362
            {key: "status", formatter: "lookup", lookupTable: {
 
363
                0: "unknown",
 
364
                1: "requested",
 
365
                2: "approved",
 
366
                3: "delivered"
 
367
            }},
 
368
            {key: "otherStatus", formatter: "lookup", lookupTable: [
 
369
                {value:0, text: "unknown"},
 
370
                {value:1, text: "requested"},
 
371
                {value:2, text: "approved"},
 
372
                {value:3, text: "delivered"}
 
373
            ]}
 
374
 
 
375
        Applies the CSS className `yui3-datatable-lookup` to the cell.
 
376
 
 
377
        @method lookup
 
378
        @param col {Object} The column definition
 
379
        @return {Function} A formatter function that returns the `text`
 
380
                associated with `value`.
 
381
        @static
 
382
         */
 
383
        lookup: function (col) {
 
384
            var className = cName('lookup'),
 
385
                lookup = col.lookupTable || {},
 
386
                entries, i, len;
 
387
 
 
388
            if (Lang.isArray(lookup)) {
 
389
                entries = lookup;
 
390
                lookup = {};
 
391
 
 
392
                for (i = 0, len = entries.length; i < len; ++i) {
 
393
                    lookup[entries[i].value] = entries[i].text;
 
394
                }
 
395
            }
 
396
            return function (o) {
 
397
                o.className = className;
 
398
                return lookup[o.value];
 
399
            };
 
400
        }
 
401
    };
 
402
 
 
403
Y.mix(Y.DataTable.BodyView.Formatters, Formatters);
 
404
/**
 
405
 Label to be shown in the face of a button produced by the
 
406
 [button](DataTable.BodyView.Formatters.html#method_button) formatter
 
407
 
 
408
 @property buttonLabel
 
409
 @type String
 
410
 @for DataTable.Column
 
411
 */
 
412
/**
 
413
Determines the texts to be shown to represent Boolean values when the
 
414
[boolean](DataTable.BodyView.Formatters.html#method_boolean) formatter
 
415
is used.
 
416
 
 
417
The attribute is an object with text values for properties `true` and `false`.
 
418
 
 
419
    {key:"active", formatter: "boolean", booleanLabels: {
 
420
        "true": "yes",
 
421
        "false": "no"
 
422
    }}
 
423
 
 
424
@property booleanLabels
 
425
@type Object
 
426
@for DataTable.Column
 
427
*/
 
428
 
 
429
/**
 
430
 Determines the texts to be shown to represent Boolean values when the
 
431
 [boolean](DataTable.BodyView.Formatters.html#method_boolean) formatter
 
432
 is used on any column.
 
433
 
 
434
 It works like the column-specific
 
435
 [booleanLabels](DataTable.Column.html#property_booleanLabels) but
 
436
 for all columns using the
 
437
 [boolean](DataTable.BodyView.Formatters.html#method_boolean) formatter at once.
 
438
 The values are often retrieved from a resource of localized texts.
 
439
 
 
440
@attribute booleanLabels
 
441
@type Object
 
442
@for DataTable
 
443
*/
 
444
/**
 
445
Format specification for columns using the
 
446
[currency](DataTable.BodyView.Formatters.html#method_currency) formatter.
 
447
It contains an object as described in
 
448
[Number.format](Number.html#method_format).
 
449
 
 
450
@property currencyFormat
 
451
@type Object
 
452
@for DataTable.Column
 
453
 */
 
454
/**
 
455
Format specification for columns using the
 
456
[currency](DataTable.BodyView.Formatters.html#method_currency) formatter.
 
457
It contains an object as described in
 
458
[Number.format](Number.html#method_format).
 
459
 
 
460
It is similar to
 
461
[currencyFormat](DataTable.Column.html#property_currencyFormat)
 
462
but it applies to any column using the
 
463
[currency](DataTable.BodyView.Formatters.html#method_currency) formatter.
 
464
 The values are often retrieved from a resource of localized configuration.
 
465
 
 
466
@attribute currencyFormat
 
467
@type Object
 
468
@for DataTable
 
469
 */
 
470
 
 
471
/**
 
472
Format specification for columns using the
 
473
[date](DataTable.BodyView.Formatters.html#method_date) formatter.
 
474
It contains a string as described in
 
475
[Date.format](Date.html#method_format).
 
476
 
 
477
@property dateFormat
 
478
@type String
 
479
@for DataTable.Column
 
480
 */
 
481
/**
 
482
Format specification for columns using the
 
483
[date](DataTable.BodyView.Formatters.html#method_date) formatter.
 
484
It contains an object as described in
 
485
[Date.format](Date.html#method_format).
 
486
 
 
487
It is similar to
 
488
[dateFormat](DataTable.Column.html#property_dateFormat)
 
489
but it applies to any column using the
 
490
[date](DataTable.BodyView.Formatters.html#method_date) formatter.
 
491
 The values are often retrieved from a resource of localized configuration.
 
492
 
 
493
@attribute dateFormat
 
494
@type String
 
495
@for DataTable
 
496
 */
 
497
/**
 
498
 Name of the field that is to provide the link for a column using the
 
499
 [email](DataTable.BodyView.Formatters.html#method_email) or
 
500
 [link](DataTable.BodyView.Formatters.html#method_link)
 
501
 formatters.
 
502
 
 
503
 @property linkFrom
 
504
 @type String
 
505
 @for DataTable.Column
 
506
 */
 
507
 
 
508
/**
 
509
Format specification for columns using the
 
510
[number](DataTable.BodyView.Formatters.html#method_number) formatter.
 
511
It contains an object as described in
 
512
[Number.format](Number.html#method_format).
 
513
 
 
514
@property numberFormat
 
515
@type Object
 
516
@for DataTable.Column
 
517
 */
 
518
/**
 
519
Format specification for columns using the
 
520
[number](DataTable.BodyView.Formatters.html#method_number) formatter.
 
521
It contains an object as described in
 
522
[Number.format](Number.html#method_format).
 
523
 
 
524
It is similar to
 
525
[numberFormat](DataTable.Column.html#property_numberFormat)
 
526
but it applies to any column using the
 
527
[number](DataTable.BodyView.Formatters.html#method_number) formatter.
 
528
 The values are often retrieved from a resource of localized configuration.
 
529
 
 
530
@attribute numberFormat
 
531
@type Object
 
532
@for DataTable
 
533
 */
 
534
/**
 
535
Map of values to text used to translate internal values to human readable text
 
536
in columns using the [lookup](DataTable.BodyView.Formatters.html#method_lookup)
 
537
formatter.
 
538
 
 
539
The map can be given in either of two formats:
 
540
 
 
541
    {key: "status", formatter: "lookup", lookupTable: {
 
542
        0: "unknown",
 
543
        1: "requested",
 
544
        2: "approved",
 
545
        3: "delivered"
 
546
    }},
 
547
    {key: "otherStatus", formatter: "lookup", lookupTable: [
 
548
        {value:0, text: "unknown"},
 
549
        {value:1, text: "requested"},
 
550
        {value:2, text: "approved"},
 
551
        {value:3, text: "delivered"}
 
552
    ]}
 
553
 
 
554
The last format is compatible with the [dropdown](DataTable.Editors.html#property_dropdown)
 
555
and autocomplete-based editors, where the order of the items in the dropdown matters.
 
556
 
 
557
@property lookupTable
 
558
@type Object || Array
 
559
@for DataTable.Column
 
560
 */
 
561
 
 
562
}, '@VERSION@', {"requires": ["datatable-body", "datatype-number-format", "datatype-date-format", "escape"]});