yyc12345/coconut-leaf
1
0
Fork 0
Code Activity

fully fix datetimepicker

Browse Source
This commit is contained in:
yyc12345
2021-04-10 09:15:44 +08:00
parent 6bf624a67f
commit 8323a9c1d8
10 changed files with 72 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/static/css/datetimepicker.css
View File

@@ -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] {

86
src/static/js/datetimepicker.js
View File

@@ -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);
}

9
src/static/js/page/event.js
View File

@@ -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);}})

2
src/templates/admin.html
View File

@@ -4,7 +4,7 @@
<head>
<meta charset="utf-8">
<title id="ccn-pageName"></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
<script src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.12.1/js/all.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.js"></script>

2
src/templates/calendar.html
View File

@@ -4,7 +4,7 @@
<head>
<meta charset="utf-8">
<title id="ccn-pageName"></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
<script src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.12.1/js/all.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.js"></script>

2
src/templates/collection.html
View File

@@ -4,7 +4,7 @@
<head>
<meta charset="utf-8">
<title id="ccn-pageName"></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
<script src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.12.1/js/all.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.js"></script>

2
src/templates/event.html
View File

@@ -4,7 +4,7 @@
<head>
<meta charset="utf-8">
<title id="ccn-pageName"></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
<script src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.12.1/js/all.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.js"></script>

2
src/templates/home.html
View File

@@ -4,7 +4,7 @@
<head>
<meta charset="utf-8">
<title id="ccn-pageName"></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
<script src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.12.1/js/all.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.js"></script>

2
src/templates/login.html
View File

@@ -4,7 +4,7 @@
<head>
<meta charset="utf-8">
<title id="ccn-pageName"></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
<script src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.12.1/js/all.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.js"></script>

2
src/templates/todo.html
View File

@@ -4,7 +4,7 @@
<head>
<meta charset="utf-8">
<title id="ccn-pageName"></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
<script src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.12.1/js/all.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.js"></script>