Skip to content

Commit

Permalink
optimized time picker
Browse files Browse the repository at this point in the history
A1Gard committed Sep 27, 2024
1 parent 178f851 commit b6019d8
Showing 2 changed files with 53 additions and 37 deletions.
6 changes: 3 additions & 3 deletions resources/js/components/MetaInput.vue
Original file line number Diff line number Diff line change
@@ -247,12 +247,12 @@ export default {
methods: {
showModal(i){
console.log('ii',i);
// console.log('ii',i);
this.qOnEdit = i;
this.modal = true;
},
changeImgIndex(i){
console.log('jjj',i);
// console.log('jjj',i);
this.quantities[this.qOnEdit].image = i;
},
remQ(i){
@@ -309,7 +309,7 @@ export default {
},
watch: {
category_id: function (old,n) {
console.log(old,n,'x');
// console.log(old,n,'x');
// if (this.lastCat != this.category_id){
// this.lastCat = this.category_id;
this.updateProps();
84 changes: 50 additions & 34 deletions resources/js/components/vueTimePicker.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div class="time-picker">
<div class="time-picker" >
<div class="input-group mb-3">
<div class="input-group-prepend" id="vue-search-btn" @click="modalShow">
<span class="input-group-text" id="basic-addon1">
@@ -16,6 +16,7 @@
<div class="col"
@touchstart="startDrag('minute', $event)"
@mousedown="startDrag('minute', $event)"
@wheel="handleScroll('minute',$event)"
>
<div>
<ul :style="mTop">
@@ -28,6 +29,7 @@
<div class="col"
@touchstart="startDrag('hour', $event)"
@mousedown="startDrag('hour', $event)"
@wheel="handleScroll('hour',$event)"
>
<div>
<ul :style="hTop">
@@ -40,6 +42,7 @@
<div class="col" v-if="amPm"
@touchstart="startDrag('ampm', $event)"
@mousedown="startDrag('ampm', $event)"
@wheel="handleScroll('ampm',$event)"
>
<div>
<ul :style="amTop" @click="ap = Math.abs(ap - 1)">
@@ -135,6 +138,49 @@ export default {
}
},
methods: {
handleScroll(column,e){
e.preventDefault();
let change = -1;
if (e.deltaY > 0){
change = 1;
}
this.changeHandle(column,change);
},
changeHandle(column, change){
if (column == 'ampm'){
if (change == 1) {
this.ap = 1;
} else if (change == -1) {
this.ap = 0;
}
}else if (column === 'minute') {
this.m += change;
if (this.m < 0) {
this.m = 0;
}
if (this.m > 59) {
this.m = 59;
}
} else if (column === 'hour') {
this.h += change;
if (this.amPm) {
if (this.h < 1) {
this.h = 1;
}
if (this.h > this.maxHour) {
this.h = this.maxHour;
}
} else {
if (this.h < 0) {
this.h = 0;
}
if (this.h > this.maxHour - 1) {
this.h = this.maxHour - 1;
}
}
}
},
modalShow() {
this.modal = true;
document.addEventListener('click', this.handleModal);
@@ -189,39 +235,7 @@ export default {
let change = Math.round(deltaY / this.tolerance);
// console.log(change,currentY);
if (column === 'minute') {
this.m += change;
if (this.m < 0) {
this.m = 0;
}
if (this.m > 59) {
this.m = 59;
}
} else if (column === 'hour') {
this.h += change;
if (this.amPm) {
if (this.h < 1) {
this.h = 1;
}
if (this.h > this.maxHour) {
this.h = this.maxHour;
}
} else {
if (this.h < 0) {
this.h = 0;
}
if (this.h > this.maxHour - 1) {
this.h = this.maxHour - 1;
}
}
} else if (column === 'ampm' && this.amPm) {
if (change == 1) {
this.ap = 1;
} else if (change == -1) {
this.ap = 0;
}
}
this.changeHandle(column,change);
if (change != 0) {
this.startY = currentY;
@@ -263,6 +277,8 @@ export default {
x = this.xvalue;
}
this.calc(x);
// window.addEventListener('scroll', this.handleScroll);
}
};
</script>

0 comments on commit b6019d8

Please sign in to comment.