Add onSuccess/onFail/onEnd callbacks for Tile click eventstest-tile-event-callbacks

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){