Merge remote-tracking branch 'origin/main' into feat/esl-popup-refres…

…h-event-handling
exadel-inc · May 28, 2024 · fbaeec5 · fbaeec5
2 parents 81a8087 + 1104beb
commit fbaeec5
Show file tree

Hide file tree

Showing 9 changed files with 80 additions and 75 deletions.
diff --git a/e2e/package.json b/e2e/package.json
@@ -19,7 +19,7 @@
     "@types/puppeteer": "^7.0.4",
     "jest-image-snapshot": "^6.4.0",
     "jest-puppeteer": "^10.0.1",
-    "puppeteer": "^22.9.0",
+    "puppeteer": "^22.10.0",
     "stucumber": "^0.19.0"
   }
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -96,7 +96,7 @@
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/commit-analyzer": "^12.0.0",
     "@semantic-release/git": "^10.0.1",
-    "@semantic-release/github": "^10.0.4",
+    "@semantic-release/github": "^10.0.5",
     "@semantic-release/npm": "^12.0.1",
     "@semantic-release/release-notes-generator": "^13.0.0",
     "@types/jest": "^29.5.12",
@@ -117,14 +117,14 @@
     "jest-environment-jsdom": "^29.7.0",
     "kleur": "^4.1.5",
     "less": "^4.2.0",
-    "lint-staged": "^15.2.2",
+    "lint-staged": "^15.2.5",
     "postcss": "^8.4.38",
     "postcss-less": "^6.0.0",
     "prettier": "^3.2.5",
     "rimraf": "^5.0.7",
     "semantic-release": "^23.1.1",
     "smoothscroll-polyfill": "^0.4.4",
-    "stylelint": "^16.5.0",
+    "stylelint": "^16.6.0",
     "stylelint-prettier": "^5.0.0",
     "ts-jest": "^29.1.3",
     "typescript": "5.4.5"

diff --git a/src/modules/esl-media/core/esl-media-iobserver.ts b/src/modules/esl-media/core/esl-media-iobserver.ts
@@ -1,6 +1,6 @@
 import type {ESLMedia} from './esl-media';
 
-const RATIO_TO_PLAY = 0.75; // TODO: customizable, at least global
+const RATIO_TO_PLAY = 0.5; // TODO: customizable, at least global
 const RATIO_TO_STOP = 0.20; // TODO: customizable, at least global
 
 const RATIO_TO_ACTIVATE = 0.05;

diff --git a/src/modules/esl-media/core/esl-media.shape.ts b/src/modules/esl-media/core/esl-media.shape.ts
@@ -46,6 +46,8 @@ export type ESLMediaTagShape = ({
   'preload'?: 'none' | 'metadata' | 'auto' | '';
   /** Allow play media inline */
   'playsinline'?: boolean;
+  /** Allows to start viewing a resource from a specific time offset */
+  'start-time'?: number;
 
   /** Optional BC provider player id */
   'data-player-id'?: string;

diff --git a/src/modules/esl-media/core/esl-media.ts b/src/modules/esl-media/core/esl-media.ts
@@ -46,7 +46,8 @@ export class ESLMedia extends ESLBaseElement {
     'muted',
     'loop',
     'controls',
-    'lazy'
+    'lazy',
+    'start-time'
   ];
 
   /** Event to dispatch on ready state */
@@ -180,6 +181,7 @@ export class ESLMedia extends ESLBaseElement {
       case 'media-id':
       case 'media-src':
       case 'media-type':
+      case 'start-time':
         this.deferredReinitialize();
         break;
       case 'lazy':

diff --git a/src/modules/esl-panel-group/README.md b/src/modules/esl-panel-group/README.md
@@ -34,6 +34,7 @@ ESLPanelGroup.register();
 
 - `has-opened` - readonly attribute that indicates whether the panel group has opened panels
 - `current-mode` - readonly attribute that indicates the currently applied rendering mode of the panel group
+- `animating` - a marker of animation process running
 
 ### Events
 

diff --git a/src/modules/esl-panel-group/core/esl-panel-group.ts b/src/modules/esl-panel-group/core/esl-panel-group.ts
@@ -72,6 +72,9 @@ export class ESLPanelGroup extends ESLBaseElement {
   /** Readonly attribute that indicates whether the panel group has opened panels */
   @boolAttr({readonly: true}) public hasOpened: boolean;
 
+  /** Active while animation in progress */
+  @boolAttr({readonly: true}) public animating: boolean;
+
   /** Height of previous active panel */
   protected _previousHeight: number = 0;
 
@@ -268,13 +271,15 @@ export class ESLPanelGroup extends ESLBaseElement {
 
   /** Pre-processing animation action */
   protected beforeAnimate(): void {
+    this.$$attr('animating', true);
     CSSClassUtils.add(this, this.animationClass);
   }
 
   /** Post-processing animation action */
   protected afterAnimate(silent?: boolean): void {
     this.style.removeProperty('height');
     CSSClassUtils.remove(this, this.animationClass);
+    this.$$attr('animating', false);
 
     if (silent) return;
     this.$$fire(this.AFTER_ANIMATE_EVENT, {bubbles: false});

diff --git a/src/modules/esl-panel/core/esl-panel.ts b/src/modules/esl-panel/core/esl-panel.ts
@@ -90,7 +90,7 @@ export class ESLPanel extends ESLToggleable {
 
   /** Handles post animation process to initiate after animate step */
   protected postAnimate(capturedBy?: ESLPanelGroup | null): void {
-    if (capturedBy) {
+    if (capturedBy && capturedBy.animating) {
       capturedBy.$$on({
         event: capturedBy.AFTER_ANIMATE_EVENT,
         once: true