oxjs/source/Ox.UI/js/Form/Ox.TimeInput.js

// vim: et:ts=4:sw=4:sts=4:ft=javascript

/*@
Ox.TimeInput <f:Ox.Element> TimeInput Object
    () ->              <f> TimeInput Object
    (options) ->       <f> TimeInput Object
    (options, self) -> <f> TimeInput Object
    options <o> Options object
        ampm <b|false> 24h/ampm
        seconds <b|false> show seconds
        milliseconds <b|false> show milliseconds
        value <d> value, defaults to now
    self    <o> shared private variable
@*/

Ox.TimeInput = function(options, self) {

    // fixme: seconds get set even if options.seconds is false
    self = self || {};
    var that = Ox.Element({}, self)
            .defaults({
                ampm: false,
                seconds: false,
                milliseconds: false,
                value: Ox.formatDate(new Date(), '%T'),
                /*
                width: {
                    hours: 32,
                    minutes: 32,
                    seconds: 32,
                    milliseconds: 40,
                    ampm: 32
                }
                */
            })
            .options(options || {});

    if (self.options.milliseconds) {
        self.options.seconds = true;
        if (self.options.value.indexOf('.') == -1) {
            self.options.value += '.000';
        }
    }

    self.date = getDate();
    self.values = getValues();

    self.$input = {
        hours: Ox.Input({
            autocomplete: $.map(self.options.ampm ? Ox.range(1, 13) : Ox.range(0, 24), function(v) {
                return Ox.pad(v, 2);
            }),
            autocompleteReplace: true,
            autocompleteReplaceCorrect: true,
            id: 'hours',
            textAlign: 'right',
            value: self.values.hours,
            width: 32//self.options.width.hours
        }),
        minutes: Ox.Input({
            autocomplete: $.map(Ox.range(0, 60), function(v) {
                return Ox.pad(v, 2);
            }),
            autocompleteReplace: true,
            autocompleteReplaceCorrect: true,
            id: 'minutes',
            textAlign: 'right',
            value: self.values.minutes,
            width: 32//self.options.width.minutes
        }),
        seconds: Ox.Input({
            autocomplete: $.map(Ox.range(0, 60), function(v) {
                return Ox.pad(v, 2);
            }),
            autocompleteReplace: true,
            autocompleteReplaceCorrect: true,
            id: 'seconds',
            textAlign: 'right',
            value: self.values.seconds,
            width: 32//self.options.width.seconds
        }),
        milliseconds: Ox.Input({
            autocomplete: $.map(Ox.range(0, 1000), function(v) {
                return Ox.pad(v, 3);
            }),
            autocompleteReplace: true,
            autocompleteReplaceCorrect: true,
            id: 'milliseconds',
            textAlign: 'right',
            value: self.values.milliseconds,
            width: 40//self.options.width.milliseconds
        }),
        ampm: Ox.Input({
            autocomplete: ['AM', 'PM'],
            autocompleteReplace: true,
            autocompleteReplaceCorrect: true,
            id: 'ampm',
            value: self.values.ampm,
            width: 32//self.options.width.seconds
        })
    };

    that = Ox.InputGroup($.extend(self.options, {
            inputs: $.merge($.merge($.merge([
                self.$input.hours,
                self.$input.minutes,
            ], self.options.seconds ? [
                self.$input.seconds
            ] : []), self.options.milliseconds ? [
                self.$input.milliseconds
            ] : []), self.options.ampm ? [
                self.$input.ampm
            ] : []),
            separators: $.merge($.merge($.merge([
                {title: ':', width: 8},
            ], self.options.seconds ? [
                {title: ':', width: 8}
            ] : []), self.options.milliseconds ? [
                {title: '.', width: 8}
            ] : []), self.options.ampm ? [
                {title: '', width: 8}
            ] : []),
            //width: self.options.width || 128
        }), self)
        .bindEvent('change', setValue);

    setValue();

    function getDate() {
        return new Date('1970/01/01 ' + (
            self.options.milliseconds ?
            self.options.value.substr(0, self.options.value.length - 4) :
            self.options.value
        ));
    }

    function getValues() {
        self.date = getDate();
        return {
            ampm: Ox.formatDate(self.date, '%p'),
            hours: Ox.formatDate(self.date, self.options.ampm ? '%I' : '%H'),
            milliseconds: self.options.milliseconds ? self.options.value.substr(-3) : '000',
            minutes: Ox.formatDate(self.date, '%M'),
            seconds: Ox.formatDate(self.date, '%S')
        };
    }

    function setValue() {
        self.options.value = Ox.formatDate(new Date('1970/01/01 ' + [
            self.$input.hours.options('value'),
            self.$input.minutes.options('value'),
            self.options.seconds ? self.$input.seconds.options('value') : '00'
        ].join(':') + (self.options.ampm ? ' ' + self.$input.ampm.options('value') : '')),
            (self.options.seconds? '%T' : '%H:%M')) +
            (self.options.milliseconds ? '.' + self.$input.milliseconds.options('value') : '');
        //Ox.print('SETVALUE', self.options.value);
    }

    function setValues() {
        self.values = getValues();
        Ox.forEach(self.$input, function(v, k) {
            self.$input[k].options({
                value: self.values[k]
            });
        });
    }

    self.setOption = function(key, value) {
        if (key == 'value') {
            setValues();
        }
    };

    return that;

};