• Stars
    star
    2,618
  • Rank 16,630 (Top 0.4 %)
  • Language
    JavaScript
  • License
    Other
  • Created over 9 years ago
  • Updated 6 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A swipeable cards interface. The swipe-left/swipe-right for yes/no input. As seen in apps like Jelly and Tinder.

Swing

GitSpo Mentions Travis build status NPM version js-canonical-style

A swipeable cards interface. The swipe-left/swipe-right for yes/no input. As seen in apps like Jelly and Tinder, and many others.

Give it a swing! and please tweet it if you like it. : )

Card stack example.

Contents

Usage Examples

The code for all of the examples is in the ./examples/ folder.

Raise an issue if you are missing an example.

Use Case

A collection of observations about the extended use case of the swipeable cards interface, that I found useful when considering the implementation.

Single-Handed Navigation

Mobile devices are frequently used on-the-go, which drastically increases the probability that you'll attempt to navigate apps using just one hand, with the key digit being the mighty thumb. Instead of browsing endless lists for the hidden perfect piece of dataβ€Šβ€”β€Šbe it the right music for the moment, what to do tonight, or your next potential hookupβ€Šβ€”β€Šcard-swiping turns decision making into a highly engaging Choose-Your-Own-Adventure game.

– https://medium.com/@janel_az/small-data-why-tinder-like-apps-are-the-way-of-the-future-1a4d5703b4b

Digestible Unit of Information

[..] the "card" on a mobile device becomes more and more important as a digestible unit of information on a small screen for users who are on the go and mostly glancing through their apps before settling into the ones that truly engage them.

– http://techcrunch.com/2013/09/22/mobile-apps-card-interfaces-and-our-opposable-thumbs/

Data

More than a scroll and perhaps even more than discrete taps themselves, cards create repetitive, deliberate, discrete decision moments over and over. And as the user swipes, you can learn. The time they swipe, the speed they swipe, what they swiped, the geolocation where they swiped, and even how similar the results of that swipe are vs. a swipe earlier that session are all possibilities that are yielding smarter apps for you and me every day.

– http://www.itsmakeable.com/unconventional-wisdom/good-user-experience-design-ux-can-do-what-now/

Quick Start

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>
// Prepare the cards in the stack for iteration.
const cards = [].slice.call(document.querySelectorAll('ul li'));

// An instance of the Stack is used to attach event listeners.
const stack = Swing.Stack();

cards.forEach((targetElement) => {
  // Add card element to the Stack.
  stack.createCard(targetElement);
});

// Add event listener for when a card is thrown out of the stack.
stack.on('throwout', (event) => {
  // e.target Reference to the element that has been thrown out of the stack.
  // e.throwDirection Direction in which the element has been thrown (Direction.LEFT, Direction.RIGHT).

  console.log('Card has been thrown out of the stack.');
  console.log('Throw direction: ' + (event.throwDirection == Direction.LEFT ? 'left' : 'right'));
});

// Add event listener for when a card is thrown in the stack, including the spring back into place effect.
stack.on('throwin', () => {
  console.log('Card has snapped back to the stack.');
});

Configuration

const config = {
  /**
   * Invoked in the event of dragmove.
   * Returns a value between 0 and 1 indicating the completeness of the throw out condition.
   * Ration of the absolute distance from the original card position and element width.
   *
   * @param {number} xOffset Distance from the dragStart.
   * @param {number} yOffset Distance from the dragStart.
   * @param {HTMLElement} element Element.
   * @returns {number}
   */
  throwOutConfidence: (xOffset, yOffset, element) => {
    const xConfidence = Math.min(Math.abs(xOffset) / element.offsetWidth, 1);
    const yConfidence = Math.min(Math.abs(yOffset) / element.offsetHeight, 1);

    return Math.max(xConfidence, yConfidence);
  }
};

const stack = stack = Swing.Stack(config);
Name Description Default
isThrowOut Invoked in the event of dragend. Determines if element is being thrown out of the stack. Element is considered to be thrown out when throwOutConfidence is equal to 1.
allowedDirections Array of directions in which cards can be thrown out. [Direction.DOWN, Direction.LEFT, Direction.RIGHT, Direction.UP].
throwOutConfidence Invoked in the event of dragmove. Returns a value between 0 and 1 indicating the completeness of the throw out condition. Ration of the absolute distance from the original card position and element width.
throwOutDistance Invoked when card is added to the stack. The card is thrown to this offset from the stack. The value is a random number between minThrowOutDistance and maxThrowOutDistance.
minThrowOutDistance In effect when throwOutDistance is not overwritten. 450.
maxThrowOutDistance In effect when throwOutDistance is not overwritten. 500.
rotation Invoked in the event of dragmove. Determine the rotation of the element. Rotation is equal to the proportion of horizontal and vertical offset times the maximumRotation constant.
maxRotation In effect when rotation is not overwritten. 20.
transform Invoked in the event of dragmove and every time the physics solver is triggered. Uses CSS transform to translate element position and rotation.
allowMovement Function that determines if movement is allowed when a movement event is fired. It has two arguments, the event object and a boolean set to true if on a touch device. A function that returns true for all movement events.

All of the configuration parameters are optional. Refer to the source code of the card module to learn the parameters associated with every callback.

Methods

const stack = Swing.Stack();
const card = stack.createCard(HTMLElement);
Name Description
stack.createCard(element, prepend) Creates an instance of Card and associates it with the element. If prepend is true, the card is prepended to the stack, instead of appended [default: false].
stack.getCard(element) Returns card associated with an element.
stack.on(event, listener) Attaches an event listener.
card.on(event, listener) Attaches an event listener.
card.throwIn(coordinateX, coordinateY) Throws a card into the stack from an arbitrary position. coordinateX, coordinateY is the position at the start of the throw.
card.throwOut(coordinateX, coordinateY) Throws a card out of the stack in the direction away from the original offset. coordinateX, coordinateY is the position at the start of the throw.
card.destroy() Unbinds all Hammer.Manager events. Removes the listeners from the physics simulation.

Throwing Card Out of the Stack

Use the card.throwOut(coordinateX, coordinateY) method to throw the card out of the stack. Offset the position to whatever direction you want to throw the card, e.g.

card.throwOut(Direction.LEFT, 0);
card.throwOut(Direction.RIGHT, 0);

To make the animation more diverse, use random value for the coordinateY parameter.

Events

Event listener can be attached to an instance of Swing.Stack or Swing.Card using the on method:

const stack = Swing.Stack();

const card = stack.createCard(HTMLElement);

card.on('throwout', () => {});
stack.on('throwout', () => {});
Name Description
throwout When card has been thrown out of the stack.
throwoutend When card has been thrown out of the stack and the animation has ended.
throwoutdown Shorthand for throwout event in the Direction.DOWN direction.
throwoutleft Shorthand for throwout event in the Direction.LEFT direction.
throwoutright Shorthand for throwout event in the Direction.RIGHT direction.
throwoutup Shorthand for throwout event in the Direction.UP direction.
throwin When card has been thrown into the stack.
throwinend When card has been thrown into the stack and the animation has ended.
dragstart Hammer panstart.
dragmove Hammer panmove.
dragend Hammer panend.
destroyCard When card.destroy calls stack.destroyCard.

Event Object

Event listener is invoked with a single eventObject parameter:

const stack = Swing.Stack();

stack.on('throwout', (eventObject) => {});
Name Value
target The element being dragged.
direction The direction in which the element is being dragged: Direction.DOWN, Direction.LEFT, Direction.RIGHT or Direction.UP.
throwOutConfidence A value between 0 and 1 indicating the completeness of the throw out condition.

More Repositories

1

react-css-modules

Seamless mapping of class names to CSS modules inside of React components.
JavaScript
5,232
star
2

slonik

A Node.js PostgreSQL client with runtime and build time type safety, and composable SQL.
TypeScript
4,240
star
3

babel-plugin-react-css-modules

Transforms styleName to className using compile time CSS module resolution.
JavaScript
2,044
star
4

redux-immutable

redux-immutable is used to create an equivalent function of Redux combineReducers that works with Immutable.js state.
TypeScript
1,880
star
5

eslint-plugin-flowtype

Flow type linting rules for ESLint.
JavaScript
1,078
star
6

prepack-webpack-plugin

A webpack plugin for prepack.
JavaScript
1,042
star
7

eslint-plugin-jsdoc

JSDoc specific linting rules for ESLint.
JavaScript
1,024
star
8

roarr

JSON logger for Node.js and browser.
TypeScript
995
star
9

table

Formats data into a string table.
TypeScript
871
star
10

turbowatch

Extremely fast file change detector and task orchestrator for Node.js.
TypeScript
866
star
11

usus

Webpage pre-rendering service. ⚑️
JavaScript
804
star
12

flow-runtime

A runtime type system for JavaScript with full Flow compatibility.
JavaScript
803
star
13

surgeon

Declarative DOM extraction expression evaluator. πŸ‘¨β€βš•οΈ
JavaScript
693
star
14

liqe

Lightweight and performant Lucene-like parser, serializer and search engine.
TypeScript
601
star
15

eslint-config-canonical

The most comprehensive ES code style guide.
JavaScript
536
star
16

write-file-webpack-plugin

Forces webpack-dev-server to write bundle files to the file system.
JavaScript
528
star
17

lightship

Abstracts readiness, liveness and startup checks and graceful shutdown of Node.js services running in Kubernetes.
TypeScript
509
star
18

gitdown

GitHub markdown preprocessor.
JavaScript
445
star
19

xhprof.io

GUI to analyze the profiling data collected using XHProf – A Hierarchical Profiler for PHP.
PHP
429
star
20

contents

Table of contents generator.
JavaScript
416
star
21

brim

View (minimal-ui) manager for iOS 8.
JavaScript
391
star
22

youtube-player

YouTube iframe API abstraction.
JavaScript
340
star
23

global-agent

Global HTTP/HTTPS proxy agent configurable using environment variables.
TypeScript
332
star
24

react-aux

A self-eradicating component for rendering multiple elements.
JavaScript
328
star
25

http-terminator

Gracefully terminates HTTP(S) server.
TypeScript
307
star
26

isomorphic-webpack

Abstracts universal consumption of application code base using webpack.
JavaScript
291
star
27

scream

Dynamic viewport management for mobile. Manage viewport in different states of device orientation. Scale document to fit viewport. Calculate the dimensions of the "minimal" iOS 8 view relative to your viewport width.
JavaScript
289
star
28

create-index

Creates ES6 ./index.js file in target directories that imports and exports all sibling files and directories.
JavaScript
279
star
29

graphql-deduplicator

A GraphQL response deduplicator. Removes duplicate entities from the GraphQL response.
JavaScript
278
star
30

gajus.com-blog

The contents of the http://gajus.com/blog/.
JavaScript
226
star
31

wholly

jQuery plugin used to select the entire table row and column in response to mouseenter and mouseleave events. Wholly supports table layouts that utilize colspan and rowspan.
JavaScript
204
star
32

canonical-reducer-composition

Spec for Canonical Reducer Composition design pattern.
188
star
33

puppeteer-proxy

Proxies Puppeteer Page requests.
JavaScript
187
star
34

angular-swing

AngularJS directive for Swing: A swipeable cards interface. The swipe-left/swipe-right for yes/no input. As seen in apps like Jelly and Tinder, and many others.
JavaScript
182
star
35

dindent

HTML indentation library for development and testing.
PHP
177
star
36

babel-plugin-graphql-tag

Compiles GraphQL tagged template strings using graphql-tag.
JavaScript
171
star
37

vlad

Input validation library promoting succinct syntax with extendable validators and multilingual support.
PHP
104
star
38

babel-plugin-log-deprecated

Adds a console.warn statement to the functions annotated with @deprecated tag.
JavaScript
103
star
39

redux-immutable-examples

A complete application showing use of redux-immutable.
JavaScript
103
star
40

babel-preset-es2015-webpack

Babel preset for all es2015 plugins except babel-plugin-transform-es2015-modules-commonjs.
JavaScript
97
star
41

scalpel

A CSS selector parser.
JavaScript
95
star
42

eslint-plugin-canonical

ESLint rules for Canonical ruleset.
TypeScript
89
star
43

eslint-plugin-sql

SQL linting rules for ESLint.
TypeScript
88
star
44

graphql-lazyloader

GraphQL directive that adds Object-level data resolvers.
TypeScript
88
star
45

orientationchangeend

The orientationchangeend event is fired when the orientation of the device has changed and the associated rotation animation has been complete.
JavaScript
78
star
46

bugger

Bugger is a collection of functions for debugging PHP code.
CSS
77
star
47

pg-formatter

A PostgreSQL SQL syntax beautifier.
TypeScript
77
star
48

planton

Database-agnostic task scheduler.
TypeScript
77
star
49

dora

Input generation library for value resolution, data persistence, templates, CSRF and protection from XSS.
CSS
73
star
50

react-css-modules-examples

Usage examples for react-css-modules.
JavaScript
72
star
51

format-graphql

Formats GraphQL schema definition language (SDL) document.
JavaScript
70
star
52

to-string-loader

to-string loader for webpack
JavaScript
64
star
53

interdependent-interactive-histograms

This is a helper function that utilises d3.js and Crossfilter to create interdependent interactive histograms.
JavaScript
60
star
54

extract-email-address

Extracts email address from an arbitrary text input.
JavaScript
59
star
55

babel-plugin-transform-function-composition

Syntactic sugar 🍧🍨🍦 for easy to read function composition. πŸ¦„
JavaScript
58
star
56

preoom

Retrieves & observes Kubernetes Pod resource (CPU, memory) utilisation.
JavaScript
55
star
57

fuss

The Facebook SDK for PHP provides an interface to the Graph API.
PHP
53
star
58

postloader

A scaffolding tool for projects using DataLoader, Flow and PostgreSQL.
JavaScript
51
star
59

moa

MOA implements dynamically generated Active Record database abstraction.
PHP
50
star
60

extract-date

Extracts date from an arbitrary text input.
JavaScript
48
star
61

gitinfo

Gets information about a Git repository.
JavaScript
47
star
62

sister

Foundation for your emitter implementation. 202 reasons to not write your own implementation of event emitter.
JavaScript
45
star
63

react-outside-event

A higher order React component that attaches an event listener for events that occur outside of the component element.
JavaScript
44
star
64

babel-plugin-annotate-console-log

Annotates console.log call expression with information about the invocation context.
JavaScript
42
star
65

react-youtube-player

React component that encapsulates YouTube IFrame Player API and exposes player controls using the component properties.
JavaScript
40
star
66

bundle-dependencies

Generates bundledDependencies package.json value using values of the dependencies property. Updates package.json definition using the generated bundledDependencies value.
JavaScript
39
star
67

facebook-friend-rank

PHP class that can calculate who are the best user's friends. Data accuracy depends on the user activity and granted permissions.
PHP
39
star
68

waitehr

Waits for HTTP response and retries request until the expected response is received.
TypeScript
36
star
69

doll

Extended PDO with inline type hinting, deferred connection support, logging and benchmarking.
PHP
36
star
70

pie-chart

This is a helper function that utilises d3.js to create pie charts.
JavaScript
36
star
71

sguid

Signed Globally Unique Identifier (SGUID) generator.
JavaScript
34
star
72

prepack-loader

A webpack loader for prepack.
JavaScript
31
star
73

slonik-utilities

Utilities for manipulating data in PostgreSQL database using Slonik.
TypeScript
31
star
74

seeql

Real-time SQL profiler.
JavaScript
31
star
75

react-strict-prop-types

A higher order component that raises an error if component is used with an unknown property.
JavaScript
29
star
76

crack-json

Extracts all JSON objects from an arbitrary text document.
JavaScript
29
star
77

paggern

Pattern interpreter for generating random strings.
PHP
28
star
78

cluster-map

Abstracts execution of tasks in parallel using Node.js cluster.
JavaScript
27
star
79

database-types

A generic type generator for various databases.
JavaScript
26
star
80

iapetus

Prometheus metrics server.
TypeScript
25
star
81

roarr-cli

A CLI program for processing Roarr logs.
TypeScript
25
star
82

postgres-bridge

postgres/pg compatibility layer
TypeScript
24
star
83

roarr-browser-log-writer

Roarr log writer for use in a web browser.
TypeScript
23
star
84

require-new

Requires a new module object.
JavaScript
23
star
85

pan

Touch enabled implementation of WHATWG drag and drop mechanism.
JavaScript
23
star
86

pragmatist

A collection of tasks to standardize builds.
JavaScript
21
star
87

tmdb

The Movie Database (TMDb) SDK.
JavaScript
21
star
88

pianola

A declarative function composition and evaluation engine.
JavaScript
20
star
89

approximate-now

Approximate (fast) current UNIX time.
TypeScript
20
star
90

babel-plugin-transform-export-default-name

Babel plugin that transforms default exports to named exports.
JavaScript
20
star
91

eslint-plugin-zod

Zod linting rules for ESLint.
TypeScript
19
star
92

xfetch

A light-weight HTTP client for Node.js.
JavaScript
19
star
93

extract-time

Extracts time from an arbitrary text input.
JavaScript
19
star
94

override-require

Overrides Node.js module resolution logic.
JavaScript
18
star
95

babel-plugin-lodash-modularize

Babel plugin that replaces lodash library import statement to individual module imports.
JavaScript
18
star
96

canonical

Canonical code style linter and formatter for JavaScript, SCSS, CSS and JSON.
JavaScript
18
star
97

extract-price

Extracts prices from an arbitrary text input.
JavaScript
17
star
98

fastify-webpack-hot

A Fastify plugin for serving files emitted by Webpack with Hot Module Replacement (HMR).
TypeScript
17
star
99

semantic-url-parser

Extracts content information from known URL patterns.
TypeScript
16
star
100

async-request

async-request is a wrapper for request that uses ES7 async functions.
JavaScript
16
star