diff options
Diffstat (limited to 'src/App.vue')
| -rw-r--r-- | src/App.vue | 49 |
1 files changed, 26 insertions, 23 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); |
