web-ui-fw/0.0.2/0.0.2_Common/original/css/car/components/dateTime/dateTime.js

   1 /**
   2  * Provides functions for displaying and updating date/time element.
   3  * Use following snippet to include component in your `index.html` file:
   4  *
   5  *     <script type='text/javascript' src='./css/car/components/dateTime/dateTime.js'></script>
   6  *     <link rel="stylesheet" href="./css/car/components/dateTime/dateTime.css" />
   7  *
   8  * and following code to initialize:
   9  *
  10  *     $("#clockElement").ClockPlugin('init',5);  // initialize clockElement, timer interval is set as 5 seconds
  11  *     $("#clockElement").ClockPlugin('startTimer');  // start timer
  12  *
  13  * @class Clock
  14  * @module CarTheme
  15  * @constructor
  16  *
  17  **/
  18 function Clock() {
  19 }
  20 /**
  21  * Contains actual time and date strings.
  22  * @property status
  23  * @type Object
  24  * @param {string} timeStr Holds actual time string.
  25  * @param {string} dateStr Holds actual date string.
  26  * @param {string} dayStr Holds actual day string.
  27  **/
  28 Clock.prototype.status = {
  29         timeStr: null,
  30         dateStr: null,
  31         dayStr: null
  32 };
  33
  34 /**
  35  * Listener for timer events.
  36  * @method handleTimerEv
  37  * @param clockSelector {string} Define clock selector in document.
  38  * @param dateSelector {string} Define date selector in document.
  39  **/
  40 Clock.prototype.handleTimerEv = function (clockSelector, dateSelector) {
  41         "use strict";
  42         var monthsShort = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
  43         var date = new Date();
  44         var hour = date.getHours();
  45         var minute = date.getMinutes();
  46         var ampm = hour >= 12 ? 'PM' : 'AM';
  47         hour = hour % 12;
  48         if (hour === 0) {
  49                 hour = 12; // the hour '0' should be '12'
  50         }
  51         minute = minute < 10 ? '0' + minute : minute;
  52         hour = hour < 10 ? '0' + hour : hour;
  53         this.status.timeStr = hour + ":" + minute + " " + ampm;
  54         this.status.dateStr = monthsShort[date.getMonth().toString()].toUpperCase() + " " + date.getDate().toString();
  55         if (clockSelector !== null) {
  56                 $(clockSelector).empty();
  57                 $(clockSelector).append(this.status.timeStr);
  58         }
  59         if (dateSelector !== null) {
  60                 $(dateSelector).empty();
  61                 $(dateSelector).append(this.status.dateStr);
  62         }
  63 };
  64
  65 (function ($) {
  66         "use strict";
  67         /**
  68          * Provides functions for dateTime JQuery Plugin panel.
  69          * @class ClockPlugin
  70          * @static
  71          **/
  72         var ClockPlugin = {
  73                         /**
  74                          * Holds ID for clock document element.
  75                          * @property clockDiv
  76                          * @type string
  77                          * @default null
  78                          **/
  79                         clockDiv: null,
  80                         /**
  81                          * Holds ID for date document element.
  82                          * @property dateDiv
  83                          * @type string
  84                          * @default null
  85                          **/
  86                         dateDiv: null,
  87                         /**
  88                          * Holds timer for clock actualization interval.
  89                          * @property timer
  90                          * @type timer
  91                          * @default null
  92                          **/
  93                         timer: null,
  94                         /**
  95                          * Holds clock actualization interval in miliseconds.
  96                          * @property miliSeconds
  97                          * @type int
  98                          * @default 0
  99                          **/
 100                         miliSeconds: 0,
 101                         /**
 102                          * Holds Clock object after initialization.
 103                          * @property clockObj
 104                          * @type Object
 105                          * @default null
 106                          **/
 107                         clockObj: null,
 108                         /**
 109                          * Provides initialization of dateTime plugin.
 110                          * @method init
 111                          * @param seconds {int} Define clock actualization interval in seconds.
 112                          **/
 113                         init: function (seconds) {
 114                                 this.empty();
 115                                 var appendText = '<div id="clock" class="clockElemnt fontSizeXXLarge  fontColorDark fontWeightBold">TIME</div>';
 116                                 appendText += '<div id="date" class="dateElemnt fontSizeXXLarge fontColorDark fontWeightBold">DATE</div>';
 117                                 this.append(appendText);
 118                                 ClockPlugin.clockDiv = "#clock";
 119                                 ClockPlugin.dateDiv = "#date";
 120                                 ClockPlugin.miliSeconds = seconds * 1000;
 121                                 ClockPlugin.clockObj = new Clock();
 122                                 ClockPlugin.clockObj.handleTimerEv(ClockPlugin.clockDiv, ClockPlugin.dateDiv);
 123                         },
 124                         /**
 125                          * Provides initialization of clock actualization timer.
 126                          * @method startTimer
 127                          **/
 128                         startTimer: function () {
 129                                 ClockPlugin.timer = setInterval(function () {
 130                                         ClockPlugin.clockObj.handleTimerEv(ClockPlugin.clockDiv, ClockPlugin.dateDiv);
 131                                 }, ClockPlugin.miliSeconds);
 132                         },
 133                         /**
 134                          * Provides clearing of clock actualization timer.
 135                          * @method startTimer
 136                          **/
 137                         stopTimer: function () {
 138                                 clearInterval(ClockPlugin.timer);
 139                         }
 140                 };
 141         /**
 142          * jQuery extension method for {{#crossLink "ClockPlugin"}}{{/crossLink}} plugin.
 143          * @param method {Object|jQuery selector} Identificator (name) of method or jQuery selector.
 144          * @method ClockPlugin
 145          * @for jQuery
 146          * @return Result of called method.
 147          */
 148         $.fn.ClockPlugin = function (method) {
 149                 // Method calling logic
 150                 if (ClockPlugin[method]) {
 151                         return ClockPlugin[method].apply(this, Array.prototype.slice.call(arguments, 1));
 152                 } else if (typeof method === 'object' || !method) {
 153                         return ClockPlugin.init.apply(this, arguments);
 154                 } else {
 155                         $.error('Method ' + method + ' does not exist on jQuery.ClockPlugin');
 156                 }
 157         };
 158 }(jQuery));