mirror of https://github.com/grafana/grafana
Angular: Remove deprecated angular modal support and libs (#49781)
Torkel Ödegaard
3 years ago
committed by
GitHub
parent
056a1fec3d
commit
8fa8c9dc8b
@ -1,198 +0,0 @@ |
||||
/** |
||||
* AngularStrap - Twitter Bootstrap directives for AngularJS |
||||
* @version v0.7.5 - 2013-07-21 |
||||
* @link http://mgcrea.github.com/angular-strap
|
||||
* @author Olivier Louvignes <olivier@mg-crea.com> |
||||
* @license MIT License, http://www.opensource.org/licenses/MIT
|
||||
*/ |
||||
angular.module('$strap.config', []).value('$strapConfig', {}); |
||||
angular.module('$strap.filters', ['$strap.config']); |
||||
angular.module('$strap.directives', ['$strap.config']); |
||||
angular.module('$strap', [ |
||||
'$strap.filters', |
||||
'$strap.directives', |
||||
'$strap.config' |
||||
]); |
||||
'use strict'; |
||||
angular.module('$strap.directives').factory('$modal', [ |
||||
'$rootScope', |
||||
'$compile', |
||||
'$http', |
||||
'$timeout', |
||||
'$q', |
||||
'$templateCache', |
||||
'$strapConfig', |
||||
function ($rootScope, $compile, $http, $timeout, $q, $templateCache, $strapConfig) { |
||||
var ModalFactory = function ModalFactory(config) { |
||||
function Modal(config) { |
||||
var options = angular.extend({ show: true }, $strapConfig.modal, config); |
||||
var scope = options.scope ? options.scope : $rootScope.$new() |
||||
var templateUrl = options.template; |
||||
return $q.when(options.templateHtml || $templateCache.get(templateUrl) || $http.get(templateUrl, { cache: true }).then(function (res) { |
||||
return res.data; |
||||
})).then(function onSuccess(template) { |
||||
var id = scope.$id; |
||||
if (templateUrl) { |
||||
id += templateUrl.replace('.html', '').replace(/[\/|\.|:]/g, '-'); |
||||
} |
||||
// grafana change, removed fade
|
||||
var $modal = $('<div class="modal hide" tabindex="-1"></div>').attr('id', id).html(template); |
||||
if (options.modalClass) |
||||
$modal.addClass(options.modalClass); |
||||
$('body').append($modal); |
||||
$timeout(function () { |
||||
$compile($modal)(scope); |
||||
}); |
||||
scope.$modal = function (name) { |
||||
$modal.modal(name); |
||||
}; |
||||
angular.forEach([ |
||||
'show', |
||||
'hide' |
||||
], function (name) { |
||||
scope[name] = function () { |
||||
$modal.modal(name); |
||||
}; |
||||
}); |
||||
scope.dismiss = scope.hide; |
||||
angular.forEach([ |
||||
'show', |
||||
'shown', |
||||
'hide', |
||||
'hidden' |
||||
], function (name) { |
||||
$modal.on(name, function (ev) { |
||||
scope.$emit('modal-' + name, ev); |
||||
}); |
||||
}); |
||||
$modal.on('shown', function (ev) { |
||||
$('input[autofocus], textarea[autofocus]', $modal).first().trigger('focus'); |
||||
}); |
||||
$modal.on('hidden', function (ev) { |
||||
if (!options.persist) |
||||
scope.$destroy(); |
||||
}); |
||||
scope.$on('$destroy', function () { |
||||
$modal.remove(); |
||||
}); |
||||
$modal.modal(options); |
||||
return $modal; |
||||
}); |
||||
} |
||||
return new Modal(config); |
||||
}; |
||||
return ModalFactory; |
||||
} |
||||
]) |
||||
|
||||
'use strict'; |
||||
angular.module('$strap.directives').directive('bsTooltip', [ |
||||
'$parse', |
||||
'$compile', |
||||
function ($parse, $compile) { |
||||
return { |
||||
restrict: 'A', |
||||
scope: true, |
||||
link: function postLink(scope, element, attrs, ctrl) { |
||||
var getter = $parse(attrs.bsTooltip), setter = getter.assign, value = getter(scope); |
||||
scope.$watch(attrs.bsTooltip, function (newValue, oldValue) { |
||||
if (newValue !== oldValue) { |
||||
value = newValue; |
||||
} |
||||
}); |
||||
// Grafana change, always hide other tooltips
|
||||
if (true) { |
||||
element.on('show', function (ev) { |
||||
$('.tooltip.in').each(function () { |
||||
var $this = $(this), tooltip = $this.data('tooltip'); |
||||
if (tooltip && !tooltip.$element.is(element)) { |
||||
$this.tooltip('hide'); |
||||
} |
||||
}); |
||||
}); |
||||
} |
||||
element.tooltip({ |
||||
title: function () { |
||||
return angular.isFunction(value) ? value.apply(null, arguments) : value; |
||||
}, |
||||
html: true, |
||||
container: 'body', // Grafana change
|
||||
}); |
||||
var tooltip = element.data('tooltip'); |
||||
tooltip.show = function () { |
||||
var r = $.fn.tooltip.Constructor.prototype.show.apply(this, arguments); |
||||
this.tip().data('tooltip', this); |
||||
return r; |
||||
}; |
||||
scope._tooltip = function (event) { |
||||
element.tooltip(event); |
||||
}; |
||||
scope.hide = function () { |
||||
element.tooltip('hide'); |
||||
}; |
||||
scope.show = function () { |
||||
element.tooltip('show'); |
||||
}; |
||||
scope.dismiss = scope.hide; |
||||
} |
||||
}; |
||||
} |
||||
]); |
||||
|
||||
'use strict'; |
||||
angular.module('$strap.directives').directive('bsTypeahead', [ |
||||
'$parse', |
||||
function ($parse) { |
||||
return { |
||||
restrict: 'A', |
||||
require: '?ngModel', |
||||
link: function postLink(scope, element, attrs, controller) { |
||||
var getter = $parse(attrs.bsTypeahead), setter = getter.assign, value = getter(scope); |
||||
scope.$watch(attrs.bsTypeahead, function (newValue, oldValue) { |
||||
if (newValue !== oldValue) { |
||||
value = newValue; |
||||
} |
||||
}); |
||||
element.attr('data-provide', 'typeahead'); |
||||
element.typeahead({ |
||||
source: function (query) { |
||||
return angular.isFunction(value) ? value.apply(null, arguments) : value; |
||||
}, |
||||
minLength: attrs.minLength || 1, |
||||
items: attrs.items, |
||||
updater: function (value) { |
||||
if (controller) { |
||||
scope.$apply(function () { |
||||
controller.$setViewValue(value); |
||||
}); |
||||
} |
||||
scope.$emit('typeahead-updated', value); |
||||
return value; |
||||
} |
||||
}); |
||||
var typeahead = element.data('typeahead'); |
||||
typeahead.lookup = function (ev) { |
||||
var items; |
||||
this.query = this.$element.val() || ''; |
||||
if (this.query.length < this.options.minLength) { |
||||
return this.shown ? this.hide() : this; |
||||
} |
||||
items = $.isFunction(this.source) ? this.source(this.query, $.proxy(this.process, this)) : this.source; |
||||
return items ? this.process(items) : this; |
||||
}; |
||||
if (!!attrs.matchAll) { |
||||
typeahead.matcher = function (item) { |
||||
return true; |
||||
}; |
||||
} |
||||
if (attrs.minLength === '0') { |
||||
setTimeout(function () { |
||||
element.on('focus', function () { |
||||
element.val().length === 0 && setTimeout(element.typeahead.bind(element, 'lookup'), 200); |
||||
}); |
||||
}); |
||||
} |
||||
} |
||||
}; |
||||
} |
||||
]); |
||||
File diff suppressed because it is too large
Load Diff
@ -1,888 +0,0 @@ |
||||
/*! |
||||
* Timepicker Component for Twitter Bootstrap |
||||
* |
||||
* Copyright 2013 Joris de Wit |
||||
* |
||||
* Contributors https://github.com/jdewit/bootstrap-timepicker/graphs/contributors
|
||||
* |
||||
* For the full copyright and license information, please view the LICENSE |
||||
* file that was distributed with this source code. |
||||
*/ |
||||
(function($, window, document, undefined) { |
||||
'use strict'; |
||||
|
||||
// TIMEPICKER PUBLIC CLASS DEFINITION
|
||||
var Timepicker = function(element, options) { |
||||
this.widget = ''; |
||||
this.$element = $(element); |
||||
this.defaultTime = options.defaultTime; |
||||
this.disableFocus = options.disableFocus; |
||||
this.isOpen = options.isOpen; |
||||
this.minuteStep = options.minuteStep; |
||||
this.modalBackdrop = options.modalBackdrop; |
||||
this.secondStep = options.secondStep; |
||||
this.showInputs = options.showInputs; |
||||
this.showMeridian = options.showMeridian; |
||||
this.showSeconds = options.showSeconds; |
||||
this.template = options.template; |
||||
this.appendWidgetTo = options.appendWidgetTo; |
||||
|
||||
this._init(); |
||||
}; |
||||
|
||||
Timepicker.prototype = { |
||||
|
||||
constructor: Timepicker, |
||||
|
||||
_init: function() { |
||||
var self = this; |
||||
|
||||
if (this.$element.parent().hasClass('input-append') || this.$element.parent().hasClass('input-prepend')) { |
||||
this.$element.parent('.input-append, .input-prepend').find('.add-on').on({ |
||||
'click.timepicker': $.proxy(this.showWidget, this) |
||||
}); |
||||
this.$element.on({ |
||||
'focus.timepicker': $.proxy(this.highlightUnit, this), |
||||
'click.timepicker': $.proxy(this.highlightUnit, this), |
||||
'keydown.timepicker': $.proxy(this.elementKeydown, this), |
||||
'blur.timepicker': $.proxy(this.blurElement, this) |
||||
}); |
||||
} else { |
||||
if (this.template) { |
||||
this.$element.on({ |
||||
'focus.timepicker': $.proxy(this.showWidget, this), |
||||
'click.timepicker': $.proxy(this.showWidget, this), |
||||
'blur.timepicker': $.proxy(this.blurElement, this) |
||||
}); |
||||
} else { |
||||
this.$element.on({ |
||||
'focus.timepicker': $.proxy(this.highlightUnit, this), |
||||
'click.timepicker': $.proxy(this.highlightUnit, this), |
||||
'keydown.timepicker': $.proxy(this.elementKeydown, this), |
||||
'blur.timepicker': $.proxy(this.blurElement, this) |
||||
}); |
||||
} |
||||
} |
||||
|
||||
if (this.template !== false) { |
||||
this.$widget = $(this.getTemplate()).prependTo(this.$element.parents(this.appendWidgetTo)).on('click', $.proxy(this.widgetClick, this)); |
||||
} else { |
||||
this.$widget = false; |
||||
} |
||||
|
||||
if (this.showInputs && this.$widget !== false) { |
||||
this.$widget.find('input').each(function() { |
||||
$(this).on({ |
||||
'click.timepicker': function() { $(this).select(); }, |
||||
'keydown.timepicker': $.proxy(self.widgetKeydown, self) |
||||
}); |
||||
}); |
||||
} |
||||
|
||||
this.setDefaultTime(this.defaultTime); |
||||
}, |
||||
|
||||
blurElement: function() { |
||||
this.highlightedUnit = undefined; |
||||
this.updateFromElementVal(); |
||||
}, |
||||
|
||||
decrementHour: function() { |
||||
if (this.showMeridian) { |
||||
if (this.hour === 1) { |
||||
this.hour = 12; |
||||
} else if (this.hour === 12) { |
||||
this.hour--; |
||||
|
||||
return this.toggleMeridian(); |
||||
} else if (this.hour === 0) { |
||||
this.hour = 11; |
||||
|
||||
return this.toggleMeridian(); |
||||
} else { |
||||
this.hour--; |
||||
} |
||||
} else { |
||||
if (this.hour === 0) { |
||||
this.hour = 23; |
||||
} else { |
||||
this.hour--; |
||||
} |
||||
} |
||||
this.update(); |
||||
}, |
||||
|
||||
decrementMinute: function(step) { |
||||
var newVal; |
||||
|
||||
if (step) { |
||||
newVal = this.minute - step; |
||||
} else { |
||||
newVal = this.minute - this.minuteStep; |
||||
} |
||||
|
||||
if (newVal < 0) { |
||||
this.decrementHour(); |
||||
this.minute = newVal + 60; |
||||
} else { |
||||
this.minute = newVal; |
||||
} |
||||
this.update(); |
||||
}, |
||||
|
||||
decrementSecond: function() { |
||||
var newVal = this.second - this.secondStep; |
||||
|
||||
if (newVal < 0) { |
||||
this.decrementMinute(true); |
||||
this.second = newVal + 60; |
||||
} else { |
||||
this.second = newVal; |
||||
} |
||||
this.update(); |
||||
}, |
||||
|
||||
elementKeydown: function(e) { |
||||
switch (e.keyCode) { |
||||
case 9: //tab
|
||||
this.updateFromElementVal(); |
||||
|
||||
switch (this.highlightedUnit) { |
||||
case 'hour': |
||||
e.preventDefault(); |
||||
this.highlightNextUnit(); |
||||
break; |
||||
case 'minute': |
||||
if (this.showMeridian || this.showSeconds) { |
||||
e.preventDefault(); |
||||
this.highlightNextUnit(); |
||||
} |
||||
break; |
||||
case 'second': |
||||
if (this.showMeridian) { |
||||
e.preventDefault(); |
||||
this.highlightNextUnit(); |
||||
} |
||||
break; |
||||
} |
||||
break; |
||||
case 27: // escape
|
||||
this.updateFromElementVal(); |
||||
break; |
||||
case 37: // left arrow
|
||||
e.preventDefault(); |
||||
this.highlightPrevUnit(); |
||||
this.updateFromElementVal(); |
||||
break; |
||||
case 38: // up arrow
|
||||
e.preventDefault(); |
||||
switch (this.highlightedUnit) { |
||||
case 'hour': |
||||
this.incrementHour(); |
||||
this.highlightHour(); |
||||
break; |
||||
case 'minute': |
||||
this.incrementMinute(); |
||||
this.highlightMinute(); |
||||
break; |
||||
case 'second': |
||||
this.incrementSecond(); |
||||
this.highlightSecond(); |
||||
break; |
||||
case 'meridian': |
||||
this.toggleMeridian(); |
||||
this.highlightMeridian(); |
||||
break; |
||||
} |
||||
break; |
||||
case 39: // right arrow
|
||||
e.preventDefault(); |
||||
this.updateFromElementVal(); |
||||
this.highlightNextUnit(); |
||||
break; |
||||
case 40: // down arrow
|
||||
e.preventDefault(); |
||||
switch (this.highlightedUnit) { |
||||
case 'hour': |
||||
this.decrementHour(); |
||||
this.highlightHour(); |
||||
break; |
||||
case 'minute': |
||||
this.decrementMinute(); |
||||
this.highlightMinute(); |
||||
break; |
||||
case 'second': |
||||
this.decrementSecond(); |
||||
this.highlightSecond(); |
||||
break; |
||||
case 'meridian': |
||||
this.toggleMeridian(); |
||||
this.highlightMeridian(); |
||||
break; |
||||
} |
||||
break; |
||||
} |
||||
}, |
||||
|
||||
formatTime: function(hour, minute, second, meridian) { |
||||
hour = hour < 10 ? '0' + hour : hour; |
||||
minute = minute < 10 ? '0' + minute : minute; |
||||
second = second < 10 ? '0' + second : second; |
||||
|
||||
return hour + ':' + minute + (this.showSeconds ? ':' + second : '') + (this.showMeridian ? ' ' + meridian : ''); |
||||
}, |
||||
|
||||
getCursorPosition: function() { |
||||
var input = this.$element.get(0); |
||||
|
||||
if ('selectionStart' in input) {// Standard-compliant browsers
|
||||
|
||||
return input.selectionStart; |
||||
} else if (document.selection) {// IE fix
|
||||
input.focus(); |
||||
var sel = document.selection.createRange(), |
||||
selLen = document.selection.createRange().text.length; |
||||
|
||||
sel.moveStart('character', - input.value.length); |
||||
|
||||
return sel.text.length - selLen; |
||||
} |
||||
}, |
||||
|
||||
getTemplate: function() { |
||||
var template, |
||||
hourTemplate, |
||||
minuteTemplate, |
||||
secondTemplate, |
||||
meridianTemplate, |
||||
templateContent; |
||||
|
||||
if (this.showInputs) { |
||||
hourTemplate = '<input type="text" name="hour" class="bootstrap-timepicker-hour" maxlength="2"/>'; |
||||
minuteTemplate = '<input type="text" name="minute" class="bootstrap-timepicker-minute" maxlength="2"/>'; |
||||
secondTemplate = '<input type="text" name="second" class="bootstrap-timepicker-second" maxlength="2"/>'; |
||||
meridianTemplate = '<input type="text" name="meridian" class="bootstrap-timepicker-meridian" maxlength="2"/>'; |
||||
} else { |
||||
hourTemplate = '<span class="bootstrap-timepicker-hour"></span>'; |
||||
minuteTemplate = '<span class="bootstrap-timepicker-minute"></span>'; |
||||
secondTemplate = '<span class="bootstrap-timepicker-second"></span>'; |
||||
meridianTemplate = '<span class="bootstrap-timepicker-meridian"></span>'; |
||||
} |
||||
|
||||
templateContent = '<table>'+ |
||||
'<tr>'+ |
||||
'<td><a href="#" data-action="incrementHour"><i class="icon-chevron-up"></i></a></td>'+ |
||||
'<td class="separator"> </td>'+ |
||||
'<td><a href="#" data-action="incrementMinute"><i class="icon-chevron-up"></i></a></td>'+ |
||||
(this.showSeconds ? |
||||
'<td class="separator"> </td>'+ |
||||
'<td><a href="#" data-action="incrementSecond"><i class="icon-chevron-up"></i></a></td>' |
||||
: '') + |
||||
(this.showMeridian ? |
||||
'<td class="separator"> </td>'+ |
||||
'<td class="meridian-column"><a href="#" data-action="toggleMeridian"><i class="icon-chevron-up"></i></a></td>' |
||||
: '') + |
||||
'</tr>'+ |
||||
'<tr>'+ |
||||
'<td>'+ hourTemplate +'</td> '+ |
||||
'<td class="separator">:</td>'+ |
||||
'<td>'+ minuteTemplate +'</td> '+ |
||||
(this.showSeconds ? |
||||
'<td class="separator">:</td>'+ |
||||
'<td>'+ secondTemplate +'</td>' |
||||
: '') + |
||||
(this.showMeridian ? |
||||
'<td class="separator"> </td>'+ |
||||
'<td>'+ meridianTemplate +'</td>' |
||||
: '') + |
||||
'</tr>'+ |
||||
'<tr>'+ |
||||
'<td><a href="#" data-action="decrementHour"><i class="icon-chevron-down"></i></a></td>'+ |
||||
'<td class="separator"></td>'+ |
||||
'<td><a href="#" data-action="decrementMinute"><i class="icon-chevron-down"></i></a></td>'+ |
||||
(this.showSeconds ? |
||||
'<td class="separator"> </td>'+ |
||||
'<td><a href="#" data-action="decrementSecond"><i class="icon-chevron-down"></i></a></td>' |
||||
: '') + |
||||
(this.showMeridian ? |
||||
'<td class="separator"> </td>'+ |
||||
'<td><a href="#" data-action="toggleMeridian"><i class="icon-chevron-down"></i></a></td>' |
||||
: '') + |
||||
'</tr>'+ |
||||
'</table>'; |
||||
|
||||
switch(this.template) { |
||||
case 'modal': |
||||
template = '<div class="bootstrap-timepicker-widget modal hide fade in" data-backdrop="'+ (this.modalBackdrop ? 'true' : 'false') +'">'+ |
||||
'<div class="modal-header">'+ |
||||
'<a href="#" class="close" data-dismiss="modal">×</a>'+ |
||||
'<h3>Pick a Time</h3>'+ |
||||
'</div>'+ |
||||
'<div class="modal-content">'+ |
||||
templateContent + |
||||
'</div>'+ |
||||
'<div class="modal-footer">'+ |
||||
'<a href="#" class="btn btn-primary" data-dismiss="modal">OK</a>'+ |
||||
'</div>'+ |
||||
'</div>'; |
||||
break; |
||||
case 'dropdown': |
||||
template = '<div class="bootstrap-timepicker-widget dropdown-menu">'+ templateContent +'</div>'; |
||||
break; |
||||
} |
||||
|
||||
return template; |
||||
}, |
||||
|
||||
getTime: function() { |
||||
return this.formatTime(this.hour, this.minute, this.second, this.meridian); |
||||
}, |
||||
|
||||
hideWidget: function() { |
||||
if (this.isOpen === false) { |
||||
return; |
||||
} |
||||
|
||||
if (this.showInputs) { |
||||
this.updateFromWidgetInputs(); |
||||
} |
||||
|
||||
this.$element.trigger({ |
||||
'type': 'hide.timepicker', |
||||
'time': { |
||||
'value': this.getTime(), |
||||
'hours': this.hour, |
||||
'minutes': this.minute, |
||||
'seconds': this.second, |
||||
'meridian': this.meridian |
||||
} |
||||
}); |
||||
|
||||
if (this.template === 'modal') { |
||||
this.$widget.modal('hide'); |
||||
} else { |
||||
this.$widget.removeClass('open'); |
||||
} |
||||
|
||||
$(document).off('mousedown.timepicker'); |
||||
|
||||
this.isOpen = false; |
||||
}, |
||||
|
||||
highlightUnit: function() { |
||||
this.position = this.getCursorPosition(); |
||||
if (this.position >= 0 && this.position <= 2) { |
||||
this.highlightHour(); |
||||
} else if (this.position >= 3 && this.position <= 5) { |
||||
this.highlightMinute(); |
||||
} else if (this.position >= 6 && this.position <= 8) { |
||||
if (this.showSeconds) { |
||||
this.highlightSecond(); |
||||
} else { |
||||
this.highlightMeridian(); |
||||
} |
||||
} else if (this.position >= 9 && this.position <= 11) { |
||||
this.highlightMeridian(); |
||||
} |
||||
}, |
||||
|
||||
highlightNextUnit: function() { |
||||
switch (this.highlightedUnit) { |
||||
case 'hour': |
||||
this.highlightMinute(); |
||||
break; |
||||
case 'minute': |
||||
if (this.showSeconds) { |
||||
this.highlightSecond(); |
||||
} else if (this.showMeridian){ |
||||
this.highlightMeridian(); |
||||
} else { |
||||
this.highlightHour(); |
||||
} |
||||
break; |
||||
case 'second': |
||||
if (this.showMeridian) { |
||||
this.highlightMeridian(); |
||||
} else { |
||||
this.highlightHour(); |
||||
} |
||||
break; |
||||
case 'meridian': |
||||
this.highlightHour(); |
||||
break; |
||||
} |
||||
}, |
||||
|
||||
highlightPrevUnit: function() { |
||||
switch (this.highlightedUnit) { |
||||
case 'hour': |
||||
this.highlightMeridian(); |
||||
break; |
||||
case 'minute': |
||||
this.highlightHour(); |
||||
break; |
||||
case 'second': |
||||
this.highlightMinute(); |
||||
break; |
||||
case 'meridian': |
||||
if (this.showSeconds) { |
||||
this.highlightSecond(); |
||||
} else { |
||||
this.highlightMinute(); |
||||
} |
||||
break; |
||||
} |
||||
}, |
||||
|
||||
highlightHour: function() { |
||||
var $element = this.$element.get(0); |
||||
|
||||
this.highlightedUnit = 'hour'; |
||||
|
||||
if ($element.setSelectionRange) { |
||||
setTimeout(function() { |
||||
$element.setSelectionRange(0,2); |
||||
}, 0); |
||||
} |
||||
}, |
||||
|
||||
highlightMinute: function() { |
||||
var $element = this.$element.get(0); |
||||
|
||||
this.highlightedUnit = 'minute'; |
||||
|
||||
if ($element.setSelectionRange) { |
||||
setTimeout(function() { |
||||
$element.setSelectionRange(3,5); |
||||
}, 0); |
||||
} |
||||
}, |
||||
|
||||
highlightSecond: function() { |
||||
var $element = this.$element.get(0); |
||||
|
||||
this.highlightedUnit = 'second'; |
||||
|
||||
if ($element.setSelectionRange) { |
||||
setTimeout(function() { |
||||
$element.setSelectionRange(6,8); |
||||
}, 0); |
||||
} |
||||
}, |
||||
|
||||
highlightMeridian: function() { |
||||
var $element = this.$element.get(0); |
||||
|
||||
this.highlightedUnit = 'meridian'; |
||||
|
||||
if ($element.setSelectionRange) { |
||||
if (this.showSeconds) { |
||||
setTimeout(function() { |
||||
$element.setSelectionRange(9,11); |
||||
}, 0); |
||||
} else { |
||||
setTimeout(function() { |
||||
$element.setSelectionRange(6,8); |
||||
}, 0); |
||||
} |
||||
} |
||||
}, |
||||
|
||||
incrementHour: function() { |
||||
if (this.showMeridian) { |
||||
if (this.hour === 11) { |
||||
this.hour++; |
||||
return this.toggleMeridian(); |
||||
} else if (this.hour === 12) { |
||||
this.hour = 0; |
||||
} |
||||
} |
||||
if (this.hour === 23) { |
||||
this.hour = 0; |
||||
|
||||
return; |
||||
} |
||||
this.hour++; |
||||
this.update(); |
||||
}, |
||||
|
||||
incrementMinute: function(step) { |
||||
var newVal; |
||||
|
||||
if (step) { |
||||
newVal = this.minute + step; |
||||
} else { |
||||
newVal = this.minute + this.minuteStep - (this.minute % this.minuteStep); |
||||
} |
||||
|
||||
if (newVal > 59) { |
||||
this.incrementHour(); |
||||
this.minute = newVal - 60; |
||||
} else { |
||||
this.minute = newVal; |
||||
} |
||||
this.update(); |
||||
}, |
||||
|
||||
incrementSecond: function() { |
||||
var newVal = this.second + this.secondStep - (this.second % this.secondStep); |
||||
|
||||
if (newVal > 59) { |
||||
this.incrementMinute(true); |
||||
this.second = newVal - 60; |
||||
} else { |
||||
this.second = newVal; |
||||
} |
||||
this.update(); |
||||
}, |
||||
|
||||
remove: function() { |
||||
$('document').off('.timepicker'); |
||||
if (this.$widget) { |
||||
this.$widget.remove(); |
||||
} |
||||
delete this.$element.data().timepicker; |
||||
}, |
||||
|
||||
setDefaultTime: function(defaultTime){ |
||||
if (!this.$element.val()) { |
||||
if (defaultTime === 'current') { |
||||
var dTime = new Date(), |
||||
hours = dTime.getHours(), |
||||
minutes = Math.floor(dTime.getMinutes() / this.minuteStep) * this.minuteStep, |
||||
seconds = Math.floor(dTime.getSeconds() / this.secondStep) * this.secondStep, |
||||
meridian = 'AM'; |
||||
|
||||
if (this.showMeridian) { |
||||
if (hours === 0) { |
||||
hours = 12; |
||||
} else if (hours >= 12) { |
||||
if (hours > 12) { |
||||
hours = hours - 12; |
||||
} |
||||
meridian = 'PM'; |
||||
} else { |
||||
meridian = 'AM'; |
||||
} |
||||
} |
||||
|
||||
this.hour = hours; |
||||
this.minute = minutes; |
||||
this.second = seconds; |
||||
this.meridian = meridian; |
||||
|
||||
this.update(); |
||||
|
||||
} else if (defaultTime === false) { |
||||
this.hour = 0; |
||||
this.minute = 0; |
||||
this.second = 0; |
||||
this.meridian = 'AM'; |
||||
} else { |
||||
this.setTime(defaultTime); |
||||
} |
||||
} else { |
||||
this.updateFromElementVal(); |
||||
} |
||||
}, |
||||
|
||||
setTime: function(time) { |
||||
var arr, |
||||
timeArray; |
||||
|
||||
if (this.showMeridian) { |
||||
arr = time.split(' '); |
||||
timeArray = arr[0].split(':'); |
||||
this.meridian = arr[1]; |
||||
} else { |
||||
timeArray = time.split(':'); |
||||
} |
||||
|
||||
this.hour = parseInt(timeArray[0], 10); |
||||
this.minute = parseInt(timeArray[1], 10); |
||||
this.second = parseInt(timeArray[2], 10); |
||||
|
||||
if (isNaN(this.hour)) { |
||||
this.hour = 0; |
||||
} |
||||
if (isNaN(this.minute)) { |
||||
this.minute = 0; |
||||
} |
||||
|
||||
if (this.showMeridian) { |
||||
if (this.hour > 12) { |
||||
this.hour = 12; |
||||
} else if (this.hour < 1) { |
||||
this.hour = 12; |
||||
} |
||||
|
||||
if (this.meridian === 'am' || this.meridian === 'a') { |
||||
this.meridian = 'AM'; |
||||
} else if (this.meridian === 'pm' || this.meridian === 'p') { |
||||
this.meridian = 'PM'; |
||||
} |
||||
|
||||
if (this.meridian !== 'AM' && this.meridian !== 'PM') { |
||||
this.meridian = 'AM'; |
||||
} |
||||
} else { |
||||
if (this.hour >= 24) { |
||||
this.hour = 23; |
||||
} else if (this.hour < 0) { |
||||
this.hour = 0; |
||||
} |
||||
} |
||||
|
||||
if (this.minute < 0) { |
||||
this.minute = 0; |
||||
} else if (this.minute >= 60) { |
||||
this.minute = 59; |
||||
} |
||||
|
||||
if (this.showSeconds) { |
||||
if (isNaN(this.second)) { |
||||
this.second = 0; |
||||
} else if (this.second < 0) { |
||||
this.second = 0; |
||||
} else if (this.second >= 60) { |
||||
this.second = 59; |
||||
} |
||||
} |
||||
|
||||
this.update(); |
||||
}, |
||||
|
||||
showWidget: function() { |
||||
if (this.isOpen) { |
||||
return; |
||||
} |
||||
|
||||
if (this.$element.is(':disabled')) { |
||||
return; |
||||
} |
||||
|
||||
var self = this; |
||||
$(document).on('mousedown.timepicker', function (e) { |
||||
// Clicked outside the timepicker, hide it
|
||||
if ($(e.target).closest('.bootstrap-timepicker-widget').length === 0) { |
||||
self.hideWidget(); |
||||
} |
||||
}); |
||||
|
||||
this.$element.trigger({ |
||||
'type': 'show.timepicker', |
||||
'time': { |
||||
'value': this.getTime(), |
||||
'hours': this.hour, |
||||
'minutes': this.minute, |
||||
'seconds': this.second, |
||||
'meridian': this.meridian |
||||
} |
||||
}); |
||||
|
||||
if (this.disableFocus) { |
||||
this.$element.blur(); |
||||
} |
||||
|
||||
this.updateFromElementVal(); |
||||
|
||||
if (this.template === 'modal') { |
||||
this.$widget.modal('show').on('hidden', $.proxy(this.hideWidget, this)); |
||||
} else { |
||||
if (this.isOpen === false) { |
||||
this.$widget.addClass('open'); |
||||
} |
||||
} |
||||
|
||||
this.isOpen = true; |
||||
}, |
||||
|
||||
toggleMeridian: function() { |
||||
this.meridian = this.meridian === 'AM' ? 'PM' : 'AM'; |
||||
this.update(); |
||||
}, |
||||
|
||||
update: function() { |
||||
this.$element.trigger({ |
||||
'type': 'changeTime.timepicker', |
||||
'time': { |
||||
'value': this.getTime(), |
||||
'hours': this.hour, |
||||
'minutes': this.minute, |
||||
'seconds': this.second, |
||||
'meridian': this.meridian |
||||
} |
||||
}); |
||||
|
||||
this.updateElement(); |
||||
this.updateWidget(); |
||||
}, |
||||
|
||||
updateElement: function() { |
||||
this.$element.val(this.getTime()).change(); |
||||
}, |
||||
|
||||
updateFromElementVal: function() { |
||||
var val = this.$element.val(); |
||||
|
||||
if (val) { |
||||
this.setTime(val); |
||||
} |
||||
}, |
||||
|
||||
updateWidget: function() { |
||||
if (this.$widget === false) { |
||||
return; |
||||
} |
||||
|
||||
var hour = this.hour < 10 ? '0' + this.hour : this.hour, |
||||
minute = this.minute < 10 ? '0' + this.minute : this.minute, |
||||
second = this.second < 10 ? '0' + this.second : this.second; |
||||
|
||||
if (this.showInputs) { |
||||
this.$widget.find('input.bootstrap-timepicker-hour').val(hour); |
||||
this.$widget.find('input.bootstrap-timepicker-minute').val(minute); |
||||
|
||||
if (this.showSeconds) { |
||||
this.$widget.find('input.bootstrap-timepicker-second').val(second); |
||||
} |
||||
if (this.showMeridian) { |
||||
this.$widget.find('input.bootstrap-timepicker-meridian').val(this.meridian); |
||||
} |
||||
} else { |
||||
this.$widget.find('span.bootstrap-timepicker-hour').text(hour); |
||||
this.$widget.find('span.bootstrap-timepicker-minute').text(minute); |
||||
|
||||
if (this.showSeconds) { |
||||
this.$widget.find('span.bootstrap-timepicker-second').text(second); |
||||
} |
||||
if (this.showMeridian) { |
||||
this.$widget.find('span.bootstrap-timepicker-meridian').text(this.meridian); |
||||
} |
||||
} |
||||
}, |
||||
|
||||
updateFromWidgetInputs: function() { |
||||
if (this.$widget === false) { |
||||
return; |
||||
} |
||||
var time = $('input.bootstrap-timepicker-hour', this.$widget).val() + ':' + |
||||
$('input.bootstrap-timepicker-minute', this.$widget).val() + |
||||
(this.showSeconds ? ':' + $('input.bootstrap-timepicker-second', this.$widget).val() : '') + |
||||
(this.showMeridian ? ' ' + $('input.bootstrap-timepicker-meridian', this.$widget).val() : ''); |
||||
|
||||
this.setTime(time); |
||||
}, |
||||
|
||||
widgetClick: function(e) { |
||||
e.stopPropagation(); |
||||
e.preventDefault(); |
||||
|
||||
var action = $(e.target).closest('a').data('action'); |
||||
if (action) { |
||||
this[action](); |
||||
} |
||||
}, |
||||
|
||||
widgetKeydown: function(e) { |
||||
var $input = $(e.target).closest('input'), |
||||
name = $input.attr('name'); |
||||
|
||||
switch (e.keyCode) { |
||||
case 9: //tab
|
||||
if (this.showMeridian) { |
||||
if (name === 'meridian') { |
||||
return this.hideWidget(); |
||||
} |
||||
} else { |
||||
if (this.showSeconds) { |
||||
if (name === 'second') { |
||||
return this.hideWidget(); |
||||
} |
||||
} else { |
||||
if (name === 'minute') { |
||||
return this.hideWidget(); |
||||
} |
||||
} |
||||
} |
||||
|
||||
this.updateFromWidgetInputs(); |
||||
break; |
||||
case 27: // escape
|
||||
this.hideWidget(); |
||||
break; |
||||
case 38: // up arrow
|
||||
e.preventDefault(); |
||||
switch (name) { |
||||
case 'hour': |
||||
this.incrementHour(); |
||||
break; |
||||
case 'minute': |
||||
this.incrementMinute(); |
||||
break; |
||||
case 'second': |
||||
this.incrementSecond(); |
||||
break; |
||||
case 'meridian': |
||||
this.toggleMeridian(); |
||||
break; |
||||
} |
||||
break; |
||||
case 40: // down arrow
|
||||
e.preventDefault(); |
||||
switch (name) { |
||||
case 'hour': |
||||
this.decrementHour(); |
||||
break; |
||||
case 'minute': |
||||
this.decrementMinute(); |
||||
break; |
||||
case 'second': |
||||
this.decrementSecond(); |
||||
break; |
||||
case 'meridian': |
||||
this.toggleMeridian(); |
||||
break; |
||||
} |
||||
break; |
||||
} |
||||
} |
||||
}; |
||||
|
||||
|
||||
//TIMEPICKER PLUGIN DEFINITION
|
||||
$.fn.timepicker = function(option) { |
||||
var args = Array.apply(null, arguments); |
||||
args.shift(); |
||||
return this.each(function() { |
||||
var $this = $(this), |
||||
data = $this.data('timepicker'), |
||||
options = typeof option === 'object' && option; |
||||
|
||||
if (!data) { |
||||
$this.data('timepicker', (data = new Timepicker(this, $.extend({}, $.fn.timepicker.defaults, options, $(this).data())))); |
||||
} |
||||
|
||||
if (typeof option === 'string') { |
||||
data[option].apply(data, args); |
||||
} |
||||
}); |
||||
}; |
||||
|
||||
$.fn.timepicker.defaults = { |
||||
defaultTime: 'current', |
||||
disableFocus: false, |
||||
isOpen: false, |
||||
minuteStep: 15, |
||||
modalBackdrop: false, |
||||
secondStep: 15, |
||||
showSeconds: false, |
||||
showInputs: true, |
||||
showMeridian: true, |
||||
template: 'dropdown', |
||||
appendWidgetTo: '.bootstrap-timepicker' |
||||
}; |
||||
|
||||
$.fn.timepicker.Constructor = Timepicker; |
||||
|
||||
})(jQuery, window, document); |
||||
Loading…
Reference in new issue