openkylin
/
ura-components
mirror of https://gitee.com/openkylin/ura-components.git
9
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

This commit is contained in:
luojiahao 2022-10-20 11:09:56 +08:00
parent bb5032f2ed
commit 6fbc80aa9d
5 changed files with 193 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
src/components/grid-container/container.ts
View File

@ -245,59 +245,60 @@ class GaiaContainer extends StarBaseElement {
containerStyle.cssText,
this.name
)
let dndObserverCallback = () => {
if (this._dnd.enabled !== this['drag-and-drop']) {
this._dnd.enabled = this['drag-and-drop']
if (this._dnd.enabled) {
this.addEventListener('touchstart', this)
this.addEventListener('touchmove', this)
// this.addEventListener('touchcancel', this)
this.addEventListener('touchend', this)
// let dndObserverCallback = () => {
if (this._dnd.enabled !== this['drag-and-drop']) {
this._dnd.enabled = this['drag-and-drop']
if (this._dnd.enabled) {
this.addEventListener('touchstart', this)
this.addEventListener('touchmove', this)
// this.addEventListener('touchcancel', this)
this.addEventListener('touchend', this)
// this.addEventListener('panstart', this)
this.addEventListener('panmove', this)
this.addEventListener('panend', this)
// this.addEventListener('panstart', this)
this.addEventListener('panmove', this)
this.addEventListener('panend', this)
this.addEventListener('holdstart', this)
this.addEventListener('holdmove', this)
this.addEventListener('holdend', this)
this.addEventListener('holdstart', this)
this.addEventListener('holdmove', this)
this.addEventListener('holdend', this)
// 暂不考虑mouse事件，因其与touch事件的触发顺序会影响翻页动画：
// touchend 触发 resetView, mousedown 随后就打断
// this.addEventListener("mousedown", this);
// this.addEventListener("mousemove", this);
// this.addEventListener("mouseup", this);
this.addEventListener('click', this, true)
this.addEventListener('contextmenu', this, true)
// 暂不考虑mouse事件，因其与touch事件的触发顺序会影响翻页动画：
// touchend 触发 resetView, mousedown 随后就打断
// this.addEventListener("mousedown", this);
// this.addEventListener("mousemove", this);
// this.addEventListener("mouseup", this);
this.addEventListener('click', this, true)
this.addEventListener('contextmenu', this, true)
this.addEventListener('swipeleft', this.swipe)
this.addEventListener('swiperight', this.swipe)
this.addEventListener('swipeleft', this.swipe)
this.addEventListener('swiperight', this.swipe)
this.addEventListener('folder-destroy', this.destroyFolder)
} else {
this.cancelDrag()
this.removeEventListener('touchstart', this)
this.removeEventListener('touchmove', this)
this.removeEventListener('touchcancel', this)
this.removeEventListener('touchend', this)
// this.removeEventListener("mousedown", this);
// this.removeEventListener("mousemove", this);
// this.removeEventListener("mouseup", this);
this.removeEventListener('click', this, true)
this.removeEventListener('contextmenu', this, true)
this.addEventListener('folder-destroy', this.destroyFolder)
} else {
this.cancelDrag()
this.removeEventListener('touchstart', this)
this.removeEventListener('touchmove', this)
this.removeEventListener('touchcancel', this)
this.removeEventListener('touchend', this)
// this.removeEventListener("mousedown", this);
// this.removeEventListener("mousemove", this);
// this.removeEventListener("mouseup", this);
this.removeEventListener('click', this, true)
this.removeEventListener('contextmenu', this, true)
this.removeEventListener('swipeleft', this.swipe)
this.removeEventListener('swiperight', this.swipe)
this.removeEventListener('folder-destroy', this.destroyFolder)
}
this.removeEventListener('swipeleft', this.swipe)
this.removeEventListener('swiperight', this.swipe)
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()

39
src/widgets/battery/battery.ts
View File

@ -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() {
return `
render() {
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>
`
`,
]
}
}

68
src/widgets/clock/clock.ts
View File

@ -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
this.clock.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
connectedCallback() {
this.clock = this.shadowRoot!.querySelector('star-clock')!
}
@query('star-clock') clock!: StarClock
run = () => {
if (!this.clock) this.clock = this.shadowRoot!.querySelector('star-clock')!
firstUpdated() {
this.clock.date = new Date()
}
@ -57,15 +87,21 @@ class ClockWidget extends GaiaWidget {
refresh() {
this.clock.date = new Date()
}
get template() {
return `
render(): TemplateResult<1> {
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 `
`
}
}

81
src/widgets/gaia-widget.ts
View File

@ -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 // 清单文件中的组件名
widgetTitle: string = '' // 组件名
widgetType!: 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
for (const key in params) {
if (Object.prototype.hasOwnProperty.call(params, key)) {
const value = params[key]
// @ts-ignore
this[key] = value
}
}
this.lifeCycle = 'initializing'
this.init()
setTimeout(this.init)
}
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(
`${this.appName}_${this.manifestWidgetName}`,
{data, type: ['widget']}
)
const activity = new WebActivity(`${this.appName}_${this.widgetType}`, {
data,
type: ['widget'],
})
activity
.start()
@ -470,27 +484,28 @@ export default class GaiaWidget extends StarBaseElement {
return string
}
get template() {
return `
render() {
return html`
<div id="gaia-widget-container-${this.createTime}"></div>
<style>${this.shadowStyle}</style>
`
}
get shadowStyle() {
return `
:host {
position: relative;
display: inline-block;
width: 100%;
height: 100%;
box-sizing: border-box !important;
}
static override get styles() {
return [
css`
:host {
position: relative;
display: inline-block;
width: 100%;
height: 100%;
box-sizing: border-box !important;
}
:host > div[id^=gaia-widget-container-] {
overflow: hidden;
border-radius: 8px;
}
`
:host > div[id^='gaia-widget-container-'] {
overflow: hidden;
border-radius: 8px;
}
`,
]
}
}

45
src/widgets/weather/weather.ts
View File

@ -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() {
return `
<star-weather type="type22"></star-weather>
<style>
render() {
return html`
<star-weather type="${this.type}"></star-weather>
`
}
static override get styles() {
return [
css`
:host {
height: 100%;
width:100%;
width: 100%;
}
</style>
`
`,
]
}
}