Sreejith P
7 years ago
21 changed files with 1224 additions and 0 deletions
@ -0,0 +1,35 @@ |
|||||
|
================= |
||||
|
Time Picker Field |
||||
|
================= |
||||
|
|
||||
|
Time picker for fields, using Wickedpicker. |
||||
|
|
||||
|
Installation & Configuration |
||||
|
============================ |
||||
|
|
||||
|
After installing the module, you can use character fields for reading time input with the help of a time picker. |
||||
|
When you define the fields in xml, use 'widget="timepicker"' for those fields which you need to use as time fields. |
||||
|
|
||||
|
|
||||
|
Known issues / Roadmap |
||||
|
====================== |
||||
|
|
||||
|
* ... |
||||
|
|
||||
|
Bug Tracker |
||||
|
=========== |
||||
|
|
||||
|
Contact odoo@cybrosys.com |
||||
|
|
||||
|
|
||||
|
Contributors |
||||
|
------------ |
||||
|
|
||||
|
* Linto CT <linto@cybrosys.in> |
||||
|
|
||||
|
Maintainer |
||||
|
---------- |
||||
|
|
||||
|
This module is maintained by Cybrosys Technologies. |
||||
|
|
||||
|
For support and more information, please visit https://www.cybrosys.com. |
||||
@ -0,0 +1,23 @@ |
|||||
|
# -*- coding: utf-8 -*- |
||||
|
|
||||
|
############################################################################## |
||||
|
# |
||||
|
# Cybrosys Technologies Pvt. Ltd. |
||||
|
# Copyright (C) 2018-TODAY Cybrosys Technologies(<https://www.cybrosys.com>). |
||||
|
# Author: LINTO C T(<https://www.cybrosys.com>) |
||||
|
# you can modify it under the terms of the GNU LESSER |
||||
|
# GENERAL PUBLIC LICENSE (LGPL v3), Version 3. |
||||
|
# |
||||
|
# It is forbidden to publish, distribute, sublicense, or sell copies |
||||
|
# of the Software or modified copies of the Software. |
||||
|
# |
||||
|
# This program is distributed in the hope that it will be useful, |
||||
|
# but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||
|
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||
|
# GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details. |
||||
|
# |
||||
|
# You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE |
||||
|
# GENERAL PUBLIC LICENSE (LGPL v3) along with this program. |
||||
|
# If not, see <http://www.gnu.org/licenses/>. |
||||
|
# |
||||
|
############################################################################## |
||||
@ -0,0 +1,43 @@ |
|||||
|
# -*- coding: utf-8 -*- |
||||
|
|
||||
|
############################################################################## |
||||
|
# |
||||
|
# Cybrosys Technologies Pvt. Ltd. |
||||
|
# Copyright (C) 2018-TODAY Cybrosys Technologies(<https://www.cybrosys.com>). |
||||
|
# Author: LINTO C T(<https://www.cybrosys.com>) |
||||
|
# you can modify it under the terms of the GNU LESSER |
||||
|
# GENERAL PUBLIC LICENSE (LGPL v3), Version 3. |
||||
|
# |
||||
|
# It is forbidden to publish, distribute, sublicense, or sell copies |
||||
|
# of the Software or modified copies of the Software. |
||||
|
# |
||||
|
# This program is distributed in the hope that it will be useful, |
||||
|
# but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||
|
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||
|
# GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details. |
||||
|
# |
||||
|
# You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE |
||||
|
# GENERAL PUBLIC LICENSE (LGPL v3) along with this program. |
||||
|
# If not, see <http://www.gnu.org/licenses/>. |
||||
|
# |
||||
|
############################################################################## |
||||
|
{ |
||||
|
'name': 'Time Picker Field', |
||||
|
'version': '11.0.1.0.0', |
||||
|
'summary': 'Time Picker Using Wickedpicker', |
||||
|
'category': 'Tools', |
||||
|
'author': 'Cybrosys Techno Solutions', |
||||
|
'company': 'Cybrosys Techno Solutions', |
||||
|
'maintainer': 'Cybrosys Techno Solutions', |
||||
|
'depends': ['base'], |
||||
|
'website': 'https://www.cybrosys.com/', |
||||
|
'data': [ |
||||
|
'views/templates.xml', |
||||
|
], |
||||
|
'qweb': ["static/src/xml/*.xml"], |
||||
|
'images': ['static/description/banner.jpg'], |
||||
|
'license': 'LGPL-3', |
||||
|
'installable': True, |
||||
|
'auto_install': False, |
||||
|
'application': False, |
||||
|
} |
||||
|
After Width: | Height: | Size: 70 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 14 KiB |
@ -0,0 +1,82 @@ |
|||||
|
<section class="oe_container"> |
||||
|
<div class="oe_row oe_spaced"> |
||||
|
<h2 class="oe_slogan">Time Picker Field</h2> |
||||
|
<h3 class="oe_slogan">Time Picker Widget For Fields</h3> |
||||
|
<h4 class="oe_slogan"><a href="https://www.cybrosys.com">Cybrosys Technologies</a> </h4> |
||||
|
</div> |
||||
|
<div class="oe_row oe_spaced" style="padding-left:65px;"> |
||||
|
<h4>Features:</h4> |
||||
|
<div> |
||||
|
<span style="color:green;"> ☑ </span> Time picker for character fields.<br/> |
||||
|
<span style="color:green;"> ☑ </span> Time picker in 24 hour format.<br/> |
||||
|
<br/> |
||||
|
</div> |
||||
|
</div> |
||||
|
</section> |
||||
|
|
||||
|
<section class="oe_container oe_dark"> |
||||
|
<div class="oe_row oe_spaced"> |
||||
|
<div class="oe_picture"> |
||||
|
<h3 class="oe_slogan">Overview</h3> |
||||
|
<p class="oe_mt32 text-justify" > |
||||
|
Time picker widget that can be used with character type fields in Odoo using the jQuery |
||||
|
plugin 'Wickedpicker'. |
||||
|
</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</section> |
||||
|
|
||||
|
<section class="oe_container"> |
||||
|
<div class="oe_row oe_spaced"> |
||||
|
<div style="text-align: center"> |
||||
|
<p> |
||||
|
<h4>Configuration</h4> |
||||
|
<p> |
||||
|
</div> |
||||
|
<div class="oe_picture" style="text-align: center"> |
||||
|
<p class="oe_mt32 text-justify" > |
||||
|
After installation, go to the field definition in the view and add "widget='timepicker'". |
||||
|
<br /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</section> |
||||
|
|
||||
|
<section class="oe_container oe_dark"> |
||||
|
<div class="oe_row oe_spaced"> |
||||
|
<div class="oe_picture" style="text-align: center"> |
||||
|
<p class="oe_mt32 text-justify" > |
||||
|
Once the widget is linked with the field, you will see a picker for time selection. |
||||
|
Note that the picker will be in 24 hours format. |
||||
|
</p> |
||||
|
<div class="oe_demo oe_picture oe_screenshot"> |
||||
|
<img style="width: 58%;border:10px solid white;" src="picker.png"> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</section> |
||||
|
|
||||
|
<section class="oe_container"> |
||||
|
<h2 class="oe_slogan" style="margin-top:20px;" >Need Any Help?</h2> |
||||
|
<div class="oe_slogan" style="margin-top:10px !important;"> |
||||
|
<div> |
||||
|
<a class="btn btn-primary btn-lg mt8" |
||||
|
style="color: #FFFFFF !important;border-radius: 0;" href="https://www.cybrosys.com"><i |
||||
|
class="fa fa-envelope"></i> Email </a> <a |
||||
|
class="btn btn-primary btn-lg mt8" style="color: #FFFFFF !important;border-radius: 0;" |
||||
|
href="https://www.cybrosys.com/contact/"><i |
||||
|
class="fa fa-phone"></i> Contact Us </a> <a |
||||
|
class="btn btn-primary btn-lg mt8" style="color: #FFFFFF !important;border-radius: 0;" |
||||
|
href="https://www.cybrosys.com/odoo-customization-and-installation/"><i |
||||
|
class="fa fa-check-square"></i> Request Customization </a> |
||||
|
</div> |
||||
|
<br> |
||||
|
<img src="cybro_logo.png" style="width: 190px; margin-bottom: 20px;" class="center-block"> |
||||
|
<div> |
||||
|
<a href="https://twitter.com/cybrosys" target="_blank"><i class="fa fa-2x fa-twitter" style="color:white;background: #00a0d1;width:35px;"></i></a></td> |
||||
|
<a href="https://www.linkedin.com/company/cybrosys-technologies-pvt-ltd" target="_blank"><i class="fa fa-2x fa-linkedin" style="color:white;background: #31a3d6;width:35px;padding-left: 3px;"></i></a></td> |
||||
|
<a href="https://www.facebook.com/cybrosystechnologies" target="_blank"><i class="fa fa-2x fa-facebook" style="color:white;background: #3b5998;width:35px;padding-left: 8px;"></i></a></td> |
||||
|
<a href="https://plus.google.com/106641282743045431892/about" target="_blank"><i class="fa fa-2x fa-google-plus" style="color:white;background: #c53c2c;width:35px;padding-left: 3px;"></i></a></td> |
||||
|
<a href="https://in.pinterest.com/cybrosys" target="_blank"><i class="fa fa-2x fa-pinterest" style="color:white;background: #ac0f18;width:35px;padding-left: 3px;"></i></a></td> |
||||
|
</div> |
||||
|
</div> |
||||
|
</section> |
||||
|
After Width: | Height: | Size: 5.3 KiB |
@ -0,0 +1,140 @@ |
|||||
|
odoo.define('field_timepicker.timepicker', function(require) { |
||||
|
"use strict"; |
||||
|
|
||||
|
var field_registry = require('web.field_registry'); |
||||
|
var Field = field_registry.get('char'); |
||||
|
|
||||
|
var global_show_time = null; |
||||
|
|
||||
|
var FieldTimePicker = Field.extend({ |
||||
|
|
||||
|
template: 'FieldTimePicker', |
||||
|
widget_class: 'oe_form_field_time', |
||||
|
|
||||
|
_renderReadonly: function () { |
||||
|
var show_value = this._formatValue(this.value); |
||||
|
this.$el.text(show_value); |
||||
|
global_show_time = show_value; |
||||
|
}, |
||||
|
|
||||
|
_getValue: function () { |
||||
|
var $input = this.$el.find('input'); |
||||
|
return $input.val(); |
||||
|
}, |
||||
|
|
||||
|
_renderEdit: function () { |
||||
|
var $input = this.$el.find('input'); |
||||
|
var options = { |
||||
|
twentyFour: true, |
||||
|
title: 'Timepicker' |
||||
|
}; |
||||
|
if(global_show_time){ |
||||
|
options['now'] = global_show_time; |
||||
|
} |
||||
|
$input.wickedpicker(options); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
field_registry.add('timepicker', FieldTimePicker); |
||||
|
|
||||
|
return { |
||||
|
FieldTimePicker: FieldTimePicker |
||||
|
}; |
||||
|
|
||||
|
}); |
||||
|
|
||||
|
odoo.define('field_timepicker.time_picker_add_exception', function(require){ |
||||
|
"use_strict"; |
||||
|
|
||||
|
var BasicModel = require('web.BasicModel'); |
||||
|
|
||||
|
BasicModel.include({ |
||||
|
_applyChange: function (recordID, changes, options) { |
||||
|
var self = this; |
||||
|
var record = this.localData[recordID]; |
||||
|
var field; |
||||
|
var defs = []; |
||||
|
options = options || {}; |
||||
|
record._changes = record._changes || {}; |
||||
|
if (!options.doNotSetDirty) { |
||||
|
record._isDirty = true; |
||||
|
} |
||||
|
var initialData = {}; |
||||
|
this._visitChildren(record, function (elem) { |
||||
|
initialData[elem.id] = $.extend(true, {}, _.pick(elem, 'data', '_changes')); |
||||
|
}); |
||||
|
|
||||
|
// apply changes to local data
|
||||
|
for (var fieldName in changes) { |
||||
|
field = record.fields[fieldName]; |
||||
|
if (field.type === 'one2many' || field.type === 'many2many') { |
||||
|
defs.push(this._applyX2ManyChange(record, fieldName, changes[fieldName], options.viewType)); |
||||
|
} else if (field.type === 'many2one' || field.type === 'reference') { |
||||
|
defs.push(this._applyX2OneChange(record, fieldName, changes[fieldName])); |
||||
|
} else { |
||||
|
record._changes[fieldName] = changes[fieldName]; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
if (options.notifyChange === false) { |
||||
|
return $.Deferred().resolve(_.keys(changes)); |
||||
|
} |
||||
|
|
||||
|
return $.when.apply($, defs).then(function () { |
||||
|
var onChangeFields = []; // the fields that have changed and that have an on_change
|
||||
|
for (var fieldName in changes) { |
||||
|
field = record.fields[fieldName]; |
||||
|
if (field.onChange) { |
||||
|
var isX2Many = field.type === 'one2many' || field.type === 'many2many'; |
||||
|
if (!isX2Many || (self._isX2ManyValid(record._changes[fieldName] || record.data[fieldName]))) { |
||||
|
onChangeFields.push(fieldName); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
var onchangeDef = $.Deferred(); |
||||
|
if (onChangeFields.length) { |
||||
|
self._performOnChange(record, onChangeFields, options.viewType) |
||||
|
.then(function (result) { |
||||
|
delete record._warning; |
||||
|
onchangeDef.resolve(_.keys(changes).concat(Object.keys(result && result.value || {}))); |
||||
|
}).fail(function () { |
||||
|
self._visitChildren(record, function (elem) { |
||||
|
_.extend(elem, initialData[elem.id]); |
||||
|
}); |
||||
|
onchangeDef.resolve({}); |
||||
|
}); |
||||
|
} else { |
||||
|
onchangeDef = $.Deferred().resolve(_.keys(changes)); |
||||
|
} |
||||
|
return onchangeDef.then(function (fieldNames) { |
||||
|
_.each(fieldNames, function (name) { |
||||
|
var excpet = {}; |
||||
|
if(record && record['fieldsInfo'] && record['fieldsInfo']['form'] && record['fieldsInfo']['form'][name]){ |
||||
|
var curr_el = record['fieldsInfo']['form'][name]; |
||||
|
if(curr_el['widget'] == 'timepicker'){ |
||||
|
excpet[name] = true; |
||||
|
} |
||||
|
} |
||||
|
if (record._changes && record._changes[name] === record.data[name]) { |
||||
|
delete record._changes[name]; |
||||
|
record._isDirty = !_.isEmpty(record._changes); |
||||
|
} |
||||
|
else if(record._changes && record._changes[name] != record.data[name]){ |
||||
|
if(excpet[name] && excpet[name] == true){ |
||||
|
//delete record._changes[name];
|
||||
|
fieldNames.splice( fieldNames.indexOf(name), 1 ); |
||||
|
record._isDirty = !_.isEmpty(fieldNames); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
return self._fetchSpecialData(record).then(function (fieldNames2) { |
||||
|
// Return the names of the fields that changed (onchange or
|
||||
|
// associated special data change)
|
||||
|
return _.union(fieldNames, fieldNames2); |
||||
|
}); |
||||
|
}); |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
}); |
||||
@ -0,0 +1,22 @@ |
|||||
|
<?xml version="1.0" encoding="UTF-8"?> |
||||
|
<templates id="timepicker"> |
||||
|
<t t-name="FieldTimePicker"> |
||||
|
|
||||
|
<span t-if="widget.mode !== 'readonly'"> |
||||
|
<div class="input-group timepicker-component"> |
||||
|
<input type="text" |
||||
|
t-att-id="widget.id_for_label" |
||||
|
t-att-tabindex="widget.attrs.tabindex" |
||||
|
t-att-autofocus="widget.attrs.autofocus" |
||||
|
t-att-placeholder="widget.attrs.placeholder" |
||||
|
t-att-maxlength="widget.field.size" |
||||
|
class="timepickerg form-control" |
||||
|
/> |
||||
|
<span class="input-group-addon" style="display:none;"><i></i></span> |
||||
|
</div> |
||||
|
|
||||
|
</span> |
||||
|
<span t-if="widget.mode === 'readonly'"/> |
||||
|
|
||||
|
</t> |
||||
|
</templates> |
||||
@ -0,0 +1,11 @@ |
|||||
|
.sass-cache |
||||
|
*.html |
||||
|
jquery-1.11.3.min.js |
||||
|
.idea |
||||
|
sass |
||||
|
jasmine |
||||
|
spec |
||||
|
node_modules |
||||
|
node_module/* |
||||
|
gulpfile.js |
||||
|
package.json |
||||
@ -0,0 +1,21 @@ |
|||||
|
The MIT License |
||||
|
|
||||
|
Copyright (c) 2015-2016 Eric Gagnon http://ericjgagnon.github.io/wickedpicker/ |
||||
|
|
||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy |
||||
|
of this software and associated documentation files (the "Software"), to deal |
||||
|
in the Software without restriction, including without limitation the rights |
||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
||||
|
copies of the Software, and to permit persons to whom the Software is |
||||
|
furnished to do so, subject to the following conditions: |
||||
|
|
||||
|
The above copyright notice and this permission notice shall be included in |
||||
|
all copies or substantial portions of the Software. |
||||
|
|
||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN |
||||
|
THE SOFTWARE. |
||||
@ -0,0 +1,79 @@ |
|||||
|
# Wickedpicker |
||||
|
|
||||
|
## wickedpicker.js - A simple jQuery timepicker |
||||
|
|
||||
|
## Requirements |
||||
|
|
||||
|
* [jQuery](http://jquery.com/download/) (>= 1.9) |
||||
|
|
||||
|
## Installation |
||||
|
```shell |
||||
|
$ bower install wickedpicker |
||||
|
``` |
||||
|
|
||||
|
## Usage |
||||
|
|
||||
|
#### In your HTML |
||||
|
```html |
||||
|
<body> |
||||
|
.... |
||||
|
<input type="text" name="timepicker" class="timepicker"/> |
||||
|
.... |
||||
|
<script type="text/javascript" src="jquery-1.11.3.min.js"></script> |
||||
|
<script type="text/javascript" src="wickedpicker.js"></script> |
||||
|
</body> |
||||
|
``` |
||||
|
|
||||
|
#### In your JavaScript file |
||||
|
```javascript |
||||
|
$('.timepicker').wickedpicker(); |
||||
|
``` |
||||
|
|
||||
|
#### Options |
||||
|
```javascript |
||||
|
var options = { |
||||
|
now: "12:35", //hh:mm 24 hour format only, defaults to current time |
||||
|
twentyFour: false, //Display 24 hour format, defaults to false |
||||
|
upArrow: 'wickedpicker__controls__control-up', //The up arrow class selector to use, for custom CSS |
||||
|
downArrow: 'wickedpicker__controls__control-down', //The down arrow class selector to use, for custom CSS |
||||
|
close: 'wickedpicker__close', //The close class selector to use, for custom CSS |
||||
|
hoverState: 'hover-state', //The hover state class to use, for custom CSS |
||||
|
title: 'Timepicker', //The Wickedpicker's title, |
||||
|
showSeconds: false, //Whether or not to show seconds, |
||||
|
timeSeparator: ' : ', // The string to put in between hours and minutes (and seconds) |
||||
|
secondsInterval: 1, //Change interval for seconds, defaults to 1, |
||||
|
minutesInterval: 1, //Change interval for minutes, defaults to 1 |
||||
|
beforeShow: null, //A function to be called before the Wickedpicker is shown |
||||
|
afterShow: null, //A function to be called after the Wickedpicker is closed/hidden |
||||
|
show: null, //A function to be called when the Wickedpicker is shown |
||||
|
clearable: false, //Make the picker's input clearable (has clickable "x") |
||||
|
}; |
||||
|
$('.timepicker').wickedpicker(options); |
||||
|
``` |
||||
|
|
||||
|
#### Methods |
||||
|
|
||||
|
'time' get the current time inside of the input element that has a wickedpicker attached to it. |
||||
|
```javascript |
||||
|
$('.timepicker').wickedpicker('time'); |
||||
|
``` |
||||
|
|
||||
|
If multiple input fields have the same class and instantiate a wickedpicker then pass the index of the timepicker |
||||
|
you'd like to select |
||||
|
```javascript |
||||
|
$('.timepicker').wickedpicker('time', 0); |
||||
|
``` |
||||
|
|
||||
|
#### Functionality |
||||
|
The Wickedpicker opens when the bound input is clicked, or focused on (try tabbing), and it can be closed by either |
||||
|
clicking the X, by clicking outside of it, or by pressing esc. The arrows icons increase or decrease their |
||||
|
associated time values or toggle the meridiem. The values can also be changed using the up and down keys when |
||||
|
focused on. To move to the next value just press the left or right arrow key. |
||||
|
|
||||
|
For more checkout |
||||
|
[Wickedpicker gh-pages](http://ericjgagnon.github.io/wickedpicker/) |
||||
|
|
||||
|
## License |
||||
|
|
||||
|
Copyright (c) 2015-2016 Eric Gagnon Licensed under the MIT license. |
||||
|
|
||||
@ -0,0 +1,29 @@ |
|||||
|
{ |
||||
|
"name": "wickedpicker", |
||||
|
"version": "0.0.4", |
||||
|
"description": "A simple jQuery timepicker plugin.", |
||||
|
"main": [ |
||||
|
"./dist/wickedpicker.min.js", |
||||
|
"./dist/wickedpicker.min.css" |
||||
|
], |
||||
|
"authors": [ |
||||
|
"Eric Gagnon", |
||||
|
"Ruben Seyferth" |
||||
|
], |
||||
|
"moduleType": "globals", |
||||
|
"license": "MIT", |
||||
|
"keywords": [ |
||||
|
"jQuery", |
||||
|
"timepicker", |
||||
|
"wickedpicker" |
||||
|
], |
||||
|
"homepage": "http://ericjgagnon.github.io/wickedpicker/", |
||||
|
"repository": { |
||||
|
"type": "git", |
||||
|
"url": "git://github.com/ericjgagnon/wickedpicker.git" |
||||
|
}, |
||||
|
"dependencies": { |
||||
|
"jquery": ">= 1.9.0" |
||||
|
}, |
||||
|
"private": false |
||||
|
} |
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
Binary file not shown.
@ -0,0 +1,624 @@ |
|||||
|
/** |
||||
|
* wickedpicker v0.4.1 - A simple jQuery timepicker. |
||||
|
* Copyright (c) 2015-2016 Eric Gagnon - http://github.com/wickedRidge/wickedpicker
|
||||
|
* License: MIT |
||||
|
*/ |
||||
|
|
||||
|
(function ($, window, document) { |
||||
|
|
||||
|
"use strict"; |
||||
|
|
||||
|
if (typeof String.prototype.endsWith != 'function') { |
||||
|
/* |
||||
|
* Checks if this string end ends with another string |
||||
|
* |
||||
|
* @param {string} the string to be checked |
||||
|
* |
||||
|
* @return {bool} |
||||
|
*/ |
||||
|
String.prototype.endsWith = function (string) { |
||||
|
return string.length > 0 && this.substring(this.length - string.length, this.length) === string; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* |
||||
|
* Returns if the user agent is mobile |
||||
|
* |
||||
|
* @return {bool} |
||||
|
*/ |
||||
|
var isMobile = function () { |
||||
|
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); |
||||
|
}; |
||||
|
|
||||
|
var today = new Date(); |
||||
|
|
||||
|
var pluginName = "wickedpicker", |
||||
|
defaults = { |
||||
|
now: today.getHours() + ':' + today.getMinutes(), |
||||
|
twentyFour: false, |
||||
|
upArrow: 'wickedpicker__controls__control-up', |
||||
|
downArrow: 'wickedpicker__controls__control-down', |
||||
|
close: 'wickedpicker__close', |
||||
|
hoverState: 'hover-state', |
||||
|
title: 'Timepicker', |
||||
|
showSeconds: false, |
||||
|
timeSeparator: ' : ', |
||||
|
secondsInterval: 1, |
||||
|
minutesInterval: 1, |
||||
|
beforeShow: null, |
||||
|
afterShow: null, |
||||
|
show: null, |
||||
|
clearable: false, |
||||
|
closeOnClickOutside: true, |
||||
|
onClickOutside: function() {}, |
||||
|
}; |
||||
|
|
||||
|
/* |
||||
|
* @param {object} The input object the timepicker is attached to. |
||||
|
* @param {object} The object containing options |
||||
|
*/ |
||||
|
function Wickedpicker(element, options) { |
||||
|
this.element = $(element); |
||||
|
this.options = $.extend({}, defaults, options); |
||||
|
|
||||
|
this.element.addClass('hasWickedpicker'); |
||||
|
this.element.attr('onkeypress', 'return false;'); |
||||
|
this.element.attr('aria-showingpicker', 'false'); |
||||
|
this.createPicker(); |
||||
|
this.timepicker = $('.wickedpicker'); |
||||
|
this.up = $('.' + this.options.upArrow.split(/\s+/).join('.')); |
||||
|
this.down = $('.' + this.options.downArrow.split(/\s+/).join('.')); |
||||
|
this.separator = $('.wickedpicker__controls__control--separator'); |
||||
|
this.hoursElem = $('.wickedpicker__controls__control--hours'); |
||||
|
this.minutesElem = $('.wickedpicker__controls__control--minutes'); |
||||
|
this.secondsElem = $('.wickedpicker__controls__control--seconds'); |
||||
|
this.meridiemElem = $('.wickedpicker__controls__control--meridiem'); |
||||
|
this.close = $('.' + this.options.close.split(/\s+/).join('.')); |
||||
|
|
||||
|
//Create a new Date object based on the default or passing in now value
|
||||
|
var time = this.timeArrayFromString(this.options.now); |
||||
|
this.options.now = new Date(today.getFullYear(), today.getMonth(), today.getDate(), time[0], time[1], time[2]); |
||||
|
this.selectedHour = this.parseHours(this.options.now.getHours()); |
||||
|
this.selectedMin = this.parseSecMin(this.options.now.getMinutes()); |
||||
|
this.selectedSec = this.parseSecMin(this.options.now.getSeconds()); |
||||
|
this.selectedMeridiem = this.parseMeridiem(this.options.now.getHours()); |
||||
|
this.setHoverState(); |
||||
|
this.attach(element); |
||||
|
this.setText(element); |
||||
|
} |
||||
|
|
||||
|
$.extend(Wickedpicker.prototype, { |
||||
|
|
||||
|
/* |
||||
|
* Show given input's timepicker |
||||
|
* |
||||
|
* @param {object} The input being clicked |
||||
|
*/ |
||||
|
showPicker: function (element) { |
||||
|
//If there is a beforeShow function, then call it with the input calling the timepicker and the
|
||||
|
// timepicker itself
|
||||
|
if (typeof this.options.beforeShow === 'function') { |
||||
|
this.options.beforeShow(element, this.timepicker); |
||||
|
} |
||||
|
var timepickerPos = $(element).offset(); |
||||
|
|
||||
|
$(element).attr({'aria-showingpicker': 'true', 'tabindex': -1}); |
||||
|
this.setText(element); |
||||
|
this.showHideMeridiemControl(); |
||||
|
if (this.getText(element) !== this.getTime()) { |
||||
|
|
||||
|
// Check meridiem
|
||||
|
var text = this.getText(element); |
||||
|
var re = /\s[ap]m$/i; |
||||
|
var meridiem = re.test(text) ? text.substr(-2, 2) : null; |
||||
|
var inputTime = text.replace(re, '').split(this.options.timeSeparator); |
||||
|
var newTime = {}; |
||||
|
newTime.hours = inputTime[0]; |
||||
|
newTime.minutes = inputTime[1]; |
||||
|
newTime.meridiem = meridiem; |
||||
|
if (this.options.showSeconds) { |
||||
|
newTime.seconds = inputTime[2]; |
||||
|
} |
||||
|
this.setTime(newTime); |
||||
|
} |
||||
|
this.timepicker.css({ |
||||
|
'z-index': this.element.css('z-index') + 1, |
||||
|
position: 'absolute', |
||||
|
left: timepickerPos.left, |
||||
|
top: timepickerPos.top + $(element)[0].offsetHeight |
||||
|
}).show(); |
||||
|
//If there is a show function, then call it with the input calling the timepicker and the
|
||||
|
// timepicker itself
|
||||
|
if (typeof this.options.show === 'function') { |
||||
|
this.options.show(element, this.timepicker); |
||||
|
} |
||||
|
|
||||
|
this.handleTimeAdjustments(element); |
||||
|
}, |
||||
|
|
||||
|
/* |
||||
|
* Hides the timepicker that is currently shown if it is not part of the timepicker |
||||
|
* |
||||
|
* @param {Object} The DOM object being clicked on the page |
||||
|
* |
||||
|
* BeinnLora: added trigger function to call on closing/hiding timepicker. |
||||
|
*/ |
||||
|
hideTimepicker: function (element) { |
||||
|
this.timepicker.hide(); |
||||
|
if (typeof this.options.afterShow === 'function') { |
||||
|
this.options.afterShow(element, this.timepicker); |
||||
|
} |
||||
|
var pickerHidden = { |
||||
|
start: function () { |
||||
|
var setShowPickerFalse = $.Deferred(); |
||||
|
$('[aria-showingpicker="true"]').attr('aria-showingpicker', 'false'); |
||||
|
return setShowPickerFalse.promise(); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
function setTabIndex(index) { |
||||
|
setTimeout(function () { |
||||
|
$('[aria-showingpicker="false"]').attr('tabindex', index); |
||||
|
}, 400); |
||||
|
} |
||||
|
|
||||
|
pickerHidden.start().then(setTabIndex(0)); |
||||
|
}, |
||||
|
|
||||
|
/* |
||||
|
* Create a new timepicker. A single timepicker per page |
||||
|
*/ |
||||
|
createPicker: function () { |
||||
|
if ($('.wickedpicker').length === 0) { |
||||
|
var picker = '<div class="wickedpicker"><p class="wickedpicker__title">' + this.options.title + '<span class="wickedpicker__close"></span></p><ul class="wickedpicker__controls"><li class="wickedpicker__controls__control"><span class="' + this.options.upArrow + '"></span><span class="wickedpicker__controls__control--hours" tabindex="-1">00</span><span class="' + this.options.downArrow + '"></span></li><li class="wickedpicker__controls__control--separator"><span class="wickedpicker__controls__control--separator-inner">:</span></li><li class="wickedpicker__controls__control"><span class="' + this.options.upArrow + '"></span><span class="wickedpicker__controls__control--minutes" tabindex="-1">00</span><span class="' + this.options.downArrow + '"></span></li>'; |
||||
|
if (this.options.showSeconds) { |
||||
|
picker += '<li class="wickedpicker__controls__control--separator"><span class="wickedpicker__controls__control--separator-inner">:</span></li><li class="wickedpicker__controls__control"><span class="' + this.options.upArrow + '"></span><span class="wickedpicker__controls__control--seconds" tabindex="-1">00</span><span class="' + this.options.downArrow + '"></span> </li>'; |
||||
|
} |
||||
|
picker += '<li class="wickedpicker__controls__control"><span class="' + this.options.upArrow + '"></span><span class="wickedpicker__controls__control--meridiem" tabindex="-1">AM</span><span class="' + this.options.downArrow + '"></span></li></ul></div>'; |
||||
|
$('body').append(picker); |
||||
|
this.attachKeyboardEvents(); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/* |
||||
|
* Hides the meridiem control if this timepicker is a 24 hour clock |
||||
|
*/ |
||||
|
showHideMeridiemControl: function () { |
||||
|
if (this.options.twentyFour === false) { |
||||
|
$(this.meridiemElem).parent().show(); |
||||
|
} |
||||
|
else { |
||||
|
$(this.meridiemElem).parent().hide(); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/* |
||||
|
* Hides the seconds control if this timepicker has showSeconds set to true |
||||
|
*/ |
||||
|
showHideSecondsControl: function () { |
||||
|
if (this.options.showSeconds) { |
||||
|
$(this.secondsElem).parent().show(); |
||||
|
} |
||||
|
else { |
||||
|
$(this.secondsElem).parent().hide(); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/* |
||||
|
* Bind the click events to the input |
||||
|
* |
||||
|
* @param {object} The input element |
||||
|
*/ |
||||
|
attach: function (element) { |
||||
|
var self = this; |
||||
|
|
||||
|
if (this.options.clearable) { |
||||
|
self.makePickerInputClearable(element); |
||||
|
} |
||||
|
|
||||
|
$(element).attr('tabindex', 0); |
||||
|
$(element).on('click focus', function (event) { |
||||
|
//Prevent multiple firings
|
||||
|
if ($(self.timepicker).is(':hidden')) { |
||||
|
self.showPicker($(this)); |
||||
|
window.lastTimePickerControl = $(this); //Put the reference on this timepicker into global scope for unsing that in afterShow function
|
||||
|
$(self.hoursElem).focus(); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
|
||||
|
//Handle click events for closing Wickedpicker
|
||||
|
var clickHandler = function (event) { //TODO: Fix double firing
|
||||
|
//Only fire the hide event when you have to
|
||||
|
if ($(self.timepicker).is(':visible')) { |
||||
|
//Clicking the X
|
||||
|
if ($(event.target).is(self.close)) { |
||||
|
self.hideTimepicker(window.lastTimePickerControl); |
||||
|
} else if ($(event.target).closest(self.timepicker).length || $(event.target).closest($('.hasWickedpicker')).length) { //Clicking the Wickedpicker or one of it's inputs
|
||||
|
event.stopPropagation(); |
||||
|
} else { //Everything else
|
||||
|
if (typeof self.options.onClickOutside === 'function') { |
||||
|
self.options.onClickOutside(); |
||||
|
} |
||||
|
else { |
||||
|
console.warn("Type of onClickOutside must be a function"); |
||||
|
} |
||||
|
|
||||
|
if (!self.options.closeOnClickOutside) { |
||||
|
return; |
||||
|
} |
||||
|
self.hideTimepicker(window.lastTimePickerControl); |
||||
|
} |
||||
|
window.lastTimePickerControl = null; |
||||
|
} |
||||
|
}; |
||||
|
$(document).off('click', clickHandler).on('click', clickHandler); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Added keyboard functionality to improve usabil |
||||
|
*/ |
||||
|
attachKeyboardEvents: function () { |
||||
|
$(document).on('keydown', $.proxy(function (event) { |
||||
|
switch (event.keyCode) { |
||||
|
case 9: |
||||
|
if (event.target.className !== 'hasWickedpicker') { |
||||
|
$(this.close).trigger('click'); |
||||
|
} |
||||
|
break; |
||||
|
case 27: |
||||
|
$(this.close).trigger('click'); |
||||
|
break; |
||||
|
case 37: //Left arrow
|
||||
|
if (event.target.className !== this.hoursElem[0].className) { |
||||
|
$(event.target).parent().prevAll('li').not(this.separator.selector).first().children()[1].focus(); |
||||
|
} else { |
||||
|
$(event.target).parent().siblings(':last').children()[1].focus(); |
||||
|
} |
||||
|
break; |
||||
|
case 39: //Right arrow
|
||||
|
if (event.target.className !== this.meridiemElem[0].className) { |
||||
|
$(event.target).parent().nextAll('li').not(this.separator.selector).first().children()[1].focus(); |
||||
|
} else { |
||||
|
$(event.target).parent().siblings(':first').children()[1].focus(); |
||||
|
} |
||||
|
break; |
||||
|
case 38: //Up arrow
|
||||
|
$(':focus').prev().trigger('click'); |
||||
|
break; |
||||
|
case 40: //Down arrow
|
||||
|
$(':focus').next().trigger('click'); |
||||
|
break; |
||||
|
default: |
||||
|
break; |
||||
|
} |
||||
|
}, this)); |
||||
|
}, |
||||
|
|
||||
|
/* |
||||
|
* Set the time on the timepicker |
||||
|
* |
||||
|
* @param {object} The date being set |
||||
|
*/ |
||||
|
setTime: function (time) { |
||||
|
this.setHours(time.hours); |
||||
|
this.setMinutes(time.minutes); |
||||
|
this.setMeridiem(time.meridiem); |
||||
|
if (this.options.showSeconds) { |
||||
|
this.setSeconds(time.seconds); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/* |
||||
|
* Get the time from the timepicker |
||||
|
*/ |
||||
|
getTime: function () { |
||||
|
return [this.formatTime(this.getHours(), this.getMinutes(), this.getMeridiem(), this.getSeconds())]; |
||||
|
}, |
||||
|
|
||||
|
/* |
||||
|
* Set the timpicker's hour(s) value |
||||
|
* |
||||
|
* @param {string} hours |
||||
|
*/ |
||||
|
setHours: function (hours) { |
||||
|
var hour = new Date(); |
||||
|
hour.setHours(hours); |
||||
|
var hoursText = this.parseHours(hour.getHours()); |
||||
|
this.hoursElem.text(hoursText); |
||||
|
this.selectedHour = hoursText; |
||||
|
}, |
||||
|
|
||||
|
/* |
||||
|
* Get the hour(s) value from the timepicker |
||||
|
* |
||||
|
* @return {integer} |
||||
|
*/ |
||||
|
getHours: function () { |
||||
|
var hours = new Date(); |
||||
|
hours.setHours(this.hoursElem.text()); |
||||
|
return hours.getHours(); |
||||
|
}, |
||||
|
|
||||
|
/* |
||||
|
* Returns the correct hour value based on the type of clock, 12 or 24 hour |
||||
|
* |
||||
|
* @param {integer} The hours value before parsing |
||||
|
* |
||||
|
* @return {string|integer} |
||||
|
*/ |
||||
|
parseHours: function (hours) { |
||||
|
return (this.options.twentyFour === false) ? ((hours + 11) % 12) + 1 : (hours < 10) ? '0' + hours : hours; |
||||
|
}, |
||||
|
|
||||
|
/* |
||||
|
* Sets the timpicker's minutes value |
||||
|
* |
||||
|
* @param {string} minutes |
||||
|
*/ |
||||
|
setMinutes: function (minutes) { |
||||
|
var minute = new Date(); |
||||
|
minute.setMinutes(minutes); |
||||
|
var minutesText = minute.getMinutes(); |
||||
|
var min = this.parseSecMin(minutesText); |
||||
|
this.minutesElem.text(min); |
||||
|
this.selectedMin = min; |
||||
|
}, |
||||
|
|
||||
|
/* |
||||
|
* Get the minutes value from the timepicker |
||||
|
* |
||||
|
* @return {integer} |
||||
|
*/ |
||||
|
getMinutes: function () { |
||||
|
var minutes = new Date(); |
||||
|
minutes.setMinutes(this.minutesElem.text()); |
||||
|
return minutes.getMinutes(); |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
/* |
||||
|
* Return a human-readable minutes/seconds value |
||||
|
* |
||||
|
* @param {string} value seconds or minutes |
||||
|
* |
||||
|
* @return {string|integer} |
||||
|
*/ |
||||
|
parseSecMin: function (value) { |
||||
|
return ((value < 10) ? '0' : '') + value; |
||||
|
}, |
||||
|
|
||||
|
/* |
||||
|
* Set the timepicker's meridiem value, AM or PM |
||||
|
* |
||||
|
* @param {string} The new meridiem |
||||
|
*/ |
||||
|
setMeridiem: function (inputMeridiem) { |
||||
|
var newMeridiem = ''; |
||||
|
if (inputMeridiem === undefined) { |
||||
|
var meridiem = this.getMeridiem(); |
||||
|
newMeridiem = (meridiem === 'PM') ? 'AM' : 'PM'; |
||||
|
} else { |
||||
|
newMeridiem = inputMeridiem; |
||||
|
} |
||||
|
this.meridiemElem.text(newMeridiem); |
||||
|
this.selectedMeridiem = newMeridiem; |
||||
|
}, |
||||
|
|
||||
|
/* |
||||
|
* Get the timepicker's meridiem value, AM or PM |
||||
|
* |
||||
|
* @return {string} |
||||
|
*/ |
||||
|
getMeridiem: function () { |
||||
|
return this.meridiemElem.text(); |
||||
|
}, |
||||
|
|
||||
|
/* |
||||
|
* Set the timepicker's seconds value |
||||
|
* |
||||
|
* @param {string} seconds |
||||
|
*/ |
||||
|
setSeconds: function (seconds) { |
||||
|
var second = new Date(); |
||||
|
second.setSeconds(seconds); |
||||
|
var secondsText = second.getSeconds(); |
||||
|
var sec = this.parseSecMin(secondsText); |
||||
|
this.secondsElem.text(sec); |
||||
|
this.selectedSec = sec; |
||||
|
}, |
||||
|
|
||||
|
/* |
||||
|
* Get the timepicker's seconds value |
||||
|
* |
||||
|
* return {string} |
||||
|
*/ |
||||
|
getSeconds: function () { |
||||
|
var seconds = new Date(); |
||||
|
seconds.setSeconds(this.secondsElem.text()); |
||||
|
return seconds.getSeconds(); |
||||
|
}, |
||||
|
|
||||
|
/* |
||||
|
* Get the correct meridiem based on the hours given |
||||
|
* |
||||
|
* @param {string|integer} hours |
||||
|
* |
||||
|
* @return {string} |
||||
|
*/ |
||||
|
parseMeridiem: function (hours) { |
||||
|
return (hours > 11) ? 'PM' : 'AM'; |
||||
|
}, |
||||
|
|
||||
|
/* |
||||
|
* Handles time incrementing and decrementing and passes |
||||
|
* the operator, '+' or '-', the input to be set after the change |
||||
|
* and the current arrow clicked, to decipher if hours, ninutes, or meridiem. |
||||
|
* |
||||
|
* @param {object} The input element |
||||
|
*/ |
||||
|
handleTimeAdjustments: function (element) { |
||||
|
var timeOut = 0; |
||||
|
//Click and click and hold timepicker incrementer and decrementer
|
||||
|
$(this.up).add(this.down).off('mousedown click touchstart').on('mousedown click', { |
||||
|
'Wickedpicker': this, |
||||
|
'input': element |
||||
|
}, function (event) { |
||||
|
if(event.which!=1) return false; |
||||
|
var operator = (this.className.indexOf('up') > -1) ? '+' : '-'; |
||||
|
var passedData = event.data; |
||||
|
if (event.type == 'mousedown') { |
||||
|
timeOut = setInterval($.proxy(function (args) { |
||||
|
args.Wickedpicker.changeValue(operator, args.input, this); |
||||
|
}, this, {'Wickedpicker': passedData.Wickedpicker, 'input': passedData.input}), 200); |
||||
|
} else { |
||||
|
passedData.Wickedpicker.changeValue(operator, passedData.input, this); |
||||
|
} |
||||
|
}).bind('mouseup touchend', function () { |
||||
|
clearInterval(timeOut); |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
/* |
||||
|
* Change the timepicker's time base on what is clicked |
||||
|
* |
||||
|
* @param {string} The + or - operator |
||||
|
* @param {object} The timepicker's associated input to be set post change |
||||
|
* @param {object} The DOM arrow object clicked, determines if it is hours, |
||||
|
* minutes, or meridiem base on the operator and its siblings |
||||
|
*/ |
||||
|
changeValue: function (operator, input, clicked) { |
||||
|
var target = (operator === '+') ? clicked.nextSibling : clicked.previousSibling; |
||||
|
var targetClass = $(target).attr('class'); |
||||
|
if (targetClass.endsWith('hours')) { |
||||
|
this.setHours(eval(this.getHours() + operator + 1)); |
||||
|
} else if (targetClass.endsWith('minutes')) { |
||||
|
this.setMinutes(eval(this.getMinutes() + operator + this.options.minutesInterval)); |
||||
|
} else if (targetClass.endsWith('seconds')) { |
||||
|
this.setSeconds(eval(this.getSeconds() + operator + this.options.secondsInterval)); |
||||
|
} else { |
||||
|
this.setMeridiem(); |
||||
|
} |
||||
|
this.setText(input); |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
/* |
||||
|
* Sets the give input's text to the current timepicker's time |
||||
|
* |
||||
|
* @param {object} The input element |
||||
|
*/ |
||||
|
setText: function (input) { |
||||
|
$(input).val(this.formatTime(this.selectedHour, this.selectedMin, this.selectedMeridiem, this.selectedSec)).change(); |
||||
|
}, |
||||
|
|
||||
|
/* |
||||
|
* Get the given input's value |
||||
|
* |
||||
|
* @param {object} The input element |
||||
|
* |
||||
|
* @return {string} |
||||
|
*/ |
||||
|
getText: function (input) { |
||||
|
return $(input).val(); |
||||
|
}, |
||||
|
|
||||
|
/* |
||||
|
* Returns the correct time format as a string |
||||
|
* |
||||
|
* @param {string} hour |
||||
|
* @param {string} minutes |
||||
|
* @param {string} meridiem |
||||
|
* |
||||
|
* @return {string} |
||||
|
*/ |
||||
|
formatTime: function (hour, min, meridiem, seconds) { |
||||
|
var formattedTime = hour + this.options.timeSeparator + min; |
||||
|
if (this.options.showSeconds) { |
||||
|
formattedTime += this.options.timeSeparator + seconds; |
||||
|
} |
||||
|
if (this.options.twentyFour === false) { |
||||
|
formattedTime += ' ' + meridiem; |
||||
|
} |
||||
|
return formattedTime; |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Apply the hover class to the arrows and close icon fonts |
||||
|
*/ |
||||
|
setHoverState: function () { |
||||
|
var self = this; |
||||
|
if (!isMobile()) { |
||||
|
$(this.up).add(this.down).add(this.close).hover(function () { |
||||
|
$(this).toggleClass(self.options.hoverState); |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Wrapping the given input field with the clearable container |
||||
|
* , add a span that will contain the x, and bind the clear |
||||
|
* input event to the span |
||||
|
* |
||||
|
* @param input |
||||
|
*/ |
||||
|
makePickerInputClearable: function(input) { |
||||
|
$(input).wrap('<div class="clearable-picker"></div>').after('<span data-clear-picker>×</span>'); |
||||
|
|
||||
|
//When the x is clicked, clear its sibling input field
|
||||
|
$('[data-clear-picker]').on('click', function(event) { |
||||
|
$(this).siblings('.hasWickedpicker').val(''); |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Convert the options time string format |
||||
|
* to an array |
||||
|
* |
||||
|
* returns => [hours, minutes, seconds] |
||||
|
* |
||||
|
* @param stringTime |
||||
|
* @returns {*} |
||||
|
*/ |
||||
|
timeArrayFromString: function (stringTime) { |
||||
|
if (stringTime.length) { |
||||
|
var time = stringTime.split(':'); |
||||
|
time[2] = (time.length < 3) ? '00' : time[2]; |
||||
|
return time; |
||||
|
} |
||||
|
return false; |
||||
|
}, |
||||
|
|
||||
|
//public functions
|
||||
|
/* |
||||
|
* Returns the requested input element's value |
||||
|
*/ |
||||
|
_time: function () { |
||||
|
var inputValue = $(this.element).val(); |
||||
|
return (inputValue === '') ? this.formatTime(this.selectedHour, this.selectedMin, this.selectedMeridiem, this.selectedSec) : inputValue; |
||||
|
}, |
||||
|
_hide: function() { |
||||
|
this.hideTimepicker(this.element); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
//optional index if multiple inputs share the same class
|
||||
|
$.fn[pluginName] = function (options, index) { |
||||
|
if (!$.isFunction(Wickedpicker.prototype['_' + options])) { |
||||
|
return this.each(function () { |
||||
|
if (!$.data(this, "plugin_" + pluginName)) { |
||||
|
$.data(this, "plugin_" + pluginName, new Wickedpicker(this, options)); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
else if ($(this).hasClass('hasWickedpicker')) { |
||||
|
if (index !== undefined) { |
||||
|
return $.data($(this)[index], 'plugin_' + pluginName)['_' + options](); |
||||
|
} |
||||
|
else { |
||||
|
return $.data($(this)[0], 'plugin_' + pluginName)['_' + options](); |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
})(jQuery, window, document); |
||||
@ -0,0 +1,90 @@ |
|||||
|
.wickedpicker { |
||||
|
-webkit-user-select: none; |
||||
|
-moz-user-select: none; |
||||
|
-ms-user-select: none; |
||||
|
user-select: none; |
||||
|
box-shadow: 0 0 0 1px rgba(14, 41, 57, 0.12), 0 2px 5px rgba(14, 41, 57, 0.44), inset 0 -1px 2px rgba(14, 41, 57, 0.15); |
||||
|
background: #fefefe; |
||||
|
margin: 0 auto; |
||||
|
border-radius: 0.1px; |
||||
|
width: 270px; |
||||
|
height: 130px; |
||||
|
font-size: 14px; |
||||
|
display: none; } |
||||
|
.wickedpicker__title { |
||||
|
background-image: -webkit-linear-gradient(top, #ffffff 0%, #f2f2f2 100%); |
||||
|
background-image: linear-gradient(to bottom, #ffffff 0%, #f2f2f2 100%); |
||||
|
position: relative; |
||||
|
background: #f2f2f2; |
||||
|
margin: 0 auto; |
||||
|
border-bottom: 1px solid #e5e5e5; |
||||
|
padding: 12px 11px 10px 15px; |
||||
|
color: #4C4C4C; |
||||
|
font-size: inherit; } |
||||
|
.wickedpicker__close { |
||||
|
-webkit-transform: translateY(-25%); |
||||
|
-moz-transform: translateY(-25%); |
||||
|
-ms-transform: translateY(-25%); |
||||
|
-o-transform: translateY(-25%); |
||||
|
transform: translateY(-25%); |
||||
|
position: absolute; |
||||
|
top: 25%; |
||||
|
right: 10px; |
||||
|
color: #34495e; |
||||
|
cursor: pointer; } |
||||
|
.wickedpicker__close:before { |
||||
|
content: '\00d7'; } |
||||
|
.wickedpicker__controls { |
||||
|
padding: 10px 0; |
||||
|
line-height: normal; |
||||
|
margin: 0; } |
||||
|
.wickedpicker__controls__control, .wickedpicker__controls__control--separator { |
||||
|
vertical-align: middle; |
||||
|
display: inline-block; |
||||
|
font-size: inherit; |
||||
|
margin: 0 auto; |
||||
|
width: 35px; |
||||
|
letter-spacing: 1.3px; } |
||||
|
.wickedpicker__controls__control-up, .wickedpicker__controls__control-down { |
||||
|
color: #34495e; |
||||
|
position: relative; |
||||
|
display: block; |
||||
|
margin: 3px auto; |
||||
|
font-size: 18px; |
||||
|
cursor: pointer; } |
||||
|
.wickedpicker__controls__control-up:before { |
||||
|
content: '\e800'; } |
||||
|
.wickedpicker__controls__control-down:after { |
||||
|
content: '\e801'; } |
||||
|
.wickedpicker__controls__control--separator { |
||||
|
width: 5px; } |
||||
|
|
||||
|
.text-center, .wickedpicker__title, .wickedpicker__controls, .wickedpicker__controls__control, .wickedpicker__controls__control--separator, .wickedpicker__controls__control-up, .wickedpicker__controls__control-down { |
||||
|
text-align: center; } |
||||
|
|
||||
|
.hover-state { |
||||
|
color: #3498db; } |
||||
|
|
||||
|
@font-face { |
||||
|
font-family: 'fontello'; |
||||
|
src: url("../fonts/fontello.eot?52602240"); |
||||
|
src: url("../fonts/fontello.eot?52602240#iefix") format("embedded-opentype"), url("../fonts/fontello.woff?52602240") format("woff"), url("../fonts/fontello.ttf?52602240") format("truetype"), url("../fonts/fontello.svg?52602240#fontello") format("svg"); |
||||
|
font-weight: normal; |
||||
|
font-style: normal; } |
||||
|
|
||||
|
.fontello:before, .wickedpicker__controls__control-up:before, .fontello-after:after, .wickedpicker__controls__control-down:after { |
||||
|
font-family: 'fontello'; |
||||
|
font-style: normal; |
||||
|
font-weight: normal; |
||||
|
speak: none; |
||||
|
display: inline-block; |
||||
|
text-decoration: inherit; |
||||
|
width: 1em; |
||||
|
margin-right: .2em; |
||||
|
text-align: center; |
||||
|
font-variant: normal; |
||||
|
text-transform: none; |
||||
|
line-height: 1em; |
||||
|
margin-left: .2em; |
||||
|
-webkit-font-smoothing: antialiased; |
||||
|
-moz-osx-font-smoothing: grayscale; } |
||||
@ -0,0 +1,11 @@ |
|||||
|
<?xml version="1.0" encoding="utf-8" ?> |
||||
|
<odoo> |
||||
|
<template id="assets1" inherit_id="web.assets_backend"> |
||||
|
<xpath expr="." position="inside"> |
||||
|
<link href='/field_timepicker/static/wickedpicker/dist/wickedpicker.min.css' rel='stylesheet' /> |
||||
|
<script type="text/javascript" src='/field_timepicker/static/wickedpicker/dist/wickedpicker.min.js' /> |
||||
|
<script type="text/javascript" src='/field_timepicker/static/wickedpicker/src/wickedpicker.js' /> |
||||
|
<script type="text/javascript" src='/field_timepicker/static/src/js/time_widget.js' /> |
||||
|
</xpath> |
||||
|
</template> |
||||
|
</odoo> |
||||
Loading…
Reference in new issue