StateBar

The StateBar is class used to show the current state of something (Work, Project, Bug resolution, etc...).

How to Initialize the Flip ?


The initialization of the flip animation is an one step process, just call the function Init of the class with his three arguments (see above for more details)

Class Details

Functions:


Name

Arguments

Return

Description

Init
  • String: ID - HMTL ID defining the position in the DOM of the viewer
  • String: Name - Define the name of the StateBar all StateBar component will be defined by this name (this is to avoid mix if you use different StateBar so be sure to use different name for each StateBar).
  • JSON : Data - Data used by the StateBar

VOID

This function Initialized every part of the StateBar: HMTL, CSS, DATA. It will generate in the defined ID as ID and all HTML IDs used for this timeline will start by the name defined in arguments.


Also to define the data and the design you must fill the data arguments, that work thanks to a JSON files (for more details about the JSON check the section below).

ChangeState
  • Integer: StateID - New State to go

VOID

Call this function to change the current state of the bar.



Private Details


/!\/!\/!\/!\ All private details are usable but its recommended to not use anythings of those. It might modify the good working of the class. /!\/!\/!\/!\



Variables (Members):


Name

Type

Default Value

Description

basedId

String

null

HTML Id of the viewer parent.

id

String

null

Global HMTL Id of the viewer (# + name).

name

String

null

Name of the viewer used by the class for all HTML IDs

data

JSON

null

Data of the state bar



Functions:


Name

Arguments

Return

Description

GetStateNameID
  • None

String - HTML ID of the State text

Function used to get the HTML ID of the State Text (used to short the code).

GetBarID
  • None

String - HTML ID of the Bar div

Function used to get the HTML ID of the Bar div (used to short the code).

GetBarFrontID
  • None

String - HTML ID of the Front Bar div

Function used to get the HTML ID of the Front part of the bar (used to short the code).

GetBarBackID
  • None

String - HTML ID of the Back Bar div

Function used to get the HTML ID of the Back part of the bar (used to short the code).


Data Structure

Main Structure Details


Note:

black -> Needed

Blue -> Optional



{

"Info": { //Main Info for the StateBar

               "BackColor": "#a6a6a6" //Define bar back color

       },

                       

       "States": [

               {

                       "Name": "None" //Display name of the state (The index 0 doesn't need color because there is no bar).

               },

               {

                       "Name": "STATE",  //Display name of the state

                       "Color": "#000000" //Color of the bar at this state

               }

       ]

}

Created with the Personal Edition of HelpNDoc: News and information about help authoring tools and software