diff --git a/src/static/css/datetimepicker.css b/src/static/css/datetimepicker.css
index f0fc54b..39e7578 100644
--- a/src/static/css/datetimepicker.css
+++ b/src/static/css/datetimepicker.css
@@ -72,6 +72,8 @@ div.pickerContainer > svg {
div.pickerContainer > svg > text {
dominant-baseline: middle;
text-anchor: middle;
+ user-select: none;
+ cursor: default;
}
div.pickerContainer > svg > circle[type=background] {
diff --git a/src/static/js/datetimepicker.js b/src/static/js/datetimepicker.js
index a3c0def..795434c 100644
--- a/src/static/js/datetimepicker.js
+++ b/src/static/js/datetimepicker.js
@@ -31,11 +31,7 @@ function ccn_datetimepicker_Insert() {
$('body').append(ccn_template_datetimepicker.render());
// bind size event and trigge once
- $(window).resize(function (){
- $('div.pickerContainer > svg').each(function() {
- ccn_datetimepicker_OnSvgResize($(this));
- });
- }).resize();
+ $(window).resize(ccn_datetimepicker_RefreshSvg).resize();
// add data attr
for(var i = 0; i < 3; i++) {
@@ -77,12 +73,18 @@ function ccn_datetimepicker_Insert() {
$('#ccn-datetimepicker-panelHour')
.mousedown(ccn_datetimepicker_StartDragHour)
.mousemove(ccn_datetimepicker_DraggingHour)
- .mouseup(ccn_datetimepicker_StopDragHour);
+ .mouseup(ccn_datetimepicker_StopDragHour)
+ .on('touchstart', ccn_datetimepicker_StartDragHour)
+ .on('touchmove', ccn_datetimepicker_DraggingHour)
+ .on('touchend', ccn_datetimepicker_StopDragHour);
$('#ccn-datetimepicker-panelMinute')
.mousedown(ccn_datetimepicker_StartDragMinute)
.mousemove(ccn_datetimepicker_DraggingMinute)
- .mouseup(ccn_datetimepicker_StopDragMinute);
+ .mouseup(ccn_datetimepicker_StopDragMinute)
+ .on('touchstart', ccn_datetimepicker_StartDragMinute)
+ .on('touchmove', ccn_datetimepicker_DraggingMinute)
+ .on('touchend', ccn_datetimepicker_StopDragMinute);
$('#ccn-datetimepicker-btnConfirm').click(ccn_datetimepicker_Confirm);
$('#ccn-datetimepicker-btnCancel').click(ccn_datetimepicker_Cancel);
@@ -110,9 +112,9 @@ function ccn_datetimepicker_Modal(mode, pickerIndex, isUTC) {
$('header.pickerHeader > div[type=year]').show();
break;
}
- ccn_datetimepicker_SwitchTab(mode);
$('#ccn-datetimepicker-modal').addClass('is-active');
+ ccn_datetimepicker_SwitchTab(mode); // this call is set in there by design. if you don't show the dialog, the call of svg resize will fail.
}
function ccn_datetimepicker_Confirm() {
@@ -156,9 +158,11 @@ function ccn_datetimepicker_SwitchTab(newTab) {
break;
case ccn_datetimepicker_tabType.hour:
$('#ccn-datetimepicker-panelHour').show();
+ ccn_datetimepicker_RefreshSvg(); // immediately trigger once svg resize
break;
case ccn_datetimepicker_tabType.minute:
$('#ccn-datetimepicker-panelMinute').show();
+ ccn_datetimepicker_RefreshSvg(); // immediately trigger once svg resize
break;
}
}
@@ -268,6 +272,15 @@ function ccn_datetimepicker_RefreshDisplay(tab) {
}
}
+function ccn_datetimepicker_RefreshSvg() {
+ // svg resize only can be called when the svg is showing.
+ // so call this func in window resize event or
+ // displaying svg.
+ $('div.pickerContainer > svg').each(function() {
+ ccn_datetimepicker_OnSvgResize($(this));
+ });
+}
+
function ccn_datetimepicker_Str2TabType(strl) {
switch(strl) {
case 'year':
@@ -284,6 +297,31 @@ function ccn_datetimepicker_Str2TabType(strl) {
return undefined;
}
+function ccn_datetimepicker_GetUniformedXY(mouseOrTouchEvent, elements) {
+ var offset = {
+ left: elements.offset().left,
+ top: elements.offset().top,
+ halfWidth: elements.width() / 2,
+ halfHeight: elements.height() / 2,
+ halfSquareWidthHeight: Math.min(elements.width(), elements.height()) / 2
+ }
+ if(typeof(mouseOrTouchEvent.pageX) != 'undefined' && typeof(mouseOrTouchEvent.pageY) != 'undefined') {
+ offset.realX = mouseOrTouchEvent.pageX;
+ offset.realY = mouseOrTouchEvent.pageY;
+ } else if(typeof(mouseOrTouchEvent.targetTouches) != 'undefined' && mouseOrTouchEvent.targetTouches.length >= 1) {
+ offset.realX = mouseOrTouchEvent.targetTouches[0].pageX;
+ offset.realY = mouseOrTouchEvent.targetTouches[0].pageY;
+ } else {
+ offset.realX = 0;
+ offset.realY = 0;
+ }
+
+ var _x = (offset.realX - offset.left - offset.halfWidth) / offset.halfSquareWidthHeight * ccn_datetimepicker_dialPlateRadius;
+ var _y = -((offset.realY - offset.top - offset.halfHeight) / offset.halfSquareWidthHeight * ccn_datetimepicker_dialPlateRadius);
+
+ return {x: _x, y: _y};
+}
+
function ccn_datetimepicker_PrevNextYear(isPrev) {
ccn_datetimepicker_displayCacheDateTime.setFullYear(
ccn_datetimepicker_displayCacheDateTime.getFullYear() + (isPrev ? -12 : 12));
@@ -359,15 +397,9 @@ function ccn_datetimepicker_StartDragHour() { ccn_datetimepicker_enableHourDrag
function ccn_datetimepicker_DraggingHour(e) {
if (!ccn_datetimepicker_enableHourDrag) return;
- var ele = $('#ccn-datetimepicker-panelHour')
- var offset = {
- left: ele.offset().left,
- top: ele.offset().top,
- width: ele.width(),
- height: ele.height()
- }
- var x = (e.pageX - offset.left) / offset.width * ccn_datetimepicker_dialPlateWidth - ccn_datetimepicker_dialPlateRadius;
- var y = -((e.pageY - offset.top) / offset.height * ccn_datetimepicker_dialPlateWidth - ccn_datetimepicker_dialPlateRadius);
+ var offset = ccn_datetimepicker_GetUniformedXY(e, $('#ccn-datetimepicker-panelHour'));
+ var x = offset.x;
+ var y = offset.y;
var distance = Math.sqrt(x * x + y * y);
var angle = Math.acos(x / distance);
@@ -388,6 +420,8 @@ function ccn_datetimepicker_DraggingHour(e) {
ccn_datetimepicker_displayCacheDateTime.setHours(number);
ccn_datetimepicker_RefreshDisplay(ccn_datetimepicker_tabType.hour);
}
+
+ e.preventDefault();
}
function ccn_datetimepicker_StopDragHour() {
ccn_datetimepicker_enableHourDrag = false;
@@ -404,15 +438,9 @@ function ccn_datetimepicker_StartDragMinute() { ccn_datetimepicker_enableMinuteD
function ccn_datetimepicker_DraggingMinute(e) {
if (!ccn_datetimepicker_enableMinuteDrag) return;
- var ele = $('#ccn-datetimepicker-panelMinute')
- var offset = {
- left: ele.offset().left,
- top: ele.offset().top,
- width: ele.width(),
- height: ele.height()
- }
- var x = (e.pageX - offset.left) / offset.width * ccn_datetimepicker_dialPlateWidth - ccn_datetimepicker_dialPlateRadius;
- var y = -((e.pageY - offset.top) / offset.height * ccn_datetimepicker_dialPlateWidth - ccn_datetimepicker_dialPlateRadius);
+ var offset = ccn_datetimepicker_GetUniformedXY(e, $('#ccn-datetimepicker-panelMinute'));
+ var x = offset.x;
+ var y = offset.y;
var distance = Math.sqrt(x * x + y * y);
var angle = Math.acos(x / distance);
@@ -431,6 +459,8 @@ function ccn_datetimepicker_DraggingMinute(e) {
ccn_datetimepicker_displayCacheDateTime.setMinutes(number);
ccn_datetimepicker_RefreshDisplay(ccn_datetimepicker_tabType.minute);
}
+
+ e.preventDefault();
}
function ccn_datetimepicker_StopDragMinute() {
ccn_datetimepicker_enableMinuteDrag = false;
@@ -438,7 +468,9 @@ function ccn_datetimepicker_StopDragMinute() {
ccn_datetimepicker_internalDateTime.setMinutes(ccn_datetimepicker_displayCacheDateTime.getMinutes());
ccn_datetimepicker_ClampDateTime(ccn_datetimepicker_internalDateTime);
- // no page need to be jumped
+ // no page need to go to
+ // but we need refresh current page
+ ccn_datetimepicker_RefreshDisplay(ccn_datetimepicker_tabType.minute);
}
diff --git a/src/static/js/page/event.js b/src/static/js/page/event.js
index e6b6dd6..1be6f23 100644
--- a/src/static/js/page/event.js
+++ b/src/static/js/page/event.js
@@ -28,17 +28,16 @@ $(document).ready(function() {
// bind event
$('input[type=radio][name=loop-method]').click(ccn_event_RefreshRadioDiaplay);
$('input[type=radio][name=loop-end]').click(ccn_event_RefreshRadioDiaplay);
- $('.datetimepicker-year[datetimepicker=1],.datetimepicker-month[datetimepicker=1],.datetimepicker-day[datetimepicker=1]').bind(
- 'input propertychange',
- ccn_event_RefreshLoopMonthType
- );
$('#ccn-event-btnSubmit').click(ccn_event_btnSubmit);
$('#ccn-event-btnCancel').click(ccn_event_btnCancel);
$('#ccn-event-btnSpot').click(ccn_event_btnSpot);
$('#ccn-event-btnFullDay').click(ccn_event_btnFullDay);
$('#ccn-event-btnStartDateTime')
- .prop('funcs', {callback: function() {ccn_event_UpdateDateTimePickerButton(1);}})
+ .prop('funcs', {callback: function() {
+ ccn_event_UpdateDateTimePickerButton(1);
+ ccn_event_RefreshLoopMonthType();
+ }})
.click(ccn_event_btnDateTimePicker);
$('#ccn-event-btnEndDateTime')
.prop('funcs', {callback: function() {ccn_event_UpdateDateTimePickerButton(2);}})
diff --git a/src/templates/admin.html b/src/templates/admin.html
index 7980520..8cba117 100644
--- a/src/templates/admin.html
+++ b/src/templates/admin.html
@@ -4,7 +4,7 @@
-
+
diff --git a/src/templates/calendar.html b/src/templates/calendar.html
index ffc3287..3a8726c 100644
--- a/src/templates/calendar.html
+++ b/src/templates/calendar.html
@@ -4,7 +4,7 @@
-
+
diff --git a/src/templates/collection.html b/src/templates/collection.html
index 0444b36..eef4351 100644
--- a/src/templates/collection.html
+++ b/src/templates/collection.html
@@ -4,7 +4,7 @@
-
+
diff --git a/src/templates/event.html b/src/templates/event.html
index 2c79092..4c689c4 100644
--- a/src/templates/event.html
+++ b/src/templates/event.html
@@ -4,7 +4,7 @@
-
+
diff --git a/src/templates/home.html b/src/templates/home.html
index 15cc889..cdc11bf 100644
--- a/src/templates/home.html
+++ b/src/templates/home.html
@@ -4,7 +4,7 @@
-
+
diff --git a/src/templates/login.html b/src/templates/login.html
index bf0c755..6fdf8c3 100644
--- a/src/templates/login.html
+++ b/src/templates/login.html
@@ -4,7 +4,7 @@
-
+
diff --git a/src/templates/todo.html b/src/templates/todo.html
index 828a517..299615c 100644
--- a/src/templates/todo.html
+++ b/src/templates/todo.html
@@ -4,7 +4,7 @@
-
+