@operato/scene-news-ticker 10.0.0-beta.2 → 10.0.0-beta.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/news-ticker-element.d.ts +1 -1
- package/dist/news-ticker-element.js +0 -9
- package/dist/news-ticker-element.js.map +1 -1
- package/dist/news-ticker-horizontal.d.ts +1 -1
- package/dist/news-ticker-horizontal.js +0 -4
- package/dist/news-ticker-horizontal.js.map +1 -1
- package/dist/news-ticker-vertical.js +0 -3
- package/dist/news-ticker-vertical.js.map +1 -1
- package/package.json +2 -2
|
@@ -9,7 +9,7 @@ export default class ThingsNewsTicker extends LitElement {
|
|
|
9
9
|
textAlign: string;
|
|
10
10
|
isReverse: boolean;
|
|
11
11
|
isTextOverflowed: boolean;
|
|
12
|
-
direction
|
|
12
|
+
direction: 'vertical' | 'horizontal' | undefined;
|
|
13
13
|
duration: number;
|
|
14
14
|
render(): import("lit-html").TemplateResult<1>;
|
|
15
15
|
updated(): void;
|
|
@@ -7,15 +7,6 @@ import './news-ticker-vertical.js';
|
|
|
7
7
|
import { html, LitElement } from 'lit';
|
|
8
8
|
import { customElement, property } from 'lit/decorators.js';
|
|
9
9
|
let ThingsNewsTicker = class ThingsNewsTicker extends LitElement {
|
|
10
|
-
textData = '';
|
|
11
|
-
fontFamily = '';
|
|
12
|
-
fontColor = '';
|
|
13
|
-
fontSize = '';
|
|
14
|
-
textAlign = '';
|
|
15
|
-
isReverse = false;
|
|
16
|
-
isTextOverflowed = false;
|
|
17
|
-
direction;
|
|
18
|
-
duration = 30000;
|
|
19
10
|
render() {
|
|
20
11
|
return html `
|
|
21
12
|
${this.direction == 'vertical'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"news-ticker-element.js","sourceRoot":"","sources":["../src/news-ticker-element.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,6BAA6B,CAAA;AACpC,OAAO,2BAA2B,CAAA;AAElC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAG5C,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;
|
|
1
|
+
{"version":3,"file":"news-ticker-element.js","sourceRoot":"","sources":["../src/news-ticker-element.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,6BAA6B,CAAA;AACpC,OAAO,2BAA2B,CAAA;AAElC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAG5C,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAWtD,MAAM;QACJ,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,SAAS,IAAI,UAAU;YAC5B,CAAC,CAAC,IAAI,CAAA;;0BAEY,IAAI,CAAC,QAAQ;2BACZ,IAAI,CAAC,SAAS;kCACP,IAAI,CAAC,gBAAgB;0BAC7B,IAAI,CAAC,QAAQ;;WAE5B;YACH,CAAC,CAAC,IAAI,CAAA;;0BAEY,IAAI,CAAC,QAAQ;2BACZ,IAAI,CAAC,SAAS;kCACP,IAAI,CAAC,gBAAgB;0BAC7B,IAAI,CAAC,QAAQ;;WAE5B;KACN,CAAA;IACH,CAAC;IAED,OAAO;QACL,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,8BAA8B,EAAE,IAAI,CAAC,UAAU,CAAC,CAAA;QACvE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,4BAA4B,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAA;QACnE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,6BAA6B,EAAE,IAAI,CAAC,SAAS,CAAC,CAAA;QACrE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,6BAA6B,EAAE,IAAI,CAAC,SAAS,CAAC,CAAA;IACvE,CAAC;CACF,CAAA;AAtCqC;IAAnC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAyB;AAChB;IAAnC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDAA2B;AAClB;IAAnC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDAA0B;AACjB;IAAnC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAyB;AAChB;IAAnC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDAA0B;AAChB;IAApC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mDAA2B;AAClB;IAApC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0DAAkC;AAC1B;IAAnC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDAAyD;AAChD;IAAnC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAyB;AATjC,gBAAgB;IADpC,aAAa,CAAC,gBAAgB,CAAC;GACX,gBAAgB,CAuCpC;eAvCoB,gBAAgB","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport './news-ticker-horizontal.js'\nimport './news-ticker-vertical.js'\n\nimport { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n@customElement('ox-news-ticker')\nexport default class ThingsNewsTicker extends LitElement {\n @property({ type: String }) declare textData: string\n @property({ type: String }) declare fontFamily: string\n @property({ type: String }) declare fontColor: string\n @property({ type: String }) declare fontSize: string\n @property({ type: String }) declare textAlign: string\n @property({ type: Boolean }) declare isReverse: boolean\n @property({ type: Boolean }) declare isTextOverflowed: boolean\n @property({ type: String }) declare direction: 'vertical' | 'horizontal' | undefined\n @property({ type: Number }) declare duration: number\n\n render() {\n return html`\n ${this.direction == 'vertical'\n ? html`\n <ox-news-ticker-vertical\n .duration=${this.duration}\n .isReverse=${this.isReverse}\n .isTextOverflowed=${this.isTextOverflowed}\n .textData=${this.textData}\n ></ox-news-ticker-vertical>\n `\n : html`\n <ox-news-ticker-horizontal\n .duration=${this.duration}\n .isReverse=${this.isReverse}\n .isTextOverflowed=${this.isTextOverflowed}\n .textData=${this.textData}\n ></ox-news-ticker-horizontal>\n `}\n `\n }\n\n updated() {\n this.style.setProperty('--ox-news-ticker-font-family', this.fontFamily)\n this.style.setProperty('--ox-news-ticker-font-size', this.fontSize)\n this.style.setProperty('--ox-news-ticker-font-color', this.fontColor)\n this.style.setProperty('--ox-news-ticker-text-align', this.textAlign)\n }\n}\n"]}
|
|
@@ -2,7 +2,7 @@ import { LitElement, PropertyValues } from 'lit';
|
|
|
2
2
|
export default class ThingsNewsTickerHorizontal extends LitElement {
|
|
3
3
|
static styles: import("lit").CSSResult[];
|
|
4
4
|
isReverse: boolean;
|
|
5
|
-
isTextOverflowed
|
|
5
|
+
isTextOverflowed: boolean | undefined;
|
|
6
6
|
duration: number;
|
|
7
7
|
textData: string;
|
|
8
8
|
private _anim?;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"news-ticker-horizontal.js","sourceRoot":"","sources":["../src/news-ticker-horizontal.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAGnD,IAAM,0BAA0B,GAAhC,MAAM,0BAA2B,SAAQ,UAAU;IAChE,MAAM,CAAC,MAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0CF;KACF,CAAA;
|
|
1
|
+
{"version":3,"file":"news-ticker-horizontal.js","sourceRoot":"","sources":["../src/news-ticker-horizontal.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAGnD,IAAM,0BAA0B,GAAhC,MAAM,0BAA2B,SAAQ,UAAU;IAChE,MAAM,CAAC,MAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0CF;KACF,CAAA;IAOO,KAAK,CAAY;IAIzB,IAAI,gBAAgB;QAClB,OAAO,IAAI,CAAC,KAAK,CAAA;IACnB,CAAC;IAED,IAAI,gBAAgB,CAAC,IAAI;QACvB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAA;IACnB,CAAC;IAED,IAAI,SAAS;QACX,OAAO,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;IAClC,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;8BAEe,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAA,8BAA8B,CAAC,SAAS,CAAC;;KAE9F,CAAA;IACH,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IACE,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC;YACvB,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC;YACvB,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC;YACxB,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC,EAC/B,CAAC;YACD,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,uCAAuC,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAA;YACrG,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,0CAA0C,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAA;YAExG,IAAI,CAAC,cAAc,EAAE,CAAA;QACvB,CAAC;IACH,CAAC;IAED,cAAc;QACZ,IAAI,CAAC,aAAa,EAAE,CAAA;QAEpB,IAAI,CAAC,IAAI,CAAC,gBAAgB;YAAE,OAAM;QAElC,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,iBAAiB,CAAC,OAAO,CACpD;YACE;gBACE,SAAS,EAAE,sBAAsB;gBACjC,UAAU,EAAE,QAAQ;aACrB;YACD;gBACE,SAAS,EAAE,0BAA0B;gBACrC,UAAU,EAAE,SAAS;aACtB;SACF,EACD;YACE,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,UAAU,EAAE,QAAQ;YACpB,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ;SACjD,CACF,CAAA;IACH,CAAC;IAED,aAAa;QACX,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC1B,IAAI,CAAC,gBAAgB,CAAC,MAAM,EAAE,CAAA;QAChC,CAAC;IACH,CAAC;;AAvEoC;IAApC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6DAA2B;AAClB;IAApC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oEAA8C;AACtC;IAAnC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4DAAyB;AAChB;IAAnC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4DAAyB;AAIb;IAAtC,KAAK,CAAC,sBAAsB,CAAC;qEAAmC;AAtD9C,0BAA0B;IAD9C,aAAa,CAAC,2BAA2B,CAAC;GACtB,0BAA0B,CAuH9C;eAvHoB,0BAA0B","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\n@customElement('ox-news-ticker-horizontal')\nexport default class ThingsNewsTickerHorizontal extends LitElement {\n static styles = [\n css`\n :host * {\n box-sizing: border-box;\n }\n\n :host .ticker-wrap {\n position: absolute;\n bottom: 0;\n width: 100%;\n overflow: hidden;\n height: 100%;\n background-color: rgba(#000, 0.9);\n padding-left: var(--ox-news-ticker-wrapper-padding-left);\n box-sizing: content-box;\n font-family: var(--ox-news-ticker-font-family);\n }\n\n :host .ticker-wrap .ticker {\n display: inline-block;\n min-width: 100%;\n text-align: var(--ox-news-ticker-text-align);\n height: 4rem;\n line-height: 4rem;\n white-space: nowrap;\n padding-right: var(--ox-news-ticker-container-padding-right);\n box-sizing: content-box;\n }\n\n :host .ticker-wrap .ticker__item {\n display: inline-block;\n font-size: var(--ox-news-ticker-font-size);\n color: var(--ox-news-ticker-font-color);\n }\n\n :host body {\n padding-bottom: 5rem;\n }\n :host h1,\n :host h2,\n :host p {\n padding: 0 5%;\n }\n `\n ]\n\n @property({ type: Boolean }) declare isReverse: boolean\n @property({ type: Boolean }) declare isTextOverflowed: boolean | undefined\n @property({ type: Number }) declare duration: number\n @property({ type: String }) declare textData: string\n\n private _anim?: Animation\n\n @query('.ticker-wrap .ticker') declare animationTargetEl: Element\n\n get currentAnimation() {\n return this._anim\n }\n\n set currentAnimation(anim) {\n this._anim = anim\n }\n\n get textLines() {\n return this.textData.split('\\n')\n }\n\n render() {\n return html`\n <div class=\"ticker-wrap\">\n <div class=\"ticker\">${this.textLines.map(t => html` <div class=\"ticker__item\">${t}</div> `)}</div>\n </div>\n `\n }\n\n updated(changes: PropertyValues<this>) {\n if (\n changes.has('textData') ||\n changes.has('duration') ||\n changes.has('isReverse') ||\n changes.has('isTextOverflowed')\n ) {\n this.style.setProperty('--ox-news-ticker-wrapper-padding-left', this.isTextOverflowed ? '100%' : '0')\n this.style.setProperty('--ox-news-ticker-container-padding-right', this.isTextOverflowed ? '100%' : '0')\n\n this.startAnimation()\n }\n }\n\n startAnimation() {\n this.stopAnimation()\n\n if (!this.isTextOverflowed) return\n\n this.currentAnimation = this.animationTargetEl.animate(\n [\n {\n transform: 'translate3d(0, 0, 0)',\n visibility: 'hidden'\n },\n {\n transform: 'translate3d(-100%, 0, 0)',\n visibility: 'visible'\n }\n ],\n {\n duration: this.duration,\n iterations: Infinity,\n direction: this.isReverse ? 'reverse' : 'normal'\n }\n )\n }\n\n stopAnimation() {\n if (this.currentAnimation) {\n this.currentAnimation.cancel()\n }\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"news-ticker-vertical.js","sourceRoot":"","sources":["../src/news-ticker-vertical.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,MAAM,mBAAmB,GAAG,4BAA4B,CAAA;AAGzC,IAAM,wBAAwB,GAA9B,MAAM,wBAAyB,SAAQ,UAAU;IAC9D,MAAM,CAAC,MAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsCF;KACF,CAAA;
|
|
1
|
+
{"version":3,"file":"news-ticker-vertical.js","sourceRoot":"","sources":["../src/news-ticker-vertical.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,MAAM,mBAAmB,GAAG,4BAA4B,CAAA;AAGzC,IAAM,wBAAwB,GAA9B,MAAM,wBAAyB,SAAQ,UAAU;IAC9D,MAAM,CAAC,MAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsCF;KACF,CAAA;IAMO,KAAK,CAAY;IAIzB,IAAI,gBAAgB;QAClB,OAAO,IAAI,CAAC,KAAK,CAAA;IACnB,CAAC;IAED,IAAI,gBAAgB,CAAC,IAAI;QACvB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAA;IACnB,CAAC;IAED,IAAI,SAAS;QACX,OAAO,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;IAClC,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;YAGH,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAA,oBAAoB,CAAC,YAAY,CAAC;;;KAGrE,CAAA;IACH,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC;YACnF,IAAI,CAAC,cAAc,EAAE,CAAA;QACvB,CAAC;IACH,CAAC;IAED,cAAc;QACZ,IAAI,CAAC,aAAa,EAAE,CAAA;QAEpB,IAAI,MAAM,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAA;QACzC,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,MAAM,EAAE;YAC7D,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ;YAC/C,UAAU,EAAE,QAAQ;YACpB,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ;SACjD,CAAC,CAAA;IACJ,CAAC;IAED,aAAa;QACX,IAAI,IAAI,CAAC,gBAAgB;YAAE,IAAI,CAAC,gBAAgB,CAAC,MAAM,EAAE,CAAA;IAC3D,CAAC;IAED,qBAAqB;QACnB,IAAI,eAAe,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,CAAA;QAC3C,IAAI,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;YACvC,OAAO;gBACL,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,eAAe,CAAC,GAAG,GAAG,IAAI;gBACzD,MAAM,EAAE,CAAC,CAAC,GAAG,eAAe,CAAC,GAAG,CAAC;gBACjC,MAAM,EAAE,mBAAmB;aAC5B,CAAA;QACH,CAAC,CAAC,CAAA;QAEF,MAAM,CAAC,IAAI,CAAC;YACV,SAAS,EAAE,eAAe;YAC1B,MAAM,EAAE,CAAC;YACT,MAAM,EAAE,mBAAmB;SAC5B,CAAC,CAAA;QAEF,OAAO,MAAM,CAAA;IACf,CAAC;;AApEoC;IAApC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2DAA2B;AACnB;IAAnC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0DAAyB;AAChB;IAAnC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0DAAyB;AAIhB;IAAnC,KAAK,CAAC,mBAAmB,CAAC;mEAAmC;AAjD3C,wBAAwB;IAD5C,aAAa,CAAC,yBAAyB,CAAC;GACpB,wBAAwB,CAgH5C;eAhHoB,wBAAwB","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nconst CUBIC_BEZIER_EASING = 'cubic-bezier(1, 0, 0.5, 0)'\n\n@customElement('ox-news-ticker-vertical')\nexport default class ThingsNewsTickerVertical extends LitElement {\n static styles = [\n css`\n :host {\n display: block;\n overflow: hidden;\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n }\n\n ul {\n margin: 0;\n padding: 0;\n list-style: none;\n white-space: nowrap;\n }\n\n #news_ticker {\n width: 100%;\n height: 100%;\n overflow: hidden;\n position: relative;\n }\n\n li {\n display: flex;\n height: 100%;\n align-items: center;\n overflow: hidden;\n text-align: var(--ox-news-ticker-text-align, left);\n }\n\n #news_ticker a {\n width: 100%;\n line-height: normal;\n color: var(--ox-news-ticker-font-color, black);\n text-decoration: none;\n font-size: var(--ox-news-ticker-font-size, 13px);\n }\n `\n ]\n\n @property({ type: Boolean }) declare isReverse: boolean\n @property({ type: Number }) declare duration: number\n @property({ type: String }) declare textData: string\n\n private _anim?: Animation\n\n @query('#news_ticker > ul') declare animationTargetEl: Element\n\n get currentAnimation() {\n return this._anim\n }\n\n set currentAnimation(anim) {\n this._anim = anim\n }\n\n get textLines() {\n return this.textData.split('\\n')\n }\n\n render() {\n return html`\n <div id=\"news_ticker\">\n <ul>\n ${this.textLines.map(t => html` <li><a href=\"#\">${t}</a></li> `)}\n </ul>\n </div>\n `\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('textData') || changes.has('duration') || changes.has('isReverse')) {\n this.startAnimation()\n }\n }\n\n startAnimation() {\n this.stopAnimation()\n\n var frames = this.createAnimationFrames()\n this.currentAnimation = this.animationTargetEl.animate(frames, {\n duration: this.textLines.length * this.duration,\n iterations: Infinity,\n direction: this.isReverse ? 'reverse' : 'normal'\n })\n }\n\n stopAnimation() {\n if (this.currentAnimation) this.currentAnimation.cancel()\n }\n\n createAnimationFrames() {\n var textLinesLength = this.textLines.length\n var frames = this.textLines.map((t, i) => {\n return {\n transform: `translateY(${-(i / textLinesLength) * 100}%)`,\n offset: (1 / textLinesLength) * i,\n easing: CUBIC_BEZIER_EASING\n }\n })\n\n frames.push({\n transform: `translateY(0)`,\n offset: 1,\n easing: CUBIC_BEZIER_EASING\n })\n\n return frames\n }\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@operato/scene-news-ticker",
|
|
3
|
-
"version": "10.0.0-beta.
|
|
3
|
+
"version": "10.0.0-beta.4",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "News ticker Component for Things Scene.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -59,5 +59,5 @@
|
|
|
59
59
|
"prettier --write"
|
|
60
60
|
]
|
|
61
61
|
},
|
|
62
|
-
"gitHead": "
|
|
62
|
+
"gitHead": "934cd74528c987fcce55b753b9f225dca33f405b"
|
|
63
63
|
}
|