Core Concepts

How Hexagon.js is structured

Hexagon is comprised of many modules, each of which aim to cover one particular situation. The types of modules are grouped into three categories:

CSS only

These modules are mostly concerned with styling items on the page that can already be created with standard html (buttons, inputs, static structures like labels and notices). For these modules only hexagon.css needs to be included on the page.

Javascript + CSS components

These modules are components that have a JavaScript api, and require JavaScript to function. As a result, the JavaScript of hexagon.js must be included on the page for these to work. The types of modules included in this group are dropdowns, menus, graphs, sliders, etc.

Utils

These are JavaScript utility methods for performing common actions such as selecting and modifying parts of the dom, working with arrays and various collection types (Set, Map, List).

Common patterns in Hexagon.js

Constructors

Almost all components in hexagon are constructed using this pattern:

var instance = new ComponentName(selector, options)

selector can be an Element, or an css selector string

options is an object where all the options for an object can be configured. To use the default behaviour the options parameter may be left off.

Setter/Getters + chaining

Throughout the api, most methods can be used to both set and get properties:

menu.value()      // this will get the value of the menu
menu.value('one') // this will set the value of the menu to 'one'

When setting values, the instance will be returned so that you can perform further chaining:

menu
  .items(['one', 'two', 'three'])  // returns the menu
  .value('one')                    // also returns the menu since we are setting a value

Sometimes an argument is required when getting a value. Here is an example from the selection api:

hx.select('#bob').attr('disabled')  // this returns the value of the disabled attribute
hx.select('#bob').attr('disabled', 'disabled') // sets the value of the disabled attribute

The same idea applies when multiple arguments are involved; leaving off the last argument will cause a value to be retrieved, and including the last argument will set the value.