TASK: #103649 - 添加天气小组件

src/widgets/gaia-widget.ts

@@ -1,6 +1,8 @@
 // import {html, LitElement, css} from 'lit'
 // import {customElement} from 'lit/decorators.js'
 
+import {StarBaseElement} from '../components/base'
+
 /**
  * 主屏小组件:
  *
@@ -27,7 +29,12 @@
  *      写法（没有 <template> 标签）互斥
  */
 // @customElement('gaia-widget')
-export default class GaiaWidget extends HTMLElement {
+
+function lowerCase(str: string) {
+  str = str.replace(/\s/g, '')
+  return str.toLocaleLowerCase()
+}
+export default class GaiaWidget extends StarBaseElement {
   url!: string
   size!: [number, number]
   origin!: string
@@ -59,15 +66,14 @@ export default class GaiaWidget extends HTMLElement {
     this.url = url // 组件文件地址
     this.origin = origin // 注册应用 origin
     this.size = size // 组件行列大小
-    this.appName = appName
+    this.appName = lowerCase(appName)
     this.attachShadow({mode: 'open'})
     this.shadowRoot!.innerHTML = this.template
 
     this.init()
+    this.dispatchReady()
   }
 
-  connectedCallback() {}
-
   init() {
     // 补全小组件入口地址
     if (!/^http(s)?:\/\//.test(this.url)) {
@@ -84,20 +90,16 @@ export default class GaiaWidget extends HTMLElement {
     this.container.addEventListener('touchmove', this)
     this.container.addEventListener('touchend', this)
     this.container.addEventListener('click', this)
+  }
 
+  dispatchReady = () => {
     // 需要在构造函数中被调用，在connectedCallback中调用会导致移动元素时刷新的问题
-    this.querySources(this.url)
-      // @ts-ignore
-      .then(this.parseHTML)
-      .then(() => {
-        // 防止安装、更新应用时，首次 Activity 请求因注册方 Service Worker 未完成安装而丢失
-        let n = 0
-        this.activityRequestTimer = window.setInterval(() => {
-          if (n++ > 4) clearInterval(this.activityRequestTimer)
-          this.openActivity({data: {type: 'ready'}})
-        }, 100)
-      })
-      .catch((err) => console.error(err))
+    // 防止安装、更新应用时，首次 Activity 请求因注册方 Service Worker 未完成安装而丢失
+    let n = 0
+    this.activityRequestTimer = window.setInterval(() => {
+      if (n++ > 4) clearInterval(this.activityRequestTimer)
+      this.openActivity({data: {type: 'ready'}})
+    }, 100)
   }
 
   refresh(widgetInfo: {size: [number, number]; url: string}) {
@@ -259,10 +261,11 @@ export default class GaiaWidget extends HTMLElement {
    * 处理来自注册应用的 Activity 传入的操作命令
    */
   handleActivity = (data: any) => {
-    const {changeContext, changeAttributes} = data
+    const {changeContext, changeAttributes, changeProperties} = data
 
     this.changeAttributes(changeAttributes)
     this.changeContext(changeContext)
+    this.changeProperties(changeProperties)
   }
 
   changeContext = (data: any) => {
@@ -293,6 +296,16 @@ export default class GaiaWidget extends HTMLElement {
     })
   }
 
+  changeProperties = (data: any) => {
+    if (!data) return
+
+    for (const key in data) {
+      const value = data[key] as string
+      // @ts-ignore
+      this[key] = value
+    }
+  }
+
   /**
    * TBD: 需要考虑更多元素
    * 处理img资源请求路径
@@ -428,6 +441,3 @@ export default class GaiaWidget extends HTMLElement {
     `
   }
 }
-try {
-  customElements.define('gaia-widget', GaiaWidget)
-} catch (error) {}

src/widgets/weather/weather.ts

@@ -0,0 +1,88 @@
+import GaiaWidget from '../gaia-widget'
+import '../../components/weather/weather'
+import {StarWeather} from '../../components/weather/weather'
+import {customElement} from 'lit/decorators.js'
+
+@customElement('gaia-weather')
+class WeatherWidget extends GaiaWidget {
+  _type: string = 'type22'
+  _data: any
+  widget!: StarWeather
+  constructor({
+    url,
+    appName,
+    origin,
+    size,
+    manifestWidgetName,
+  }: {
+    url: string
+    size: [number, number]
+    origin: string
+    appName: string
+    manifestWidgetName: string
+  }) {
+    super({
+      url: url || 'js/widgets/weather.js',
+      appName: appName || 'homescreen',
+      origin: origin || 'http://homescreen.localhost/manifest.webmanifest',
+      size: size || [2, 2],
+      manifestWidgetName: manifestWidgetName || 'weather',
+    })
+  }
+
+  get type() {
+    return this._type
+  }
+
+  set type(value) {
+    this.type = value
+    this.widget.type = value
+  }
+
+  get data() {
+    return this._data
+  }
+
+  set data(value: any) {
+    this._data = value
+    if (!this.widget) {
+      setTimeout(() => {
+        this.widget.data = value
+      }, 100)
+    } else {
+      this.widget.data = value
+    }
+  }
+
+  init() {}
+
+  connectedCallback() {
+    this.widget = this.shadowRoot?.querySelector('star-weather') as StarWeather
+  }
+
+  static get observedAttributes() {
+    return ['type']
+  }
+
+  attributeChangedCallback(name: string, _: string, newValue: string) {
+    switch (name) {
+      case 'type':
+        this.type = newValue
+        break
+    }
+  }
+
+  get template() {
+    return `
+      <star-weather type="type22"></star-weather>
+      <style>
+        :host {
+          height: 100%;
+          width:100%;
+        }
+      </style>
+    `
+  }
+}
+
+export default WeatherWidget