Subversion-Projekte lars-tiefland.ci

/**

* Clockface - v1.0.1

* Clockface timepicker for Twitter Bootstrap

*

* Confusion with noon and midnight:

* http://en.wikipedia.org/wiki/12-hour_clock

* Here considered '00:00 am' as midnight and '12:00 pm' as noon.

*

* Author: Vitaliy Potapov

* Project page: http://github.com/vitalets/clockface

* Copyright (c) 2012 Vitaliy Potapov. Released under MIT License.

**/

(function ($) {

    var Clockface = function (element, options) {

        this.$element = $(element);

        this.options = $.extend({}, $.fn.clockface.defaults, options, this.$element.data());

        this.init();

     };

    Clockface.prototype = {

        constructor: Clockface,

        init: function () {

          //apply template

          this.$clockface = $($.fn.clockface.template);

          this.$clockface.find('.l1 .cell, .left.cell').html('<div class="outer"></div><div class="inner"></div>');

          this.$clockface.find('.l5 .cell, .right.cell').html('<div class="inner"></div><div class="outer"></div>');

          this.$clockface.hide();

          this.$outer = this.$clockface.find('.outer');

          this.$inner = this.$clockface.find('.inner');

          this.$ampm = this.$clockface.find('.ampm');

          //internal vars

          this.ampm = null;

          this.hour = null;

          this.minute = null;

          //click am/pm

          this.$ampm.click($.proxy(this.clickAmPm, this));

          //click cell

          this.$clockface.on('click', '.cell', $.proxy(this.click, this));

          this.parseFormat();

          this.prepareRegexp();

          //set ampm text

          this.ampmtext = this.is24 ? {am: '12-23', pm: '0-11'} : {am: 'AM', pm: 'PM'};

          this.isInline = this.$element.is('div');

          if(this.isInline) {

            this.$clockface.addClass('clockface-inline').appendTo(this.$element);

          } else {

            this.$clockface.addClass('dropdown-menu').appendTo('body');

            if(this.options.trigger === 'focus') {

              this.$element.on('focus.clockface', $.proxy(function(e) { this.show(); }, this));

            }

            // Click outside hide it. Register single handler for all clockface widgets

            $(document).off('click.clockface').on('click.clockface', $.proxy(function (e) {

                var $target = $(e.target);

                //click inside some clockface --> do nothing

                if ($target.closest('.clockface').length) {

                  return;

                }

                //iterate all open clockface and close all except current

                $('.clockface-open').each(function(){

                  if(this === e.target) {

                    return;

                  }

                  $(this).clockface('hide');

                });

            }, this));

          }

          //fill minutes once

          this.fill('minute');

        },

        /*

        Displays widget with specified value

        */

        show: function(value) {

            if(this.$clockface.is(':visible')) {

              return;

            }

            if(!this.isInline) {

                if(value === undefined) {

                  value = this.$element.val();

                }

                this.$element.addClass('clockface-open');

                this.$element.on('keydown.clockface', $.proxy(this.keydown, this));

                this.place();

                $(window).on('resize.clockface', $.proxy(this.place, this));

            }

            this.$clockface.show();

            this.setTime(value);

            //trigger shown event

            this.$element.triggerHandler('shown.clockface', this.getTime(true));

        },

        /*

        hides widget

        */

        hide: function() {

            this.$clockface.hide();

            if(!this.isInline) {

              this.$element.removeClass('clockface-open');

              this.$element.off('keydown.clockface');

              $(window).off('resize.clockface');

            }

            //trigger hidden event

            this.$element.triggerHandler('hidden.clockface', this.getTime(true));

        },

        /*

        toggles show/hide

        */

        toggle: function(value) {

          if(this.$clockface.is(':visible')) {

            this.hide();

          } else {

            this.show(value);

          }

        },

         /*

        Set time of clockface. Am/pm will be set automatically.

        Value can be Date object or string

        */

        setTime: function(value) {

          var res, hour, minute, ampm = 'am';

          //no new value

          if(value === undefined) {

            //if ampm null, it;s first showw, need to render hours ('am' by default)

            if(this.ampm === null) {

              this.setAmPm('am');

            }

            return;

          }

          //take value from Date object

          if(value instanceof Date) {

            hour = value.getHours();

            minute = value.getMinutes();

          }

          //parse value from string

          if(typeof value === 'string' && value.length) {

            res = this.parseTime(value);

            //'24' always '0'

            if(res.hour === 24) {

              res.hour = 0;

            }

            hour = res.hour;

            minute = res.minute;

            ampm = res.ampm;

          }

          //try to set ampm automatically

          if(hour > 11 && hour < 24) {

            ampm = 'pm';

            //for 12h format substract 12 from value

            if(!this.is24 && hour > 12) {

              hour -= 12;

            }

          } else if(hour >= 0 && hour < 11) {

                //always set am for 24h and for '0' in 12h

                if(this.is24 || hour === 0) {

                   ampm = 'am';

               }

               //otherwise ampm should be defined in value itself and retrieved when parsing

          }

          this.setAmPm(ampm);

          this.setHour(hour);

          this.setMinute(minute);

        },

        /*

        Set ampm and re-fill hours

        */

        setAmPm: function(value) {

          if(value === this.ampm) {

             return;

          } else {

             this.ampm = value === 'am' ? 'am' : 'pm';

          }

          //set link's text

          this.$ampm.text(this.ampmtext[this.ampm]);

          //re-fill and highlight hour

          this.fill('hour');

          this.highlight('hour');

        },

        /*

        Sets hour value and highlight if possible

        */

        setHour: function(value) {

          value = parseInt(value, 10);

          value = isNaN(value) ? null : value;

          if(value < 0 || value > 23) {

            value = null;

          }

          if(value === this.hour) {

            return;

          } else {

            this.hour = value;

          }

          this.highlight('hour');

        },

        /*

        Sets minute value and highlight

        */

        setMinute: function(value) {

          value = parseInt(value, 10);

          value = isNaN(value) ? null : value;

          if(value < 0 || value > 59) {

            value = null;

          }

          if(value === this.minute) {

            return;

          } else {

            this.minute = value;

          }

          this.highlight('minute');

        },

        /*

        Highlights hour/minute

        */

        highlight: function(what) {

          var index,

              values = this.getValues(what),

              value = what === 'minute' ? this.minute : this.hour,

              $cells = what === 'minute' ? this.$outer : this.$inner;

          $cells.removeClass('active');

          //find index of value and highlight if possible

          index = $.inArray(value, values);

          if(index >= 0) {

            $cells.eq(index).addClass('active');

          }

        },

        /*

        Fill values around

        */

        fill: function(what) {

          var values = this.getValues(what),

              $cells = what === 'minute' ? this.$outer : this.$inner,

              leadZero = what === 'minute';

          $cells.each(function(i){

            var v = values[i];

            if(leadZero && v < 10) {

              v = '0' + v;

            }

            $(this).text(v);

          });

        },

        /*

        returns values of hours or minutes, depend on ampm and 24/12 format (0-11, 12-23, 00-55, etc)

        param what: 'hour'/'minute'

        */

        getValues: function(what) {

          var values = [11, 0, 1, 10, 2, 9, 3, 8, 4, 7, 6, 5],

              result = values.slice();

          //minutes

          if(what === 'minute') {

              $.each(values, function(i, v) { result[i] = v*5; });

          } else {

            //hours

            if(!this.is24) {

              result[1] = 12; //need this to show '12' instead of '00' for 12h am/pm

            }

            if(this.is24 && this.ampm === 'pm') {

              $.each(values, function(i, v) { result[i] = v+12; });

            }

          }

          return result;

        },

        /*

        Click cell handler.

        Stores hour/minute and highlights.

        On second click deselect value

        */

        click: function(e) {

          var $target = $(e.target),

              value = $target.hasClass('active') ? null : $target.text();

          if($target.hasClass('inner')) {

            this.setHour(value);

          } else {

            this.setMinute(value);

          }

          //update value in input

          if(!this.isInline) {

            this.$element.val(this.getTime());

          }

          //trigger pick event

          this.$element.triggerHandler('pick.clockface', this.getTime(true));

        },

        /*

        Click handler on ampm link

        */

        clickAmPm: function(e) {

          e.preventDefault();

          //toggle am/pm

          this.setAmPm(this.ampm === 'am' ? 'pm' : 'am');

          //update value in input

          if(!this.isInline && !this.is24) {

            this.$element.val(this.getTime());

          }

          //trigger pick event

          this.$element.triggerHandler('pick.clockface', this.getTime(true));

        },

        /*

        Place widget below input

        */

        place: function(){

          var zIndex = parseInt(this.$element.parents().filter(function() {

                   return $(this).css('z-index') != 'auto';

             }).first().css('z-index'), 10)+10,

             offset = this.$element.offset();

          this.$clockface.css({

            top: offset.top + this.$element.outerHeight(),

            left: offset.left,

            zIndex: zIndex

          });

        },

        /*

        keydown handler (for not inline mode)

        */

        keydown: function(e) {

          //tab, escape, enter --> hide

          if(/^(9|27|13)$/.test(e.which)) {

            this.hide();

            return;

          }

          clearTimeout(this.timer);

          this.timer = setTimeout($.proxy(function(){

            this.setTime(this.$element.val());

          }, this), 500);

        },

        /*

        Parse format from options and set this.is24

        */

        parseFormat: function() {

          var format = this.options.format,

              hFormat = 'HH',

              mFormat = 'mm';

          //hour format

          $.each(['HH', 'hh', 'H', 'h'], function(i, f){

            if(format.indexOf(f) !== -1) {

              hFormat = f;

              return false;

            }

          });

          //minute format

          $.each(['mm', 'm'], function(i, f){

            if(format.indexOf(f) !== -1) {

              mFormat = f;

              return false;

            }

          });

          //is 24 hour format

          this.is24 = hFormat.indexOf('H') !== -1;

          this.hFormat = hFormat;

          this.mFormat = mFormat;

        },

        /*

        Parse value passed as string or Date object

        */

        parseTime: function(value) {

          var hour = null,

              minute = null,

              ampm = 'am',

              parts = [], digits;

            value = $.trim(value);

            //try parse time from string assuming separator exist

            if(this.regexpSep) {

                parts = value.match(this.regexpSep);

            }

            if(parts && parts.length) {

              hour = parts[1] ? parseInt(parts[1], 10) : null;

              minute = parts[2] ? parseInt(parts[2], 10): null;

              ampm = (!parts[3] || parts[3].toLowerCase() === 'a') ? 'am' : 'pm';

            } else {

              //if parse with separator failed, search for 1,4-digit block and process it

              //use reversed string to start from end (usefull with full dates)

              //see http://stackoverflow.com/questions/141348/what-is-the-best-way-to-parse-a-time-into-a-date-object-from-user-input-in-javas

              value = value.split('').reverse().join('').replace(/\s/g, '');

              parts = value.match(this.regexpNoSep);

              if(parts && parts.length) {

                ampm = (!parts[1] || parts[1].toLowerCase() === 'a') ? 'am' : 'pm';

                //reverse back

                digits = parts[2].split('').reverse().join('');

                //use smart analyzing to detect hours and minutes

                switch(digits.length) {

                  case 1:

                    hour = parseInt(digits, 10); //e.g. '6'

                  break;

                  case 2:

                    hour = parseInt(digits, 10); //e.g. '16'

                    //if((this.is24 && hour > 24) || (!this.is24 && hour > 12)) { //e.g. 26

                    if(hour > 24) { //e.g. 26

                      hour = parseInt(digits[0], 10);

                      minute = parseInt(digits[1], 10);

                    }

                  break;

                  case 3:

                    hour = parseInt(digits[0], 10);  //e.g. 105

                    minute = parseInt(digits[1]+digits[2], 10);

                    if(minute > 59) {

                      hour = parseInt(digits[0]+digits[1], 10); //e.g. 195

                      minute = parseInt(digits[2], 10);

                      if(hour > 24) {

                        hour = null;

                        minute = null;

                      }

                    }

                  break;

                  case 4:

                    hour = parseInt(digits[0]+digits[1], 10); //e.g. 2006

                    minute = parseInt(digits[2]+digits[3], 10);

                    if(hour > 24) {

                      hour = null;

                    }

                    if(minute > 59) {

                      minute = null;

                    }

                }

              }

            }

          return {hour: hour, minute: minute, ampm: ampm};

        },

        prepareRegexp: function() {

            //take separator from format

            var sep = this.options.format.match(/h\s*([^hm]?)\s*m/i); //HH-mm, HH:mm

            if(sep && sep.length) {

              sep = sep[1];

            }

            //sep can be null for HH, and '' for HHmm

            this.separator = sep;

            //parse from string

            //use reversed string and regexp to parse 2-digit minutes first

            //see http://stackoverflow.com/questions/141348/what-is-the-best-way-to-parse-a-time-into-a-date-object-from-user-input-in-javas

            //this.regexp = new RegExp('(a|p)?\\s*((\\d\\d?)' + sep + ')?(\\d\\d?)', 'i');

            //regexp, used with separator

            this.regexpSep = (this.separator && this.separator.length) ? new RegExp('(\\d\\d?)\\s*\\' + this.separator + '\\s*(\\d?\\d?)\\s*(a|p)?', 'i') : null;

            //second regexp applied if previous has no result or separator is empty (to reversed string)

            this.regexpNoSep = new RegExp('(a|p)?\\s*(\\d{1,4})', 'i');

        },

        /*

        Returns time as string in specified format

        */

        getTime: function(asObject) {

          if(asObject === true) {

            return {

              hour: this.hour,

              minute: this.minute,

              ampm: this.ampm

            };

          }

          var hour = this.hour !== null ? this.hour + '' : '',

              minute = this.minute !== null ? this.minute + '' : '',

              result = this.options.format;

          if(!hour.length && !minute.length) {

            return '';

          }

          if(this.hFormat.length > 1 && hour.length === 1) {

            hour = '0' + hour;

          }

          if(this.mFormat.length > 1 && minute.length === 1) {

            minute = '0' + minute;

          }

          //delete separator if no minutes

          if(!minute.length && this.separator) {

            result = result.replace(this.separator, '');

          }

          result = result.replace(this.hFormat, hour).replace(this.mFormat, minute);

          if(!this.is24) {

            if(result.indexOf('A') !== -1) {

               result = result.replace('A', this.ampm.toUpperCase());

            } else {

               result = result.replace('a', this.ampm);

            }

          }

          return result;

        },

        /*

        Removes widget and detach events

        */

        destroy: function() {

          this.hide();

          this.$clockface.remove();

          if(!this.isInline && this.options.trigger === 'focus') {

            this.$element.off('focus.clockface');

          }

        }

    };

    $.fn.clockface = function ( option ) {

        var d, args = Array.apply(null, arguments);

        args.shift();

        //getTime returns string (not jQuery onject)

        if(option === 'getTime' && this.length && (d = this.eq(0).data('clockface'))) {

          return d.getTime.apply(d, args);

        }

        return this.each(function () {

            var $this = $(this),

            data = $this.data('clockface'),

            options = typeof option == 'object' && option;

            if (!data) {

                $this.data('clockface', (data = new Clockface(this, options)));

            }

            if (typeof option == 'string' && typeof data[option] == 'function') {

                data[option].apply(data, args);

            }

        });

    };

    $.fn.clockface.defaults = {

        //see http://momentjs.com/docs/#/displaying/format/

        format: 'H:mm',

        trigger: 'focus' //focus|manual

    };

 $.fn.clockface.template = ''+

      '<div class="clockface">' +

          '<div class="l1">' +

              '<div class="cell"></div>' +

              '<div class="cell"></div>' +

              '<div class="cell"></div>' +

          '</div>' +

          '<div class="l2">' +

                '<div class="cell left"></div>' +

                '<div class="cell right"></div>' +

          '</div>'+

          '<div class="l3">' +

                '<div class="cell left"></div>' +

                '<div class="cell right"></div>' +

                '<div class="center"><a href="#" class="ampm"></a></div>' +

          '</div>'+

          '<div class="l4">' +

                '<div class="cell left"></div>' +

                '<div class="cell right"></div>' +

          '</div>'+

          '<div class="l5">' +

                '<div class="cell"></div>' +

                '<div class="cell"></div>' +

                '<div class="cell"></div>' +

          '</div>'+

      '</div>';

}(window.jQuery));