Vue.js wrapper for Swing
Switch branches/tags
Nothing to show
Clone or download
rootman and goweiwen Fix IE11 spread issue (#11)
IE11 threw Exception and render component unusable.
Latest commit 653b851 Aug 15, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples Update example dependencies Feb 12, 2018
.eslintrc.js Add ESLint config Oct 15, 2017
.gitignore Initial commit Oct 12, 2017
.prettierrc Add ESLint config Oct 15, 2017
CONTRIBUTING.md Add CONTRIBUTING.md Oct 23, 2017
LICENSE Initial commit Oct 12, 2017
README.md Expose Swing library objects Oct 23, 2017
VueSwing.vue Fix IE11 spread issue (#11) Aug 15, 2018
package-lock.json Add missing dependencies Dec 31, 2017
package.json Fix removing cards Feb 12, 2018
yarn.lock Add missing dependency Feb 2, 2018

README.md

VueSwing

JavaScript Style Guide License: MIT

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

Installing

npm install --save vue-swing

Usage

import VueSwing from 'vue-swing'

Vue.component('vue-swing', VueSwing)
<vue-swing
  @throwout="throwout"
  @throwin="throwin"
  :config="config"
>
  <div class="box">Throw me!</div>
</vue-swing>

Properties

VueSwing takes in one config Object, which can consist of any of these keys:

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. [VueSwing.Direction.DOWN, VueSwing.Direction.LEFT, VueSwing.Direction.RIGHT, VueSwing.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.

For more information, look at Swing's documentation

Events

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 VueSwing.Direction.DOWN direction.
throwoutleft Shorthand for throwout event in the VueSwing.Direction.LEFT direction.
throwoutright Shorthand for throwout event in the VueSwing.Direction.RIGHT direction.
throwoutup Shorthand for throwout event in the VueSwing.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.

For more information, look at Swing's documentation