diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/Tile.vue | 73 |
1 files changed, 55 insertions, 18 deletions
diff --git a/src/components/Tile.vue b/src/components/Tile.vue index 82599ff..ba55fe0 100644 --- a/src/components/Tile.vue +++ b/src/components/Tile.vue @@ -143,21 +143,42 @@ export default defineComponent({ console.log('Ignored click on non-expandable node'); return; } - this.$emit('leaf-clicked', {layoutNode: this.layoutNode, domNode: this.$el}); - this.leafPrepTransition(); + // Temporary style changes to prevent content overlap and overflow + this.zIdx = 1; + this.overflow = 'hidden'; + // Callbacks + let onSuccess = () => { + setTimeout(() => { + this.zIdx = 0; + this.overflow = 'visible'; + }, this.options.transitionDuration); + }; + let onFail = () => { + this.zIdx = 0; + this.overflow = 'visible'; + // Trigger failure animation + this.$el.classList.remove('animate-expand-shrink'); + this.$el.offsetWidth; // Triggers reflow + this.$el.classList.add('animate-expand-shrink'); + }; + this.$emit('leaf-clicked', {layoutNode: this.layoutNode, onSuccess, onFail}); }, onLeafClickHold(){ if (!this.isExpandable){ console.log('Ignored click-hold on non-expandable node'); return; } - this.$emit('leaf-click-held', this.layoutNode); - this.leafPrepTransition(); - }, - leafPrepTransition(){ // Temporary style changes to prevent content overlap and overflow + // Temporary style changes to prevent content overlap and overflow this.zIdx = 1; this.overflow = 'hidden'; - setTimeout(() => {this.zIdx = 0; this.overflow = 'visible';}, this.options.transitionDuration); + // Callbacks + let onEnd = () => { + setTimeout(() => { + this.zIdx = 0; + this.overflow = 'visible'; + }, this.options.transitionDuration); + }; + this.$emit('leaf-click-held', {layoutNode: this.layoutNode, onEnd}); }, // Non-leaf click handling onHeaderMouseDown(){ @@ -176,16 +197,32 @@ export default defineComponent({ } }, onHeaderClick(){ - this.$emit('header-clicked', {layoutNode: this.layoutNode, domNode: this.$el}); - this.nonLeafPrepForTransition(); + // Temporary style changes to prevent content overlap and overflow + this.zIdx = 1; + let onSuccess = () => { + setTimeout(() => { + this.zIdx = 0; + }, this.options.transitionDuration); + }; + let onFail = () => { + this.zIdx = 0; + // Trigger failure animation + this.$el.classList.remove('animate-shrink-expand'); + this.$el.offsetWidth; // Triggers reflow + this.$el.classList.add('animate-shrink-expand'); + }; + this.$emit('header-clicked', {layoutNode: this.layoutNode, onSuccess, onFail}); }, onHeaderClickHold(){ - this.$emit('header-click-held', this.layoutNode); - this.nonLeafPrepForTransition(); - }, - nonLeafPrepForTransition(){ // Temporary style changes to prevent content overlap and overflow + // Temporary style changes to prevent content overlap and overflow this.zIdx = 1; - setTimeout(() => {this.zIdx = 0}, this.options.transitionDuration); + // Callbacks + let onEnd = () => { + setTimeout(() => { + this.zIdx = 0; + }, this.options.transitionDuration); + }; + this.$emit('header-click-held', {layoutNode: this.layoutNode, onEnd}); }, // For coloured-outlines on hovered-over leaf-tiles or non-leaf-headers onNonLeafMouseEnter(evt: Event){ @@ -195,16 +232,16 @@ export default defineComponent({ this.nonLeafHighlight = false; }, // Child event propagation - onInnerLeafClicked(data: {layoutNode: LayoutNode, domNode: HTMLElement}){ + onInnerLeafClicked(data: {layoutNode: LayoutNode, onSuccess: () => void, onFail: () => void}){ this.$emit('leaf-clicked', data); }, - onInnerHeaderClicked(data: {layoutNode: LayoutNode, domNode: HTMLElement}){ + onInnerHeaderClicked(data: {layoutNode: LayoutNode, onSuccess: () => void, onFail: () => void}){ this.$emit('header-clicked', data); }, - onInnerLeafClickHeld(data: LayoutNode){ + onInnerLeafClickHeld(data: {layoutNode: LayoutNode, onEnd: () => void}){ this.$emit('leaf-click-held', data); }, - onInnerHeaderClickHeld(data: LayoutNode){ + onInnerHeaderClickHeld(data: {layoutNode: LayoutNode, onEnd: () => void}){ this.$emit('header-click-held', data); }, onInnerInfoIconClicked(data: LayoutNode){ |