{"id":22910339,"url":"https://github.com/rokde/livestate","last_synced_at":"2025-04-01T10:27:00.195Z","repository":{"id":22123743,"uuid":"25454442","full_name":"rokde/livestate","owner":"rokde","description":"A webpage live state observer.","archived":false,"fork":false,"pushed_at":"2014-10-20T07:07:20.000Z","size":136,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-07T05:41:26.413Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rokde.png","metadata":{"files":{"readme":"README.html","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-10-20T06:54:59.000Z","updated_at":"2014-10-20T06:55:16.000Z","dependencies_parsed_at":"2022-07-17T12:46:19.167Z","dependency_job_id":null,"html_url":"https://github.com/rokde/livestate","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rokde%2Flivestate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rokde%2Flivestate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rokde%2Flivestate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rokde%2Flivestate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rokde","download_url":"https://codeload.github.com/rokde/livestate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246622421,"owners_count":20807143,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-14T03:43:04.878Z","updated_at":"2025-04-01T10:27:00.173Z","avatar_url":"https://github.com/rokde.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003chtml class=\"no-js\" data-livestate=\"true\"\u003e\n\u003chead\u003e\n\t\u003ctitle\u003elivestate\u003c/title\u003e\n\t\u003c!-- Latest compiled and minified CSS --\u003e\n\t\u003clink rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css\"\u003e\n\n\t\u003c!-- Optional theme --\u003e\n\t\u003clink rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css\"\u003e\n\n\t\u003cstyle\u003e\n\t\thtml.js .verify-badge.js\n\t\t,html.online .verify-badge.connection-online\n\t\t,html.cookies .verify-badge.cookies\n\t\t,html.mouse .verify-badge.input-mouse\n\t\t,html.keyboard .verify-badge.input-keyboard\n\t\t,html.square .verify-badge.viewport-square\n\t\t,html.landscape .verify-badge.viewport-landscape\n\t\t,html.portrait .verify-badge.viewport-portrait\n\t\t,html.focus .verify-badge.window-focus\n\t\t{ color: #008000; display: inline-block; }\n\n\t\thtml.no-js .verify-badge.no-js\n\t\t,html.offline .verify-badge.connection-offline\n\t\t,html.no-cookies .verify-badge.no-cookies\n\t\t,html.blur .verify-badge.window-blur\n\t\t{ color: #ff0000; display: inline-block; }\n\n\t\thtml.js .verify-badge.no-js\n\t\t,html.no-js .verify-badge.js\n\t\t,html.online .verify-badge.connection-offline\n\t\t,html.offline .verify-badge.connection-online\n\t\t,html.cookies .verify-badge.no-cookies\n\t\t,html.no-cookies .verify-badge.cookies\n\t\t,html.mouse .verify-badge.input-keyboard\n\t\t,html.keyboard .verify-badge.input-mouse\n\t\t,html.square .verify-badge.viewport-landscape\n\t\t,html.square .verify-badge.viewport-portrait\n\t\t,html.landscape .verify-badge.viewport-square\n\t\t,html.landscape .verify-badge.viewport-portrait\n\t\t,html.portrait .verify-badge.viewport-square\n\t\t,html.portrait .verify-badge.viewport-landscape\n\t\t,html.blur .verify-badge.window-focus\n\t\t,html.focus .verify-badge.window-blur\n\t\t{ color: #ff0000; display: none; }\n\t\u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\n\u003cdiv class=\"container\"\u003e\n\t\u003cdiv class=\"page-header\"\u003e\n\t\t\u003ch1\u003elivestate\u003c/h1\u003e\n\t\t\u003cp class=\"lead\"\u003ea live state observer\u003c/p\u003e\n\t\t\u003cdiv class=\"row\"\u003e\n\t\t\t\u003cdiv class=\"col-md-2\"\u003e\n\t\t\t\t\u003cdiv class=\"well well-sm\"\u003e\n\t\t\t\t\tConnection\n\t\t\t\t\t\u003cdiv class=\"pull-right\"\u003e\u003cspan class=\"verify-badge connection-online\"\u003eOnline\u003c/span\u003e\u003cspan class=\"verify-badge connection-offline\"\u003eOffline\u003c/span\u003e\u003c/div\u003e\n\t\t\t\t\u003c/div\u003e\n\t\t\t\u003c/div\u003e\n\t\t\t\u003cdiv class=\"col-md-2\"\u003e\n\t\t\t\t\u003cdiv class=\"well well-sm\"\u003e\n\t\t\t\t\tCookies\n\t\t\t\t\t\u003cdiv class=\"pull-right\"\u003e\u003cspan class=\"verify-badge cookies\"\u003eYes\u003c/span\u003e\u003cspan class=\"verify-badge no-cookies\"\u003eNo\u003c/span\u003e\u003c/div\u003e\n\t\t\t\t\u003c/div\u003e\n\t\t\t\u003c/div\u003e\n\t\t\t\u003cdiv class=\"col-md-2\"\u003e\n\t\t\t\t\u003cdiv class=\"well well-sm\"\u003e\n\t\t\t\t\tFocus\n\t\t\t\t\t\u003cdiv class=\"pull-right\"\u003e\u003cspan class=\"verify-badge window-focus\"\u003eFocus\u003c/span\u003e\u003cspan class=\"verify-badge window-blur\"\u003eBlur\u003c/span\u003e\u003c/div\u003e\n\t\t\t\t\u003c/div\u003e\n\t\t\t\u003c/div\u003e\n\t\t\t\u003cdiv class=\"col-md-2\"\u003e\n\t\t\t\t\u003cdiv class=\"well well-sm\"\u003e\n\t\t\t\t\tJavascript\n\t\t\t\t\t\u003cdiv class=\"pull-right\"\u003e\u003cspan class=\"verify-badge js\"\u003eYes\u003c/span\u003e\u003cspan class=\"verify-badge no-js\"\u003eNo\u003c/span\u003e\u003c/div\u003e\n\t\t\t\t\u003c/div\u003e\n\t\t\t\u003c/div\u003e\n\t\t\t\u003cdiv class=\"col-md-2\"\u003e\n\t\t\t\t\u003cdiv class=\"well well-sm\"\u003e\n\t\t\t\t\tUserInput\n\t\t\t\t\t\u003cdiv class=\"pull-right\"\u003e\u003cspan class=\"verify-badge input-keyboard\"\u003eKeyboard\u003c/span\u003e\u003cspan class=\"verify-badge input-mouse\"\u003eMouse\u003c/span\u003e\u003c/div\u003e\n\t\t\t\t\u003c/div\u003e\n\t\t\t\u003c/div\u003e\n\t\t\t\u003cdiv class=\"col-md-2\"\u003e\n\t\t\t\t\u003cdiv class=\"well well-sm\"\u003e\n\t\t\t\t\tViewport\n\t\t\t\t\t\u003cdiv class=\"pull-right\"\u003e\u003cspan class=\"verify-badge viewport-portrait\"\u003ePortrait\u003c/span\u003e\u003cspan class=\"verify-badge viewport-landscape\"\u003eLandscape\u003c/span\u003e\u003cspan class=\"verify-badge viewport-square\"\u003eSquare\u003c/span\u003e\u003c/div\u003e\n\t\t\t\t\u003c/div\u003e\n\t\t\t\u003c/div\u003e\n\t\t\u003c/div\u003e\n\t\u003c/div\u003e\n\n\t\u003ch2\u003eAvailable Sensors\u003c/h2\u003e\n\t\u003cp\u003eYou get a bunch of already built sensors. They all try to set css classes to represent their current state. By\n\t\tdefault they use the \u003ccode\u003e\u0026lt;html\u0026gt;\u003c/code\u003e tag, but can be set to every single tag you want.\u003c/p\u003e\n\t\u003cp\u003eSome of the sensors can also be more explicit. They use the \u003ccode\u003edata-\u003c/code\u003e attribute on the tag. To activate\n\t\tthis behaviour just add the \u003ccode\u003edata-livestate=\"true\"\u003c/code\u003e attribute to your tag.\u003c/p\u003e\n\t\u003cp\u003eBy default your html template starts like this \u003ccode\u003e\u0026lt;html class=\"no-js\" data-livestate=\"true\"\u0026gt;\u003c/code\u003e. And\n\t\tlivestate does the rest.\u003c/p\u003e\n\t\u003cp\u003eThis can be your dom after sensor execution:\n\t\u003cdiv class=\"row\"\u003e\n\t\t\u003cpre class=\"col-md-6\"\u003e\u0026lt;html\nclass=\"js safari mouse landscape focus online cookies\"\ndata-livestate=\"true\"\ndata-useragent=\"Safari\" data-useragent.version=\"537.36\"\ndata-userinput=\"mouse\"\ndata-viewport=\"landscape\"\ndata-windowfocus=\"focus\"\ndata-connection=\"online\"\ndata-cookies=\"true\"\u0026gt;\u003c/pre\u003e\n\t\t\u003cpre class=\"col-md-6\"\u003e\u0026nbsp;\n\u0026lt;- CSS classes set by the sensors\n\u0026lt;- Activate the data attribute generation\n\u0026lt;- UserAgentSensor\n\u0026lt;- UserInputSensor\n\u0026lt;- ViewportSensor\n\u0026lt;- WindowFocusSensor\n\u0026lt;- ConnectionSensor\n\u0026lt;- CookieSensor\u003c/pre\u003e\n\t\u003c/div\u003e\n\n\t\u003ch3\u003eJavascriptSensor\u003c/h3\u003e\n\t\u003cp\u003eBuilt-in sensor for checking javascript availability.\u003c/p\u003e\n\t\u003ctable class=\"table table-hover\"\u003e\n\t\t\u003cthead\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003cth\u003eRepresented State\u003c/th\u003e\n\t\t\t\u003cth\u003eCSS Classes\u003c/th\u003e\n\t\t\t\u003cth\u003eData Attribute\u003c/th\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003c/thead\u003e\n\t\t\u003ctbody\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eNo javascript available\u003c/th\u003e\n\t\t\t\u003ctd\u003e\u003ckbd\u003eno-js\u003c/kbd\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u0026mdash;\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eJavascript available\u003c/th\u003e\n\t\t\t\u003ctd\u003e\u003ckbd\u003ejs\u003c/kbd\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u0026mdash;\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003c/tbody\u003e\n\t\u003c/table\u003e\n\n\n\t\u003ch3\u003eConnectionSensor\u003c/h3\u003e\n\t\u003cp\u003eThe connection sensor observes the internet connection.\u003c/p\u003e\n\t\u003ctable class=\"table table-hover\"\u003e\n\t\t\u003cthead\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003cth\u003eRepresented State\u003c/th\u003e\n\t\t\t\u003cth\u003eCSS Classes\u003c/th\u003e\n\t\t\t\u003cth\u003eData Attribute\u003c/th\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003c/thead\u003e\n\t\t\u003ctbody\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eOffline\u003c/th\u003e\n\t\t\t\u003ctd\u003e\u003ckbd\u003eoffline\u003c/kbd\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003ckbd\u003edata-connection=\"offline\"\u003c/kbd\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eOnline\u003c/th\u003e\n\t\t\t\u003ctd\u003e\u003ckbd\u003eonline\u003c/kbd\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003ckbd\u003edata-connection=\"online\"\u003c/kbd\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003c/tbody\u003e\n\t\u003c/table\u003e\n\n\n\t\u003ch3\u003eCookieSensor\u003c/h3\u003e\n\t\u003cp\u003eThe cookie sensor observes the cookie availability.\u003c/p\u003e\n\t\u003ctable class=\"table table-hover\"\u003e\n\t\t\u003cthead\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003cth\u003eRepresented State\u003c/th\u003e\n\t\t\t\u003cth\u003eCSS Classes\u003c/th\u003e\n\t\t\t\u003cth\u003eData Attribute\u003c/th\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003c/thead\u003e\n\t\t\u003ctbody\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eCookies available\u003c/th\u003e\n\t\t\t\u003ctd\u003e\u003ckbd\u003ecookies\u003c/kbd\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u0026mdash;\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eNo cookies available\u003c/th\u003e\n\t\t\t\u003ctd\u003e\u003ckbd\u003eno-cookies\u003c/kbd\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u0026mdash;\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003c/tbody\u003e\n\t\u003c/table\u003e\n\n\n\t\u003ch3\u003eDrag 'n Drop Sensor\u003c/h3\u003e\n\t\u003cp\u003eThe dnd sensor monitors all drag and drop operations.\u003c/p\u003e\n\t\u003ctable class=\"table table-hover\"\u003e\n\t\t\u003cthead\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003cth\u003eRepresented State\u003c/th\u003e\n\t\t\t\u003cth\u003eCSS Classes\u003c/th\u003e\n\t\t\t\u003cth\u003eData Attribute\u003c/th\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003c/thead\u003e\n\t\t\u003ctbody\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eDragging\u003c/th\u003e\n\t\t\t\u003ctd\u003e\u003ckbd\u003edragging\u003c/kbd\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u0026mdash;\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eDropping\u003c/th\u003e\n\t\t\t\u003ctd\u003e\u003ckbd\u003edropping\u003c/kbd\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u0026mdash;\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003c/tbody\u003e\n\t\u003c/table\u003e\n\n\n\t\u003ch3\u003eUserAgentSensor\u003c/h3\u003e\n\t\u003cp\u003eThe user agent sensor determines the current useragent name and version. Interesting for mobile webapps to\n\t\tcontrol behaviour and visibility of elements by the used browser control.\u003c/p\u003e\n\t\u003ctable class=\"table table-hover\"\u003e\n\t\t\u003cthead\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003cth\u003eRepresented State\u003c/th\u003e\n\t\t\t\u003cth\u003eCSS Classes\u003c/th\u003e\n\t\t\t\u003cth\u003eData Attribute\u003c/th\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003c/thead\u003e\n\t\t\u003ctbody\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003cth\u003eUser agent\u003c/th\u003e\n\t\t\t\u003ctd\u003esafari\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003ckbd\u003edata-useragent=\"Safari\"\u003c/kbd\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003cth\u003eUser agent version\u003c/th\u003e\n\t\t\t\u003ctd\u003e\u0026mdash;\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003ckbd\u003edata-useragent.version=\"537.36\"\u003c/kbd\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003c/tbody\u003e\n\t\u003c/table\u003e\n\n\n\t\u003ch3\u003eUserInputSensor\u003c/h3\u003e\n\t\u003cp\u003eThe user input sensor toggles the user input when user switches between mouse and keyboard.\u003c/p\u003e\n\t\u003ctable class=\"table table-hover\"\u003e\n\t\t\u003cthead\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003cth\u003eRepresented State\u003c/th\u003e\n\t\t\t\u003cth\u003eCSS Classes\u003c/th\u003e\n\t\t\t\u003cth\u003eData Attribute\u003c/th\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003c/thead\u003e\n\t\t\u003ctbody\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eMouse\u003c/th\u003e\n\t\t\t\u003ctd\u003e\u003ckbd\u003emouse\u003c/kbd\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003ckbd\u003edata-userinput=\"mouse\"\u003c/kbd\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eKeyboard\u003c/th\u003e\n\t\t\t\u003ctd\u003e\u003ckbd\u003ekeyboard\u003c/kbd\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003ckbd\u003edata-userinput=\"keyboard\"\u003c/kbd\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003c/tbody\u003e\n\t\u003c/table\u003e\n\n\n\t\u003ch3\u003eViewportSensor\u003c/h3\u003e\n\t\u003cp\u003eThe viewport sensor represents the current view port dimensions.\u003c/p\u003e\n\t\u003ctable class=\"table table-hover\"\u003e\n\t\t\u003cthead\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003cth\u003eRepresented State\u003c/th\u003e\n\t\t\t\u003cth\u003eCSS Classes\u003c/th\u003e\n\t\t\t\u003cth\u003eData Attribute\u003c/th\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003c/thead\u003e\n\t\t\u003ctbody\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eSquare\u003c/th\u003e\n\t\t\t\u003ctd\u003e\u003ckbd\u003esquare\u003c/kbd\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003ckbd\u003edata-viewport=\"square\"\u003c/kbd\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eLandscape\u003c/th\u003e\n\t\t\t\u003ctd\u003e\u003ckbd\u003elandscape\u003c/kbd\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003ckbd\u003edata-viewport=\"landscape\"\u003c/kbd\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003ePortrait\u003c/th\u003e\n\t\t\t\u003ctd\u003e\u003ckbd\u003eprotrait\u003c/kbd\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003ckbd\u003edata-viewport=\"protrait\"\u003c/kbd\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003c/tbody\u003e\n\t\u003c/table\u003e\n\n\n\t\u003ch3\u003eWindowFocusSensor\u003c/h3\u003e\n\t\u003cp\u003eThe window focus sensor toggles when window blurs.\u003c/p\u003e\n\t\u003ctable class=\"table table-hover\"\u003e\n\t\t\u003cthead\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003cth\u003eRepresented State\u003c/th\u003e\n\t\t\t\u003cth\u003eCSS Classes\u003c/th\u003e\n\t\t\t\u003cth\u003eData Attribute\u003c/th\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003c/thead\u003e\n\t\t\u003ctbody\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eFocus win \u003c/th\u003e\n\t\t\t\u003ctd\u003e\u003ckbd\u003efocus\u003c/kbd\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003ckbd\u003edata-windowfocus=\"focus\"\u003c/kbd\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eWindow focus list\u003c/th\u003e\n\t\t\t\u003ctd\u003e\u003ckbd\u003eblur\u003c/kbd\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003ckbd\u003edata-viewport=\"blur\"\u003c/kbd\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003c/tbody\u003e\n\t\u003c/table\u003e\n\n\n\t\u003ch2\u003ePossible HTML Template\u003c/h2\u003e\n\t\u003cpre\u003e\u003ccode\u003e\u0026lt;html class=\"no-js\" data-livestate=\"true\"\u0026gt;\n\u0026lt;head\u0026gt;\n\t\u0026lt;title\u0026gt;livestate\u0026lt;/title\u0026gt;\n\u0026lt;/head\u0026gt;\n\u0026lt;body\u0026gt;\n\n\u0026lt;!-- Do your stuff... --\u0026gt;\n\n\n\u0026lt;!-- load the livestate and all of its sensors --\u0026gt;\n\u0026lt;script src=\"js/livestate.js\"\u0026gt;\u0026lt;/script\u0026gt;\n\u0026lt;script src=\"js/livestate.sensor.js\"\u0026gt;\u0026lt;/script\u0026gt;\n\u0026lt;script src=\"js/livestate.useragent.sensor.js\"\u0026gt;\u0026lt;/script\u0026gt;\n\u0026lt;script src=\"js/livestate.userinput.sensor.js\"\u0026gt;\u0026lt;/script\u0026gt;\n\u0026lt;script src=\"js/livestate.viewport.sensor.js\"\u0026gt;\u0026lt;/script\u0026gt;\n\u0026lt;script src=\"js/livestate.windowfocus.sensor.js\"\u0026gt;\u0026lt;/script\u0026gt;\n\u0026lt;script src=\"js/livestate.dragdrop.sensor.js\"\u0026gt;\u0026lt;/script\u0026gt;\n\u0026lt;script src=\"js/livestate.connection.sensor.js\"\u0026gt;\u0026lt;/script\u0026gt;\n\u0026lt;script src=\"js/livestate.cookie.sensor.js\"\u0026gt;\u0026lt;/script\u0026gt;\n\u0026lt;!-- or just load the minified version --\u0026gt;\n\u0026lt;script src=\"dist/livestate.min.js\"\u0026gt;\u0026lt;/script\u0026gt;\n\u0026lt;/body\u0026gt;\u0026lt;/html\u0026gt;\u003c/code\u003e\u003c/pre\u003e\n\n\u003c/div\u003e\n\n\u003c!-- load the livestate and all of its sensors --\u003e\n\u003c!--script src=\"src/livestate.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"src/livestate.sensor.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"src/livestate.useragent.sensor.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"src/livestate.userinput.sensor.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"src/livestate.viewport.sensor.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"src/livestate.windowfocus.sensor.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"src/livestate.dragdrop.sensor.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"src/livestate.connection.sensor.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"src/livestate.cookie.sensor.js\"\u003e\u003c/script--\u003e\n\u003c!-- or just load the minified version --\u003e\n\u003cscript src=\"dist/livestate.min.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frokde%2Flivestate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frokde%2Flivestate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frokde%2Flivestate/lists"}