/* * Author: Andreas Loeber * Plugin: jquery-clock-timerpicker * Version: 2.6.2 */ (function($) { $.fn.clockTimePicker = function(options, _value) { if (typeof options == 'string' && (options == 'value' || options == 'val') && !_value) return $(this).val(); /************************************************************************************************ DEFAULT SETTINGS (CAN BE OVERRIDDEN WITH THE OPTIONS ARGUMENT) ************************************************************************************************/ var settings = $.extend(true, { afternoonHoursInOuterCircle: false, alwaysSelectHoursFirst: false, autosize: false, contextmenu: false, colors: { buttonTextColor: '#0797FF', clockFaceColor: '#EEEEEE', clockInnerCircleTextColor: '#888888', clockInnerCircleUnselectableTextColor: '#CCCCCC', clockOuterCircleTextColor: '#000000', clockOuterCircleUnselectableTextColor: '#CCCCCC', hoverCircleColor: '#DDDDDD', popupBackgroundColor: '#FFFFFF', popupHeaderBackgroundColor: '#0797FF', popupHeaderTextColor: '#FFFFFF', selectorColor: '#0797FF', selectorNumberColor: '#FFFFFF', signButtonColor: '#FFFFFF', signButtonBackgroundColor: '#0797FF' }, duration: false, durationNegative: false, fonts: { fontFamily: 'Arial', clockOuterCircleFontSize: 14, clockInnerCircleFontSize: 12, buttonFontSize: 20 }, hideUnselectableNumbers: false, i18n: { okButton: 'OK', cancelButton: 'Cancel' }, maximum: '23:59', minimum: '-23:59', modeSwitchSpeed: 500, onlyShowClockOnMobile: false, onAdjust: function(newVal, oldVal) { /*console.log('Value adjusted from ' + oldVal + ' to ' + newVal + '.');*/ }, onChange: function(newVal, oldVal) { /*console.log('Value changed from ' + oldVal + ' to ' + newVal + '.');*/ }, onClose: function() { }, onModeSwitch: function() { }, onOpen: function() { }, popupWidthOnDesktop: 200, precision: 1, required: false, separator: ':', useDurationPlusSign: false, vibrate: true }, typeof options == 'object' ? options : {}); /************************************************************************************************ DYNAMICALLY INSERT CSS CODE FOR SELECTION ON MOBILE ************************************************************************************************/ var css = '.clock-timepicker input { caret-color: white; }'; if (isMobile()) css += ' .clock-timepicker input::selection { background:rgba(255,255,255,0.6); } .clock-timepicker input::-moz-selection { background:rgba(255,255,255,0.6); }'; function cssAlreadyInitialized() { var cssFound = false; $('head style').each(function() { if ($(this).text() == css) { cssFound = true; return false; } }); if (cssFound) return true; else return false; } if (!cssAlreadyInitialized()) { var style = document.createElement('style'); style.type = 'text/css'; if (style.styleSheet) style.styleSheet.cssText = css; else style.appendChild(document.createTextNode(css)); (document.head || document.getElementsByTagName('head')[0]).appendChild(style); } //for each selected element return this.each(function() { var element = $(this); //Adjust settings by data attributes var dataOptions = {}, _data = element.data(); for (var dataOption in _data) { if (settings.hasOwnProperty(dataOption)) { settings[dataOption] = _data[dataOption]; } } //Validate settings validateSettings(); //VIBRATION API if (!('vibrate' in navigator)) settings.vibrate = false; if (typeof options == 'string') { if (!$(this).parent().hasClass('clock-timepicker')) console.log('%c[jquery-clock-timepicker] Before calling a function, please initialize the ClockTimePicker!', 'color:red'); else { options = options.toLowerCase(); if (options == 'dispose') disposeTimePicker($(this)); else if (options == 'value' || options == 'val') { $(this).val(formatTime(_value)); var mobileInput = $(this).parent().find('.clock-timepicker-mobile-input'); if (mobileInput.length > 0) mobileInput.val(formatTime(_value)); } else if (options == 'show') { $(this).parent().find('canvas:first').trigger('keydown'); } else if (options == 'hide') { $(this).parent().find('.clock-timepicker-popup').css('display', 'none'); $(this).blur(); } else console.log('%c[jquery-clock-timepicker] Invalid option passed to clockTimePicker: ' + options, 'color:red'); } return; } else { if ($(this).parent().hasClass('clock-timepicker')) disposeTimePicker($(this)); } /************************************************************************************************ INITIALIZE VARIABLES ************************************************************************************************/ element.val(formatTime(element.val())); if (isMobile()) element.prop('readonly', true); var oldValue = element.val(); var enteredDigits = ''; var selectionMode = 'HOUR'; //2 modes: 'HOUR' or 'MINUTE' var isDragging = false; var touchSignButton = false; var popupWidth = isMobile() ? $(document).width() - 80 : settings.popupWidthOnDesktop; var canvasSize = popupWidth - (isMobile() ? 50 : 20); var clockRadius = parseInt(canvasSize / 2); var clockCenterX = parseInt(canvasSize / 2); var clockCenterY = parseInt(canvasSize / 2); var clockOuterRadius = clockRadius - 16; var clockInnerRadius = clockOuterRadius - 29; var isTimeChanged = false; var lastMouseWheelTimestamp = 0; /************************************************************************************************ INITIALIZE A NEW PARENT ELEMENT THAT ENCAPSULATES THE INPUT FIELD ************************************************************************************************/ element.wrap('