@aarsteinmedia/dotlottie-player 3.0.1 → 3.0.2
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/cjs/index.js +52 -11
- package/dist/custom-elements.json +0 -30
- package/dist/esm/index.js +52 -11
- package/dist/index.js +2 -2
- package/package.json +1 -1
package/dist/cjs/index.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
var Lottie = require('lottie-web');
|
|
4
4
|
var fflate = require('fflate');
|
|
5
5
|
|
|
6
|
-
var name="@aarsteinmedia/dotlottie-player";var version="3.0.
|
|
6
|
+
var name="@aarsteinmedia/dotlottie-player";var version="3.0.2";var description="Web Component for playing Lottie animations in your web app. Previously @johanaarstein/dotlottie-player";var exports$1={".":{"import":"./dist/esm/index.js",node:"./dist/esm/index.js",require:"./dist/cjs/index.js",types:"./dist/index.d.ts"}};var main="./dist/esm/index.js";var unpkg="./dist/index.js";var module$1="./dist/esm/index.js";var types="./dist/index.d.ts";var type="module";var homepage="https://www.aarstein.media/en/dotlottie-player";var repository={url:"git+https://github.com/aarsteinmedia/dotlottie-player.git",type:"git"};var bugs="https://github.com/aarsteinmedia/dotlottie-player/issues";var author={name:"Johan Martin Aarstein",email:"johan@aarstein.media",url:"https://www.aarstein.media",organization:"Aarstein Media"};var contributors=[{name:"Anthony Colpron",email:"anthonycolpron@gmail.com",url:"https://github.com/anthony-colpron"}];var license="GPL-2.0-or-later";var scripts={build:"rimraf ./dist && rollup -c","build:types":"rimraf ./types && tsc","build:cem":"npx cem analyze --config cem.config.mjs",prod:"pnpm build:types && pnpm build && pnpm build:cem",dev:"rollup -c -w --environment NODE_ENV:development",lint:"tsc && eslint . --ext .ts","lint:fix":"eslint . --ext .ts --fix"};var dependencies={fflate:"^0.8.2","lottie-web":"^5.12.2"};var peerDependencies={"@types/react":">= 16.0.0"};var devDependencies={"@custom-elements-manifest/analyzer":"^0.10.3","@rollup/plugin-commonjs":"^26.0.1","@rollup/plugin-json":"^6.1.0","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-typescript":"^11.1.6","@swc/core":"^1.7.6","@types/node":"^22.1.0","@typescript-eslint/eslint-plugin":"^8.0.1","@typescript-eslint/parser":"^8.0.1",autoprefixer:"^10.4.20","esbuild-sass-plugin":"^3.3.1",eslint:"^8.57.0","eslint-config-prettier":"^9.1.0","eslint-import-resolver-typescript":"^3.6.1","eslint-plugin-import":"^2.29.1","eslint-plugin-jsdoc":"^48.11.0","eslint-plugin-prettier":"^5.2.1","postcss-flexbugs-fixes":"^5.0.2",prettier:"^3.3.3",rimraf:"^6.0.1",rollup:"^4.20.0","rollup-plugin-dts":"^6.1.1","rollup-plugin-html-literals":"^1.1.8","rollup-plugin-livereload":"^2.0.5","rollup-plugin-postcss":"^4.0.2","rollup-plugin-serve":"^1.1.1","rollup-plugin-summary":"^2.0.1","rollup-plugin-swc3":"^0.11.2",sass:"^1.77.8",tslib:"^2.6.3",typescript:"^5.5.4"};var customElements$1="dist/custom-elements.json";var files=["dist","README.md"];var keywords=["lottie","dotlottie","animation","web component","svg","vector","player"];var publishConfig={access:"public"};var engines={node:">= 8.17.0"};var funding={type:"paypal",url:"https://www.paypal.com/donate/?hosted_button_id=E7C7DMN8KSQ6A"};var pkg = {name:name,version:version,description:description,exports:exports$1,main:main,unpkg:unpkg,module:module$1,types:types,type:type,homepage:homepage,repository:repository,bugs:bugs,author:author,contributors:contributors,license:license,scripts:scripts,dependencies:dependencies,peerDependencies:peerDependencies,devDependencies:devDependencies,customElements:customElements$1,files:files,keywords:keywords,publishConfig:publishConfig,engines:engines,funding:funding};
|
|
7
7
|
|
|
8
8
|
var ObjectFit;
|
|
9
9
|
(function(ObjectFit) {
|
|
@@ -439,36 +439,77 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
439
439
|
return [
|
|
440
440
|
'animateOnScroll',
|
|
441
441
|
'autoplay',
|
|
442
|
-
'background',
|
|
443
442
|
'controls',
|
|
444
|
-
'count',
|
|
445
|
-
'description',
|
|
446
443
|
'direction',
|
|
447
444
|
'hover',
|
|
448
|
-
'intermission',
|
|
449
445
|
'loop',
|
|
450
446
|
'mode',
|
|
451
|
-
'multiAnimationSettings',
|
|
452
|
-
'objectfit',
|
|
453
|
-
'preserveAspectRatio',
|
|
454
|
-
'renderer',
|
|
455
|
-
'segment',
|
|
456
|
-
'simple',
|
|
457
447
|
'speed',
|
|
458
448
|
'subframe'
|
|
459
449
|
];
|
|
460
450
|
}
|
|
461
451
|
attributeChangedCallback(name, _oldValue, value) {
|
|
452
|
+
if (!this._lottieInstance) {
|
|
453
|
+
return;
|
|
454
|
+
}
|
|
462
455
|
const toggleLoop = this.shadow.querySelector('.toggleLoop'), toggleBoomerang = this.shadow.querySelector('.toggleBoomerang');
|
|
463
456
|
if (!(toggleLoop instanceof HTMLButtonElement) || !(toggleBoomerang instanceof HTMLButtonElement)) {
|
|
464
457
|
return;
|
|
465
458
|
}
|
|
459
|
+
if (name === 'animateOnScroll') {
|
|
460
|
+
if (value === '' || Boolean(value)) {
|
|
461
|
+
this._lottieInstance.autoplay = false;
|
|
462
|
+
addEventListener('scroll', this._handleScroll, {
|
|
463
|
+
passive: true,
|
|
464
|
+
capture: true
|
|
465
|
+
});
|
|
466
|
+
return;
|
|
467
|
+
}
|
|
468
|
+
removeEventListener('scroll', this._handleScroll, true);
|
|
469
|
+
}
|
|
470
|
+
if (name === 'autoplay') {
|
|
471
|
+
if (this.animateOnScroll) {
|
|
472
|
+
return;
|
|
473
|
+
}
|
|
474
|
+
if (value === '' || Boolean(value)) {
|
|
475
|
+
this.play();
|
|
476
|
+
return;
|
|
477
|
+
}
|
|
478
|
+
this.stop();
|
|
479
|
+
}
|
|
480
|
+
if (name === 'controls') {
|
|
481
|
+
this.renderControls();
|
|
482
|
+
}
|
|
483
|
+
if (name === 'direction') {
|
|
484
|
+
if (Number(value) === -1) {
|
|
485
|
+
return this.setDirection(-1);
|
|
486
|
+
}
|
|
487
|
+
this.setDirection(1);
|
|
488
|
+
}
|
|
489
|
+
if (name === 'hover' && this._container) {
|
|
490
|
+
if (value === '' || Boolean(value)) {
|
|
491
|
+
this._container.addEventListener('mouseenter', this._mouseEnter);
|
|
492
|
+
this._container.addEventListener('mouseleave', this._mouseLeave);
|
|
493
|
+
return;
|
|
494
|
+
}
|
|
495
|
+
this._container.removeEventListener('mouseenter', this._mouseEnter);
|
|
496
|
+
this._container.removeEventListener('mouseleave', this._mouseLeave);
|
|
497
|
+
}
|
|
466
498
|
if (name === 'loop') {
|
|
467
499
|
toggleLoop.dataset.active = value;
|
|
468
500
|
}
|
|
469
501
|
if (name === 'mode') {
|
|
470
502
|
toggleBoomerang.dataset.active = (value === exports.PlayMode.Bounce).toString();
|
|
471
503
|
}
|
|
504
|
+
if (name === 'speed') {
|
|
505
|
+
const val = Number(value);
|
|
506
|
+
if (val && !isNaN(val)) {
|
|
507
|
+
this._lottieInstance.setSpeed(val);
|
|
508
|
+
}
|
|
509
|
+
}
|
|
510
|
+
if (name === 'subframe') {
|
|
511
|
+
this._lottieInstance.setSubframe(value === '' || Boolean(value));
|
|
512
|
+
}
|
|
472
513
|
}
|
|
473
514
|
static get observedProperties() {
|
|
474
515
|
return [
|
|
@@ -705,51 +705,21 @@
|
|
|
705
705
|
{
|
|
706
706
|
"name": "autoplay"
|
|
707
707
|
},
|
|
708
|
-
{
|
|
709
|
-
"name": "background"
|
|
710
|
-
},
|
|
711
708
|
{
|
|
712
709
|
"name": "controls"
|
|
713
710
|
},
|
|
714
|
-
{
|
|
715
|
-
"name": "count"
|
|
716
|
-
},
|
|
717
|
-
{
|
|
718
|
-
"name": "description"
|
|
719
|
-
},
|
|
720
711
|
{
|
|
721
712
|
"name": "direction"
|
|
722
713
|
},
|
|
723
714
|
{
|
|
724
715
|
"name": "hover"
|
|
725
716
|
},
|
|
726
|
-
{
|
|
727
|
-
"name": "intermission"
|
|
728
|
-
},
|
|
729
717
|
{
|
|
730
718
|
"name": "loop"
|
|
731
719
|
},
|
|
732
720
|
{
|
|
733
721
|
"name": "mode"
|
|
734
722
|
},
|
|
735
|
-
{
|
|
736
|
-
"name": "multiAnimationSettings"
|
|
737
|
-
},
|
|
738
|
-
{
|
|
739
|
-
"name": "objectfit"
|
|
740
|
-
},
|
|
741
|
-
{
|
|
742
|
-
"name": "preserveAspectRatio"
|
|
743
|
-
},
|
|
744
|
-
{
|
|
745
|
-
"name": "renderer"
|
|
746
|
-
},
|
|
747
|
-
{
|
|
748
|
-
"name": "segment"
|
|
749
|
-
},
|
|
750
|
-
{
|
|
751
|
-
"name": "simple"
|
|
752
|
-
},
|
|
753
723
|
{
|
|
754
724
|
"name": "speed"
|
|
755
725
|
},
|
package/dist/esm/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import Lottie from 'lottie-web';
|
|
2
2
|
import { strToU8, zip, strFromU8, unzip as unzip$1 } from 'fflate';
|
|
3
3
|
|
|
4
|
-
var name="@aarsteinmedia/dotlottie-player";var version="3.0.
|
|
4
|
+
var name="@aarsteinmedia/dotlottie-player";var version="3.0.2";var description="Web Component for playing Lottie animations in your web app. Previously @johanaarstein/dotlottie-player";var exports={".":{"import":"./dist/esm/index.js",node:"./dist/esm/index.js",require:"./dist/cjs/index.js",types:"./dist/index.d.ts"}};var main="./dist/esm/index.js";var unpkg="./dist/index.js";var module="./dist/esm/index.js";var types="./dist/index.d.ts";var type="module";var homepage="https://www.aarstein.media/en/dotlottie-player";var repository={url:"git+https://github.com/aarsteinmedia/dotlottie-player.git",type:"git"};var bugs="https://github.com/aarsteinmedia/dotlottie-player/issues";var author={name:"Johan Martin Aarstein",email:"johan@aarstein.media",url:"https://www.aarstein.media",organization:"Aarstein Media"};var contributors=[{name:"Anthony Colpron",email:"anthonycolpron@gmail.com",url:"https://github.com/anthony-colpron"}];var license="GPL-2.0-or-later";var scripts={build:"rimraf ./dist && rollup -c","build:types":"rimraf ./types && tsc","build:cem":"npx cem analyze --config cem.config.mjs",prod:"pnpm build:types && pnpm build && pnpm build:cem",dev:"rollup -c -w --environment NODE_ENV:development",lint:"tsc && eslint . --ext .ts","lint:fix":"eslint . --ext .ts --fix"};var dependencies={fflate:"^0.8.2","lottie-web":"^5.12.2"};var peerDependencies={"@types/react":">= 16.0.0"};var devDependencies={"@custom-elements-manifest/analyzer":"^0.10.3","@rollup/plugin-commonjs":"^26.0.1","@rollup/plugin-json":"^6.1.0","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-typescript":"^11.1.6","@swc/core":"^1.7.6","@types/node":"^22.1.0","@typescript-eslint/eslint-plugin":"^8.0.1","@typescript-eslint/parser":"^8.0.1",autoprefixer:"^10.4.20","esbuild-sass-plugin":"^3.3.1",eslint:"^8.57.0","eslint-config-prettier":"^9.1.0","eslint-import-resolver-typescript":"^3.6.1","eslint-plugin-import":"^2.29.1","eslint-plugin-jsdoc":"^48.11.0","eslint-plugin-prettier":"^5.2.1","postcss-flexbugs-fixes":"^5.0.2",prettier:"^3.3.3",rimraf:"^6.0.1",rollup:"^4.20.0","rollup-plugin-dts":"^6.1.1","rollup-plugin-html-literals":"^1.1.8","rollup-plugin-livereload":"^2.0.5","rollup-plugin-postcss":"^4.0.2","rollup-plugin-serve":"^1.1.1","rollup-plugin-summary":"^2.0.1","rollup-plugin-swc3":"^0.11.2",sass:"^1.77.8",tslib:"^2.6.3",typescript:"^5.5.4"};var customElements$1="dist/custom-elements.json";var files=["dist","README.md"];var keywords=["lottie","dotlottie","animation","web component","svg","vector","player"];var publishConfig={access:"public"};var engines={node:">= 8.17.0"};var funding={type:"paypal",url:"https://www.paypal.com/donate/?hosted_button_id=E7C7DMN8KSQ6A"};var pkg = {name:name,version:version,description:description,exports:exports,main:main,unpkg:unpkg,module:module,types:types,type:type,homepage:homepage,repository:repository,bugs:bugs,author:author,contributors:contributors,license:license,scripts:scripts,dependencies:dependencies,peerDependencies:peerDependencies,devDependencies:devDependencies,customElements:customElements$1,files:files,keywords:keywords,publishConfig:publishConfig,engines:engines,funding:funding};
|
|
5
5
|
|
|
6
6
|
var ObjectFit;
|
|
7
7
|
(function(ObjectFit) {
|
|
@@ -437,36 +437,77 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
437
437
|
return [
|
|
438
438
|
'animateOnScroll',
|
|
439
439
|
'autoplay',
|
|
440
|
-
'background',
|
|
441
440
|
'controls',
|
|
442
|
-
'count',
|
|
443
|
-
'description',
|
|
444
441
|
'direction',
|
|
445
442
|
'hover',
|
|
446
|
-
'intermission',
|
|
447
443
|
'loop',
|
|
448
444
|
'mode',
|
|
449
|
-
'multiAnimationSettings',
|
|
450
|
-
'objectfit',
|
|
451
|
-
'preserveAspectRatio',
|
|
452
|
-
'renderer',
|
|
453
|
-
'segment',
|
|
454
|
-
'simple',
|
|
455
445
|
'speed',
|
|
456
446
|
'subframe'
|
|
457
447
|
];
|
|
458
448
|
}
|
|
459
449
|
attributeChangedCallback(name, _oldValue, value) {
|
|
450
|
+
if (!this._lottieInstance) {
|
|
451
|
+
return;
|
|
452
|
+
}
|
|
460
453
|
const toggleLoop = this.shadow.querySelector('.toggleLoop'), toggleBoomerang = this.shadow.querySelector('.toggleBoomerang');
|
|
461
454
|
if (!(toggleLoop instanceof HTMLButtonElement) || !(toggleBoomerang instanceof HTMLButtonElement)) {
|
|
462
455
|
return;
|
|
463
456
|
}
|
|
457
|
+
if (name === 'animateOnScroll') {
|
|
458
|
+
if (value === '' || Boolean(value)) {
|
|
459
|
+
this._lottieInstance.autoplay = false;
|
|
460
|
+
addEventListener('scroll', this._handleScroll, {
|
|
461
|
+
passive: true,
|
|
462
|
+
capture: true
|
|
463
|
+
});
|
|
464
|
+
return;
|
|
465
|
+
}
|
|
466
|
+
removeEventListener('scroll', this._handleScroll, true);
|
|
467
|
+
}
|
|
468
|
+
if (name === 'autoplay') {
|
|
469
|
+
if (this.animateOnScroll) {
|
|
470
|
+
return;
|
|
471
|
+
}
|
|
472
|
+
if (value === '' || Boolean(value)) {
|
|
473
|
+
this.play();
|
|
474
|
+
return;
|
|
475
|
+
}
|
|
476
|
+
this.stop();
|
|
477
|
+
}
|
|
478
|
+
if (name === 'controls') {
|
|
479
|
+
this.renderControls();
|
|
480
|
+
}
|
|
481
|
+
if (name === 'direction') {
|
|
482
|
+
if (Number(value) === -1) {
|
|
483
|
+
return this.setDirection(-1);
|
|
484
|
+
}
|
|
485
|
+
this.setDirection(1);
|
|
486
|
+
}
|
|
487
|
+
if (name === 'hover' && this._container) {
|
|
488
|
+
if (value === '' || Boolean(value)) {
|
|
489
|
+
this._container.addEventListener('mouseenter', this._mouseEnter);
|
|
490
|
+
this._container.addEventListener('mouseleave', this._mouseLeave);
|
|
491
|
+
return;
|
|
492
|
+
}
|
|
493
|
+
this._container.removeEventListener('mouseenter', this._mouseEnter);
|
|
494
|
+
this._container.removeEventListener('mouseleave', this._mouseLeave);
|
|
495
|
+
}
|
|
464
496
|
if (name === 'loop') {
|
|
465
497
|
toggleLoop.dataset.active = value;
|
|
466
498
|
}
|
|
467
499
|
if (name === 'mode') {
|
|
468
500
|
toggleBoomerang.dataset.active = (value === PlayMode.Bounce).toString();
|
|
469
501
|
}
|
|
502
|
+
if (name === 'speed') {
|
|
503
|
+
const val = Number(value);
|
|
504
|
+
if (val && !isNaN(val)) {
|
|
505
|
+
this._lottieInstance.setSpeed(val);
|
|
506
|
+
}
|
|
507
|
+
}
|
|
508
|
+
if (name === 'subframe') {
|
|
509
|
+
this._lottieInstance.setSubframe(value === '' || Boolean(value));
|
|
510
|
+
}
|
|
470
511
|
}
|
|
471
512
|
static get observedProperties() {
|
|
472
513
|
return [
|