├── src
├── bolt.png
├── index.js
└── styles.css
├── README.md
├── LICENSE
└── index.html
/src/bolt.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/inputsh/battery/HEAD/src/bolt.png
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Battery Status API
2 |
3 | > Battery Status API Demo
4 |
5 | ## Demo
6 |
7 | [https://r3bl.me/battery/](https://r3bl.me/battery/)
8 |
9 | ## Screenshot
10 |
11 | 
12 |
13 | ## Compatible with
14 | - Chrome 38+
15 | - Chrome for Android
16 | - Firefox 31+
17 | - Firefox for Android
18 | - Opera 25+
19 | - Opera Mobile 25+
20 |
21 | ## Not compatible with
22 | - Safari
23 | - Safari Mobile
24 | - IE Mobile
25 | - Internet Explorer
26 | - Chrome for iOS
27 | - Android Browser
28 |
29 | ## Specs
30 |
31 | [http://www.w3.org/TR/battery-status](http://www.w3.org/TR/battery-status)
32 |
33 | ## Maintained by
34 |
35 | - Aleksandar Todorović (Frontender & Web standards lover)
36 | - email: [aleksandar.todorovic@mail.ru](mailto:aleksandar.todorovic@mail.ru)
37 | - Twitter: [@r3bl_](http://twitter.com/r3bl_)
38 | - Web: [https://r3bl.me](http://r3bl.me)
39 |
40 | ## License
41 | Licensed under the MIT license.
42 |
43 | Copyright (c) 2015 [Aleksandar Todorović](https://r3bl.me).
44 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2014 Guille Paz
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
23 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | (function() {
2 | 'use strict';
3 |
4 | var battery;
5 |
6 | function toTime(sec) {
7 | sec = parseInt(sec, 10);
8 |
9 | var hours = Math.floor(sec / 3600),
10 | minutes = Math.floor((sec - (hours * 3600)) / 60),
11 | seconds = sec - (hours * 3600) - (minutes * 60);
12 |
13 | if (hours < 10) { hours = '0' + hours; }
14 | if (minutes < 10) { minutes = '0' + minutes; }
15 | if (seconds < 10) { seconds = '0' + seconds; }
16 |
17 | return hours + ':' + minutes;
18 | }
19 |
20 | function readBattery(b) {
21 | battery = b || battery;
22 |
23 | var percentage = parseFloat((battery.level * 100).toFixed(2)) + '%',
24 | fully,
25 | remaining;
26 |
27 | if (battery.charging && battery.chargingTime === Infinity) {
28 | fully = 'Calculating...';
29 | } else if (battery.chargingTime !== Infinity) {
30 | fully = toTime(battery.chargingTime);
31 | } else {
32 | fully = '---';
33 | }
34 |
35 | if (!battery.charging && battery.dischargingTime === Infinity) {
36 | remaining = 'Calculating...';
37 | } else if (battery.dischargingTime !== Infinity) {
38 | remaining = toTime(battery.dischargingTime);
39 | } else {
40 | remaining = '---';
41 | }
42 |
43 | document.styleSheets[0].insertRule('.battery:before{width:' + percentage + '}', 0);
44 | document.querySelector('.battery-percentage').innerHTML = percentage;
45 | document.querySelector('.battery-status').innerHTML = battery.charging ? 'Adapter' : 'Battery';
46 | document.querySelector('.battery-level').innerHTML = percentage;
47 | document.querySelector('.battery-fully').innerHTML = fully;
48 | document.querySelector('.battery-remaining').innerHTML = remaining;
49 |
50 | }
51 |
52 | if (navigator.battery) {
53 | readBattery(navigator.battery);
54 |
55 | } else if (navigator.getBattery) {
56 | navigator.getBattery().then(readBattery);
57 |
58 | } else {
59 | document.querySelector('.not-support').removeAttribute('hidden');
60 | }
61 |
62 | window.onload = function () {
63 | battery.addEventListener('chargingchange', function() {
64 | readBattery();
65 | });
66 |
67 | battery.addEventListener("levelchange", function() {
68 | readBattery();
69 | });
70 | };
71 | }());
72 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 |
10 | Battery Status :: API Demo
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 | - Power Source
33 | - ---
34 |
35 | - Level percentage
36 | - ---
37 |
38 | - Fully charged in
39 | - ---
40 |
41 | - Remaining time
42 | - ---
43 |
44 |
45 |
46 |
47 |
51 |
52 |
53 |
54 |
66 | 
67 |
68 |
69 |
70 |
71 |
--------------------------------------------------------------------------------
/src/styles.css:
--------------------------------------------------------------------------------
1 | /*! normalize.css v3.0.2 | MIT License | git.io/normalize */
2 | html {
3 | font-family:"Droid Sans";
4 | -ms-text-size-adjust:100%;
5 | -webkit-text-size-adjust:100%
6 | }
7 |
8 | body {
9 | margin:0
10 | }
11 |
12 | article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary {
13 | display:block
14 | }
15 |
16 | audio,canvas,progress,video {
17 | display:inline-block;
18 | vertical-align:baseline
19 | }
20 |
21 | a {
22 | background-color:transparent
23 | }
24 |
25 | a:active,a:hover {
26 | outline:0
27 | }
28 |
29 | abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:90%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}
30 | /**
31 | * Mobile First
32 | */
33 |
34 | @import url(https://fonts.googleapis.com/css?family=Raleway|Josefin+Slab:700|Droid+Sans);
35 |
36 | body {
37 | background-color: #6534ff;
38 | font: 100%/1.4em "Raleway";
39 | color
40 | margin: 0 auto;
41 | padding: 0 0.625em;
42 | color: #bbc4ef;
43 | -webkit-text-size-adjust: none;
44 | }
45 |
46 | /**
47 | * Small Screens
48 | */
49 |
50 | .demo-header {
51 | margin-bottom: 80px;
52 | text-align: center;
53 | }
54 |
55 | .demo-title {
56 | font-size: 4em;
57 | line-height: 1em;
58 | margin-top: 55px;
59 | text-align: center;
60 | }
61 |
62 | .battery-card {
63 | font-family: "Droid Sans";
64 | display: block;
65 | width: 300px;
66 | overflow: hidden;
67 | font-weight: 400;
68 | margin: 0 auto;
69 | }
70 |
71 | .battery-percentage {
72 | font-size: 3.9em;
73 | }
74 |
75 | .battery-box {
76 | margin: 0 auto;
77 | padding: 20px 0;
78 | text-align: center;
79 | }
80 |
81 | .battery {
82 | display: inline-block;
83 | position: relative;
84 | width: 85px;
85 | height: 40px;
86 | vertical-align: middle;
87 | }
88 |
89 | .battery:before {
90 | content: '';
91 | display: block;
92 | background: #000;
93 | height: 40px;
94 | position: absolute;
95 | border: 1px solid #fff;
96 | }
97 |
98 |
99 | .battery:after {
100 | content: '';
101 | display: block;
102 | background: #000;
103 | width: 6px;
104 | height: 16px;
105 | position: absolute;
106 | top: 50%;
107 | right: -11px;
108 | margin-top: -8px;
109 | border-radius: 0 4px 4px 0;
110 | }
111 |
112 | .battery-info {
113 | font-family: "Droid Sans";
114 | font-size: 12px;
115 | margin: 0 auto;
116 | padding: 15px 45px;
117 | overflow: hidden;
118 | }
119 |
120 | .battery-info dd {
121 | float: right;
122 | margin-top: -22px;
123 | text-align: left;
124 | width: 35%;
125 | }
126 |
127 | footer {
128 | margin: 70px auto 0;
129 | text-align: center;
130 | }
131 |
132 | .heart {
133 | font-style: normal;
134 | font-weight: 500;
135 | color: #c0392b;
136 | text-decoration: none;
137 | }
138 |
139 | #github-button {
140 | display: block;
141 | margin: 30px auto 0;
142 | position: relative;
143 | left: 40px;
144 | }
145 |
146 | #github-ribbon {
147 | display: inline-block;
148 | position: fixed;
149 | top: 0;
150 | right: 0;
151 | z-index: 100;
152 | border: 0;
153 | width: 149px;
154 | height: 149px;
155 | }
156 |
157 | .github-buttons {
158 | text-align: center;
159 | margin: 1em 0;
160 | }
161 |
162 | h1 {
163 | font-family: "Josefin Slab";
164 | }
165 |
166 | a, a:hover, a:visited {
167 | color: #62bcfa;
168 | text-decoration: none;
169 | }
170 |
171 |
172 | /**
173 | * Medium Screens
174 | */
175 | @media all and (min-width:40em) {}
176 |
177 | /**
178 | * Large Screens
179 | */
180 | @media all and (min-width: 54em) {}
181 |
--------------------------------------------------------------------------------