Giter Club home page Giter Club logo

Comments (2)

hperrin avatar hperrin commented on August 29, 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

from tinygesture.

LorisInterconsult avatar LorisInterconsult commented on August 29, 2024

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

from tinygesture.

Related Issues (12)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.