Develop Reference

React conversion of MDN's touch event / gesture logger

Here's Mozilla's code for handling touch gestures, such as two finger pinch/zoom, etc.
https://github.com/mdn/dom-examples/blob/main/touchevents/Multi-touch_interaction.html
And here is the live demo:
https://mdn.github.io/dom-examples/touchevents/Multi-touch_interaction.html
(This will only work on mobile—or at least it doesn't work on my Macbook Chrome browser.
I'm trying to replicate the same output using React. Here's what I have:
import React, { useState, useEffect } from 'react';
const TouchEventsContainer = () => {
const [logEvents, setLogEvents] = useState(false);
const [tpCache, setTpCache] = useState([]);
const [logText, setLogText] = useState("");
const [testText, setTestText] = useState("Tap Swipe");
const enableLog = () => {
setLogEvents(!logEvents);
setTestText(logText);
};
const clearLog = () => setLogText('');
const log = (name, ev, printTargetIds) => {
let s = `${name}: touches = ${ev.touches.length} ; targetTouches = ${ev.targetTouches.length} ; changedTouches = ${ev.changedTouches.length}`;
if (printTargetIds) {
s += "";
for (var i = 0; i < ev.targetTouches.length; i++) {
s += `... id = ${ev.targetTouches[i].identifier} <br>`;
}
}
setLogText((prevLogText) => prevLogText + s + "<br>");
};
const updateBackground = (ev) => {
switch (ev.targetTouches.length) {
case 1:
ev.target.style.background = "yellow";
break;
case 2:
ev.target.style.background = "pink";
break;
default:
ev.target.style.background = "lightblue";
}
}
const handlePinchZoom = (ev) => {
if (ev.targetTouches.length === 2 && ev.changedTouches.length === 2) {
let point1 = -1, point2 = -1;
for (let i = 0; i < tpCache.length; i++) {
if (tpCache[i].identifier === ev.targetTouches[0].identifier) point1 = i;
if (tpCache[i].identifier === ev.targetTouches[1].identifier) point2 = i;
}
if (point1 >= 0 && point2 >= 0) {
let diff1 = Math.abs(tpCache[point1].clientX - ev.targetTouches[0].clientX);
let diff2 = Math.abs(tpCache[point2].clientX - ev.targetTouches[1].clientX);
const PINCH_THRESHHOLD = ev.target.clientWidth / 10;
if (diff1 >= PINCH_THRESHHOLD && diff2 >= PINCH_THRESHHOLD)
ev.target.style.background = "green";
} else {
setTpCache([]);
}
}
}
const startHandler = (ev) => {
ev.preventDefault();
if (ev.targetTouches.length === 2) {
const newTpCache = [...tpCache];
for (let i = 0; i < ev.targetTouches.length; i++) {
newTpCache.push(ev.targetTouches[i]);
}
setTpCache(newTpCache);
}
if (logEvents) {
log("touchStart", ev, true);
}
updateBackground(ev);
};
const moveHandler = (ev) => {
ev.preventDefault();
if (logEvents) {
log("touchMove", ev, false);
}
if (!(ev.touches.length === 2 && ev.targetTouches.length === 2)) {
updateBackground(ev);
}
ev.target.style.outline = "dashed";
handlePinchZoom(ev);
};
const endHandler = (ev) => {
ev.preventDefault();
if (logEvents) {
log(ev.type, ev, false);
}
if (ev.targetTouches.length === 0) {
ev.target.style.background = "white";
ev.target.style.outline = "1px solid black";
}
};
const setHandlers = (name) => {
const el = document.getElementById(name);
el.ontouchstart = startHandler;
el.ontouchmove = moveHandler;
el.ontouchcancel = endHandler;
el.ontouchend = endHandler;
};
useEffect(() => {
setHandlers("target1");
setHandlers("target2");
setHandlers("target3");
setHandlers("target4");
}, []);
return (
<>
<h1>Multi-touch interaction</h1>
<div id="target1">{testText}</div>
<div id="target2"> Tap, Hold or Swipe me 2</div>
<div id="target3"> Tap, Hold or Swipe me 3</div>
<div id="target4"> Tap, Hold or Swipe me 4</div>
<button id="log" onClick={() => enableLog()}>Start/Stop event logging</button>
<button id="clearlog" onClick={() => clearLog()}>Clear the log</button>
<p></p>
<div>{logText}</div>
</>
);
};
export default TouchEventsContainer;
I have 2 problems:
My log output (currently in a ) doesn't produce anything. I think it's because my string contains HTML. I tried using "dangerousInnerHTML" and some other things, but to no avail.
The two finger pinch-zoom (when background color turns green) doesn't seem to be detected.
What is wrong with my React conversion?
Also I'm currently rendering my TouchEventsContainer within the context of a different JS view (on my app) for testing, but I don't think that's the issue.

Issue With pageScript in a JavaScript File

I wanted to make a FPS Unlimiter Userscript for gpop.io because the current fps cap is 60 and wanted to increase to 240fps and I don't understand JavaScript well enough to know what I am doing and am requesting help, The Section Of pageScript.js, I have The pageScript.js in the URL and The Code Below
!function pageScript() {
let speedConfig = {
speed: 1.0,
cbSetIntervalChecked: true,
cbSetTimeoutChecked: true,
cbPerformanceNowChecked: true,
cbDateNowChecked: true,
cbRequestAnimationFrameChecked: false,
};
const emptyFunction = () => {};
const originalClearInterval = window.clearInterval;
const originalclearTimeout = window.clearTimeout;
const originalSetInterval = window.setInterval;
const originalSetTimeout = window.setTimeout;
const originalPerformanceNow = window.performance.now.bind(
window.performance
);
const originalDateNow = Date.now;
const originalRequestAnimationFrame = window.requestAnimationFrame;
let timers = [];
const reloadTimers = () => {
console.log(timers);
const newtimers = [];
timers.forEach((timer) => {
originalClearInterval(timer.id);
if (timer.customTimerId) {
originalClearInterval(timer.customTimerId);
}
if (!timer.finished) {
const newTimerId = originalSetInterval(
timer.handler,
speedConfig.cbSetIntervalChecked
? timer.timeout / speedConfig.speed
: timer.timeout,
...timer.args
);
timer.customTimerId = newTimerId;
newtimers.push(timer);
}
});
timers = newtimers;
};
window.addEventListener("message", (e) => {
if (e.data.command === "setSpeedConfig") {
speedConfig = e.data.config;
reloadTimers();
}
});
window.postMessage({ command: "getSpeedConfig" });
window.clearInterval = (id) => {
originalClearInterval(id);
timers.forEach((timer) => {
if (timer.id == id) {
timer.finished = true;
if (timer.customTimerId) {
originalClearInterval(timer.customTimerId);
}
}
});
};
window.clearTimeout = (id) => {
originalclearTimeout(id);
timers.forEach((timer) => {
if (timer.id == id) {
timer.finished = true;
if (timer.customTimerId) {
originalclearTimeout(timer.customTimerId);
}
}
});
};
window.setInterval = (handler, timeout, ...args) => {
console.log("timeout ", timeout);
if (!timeout) timeout = 0;
const id = originalSetInterval(
handler,
speedConfig.cbSetIntervalChecked ? timeout / speedConfig.speed : timeout,
...args
);
timers.push({
id: id,
handler: handler,
timeout: timeout,
args: args,
finished: false,
customTimerId: null,
});
return id;
};
window.setTimeout = (handler, timeout, ...args) => {
if (!timeout) timeout = 0;
return originalSetTimeout(
handler,
speedConfig.cbSetTimeoutChecked ? timeout / speedConfig.speed : timeout,
...args
);
};
// performance.now
(function () {
let performanceNowValue = null;
let previusPerformanceNowValue = null;
window.performance.now = () => {
const originalValue = originalPerformanceNow();
if (performanceNowValue) {
performanceNowValue +=
(originalValue - previusPerformanceNowValue) *
(speedConfig.cbPerformanceNowChecked ? speedConfig.speed : 1);
} else {
performanceNowValue = originalValue;
}
previusPerformanceNowValue = originalValue;
return Math.floor(performanceNowValue);
};
})();
// Date.now
(function () {
let dateNowValue = null;
let previusDateNowValue = null;
Date.now = () => {
const originalValue = originalDateNow();
if (dateNowValue) {
dateNowValue +=
(originalValue - previusDateNowValue) *
(speedConfig.cbDateNowChecked ? speedConfig.speed : 1);
} else {
dateNowValue = originalValue;
}
previusDateNowValue = originalValue;
return Math.floor(dateNowValue);
};
})();
// requestAnimationFrame
(function () {
let dateNowValue = null;
let previusDateNowValue = null;
const callbackFunctions = [];
const callbackTick = [];
const newRequestAnimationFrame = (callback) => {
return originalRequestAnimationFrame((timestamp) => {
const originalValue = originalDateNow();
if (dateNowValue) {
dateNowValue +=
(originalValue - previusDateNowValue) *
(speedConfig.cbRequestAnimationFrameChecked
? speedConfig.speed
: 1);
} else {
dateNowValue = originalValue;
}
previusDateNowValue = originalValue;
const dateNowValue_MathFloor = Math.floor(dateNowValue);
const index = callbackFunctions.indexOf(callback);
let tickFrame = null;
if (index == -1) {
callbackFunctions.push(callback);
callbackTick.push(0);
callback(dateNowValue_MathFloor);
} else if (speedConfig.cbRequestAnimationFrameChecked) {
tickFrame = callbackTick[index];
tickFrame += speedConfig.speed;
if (tickFrame >= 1) {
while (tickFrame >= 1) {
callback(dateNowValue_MathFloor);
window.requestAnimationFrame = emptyFunction;
tickFrame -= 1;
}
window.requestAnimationFrame = newRequestAnimationFrame;
} else {
window.requestAnimationFrame(callback);
}
callbackTick[index] = tickFrame;
} else {
callback(dateNowValue_MathFloor);
}
});
};
window.requestAnimationFrame = newRequestAnimationFrame;
})();
}()
//# sourceURL=pageScript.js
I was trying to read through the code to find what was capping the fps but I wasn't able to find anything that was easy enough for me to understand.

How to simply Load more from JSON content once user scrolls to the bottom of the div using vanilla javascript?

Okay I simply want to know what I have to add to my Vanilla JavaScript code to load more content once the bottom of the scrolled div/page (wholewrapper) is reached. The code I have included works pretty well as I'm a beginner at vanilla JavaScript. But I need help understanding how to structure onScrollEvents with HttpRequest.
Here is my code:
Vanilla JavaScript:
let page = 1;
const last_page = 10;
const pixel_offset = 200;
const throttle = (callBack, delay) => {
let withinInterval;
return function () {
const args = arguments;
const context = this;
if (!withinInterval) {
callBack.call(context, args);
withinInterval = true;
setTimeout(() => (withinInterval = false), delay);
}
};
};
const httpRequestWrapper = (method, URL) => {
return new Promise((resolve, reject) => {
const xhr_obj = new XMLHttpRequest();
xhr_obj.responseType = "json";
xhr_obj.open(method, URL);
xhr_obj.onload = () => {
const data = xhr_obj.response;
resolve(data);
};
xhr_obj.onerror = () => {
reject("failed");
};
xhr_obj.send();
});
};
const getData = async (page_no = 1) => {
const data = await httpRequestWrapper("GET", `myXML.json`);
const { results } = data;
populateUI(results);
};
let handleLoad;
let trottleHandler = () => {
throttle(handleLoad.call(this), 1000);
};
document.addEventListener("DOMContentLoaded", () => {
getData(1);
window.addEventListener("scroll", trottleHandler);
});
handleLoad = () => {
if (
window.innerHeight + window.scrollY >=
document.body.offsetHeight - pixel_offset
) {
page = page + 1;
if (page <= last_page) {
window.removeEventListener("scroll", trottleHandler);
getData(page).then((res) => {
window.addEventListener("scroll", trottleHandler);
});
}
}
};
const populateUI = (data) => {
const container = document.querySelector(".whole_wrapper");
data &&
data.length &&
data.map((each, index) => {
const { photoVar } = image;
const { textVar } = text;
const { noteVar } = note;
container.innerHTML += `
<div class="each_bubble">
<div class="imageContainer">
<img src="${photoVar}" alt="" />
</div>
<div class="right_contents_container">
<div class="text_field">${textVar}</div>
<div class="note_field">${noteVar}</div>
</div>
</div>
`;
});
};

Adding auto play to Javascript image slider

I have a slider and I want to add auto play every 3 seconds. I tried to use SetInterval but nothing happened.
Also I would like to remove the code for removing elements from the slider. I want to remove all the controls also and have only the slider changing image every 3 seconds.
this is the slider code
const galleryContainer = document.querySelector('.gallery-container');
const galleryControlsContainer = document.querySelector('.gallery-controls');
const galleryControls = ['Предидущий', '', 'Следующий'];
const galleryItems = document.querySelectorAll('.gallery-item');
class Carousel {
constructor(container, items, controls) {
this.carouselContainer = container;
this.carouselControls = controls;
this.carouselArray = [...items];
}
updateGallery() {
this.carouselArray.forEach(el => {
el.classList.remove('gallery-item-1');
el.classList.remove('gallery-item-2');
el.classList.remove('gallery-item-3');
el.classList.remove('gallery-item-4');
el.classList.remove('gallery-item-5');
});
this.carouselArray.slice(0, 5).forEach((el, i) => {
el.classList.add(`gallery-item-${i+1}`);
});
}
setCurrentState(direction) {
if (direction.className == 'gallery-controls-previous') {
this.carouselArray.unshift(this.carouselArray.pop());
} else {
this.carouselArray.push(this.carouselArray.shift());
}
this.updateGallery();
}
setControls() {
this.carouselControls.forEach(control => {
galleryControlsContainer.appendChild(document.createElement('button')).className = `gallery-controls-${control}`;
document.querySelector(`.gallery-controls-${control}`).innerText = control;
});
}
useControls() {
const triggers = [...galleryControlsContainer.childNodes];
triggers.forEach(control => {
control.addEventListener('click', e => {
e.preventDefault();
if (control.className == 'gallery-controls-add') {
const newItem = document.createElement('img');
const latestItem = this.carouselArray.length;
const latestIndex = this.carouselArray.findIndex(item => item.getAttribute('data-index') == this.carouselArray.length)+1;
Object.assign(newItem,{
className: 'gallery-item',
src: `http://fakeimg.pl/300/?text=${this.carouselArray.length+1}`
});
newItem.setAttribute('data-index', this.carouselArray.length+1);
this.carouselArray.splice(latestIndex, 0, newItem);
document.querySelector(`[data-index="${latestItem}"]`).after(newItem);
this.updateGallery();
} else {
this.setCurrentState(control);
}
});
});
}
}
const exampleCarousel = new Carousel(galleryContainer, galleryItems, galleryControls);
exampleCarousel.setControls();
exampleCarousel.useControls();

See the below code, I have added auto slide functionality with interval time 5 seconds.
If you want to change the interval, Please update the setInterval time in the "constructor" and "setCurrentState" functions.
I have removed the controls. To remove the controls, we need to comment the last 2 lines
//exampleCarousel.setControls();
//exampleCarousel.useControls();
const galleryContainer = document.querySelector('.gallery-container');
const galleryControlsContainer = document.querySelector('.gallery-controls');
const galleryControls = ['Предидущий', '', 'Следующий'];
const galleryItems = document.querySelectorAll('.gallery-item');
class Carousel {
constructor(container, items, controls) {
this.carouselContainer = container;
this.carouselControls = controls;
this.carouselArray = [...items];
this.mySlideInterval = null;
this.mySlideInterval = setInterval(
this.autoSlide.bind(this),
5000
);
}
autoSlide() {
this.carouselArray.push(this.carouselArray.shift());
this.updateGallery();
}
updateGallery() {
this.carouselArray.forEach(el => {
el.classList.remove('gallery-item-1');
el.classList.remove('gallery-item-2');
el.classList.remove('gallery-item-3');
el.classList.remove('gallery-item-4');
el.classList.remove('gallery-item-5');
});
this.carouselArray.slice(0, 5).forEach((el, i) => {
el.classList.add(`gallery-item-${i+1}`);
});
}
setCurrentState(direction) {
if (direction.className == 'gallery-controls-previous') {
this.carouselArray.unshift(this.carouselArray.pop());
} else {
this.carouselArray.push(this.carouselArray.shift());
}
clearInterval(this.mySlideInterval);
this.updateGallery();
this.mySlideInterval = setInterval(
this.autoSlide.bind(this),
5000
);
}
setControls() {
this.carouselControls.forEach(control => {
galleryControlsContainer.appendChild(document.createElement('button')).className = `gallery-controls-${control}`;
document.querySelector(`.gallery-controls-${control}`).innerText = control;
});
}
useControls() {
const triggers = [...galleryControlsContainer.childNodes];
triggers.forEach(control => {
control.addEventListener('click', e => {
e.preventDefault();
if (control.className == 'gallery-controls-add') {
const newItem = document.createElement('img');
const latestItem = this.carouselArray.length;
const latestIndex = this.carouselArray.findIndex(item => item.getAttribute('data-index') == this.carouselArray.length)+1;
Object.assign(newItem,{
className: 'gallery-item',
src: `http://fakeimg.pl/300/?text=${this.carouselArray.length+1}`
});
newItem.setAttribute('data-index', this.carouselArray.length+1);
this.carouselArray.splice(latestIndex, 0, newItem);
document.querySelector(`[data-index="${latestItem}"]`).after(newItem);
this.updateGallery();
} else {
this.setCurrentState(control);
}
});
});
}
}
const exampleCarousel = new Carousel(galleryContainer, galleryItems, galleryControls);
//exampleCarousel.setControls();
//exampleCarousel.useControls();

In js, how can i use my todo list on the other tap?

I used javascript, html, and css to create a usable todo list by moving tabs (project todo, personal todo). But it only works on the first tab, not the other tabs. (But it does animate the button being pressed.) I think it's a matter of order, but maybe not. PLEASE HELP ME !! Below is the code in javascript.
const todoObjectList1 = [];
const todoObjectList2 = [];
$(".menu1").click(function(){
$(this).addClass('on');
$(".menu2").removeClass("on");
})
$(".menu2").click(function(){
$(this).addClass('on');
$(".menu1").removeClass("on");
})
// project todo
class Todo_Class1 {
constructor(item){
this.ulElement1 =item;
}
add() {
const todoInput1 = document.querySelector("#myInput1").value;
if (todoInput1 == "") {
alert("You did not enter any item!")
} else {
const todoObject1 = {
id1 : todoObjectList1.length,
todoText1 : todoInput1,
isDone1 : false,
}
todoObjectList1.unshift(todoObject1);
this.display();
document.querySelector("#myInput1").value = '';
}
}
done_undone(x) {
const selectedTodoIndex1 = todoObjectList1.findIndex((item)=> item.id1 == x);
console.log(todoObjectList1[selectedTodoIndex1].isDone1);
todoObjectList1[selectedTodoIndex1].isDone1 == false ? todoObjectList1[selectedTodoIndex1].isDone1 = true : todoObjectList1[selectedTodoIndex1].isDone1 = false;
this.display();
}
deleteElement(z) {
const selectedDelIndex1 = todoObjectList1.findIndex((item)=> item.id1 == z);
todoObjectList1.splice(selectedDelIndex1,1);
this.display();
}
display() {
this.ulElement1.innerHTML = "";
todoObjectList1.forEach((object_item1) => {
const liElement1 = document.createElement("li");
const delBtn1 = document.createElement("i");
liElement1.innerText = object_item1.todoText1;
liElement1.setAttribute("data-id1", object_item1.id1);
delBtn1.setAttribute("data-id1", object_item1.id1);
delBtn1.classList.add("far", "fa-trash-alt");
liElement1.appendChild(delBtn1);
delBtn1.addEventListener("click", function(e) {
const deleteId1 = e.target.getAttribute("data-id1");
myTodoList1.deleteElement(deleteId1);
})
liElement1.addEventListener("click", function(e) {
const selectedId1 = e.target.getAttribute("data-id1");
myTodoList1.done_undone(selectedId1);
})
if (object_item1.isDone) {
liElement1.classList.add("checked");
}
this.ulElement1.appendChild(liElement1);
})
}
}
// personal todo
class Todo_Class2 {
constructor(item){
this.ulElement2 =item;
}
add() {
const todoInput2 = document.querySelector("#myInput2").value;
if (todoInput2 == "") {
alert("You did not enter any item!")
} else {
const todoObject2 = {
id2 : todoObjectList2.length,
todoText2 : todoInput2,
isDone2 : false,
}
todoObjectList1.unshift(todoObject2);
this.display();
document.querySelector("#myInput2").value = '';
}
}
done_undone(x) {
const selectedTodoIndex2 = todoObjectList2.findIndex((item)=> item.id2 == x);
console.log(todoObjectList2[selectedTodoIndex2].isDone2);
todoObjectList2[selectedTodoIndex2].isDone2 == false ? todoObjectList1[selectedTodoIndex2].isDone2 = true : todoObjectList2[selectedTodoIndex2].isDone2 = false;
this.display();
}
deleteElement(z) {
const selectedDelIndex2 = todoObjectList2.findIndex((item)=> item.id2 == z);
todoObjectList2.splice(selectedDelIndex2,1);
this.display();
}
display() {
this.ulElement2.innerHTML = "";
todoObjectList2.forEach((object_item2) => {
const liElement2 = document.createElement("li");
const delBtn2 = document.createElement("i");
liElement2.innerText = object_item2.todoText2;
liElement2.setAttribute("data-id2", object_item2.id2);
delBtn2.setAttribute("data-id2", object_item1.id2);
delBtn2.classList.add("far", "fa-trash-alt");
liElement2.appendChild(delBtn2);
delBtn2.addEventListener("click", function(e) {
const deleteId2 = e.target.getAttribute("data-id2");
myTodoList2.deleteElement(deleteId2);
})
liElement2.addEventListener("click", function(e) {
const selectedId2 = e.target.getAttribute("data-id2");
myTodoList1.done_undone(selectedId2);
})
if (object_item2.isDone) {
liElement2.classList.add("checked");
}
this.ulElement2.appendChild(liElement2);
})
}
}
////-----MAIN PROGRAM------------
const listSection1 = document.querySelector("#myUL1");
myTodoList1 = new Todo_Class1(listSection1);
// project todo add
document.querySelector(".addBtn1").addEventListener("click", function() {
myTodoList1.add()
})
document.querySelector("#myInput1").addEventListener("keydown", function(e) {
if (e.keyCode == 13) {
myTodoList1.add()
}
})
// personal todo add
const listSection2 = document.querySelector("#myUL2");
myTodoList2 = new Todo_Class2(listSection2);
document.querySelector(".addBtn2").addEventListener("click", function() {
myTodoList2.add()
})
document.querySelector("#myInput2").addEventListener("keydown", function(e) {
if (e.keyCode == 13) {
myTodoList2.add()
}
})

I just gave different javascript to different todo taps.
In other javascript, the existing personal part was removed and pasted.😂