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

2 files changed, 81 insertions, 41 deletions

diff --git a/src/App.vue b/src/App.vue
index cd6731a..3b907d1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -182,48 +182,51 @@ export default defineComponent({
 			}
 		},
 		// For tile expand/collapse events
-		onInnerLeafClicked({layoutNode, domNode}: {layoutNode: LayoutNode, domNode?: HTMLElement}){
+		onInnerLeafClicked({layoutNode, onSuccess, onFail}: {layoutNode: LayoutNode, onSuccess?: () => void, onFail?: () => void}){
 			let success = tryLayout(this.activeRoot, this.layoutMap,
 				this.tileAreaPos, this.tileAreaDims, this.layoutOptions, false, {type: 'expand', node: layoutNode});
-			if (!success && domNode != null){
-				// Trigger failure animation
-				domNode.classList.remove('animate-expand-shrink');
-				domNode.offsetWidth; // Triggers reflow
-				domNode.classList.add('animate-expand-shrink');
+			if (success && onSuccess != null){
+				onSuccess();
+			}
+			if (!success && onFail != null){
+				onFail();
 			}
 			return success;
 		},
-		onInnerHeaderClicked({layoutNode, domNode}: {layoutNode: LayoutNode, domNode?: HTMLElement}){
+		onInnerHeaderClicked({layoutNode, onSuccess, onFail}: {layoutNode: LayoutNode, onSuccess?: () => void, onFail?: () => void}){
 			let oldChildren = layoutNode.children;
 			let success = tryLayout(this.activeRoot, this.layoutMap,
 				this.tileAreaPos, this.tileAreaDims, this.layoutOptions, false, {type: 'collapse', node: layoutNode});
-			if (!success && domNode != null){
-				// Trigger failure animation
-				domNode.classList.remove('animate-shrink-expand');
-				domNode.offsetWidth; // Triggers reflow
-				domNode.classList.add('animate-shrink-expand');
+			if (success && onSuccess != null){
+				onSuccess();
+			}
+			if (!success && onFail != null){
+				onFail();
 			}
 			return success;
 		},
 		// For expand-to-view events
-		onInnerLeafClickHeld(layoutNode: LayoutNode){
+		onInnerLeafClickHeld({layoutNode, onEnd}: {layoutNode: LayoutNode, onEnd: () => void}){
 			if (layoutNode == this.activeRoot){
 				console.log('Ignored expand-to-view on root node');
-				return;
+			} else {
+				LayoutNode.hideUpward(layoutNode);
+				this.activeRoot = layoutNode;
+				tryLayout(this.activeRoot, this.layoutMap,
+					this.tileAreaPos, this.tileAreaDims, this.layoutOptions, true, {type: 'expand', node: layoutNode});
 			}
-			LayoutNode.hideUpward(layoutNode);
-			this.activeRoot = layoutNode;
-			tryLayout(this.activeRoot, this.layoutMap,
-				this.tileAreaPos, this.tileAreaDims, this.layoutOptions, true, {type: 'expand', node: layoutNode});
+			onEnd();
 		},
-		onInnerHeaderClickHeld(layoutNode: LayoutNode){
+		onInnerHeaderClickHeld({layoutNode, onEnd}: {layoutNode: LayoutNode, onEnd: () => void}){
 			if (layoutNode == this.activeRoot){
 				console.log('Ignored expand-to-view on active-root node');
-				return;
+			} else {
+				LayoutNode.hideUpward(layoutNode);
+				this.activeRoot = layoutNode;
+				tryLayout(this.activeRoot, this.layoutMap,
+					this.tileAreaPos, this.tileAreaDims, this.layoutOptions, true);
 			}
-			LayoutNode.hideUpward(layoutNode);
-			this.activeRoot = layoutNode;
-			tryLayout(this.activeRoot, this.layoutMap, this.tileAreaPos, this.tileAreaDims, this.layoutOptions, true);
+			onEnd();
 		},
 		onSepdParentClicked(layoutNode: LayoutNode){
 			LayoutNode.showDownward(layoutNode);
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){