View Cloud

The Workflow Carousel Framework: wc.js Functionality

rubic-rubic Back to Workflow Carousel

The code for this part of the project is on GitHub. There are actually two files here: wc.js and wc.navigation.js.

The following is in wc.js ...

Workflow Carousel takes five strings that identify the HTML IDs for current, up, down, left, and right).

The jQuery version of these objects and the dimensions (left, top, height, and width) are stored.  Also, the current card, if the card is moving, trigger distance (how much of a drag triggers a move), and slide speed (multiplier) are stored here.

An initialization is fired that sets the dimensions when load, resize, and orientation change occur.

With this basic functionality in place, Rubik simply defines movement handling; making the motion occur, as well as data handling of the base objects (Current, up, down, left, and right).

This part of the framework handles movement with a series of functions:

Function: switchID(first, second)
Switch two of the jQuery object (ie. current and right) IDs. This function is executed at the end of a move.

Function: processMove(direction)
Process a move in a direction. If direction is "NONE", process Current. Once the move has occurred, it hands off control to the Card Handler.

Function: CanMove(direction)
Returns TRUE/FALSE. Is the user allowed to move in the given direction?

Function: MovePanes(x, y)
Takes an x and y coordinate and moves each of the Cards the given pixels.

Function: MoveScroll(y, parent)
Allows for and handles scrolling (vertical only) within an object on a Card.

Function: Move(direction)
Moves Cards:
  • If cards are moving already, cancel operation.
  • Set isMoving to TRUE so this move is not impinged upon.
  • Play audio, if set in configuration.
  • Execute a lot of math ... and animate movement of slide for Current and direction Cards.
  • Cleanup: this consists of switching IDs, resetting objects in array, zeroing out panes, and setting isMoving to FALSE.
The following is in wc.navigation.js ...

This part of the framework handles touch events using HammerJS.

Event: DoubleTap
DoubleTap code is in the project, but it was determined that capturing DoubleTap versus Tap was putting too much of a load on the mobile devices, do in general this code does nothing.

Event: Tap
This event simply hands control over to Card Handling.

Event: DragRight, DragLeft, DragUp, DragDown
Handle "stick to the finger" as the user drags.

Event: SwipeRight, SwipeLeft, SwipeUp, SwipeDown
If no Modal is open, complete move in the direction indicated.

Event: Release
When the finger comes off the screen, determine if movement is more than the trigger width and move in the direction indicated.
by User Not Found
11 Apr 2014
  • Workflow Carousel
  • Mobile
  • Javascript
  • Front-End
  • Development


You are not allowed to post comments.