Proyectos de Subversion Moodle

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 efrain 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
 
563
}, '3.18.1', {"requires": ["datatable-body", "datatype-number-format", "datatype-date-format", "escape"]});