| 62 | |
| 63 | |
| 64 | override async apply(): Promise<void> { |
| 65 | const oldClasses = [...this.element.get(0).classList]; |
| 66 | |
| 67 | for (const oldClass of oldClasses) { |
| 68 | this.element.removeClass(oldClass); |
| 69 | } |
| 70 | |
| 71 | this.element.addClass('animated'); |
| 72 | |
| 73 | // Check if there is any end-animation, here's what this matches: |
| 74 | // 'end-fadeIn'.match (/end-([A-Za-z]+)/) => [ "end-fadeIn", "fadeIn" ] |
| 75 | const endAnimation = oldClasses.find((c: string) => c.match(/end-([A-Za-z]+)/) !== null); |
| 76 | |
| 77 | if (typeof endAnimation !== 'undefined') { |
| 78 | const [end, animation] = endAnimation.split('-'); |
| 79 | this.element.addClass(animation); |
| 80 | } |
| 81 | |
| 82 | const durationPosition = this.classes.indexOf('duration'); |
| 83 | |
| 84 | if (durationPosition > -1) { |
| 85 | this.element.style('animation-duration', this.classes[durationPosition + 1]); |
| 86 | } else { |
| 87 | this.element.style('animation-duration', ''); |
| 88 | } |
| 89 | |
| 90 | if (this.classes.length > 0 || typeof endAnimation !== 'undefined') { |
| 91 | for (const className of this.classes) { |
| 92 | if (className) { |
| 93 | this.element.addClass(className); |
| 94 | } |
| 95 | } |
| 96 | this.element.data('visibility', 'invisible'); |
| 97 | |
| 98 | this.element.on('animationend', (e: any) => { |
| 99 | if (e.target.dataset.visibility === 'invisible') { |
| 100 | // Remove only if the animation ends while the element is not visible |
| 101 | e.target.remove(); |
| 102 | } |
| 103 | }); |
| 104 | } else { |
| 105 | this.element.remove(); |
| 106 | } |
| 107 | |
| 108 | const parentAsComponent = this.parent.get(0) as (HTMLElement & { state?: { layers?: Record<string, unknown> }; setState?: (state: Record<string, unknown>) => void }) | undefined; |
| 109 | if (parentAsComponent?.state && parentAsComponent?.setState) { |
| 110 | const stateLayers = parentAsComponent.state.layers || {}; |
| 111 | const { [this.layer]: _, ...remainingLayers } = stateLayers; |
| 112 | parentAsComponent.setState({ |
| 113 | layers: remainingLayers |
| 114 | }); |
| 115 | } |
| 116 | } |
| 117 | |
| 118 | override async didApply({ updateHistory = true, updateState = true } = {}): Promise<ActionApplyResult> { |
| 119 | const show = this.engine.state('characterLayers').filter((item: string) => { |