Can we use TinyGesture using CDN without npm for a native website using just js ?

[LorisInterconsult]

No description provided.

[hperrin]

Yes, JSDelivr has it available here:

https://cdn.jsdelivr.net/npm/[email protected]/dist/TinyGesture.min.js

For more info and options, you can check out the package's page on JSDelivr:

https://www.jsdelivr.com/package/npm/tinygesture

[LorisInterconsult]

I found it but when I try this I got :

Blocking a multi-origin request (Cross-Origin Request): the “Same Origin” policy does not allow you to consult the remote resource located at file:///C:/Users/PC-te/Desktop/index.js. Reason: The CORS request does not use HTTP.

Error: An unexpected error occurred spoofer.js:1:38935
Uncaught SyntaxError: export declarations may only appear at top level of a module TinyGesture.min.js:7:9705
Uncaught ReferenceError: TinyGesture is not defined

`

<title>Swipe</title> <script type="module" src="index.js"></script> <style>

/* BASIC */

• {
  box-sizing: border-box;
  }

:root{
--color-success: green;
--color-error: red;
}

html,
body {
background: #eee;
min-height: 100vh;
width: 100%;
margin: 0;
padding: 0;
position: relative;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu,
"Helvetica Neue", Arial, sans-serif;
font-size: 24px;
}

h1 {
margin: 0.25em 0;
}
h1 {
margin: 0.125em 0;
}

.wrapper {
/*
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
*/
margin: 0 auto;
min-width: 250px;
width: 100%;
max-width: 700px;
padding: 16px;
}

/* LIST */

ul,
li {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
ul {
padding: 8px;
border-radius: 8px;
background: #fff;
}
li {
border-bottom: 1px solid #aaa;
overflow: hidden;
}
li:last-child {
border-bottom: none;
}

button {
visibility: hidden;
}
button .fa-times {
color: red;
}
button .fa-check {
color: green;
}

/* SWIPE */
.swipe-container {
position: relative;
background-color: #eee;
}
.reveal-left,
.reveal-right {
position: absolute;
top: 0;
height: 100%;
width: 50px;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
color: white;
padding: 8px;
font-weight: 500;
text-transform: uppercase;
}
.reveal-left {
background-color: var(--color-error);
text-align: left;
left: 0;
}
.reveal-right {
background-color: var(--color-success);
right: 0;
text-align: right;
flex-direction: row-reverse;
}

.swipe-item {
position: relative;
width: 100%;
display: flex;
flex-wrap: nowrap;
padding: 16px 0;
background-color: white;
z-index: 2;
user-select: none;
}
.swipe-item > button,
.swipe-item > span {
padding: 8px;
font-size: inherit;
}
.swipe-item > button {
margin: 0 8px;
background: transparent;
border: 0;
outline: none;
}
.swipe-item > span {
flex: 1;
}

</style>

SWIPE PROTOTYPE

Swipe items left or right to categorize them

• Swipe Item left or right
• Swipe Item with a bit more text than should overflow to test if the styles work fine. It seems like it is. But we can test it with even more text.
• Maybe the HTML-Markum can be reduced.
• Doubletap to undo your choice
• Only 651 Byte JS needed.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/TinyGesture.min.js"></script> <script> function initSlider(target) { let swiped = false; let startOffset = 0; const decelerationOnOverflow = 4; const revealWidth = 50; const snapWidth = revealWidth / 1.5; const gesture = new TinyGesture(target); // swipe gestures gesture.on("panmove", (event) => { if (gesture.animationFrame) { return; } event.preventDefault(); gesture.animationFrame = window.requestAnimationFrame(() => { let getX = (x) => { if (x < revealWidth && x > -revealWidth) { return x; } if (x < -revealWidth) { return (x + revealWidth) / decelerationOnOverflow - revealWidth; } if (x > revealWidth) { return (x - revealWidth) / decelerationOnOverflow + revealWidth; } }; const newX = getX(startOffset + gesture.touchMoveX); target.style.transform = "translateX(" + newX + "px)"; if (newX >= snapWidth || newX <= -snapWidth) { swiped = newX < 0 ? -revealWidth : revealWidth; } else { swiped = false; } window.requestAnimationFrame(() => { target.style.transition = null; }); gesture.animationFrame = null; }); }); gesture.on("panend", () => { window.cancelAnimationFrame(gesture.animationFrame); gesture.animationFrame = null; window.requestAnimationFrame(() => { target.style.transition = "transform .2s ease-in"; if (!swiped) { startOffset = 0; target.style.transform = null; } else { startOffset = swiped; target.style.transform = "translateX(" + swiped + "px)"; } }); }); // reset on tap gesture.on("doubletap", (event) => { // we could also use 'doubletap' here window.requestAnimationFrame(() => { target.style.transition = "transform .2s ease-in"; swiped = false; startOffset = 0; target.style.transform = null; }); }); } document.addEventListener("DOMContentLoaded", () => { document.querySelectorAll(".swipe-item").forEach(initSlider); }); </script> `