ministryofjustice/atet — pull request #405 by cleargif (2014-11-25 15:43:39+00:00)
Title: moj.state-indicator module

__Module Overview__
- a module that reads the z-index on a hidden element
- the value of the z-index maps to a screen size
- as the screen dimensions change the module will publish two events passing the current state into the callback

## The JS
Require the module:
The module will init and create the hidden element it requires.
``` js
require('./modules/moj.state-indicator')
```

__Event 1:__
Event name: `/device-state/change/`
Callback arguments: ` event, state `
- event: jQuery event object
- state: string (`"mobile"` or `"tablet"` or `"desktop"`)

Subscribe like this:
``` js
$.subscribe('/device-state/change/', function(event, state){
// .. do something clever here
});
```

__Event 2:__
Event name: `/device-state/move/[from state]/to/[to state]/`
Callback arguments: ` event, state `
- event: jQuery event object
- state: string (`"mobile"` or `"tablet"` or `"desktop"`)

Subscribe like this:
``` js
$.subscribe('/device-state/move/mobile/to/tablet/', function(event, state){
// .. do something clever here
});
```

__z-index : size__
`8001` : `"mobile"`
`8002` : `"tablet"`
`8003` : `"desktop"`

## CSS
__Note:__
You have to use this `.state-indicator` class and these `z-index` values for now.
``` sass
/* default state */
.state-indicator {
position: absolute;
top: -999em;
left: -999em;

z-index: 8001;
}

$mqs : (mobile, tablet, desktop);
@each $mq in $mqs {
$i : index($mqs, $mq);
@include media(#{$mq}) {
.state-indicator {
z-index: #{$i+8000};
}
}
}
```