https://github.com/rokde/livestate

A webpage live state observer.
https://github.com/rokde/livestate

Last synced: about 1 year ago
JSON representation

A webpage live state observer.

Host: GitHub
URL: https://github.com/rokde/livestate
Owner: rokde
License: mit
Created: 2014-10-20T06:54:59.000Z (over 11 years ago)
Default Branch: master
Last Pushed: 2014-10-20T07:07:20.000Z (over 11 years ago)
Last Synced: 2025-02-07T05:41:26.413Z (over 1 year ago)
Language: JavaScript
Size: 133 KB
Stars: 0
Watchers: 2
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.html
- License: LICENSE

Awesome Lists containing this project

README

livestate

html.js .verify-badge.js
,html.online .verify-badge.connection-online
,html.cookies .verify-badge.cookies
,html.mouse .verify-badge.input-mouse
,html.keyboard .verify-badge.input-keyboard
,html.square .verify-badge.viewport-square
,html.landscape .verify-badge.viewport-landscape
,html.portrait .verify-badge.viewport-portrait
,html.focus .verify-badge.window-focus
{ color: #008000; display: inline-block; }

html.no-js .verify-badge.no-js
,html.offline .verify-badge.connection-offline
,html.no-cookies .verify-badge.no-cookies
,html.blur .verify-badge.window-blur
{ color: #ff0000; display: inline-block; }

html.js .verify-badge.no-js
,html.no-js .verify-badge.js
,html.online .verify-badge.connection-offline
,html.offline .verify-badge.connection-online
,html.cookies .verify-badge.no-cookies
,html.no-cookies .verify-badge.cookies
,html.mouse .verify-badge.input-keyboard
,html.keyboard .verify-badge.input-mouse
,html.square .verify-badge.viewport-landscape
,html.square .verify-badge.viewport-portrait
,html.landscape .verify-badge.viewport-square
,html.landscape .verify-badge.viewport-portrait
,html.portrait .verify-badge.viewport-square
,html.portrait .verify-badge.viewport-landscape
,html.blur .verify-badge.window-focus
,html.focus .verify-badge.window-blur
{ color: #ff0000; display: none; }

Available Sensors

You get a bunch of already built sensors. They all try to set css classes to represent their current state. By
default they use the <html> tag, but can be set to every single tag you want.

Some of the sensors can also be more explicit. They use the data- attribute on the tag. To activate
this behaviour just add the data-livestate="true" attribute to your tag.

By default your html template starts like this <html class="no-js" data-livestate="true">. And
livestate does the rest.

This can be your dom after sensor execution:

<html

class="js safari mouse landscape focus online cookies"

data-livestate="true"

data-useragent="Safari" data-useragent.version="537.36"

data-userinput="mouse"

data-viewport="landscape"

data-windowfocus="focus"

data-connection="online"

data-cookies="true">

 

<- CSS classes set by the sensors

<- Activate the data attribute generation

<- UserAgentSensor

<- UserInputSensor

<- ViewportSensor

<- WindowFocusSensor

<- ConnectionSensor

<- CookieSensor

JavascriptSensor

Built-in sensor for checking javascript availability.

Represented State
CSS Classes
Data Attribute

No javascript available
no-js
—

Javascript available
js
—

ConnectionSensor

The connection sensor observes the internet connection.

Represented State
CSS Classes
Data Attribute

Offline
offline
data-connection="offline"

Online
online
data-connection="online"

CookieSensor

The cookie sensor observes the cookie availability.

Represented State
CSS Classes
Data Attribute

Cookies available
cookies
—

No cookies available
no-cookies
—

Drag 'n Drop Sensor

The dnd sensor monitors all drag and drop operations.

Represented State
CSS Classes
Data Attribute

Dragging
dragging
—

Dropping
dropping
—

UserAgentSensor

The user agent sensor determines the current useragent name and version. Interesting for mobile webapps to
control behaviour and visibility of elements by the used browser control.

Represented State
CSS Classes
Data Attribute

User agent
safari
data-useragent="Safari"

User agent version
—
data-useragent.version="537.36"

UserInputSensor

The user input sensor toggles the user input when user switches between mouse and keyboard.

Represented State
CSS Classes
Data Attribute

Mouse
mouse
data-userinput="mouse"

Keyboard
keyboard
data-userinput="keyboard"

ViewportSensor

The viewport sensor represents the current view port dimensions.

Represented State
CSS Classes
Data Attribute

Square
square
data-viewport="square"

Landscape
landscape
data-viewport="landscape"

Portrait
protrait
data-viewport="protrait"

WindowFocusSensor

The window focus sensor toggles when window blurs.

Represented State
CSS Classes
Data Attribute

Focus win
focus
data-windowfocus="focus"

Window focus list
blur
data-viewport="blur"

Possible HTML Template

<html class="no-js" data-livestate="true">

<head>

	<title>livestate</title>

</head>

<body>

<!-- Do your stuff... -->

<!-- load the livestate and all of its sensors -->

<script src="js/livestate.js"></script>

<script src="js/livestate.sensor.js"></script>

<script src="js/livestate.useragent.sensor.js"></script>

<script src="js/livestate.userinput.sensor.js"></script>

<script src="js/livestate.viewport.sensor.js"></script>

<script src="js/livestate.windowfocus.sensor.js"></script>

<script src="js/livestate.dragdrop.sensor.js"></script>

<script src="js/livestate.connection.sensor.js"></script>

<script src="js/livestate.cookie.sensor.js"></script>

<!-- or just load the minified version -->

<script src="dist/livestate.min.js"></script>

</body></html>

ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome