TASK: #103649 - add battery widget

src/widgets/battery/battery.ts

@@ -0,0 +1,98 @@
+import GaiaWidget from '../gaia-widget'
+import '../../components/battery/battery'
+import {StarBattery} from '../../components/battery/battery'
+import {customElement} from 'lit/decorators.js'
+
+@customElement('gaia-battery')
+class BatteryWidget extends GaiaWidget {
+  constructor({
+    url,
+    appName,
+    origin,
+    size,
+    manifestWidgetName,
+  }: {
+    url: string
+    size: [number, number]
+    origin: string
+    appName: string
+    manifestWidgetName: string
+  }) {
+    super({
+      url: url || 'js/widgets/battery.js',
+      appName: appName || 'homescreen',
+      origin: origin || 'http://homescreen.localhost/manifest.webmanifest',
+      size: size || [2, 2],
+      manifestWidgetName: manifestWidgetName || 'battery',
+    })
+  }
+
+  _battery: any
+  async init() {
+    // @ts-ignore
+    this._battery = await navigator.getBattery()
+    this.percent = this._battery.level
+    this.charge = this._battery.charging
+    this._battery.addEventListener('levelchange', this)
+    this._battery.addEventListener('chargingchange', this)
+  }
+
+  handleEvent(event: Event): void {
+    switch (event.type) {
+      case 'levelchange':
+        this.percent = this._battery.level
+        break
+      case 'chargingchange':
+        this.charge = this._battery.charging
+        break
+    }
+  }
+
+  battery!: StarBattery
+  connectedCallback() {
+    this.battery = this.shadowRoot!.querySelector('star-battery')!
+  }
+
+  get percent() {
+    return this.battery.percent
+  }
+
+  set percent(value) {
+    this.battery.percent = value
+  }
+
+  get charge() {
+    return this.battery.charge
+  }
+
+  set charge(value) {
+    // this.battery.charge = !!value
+    if (value) {
+      setTimeout(() => {
+        this.battery.charge = false
+      })
+    }
+    this.battery.charge = value
+  }
+
+  get template() {
+    return `
+      <star-battery></star-battery>
+      <style>
+        :host {
+          display: flex;
+          height: 100%;
+          width: 100%;
+          align-item: center;
+          justify-content: center;
+        }
+
+        star-battery {
+          flex: 1;
+        }
+      </style>
+    `
+  }
+}
+
+export default BatteryWidget