Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
LorisInterconsult opened this issue Apr 8, 2024 · 2 comments

Comments

@LorisInterconsult
Copy link

No description provided.

@hperrin
Copy link
Member

hperrin commented Apr 8, 2024

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
Copy link
Author

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> `

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants