Writing Components

If you have a great idea for a new component, here's a guide to get you started.

It may very well occur that you find yourself needing a component that FatKit doesn't currently have. The whole idea behind FatKit is that it can be extended in any way you see fit. The only caveat is to write your component in a generic enough way that others can benefit from it too.

The syntax of the JavaScript for a component doesn't really matter, but there is a base template to use that builds off the FatKit core JavaScript files allowing you to use some of the internal functions and extending FatKit's core successfully.


The Template

You can download the template from code here.

The first thing you'll want to do is place this file, with a filename representing your component, in the assets/scripts/components directory of your FatKit test install.

Please note: do not test this in your fork of FatKit as you will push unecessary files back to Bitbucket when you check in your component. Create a copy of FatKit, run the install and build your component from there.

In the new component file you'll need to change:

  • componentName for the camel-cased name of your component
  • fatkit-component-name to fatkit- and your component name (where spaces become hyphens)
  • data-f-component-name to data-f- and your component name (where spaces become hyphens), which refers to the name of the data-attribute that will instantiate your component

Your JavaScript

Now you are ready to add the functionality to your component. Anything added to the instantiating data-attribute will automatically extend any default options you may have set. These go in the options object before the boot function.

The boot function you probably won't need to touch. That gets called automatically when the page and core JavaScript files have finished loading, looks for any element on the page with the instantiating data-attribute and sets the options. Then it will call the init function where your stuff can begin.

Inside the init function you can start adding any listeners you need and functionality. Inside the functions in your component this refers to the component object itself and you can get the element that was used to instantiate the component with this.element. If you need to check what value the options have you can use this.options.youroption (where youroption is the object name).

For reference see most of the other components as they almost* all have the same code layout.

I say all because some are a little more custom due to their functionality, or the way they are used.