ecomp-sdk-app/src/main/webapp/static/fusion/raptor/ebz/date_time_picker.js

   1  String.prototype.paddingLeft = function (paddingValue) {
   2     return String(paddingValue + this).slice(-paddingValue.length);
   3  };
   4
   5 angular.module("app/scripts/ng_js_att_tpls/datepicker/dateTimePickerPopup.html", []).run(["$templateCache", function($templateCache) {
   6   $templateCache.put("app/scripts/ng_js_att_tpls/datepicker/dateTimePickerPopup.html",
   7     "<div class=\"calendar\">\n" +
   8     "    <div class=\"box\" ng-class=\"{'active': isOpen}\">\n" +
   9     "        <span ng-transclude></span>\n" +
  10
  11     "        <i class=\"calendar-icon\" tabindex=\"0\" att-accessibility-click=\"13,32\" ng-click=\"toggle()\" alt=\"Calendar Icon\"  ></i>\n" +
  12     "    </div>\n" +
  13
  14         '<div class="datetimepicker datepicker-wrapper datepicker-wrapper-display-none" style="z-index:10000;width:292px" ng-style="{display: (isOpen && \'block\') || \'none\'}" aria-hidden=\"false\" role=\"dialog\" tabindex=\"-1\">'
  15         +   '<div class="datetimepicker-content">'
  16
  17         +   '<ul class="tabsbid--small">'
  18         +   '<li class="tabsbid__item" ng-class="{\'tabsbid__item--active\':tab==\'date\'}" ng-click="setTab(\'date\')">'
  19         +   '<a class="tabsbid__item-link" href="" tabindex="0" att-accessibility-click="32,13">Date</a>'
  20         +   '</li>'
  21         +   '<li class="tabsbid__item " ng-class="{\'tabsbid__item--active\':tab==\'time\'}" ng-click="setTab(\'time\')">'
  22         +   '<a class="tabsbid__item-link" href="" tabindex="0" att-accessibility-click="32,13">Time</a>'
  23         +   '</li>'
  24         +   '</ul>'
  25
  26         +     '<div class="datetimepicker-section datetimepicker-date-section" ng-if="tab==\'date\'">'
  27         +       '<div class="datetimepicker-month">'
  28         +'<div class="icons-list left" style="margin:5px;cursor: pointer;" data-size="medium" ng-click="addMonth(-1)"><i class="icon-arrow-left-circle" ng-class="{\'disabled\': disablePrev}" alt="Left Arrow"></i></div>'
  29         +'<div class="icons-list right" style="margin:5px;cursor: pointer;" data-size="medium" ng-click="addMonth(1)"><i class="icon-arrow-right-circle" ng-class="{\'disabled\': disableNext}" alt="Right Arrow"></i></div>'
  30         +         '<div class="datetimepicker-current-month">{{displayMonth}} {{year}}</div>'
  31         +       '</div>'
  32         +       '<div class="datetimepicker-calendar">'
  33         +         '<div class="datetimepicker-day" ng-repeat="day in dayNames">{{day | limitTo: 1}}</div>'
  34         +         '<div class="datetimepicker-day datetimepicker-leading-day" ng-repeat="d in days.leadingDays">{{d}}</div>'
  35         +         '<div class="datetimepicker-day datetimepicker-active-day" ng-class="{\'selected\':day==d}" ng-click="setDay(d)" ng-repeat="d in days.days">{{d}}</div>'
  36         +         '<div class="datetimepicker-day datetimepicker-trailing-day" ng-repeat="d in days.trailingDays">{{d}}</div>'
  37         +       '</div>'
  38         +     '</div>'
  39
  40         +     '<div class="datetimepicker-section datetimepicker-date-time" ng-if="tab==\'time\'">'
  41         +       '<div class="datetimepicker-month">'
  42         +         '<div class="datetimepicker-current-month">{{hour}}:{{minute}}</div>'
  43         +       '</div>'
  44         +       '<div class="time-circle-outer">'
  45         +         '<div class="time-meridian time-left" ng-click="setMeridian(\'AM\')" ng-class="{\'selected\':meridian==\'AM\'}">AM</div>'
  46         +         '<div class="time-meridian time-right" ng-click="setMeridian(\'PM\')" ng-class="{\'selected\':meridian==\'PM\'}">PM</div>'
  47         +         '<div class="time-circle-center"></div>'
  48         +         '<div class="time-circle-hand time-circle-hand-large deg-{{minute/5}}" ></div>'
  49         +         '<div class="time time-{{$index+1}}" ng-class="{\'selected\':minute==time}" ng-click="setMinutes(time)" ng-repeat="time in [5,10,15,20,25,30,35,40,45,50,55,0]">{{time}}</div>'
  50         +         '<div class="time-circle-inner">'
  51         +           '<div class="time-circle-hand deg-{{hour}}" ></div>'
  52         +           '<div class="time time-{{$index+1}}" ng-class="{\'selected\':hour==time}" ng-click="setHour(time)" ng-repeat="time in [1,2,3,4,5,6,7,8,9,10,11,12]">{{time}}</div>'
  53         +         '</div>'
  54         +       '</div>'
  55         +     '</div>'
  56
  57         +   '</div>'
  58         + '</div>' +
  59
  60     "</div>\n" +
  61     "");
  62 }]);
  63
  64 angular.module('quantum').requires.push("app/scripts/ng_js_att_tpls/datepicker/dateTimePickerPopup.html");
  65
  66 angular.module('quantum')
  67 .directive('dateTimePickerPopup', ['$document', 'datepickerService', '$isElement', '$documentBind', function($document, datepickerService, $isElement, $documentBind) {
  68     var link = function (scope, elem, attr) {
  69         datepickerService.bindScope(attr, scope);
  70
  71         scope.isOpen = false;
  72
  73         var toggle = scope.toggle = function (show) {
  74             if(show === true || show === false) {
  75                 scope.isOpen = show;
  76             } else {
  77                 scope.isOpen = !scope.isOpen;
  78             }
  79         };
  80
  81 //        scope.$watch('current', function () {
  82 //            toggle(false);
  83 //        });
  84
  85         var outsideClick = function (e) {
  86             var isElement = $isElement(angular.element(e.target), elem, $document);
  87             if(!isElement) {
  88                 toggle(false);
  89                 scope.$apply();
  90             }
  91         };
  92
  93         $documentBind.click('isOpen', outsideClick, scope);
  94
  95         scope.tabs = [{
  96             title: 'DATE',
  97             url: '#option1'
  98         }, {
  99             title: 'TIME',
 100             url: '#option2',
 101             selected: true
 102         }
 103     ];
 104
 105         //--------------------------------------
 106
 107         scope.state = false;
 108         scope.tab = 'time';
 109         scope.setTab = function(tab){
 110           scope.tab = tab;
 111         };
 112         scope.config = {
 113           modal: true,
 114           color:'rgba(5, 116, 172, 1)',
 115           backgroundColor: 'rgba(0,0,0,0.75)'
 116         };
 117         scope.months = ["January","February","March","April","May","June","July","Augusta","September","October","November","December"];
 118         scope.dayNames = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
 119         scope.$watch('current',function(value){
 120           var m;
 121           if(value)
 122             m = moment(value);
 123           else
 124             m = moment();
 125           m = m.minute(5*Math.ceil(m.minute()/5));
 126           scope.display = m.format('YYYY-MM-DD hh:mm A');
 127           scope.days = scope.getDaysInMonth(m.year(),m.month());
 128           scope.minute = m.minute();
 129           scope.meridian = m.format('A');
 130           scope.hour  = scope.meridian == 'PM' ? m.hour() - 12: m.hour();
 131           if(scope.hour==0) scope.hour = 12;
 132           scope.datePreview = m.format('YYYY-MM-DD');
 133           scope.timePreview = m.format('hh:mm A');
 134           scope.displayMonth = scope.months[m.month()];
 135           scope.day = m.date();
 136           scope.year = m.year();
 137
 138         });
 139
 140         scope.setDay = function(date){
 141           scope.current = moment(scope.current).date(date).toDate();
 142         };
 143
 144         scope.setState = function(state){
 145           scope.state = false;
 146         };
 147
 148         scope.setHour = function(hour){
 149           if(scope.meridian == 'PM' && hour < 12)
 150             hour = hour + 12;
 151           if(scope.meridian == 'AM' && hour == 12)
 152             hour = hour - 12;
 153           scope.current = moment(scope.current).hour(hour).toDate();
 154         };
 155
 156         scope.setMeridian = function(meridian){
 157           var m = moment(scope.current);
 158
 159           if(meridian == 'AM'){
 160             if(m.hours()>=12){
 161               m = m.add(-12,'hours');
 162               scope.current = m.toDate();
 163             }
 164           }else{
 165             if(m.hours()<12){
 166               m = m.add(12,'hours');
 167               scope.current = m.toDate();
 168             }
 169           }
 170         };
 171
 172         scope.setMinutes = function(minutes){
 173           scope.current = moment(scope.current).minute(minutes).toDate();
 174         };
 175
 176         var days = [];
 177         for(var i=1;i<=31;i++){
 178           days.push(i);
 179         }
 180         scope.getDaysInMonth = function(year,month){
 181           var firstDayOfWeek = 0;
 182           var firstDayOfMonth = new Date(year, month, 1),
 183               lastDayOfMonth = new Date(year, month + 1, 0),
 184               lastDayOfPreviousMonth = new Date(year, month, 0),
 185               daysInMonth = lastDayOfMonth.getDate(),
 186               daysInLastMonth = lastDayOfPreviousMonth.getDate(),
 187               dayOfWeek = firstDayOfMonth.getDay(),
 188               leadingDays = (dayOfWeek - firstDayOfWeek + 7) % 7 || 7,
 189               trailingDays = days.slice(0, 6 * 7 - (leadingDays + daysInMonth));
 190           if (trailingDays.length > 7) {
 191             trailingDays = trailingDays.slice(0, trailingDays.length-7);
 192           }
 193
 194           return {
 195             year: year,
 196             month: month,
 197             days: days.slice(0, daysInMonth),
 198             leadingDays: days.slice(- leadingDays - (31 - daysInLastMonth), daysInLastMonth),
 199             trailingDays: trailingDays
 200           };
 201         };
 202
 203         scope.addMonth = function(increment){
 204           scope.current = moment(scope.current).add(increment,'months').toDate();
 205         };
 206
 207     };
 208
 209     return {
 210         restrict: 'EA',
 211         replace: true,
 212         transclude: true,
 213         templateUrl: 'app/scripts/ng_js_att_tpls/datepicker/dateTimePickerPopup.html',
 214         scope: {
 215             current: "=current"
 216         },
 217         compile: function (elem, attr) {
 218             var wrapperElement = elem.find('span').eq(1);
 219             wrapperElement.attr('current', 'current');
 220             datepickerService.setAttributes(attr, wrapperElement);
 221
 222             return link;
 223         }
 224     };
 225 }])
 226 .directive('attDateTimePicker', ['$log', function($log) {
 227     return {
 228         restrict: 'A',
 229         require: 'ngModel',
 230         scope: {},
 231         controller: ['$scope', '$element', '$attrs', '$compile', 'datepickerConfig', 'datepickerService', function($scope, $element, $attrs, $compile, datepickerConfig, datepickerService) {
 232             var dateFormatString = angular.isDefined($attrs.dateFormat) ? $scope.$parent.$eval($attrs.dateFormat) : datepickerConfig.dateFormat;
 233             var selectedDateMessage = '<div class="sr-focus hidden-spoken" tabindex="-1">the date you selected is {{$parent.current | date : \'' + dateFormatString + '\'}}</div>';
 234
 235             $element.removeAttr('att-date-time-picker');
 236             $element.removeAttr('ng-model');
 237             $element.attr('ng-model', '$parent.current');
 238             $element.attr('aria-describedby', 'datepicker');
 239             $element.attr('format-date', dateFormatString);
 240             $element.attr('att-input-deny', '[^0-9ampAMP \/:-]');
 241             $element.attr('maxlength', 20);
 242
 243             var wrapperElement = angular.element('<div></div>');
 244             wrapperElement.attr('date-time-picker-popup', '');
 245             wrapperElement.attr('current', 'current');
 246
 247             datepickerService.setAttributes($attrs, wrapperElement);
 248             datepickerService.bindScope($attrs, $scope);
 249
 250             wrapperElement.html('');
 251             wrapperElement.append($element.prop('outerHTML'));
 252             if (navigator.userAgent.match(/MSIE 8/) === null) {
 253                 wrapperElement.append(selectedDateMessage);
 254             }
 255             var elm = wrapperElement.prop('outerHTML');
 256
 257             elm = $compile(elm)($scope);
 258             $element.replaceWith(elm);
 259         }],
 260         link: function(scope, elem, attr, ctrl) {
 261             if (!ctrl) {
 262                 // do nothing if no ng-model
 263                 $log.error("ng-model is required.");
 264                 return;
 265             }
 266
 267             scope.$watch('current', function(value) {
 268                 ctrl.$setViewValue(value);
 269             });
 270             ctrl.$render = function() {
 271                 scope.current = ctrl.$viewValue;
 272             };
 273         }
 274     };
 275 }]);
 276
 277