1195 lines
43 KiB
JavaScript
1195 lines
43 KiB
JavaScript
(function() {
|
|
'use strict';
|
|
|
|
/**
|
|
* This section is inspired from angular-material/src/components/datepicker/js/calendar.js
|
|
*/
|
|
|
|
angular
|
|
.module('SOGo.Common')
|
|
.directive('sgTimePane', timePaneDirective);
|
|
|
|
function timePaneDirective() {
|
|
return {
|
|
template: [
|
|
'<div class="sg-time-pane">',
|
|
' <div class="hours-pane">',
|
|
' <div ng-repeat="hoursBigLine in hours" layout="row" layout-xs="column">',
|
|
' <div ng-repeat="hoursLine in hoursBigLine" layout="row" class="hours">',
|
|
' <md-button class="hourBtn sg-time-selection-indicator" id="{{hour.id}}"',
|
|
' md-no-ink',
|
|
' ng-repeat="hour in hoursLine"',
|
|
' ng-click="hourClickHandler(hour.displayName)">{{hour.displayName}}</md-button>',
|
|
' </div>',
|
|
' </div>',
|
|
' </div>',
|
|
' <div class="min5" ng-show="is5min()">',
|
|
' <div layout="row" layout-xs="column">',
|
|
' <div ng-repeat="minutesLine in min5" layout="row">',
|
|
' <md-button class="minuteBtn sg-time-selection-indicator" id="{{minute.id}}"',
|
|
' md-no-ink',
|
|
' ng-repeat="minute in minutesLine"',
|
|
' ng-click="minuteClickHandler(minute.displayName)">{{minute.displayName}}</md-button>',
|
|
' </div>',
|
|
' </div>',
|
|
' </div>',
|
|
' <div class="sg-time-scroll-mask" ng-hide="is5min()">',
|
|
' <div class="min1" layout="row" layout-xs="column" layout-wrap>',
|
|
' <div ng-repeat="minutesLine in min1" layout="row" layout-align="space-around center">',
|
|
' <md-button class="minuteBtn sg-time-selection-indicator" id="{{minute.id}}"',
|
|
' md-no-ink',
|
|
' ng-repeat="minute in minutesLine"',
|
|
' ng-click="minuteClickHandler(minute.displayName)">{{minute.displayName}}</md-button>',
|
|
' </div>',
|
|
' </div>',
|
|
' </div>',
|
|
' <div flex layout="row" layout-align="center center" md-colors="::{background: \'default-background-200\'}">',
|
|
' <md-button class="toggleBtn md-fab md-mini" ng-bind="getToggleBtnLbl()" ng-click="toggleManual5min()"></md-button>',
|
|
' </div>',
|
|
'</div>'
|
|
].join(''),
|
|
scope: {},
|
|
require: ['ngModel', 'sgTimePane', '?^mdInputContainer'],
|
|
controller: TimePaneCtrl,
|
|
controllerAs: 'ctrl',
|
|
bindToController: true,
|
|
link: function(scope, element, attrs, controllers) {
|
|
var ngModelCtrl = controllers[0];
|
|
var sgTimePaneCtrl = controllers[1];
|
|
|
|
var mdInputContainer = controllers[2];
|
|
if (mdInputContainer) {
|
|
throw Error('sg-timepicker should not be placed inside md-input-container.');
|
|
}
|
|
|
|
sgTimePaneCtrl.configureNgModel(ngModelCtrl, sgTimePaneCtrl);
|
|
}
|
|
};
|
|
}
|
|
|
|
/** Next identifier for calendar instance. */
|
|
var nextUniqueId = 0;
|
|
|
|
/**
|
|
* Controller for the sgTimePane component.
|
|
* @ngInject @constructor
|
|
*/
|
|
TimePaneCtrl.$inject = ['$element', '$scope', '$$mdDateUtil', '$mdUtil',
|
|
'$mdConstant', '$mdTheming', '$$rAF', '$attrs', '$mdDateLocale'];
|
|
function TimePaneCtrl($element, $scope, $$mdDateUtil, $mdUtil,
|
|
$mdConstant, $mdTheming, $$rAF, $attrs, $mdDateLocale) {
|
|
|
|
var m;
|
|
|
|
$mdTheming($element);
|
|
|
|
/** @final {!angular.JQLite} */
|
|
this.$element = $element;
|
|
|
|
/** @final {!angular.Scope} */
|
|
this.$scope = $scope;
|
|
|
|
/** @final */
|
|
this.dateUtil = $$mdDateUtil;
|
|
|
|
/** @final */
|
|
this.$mdUtil = $mdUtil;
|
|
|
|
/** @final */
|
|
this.keyCode = $mdConstant.KEY_CODE;
|
|
|
|
/** @final */
|
|
this.$$rAF = $$rAF;
|
|
|
|
this.timePaneElement = $element[0].querySelector('.sg-time-pane');
|
|
|
|
// this.$q = $q;
|
|
|
|
/** @type {!angular.NgModelController} */
|
|
this.ngModelCtrl = null;
|
|
|
|
/** @type {String} Class applied to the selected hour or minute cell. */
|
|
this.SELECTED_TIME_CLASS = 'sg-time-selected';
|
|
|
|
/** @type {String} Class applied to the focused hour or minute cell. */
|
|
this.FOCUSED_TIME_CLASS = 'md-focus';
|
|
|
|
/** @final {number} Unique ID for this time pane instance. */
|
|
this.id = nextUniqueId++;
|
|
|
|
/**
|
|
* The date that is currently focused or showing in the calendar. This will initially be set
|
|
* to the ng-model value if set, otherwise to today. It will be updated as the user navigates
|
|
* to other months. The cell corresponding to the displayDate does not necesarily always have
|
|
* focus in the document (such as for cases when the user is scrolling the calendar).
|
|
* @type {Date}
|
|
*/
|
|
this.displayTime = null;
|
|
|
|
/**
|
|
* The selected date. Keep track of this separately from the ng-model value so that we
|
|
* can know, when the ng-model value changes, what the previous value was before it's updated
|
|
* in the component's UI.
|
|
*
|
|
* @type {Date}
|
|
*/
|
|
this.selectedTime = null;
|
|
|
|
/**
|
|
* Used to toggle initialize the root element in the next digest.
|
|
* @type {Boolean}
|
|
*/
|
|
this.isInitialized = false;
|
|
|
|
$scope.hours=[];
|
|
$scope.hours[0]=[];
|
|
$scope.hours[0][0]=[];
|
|
$scope.hours[0][1]=[];
|
|
$scope.hours[1]=[];
|
|
$scope.hours[1][0]=[];
|
|
$scope.hours[1][1]=[];
|
|
for(var i=0; i<6; i++){
|
|
$scope.hours[0][0][i] = {id:'tp-'+this.id+'-hour-'+i, displayName:i<10?"0"+i:""+i, selected:false};
|
|
$scope.hours[0][1][i] = {id:'tp-'+this.id+'-hour-'+(i+6),displayName:(i+6)<10?"0"+(i+6):""+(i+6), selected:false};
|
|
$scope.hours[1][0][i] = {id:'tp-'+this.id+'-hour-'+(i+12), displayName:""+(i+12), selected:false};
|
|
$scope.hours[1][1][i] = {id:'tp-'+this.id+'-hour-'+(i+18), displayName:""+(i+18), selected:false};
|
|
}
|
|
|
|
$scope.min5=[];
|
|
$scope.min5[0]=[];
|
|
$scope.min5[1]=[];
|
|
for(i=0; i<6; i++){
|
|
m=i*5;
|
|
$scope.min5[0][i] = {id:'tp-'+this.id+'-minute5-'+m, displayName:m<10?":0"+m:":"+m, selected:true};
|
|
$scope.min5[1][i] = {id:'tp-'+this.id+'-minute5-'+(m+30), displayName:":"+(m+30), selected:false};
|
|
}
|
|
|
|
$scope.min1=[];
|
|
for(i=0; i<12; i++){
|
|
$scope.min1[i]=[];
|
|
for(var ii=0; ii<5; ii++){
|
|
m=i*5 + ii;
|
|
$scope.min1[i][ii] = {id:'tp-'+this.id+'-minute-'+m, displayName:m<10?":0"+m:":"+m, selected:true};
|
|
}
|
|
}
|
|
|
|
$scope.show5min = true;
|
|
$scope.getToggleBtnLbl = function() {
|
|
return ($scope.is5min()) ? '>>' : '<<';
|
|
};
|
|
$scope.toggleManual5min = function() {
|
|
$scope.manual5min = !$scope.is5min();
|
|
};
|
|
$scope.is5min = function() {
|
|
if ($scope.manual5min === true || $scope.manual5min === false) {
|
|
return $scope.manual5min;
|
|
}
|
|
else {
|
|
return $scope.show5min;
|
|
}
|
|
};
|
|
|
|
// Unless the user specifies so, the calendar should not be a tab stop.
|
|
// This is necessary because ngAria might add a tabindex to anything with an ng-model
|
|
// (based on whether or not the user has turned that particular feature on/off).
|
|
if (!$attrs.tabindex) {
|
|
$element.attr('tabindex', '-1');
|
|
}
|
|
|
|
var self = this;
|
|
|
|
this.hourClickHandler = function(displayVal) {
|
|
var updated = new Date(self.displayTime);
|
|
updated.setHours(Number(displayVal));
|
|
self.setNgModelValue(updated, 'hours');
|
|
};
|
|
$scope.hourClickHandler = this.hourClickHandler;
|
|
|
|
this.minuteClickHandler = function(displayVal) {
|
|
// Remove leading ':'
|
|
var val = displayVal.substr(1);
|
|
var updated = new Date(self.displayTime);
|
|
updated.setMinutes(Number(val));
|
|
self.setNgModelValue(updated, 'minutes');
|
|
};
|
|
$scope.minuteClickHandler = this.minuteClickHandler;
|
|
|
|
var boundKeyHandler = angular.bind(this, this.handleKeyEvent);
|
|
|
|
// Bind the keydown handler to the body, in order to handle cases where the focused
|
|
// element gets removed from the DOM and stops propagating click events.
|
|
angular.element(document.body).on('keydown', boundKeyHandler);
|
|
|
|
$scope.$on('$destroy', function() {
|
|
angular.element(document.body).off('keydown', boundKeyHandler);
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Sets up the controller's reference to ngModelController.
|
|
* @param {!angular.NgModelController} ngModelCtrl
|
|
*/
|
|
TimePaneCtrl.prototype.configureNgModel = function(ngModelCtrl, sgTimePaneCtrl) {
|
|
var self = this;
|
|
|
|
// self.displayTime = new Date(self.$viewValue);
|
|
|
|
self.ngModelCtrl = ngModelCtrl;
|
|
|
|
self.$mdUtil.nextTick(function() {
|
|
self.isInitialized = true;
|
|
});
|
|
|
|
ngModelCtrl.$render = function() {
|
|
var date = this.$viewValue;
|
|
self.$mdUtil.nextTick(function() {
|
|
self.changeSelectedTime(date, sgTimePaneCtrl);
|
|
});
|
|
};
|
|
};
|
|
|
|
/**
|
|
* Change the selected date in the time (ngModel value has already been changed).
|
|
*/
|
|
TimePaneCtrl.prototype.changeSelectedTime = function(date, sgTimePaneCtrl) {
|
|
var self = this;
|
|
var previousSelectedTime = this.selectedTime;
|
|
|
|
this.selectedTime = date;
|
|
this.displayTime = new Date(date);
|
|
|
|
// Remove the selected class from the previously selected date, if any.
|
|
if (previousSelectedTime) {
|
|
var prevH = previousSelectedTime.getHours();
|
|
var prevHCell = document.getElementById('tp-'+sgTimePaneCtrl.id+'-hour-'+prevH);
|
|
if (prevHCell) {
|
|
prevHCell.classList.remove(this.SELECTED_TIME_CLASS);
|
|
prevHCell.setAttribute('aria-selected', 'false');
|
|
}
|
|
var prevM = previousSelectedTime.getMinutes();
|
|
var prevMCell = document.getElementById('tp-'+sgTimePaneCtrl.id+'-minute-'+prevM);
|
|
if (prevMCell) {
|
|
prevMCell.classList.remove(this.SELECTED_TIME_CLASS);
|
|
prevMCell.setAttribute('aria-selected', 'false');
|
|
}
|
|
var prevM5Cell = document.getElementById('tp-'+sgTimePaneCtrl.id+'-minute5-'+prevM);
|
|
if (prevM5Cell) {
|
|
prevM5Cell.classList.remove(this.SELECTED_TIME_CLASS);
|
|
prevM5Cell.setAttribute('aria-selected', 'false');
|
|
}
|
|
}
|
|
|
|
// Apply the select class to the new selected date if it is set.
|
|
if (date) {
|
|
var newH = date.getHours();
|
|
var mCell, hCell = document.getElementById('tp-'+sgTimePaneCtrl.id+'-hour-'+newH);
|
|
if (hCell) {
|
|
hCell.classList.add(this.SELECTED_TIME_CLASS);
|
|
hCell.setAttribute('aria-selected', 'true');
|
|
}
|
|
var newM = date.getMinutes();
|
|
if (newM % 5 === 0) {
|
|
sgTimePaneCtrl.$scope.show5min = true;
|
|
mCell = document.getElementById('tp-'+sgTimePaneCtrl.id+'-minute5-'+newM);
|
|
if (mCell) {
|
|
mCell.classList.add(this.SELECTED_TIME_CLASS);
|
|
mCell.setAttribute('aria-selected', 'true');
|
|
}
|
|
}
|
|
else {
|
|
sgTimePaneCtrl.$scope.show5min = false;
|
|
}
|
|
mCell = document.getElementById('tp-'+sgTimePaneCtrl.id+'-minute-'+newM);
|
|
if (mCell) {
|
|
mCell.classList.add(this.SELECTED_TIME_CLASS);
|
|
mCell.setAttribute('aria-selected', 'true');
|
|
}
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Sets the ng-model value for the time pane and emits a change event.
|
|
* @param {Date} date
|
|
*/
|
|
TimePaneCtrl.prototype.setNgModelValue = function(date, mode) {
|
|
this.$scope.$emit('sg-time-pane-change', { date: date, changed: mode });
|
|
this.ngModelCtrl.$setViewValue(date);
|
|
this.ngModelCtrl.$render();
|
|
return date;
|
|
};
|
|
|
|
|
|
/*** User input handling ***/
|
|
|
|
/**
|
|
* Handles a key event in the calendar with the appropriate action. The action will either
|
|
* be to select the focused date or to navigate to focus a new date.
|
|
* @param {KeyboardEvent} event
|
|
*/
|
|
TimePaneCtrl.prototype.handleKeyEvent = function(event) {
|
|
var self = this;
|
|
this.$scope.$apply(function() {
|
|
// Capture escape and emit back up so that a wrapping component
|
|
// (such as a time-picker) can decide to close.
|
|
if (event.which == self.keyCode.ESCAPE || event.which == self.keyCode.TAB) {
|
|
self.$scope.$emit('md-time-pane-close');
|
|
|
|
if (event.which == self.keyCode.TAB) {
|
|
event.preventDefault();
|
|
}
|
|
|
|
return;
|
|
}
|
|
|
|
// Remaining key events fall into two categories: selection and navigation.
|
|
// Start by checking if this is a selection event.
|
|
if (event.which === self.keyCode.ENTER) {
|
|
self.setNgModelValue(self.displayTime, 'enter');
|
|
event.preventDefault();
|
|
return;
|
|
}
|
|
|
|
// Selection isn't occuring, so the key event is either navigation or nothing.
|
|
/*var date = self.getFocusDateFromKeyEvent(event);
|
|
if (date) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
|
|
// Since this is a keyboard interaction, actually give the newly focused date keyboard
|
|
// focus after the been brought into view.
|
|
self.changeDisplayTime(date).then(function () {
|
|
self.focus(date);
|
|
});
|
|
}*/
|
|
});
|
|
};
|
|
|
|
/**
|
|
* Focus the cell corresponding to the given date.
|
|
* @param {Date=} opt_date The date to be focused.
|
|
*/
|
|
TimePaneCtrl.prototype.focus = function(opt_date, sgTimePaneCtrl) {
|
|
var date = opt_date || this.selectedTime || this.today;
|
|
|
|
var previousFocus = this.timePaneElement.querySelector('.md-focus');
|
|
if (previousFocus) {
|
|
previousFocus.classList.remove(this.FOCUSED_TIME_CLASS);
|
|
}
|
|
|
|
if (date) {
|
|
var newH = date.getHours();
|
|
var hCell = document.getElementById('tp-'+sgTimePaneCtrl.id+'-hour-'+newH);
|
|
if (hCell) {
|
|
hCell.classList.add(this.FOCUSED_TIME_CLASS);
|
|
hCell.focus();
|
|
}
|
|
}
|
|
};
|
|
})();
|
|
|
|
(function() {
|
|
'use strict';
|
|
|
|
/**
|
|
* This section is inspired from angular-material/src/components/datepicker/js/datepickerDirective.js
|
|
*/
|
|
|
|
angular.module('SOGo.Common')
|
|
.directive('sgTimepicker', timePickerDirective);
|
|
|
|
/**
|
|
* @ngdoc directive
|
|
* @name mdTimepicker
|
|
* @module material.components.timepicker
|
|
*
|
|
* @param {Date} ng-model The component's model. Expects a JavaScript Date object.
|
|
* @param {expression=} ng-change Expression evaluated when the model value changes.
|
|
* @param {String=} md-placeholder The time input placeholder value.
|
|
* @param {boolean=} ng-disabled Whether the timepicker is disabled.
|
|
* @param {boolean=} ng-required Whether a value is required for the timepicker.
|
|
*
|
|
* @description
|
|
* `<sg-timepicker>` is a component used to select a single time.
|
|
* For information on how to configure internationalization for the time picker,
|
|
* see `$mdTimeLocaleProvider`.
|
|
*
|
|
* @usage
|
|
* <hljs lang="html">
|
|
* <sg-timepicker ng-model="birthday"></sg-timepicker>
|
|
* </hljs>
|
|
*
|
|
*/
|
|
|
|
timePickerDirective.$inject = ['$mdUtil', '$mdAria', 'inputDirective'];
|
|
function timePickerDirective($mdUtil, $mdAria, inputDirective) {
|
|
return {
|
|
template: function(tElement, tAttrs) {
|
|
// Buttons are not in the tab order because users can open the hours pane via keyboard
|
|
// interaction on the text input, and multiple tab stops for one component (picker)
|
|
// may be confusing.
|
|
var ariaLabelValue = tAttrs.ariaLabel || tAttrs.mdPlaceholder;
|
|
|
|
return [
|
|
'<md-button class="sg-timepicker-button md-icon-button" type="button" ',
|
|
' tabindex="-1" aria-hidden="true" ',
|
|
' ng-click="ctrl.openTimePane($event)">',
|
|
' <md-icon class="sg-timepicker-icon">access_time</md-icon>',
|
|
'</md-button>',
|
|
'<div class="md-default-theme sg-timepicker-input-container" ',
|
|
' ng-class="{\'sg-timepicker-focused\': ctrl.isFocused}">',
|
|
' <input class="sg-timepicker-input" ',
|
|
(ariaLabelValue ? 'aria-label="' + ariaLabelValue + '" ' : ''),
|
|
' aria-haspopup="true"',
|
|
' aria-expanded="{{ctrl.isTimeOpen}}" ',
|
|
' aria-owns="{{::ctrl.timePaneId}}"',
|
|
' ng-focus="ctrl.setFocused(true)" ng-blur="ctrl.setFocused(false)">',
|
|
' <md-button type="button" md-no-ink ',
|
|
' class="sg-timepicker-triangle-button md-icon-button" ',
|
|
' ng-click="ctrl.openTimePane($event)" ',
|
|
' aria-label="{{::ctrl.dateLocale.msgOpenCalendar}}">',
|
|
' <div class="sg-timepicker-expand-triangle"></div>',
|
|
' </md-button>',
|
|
'</div>',
|
|
// This pane will be detached from here and re-attached to the document body.
|
|
'<div class="sg-timepicker-time-pane md-whiteframe-z1" id="{{::ctrl.timePaneId}}">',
|
|
' <div class="sg-timepicker-input-mask">',
|
|
' <div class="sg-timepicker-input-mask-opaque"></div>',
|
|
// ' md-colors="::{\'box-shadow\': \'default-background-hue-1\'}"></div>', // using mdColors
|
|
' </div>',
|
|
' <div class="sg-timepicker-time">',
|
|
' <sg-time-pane role="dialog" aria-label="{{::ctrl.dateLocale.msgCalendar}}" ',
|
|
' ng-model="ctrl.time" ng-if="ctrl.isTimeOpen"></sg-time-pane>',
|
|
' </div>',
|
|
'</div>'
|
|
].join('');
|
|
},
|
|
require: ['ngModel', 'sgTimepicker', '?^mdInputContainer', '?^form'],
|
|
scope: {
|
|
placeholder: '@mdPlaceholder'
|
|
},
|
|
controller: TimePickerCtrl,
|
|
controllerAs: 'ctrl',
|
|
bindToController: true,
|
|
link: function(scope, element, attr, controllers) {
|
|
var ngModelCtrl = controllers[0];
|
|
var sgTimePickerCtrl = controllers[1];
|
|
var mdInputContainer = controllers[2];
|
|
var parentForm = controllers[3];
|
|
var mdNoAsterisk = $mdUtil.parseAttributeBoolean(attr.mdNoAsterisk);
|
|
|
|
sgTimePickerCtrl.configureNgModel(ngModelCtrl, mdInputContainer, inputDirective);
|
|
|
|
if (mdInputContainer) {
|
|
var spacer = element[0].querySelector('.md-errors-spacer');
|
|
|
|
if (spacer) {
|
|
element.after(angular.element('<div>').append(spacer));
|
|
}
|
|
|
|
mdInputContainer.setHasPlaceholder(attr.mdPlaceholder);
|
|
mdInputContainer.input = element;
|
|
mdInputContainer.element
|
|
.addClass(INPUT_CONTAINER_CLASS)
|
|
.toggleClass(HAS_TIME_ICON_CLASS, attr.mdHideIcons !== 'time' && attr.mdHideIcons !== 'all');
|
|
|
|
if (!mdInputContainer.label) {
|
|
$mdAria.expect(element, 'aria-label', attr.mdPlaceholder);
|
|
} else if (!mdNoAsterisk) {
|
|
attr.$observe('required', function(value) {
|
|
mdInputContainer.label.toggleClass('md-required', !!value);
|
|
});
|
|
}
|
|
|
|
scope.$watch(mdInputContainer.isErrorGetter || function() {
|
|
return ngModelCtrl.$invalid && (ngModelCtrl.$touched || (parentForm && parentForm.$submitted));
|
|
}, mdInputContainer.setInvalid);
|
|
} else if (parentForm) {
|
|
// If invalid, highlights the input when the parent form is submitted.
|
|
var parentSubmittedWatcher = scope.$watch(function() {
|
|
return parentForm.$submitted;
|
|
}, function(isSubmitted) {
|
|
if (isSubmitted) {
|
|
sgTimePickerCtrl.updateErrorState();
|
|
parentSubmittedWatcher();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
};
|
|
}
|
|
|
|
/** Additional offset for the input's `size` attribute, which is updated based on its content. */
|
|
var EXTRA_INPUT_SIZE = 3;
|
|
|
|
/** Class applied to the container if the date is invalid. */
|
|
var INVALID_CLASS = 'sg-timepicker-invalid';
|
|
|
|
/** Class applied to the timepicker when it's open. */
|
|
var OPEN_CLASS = 'sg-timepicker-open';
|
|
|
|
/** Class applied to the md-input-container, if a timepicker is placed inside it */
|
|
var INPUT_CONTAINER_CLASS = '_sg-timepicker-floating-label';
|
|
|
|
/** Class to be applied when the time icon is enabled. */
|
|
var HAS_TIME_ICON_CLASS = '_sg-timepicker-has-calendar-icon';
|
|
|
|
/** Default time in ms to debounce input event by. */
|
|
var DEFAULT_DEBOUNCE_INTERVAL = 500;
|
|
|
|
/**
|
|
* Height of the calendar pane used to check if the pane is going outside the boundary of
|
|
* the viewport. See calendar.scss for how $md-calendar-height is computed; an extra 20px is
|
|
* also added to space the pane away from the exact edge of the screen.
|
|
*
|
|
* This is computed statically now, but can be changed to be measured if the circumstances
|
|
* of calendar sizing are changed.
|
|
*/
|
|
var TIME_PANE_HEIGHT = { MIN5: { GTXS: 172 + 20, XS: 291 + 20 },
|
|
MIN1: { GTXS: 364 + 20, XS: 454 + 20 } };
|
|
|
|
/**
|
|
* Width of the calendar pane used to check if the pane is going outside the boundary of
|
|
* the viewport. See calendar.scss for how $md-calendar-width is computed; an extra 20px is
|
|
* also added to space the pane away from the exact edge of the screen.
|
|
*
|
|
* This is computed statically now, but can be changed to be measured if the circumstances
|
|
* of calendar sizing are changed.
|
|
*/
|
|
var TIME_PANE_WIDTH = { GTXS: 510 + 20, XS: 274 + 20 };
|
|
|
|
/** Used for checking whether the current user agent is on iOS or Android. */
|
|
var IS_MOBILE_REGEX = /ipad|iphone|ipod|android/i;
|
|
|
|
/**
|
|
* Controller for sg-timepicker.
|
|
*
|
|
* ngInject @constructor
|
|
*/
|
|
TimePickerCtrl.$inject = ['$scope', '$element', '$attrs', '$window', '$mdConstant',
|
|
'$mdTheming', '$mdUtil', '$mdDateLocale', '$$mdDateUtil', '$$rAF',
|
|
'$mdMedia'];
|
|
function TimePickerCtrl($scope, $element, $attrs, $window, $mdConstant,
|
|
$mdTheming, $mdUtil, $mdDateLocale, $$mdDateUtil, $$rAF,
|
|
$mdMedia) {
|
|
/** @final */
|
|
this.$window = $window;
|
|
|
|
/** @final */
|
|
this.dateLocale = $mdDateLocale;
|
|
|
|
/** @final */
|
|
this.dateUtil = $$mdDateUtil;
|
|
|
|
/** @final */
|
|
this.$mdConstant = $mdConstant;
|
|
|
|
/* @final */
|
|
this.$mdUtil = $mdUtil;
|
|
|
|
/** @final */
|
|
this.$$rAF = $$rAF;
|
|
|
|
/** @final */
|
|
this.$mdMedia = $mdMedia;
|
|
|
|
/**
|
|
* The root document element. This is used for attaching a top-level click handler to
|
|
* close the calendar panel when a click outside said panel occurs. We use `documentElement`
|
|
* instead of body because, when scrolling is disabled, some browsers consider the body element
|
|
* to be completely off the screen and propagate events directly to the html element.
|
|
* @type {!angular.JQLite}
|
|
*/
|
|
this.documentElement = angular.element(document.documentElement);
|
|
|
|
/** @type {!angular.NgModelController} */
|
|
this.ngModelCtrl = null;
|
|
|
|
/** @type {HTMLInputElement} */
|
|
this.inputElement = $element[0].querySelector('input');
|
|
|
|
/** @final {!angular.JQLite} */
|
|
this.ngInputElement = angular.element(this.inputElement);
|
|
|
|
/** @type {HTMLElement} */
|
|
this.inputContainer = $element[0].querySelector('.sg-timepicker-input-container');
|
|
|
|
/** @type {HTMLElement} Floating time pane. */
|
|
this.timePane = $element[0].querySelector('.sg-timepicker-time-pane');
|
|
|
|
/** @type {HTMLElement} Time icon button. */
|
|
this.timeButton = $element[0].querySelector('.sg-timepicker-button');
|
|
|
|
/**
|
|
* Element covering everything but the input in the top of the floating calendar pane.
|
|
* @type {HTMLElement}
|
|
*/
|
|
this.inputMask = angular.element($element[0].querySelector('.sg-timepicker-input-mask-opaque'));
|
|
|
|
/** @final {!angular.JQLite} */
|
|
this.$element = $element;
|
|
|
|
/** @final {!angular.Attributes} */
|
|
this.$attrs = $attrs;
|
|
|
|
/** @final {!angular.Scope} */
|
|
this.$scope = $scope;
|
|
|
|
/** @type {Date} */
|
|
this.time = null;
|
|
|
|
/** @type {boolean} */
|
|
this.isFocused = false;
|
|
|
|
/** @type {boolean} */
|
|
this.isDisabled = false;
|
|
this.setDisabled($element[0].disabled || angular.isString($attrs.disabled));
|
|
|
|
/** @type {boolean} Whether the date-picker's calendar pane is open. */
|
|
this.isTimeOpen = false;
|
|
|
|
/** @type {boolean} Whether the calendar should open when the input is focused. */
|
|
// this.openOnFocus = $attrs.hasOwnProperty('mdOpenOnFocus');
|
|
|
|
/** @final */
|
|
// this.mdInputContainer = null;
|
|
|
|
/**
|
|
* Element from which the calendar pane was opened. Keep track of this so that we can return
|
|
* focus to it when the pane is closed.
|
|
* @type {HTMLElement}
|
|
*/
|
|
this.timePaneOpenedFrom = null;
|
|
|
|
/** @type {String} Unique id for the time pane. */
|
|
this.timePaneId = 'sg-time-pane' + $mdUtil.nextUid();
|
|
|
|
/** Pre-bound click handler is saved so that the event listener can be removed. */
|
|
this.bodyClickHandler = angular.bind(this, this.handleBodyClick);
|
|
|
|
/**
|
|
* Name of the event that will trigger a close. Necessary to sniff the browser, because
|
|
* the resize event doesn't make sense on mobile and can have a negative impact since it
|
|
* triggers whenever the browser zooms in on a focused input.
|
|
*/
|
|
this.windowEventName = IS_MOBILE_REGEX.test(
|
|
navigator.userAgent || navigator.vendor || window.opera
|
|
) ? 'orientationchange' : 'resize';
|
|
|
|
/** Pre-bound close handler so that the event listener can be removed. */
|
|
this.windowEventHandler = $mdUtil.debounce(angular.bind(this, this.closeTimePane), 100);
|
|
|
|
/** Pre-bound handler for the window blur event. Allows for it to be removed later. */
|
|
this.windowBlurHandler = angular.bind(this, this.handleWindowBlur);
|
|
|
|
/** @type {Number} Extra margin for the left side of the floating calendar pane. */
|
|
this.leftMargin = 20;
|
|
|
|
/** @type {Number} Extra margin for the top of the floating calendar. Gets determined on the first open. */
|
|
this.topMargin = null;
|
|
|
|
// Unless the user specifies so, the timepicker should not be a tab stop.
|
|
// This is necessary because ngAria might add a tabindex to anything with an ng-model
|
|
// (based on whether or not the user has turned that particular feature on/off).
|
|
if ($attrs.tabindex) {
|
|
this.ngInputElement.attr('tabindex', $attrs.tabindex);
|
|
$attrs.$set('tabindex', null);
|
|
} else {
|
|
$attrs.$set('tabindex', '-1');
|
|
}
|
|
|
|
$mdTheming($element);
|
|
$mdTheming(angular.element(this.timePane));
|
|
|
|
var self = this;
|
|
|
|
$scope.$on('$destroy', function() {
|
|
self.detachTimePane();
|
|
});
|
|
|
|
if ($attrs.mdIsOpen) {
|
|
$scope.$watch('ctrl.isOpen', function(shouldBeOpen) {
|
|
if (shouldBeOpen) {
|
|
self.openTimePane({
|
|
target: self.inputElement
|
|
});
|
|
} else {
|
|
self.closeTimePane();
|
|
}
|
|
});
|
|
}
|
|
|
|
}
|
|
|
|
/**
|
|
* AngularJS Lifecycle hook for newer AngularJS versions.
|
|
* Bindings are not guaranteed to have been assigned in the controller, but they are in the $onInit hook.
|
|
*/
|
|
TimePickerCtrl.prototype.$onInit = function() {
|
|
this.installPropertyInterceptors();
|
|
this.attachChangeListeners();
|
|
this.attachInteractionListeners();
|
|
};
|
|
|
|
/**
|
|
* Sets up the controller's reference to ngModelController.
|
|
* @param {!angular.NgModelController} ngModelCtrl Instance of the ngModel controller.
|
|
*/
|
|
TimePickerCtrl.prototype.configureNgModel = function(ngModelCtrl, mdInputContainer, inputDirective) {
|
|
this.ngModelCtrl = ngModelCtrl;
|
|
this.mdInputContainer = mdInputContainer;
|
|
|
|
// The input needs to be [type="date"] in order to be picked up by AngularJS.
|
|
this.$attrs.$set('type', 'date');
|
|
|
|
// Invoke the `input` directive link function, adding a stub for the element.
|
|
// This allows us to re-use AngularJS's logic for setting the timezone via ng-model-options.
|
|
// It works by calling the link function directly which then adds the proper `$parsers` and
|
|
// `$formatters` to the ngModel controller.
|
|
// inputDirective[0].link.pre(this.$scope, {
|
|
// on: angular.noop,
|
|
// val: angular.noop,
|
|
// 0: {}
|
|
// }, this.$attrs, [ngModelCtrl]);
|
|
|
|
var self = this;
|
|
|
|
// Responds to external changes to the model value.
|
|
self.ngModelCtrl.$formatters.push(function(value) {
|
|
if (value && !(value instanceof Date)) {
|
|
throw Error('The ng-model for sg-timepicker must be a Date instance. ' +
|
|
'Currently the model is a: ' + (typeof value));
|
|
}
|
|
|
|
self.onExternalChange(value);
|
|
|
|
return value;
|
|
});
|
|
|
|
// Responds to external error state changes (e.g. ng-required based on another input).
|
|
ngModelCtrl.$viewChangeListeners.unshift(angular.bind(this, this.updateErrorState));
|
|
|
|
// Forwards any events from the input to the root element. This is necessary to get `updateOn`
|
|
// working for events that don't bubble (e.g. 'blur') since AngularJS binds the handlers to
|
|
// the `<md-datepicker>`.
|
|
var updateOn = self.$mdUtil.getModelOption(ngModelCtrl, 'updateOn');
|
|
|
|
if (updateOn) {
|
|
this.ngInputElement.on(
|
|
updateOn,
|
|
angular.bind(this.$element, this.$element.triggerHandler, updateOn)
|
|
);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Attach event listeners for both the text input and the md-time.
|
|
* Events are used instead of ng-model so that updates don't infinitely update the other
|
|
* on a change. This should also be more performant than using a $watch.
|
|
*/
|
|
TimePickerCtrl.prototype.attachChangeListeners = function() {
|
|
var self = this;
|
|
|
|
self.$scope.$on('sg-time-pane-change', function(event, data) {
|
|
var time = new Date(data.date);
|
|
self.setModelValue(time);
|
|
self.onExternalChange(time);
|
|
if (data.changed == 'minutes') {
|
|
self.closeTimePane();
|
|
}
|
|
});
|
|
|
|
self.ngInputElement.on('input', angular.bind(self, self.resizeInputElement));
|
|
|
|
var debounceInterval = angular.isDefined(this.debounceInterval) ?
|
|
this.debounceInterval : DEFAULT_DEBOUNCE_INTERVAL;
|
|
self.ngInputElement.on('input', self.$mdUtil.debounce(self.handleInputEvent,
|
|
debounceInterval, self));
|
|
};
|
|
|
|
/** Attach event listeners for user interaction. */
|
|
TimePickerCtrl.prototype.attachInteractionListeners = function() {
|
|
var self = this;
|
|
var $scope = this.$scope;
|
|
var keyCodes = this.$mdConstant.KEY_CODE;
|
|
|
|
// Add event listener through angular so that we can triggerHandler in unit tests.
|
|
self.ngInputElement.on('keydown', function(event) {
|
|
if (event.altKey && event.keyCode == keyCodes.DOWN_ARROW) {
|
|
self.openTimePane(event);
|
|
$scope.$digest();
|
|
}
|
|
});
|
|
|
|
$scope.$on('md-time-close', function() {
|
|
self.closeTimePane();
|
|
});
|
|
};
|
|
|
|
/**
|
|
* Capture properties set to the time-picker and imperitively handle internal changes.
|
|
* This is done to avoid setting up additional $watches.
|
|
*/
|
|
TimePickerCtrl.prototype.installPropertyInterceptors = function() {
|
|
var self = this;
|
|
|
|
if (this.$attrs.ngDisabled) {
|
|
// The expression is to be evaluated against the directive element's scope and not
|
|
// the directive's isolate scope.
|
|
var scope = this.$scope.$parent;
|
|
|
|
if (scope) {
|
|
scope.$watch(this.$attrs.ngDisabled, function(isDisabled) {
|
|
self.setDisabled(isDisabled);
|
|
});
|
|
}
|
|
}
|
|
|
|
Object.defineProperty(this, 'placeholder', {
|
|
get: function() { return self.inputElement.placeholder; },
|
|
set: function(value) { self.inputElement.placeholder = value || ''; }
|
|
});
|
|
};
|
|
|
|
/**
|
|
* Sets whether the date-picker is disabled.
|
|
* @param {boolean} isDisabled
|
|
*/
|
|
TimePickerCtrl.prototype.setDisabled = function(isDisabled) {
|
|
this.isDisabled = isDisabled;
|
|
this.inputElement.disabled = isDisabled;
|
|
|
|
if (this.timeButton) {
|
|
this.timeButton.disabled = isDisabled;
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Sets the custom ngModel.$error flags to be consumed by ngMessages. Flags are:
|
|
* - mindate: whether the selected date is before the minimum date.
|
|
* - maxdate: whether the selected flag is after the maximum date.
|
|
* - filtered: whether the selected date is allowed by the custom filtering function.
|
|
* - valid: whether the entered text input is a valid date
|
|
*
|
|
* The 'required' flag is handled automatically by ngModel.
|
|
*
|
|
* @param {Date=} opt_date Date to check. If not given, defaults to the datepicker's model value.
|
|
*/
|
|
TimePickerCtrl.prototype.updateErrorState = function(opt_date) {
|
|
var date = opt_date || this.time;
|
|
|
|
// Clear any existing errors to get rid of anything that's no longer relevant.
|
|
this.clearErrorState();
|
|
|
|
if (!this.dateUtil.isValidDate(date)) {
|
|
// The date is seen as "not a valid date" if there is *something* set
|
|
// (i.e.., not null or undefined), but that something isn't a valid date.
|
|
this.ngModelCtrl.$setValidity('valid', date === null);
|
|
}
|
|
|
|
var input = this.inputElement.value;
|
|
var parsedTime = this.dateLocale.parseTime(input);
|
|
|
|
if (!this.isInputValid(input, parsedTime) && this.ngModelCtrl.$valid) {
|
|
this.ngModelCtrl.$setValidity('valid', date == null);
|
|
}
|
|
|
|
angular.element(this.inputContainer).toggleClass(INVALID_CLASS, !this.ngModelCtrl.$valid);
|
|
};
|
|
|
|
/**
|
|
* Check to see if the input is valid, as the validation should fail if the model is invalid.
|
|
*
|
|
* @param {string} inputString
|
|
* @param {Date} parsedDate
|
|
* @return {boolean} Whether the input is valid
|
|
*/
|
|
TimePickerCtrl.prototype.isInputValid = function (inputString, parsedTime) {
|
|
return inputString === '' || this.dateUtil.isValidDate(parsedTime);
|
|
};
|
|
|
|
/** Clears any error flags set by `updateErrorState`. */
|
|
TimePickerCtrl.prototype.clearErrorState = function() {
|
|
this.inputContainer.classList.remove(INVALID_CLASS);
|
|
['valid'].forEach(function(field) {
|
|
this.ngModelCtrl.$setValidity(field, true);
|
|
}, this);
|
|
};
|
|
|
|
/**
|
|
* Resizes the input element based on the size of its content.
|
|
*/
|
|
TimePickerCtrl.prototype.resizeInputElement = function() {
|
|
this.inputElement.size = this.inputElement.value.length + EXTRA_INPUT_SIZE;
|
|
};
|
|
|
|
/**
|
|
* Sets the model value if the user input is a valid time.
|
|
* Adds an invalid class to the input element if not.
|
|
*/
|
|
TimePickerCtrl.prototype.handleInputEvent = function(self) {
|
|
var inputString = this.inputElement.value;
|
|
var parsedTime = inputString ? this.dateLocale.parseTime(inputString) : null;
|
|
|
|
// An input string is valid if it is either empty (representing no date)
|
|
// or if it parses to a valid time that the user is allowed to select.
|
|
var isValidInput = this.isInputValid(inputString, parsedTime);
|
|
|
|
// The datepicker's model is only updated when there is a valid input.
|
|
if (isValidInput) {
|
|
var updated = new Date(this.time);
|
|
if (parsedTime) {
|
|
updated.setHours(parsedTime.getHours());
|
|
updated.setMinutes(parsedTime.getMinutes());
|
|
} else {
|
|
updated = null;
|
|
}
|
|
this.setModelValue(updated);
|
|
this.time = updated;
|
|
}
|
|
|
|
this.updateErrorState(parsedTime);
|
|
};
|
|
|
|
/** Position and attach the floating calendar to the document. */
|
|
TimePickerCtrl.prototype.attachTimePane = function() {
|
|
var timePane = this.timePane;
|
|
var body = document.body;
|
|
|
|
timePane.style.transform = '';
|
|
this.$element.addClass(OPEN_CLASS);
|
|
// this.mdInputContainer && this.mdInputContainer.element.addClass(OPEN_CLASS);
|
|
angular.element(body).addClass('md-datepicker-is-showing');
|
|
|
|
var elementRect = this.inputContainer.getBoundingClientRect();
|
|
var bodyRect = body.getBoundingClientRect();
|
|
|
|
if (!this.topMargin || this.topMargin < 0) {
|
|
this.topMargin = (this.inputMask.parent().prop('clientHeight') - this.ngInputElement.prop('clientHeight')) / 2;
|
|
}
|
|
|
|
// Check to see if the calendar pane would go off the screen. If so, adjust position
|
|
// accordingly to keep it within the viewport.
|
|
var paneTop = elementRect.top - bodyRect.top - this.topMargin;
|
|
var paneLeft = elementRect.left - bodyRect.left - this.leftMargin;
|
|
|
|
// If ng-material has disabled body scrolling (for example, if a dialog is open),
|
|
// then it's possible that the already-scrolled body has a negative top/left. In this case,
|
|
// we want to treat the "real" top as (0 - bodyRect.top). In a normal scrolling situation,
|
|
// though, the top of the viewport should just be the body's scroll position.
|
|
var viewportTop = (bodyRect.top < 0 && body.scrollTop === 0) ?
|
|
-bodyRect.top :
|
|
document.body.scrollTop;
|
|
|
|
var viewportLeft = (bodyRect.left < 0 && body.scrollLeft === 0) ?
|
|
-bodyRect.left :
|
|
document.body.scrollLeft;
|
|
|
|
var viewportBottom = viewportTop + this.$window.innerHeight;
|
|
var viewportRight = viewportLeft + this.$window.innerWidth;
|
|
|
|
// Creates an overlay with a hole the same size as element. We remove a pixel or two
|
|
// on each end to make it overlap slightly. The overlay's background is added in
|
|
// the theme in the form of a box-shadow with a huge spread.
|
|
this.inputMask.css({
|
|
position: 'absolute',
|
|
left: this.leftMargin + 'px',
|
|
top: this.topMargin + 'px',
|
|
width: (elementRect.width - 1) + 'px',
|
|
height: (elementRect.height - 2) + 'px'
|
|
});
|
|
|
|
// If the right edge of the pane would be off the screen and shifting it left by the
|
|
// difference would not go past the left edge of the screen. If the time pane is too
|
|
// big to fit on the screen at all, move it to the left of the screen and scale the entire
|
|
// element down to fit.
|
|
var paneWidth = this.$mdMedia('xs')? TIME_PANE_WIDTH.XS : TIME_PANE_WIDTH.GTXS;
|
|
if (paneLeft + paneWidth > viewportRight) {
|
|
if (viewportRight - paneWidth > 0) {
|
|
paneLeft = viewportRight - paneWidth;
|
|
} else {
|
|
paneLeft = viewportLeft;
|
|
var scale = this.$window.innerWidth / paneWidth;
|
|
timePane.style.transform = 'scale(' + scale + ')';
|
|
}
|
|
|
|
timePane.classList.add('sg-timepicker-pos-adjusted');
|
|
}
|
|
|
|
// If the bottom edge of the pane would be off the screen and shifting it up by the
|
|
// difference would not go past the top edge of the screen.
|
|
var min = (this.time && this.time.getMinutes() % 5 === 0)? 'MIN5' : 'MIN1';
|
|
var paneHeight = this.$mdMedia('xs')? TIME_PANE_HEIGHT[min].XS : TIME_PANE_HEIGHT[min].GTXS;
|
|
if (paneTop + paneHeight > viewportBottom &&
|
|
viewportBottom - paneHeight > viewportTop) {
|
|
paneTop = viewportBottom - paneHeight;
|
|
timePane.classList.add('sg-timepicker-pos-adjusted');
|
|
}
|
|
|
|
timePane.style.left = paneLeft + 'px';
|
|
timePane.style.top = paneTop + 'px';
|
|
document.body.appendChild(timePane);
|
|
|
|
// Add CSS class after one frame to trigger open animation.
|
|
this.$$rAF(function() {
|
|
timePane.classList.add('md-pane-open');
|
|
});
|
|
};
|
|
|
|
/** Detach the floating time pane from the document. */
|
|
TimePickerCtrl.prototype.detachTimePane = function() {
|
|
this.$element.removeClass(OPEN_CLASS);
|
|
//this.mdInputContainer && this.mdInputContainer.element.removeClass(OPEN_CLASS);
|
|
angular.element(document.body).removeClass('md-datepicker-is-showing');
|
|
this.timePane.classList.remove('md-pane-open');
|
|
this.timePane.classList.remove('md-timepicker-pos-adjusted');
|
|
|
|
if (this.isTimeOpen) {
|
|
this.$mdUtil.enableScrolling();
|
|
}
|
|
|
|
if (this.timePane.parentNode) {
|
|
// Use native DOM removal because we do not want any of the angular state of this element
|
|
// to be disposed.
|
|
this.timePane.parentNode.removeChild(this.timePane);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Open the floating time pane.
|
|
* @param {Event} event
|
|
*/
|
|
TimePickerCtrl.prototype.openTimePane = function(event) {
|
|
if (!this.isTimeOpen && !this.isDisabled) {
|
|
this.isTimeOpen = true;
|
|
this.timePaneOpenedFrom = event.target;
|
|
|
|
// Because the time pane is attached directly to the body, it is possible that the
|
|
// rest of the component (input, etc) is in a different scrolling container, such as
|
|
// an md-content. This means that, if the container is scrolled, the pane would remain
|
|
// stationary. To remedy this, we disable scrolling while the time pane is open, which
|
|
// also matches the native behavior for things like `<select>` on Mac and Windows.
|
|
this.$mdUtil.disableScrollAround(this.timePane);
|
|
|
|
this.attachTimePane();
|
|
//this.focusTime();
|
|
this.evalAttr('ngFocus');
|
|
|
|
// Attach click listener inside of a timeout because, if this open call was triggered by a
|
|
// click, we don't want it to be immediately propogated up to the body and handled.
|
|
var self = this;
|
|
this.$mdUtil.nextTick(function() {
|
|
// Use 'touchstart` in addition to click in order to work on iOS Safari, where click
|
|
// events aren't propogated under most circumstances.
|
|
// See http://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html
|
|
self.documentElement.on('click touchstart', self.bodyClickHandler);
|
|
}, false);
|
|
|
|
window.addEventListener(this.windowEventName, this.windowEventHandler);
|
|
}
|
|
};
|
|
|
|
/** Close the floating time pane. */
|
|
TimePickerCtrl.prototype.closeTimePane = function() {
|
|
if (this.isTimeOpen) {
|
|
var self = this;
|
|
|
|
self.detachTimePane();
|
|
self.ngModelCtrl.$setTouched();
|
|
self.evalAttr('ngBlur');
|
|
|
|
self.documentElement.off('click touchstart', self.bodyClickHandler);
|
|
window.removeEventListener(self.windowEventName, self.windowEventHandler);
|
|
|
|
self.timePaneOpenedFrom.focus();
|
|
self.timePaneOpenedFrom = null;
|
|
|
|
self.isTimeOpen = false;
|
|
}
|
|
};
|
|
|
|
/** Gets the controller instance for the time in the floating pane. */
|
|
TimePickerCtrl.prototype.getTimePaneCtrl = function() {
|
|
return angular.element(this.timePane.querySelector('sg-time-pane')).controller('sgTimePane');
|
|
};
|
|
|
|
/** Focus the time in the floating pane. */
|
|
TimePickerCtrl.prototype.focusTime = function() {
|
|
// Use a timeout in order to allow the time to be rendered, as it is gated behind an ng-if.
|
|
var self = this;
|
|
this.$mdUtil.nextTick(function() {
|
|
var ctrl = self.getTimePaneCtrl();
|
|
self.getTimePaneCtrl().focus(null, ctrl);
|
|
}, false);
|
|
};
|
|
|
|
/**
|
|
* Sets whether the input is currently focused.
|
|
* @param {boolean} isFocused
|
|
*/
|
|
TimePickerCtrl.prototype.setFocused = function(isFocused) {
|
|
if (!isFocused) {
|
|
this.ngModelCtrl.$setTouched();
|
|
}
|
|
|
|
this.evalAttr(isFocused ? 'ngFocus' : 'ngBlur');
|
|
|
|
this.isFocused = isFocused;
|
|
};
|
|
|
|
/**
|
|
* Handles a click on the document body when the floating time pane is open.
|
|
* Closes the floating time pane if the click is not inside of it.
|
|
* @param {MouseEvent} event
|
|
*/
|
|
TimePickerCtrl.prototype.handleBodyClick = function(event) {
|
|
if (this.isTimeOpen) {
|
|
var isInTime = this.$mdUtil.getClosest(event.target, 'sg-time-pane');
|
|
|
|
if (!isInTime) {
|
|
this.closeTimePane();
|
|
}
|
|
|
|
this.$scope.$digest();
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Handles the event when the user navigates away from the current tab. Keeps track of
|
|
* whether the input was focused when the event happened, in order to prevent the time pane
|
|
* from re-opening.
|
|
*/
|
|
TimePickerCtrl.prototype.handleWindowBlur = function() {
|
|
this.inputFocusedOnWindowBlur = document.activeElement === this.inputElement;
|
|
};
|
|
|
|
/**
|
|
* Evaluates an attribute expression against the parent scope.
|
|
* @param {String} attr Name of the attribute to be evaluated.
|
|
*/
|
|
TimePickerCtrl.prototype.evalAttr = function(attr) {
|
|
if (this.$attrs[attr]) {
|
|
this.$scope.$parent.$eval(this.$attrs[attr]);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Sets the ng-model value.
|
|
* @param {Date=} value Date to be set as the model value.
|
|
*/
|
|
TimePickerCtrl.prototype.setModelValue = function(value) {
|
|
this.ngModelCtrl.$setViewValue(value);
|
|
};
|
|
|
|
/**
|
|
* Updates the timepicker when a model change occurred externally.
|
|
* @param {Date=} value Value that was set to the model.
|
|
*/
|
|
TimePickerCtrl.prototype.onExternalChange = function(value) {
|
|
this.time = value;
|
|
this.inputElement.value = this.dateLocale.formatTime(value);
|
|
if (this.mdInputContainer) this.mdInputContainer.setHasValue(!!value);
|
|
this.resizeInputElement();
|
|
this.updateErrorState();
|
|
};
|
|
})();
|