TASK: #115114 - 修改小组件结构

src/components/grid-container/container.ts

@@ -245,7 +245,7 @@ class GaiaContainer extends StarBaseElement {
           containerStyle.cssText,
           this.name
         )
-        let dndObserverCallback = () => {
+        // let dndObserverCallback = () => {
         if (this._dnd.enabled !== this['drag-and-drop']) {
           this._dnd.enabled = this['drag-and-drop']
           if (this._dnd.enabled) {
@@ -291,13 +291,14 @@ class GaiaContainer extends StarBaseElement {
             this.removeEventListener('folder-destroy', this.destroyFolder)
           }
         }
-        }
+        // }
         window.addEventListener('resize', () => {
           this.firstUpdated().then(this.changeLayout)
         })
-        this.dndObserver = new MutationObserver(dndObserverCallback)
+        // this.dndObserver = new MutationObserver(dndObserverCallback)
 
-        dndObserverCallback()
+        // dndObserverCallback()
+        this.addPage()
         this.updateComplete.then(() => {
           this.ready = true
           this.changeLayout()

src/widgets/battery/battery.ts

@@ -1,7 +1,8 @@
 import GaiaWidget from '../gaia-widget'
 import '../../components/battery/battery'
 import {StarBattery} from '../../components/battery/battery'
-import {customElement} from 'lit/decorators.js'
+import {customElement, query} from 'lit/decorators.js'
+import {css, html} from 'lit'
 
 @customElement('gaia-battery')
 class BatteryWidget extends GaiaWidget {
@@ -10,23 +11,30 @@ class BatteryWidget extends GaiaWidget {
     appName,
     origin,
     size,
-    manifestWidgetName,
+    widgetType,
+    widgetName,
+    params,
   }: {
     url: string
     size: [number, number]
     origin: string
     appName: string
-    manifestWidgetName: string
+    widgetType: string
+    widgetName: string
+    params: any
   }) {
     super({
       url: url || 'js/widgets/battery.js',
       appName: appName || 'homescreen',
       origin: origin || 'http://homescreen.localhost/manifest.webmanifest',
       size: size || [2, 2],
-      manifestWidgetName: manifestWidgetName || 'battery',
+      widgetType: widgetType || 'battery',
+      widgetName,
+      params,
     })
   }
 
+  @query('star-battery') battery!: StarBattery
   _battery: any
   async init() {
     // @ts-ignore
@@ -38,7 +46,7 @@ class BatteryWidget extends GaiaWidget {
     this.lifeCycle = 'initialized'
   }
 
-  run = async () => {
+  firstUpdated = async () => {
     if (this.lifeCycle == 'initializing') {
       await this.init()
     }
@@ -57,11 +65,6 @@ class BatteryWidget extends GaiaWidget {
     }
   }
 
-  battery!: StarBattery
-  connectedCallback() {
-    this.battery = this.shadowRoot!.querySelector('star-battery')!
-  }
-
   get percent() {
     return this.battery.percent
   }
@@ -84,23 +87,27 @@ class BatteryWidget extends GaiaWidget {
     this.battery.charge = value
   }
 
-  get template() {
+  render() {
-    return `
+    return html`
       <star-battery></star-battery>
-      <style>
+    `
+  }
+  static override get styles() {
+    return [
+      css`
         :host {
           display: flex;
           height: 100%;
           width: 100%;
-          align-item: center;
+          align-items: center;
           justify-content: center;
         }
 
         star-battery {
           flex: 1;
         }
-      </style>
+      `,
-    `
+    ]
   }
 }
 

src/widgets/clock/clock.ts

@@ -1,52 +1,82 @@
 import GaiaWidget from '../gaia-widget'
 import '../../components/clock/clock'
 import {StarClock} from '../../components/clock/clock'
-import {customElement} from 'lit/decorators.js'
+import {customElement, query} from 'lit/decorators.js'
+import {html, TemplateResult} from 'lit'
 
 @customElement('gaia-clock')
 class ClockWidget extends GaiaWidget {
-  _type: 'transparent' | 'daile' = 'daile'
+  _type!: 'transparent' | 'diale'
+  _mode!: 'light' | ''
 
   get type() {
     return this._type
   }
 
-  set type(value: 'transparent' | 'daile') {
+  set type(value: 'transparent' | 'diale') {
     if (value !== this._type) {
       this._type = value
+      if (this.clock) {
         this.clock.type = value
       }
     }
+  }
 
+  get mode() {
+    return this._mode
+  }
+
+  set mode(value) {
+    if (this._mode !== value) {
+      this._mode = value
+      this.clock.mode = value
+    }
+  }
   constructor({
     url,
     appName,
     origin,
     size,
-    manifestWidgetName,
+    widgetType,
+    widgetName,
+    params,
   }: {
     url: string
     size: [number, number]
     origin: string
     appName: string
-    manifestWidgetName: string
+    widgetType: string
+    widgetName: string
+    params: any
   }) {
     super({
       url: url || 'js/widgets/clock.js',
       appName: appName || 'homescreen',
       origin: origin || 'http://homescreen.localhost/manifest.webmanifest',
       size: size || [2, 2],
-      manifestWidgetName: manifestWidgetName || 'clock',
+      widgetType: widgetType || 'clock',
+      widgetName,
+      params,
     })
+
+    if (this._type == 'transparent') {
+      window.addEventListener('change-background-average-gray', (evt: any) => {
+        console.log('change-background-average-gray', evt)
+        if (evt.detail < 150) {
+          this.mode = 'light'
+        }
+      })
+
+      const gray = localStorage.getItem('background-average-gray')
+      if (gray && +gray < 150) {
+        this._mode = 'light'
+      }
+    }
   }
 
-  clock!: StarClock
+  @query('star-clock') clock!: StarClock
-  connectedCallback() {
-    this.clock = this.shadowRoot!.querySelector('star-clock')!
-  }
 
-  run = () => {
+  firstUpdated() {
-    if (!this.clock) this.clock = this.shadowRoot!.querySelector('star-clock')!
     this.clock.date = new Date()
   }
 
@@ -57,15 +87,21 @@ class ClockWidget extends GaiaWidget {
   refresh() {
     this.clock.date = new Date()
   }
-  get template() {
+  render(): TemplateResult<1> {
-    return `
+    console.log(this._type)
+    return html`
       <style>
         :host {
           height: 100%;
           width: 100%;
         }
       </style>
-      <star-clock type="diale"></star-clock>
+      <star-clock type="${this._type}" mode="${this.mode}"></star-clock>
+    `
+  }
+  get template() {
+    return `
+
     `
   }
 }

src/widgets/gaia-widget.ts

@@ -1,6 +1,7 @@
 // import {html, LitElement, css} from 'lit'
 // import {customElement} from 'lit/decorators.js'
 
+import {css, html} from 'lit'
 import {StarBaseElement} from '../components/base'
 
 /**
@@ -11,14 +12,14 @@ import {StarBaseElement} from '../components/base'
  *  size: manifest.b2g_features.widget.a_widget.size || [1, 1],
  *  origin: 'http://rigesterapp.localhost',
  *  appName: 'rigesterapp'
- *  manifestWidgetName: 'test-widget'
+ *  widgetType: 'test-widget'
  * })
  *
  * 向注册小组件的应用发送Activity请求：
  * new WebActivity(activityName, {
  *  data: {
  *    widgetTitle,   // 组件名，写在小组件页面的 title 标签内
- *    manifestName,  // 清单内的组件名，写在清单文件的 widget 对象中
+ *    item,          // 清单内的组件名，写在清单文件的 widgets.items 中
  *    viewName,      // 视图名，写在 template 标签内
  *  },
  *  type: ['widget']
@@ -39,8 +40,9 @@ export default class GaiaWidget extends StarBaseElement {
   size!: [number, number]
   origin!: string
   appName!: string
-  manifestWidgetName!: string // 清单文件中的组件名
+  widgetType!: string // 清单文件中的组件类型
-  widgetTitle: string = '' // 组件名
+  widgetName!: string // 清单文件中的组件名
+  widgetTitle: string = '' // 组件标题名
   viewName: string = '' // 视图名，当该组件有多个视图时，视图名用于区分
   createTime: number = new Date().getTime()
   container!: HTMLElement
@@ -59,17 +61,22 @@ export default class GaiaWidget extends StarBaseElement {
     size,
     origin,
     appName,
-    manifestWidgetName,
+    widgetType,
+    widgetName,
+    params,
   }: {
     url: string
     size: [number, number]
     origin: string
     appName: string
-    manifestWidgetName: string
+    widgetType: string
+    widgetName: string
+    params: any
   }) {
     super()
     this.widgetTitle = ''
-    this.manifestWidgetName = manifestWidgetName
+    this.widgetType = widgetType
+    this.widgetName = widgetName
     this.viewName = ''
     this.createTime = new Date().getTime()
     this.url = url // 组件文件地址
@@ -77,13 +84,20 @@ export default class GaiaWidget extends StarBaseElement {
     this.size = size // 组件行列大小
     this.appName = lowerCase(appName)
     this.attachShadow({mode: 'open'})
-    this.shadowRoot!.innerHTML = this.template
 
-    this.lifeCycle = 'initializing'
+    for (const key in params) {
-    this.init()
+      if (Object.prototype.hasOwnProperty.call(params, key)) {
+        const value = params[key]
+        // @ts-ignore
+        this[key] = value
+      }
     }
 
-  init() {
+    this.lifeCycle = 'initializing'
+    setTimeout(this.init)
+  }
+
+  init = () => {
     return new Promise((res, rej) => {
       if (this.lifeCycle == 'initializing') {
         // 补全小组件入口地址
@@ -150,7 +164,6 @@ export default class GaiaWidget extends StarBaseElement {
     }
 
     this.url = widgetInfo.url
-    this.shadowRoot!.innerHTML = this.template
     this.container.removeEventListener('touchstart', this)
     this.container.removeEventListener('touchmove', this)
     this.container.removeEventListener('touchend', this)
@@ -206,14 +219,15 @@ export default class GaiaWidget extends StarBaseElement {
     this.status = 'requesting'
     return new Promise((res, rej) => {
       data.widgetTitle = this.widgetTitle
-      data.manifestName = this.manifestWidgetName
+      data.widgetType = this.widgetType
+      data.item = this.widgetName
       data.viewName = this.viewName
 
       // @ts-ignore
-      const activity = new WebActivity(
+      const activity = new WebActivity(`${this.appName}_${this.widgetType}`, {
-        `${this.appName}_${this.manifestWidgetName}`,
+        data,
-        {data, type: ['widget']}
+        type: ['widget'],
-      )
+      })
 
       activity
         .start()
@@ -470,15 +484,15 @@ export default class GaiaWidget extends StarBaseElement {
     return string
   }
 
-  get template() {
+  render() {
-    return `
+    return html`
       <div id="gaia-widget-container-${this.createTime}"></div>
-      <style>${this.shadowStyle}</style>
     `
   }
 
-  get shadowStyle() {
+  static override get styles() {
-    return `
+    return [
+      css`
         :host {
           position: relative;
           display: inline-block;
@@ -487,10 +501,11 @@ export default class GaiaWidget extends StarBaseElement {
           box-sizing: border-box !important;
         }
 
-      :host > div[id^=gaia-widget-container-] {
+        :host > div[id^='gaia-widget-container-'] {
           overflow: hidden;
           border-radius: 8px;
         }
-    `
+      `,
+    ]
   }
 }

src/widgets/weather/weather.ts

@@ -1,33 +1,42 @@
 import GaiaWidget from '../gaia-widget'
 import '../../components/weather/weather'
 import {StarWeather} from '../../components/weather/weather'
-import {customElement} from 'lit/decorators.js'
+import {customElement, query} from 'lit/decorators.js'
+import {css, html} from 'lit'
 
 @customElement('gaia-weather')
 class WeatherWidget extends GaiaWidget {
-  _type: string = 'type22'
+  _type!: string
   _data: any
-  widget!: StarWeather
+  @query('star-weather') widget!: StarWeather
   constructor({
     url,
     appName,
     origin,
     size,
-    manifestWidgetName,
+    widgetType,
+    widgetName,
+    params,
   }: {
     url: string
     size: [number, number]
     origin: string
     appName: string
-    manifestWidgetName: string
+    widgetType: string
+    widgetName: string
+    params: any
   }) {
     super({
       url: url || 'js/widgets/weather.js',
       appName: appName || 'homescreen',
       origin: origin || 'http://homescreen.localhost/manifest.webmanifest',
       size: size || [2, 2],
-      manifestWidgetName: manifestWidgetName || 'weather',
+      widgetType: widgetType || 'weather',
+      widgetName,
+      params,
     })
+
+    this._type = 'type' + this.size.join('')
   }
 
   get type() {
@@ -54,12 +63,9 @@ class WeatherWidget extends GaiaWidget {
     }
   }
 
+  // @ts-ignore
   init() {}
 
-  connectedCallback() {
-    this.widget = this.shadowRoot?.querySelector('star-weather') as StarWeather
-  }
-
   static get observedAttributes() {
     return ['type']
   }
@@ -72,16 +78,21 @@ class WeatherWidget extends GaiaWidget {
     }
   }
 
-  get template() {
+  render() {
-    return `
+    return html`
-      <star-weather type="type22"></star-weather>
+      <star-weather type="${this.type}"></star-weather>
-      <style>
+    `
+  }
+
+  static override get styles() {
+    return [
+      css`
         :host {
           height: 100%;
           width: 100%;
         }
-      </style>
+      `,
-    `
+    ]
   }
 }