Articles

Tags:
View Cloud
 
 
 

The Workflow Carousel Library: card.settings.js Functionality

rubic-settingsBack to Workflow Carousel

The code for this part of the project is on GitHub.

In addition to Card Handling and Workflow Carousel, Card Settings allows for directions, card types, subscriptions and events to be defined.

In the simple example on GitHub there is additional content, background, and foreground information in this file, as well.

In the complex example, these are not there since the data is pulled via AJAX calls.

The structure for a card is as follows:
  • Current (POSITION): CARD TYPE
  • Up, Down, Left, Right (POSITIONS): CARD TYPE (can move in this direction)
  • Cycle (RE-USE CARD): [[BACK]/NEXT]
  • Direction (RE-USE TYPE): [UpDown] OR [LeftRight]
  • Block (DISABLE SWIPE)
  • RefreshCurrent (ALLOW CURRENT TO BE REFRESHED ON LOAD)
// CARD TYPES
self.Cards = [
	{"Current": "Main_Card",
		"Up":	"Up_Card",				"Down": "Down_Card",
		"Left": "Left_Card",				"Right": "Right_Card",
		"Cycle": "",					"Direction": "",
		"Block": "",					"DisplayFirst": false,
		"RefreshCurrent": false
	},
	{"Current": "Down_Card",
		"Up": "Main_Card",				"Down": "",
		"Left": "",					"Right": "Right_Card",
		"Cycle": "",					"Direction": "",
		"Block": "",					"DisplayFirst": false,
		"RefreshCurrent": false
	}
Subscriptions, which control the developer-defined functions for displaying content on a Card, have the following structure (NOTE: the bind(data) portion ensures that the called function has the correct this):
// CARD TYPES
self.Cards = [
self.subscriptions = {};
// CARD TYPE FUNCTIONS TO HANDLE CARD DISPLAY
// ... BIND TO DATA ENSURES THIS POINTS TO THE DATA OBJECT, NOT THE SUBSCRIPTION OBJECT
self.subscriptions["EMPTY"]		= data.ProcessEmpty.bind(data);
self.subscriptions["Main_Card"]		= data.ProcessMAIN.bind(data);
self.subscriptions["Down_Card"]		= data.ProcessDOWN.bind(data);
self.subscriptions["Right_Card"]	= data.ProcessRIGHT.bind(data);
self.subscriptions["Up_Card"]		= data.ProcessUP.bind(data);
self.subscriptions["Left_Card"]		= data.ProcessLEFT.bind(data);
And Events, which control the developer-defined functions for handling on-Card events (ie. click) use the following structure:
self.events = {};
// CARD TYPE FUNCTIONS TO HANDLE CLICK EVENTS
// ... BIND TO DATA ENSURES THIS POINTS TO THE DATA OBJECT, NOT THE EVENT OBJECT
self.events["Main_Card"]			= data.EventMAIN.bind(data);
self.events["Down_Card"]			= data.EventDOWN.bind(data);
self.events["Right_Card"]			= data.EventRIGHT.bind(data);
self.events["Up_Card"]				= data.EventUP.bind(data);
self.events["Left_Card"]			= data.EventLEFT.bind(data);
Through all of this code, we can put together settings to define what the cards are and how they interact, as well as how Workflow Carousel and Card connect to developer-defined functionality to display information and handle events on individual Card-types.
 
by User Not Found
11 Apr 2014
Tags:
  • Workflow Carousel
  • Mobile
  • Javascript
  • Front-End
  • Development


 

You are not allowed to post comments.