A proposal for how we work with client side javascript

javascript-hooks.md

Component javascript hooks

Accessing DOM elements

This should be added to any DOM element you need to access via javascript
Should be added as part of the html not using .data()
Should never be removed or edited
Should be used only to access the element(s)
Names should be lowercase, hyphen separated, descriptive

data-component="name-of-component"

Action carried out on a component

Should be added to any DOM element that has an effect on the parent component due to user action
Should be added as part of the html not using .data()
Should never be removed or edited
Names should be lowercase, start with a description of the action, followed by double-hyphen then the exact name of the parent component

data-action="open--name-of-component"

Status of component

Should only be used to indicate the status of an element
Removes the need to add/remove data attributes Should be added to the same DOM element as the data-component attribute
Should be added using jQuerys .data() method Should only ever be true or false

data-active="true|false"

Example

HTML

<div data-component="component-name">
  <div>this is my component</div>
</div>

Javascript

$(function() {
  var $component = $(div[data-component=component-name]);
  $component.append('<div data-action="toggle-visibility--component-name">handle</div>');
  $component.data('active', true);
  if ($component.data('active')) {
    // do something  
  }
});

obviously it can change, but just to note that data-action is currently in use for webtrends event tracking on elements.

ah yes. maybe data-event because it will be an action fired by an event e.g. click, focus etc...