I have followed this link https://codesandbox.io/s/25777826onclick-works-but-ondoubleclick-is-ignored-on-react-component-ul6f5?file=/src/App.tsx to create a double-click event. This is simple and works. But if I use this method modification to my code is not working.
This one is a sample double-click function:
const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
switch (e.detail) {
case 1:
console.log("click");
break;
case 2:
console.log("double click");
break;
case 3:
console.log("triple click");
break;
}
};
<div className="App">
<button onClick={handleClick}>Click me</button>
</div>
This is my original code:
const popUpHandler = e => {
console.log('popUpHandler', e);
if (e.type === 'Editor') {
e.cancel = true;
if (e.data.Id !== undefined) {
getApptDetail(e.data.Id).then(response => {
const doctorFromDb = response.data.doctor;
if (doctorFromDb.includes('|')) {
setStringOfDoctor(doctorFromDb.split('|'));
} else {
setStringOfDoctor([doctorFromDb]);
}
setAppt(response.data);
});
setOpenUpdatePopup(true);
} else if (e.data.StartTime !== undefined) {
setStringOfDoctor([]);
setStartTime(e.data.StartTime);
setDoctorName(e.data.Doctor);
setOpenPopup(true);
}
}
if (e.type === 'DeleteAlert') {
e.cancel = true;
if (e.data.Id !== undefined) {
getApptDetail(e.data.Id).then(response => {
setAppt(response.data);
});
setOpenDeletePopup(true);
}
}
if (e.type === 'QuickInfo' && e.target.classList[0] === 'e-work-cells') {
e.cancel = true;
if (e.data.StartTime !== undefined) {
setStringOfDoctor([]);
setStartTime(e.data.StartTime);
setDoctorName(e.data.Doctor);
setOpenPopup(true);
}
}
};
This one is after modification to my code, but is not working:
const popUpHandler = (e: React.MouseEvent<HTMLButtonElement>) => {
switch (e.detail) {
case 1:
console.log('Nothing');
break;
case 2:
if (e.type === 'Editor') {
e.cancel = true;
if (e.data.Id !== undefined) {
getApptDetail(e.data.Id).then(response => {
const doctorFromDb = response.data.doctor;
if (doctorFromDb.includes('|')) {
setStringOfDoctor(doctorFromDb.split('|'));
} else {
setStringOfDoctor([doctorFromDb]);
}
setAppt(response.data);
});
setOpenUpdatePopup(true);
} else if (e.data.StartTime !== undefined) {
setStringOfDoctor([]);
setStartTime(e.data.StartTime);
setDoctorName(e.data.Doctor);
setOpenPopup(true);
}
}
if (e.type === 'DeleteAlert') {
e.cancel = true;
if (e.data.Id !== undefined) {
getApptDetail(e.data.Id).then(response => {
setAppt(response.data);
});
setOpenDeletePopup(true);
}
}
if (e.type === 'QuickInfo' && e.target.classList[0] === 'e-work-cells') {
e.cancel = true;
if (e.data.StartTime !== undefined) {
setStringOfDoctor([]);
setStartTime(e.data.StartTime);
setDoctorName(e.data.Doctor);
setOpenPopup(true);
}
}
}
};
Hope someone can guide me on how to modify my original code and make it double-click (case 2 is double click). Thank you.
Related
When I click the Space button (break), it only plays video. It's not stopping with Space.
I don't know what the problem is.
document.addEventListener("keydown", (e) => {
const tagName = document.activeElement.tagName.toLowerCase();
if (tagName === "input") return;
switch (e.key.toLowerCase()) {
case " ":
if (tagName === "button") return;
case "k":
playVideo();
break;
}
});
// Play video function
function playVideo() {
play_pause.innerHTML = "pause";
play_pause.title = "pause";
video_player.classList.add("paused");
mainVideo.play();
}
// Pause video function
function pauseVideo() {
play_pause.innerHTML = "play_arrow";
play_pause.title = "play";
video_player.classList.remove("paused");
mainVideo.pause();
}
play_pause.addEventListener("click", () => {
const isVideoPaused = video_player.classList.contains("paused");
isVideoPaused ? pauseVideo() : playVideo();
});
mainVideo.addEventListener("play", () => {
playVideo();
});
let state = true;
switch (e.key.toLowerCase()) {
case e.keyKode == 32:
if(state == true){
playVideo();
state = false;
} else {
pauseVideo();
state = true;
}
break;
}
}
Try this out for space.
There is correct answer if someones need.
case e.keyCode == 32:
if (mainVideo.paused) {
mainVideo.play();
} else {
mainVideo.pause();
}
break;
I'm learning JavaScript, and I've done this code, I just want to be sure that I'm on the right way, would you have done it differently?
What bothers me is especially to have passed parameters to the functions "next" and "updateArrows" to know the origin of the clicks
const changeStep = document.querySelectorAll(".step");
const currentPaginate = document.querySelector(".pagination span.active");
const arrows = document.querySelectorAll(".arrow");
for (let arrow of arrows) {
arrow.addEventListener("click", function () {
updateArrows(arrow);
});
}
for (let step of changeStep) {
step.addEventListener("click", function () {
next(step);
});
}
function updateArrows(arrow, currentStep = null, update = true) {
let nextStep;
if (currentStep == null) {
currentStep = document.querySelector(".step.current");
if (arrow.classList.contains("arrow-bottom")) {
nextStep = currentStep.nextElementSibling;
} else {
nextStep = currentStep.previousElementSibling;
}
} else nextStep = document.querySelector(".step.current");
if (!arrow.classList.contains("impossible")) {
if (nextStep.dataset.id != 1 && nextStep.dataset.id != 5) {
arrows.forEach(function (arrow) {
if (arrow.classList.contains("impossible")) {
arrow.classList.remove("impossible");
}
});
} else if (nextStep.dataset.id == 5) {
if (arrow.previousElementSibling.classList.contains("impossible"))
arrow.previousElementSibling.classList.remove("impossible");
arrow.classList.add("impossible");
} else if (nextStep.dataset.id == 1) {
if (arrow.nextElementSibling.classList.contains("impossible"))
arrow.nextElementSibling.classList.remove("impossible");
arrow.classList.add("impossible");
}
if (update == true) next(nextStep, false);
}
}
function next(step, update = true) {
if (!step.classList.contains("current")) {
const currentStep = document.querySelector(".step.current");
const nextStep = step.dataset.id;
currentStep.classList.remove("current");
step.classList.add("current");
currentPaginate.textContent = "0" + nextStep;
let arrow;
if (currentStep.dataset.id < nextStep) {
arrow = document.querySelector(".arrow-bottom");
} else {
arrow = document.querySelector(".arrow-top");
}
if (update == true) updateArrows(arrow, currentStep, false);
}
}
I see what you mean.
Yes you are right. You can do it better...
Instead of passing the parameter arrow you can read from an event object
const changeStep = document.querySelectorAll(".step");
const currentPaginate = document.querySelector(".pagination span.active");
const arrows = document.querySelectorAll(".arrow");
for (let arrow of arrows) arrow.addEventListener("click", updateArrows);
for (let step of changeStep) step.addEventListener("click", next);
function updateArrows(e, currentStep = null, update = true) {
let arrow = null
e.target ? arrow=e.target : arrow=e
let nextStep;
if (currentStep == null) {
currentStep = document.querySelector(".step.current");
if (arrow.classList.contains("arrow-bottom")) {
nextStep = currentStep.nextElementSibling;
} else {
nextStep = currentStep.previousElementSibling;
}
} else nextStep = document.querySelector(".step.current");
if (!arrow.classList.contains("impossible")) {
if (nextStep.dataset.id != 1 && nextStep.dataset.id != 5) {
arrows.forEach(function (arrow) {
if (arrow.classList.contains("impossible")) {
arrow.classList.remove("impossible");
}
});
} else if (nextStep.dataset.id == 5) {
if (arrow.previousElementSibling.classList.contains("impossible"))
arrow.previousElementSibling.classList.remove("impossible");
arrow.classList.add("impossible");
} else if (nextStep.dataset.id == 1) {
if (arrow.nextElementSibling.classList.contains("impossible"))
arrow.nextElementSibling.classList.remove("impossible");
arrow.classList.add("impossible");
}
if (update == true) next(nextStep, false);
}
}
function next(e, update = true) {
let step = null
e.target ? step = e.target : step=e
if (!step.classList.contains("current")) {
const currentStep = document.querySelector(".step.current");
const nextStep = step.dataset.id;
currentStep.classList.remove("current");
step.classList.add("current");
currentPaginate.textContent = "0" + nextStep;
let arrow;
if (currentStep.dataset.id < nextStep) {
arrow = document.querySelector(".arrow-bottom");
} else {
arrow = document.querySelector(".arrow-top");
}
if (update == true) updateArrows(arrow, currentStep, false);
}
}
This should work, if not please contact me beforehand.
While activating the eventListener an event object is passed to function and e.target is an element which was clicked in this case.
What I did was crucial because you sometimes call this function from an eventListener and sometimes from a code. If the element has e.target then it's from an eventListener and if not then it's from code.
Didn't have a chance to test it since I don't have the rest of the code. Let me know if it works.
Here is my method:
Object.entries(query).forEach(([key, value]) => {
if (key === 'team_ids') {
if (typeof value === 'string') {
this.items.push(this.$store.getters.teamById(value));
} else {
value.forEach((itemId) => {
this.items.push(this.$store.getters.teamById(itemId));
});
}
else if (key === 'close_ids') {
if (typeof value === 'string') {
this.items.push(this.$store.getters.closeFriendsById(value));
} else {
value.forEach((friendId) => {
this.items.push(this.$store.getters.closeFriendsById(friendId));
});
}
} else {
if (key === 'name') this.name = value;
if (key === 'patr') this.patr= value;
}
});
I am trying to refactor it but now i'm stumped...
It don't looks good.
Any advice?
You can refactor if statements with a switch statement.
Try this:
Object.entries(query).forEach(([key, value]) => {
switch(key) {
case 'name' :
this.name = value; break;
case 'patr' :
this.patr = value; break;
default:
let getterMap = {
'team_ids': 'teamById',
'close_ids': 'closeFriendsById'
}
if(Array.isArray(value)) {
value.forEach((itemId) => {
this.items.push(this.$store.getters[getterMap[key]](itemId));
});
} else {
this.items.push(this.$store.getters[getterMap[key]](value));
}
break;
}
});
You can add more keys in getterMap if you want to.
It's not bad, You have ternary operators which make code cleaner and if statements are shortened. However, to if you want to refactor it, you should provide some info about the logic, because it is important in refactoring.
Here is my jQuery for dynamic attached elements. The jq-select-ring button can be multiple on the DOM. Basically, it was attached through an Ajax call.
let cKeyTabShift = false;
$("body").on("keydown", ".jq-select-ring", function (e) {
if (!isMobileSite) {
var keyCode = (e.keyCode ? e.keyCode : e.which);
if (keyCode == 9) {
if (e.shiftKey) {
cKeyTabShift = true;
} else {
cKeyTabShift = false;
}
}
}
});
$("body").on("focusout", ".jq-select-ring", function () {
if (!isMobileSite) {
const parentIndex = $(this).closest('.flex-item').index();
const $elmSliders = $(this).closest('.container').find("div[id^='touchCarousel-'][role='tabpanel']");
const $nextArrow = $(this).closest('.touch-carousel').find('.touchcarousel-next');
const $prevArrow = $(this).closest('.touch-carousel').find('.touchcarousel-prev');
if (typeof ($elmSliders) != "undefined" && $elmSliders.length > 0) {
if ($elmSliders.length > 1) {
if (parentIndex == 1 && cKeyTabShift == false) {
if (!$nextArrow.hasClass('endArrows')) {
$nextArrow.trigger('click');
}
}
if (parentIndex == 0 && cKeyTabShift == true) {
if (!$prevArrow.hasClass('endArrows')) {
$prevArrow.trigger('click');
cKeyTabShift = false;
}
}
}
}
}
});
The issue is the trigger click is called when I add breakpoint only.
$nextArrow.trigger('click');
$prevArrow.trigger('click');
Sorry not exactly a function chain but I have this code
ActivityService._hubConnection.on('Send', (activity: ActivityDto) => {
this.activity = activity;
if (activity.title === 'LOGIN') {
this.showActivity(`${activity.user.firstName} ${activity.user.surname} logged in.`);
} else if (activity.title === 'COMMENT') {
this.showActivity(`${activity.user.firstName} ${activity.user.surname} commented on: XB-ID-${activity.messageId}`, `/app/main/dashboard/xpert-detail/${activity.messageId}/comment`, null);
} else if (activity.title === 'ASSIGNED') {
this.showActivity(`${activity.user.firstName} ${activity.user.surname} assigned: XB-ID-${activity.messageId}`, `/app/main/dashboard/xpert-detail/${activity.messageId}/comment`);
} else if (activity.title === 'SYNC COMPLETE') {
this.showActivity(`Sync complete, View Changes`, `/app/main/dashboard/alerts/all`, 'complete');
} else if (activity.title === 'FILE') {
this.showActivity(`${activity.user.firstName} ${activity.user.surname} filed: XB-ID-${activity.messageId}`, `/app/main/dashboard/xpert-detail/${activity.messageId}/comment`)
} else if (activity.title === 'XPERT SYNC') {
this.showActivity(`Sync In Progress.`, `/app/main/dashboard/activity`, 'start' );
}
});
showActivity(popText, notifLink = null, sync = null) {
this.popupText = popText;
if (notifLink !== null) {
this.notifLink = notifLink;
}
if (sync !== null) {
if (sync === 'complete') {
this._activityService.finishSync();
} else if (sync === 'start') {
this._activityService.startSync();
}
}
this.showNotif();
}
showNotif() {
const notif = <HTMLElement>document.querySelector('.notification-tab');
notif.style.display = 'flex';
notif.style.bottom = '0';
setTimeout(() => {
notif.style.bottom = '-50px';
setTimeout(() => {
notif.style.display = 'none';
}, 500);
}, 5000);
}
now I cant figure out why this isnt working, basically what is happening is say im recieving a comment, so the activity.title === 'COMMENT', it should run the showActivity() function, which then should run the showNotif() function, ive put breakpoints on every part of the functions and the breakpoint hits the this.showActivity() but then nothing happens? none of the other breakpoints are hit and I cannot figure out what the problem is! It doesnt make any sense to me.
Any help would be appreciated, I have no idea what could be going wrong...
Thanks
Try to wrap you functions to try.. catch, maybe there is uncatch exception.
showActivity(popText, notifLink = null, sync = null) {
try {
this.popupText = popText;
if (notifLink !== null) {
this.notifLink = notifLink;
}
if (sync !== null) {
if (sync === 'complete') {
this._activityService.finishSync();
} else if (sync === 'start') {
this._activityService.startSync();
}
}
this.showNotif();
} catch (e) {
console.error(e);
}
}
And wrap here too)
if (activity.title === 'COMMENT') {
try {
this.showActivity(`${activity.user.firstName} ${activity.user.surname} commented on: XB-ID-${activity.messageId}`, `/app/main/dashboard/xpert-detail/${activity.messageId}/comment`, null);
} catch (e) {
console.error(e);
}
}