├── README.md
├── ambientLight.html
├── deviceOrientation.html
├── onlinestate.html
└── visibilityChange.html
/README.md:
--------------------------------------------------------------------------------
1 | # HTML5 - examples
2 |
3 | ### Ambient Light API
4 | [W3c Ambient light Sensor](https://w3c.github.io/ambient-light/) - W3c Specifications
5 |
6 | #### Example
7 | ```javascript
8 | function updateLightLevel(lightLevel) {
9 | document.getElementById('lux').innerHTML = Math.round(lightLevel);
10 |
11 | if(lightLevel < 50) {
12 | document.body.className = 'dark';
13 | } else if(lightLevel < 10000) {
14 | document.body.className = 'classic';
15 | } else {
16 | document.body.className = 'light';
17 | }
18 | }
19 |
20 | var isOldApiSupported = 'ondevicelight' in window;
21 |
22 | if(isOldApiSupported) {
23 | window.addEventListener('devicelight', function(event) {
24 | updateLightLevel(event.value);
25 | });
26 | } else {
27 | document.querySelector('.js-api-support').removeAttribute('hidden');
28 | var sensor = new AmbientLightSensor();
29 |
30 | // starting
31 | sensor.start();
32 |
33 | sensor.addEventListener('change', function(event) {
34 | updateLightLevel(event.reading.illuminance);
35 | });
36 | }
37 | ````
38 |
39 | ### Device Orientation
40 | [Device Orientation](https://www.w3.org/TR/orientation-event/) - W3c Specifications
41 |
42 | #### Example
43 | ```javascript
44 | var imagem = document.querySelector('img')
45 | window.addEventListener('deviceorientation', function(event) {
46 | var lr = event.gamma;
47 | var fb = event.beta;
48 | imagem.style.transform = 'rotate('+lr+'deg) rotate3d(1,0,0,'+(fb*-1)+'deg)';
49 | });
50 | ````
51 |
52 |
53 | ### Online State
54 | [Online State](https://html.spec.whatwg.org/multipage/offline.html#navigator.online) - W3c Specifications
55 |
56 | #### Example
57 | ```javascript
58 | var statusElem = document.getElementById('status');
59 | var statusElemP = document.getElementsByTagName('p');
60 | setInterval(function () {
61 | statusElemP[0].className = navigator.onLine ? 'online' : 'offline';
62 | statusElem.innerHTML = navigator.onLine ? 'online' : 'offline';
63 | }, 250);
64 | ````
65 |
66 | ### Page Visibility
67 | [Page Visibility](https://w3c.github.io/page-visibility/) - W3c Specifications
68 |
69 | #### Example
70 | ```javascript
71 | document.addEventListener('visibilitychange', function () {
72 | if (document.hidden) {
73 | console.log('inativo');
74 | document.getElementsByTagName('title')[0].innerHTML = 'Saiu da página';
75 | } else {
76 | console.log('ativo');
77 | document.getElementsByTagName('title')[0].innerHTML = 'Olhando a página';
78 | }
79 | });
80 | ````
81 |
--------------------------------------------------------------------------------
/ambientLight.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Ambient Light API
6 |
22 |
23 |
24 | Ambient Light API
25 | A ocorrência de luz é de:
26 |
55 |
56 |
57 |
--------------------------------------------------------------------------------
/deviceOrientation.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Device Orientation
6 |
12 |
13 |
14 | Device Orientation
15 | 
16 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/onlinestate.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Online State
6 |
7 |
8 | navigator.onLine testing
9 |
10 | Current network status: checking...
11 |
12 |
20 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/visibilityChange.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Page Visibility
6 |
7 |
8 |
19 |
20 |
21 |
--------------------------------------------------------------------------------