We define our graphic as a javascript class that extends HTMLElement. That way we can define it as a custom element for our scene to use. It also allows us to define the html content for this graphic and set it on itself by using the innerHTML property.
This definition is contained in a single javascript file per graphic, then each graphic we want to use in a particular scene, we include in our main html file.
State
A json object containing all the state information about our graphic – whether it has finished initialising (don’t try and animate me until I’ve finished initialising), whether it is in or not (useful for a main controller pattern to know whether to call GoIn or Update) etc.
Data
A subset of the State object: a nested json object representing the current data displayed on the graphic. This defines the schema of data to be sent to the graphic and is passed in on every GoIn and Update call. The new data passed in to the update method can be used to compare against the data currently stored on the graphic in order to work out what parts of the graphic need to change. For example, if the top line of a strap has stayed the same, but the bottom line has changed, the graphic only needs to animate the bottom line off then on again.
Template
The actual HTML model of the graphic. This is stored here, then used when the graphic is initialised to insert into the DOM.
Elements
We cache a list of all the HTML elements in our template for use later. This is useful for saving time in our animation methods by not having to query and find the elements we want to animate every time.
Timeline
We chose to use the Greensock Animation Platform to create our animations. This uses the concept of timelines - for our graphic we will have a top-level timeline object. Every GoIn, Update and GoOut call builds a sub-timeline and adds it to this main timeline. This allows the graphic to queue up all its animates if they come in too quickly because, by default, adding to a timeline places the new animation at the end of any existing animations on that timeline (this can be defeated by overriding existing animations if required too).
Go In, Go Out and Update Methods
Javascript functions that are called by a controller in order to animate this graphic. Each method builds a timeline and adds it to this graphic’s main timeline. The methods take data which is then compared against the graphic’s current state to determine what needs to happen in the animation.