Added timepicker widget, and improved calendar styling.
This commit is contained in:
Hike Danakian
Родитель
7b55ee8a57
Коммит
b9545326c8
|
|
@ -61,12 +61,23 @@ body#events .map-overlay {
|
|||
.ui-select-menu {
|
||||
z-index: 1;
|
||||
}
|
||||
.ui-select {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
.datetime > *[class^="ui-"] {
|
||||
margin: 4px;
|
||||
|
||||
vertical-align: top;
|
||||
|
||||
.icon-calendar {
|
||||
padding-right: 6px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.ui-input {
|
||||
padding: 0px;
|
||||
input {
|
||||
margin-left: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -147,6 +158,7 @@ body#events .map-overlay {
|
|||
margin: 8px;
|
||||
margin-left: 0px;
|
||||
float: left;
|
||||
clear: left;
|
||||
}
|
||||
label,.md-editor,input,select {
|
||||
vertical-align: top;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
@import "event_create";
|
||||
@import "event_details";
|
||||
@import "map";
|
||||
@import "ui-datepicker";
|
||||
@import "mixins";
|
||||
@import "marker_info_window";
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
.ui-datepicker {
|
||||
border: 1px solid #ddd;
|
||||
margin-left: -34.5px;
|
||||
margin-top: 11px;
|
||||
|
||||
&, & * {
|
||||
border-radius: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
|
|
@ -0,0 +1,66 @@
|
|||
.ui-timepicker-wrapper {
|
||||
overflow-y: auto;
|
||||
height: 150px;
|
||||
width: 6.5em;
|
||||
background: #fff;
|
||||
border: 1px solid #ddd;
|
||||
-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2);
|
||||
-moz-box-shadow:0 5px 10px rgba(0,0,0,0.2);
|
||||
box-shadow:0 5px 10px rgba(0,0,0,0.2);
|
||||
outline: none;
|
||||
z-index: 10001;
|
||||
}
|
||||
|
||||
.ui-timepicker-wrapper.ui-timepicker-with-duration {
|
||||
width: 11em;
|
||||
}
|
||||
|
||||
.ui-timepicker-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.ui-timepicker-duration {
|
||||
margin-left: 5px; color: #888;
|
||||
}
|
||||
|
||||
.ui-timepicker-list:hover .ui-timepicker-duration {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.ui-timepicker-list li {
|
||||
padding: 3px 0 3px 5px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
color: #000;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ui-timepicker-list:hover .ui-timepicker-selected {
|
||||
background: #fff; color: #000;
|
||||
}
|
||||
|
||||
li.ui-timepicker-selected,
|
||||
.ui-timepicker-list li:hover,
|
||||
.ui-timepicker-list .ui-timepicker-selected:hover {
|
||||
background: #1980EC; color: #fff;
|
||||
}
|
||||
|
||||
li.ui-timepicker-selected .ui-timepicker-duration,
|
||||
.ui-timepicker-list li:hover .ui-timepicker-duration {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.ui-timepicker-list li.ui-timepicker-disabled,
|
||||
.ui-timepicker-list li.ui-timepicker-disabled:hover,
|
||||
.ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
|
||||
color: #888;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.ui-timepicker-list li.ui-timepicker-disabled:hover,
|
||||
.ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
|
@ -0,0 +1,840 @@
|
|||
/************************
|
||||
jquery-timepicker v1.1.10
|
||||
http://jonthornton.github.com/jquery-timepicker/
|
||||
|
||||
requires jQuery 1.7+
|
||||
************************/
|
||||
|
||||
|
||||
(function (factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
// AMD. Register as an anonymous module.
|
||||
define(['jquery'], factory);
|
||||
} else {
|
||||
// Browser globals
|
||||
factory(jQuery);
|
||||
}
|
||||
}(function ($) {
|
||||
var _baseDate = _generateBaseDate();
|
||||
var _ONE_DAY = 86400;
|
||||
var _defaults = {
|
||||
className: null,
|
||||
minTime: null,
|
||||
maxTime: null,
|
||||
durationTime: null,
|
||||
step: 30,
|
||||
showDuration: false,
|
||||
timeFormat: 'g:ia',
|
||||
scrollDefaultNow: false,
|
||||
scrollDefaultTime: false,
|
||||
selectOnBlur: false,
|
||||
disableTouchKeyboard: true,
|
||||
forceRoundTime: false,
|
||||
appendTo: 'body',
|
||||
disableTimeRanges: [],
|
||||
closeOnWindowScroll: false,
|
||||
disableTextInput: false
|
||||
};
|
||||
var _lang = {
|
||||
decimal: '.',
|
||||
mins: 'mins',
|
||||
hr: 'hr',
|
||||
hrs: 'hrs'
|
||||
};
|
||||
|
||||
var methods =
|
||||
{
|
||||
init: function(options)
|
||||
{
|
||||
return this.each(function()
|
||||
{
|
||||
var self = $(this);
|
||||
|
||||
// convert dropdowns to text input
|
||||
if (self[0].tagName == 'SELECT') {
|
||||
var attrs = { 'type': 'text', 'value': self.val() };
|
||||
var raw_attrs = self[0].attributes;
|
||||
|
||||
for (var i=0; i < raw_attrs.length; i++) {
|
||||
attrs[raw_attrs[i].nodeName] = raw_attrs[i].nodeValue;
|
||||
}
|
||||
|
||||
var input = $('<input />', attrs);
|
||||
self.replaceWith(input);
|
||||
self = input;
|
||||
}
|
||||
|
||||
var settings = $.extend({}, _defaults);
|
||||
|
||||
if (options) {
|
||||
settings = $.extend(settings, options);
|
||||
}
|
||||
|
||||
if (settings.lang) {
|
||||
_lang = $.extend(_lang, settings.lang);
|
||||
}
|
||||
|
||||
settings = _parseSettings(settings);
|
||||
|
||||
self.data('timepicker-settings', settings);
|
||||
self.prop('autocomplete', 'off');
|
||||
self.on('click.timepicker focus.timepicker', methods.show);
|
||||
self.on('blur.timepicker', _formatValue);
|
||||
self.on('keydown.timepicker', _keydownhandler);
|
||||
self.on('keyup.timepicker', _keyuphandler);
|
||||
self.addClass('ui-timepicker-input');
|
||||
|
||||
_formatValue.call(self.get(0));
|
||||
});
|
||||
},
|
||||
|
||||
show: function(e)
|
||||
{
|
||||
var self = $(this);
|
||||
var settings = self.data('timepicker-settings');
|
||||
|
||||
if ('ontouchstart' in document && settings.disableTouchKeyboard) {
|
||||
// block the keyboard on mobile devices
|
||||
self.blur();
|
||||
}
|
||||
|
||||
var list = self.data('timepicker-list');
|
||||
|
||||
// check if input is readonly
|
||||
if (self.prop('readonly')) {
|
||||
return;
|
||||
}
|
||||
|
||||
// check if list needs to be rendered
|
||||
if (!list || list.length === 0) {
|
||||
_render(self);
|
||||
list = self.data('timepicker-list');
|
||||
}
|
||||
|
||||
if (list.is(':visible')) {
|
||||
return;
|
||||
}
|
||||
|
||||
// make sure other pickers are hidden
|
||||
methods.hide();
|
||||
|
||||
list.show();
|
||||
|
||||
if ((self.offset().top + self.outerHeight(true) + list.outerHeight()) > $(window).height() + $(window).scrollTop()) {
|
||||
// position the dropdown on top
|
||||
list.offset({
|
||||
'left': self.offset().left + parseInt(list.css('marginLeft').replace('px', ''), 10),
|
||||
'top': self.offset().top - list.outerHeight() + parseInt(list.css('marginTop').replace('px', ''), 10)
|
||||
});
|
||||
} else {
|
||||
// put it under the input
|
||||
list.offset({
|
||||
'left':self.offset().left + parseInt(list.css('marginLeft').replace('px', ''), 10),
|
||||
'top': self.offset().top + self.outerHeight() + parseInt(list.css('marginTop').replace('px', ''), 10)
|
||||
});
|
||||
}
|
||||
|
||||
// position scrolling
|
||||
var selected = list.find('.ui-timepicker-selected');
|
||||
|
||||
if (!selected.length) {
|
||||
if (_getTimeValue(self)) {
|
||||
selected = _findRow(self, list, _time2int(_getTimeValue(self)));
|
||||
} else if (settings.scrollDefaultNow) {
|
||||
selected = _findRow(self, list, _time2int(new Date()));
|
||||
} else if (settings.scrollDefaultTime !== false) {
|
||||
selected = _findRow(self, list, _time2int(settings.scrollDefaultTime));
|
||||
}
|
||||
}
|
||||
|
||||
if (selected && selected.length) {
|
||||
var topOffset = list.scrollTop() + selected.position().top - selected.outerHeight();
|
||||
list.scrollTop(topOffset);
|
||||
} else {
|
||||
list.scrollTop(0);
|
||||
}
|
||||
|
||||
_attachCloseHandler(settings);
|
||||
|
||||
self.trigger('showTimepicker');
|
||||
},
|
||||
|
||||
hide: function(e)
|
||||
{
|
||||
$('.ui-timepicker-wrapper:visible').each(function() {
|
||||
var list = $(this);
|
||||
var self = list.data('timepicker-input');
|
||||
var settings = self.data('timepicker-settings');
|
||||
|
||||
if (settings && settings.selectOnBlur) {
|
||||
_selectValue(self);
|
||||
}
|
||||
|
||||
list.hide();
|
||||
self.trigger('hideTimepicker');
|
||||
});
|
||||
},
|
||||
|
||||
option: function(key, value)
|
||||
{
|
||||
var self = this;
|
||||
var settings = self.data('timepicker-settings');
|
||||
var list = self.data('timepicker-list');
|
||||
|
||||
if (typeof key == 'object') {
|
||||
settings = $.extend(settings, key);
|
||||
|
||||
} else if (typeof key == 'string' && typeof value != 'undefined') {
|
||||
settings[key] = value;
|
||||
|
||||
} else if (typeof key == 'string') {
|
||||
return settings[key];
|
||||
}
|
||||
|
||||
settings = _parseSettings(settings);
|
||||
|
||||
self.data('timepicker-settings', settings);
|
||||
|
||||
if (list) {
|
||||
list.remove();
|
||||
self.data('timepicker-list', false);
|
||||
}
|
||||
|
||||
return self;
|
||||
},
|
||||
|
||||
getSecondsFromMidnight: function()
|
||||
{
|
||||
return _time2int(_getTimeValue(this));
|
||||
},
|
||||
|
||||
getTime: function()
|
||||
{
|
||||
var self = this;
|
||||
var today = new Date();
|
||||
today.setHours(0, 0, 0, 0);
|
||||
return new Date(today.valueOf() + (_time2int(_getTimeValue(self))*1000));
|
||||
},
|
||||
|
||||
setTime: function(value)
|
||||
{
|
||||
var self = this;
|
||||
var prettyTime = _int2time(_time2int(value), self.data('timepicker-settings').timeFormat);
|
||||
_setTimeValue(self, prettyTime);
|
||||
},
|
||||
|
||||
remove: function()
|
||||
{
|
||||
var self = this;
|
||||
|
||||
// check if this element is a timepicker
|
||||
if (!self.hasClass('ui-timepicker-input')) {
|
||||
return;
|
||||
}
|
||||
|
||||
self.removeAttr('autocomplete', 'off');
|
||||
self.removeClass('ui-timepicker-input');
|
||||
self.removeData('timepicker-settings');
|
||||
self.off('.timepicker');
|
||||
|
||||
// timepicker-list won't be present unless the user has interacted with this timepicker
|
||||
if (self.data('timepicker-list')) {
|
||||
self.data('timepicker-list').remove();
|
||||
}
|
||||
|
||||
self.removeData('timepicker-list');
|
||||
}
|
||||
};
|
||||
|
||||
// private methods
|
||||
|
||||
function _parseSettings(settings)
|
||||
{
|
||||
if (settings.minTime) {
|
||||
settings.minTime = _time2int(settings.minTime);
|
||||
}
|
||||
|
||||
if (settings.maxTime) {
|
||||
settings.maxTime = _time2int(settings.maxTime);
|
||||
}
|
||||
|
||||
if (settings.durationTime) {
|
||||
settings.durationTime = _time2int(settings.durationTime);
|
||||
}
|
||||
|
||||
if (settings.disableTimeRanges.length > 0) {
|
||||
// convert string times to integers
|
||||
for (var i in settings.disableTimeRanges) {
|
||||
settings.disableTimeRanges[i] = [
|
||||
_time2int(settings.disableTimeRanges[i][0]),
|
||||
_time2int(settings.disableTimeRanges[i][1])
|
||||
];
|
||||
}
|
||||
|
||||
// sort by starting time
|
||||
settings.disableTimeRanges = settings.disableTimeRanges.sort(function(a, b){
|
||||
return a[0] - b[0];
|
||||
});
|
||||
}
|
||||
|
||||
return settings;
|
||||
}
|
||||
|
||||
function _render(self)
|
||||
{
|
||||
var settings = self.data('timepicker-settings');
|
||||
var list = self.data('timepicker-list');
|
||||
|
||||
if (list && list.length) {
|
||||
list.remove();
|
||||
self.data('timepicker-list', false);
|
||||
}
|
||||
|
||||
list = $('<ul />', { 'class': 'ui-timepicker-list' });
|
||||
|
||||
var wrapped_list = $('<div />', { 'class': 'ui-timepicker-wrapper', 'tabindex': -1 });
|
||||
wrapped_list.css({'display':'none', 'position': 'absolute' }).append(list);
|
||||
|
||||
|
||||
if (settings.className) {
|
||||
wrapped_list.addClass(settings.className);
|
||||
}
|
||||
|
||||
if ((settings.minTime !== null || settings.durationTime !== null) && settings.showDuration) {
|
||||
wrapped_list.addClass('ui-timepicker-with-duration');
|
||||
}
|
||||
|
||||
var durStart = (settings.durationTime !== null) ? settings.durationTime : settings.minTime;
|
||||
var start = (settings.minTime !== null) ? settings.minTime : 0;
|
||||
var end = (settings.maxTime !== null) ? settings.maxTime : (start + _ONE_DAY - 1);
|
||||
|
||||
if (end <= start) {
|
||||
// make sure the end time is greater than start time, otherwise there will be no list to show
|
||||
end += _ONE_DAY;
|
||||
}
|
||||
|
||||
var dr = settings.disableTimeRanges;
|
||||
var drCur = 0;
|
||||
var drLen = dr.length;
|
||||
|
||||
for (var i=start; i <= end; i += settings.step*60) {
|
||||
var timeInt = i%_ONE_DAY;
|
||||
|
||||
var row = $('<li />');
|
||||
row.data('time', timeInt);
|
||||
row.text(_int2time(timeInt, settings.timeFormat));
|
||||
|
||||
if ((settings.minTime !== null || settings.durationTime !== null) && settings.showDuration) {
|
||||
var duration = $('<span />');
|
||||
duration.addClass('ui-timepicker-duration');
|
||||
duration.text(' ('+_int2duration(i - durStart)+')');
|
||||
row.append(duration);
|
||||
}
|
||||
|
||||
if (drCur < drLen) {
|
||||
if (timeInt >= dr[drCur][0] && timeInt < dr[drCur][1]) {
|
||||
row.addClass('ui-timepicker-disabled');
|
||||
} else if (timeInt >= dr[drCur][1]) {
|
||||
drCur += 1;
|
||||
}
|
||||
}
|
||||
|
||||
list.append(row);
|
||||
}
|
||||
|
||||
wrapped_list.data('timepicker-input', self);
|
||||
self.data('timepicker-list', wrapped_list);
|
||||
|
||||
var appendTo = settings.appendTo;
|
||||
if (typeof appendTo === 'string') {
|
||||
appendTo = $(appendTo);
|
||||
} else if (typeof appendTo === 'function') {
|
||||
appendTo = appendTo(self);
|
||||
}
|
||||
appendTo.append(wrapped_list);
|
||||
_setSelected(self, list);
|
||||
|
||||
list.on('click', 'li', function(e) {
|
||||
|
||||
// hack: temporarily disable the focus handler
|
||||
// to deal with the fact that IE fires 'focus'
|
||||
// events asynchronously
|
||||
self.off('focus.timepicker');
|
||||
self.on('focus.timepicker-ie-hack', function(){
|
||||
self.off('focus.timepicker-ie-hack');
|
||||
self.on('focus.timepicker', methods.show);
|
||||
});
|
||||
self[0].focus();
|
||||
|
||||
// make sure only the clicked row is selected
|
||||
list.find('li').removeClass('ui-timepicker-selected');
|
||||
$(this).addClass('ui-timepicker-selected');
|
||||
|
||||
if (_selectValue(self)) {
|
||||
wrapped_list.hide();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function _generateBaseDate()
|
||||
{
|
||||
return new Date(1970, 1, 1, 0, 0, 0);
|
||||
}
|
||||
|
||||
function _attachCloseHandler(settings)
|
||||
{
|
||||
if ('ontouchstart' in document) {
|
||||
$('body').on('touchstart.ui-timepicker', _closeHandler);
|
||||
} else {
|
||||
$('body').on('mousedown.ui-timepicker', _closeHandler);
|
||||
if (settings.closeOnWindowScroll) {
|
||||
$(window).on('scroll.ui-timepicker', _closeHandler);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// event handler to decide whether to close timepicker
|
||||
function _closeHandler(e)
|
||||
{
|
||||
var target = $(e.target);
|
||||
var input = target.closest('.ui-timepicker-input');
|
||||
if (input.length === 0 && target.closest('.ui-timepicker-wrapper').length === 0) {
|
||||
methods.hide();
|
||||
$('body').unbind('.ui-timepicker');
|
||||
$(window).unbind('.ui-timepicker');
|
||||
}
|
||||
}
|
||||
|
||||
function _findRow(self, list, value)
|
||||
{
|
||||
if (!value && value !== 0) {
|
||||
return false;
|
||||
}
|
||||
|
||||
var settings = self.data('timepicker-settings');
|
||||
var out = false;
|
||||
var halfStep = settings.step*30;
|
||||
|
||||
// loop through the menu items
|
||||
list.find('li').each(function(i, obj) {
|
||||
var jObj = $(obj);
|
||||
|
||||
var offset = jObj.data('time') - value;
|
||||
|
||||
// check if the value is less than half a step from each row
|
||||
if (Math.abs(offset) < halfStep || offset == halfStep) {
|
||||
out = jObj;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
return out;
|
||||
}
|
||||
|
||||
function _setSelected(self, list)
|
||||
{
|
||||
list.find('li').removeClass('ui-timepicker-selected');
|
||||
|
||||
var timeValue = _time2int(_getTimeValue(self));
|
||||
if (!timeValue) {
|
||||
return;
|
||||
}
|
||||
|
||||
var selected = _findRow(self, list, timeValue);
|
||||
if (selected) {
|
||||
|
||||
var topDelta = selected.offset().top - list.offset().top;
|
||||
|
||||
if (topDelta + selected.outerHeight() > list.outerHeight() || topDelta < 0) {
|
||||
list.scrollTop(list.scrollTop() + selected.position().top - selected.outerHeight());
|
||||
}
|
||||
|
||||
selected.addClass('ui-timepicker-selected');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function _formatValue()
|
||||
{
|
||||
if (this.value === '') {
|
||||
return;
|
||||
}
|
||||
|
||||
var self = $(this);
|
||||
var seconds = _time2int(this.value);
|
||||
|
||||
if (seconds === null) {
|
||||
self.trigger('timeFormatError');
|
||||
return;
|
||||
}
|
||||
|
||||
var settings = self.data('timepicker-settings');
|
||||
|
||||
// check that the time in within bounds
|
||||
if (settings.minTime !== null && seconds < settings.minTime) {
|
||||
self.trigger('timeRangeError');
|
||||
} else if (settings.maxTime !== null && seconds > settings.maxTime) {
|
||||
self.trigger('timeRangeError');
|
||||
}
|
||||
|
||||
// check that time isn't within disabled time ranges
|
||||
$.each(settings.disableTimeRanges, function(){
|
||||
if (seconds >= this[0] && seconds < this[1]) {
|
||||
self.trigger('timeRangeError');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
if (settings.forceRoundTime) {
|
||||
var offset = seconds % (settings.step*60); // step is in minutes
|
||||
|
||||
if (offset >= settings.step*30) {
|
||||
// if offset is larger than a half step, round up
|
||||
seconds += (settings.step*60) - offset;
|
||||
} else {
|
||||
// round down
|
||||
seconds -= offset;
|
||||
}
|
||||
}
|
||||
|
||||
var prettyTime = _int2time(seconds, settings.timeFormat);
|
||||
_setTimeValue(self, prettyTime);
|
||||
}
|
||||
|
||||
function _getTimeValue(self)
|
||||
{
|
||||
if (self.is('input')) {
|
||||
return self.val();
|
||||
} else {
|
||||
// use the element's data attributes to store values
|
||||
return self.data('ui-timepicker-value');
|
||||
}
|
||||
}
|
||||
|
||||
function _setTimeValue(self, value)
|
||||
{
|
||||
if (self.is('input')) {
|
||||
self.val(value);
|
||||
} else {
|
||||
// use the element's data attributes to store values
|
||||
self.data('ui-timepicker-value', value);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Keyboard navigation via arrow keys
|
||||
*/
|
||||
function _keydownhandler(e)
|
||||
{
|
||||
var self = $(this);
|
||||
var list = self.data('timepicker-list');
|
||||
|
||||
if (!list || !list.is(':visible')) {
|
||||
if (e.keyCode == 40) {
|
||||
self.focus();
|
||||
} else {
|
||||
return _screenInput(e, self);
|
||||
}
|
||||
}
|
||||
|
||||
switch (e.keyCode) {
|
||||
|
||||
case 13: // return
|
||||
if (_selectValue(self)) {
|
||||
methods.hide.apply(this);
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
return false;
|
||||
|
||||
case 38: // up
|
||||
var selected = list.find('.ui-timepicker-selected');
|
||||
|
||||
if (!selected.length) {
|
||||
list.find('li').each(function(i, obj) {
|
||||
if ($(obj).position().top > 0) {
|
||||
selected = $(obj);
|
||||
return false;
|
||||
}
|
||||
});
|
||||
selected.addClass('ui-timepicker-selected');
|
||||
|
||||
} else if (!selected.is(':first-child')) {
|
||||
selected.removeClass('ui-timepicker-selected');
|
||||
selected.prev().addClass('ui-timepicker-selected');
|
||||
|
||||
if (selected.prev().position().top < selected.outerHeight()) {
|
||||
list.scrollTop(list.scrollTop() - selected.outerHeight());
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
|
||||
case 40: // down
|
||||
selected = list.find('.ui-timepicker-selected');
|
||||
|
||||
if (selected.length === 0) {
|
||||
list.find('li').each(function(i, obj) {
|
||||
if ($(obj).position().top > 0) {
|
||||
selected = $(obj);
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
selected.addClass('ui-timepicker-selected');
|
||||
} else if (!selected.is(':last-child')) {
|
||||
selected.removeClass('ui-timepicker-selected');
|
||||
selected.next().addClass('ui-timepicker-selected');
|
||||
|
||||
if (selected.next().position().top + 2*selected.outerHeight() > list.outerHeight()) {
|
||||
list.scrollTop(list.scrollTop() + selected.outerHeight());
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
|
||||
case 27: // escape
|
||||
list.find('li').removeClass('ui-timepicker-selected');
|
||||
list.hide();
|
||||
break;
|
||||
|
||||
case 9: //tab
|
||||
methods.hide();
|
||||
break;
|
||||
|
||||
default:
|
||||
return _screenInput(e, self);
|
||||
}
|
||||
}
|
||||
|
||||
function _screenInput(e, self)
|
||||
{
|
||||
return !self.data('timepicker-settings').disableTextInput || e.ctrlKey || e.altKey || e.metaKey || (e.keyCode != 2 && (e.keyCode < 46 || e.keyCode > 90));
|
||||
}
|
||||
|
||||
/*
|
||||
* Time typeahead
|
||||
*/
|
||||
function _keyuphandler(e)
|
||||
{
|
||||
var self = $(this);
|
||||
var list = self.data('timepicker-list');
|
||||
|
||||
if (!list || !list.is(':visible')) {
|
||||
return true;
|
||||
}
|
||||
|
||||
switch (e.keyCode) {
|
||||
|
||||
case 96: // numpad numerals
|
||||
case 97:
|
||||
case 98:
|
||||
case 99:
|
||||
case 100:
|
||||
case 101:
|
||||
case 102:
|
||||
case 103:
|
||||
case 104:
|
||||
case 105:
|
||||
case 48: // numerals
|
||||
case 49:
|
||||
case 50:
|
||||
case 51:
|
||||
case 52:
|
||||
case 53:
|
||||
case 54:
|
||||
case 55:
|
||||
case 56:
|
||||
case 57:
|
||||
case 65: // a
|
||||
case 77: // m
|
||||
case 80: // p
|
||||
case 186: // colon
|
||||
case 8: // backspace
|
||||
case 46: // delete
|
||||
_setSelected(self, list);
|
||||
break;
|
||||
|
||||
default:
|
||||
// list.find('li').removeClass('ui-timepicker-selected');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
function _selectValue(self)
|
||||
{
|
||||
var settings = self.data('timepicker-settings');
|
||||
var list = self.data('timepicker-list');
|
||||
var timeValue = null;
|
||||
|
||||
var cursor = list.find('.ui-timepicker-selected');
|
||||
|
||||
if (cursor.hasClass('ui-timepicker-disabled')) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (cursor.length) {
|
||||
// selected value found
|
||||
timeValue = cursor.data('time');
|
||||
|
||||
} else if (_getTimeValue(self)) {
|
||||
|
||||
// no selected value; fall back on input value
|
||||
timeValue = _time2int(_getTimeValue(self));
|
||||
|
||||
_setSelected(self, list);
|
||||
}
|
||||
|
||||
if (timeValue !== null) {
|
||||
var timeString = _int2time(timeValue, settings.timeFormat);
|
||||
_setTimeValue(self, timeString);
|
||||
}
|
||||
|
||||
self.trigger('change').trigger('changeTime');
|
||||
return true;
|
||||
}
|
||||
|
||||
function _int2duration(seconds)
|
||||
{
|
||||
var minutes = Math.round(seconds/60);
|
||||
var duration;
|
||||
|
||||
if (Math.abs(minutes) < 60) {
|
||||
duration = [minutes, _lang.mins];
|
||||
} else if (minutes == 60) {
|
||||
duration = ['1', _lang.hr];
|
||||
} else {
|
||||
var hours = (minutes/60).toFixed(1);
|
||||
if (_lang.decimal != '.') hours = hours.replace('.', _lang.decimal);
|
||||
duration = [hours, _lang.hrs];
|
||||
}
|
||||
|
||||
return duration.join(' ');
|
||||
}
|
||||
|
||||
function _int2time(seconds, format)
|
||||
{
|
||||
if (seconds === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
var time = new Date(_baseDate.valueOf() + (seconds*1000));
|
||||
var output = '';
|
||||
var hour, code;
|
||||
|
||||
for (var i=0; i<format.length; i++) {
|
||||
|
||||
code = format.charAt(i);
|
||||
switch (code) {
|
||||
|
||||
case 'a':
|
||||
output += (time.getHours() > 11) ? 'pm' : 'am';
|
||||
break;
|
||||
|
||||
case 'A':
|
||||
output += (time.getHours() > 11) ? 'PM' : 'AM';
|
||||
break;
|
||||
|
||||
case 'g':
|
||||
hour = time.getHours() % 12;
|
||||
output += (hour === 0) ? '12' : hour;
|
||||
break;
|
||||
|
||||
case 'G':
|
||||
output += time.getHours();
|
||||
break;
|
||||
|
||||
case 'h':
|
||||
hour = time.getHours() % 12;
|
||||
|
||||
if (hour !== 0 && hour < 10) {
|
||||
hour = '0'+hour;
|
||||
}
|
||||
|
||||
output += (hour === 0) ? '12' : hour;
|
||||
break;
|
||||
|
||||
case 'H':
|
||||
hour = time.getHours();
|
||||
output += (hour > 9) ? hour : '0'+hour;
|
||||
break;
|
||||
|
||||
case 'i':
|
||||
var minutes = time.getMinutes();
|
||||
output += (minutes > 9) ? minutes : '0'+minutes;
|
||||
break;
|
||||
|
||||
case 's':
|
||||
seconds = time.getSeconds();
|
||||
output += (seconds > 9) ? seconds : '0'+seconds;
|
||||
break;
|
||||
|
||||
default:
|
||||
output += code;
|
||||
}
|
||||
}
|
||||
|
||||
return output;
|
||||
}
|
||||
|
||||
function _time2int(timeString)
|
||||
{
|
||||
if (timeString === '') return null;
|
||||
if (!timeString || timeString+0 == timeString) return timeString;
|
||||
|
||||
if (typeof(timeString) == 'object') {
|
||||
timeString = timeString.getHours()+':'+_pad2(timeString.getMinutes())+':'+_pad2(timeString.getSeconds());
|
||||
}
|
||||
|
||||
timeString = timeString.toLowerCase();
|
||||
|
||||
var d = new Date(0);
|
||||
var time;
|
||||
|
||||
// try to parse time input
|
||||
if (timeString.indexOf(":") === -1) {
|
||||
// no colon present
|
||||
time = timeString.match(/^([0-9]):?([0-5][0-9])?:?([0-5][0-9])?\s*([pa]?)m?$/);
|
||||
|
||||
if (!time) {
|
||||
time = timeString.match(/^([0-2][0-9]):?([0-5][0-9])?:?([0-5][0-9])?\s*([pa]?)m?$/);
|
||||
}
|
||||
} else {
|
||||
time = timeString.match(/^(\d{1,2})(?::([0-5][0-9]))?(?::([0-5][0-9]))?\s*([pa]?)m?$/);
|
||||
}
|
||||
|
||||
if (!time) {
|
||||
return null;
|
||||
}
|
||||
|
||||
var hour = parseInt(time[1]*1, 10);
|
||||
var hours;
|
||||
|
||||
if (time[4]) {
|
||||
if (hour == 12) {
|
||||
hours = (time[4] == 'p') ? 12 : 0;
|
||||
} else {
|
||||
hours = (hour + (time[4] == 'p' ? 12 : 0));
|
||||
}
|
||||
|
||||
} else {
|
||||
hours = hour;
|
||||
}
|
||||
|
||||
var minutes = ( time[2]*1 || 0 );
|
||||
var seconds = ( time[3]*1 || 0 );
|
||||
return hours*3600 + minutes*60 + seconds;
|
||||
}
|
||||
|
||||
function _pad2(n) {
|
||||
return ("0" + n).slice(-2);
|
||||
}
|
||||
|
||||
// Plugin entry
|
||||
$.fn.timepicker = function(method)
|
||||
{
|
||||
if(methods[method]) { return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); }
|
||||
else if(typeof method === "object" || !method) { return methods.init.apply(this, arguments); }
|
||||
else { $.error("Method "+ method + " does not exist on jQuery.timepicker"); }
|
||||
};
|
||||
}));
|
||||
|
|
@ -1,15 +1,15 @@
|
|||
define(['jquery', 'model', '../base/ui', 'jquery-ui', 'bootstrap-markdown', 'jquery.form'],
|
||||
define(['jquery', 'model', '../base/ui', 'jquery-ui', 'bootstrap-markdown', 'jquery.form', 'jquery.timepicker'],
|
||||
function ($, EventModel, UI) { return function (mapMaker) {
|
||||
$.event.props.push('dataTransfer');
|
||||
$(document).ready(function () {
|
||||
var create_form = $('form#create-event');
|
||||
var find_form = $('form#find-event');
|
||||
var $create_form = $('form#create-event');
|
||||
var $find_form = $('form#find-event');
|
||||
|
||||
var file_input = create_form.find('input[type="file"]');
|
||||
var upload_div = create_form.find('#image-upload');
|
||||
upload_div.on("click", function(ev) {
|
||||
var $file_input = $create_form.find('input[type="file"]');
|
||||
var $upload_div = $create_form.find('#image-upload');
|
||||
$upload_div.on("click", function(ev) {
|
||||
ev.preventDefault();
|
||||
file_input.click();
|
||||
$file_input.click();
|
||||
}).on("dragenter dragover drop", function(ev) {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
|
|
@ -18,16 +18,16 @@ function ($, EventModel, UI) { return function (mapMaker) {
|
|||
ev.stopPropagation();
|
||||
handleImg(ev.dataTransfer.files[0]);
|
||||
});
|
||||
file_input.on("change", function (ev) {
|
||||
$file_input.on("change", function (ev) {
|
||||
handleImg(this.files[0]);
|
||||
});
|
||||
// based on MDN example
|
||||
function handleImg(file) {
|
||||
if (file.type.match(/image.*/)) {
|
||||
if (!upload_div._prev_text)
|
||||
upload_div._prev_text = upload_div.text();
|
||||
upload_div.html("<img />");
|
||||
var img = upload_div.find("img")[0];
|
||||
if (!$upload_div._prev_text)
|
||||
$upload_div._prev_text = $upload_div.text();
|
||||
$upload_div.html("<img />");
|
||||
var img = $upload_div.find("img")[0];
|
||||
img.file = file;
|
||||
|
||||
var reader = new FileReader();
|
||||
|
|
@ -41,30 +41,42 @@ function ($, EventModel, UI) { return function (mapMaker) {
|
|||
}
|
||||
}
|
||||
|
||||
create_form.find('button[type="submit"]').click(function (ev) {
|
||||
$create_form.find('button[type="submit"]').click(function (ev) {
|
||||
ev.preventDefault();
|
||||
create_form.submit();
|
||||
$create_form.submit();
|
||||
});
|
||||
create_form.ajaxForm({
|
||||
dataType: 'json',
|
||||
clearForm: true,
|
||||
success: function (data) {
|
||||
console.log(data);
|
||||
$create_form.on("submit", function(ev) {
|
||||
ev.preventDefault();
|
||||
var form_fields = $create_form.serializeArray();
|
||||
var data = { event: {} };
|
||||
form_fields.forEach(function (f) {
|
||||
if (f.name) switch (f.name) {
|
||||
case '_csrf':
|
||||
data[f.name] = f.value;
|
||||
break;
|
||||
case 'address': // TODO: split address into two lines
|
||||
default:
|
||||
data.event[f.name] = f.value;
|
||||
}
|
||||
});
|
||||
$.post($create_form.attr('action'), data, function (data) {
|
||||
console.log(data.event);
|
||||
if (data.event) {
|
||||
toggleCreateForm();
|
||||
mapMaker.addMarker(new EventModel(data.event));
|
||||
}
|
||||
},
|
||||
}, 'json');
|
||||
return false;
|
||||
});
|
||||
|
||||
find_form.find('button[type="submit"]').click(function (ev) {
|
||||
$find_form.find('button[type="submit"]').click(function (ev) {
|
||||
ev.preventDefault();
|
||||
find_form.submit();
|
||||
$find_form.submit();
|
||||
});
|
||||
var find_when = find_form.find('input[name="find-when"]');
|
||||
find_when.blur(function(ev) { find_form.submit() });
|
||||
var find_when = $find_form.find('input[name="find-when"]');
|
||||
find_when.blur(function(ev) { $find_form.submit() });
|
||||
mmm = mapMaker;
|
||||
find_form.on("submit", function(ev) {
|
||||
$find_form.on("submit", function(ev) {
|
||||
ev.preventDefault();
|
||||
EventModel.all(function (models) {
|
||||
mapMaker.clearMarkers();
|
||||
|
|
@ -89,13 +101,17 @@ function ($, EventModel, UI) { return function (mapMaker) {
|
|||
});
|
||||
});
|
||||
|
||||
|
||||
// setup form toggle button
|
||||
function toggleCreateForm() {
|
||||
create_form[0].reset();
|
||||
upload_div.find('> img').attr('src', '');
|
||||
upload_div.text(upload_div._prev_text);
|
||||
var $select = $('select[name="attendees"]');
|
||||
$create_form[0].reset();
|
||||
$select.next('.ui-select').remove();
|
||||
UI.select($select);
|
||||
$upload_div.find('> img').attr('src', '');
|
||||
$upload_div.text($upload_div._prev_text);
|
||||
|
||||
create_form.toggleClass('hidden');
|
||||
$create_form.toggleClass('hidden');
|
||||
$("#add-event-button").toggleClass('hidden');
|
||||
}
|
||||
$(".formExpandButton").click(function(ev) {
|
||||
|
|
@ -120,13 +136,27 @@ function ($, EventModel, UI) { return function (mapMaker) {
|
|||
}
|
||||
}
|
||||
});
|
||||
EventModel.all(function (models) { mapMaker.dropPins(models); });
|
||||
|
||||
$('.datepicker').datepicker().each(function(i, elem) {
|
||||
$(elem).next('.icon').click(function () { $(elem).focus();});
|
||||
});
|
||||
var $beginTime = $('[name="beginTime"]'),
|
||||
$endTime = $('[name="endTime"]');
|
||||
$('.timepicker').timepicker().on('showTimepicker', function () {
|
||||
var $parent = $(this).parent();
|
||||
$parent.find('.ui-timepicker-wrapper')
|
||||
.css('width', $parent.css('width'))
|
||||
.css('left', '0px');
|
||||
});
|
||||
$beginTime.timepicker({
|
||||
appendTo: function (elem) { return $(elem).parent(); }
|
||||
});
|
||||
$endTime.timepicker({
|
||||
appendTo: function (elem) { return $(elem).parent(); },
|
||||
showDuration: true
|
||||
});
|
||||
|
||||
UI.select('select[name="attendees"]');
|
||||
EventModel.all(function (models) { mapMaker.dropPins(models); });
|
||||
|
||||
window.scroll(0,0);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ require.config({
|
|||
'jquery.form': '/ext/js/jquery.form',
|
||||
'markdown': '/ext/js/markdown',
|
||||
'to-markdown': '/ext/js/to-markdown',
|
||||
'jquery.timepicker': '/ext/js/jquery.timepicker',
|
||||
'bootstrap-markdown': '/ext/js/bootstrap-markdown',
|
||||
},
|
||||
shim: {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
|
||||
{% block title %}{% endblock %}
|
||||
{% block head %}
|
||||
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
|
||||
<link rel="stylesheet" href="/ext/css/jquery-ui.css" />
|
||||
<link rel="stylesheet" href="/css/events.css">
|
||||
{% endblock %}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
{% block title %}Event Map{% endblock %}
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
<link rel="stylesheet" href="/ext/css/jquery.timepicker.css">
|
||||
<link rel="stylesheet" href="/ext/css/bootstrap-markdown.css">
|
||||
{% endblock %}
|
||||
|
||||
|
|
@ -36,7 +37,7 @@
|
|||
</fieldset>
|
||||
<fieldset>
|
||||
<label for="attendees"> How many attendees are you expecting? </label>
|
||||
<div class="cell"><select name="attendees">
|
||||
<div><select name="attendees">
|
||||
<option value=0> 1-10 </option>
|
||||
<option value=1> 10-20 </option>
|
||||
<option value=2> 20-50 </option>
|
||||
|
|
@ -48,7 +49,7 @@
|
|||
</select></div><br />
|
||||
|
||||
<label for="address"> Event location </label>
|
||||
<span class="cell">
|
||||
<span class="cell ui-input ui-append">
|
||||
<input name="address" type="text" />
|
||||
</span>
|
||||
|
||||
|
|
@ -56,7 +57,7 @@
|
|||
<input name="longitude" type="hidden" />
|
||||
|
||||
<label for="registerLink"> Event Link </label>
|
||||
<span class="cell">
|
||||
<span class="cell ui-input ui-append">
|
||||
<input name="registerLink" type="url"
|
||||
placeholder="Link to registration page" />
|
||||
</span>
|
||||
|
|
@ -64,14 +65,14 @@
|
|||
{% for i in ['begin','end'] %}
|
||||
<label for="{{i}}Date"> Event {{i}}s </label>
|
||||
<div class='datetime'>
|
||||
<span class="ui-input ui-append ui-select">
|
||||
<span class="ui-append ui-select">
|
||||
<span class="icon-calendar"></span>
|
||||
<input name="{{i}}Date" type="text" class="datepicker"
|
||||
placeholder="--/--/--" />
|
||||
<a class="icon icon-chevron-down"></a>
|
||||
</span>
|
||||
<span class="ui-input">
|
||||
<input name="{{i}}Time" type="text"
|
||||
<span class="ui-append ui-input">
|
||||
<input name="{{i}}Time" type="text" class="timepicker"
|
||||
placeholder="--:-- --" />
|
||||
</span>
|
||||
</div>
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче