Comments (2)
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.
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;
}
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.
from tinygesture.
Related Issues (12)
- it does not work with touchpads HOT 3
- The swipe up event triggers really hard in comparison to the swipe down one HOT 2
- Gestures trigger when they shouldn't.
- Math.obs => Math.abs HOT 1
- Detect number of touch points used HOT 3
- No swipe events with `diagonalSwipes: true` HOT 1
- Any is this better than Hammer, Zingtouch or Interact.js HOT 6
- Consider the multiple conditions update in sleepwalker?
- Disable gesture events in scrollable content
- Doubletap without Tap? HOT 2
- Swipe events does not fire. HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from tinygesture.