Repository files navigation

A swipeable cards interface. The swipe-left/swipe-right for yes/no input. As seen in apps likeJelly andTinder, andmany others.

Give it aswing! and pleasetweet it if you like it. : )

• Usage Examples
  • Use Case
    • Single-Handed Navigation
    • Digestible Unit of Information
    • Data
• Quick Start
• Configuration
• Methods
  • Throwing Card Out of the Stack
• Events
  • Event Object
• Download
  • Browser Bundle
• Dependencies

• Card stack.
• Card stack usingangular-swing module.
• Card-stack usingangular2-swing module.
• Programmatically control the state of the card.
• Indicate the state of the drop usingthrowConfidence anddirectionevent object properties.

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

Raise an issue if you are missing an example.

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

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

[..] 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/

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/

<ul><li></li><li></li><li></li></ul>

// Prepare the cards in the stack for iteration.constcards=[].slice.call(document.querySelectorAll('ul li'));// An instance of the Stack is used to attach event listeners.conststack=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.');});

constconfig={/**   * 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)=>{constxConfidence=Math.min(Math.abs(xOffset)/element.offsetWidth,1);constyConfidence=Math.min(Math.abs(yOffset)/element.offsetHeight,1);returnMath.max(xConfidence,yConfidence);}};conststack=stack=Swing.Stack(config);

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

conststack=Swing.Stack();constcard=stack.createCard(HTMLElement);

Use thecard.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 thecoordinateY parameter.

Event listener can be attached to an instance ofSwing.Stack orSwing.Card using theon method:

conststack=Swing.Stack();constcard=stack.createCard(HTMLElement);card.on('throwout',()=>{});stack.on('throwout',()=>{});

Event listener is invoked with a singleeventObject parameter:

conststack=Swing.Stack();stack.on('throwout',(eventObject)=>{});