From 981577f4ffbed559ad9a1da378b3da417deaa070 Mon Sep 17 00:00:00 2001 From: wangchangqi Date: Tue, 23 Aug 2022 09:21:40 +0800 Subject: [PATCH 1/3] TASK: #105604-(perf)optimize indicator-page-point. --- .../indicator/indicator-page-point.ts | 27 ++++++++++++------- src/test/panels/indicators/indicators.ts | 17 +++++------- 2 files changed, 23 insertions(+), 21 deletions(-) diff --git a/src/components/indicator/indicator-page-point.ts b/src/components/indicator/indicator-page-point.ts index 9cdbc80..d1ba3d5 100644 --- a/src/components/indicator/indicator-page-point.ts +++ b/src/components/indicator/indicator-page-point.ts @@ -1,4 +1,4 @@ -import {html, css, LitElement} from 'lit' +import {html, css, LitElement, PropertyValueMap} from 'lit' import {customElement, property} from 'lit/decorators.js' import {classMap} from 'lit/directives/class-map.js' @@ -9,16 +9,13 @@ export class IndicatorPagePoint extends LitElement { @property({type: Boolean, reflect: true}) edit = false @property({type: Boolean, reflect: true}) column = false - updated() { - this.checkProperties() - } + #firstRender = true + + protected shouldUpdate( + _changedProperties: PropertyValueMap | Map + ): boolean { + let isShouldUpdate = true - /** - * 初始值及修改后的值检查 - * - * hasChange 无法影响标签上的属性值显示，且无法访问 this - */ - checkProperties(): void { if (this.total < 1) { console.warn( 'indicator total setted a error num: ', @@ -26,6 +23,7 @@ export class IndicatorPagePoint extends LitElement { ' will be resetted 1' ) this.total = 1 + isShouldUpdate = false } else if (this.total > 15) { console.warn( 'indicator total setted a error num: ', @@ -33,6 +31,7 @@ export class IndicatorPagePoint extends LitElement { ' will be resetted 15' ) this.total = 15 + isShouldUpdate = false } if (this.index < 1) { @@ -42,6 +41,7 @@ export class IndicatorPagePoint extends LitElement { ' will be resetted 1' ) this.index = 1 + isShouldUpdate = false } else if (this.index > this.total) { console.warn( 'indicator index setted a error num: ', @@ -50,7 +50,14 @@ export class IndicatorPagePoint extends LitElement { this.total ) this.index = this.total + isShouldUpdate = false } + + if (this.#firstRender === true) { + this.#firstRender = false + return true + } + return isShouldUpdate } render() { diff --git a/src/test/panels/indicators/indicators.ts b/src/test/panels/indicators/indicators.ts index 675547b..a3b0c12 100644 --- a/src/test/panels/indicators/indicators.ts +++ b/src/test/panels/indicators/indicators.ts @@ -35,15 +35,8 @@ export class PanelIndicators extends LitElement { case 'index--': this.index-- break - case 'edit-add': - Array.prototype.forEach.call(this.myindicators, (e) => - e.setAttribute('edit', '') - ) - break - case 'edit-remove': - Array.prototype.forEach.call(this.myindicators, (e) => - e.removeAttribute('edit') - ) + case 'toggle-edit': + this.edit = !this.edit break } } @@ -81,14 +74,14 @@ export class PanelIndicators extends LitElement { - - +
@@ -96,12 +89,14 @@ export class PanelIndicators extends LitElement { class="myindicator" total=${this.total} index=${this.index} + ?edit=${this.edit} column >
From 36f629287361a5000e966e1f127adf8a5b8aae65 Mon Sep 17 00:00:00 2001 From: wangchangqi Date: Tue, 23 Aug 2022 14:30:12 +0800 Subject: [PATCH 2/3] (chore)fix index navigate, replace repeat, use pseudo content. --- src/components/bubble/bubble.ts | 15 ++++++++------- .../indicator/indicator-page-point.ts | 2 +- src/components/li/li.ts | 1 - src/index.ts | 18 ++++++++++++------ .../general/about-machine/about-machine.ts | 6 +++--- src/test/panels/icon/icon.ts | 4 ++-- src/test/panels/root.ts | 3 +++ 7 files changed, 29 insertions(+), 20 deletions(-) diff --git a/src/components/bubble/bubble.ts b/src/components/bubble/bubble.ts index 81832f4..4f9c055 100644 --- a/src/components/bubble/bubble.ts +++ b/src/components/bubble/bubble.ts @@ -14,16 +14,13 @@ export class StarBubble extends LitElement { else if (this.number > 99) return html`
- - 99 - + - + +
` else return html`
- ${this.number} +
` } @@ -45,7 +42,7 @@ export class StarBubble extends LitElement { background-color: red; } - span { + a { width: 100%; height: 100%; color: #fff; @@ -55,11 +52,15 @@ export class StarBubble extends LitElement { font-size: 14px; } - span.small { + a.small { font-size: 12px; line-height: 170%; } + a::before { + content: attr(data-num); + } + sup { font-size: 10px; max-width: 6px; diff --git a/src/components/indicator/indicator-page-point.ts b/src/components/indicator/indicator-page-point.ts index d1ba3d5..be31e1d 100644 --- a/src/components/indicator/indicator-page-point.ts +++ b/src/components/indicator/indicator-page-point.ts @@ -12,7 +12,7 @@ export class IndicatorPagePoint extends LitElement { #firstRender = true protected shouldUpdate( - _changedProperties: PropertyValueMap | Map + _changedProperties: PropertyValueMap ): boolean { let isShouldUpdate = true diff --git a/src/components/li/li.ts b/src/components/li/li.ts index 966e7cc..7c69b08 100644 --- a/src/components/li/li.ts +++ b/src/components/li/li.ts @@ -1,6 +1,5 @@ import {html, css, LitElement, HTMLTemplateResult, nothing} from 'lit' import {customElement, property} from 'lit/decorators.js' -import {classMap} from 'lit/directives/class-map.js' import '../bubble/bubble' export enum LiType { diff --git a/src/index.ts b/src/index.ts index fa6ee2d..980540f 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,10 +1,7 @@ import {html, css, LitElement} from 'lit' import {customElement, query, state} from 'lit/decorators.js' -import './components/ul/ul' -import './components/li/li' -import './components/section/section' import {StarAnimateSection} from './components/section/section' - +import './components/section/section' import './test/panels/root' @customElement('settings-app') @@ -17,6 +14,17 @@ export class SettingsApp extends LitElement { @state() nextSection: StarAnimateSection | null = null @state() currentSection: StarAnimateSection | null = null + constructor() { + super() + window.addEventListener('hashchange', this) + this.updateComplete.then(() => { + // 在页面内刷新时 + if (location.hash !== '') { + this.navigate(location.hash) + } + }) + } + handleEvent(evt: Event) { switch (evt.type) { case 'hashchange': @@ -115,8 +123,6 @@ export class SettingsApp extends LitElement { } render() { - window.addEventListener('hashchange', this) - return html` diff --git a/src/test/panels/general/about-machine/about-machine.ts b/src/test/panels/general/about-machine/about-machine.ts index 5c80149..20cf2e8 100644 --- a/src/test/panels/general/about-machine/about-machine.ts +++ b/src/test/panels/general/about-machine/about-machine.ts @@ -1,6 +1,6 @@ import {html, LitElement, CSSResultArray} from 'lit' import {customElement, property, state} from 'lit/decorators.js' -import {repeat} from 'lit/directives/repeat.js' +import {map} from 'lit/directives/map.js' import {UlType} from '../../../../components/ul/ul' import {LiType} from '../../../../components/li/li' import {sharedStyles} from '../../shared-styles' @@ -246,11 +246,11 @@ export class PanelAboutMachine extends LitElement { render() { return html` - ${repeat( + ${map( this.paneljson, (block: BLOCKNODE) => html` - ${repeat( + ${map( block.nodes, (node: LINENODE, index) => html` ${node.href diff --git a/src/test/panels/icon/icon.ts b/src/test/panels/icon/icon.ts index 7a529c7..55b7396 100644 --- a/src/test/panels/icon/icon.ts +++ b/src/test/panels/icon/icon.ts @@ -1,6 +1,6 @@ import {html, LitElement, CSSResultArray} from 'lit' import {customElement, property, state} from 'lit/decorators.js' -import {repeat} from 'lit/directives/repeat.js' +import {map} from 'lit/directives/map.js' import {UlType} from '../../../components/ul/ul' import {LiType} from '../../../components/li/li' import {sharedStyles} from '../shared-styles' @@ -264,7 +264,7 @@ export class PanelIcon extends LitElement { title="GaiaIcon图标" text="以上GaiaIcon图标为YROS V4内容" > - ${repeat( + ${map( this.icons, (iconname, index) => html` Date: Wed, 24 Aug 2022 14:47:32 +0800 Subject: [PATCH 3/3] add star-blur component --- CHANGELOG.md | 10 ++++ index.html | 23 ++++++++- package.json | 2 +- src/components/blur/blur.ts | 69 +++++++++++++++++++++++++++ src/test/panels/blur/use-blur.ts | 80 ++++++++++++++++++++++++++++++++ src/test/panels/root.ts | 5 +- 6 files changed, 185 insertions(+), 4 deletions(-) create mode 100644 CHANGELOG.md create mode 100644 src/components/blur/blur.ts create mode 100644 src/test/panels/blur/use-blur.ts diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..ea08370 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,10 @@ +# 0.0.1 + +## Features + +- add ul +- add li +- add button +- add bubble +- add indicator-page-point +- add blur \ No newline at end of file diff --git a/index.html b/index.html index 36261d2..2490e1b 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,10 @@ - + Star Web Components @@ -38,6 +41,24 @@ --li-base-height: 43px; --li-left-padding: 10px; --li-right-padding: 10px; + --blur-image: ''; + --blur-radius-factor: 20; + --blur-radius: calc(1px * var(--blur-radius-factor)); + --blur-scale-base-factor: 1.05; + --blur-scale-factor: calc( + var(--blur-scale-base-factor) + (var(--blur-radius-factor) - 20) * + 0.0025 + ); + } + + /* for nanopcT4 */ + @media (max-width: 500px) { + :root { + --blur-radius-factor: 5; + --blur-scale-factor: calc( + var(--blur-scale-base-factor) + (var(--blur-radius-factor)) * 0.005 + ); + } } diff --git a/package.json b/package.json index 5e00d33..8d45756 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "start-element", "private": true, - "version": "0.0.0", + "version": "0.0.1", "type": "module", "main": "dist/my-element.es.js", "exports": { diff --git a/src/components/blur/blur.ts b/src/components/blur/blur.ts new file mode 100644 index 0000000..0877b28 --- /dev/null +++ b/src/components/blur/blur.ts @@ -0,0 +1,69 @@ +import {html, css, LitElement} from 'lit' +import {customElement, property} from 'lit/decorators.js' +import {classMap} from 'lit/directives/class-map.js' + +@customElement('star-blur') +export class StarBlur extends LitElement { + @property({type: Boolean}) openblur = false + @property({type: String}) imagesrc = '' + + attributeChangedCallback(name: string, _old: string | null, value: string | null): void { + super.attributeChangedCallback(name, _old, value) + + if (name === 'imagesrc') { + if (!this.imagesrc) console.error('StarBlur has no imagesrc') + document.documentElement.style.setProperty('--blur-image', this.imagesrc) + } + } + + render() { + const styles = { + blur: this.openblur, + } + + return html` +
+ ` + } + + static styles = css` + :host { + position: absolute; + width: 100vw; + height: 100vh; + left: 0; + top: 0; + overflow: hidden; + } + #blur-mask { + position: absolute; + width: inherit; + height: inherit; + background: no-repeat center fixed; + background-size: cover; + background-image: var(--blur-image); + transform: scale(var(--blur-scale-factor)); + } + #blur-mask.blur { + filter: blur(var(--blur-radius)); + } + #blur-mask::before { + position: absolute; + content: ' '; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: no-repeat center fixed; + background-size: cover; + background-image: var(--blur-image); + transform: scale(1 / var(--blur-scale-factor)); + } + ` +} + +declare global { + interface HTMLElementTagNameMap { + 'star-blur': StarBlur + } +} diff --git a/src/test/panels/blur/use-blur.ts b/src/test/panels/blur/use-blur.ts new file mode 100644 index 0000000..92174ba --- /dev/null +++ b/src/test/panels/blur/use-blur.ts @@ -0,0 +1,80 @@ +import {html, css, LitElement, TemplateResult} from 'lit' +import {customElement, state} from 'lit/decorators.js' +import '../../../components/blur/blur' + +@customElement('panel-blur') +export class PanelBlur extends LitElement { + @state() openblur = false + + @state() backgroundImage = '' + + handleInputFile(evt: Event) { + const imgfile = (evt.target as HTMLInputElement).files?.[0] + if (imgfile) { + this.backgroundImage = `url(${URL.createObjectURL(imgfile)})` + } + } + + handleInputRange(evt: Event) { + document.documentElement.style.setProperty( + '--blur-radius-factor', + (evt.target as HTMLInputElement).value + ) + } + + dynamicInput(): TemplateResult { + const mql = [window.matchMedia('(max-width: 500px)')] + if (mql[0].matches) { + return html` + + ` + } else { + return html` + + ` + } + } + + render() { + return html` +
+ + + ${this.dynamicInput()} +
+ + ` + } + + static styles = css` + div { + position: absolute; + z-index: 1; + } + ` +} + +declare global { + interface HTMLElementTagNameMap { + 'panel-blur': PanelBlur + } +} diff --git a/src/test/panels/root.ts b/src/test/panels/root.ts index af7abee..00a9607 100644 --- a/src/test/panels/root.ts +++ b/src/test/panels/root.ts @@ -10,6 +10,7 @@ import './about/about' import './icon/icon' import './general/general' import './indicators/indicators' +import './blur/use-blur' type SEID = String @@ -117,10 +118,10 @@ export class PanelRoot extends LitElement {