From ca22ca554cced9762cbb768e650c494c8053e8ac Mon Sep 17 00:00:00 2001 From: Artem Nikolaev Date: Tue, 2 Nov 2021 09:49:46 +0300 Subject: [PATCH] counter is alive now ## [0.4.0] - 2021-11-02 ### Added - counter is alive now --- CHANGELOG.md | 7 +++- index.html | 3 +- package-lock.json | 4 +-- package.json | 5 +-- src/index.js | 67 ++++++++++++++++++++++++++++++++--- src/style/styles.css | 4 +++ src/themes/post-like/index.js | 8 ++--- 7 files changed, 84 insertions(+), 14 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0c3fe98..b5a7b40 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] +## [0.4.0] - 2021-11-02 +### Added +- counter is alive now + ## [0.3.0] - 2021-10-31 ### Added - themes @@ -30,7 +34,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added - initial -[Unreleased]: https://github.com/ArtemNikolaev/frame-rate-web-component/compare/v0.3.0...HEAD +[Unreleased]: https://github.com/ArtemNikolaev/frame-rate-web-component/compare/v0.4.0...HEAD +[0.4.0]: https://github.com/ArtemNikolaev/frame-rate-web-component/compare/v0.3.0...v0.4.0 [0.3.0]: https://github.com/ArtemNikolaev/frame-rate-web-component/compare/v0.2.0...v0.3.0 [0.2.0]: https://github.com/ArtemNikolaev/frame-rate-web-component/compare/v0.1.1...v0.2.0 [0.1.1]: https://github.com/ArtemNikolaev/frame-rate-web-component/compare/v0.1.0...v0.1.1 diff --git a/index.html b/index.html index 810411b..9d6e19d 100644 --- a/index.html +++ b/index.html @@ -2,9 +2,10 @@ - Title + Frame Rate Web Component Demo +

Frame Rate WebComponent Demo

diff --git a/package-lock.json b/package-lock.json index c204dd7..986c90c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "frame-rate-web-component", - "version": "0.3.0", + "version": "0.4.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "frame-rate-web-component", - "version": "0.3.0", + "version": "0.4.0", "license": "ISC", "dependencies": { "webpack": "^5.61.0" diff --git a/package.json b/package.json index c7bd3e3..1c85908 100644 --- a/package.json +++ b/package.json @@ -1,11 +1,12 @@ { "name": "frame-rate-web-component", - "version": "0.3.0", + "version": "0.4.0", "description": "Frame Rate Web Component", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", - "build": "webpack" + "build": "webpack", + "start": "webpack --watch" }, "keywords": [ "web-component", diff --git a/src/index.js b/src/index.js index 96223d9..9c77772 100644 --- a/src/index.js +++ b/src/index.js @@ -4,15 +4,74 @@ import generatePostLikeTheme from './themes/post-like'; class FrameRate extends HTMLElement { constructor() { super(); - this.frameRate = 144; + this.isInactive = false; + + this.frameAmount = []; + this.frameRate = 0; + this.frameRateOld = 0; + + this.attachShadow({mode: 'open'}); + this.shadowRoot.appendChild(styleEl); + this.theme = generatePostLikeTheme(this.frameRate); - const shadow = this.attachShadow({mode: 'open'}); + this.render(); + } + + connectedCallback() { + this.on(); + } + + counter() { + if (this.isInactive) { + this.framesAmount.splice(0); - shadow.appendChild(styleEl); + return; + } + + this.frameAmount = this.frameAmount.filter( dt => dt > Date.now() - 1000); + this.frameAmount.push(Date.now()); + + const frameRate = this.frameAmount.length; + + if (frameRate !== this.frameRate) { + this.frameRateOld = this.frameRate; + this.frameRate = frameRate; + + this.render(); + } + + + requestAnimationFrame(() => this.counter()); + } - this.theme.forEach(node => shadow.appendChild(node)); + disconnectedCallback() { + this.isInactive = true; } + + attributeChangedCallback(key, prev, next) { + + } + + render() { + this.theme.style.remove(); + this.theme.el.remove(); + + this.theme = generatePostLikeTheme(this.frameRate); + + this.shadowRoot.appendChild(this.theme.style); + this.shadowRoot.appendChild(this.theme.el); + } + + on() { + this.counter(); + } + + off() { + this.isInactive = true; + } + + static get observedAttributes() {return ['hide'];} } customElements.define('frame-rate', FrameRate) diff --git a/src/style/styles.css b/src/style/styles.css index ebd1c4a..458ee67 100644 --- a/src/style/styles.css +++ b/src/style/styles.css @@ -3,3 +3,7 @@ top: 0; right: 0; } + +.hide { + display: none; +} diff --git a/src/themes/post-like/index.js b/src/themes/post-like/index.js index b477f10..754dc94 100644 --- a/src/themes/post-like/index.js +++ b/src/themes/post-like/index.js @@ -26,8 +26,8 @@ export default function generatePostLikeTheme(frames) { } ); - return [ - themeStyle, - div, - ] + return { + style: themeStyle, + el: div, + }; }