aboutsummaryrefslogtreecommitdiff
path: root/src/components/Tile.vue
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/Tile.vue')
-rw-r--r--src/components/Tile.vue100
1 files changed, 50 insertions, 50 deletions
diff --git a/src/components/Tile.vue b/src/components/Tile.vue
index 2be6f40..c2f2b9c 100644
--- a/src/components/Tile.vue
+++ b/src/components/Tile.vue
@@ -380,56 +380,6 @@ export default defineComponent({
return this.layoutNode.failFlag;
},
},
- watch: {
- // For setting transition state (allows external triggering, like via search and auto-mode)
- pos: {
- handler(newVal: [number, number], oldVal: [number, number]){
- let valChanged = newVal[0] != oldVal[0] || newVal[1] != oldVal[1];
- if (valChanged && this.uiOpts.transitionDuration > 100 && !this.inTransition){
- this.inTransition = true;
- setTimeout(this.onTransitionEnd, this.uiOpts.transitionDuration);
- }
- },
- deep: true,
- },
- dims: {
- handler(newVal: [number, number], oldVal: [number, number]){
- let valChanged = newVal[0] != oldVal[0] || newVal[1] != oldVal[1];
- if (valChanged && this.uiOpts.transitionDuration > 100 && !this.inTransition){
- this.inTransition = true;
- setTimeout(this.onTransitionEnd, this.uiOpts.transitionDuration);
- }
- },
- deep: true,
- },
- // For externally triggering fail animations (used by search and auto-mode)
- failFlag(){
- this.triggerAnimation(this.isLeaf ? 'animate-expand-shrink' : 'animate-shrink-expand');
- },
- // Scroll to focused child if overflownRoot
- hasFocusedChild(newVal: boolean, oldVal: boolean){
- if (newVal && this.isOverflownRoot){
- let focusedChild = this.layoutNode.children.find(n => n.hasFocus)!
- let bottomY = focusedChild.pos[1] + focusedChild.dims[1] + this.lytOpts.tileSpacing;
- let scrollTop = Math.max(0, bottomY - (this.overflownDim / 2)); // No need to manually cap at max
- this.$el.scrollTop = scrollTop;
- }
- },
- // Allow overflow temporarily after being unhidden
- hidden(newVal: boolean, oldVal: boolean){
- if (oldVal && !newVal){
- this.justUnhidden = true;
- setTimeout(() => {this.justUnhidden = false;}, this.uiOpts.transitionDuration + 100);
- }
- },
- // Used to 'flash' the tile when focused
- hasFocus(newVal: boolean, oldVal: boolean){
- if (newVal != oldVal && newVal){
- this.inFlash = true;
- setTimeout(() => {this.inFlash = false;}, this.uiOpts.transitionDuration);
- }
- },
- },
methods: {
// Click handling
onMouseDown(): void {
@@ -550,6 +500,56 @@ export default defineComponent({
this.$el.classList.add(animation);
},
},
+ watch: {
+ // For setting transition state (allows external triggering, like via search and auto-mode)
+ pos: {
+ handler(newVal: [number, number], oldVal: [number, number]){
+ let valChanged = newVal[0] != oldVal[0] || newVal[1] != oldVal[1];
+ if (valChanged && this.uiOpts.transitionDuration > 100 && !this.inTransition){
+ this.inTransition = true;
+ setTimeout(this.onTransitionEnd, this.uiOpts.transitionDuration);
+ }
+ },
+ deep: true,
+ },
+ dims: {
+ handler(newVal: [number, number], oldVal: [number, number]){
+ let valChanged = newVal[0] != oldVal[0] || newVal[1] != oldVal[1];
+ if (valChanged && this.uiOpts.transitionDuration > 100 && !this.inTransition){
+ this.inTransition = true;
+ setTimeout(this.onTransitionEnd, this.uiOpts.transitionDuration);
+ }
+ },
+ deep: true,
+ },
+ // For externally triggering fail animations (used by search and auto-mode)
+ failFlag(){
+ this.triggerAnimation(this.isLeaf ? 'animate-expand-shrink' : 'animate-shrink-expand');
+ },
+ // Scroll to focused child if overflownRoot
+ hasFocusedChild(newVal: boolean, oldVal: boolean){
+ if (newVal && this.isOverflownRoot){
+ let focusedChild = this.layoutNode.children.find(n => n.hasFocus)!
+ let bottomY = focusedChild.pos[1] + focusedChild.dims[1] + this.lytOpts.tileSpacing;
+ let scrollTop = Math.max(0, bottomY - (this.overflownDim / 2)); // No need to manually cap at max
+ this.$el.scrollTop = scrollTop;
+ }
+ },
+ // Allow overflow temporarily after being unhidden
+ hidden(newVal: boolean, oldVal: boolean){
+ if (oldVal && !newVal){
+ this.justUnhidden = true;
+ setTimeout(() => {this.justUnhidden = false;}, this.uiOpts.transitionDuration + 100);
+ }
+ },
+ // Used to 'flash' the tile when focused
+ hasFocus(newVal: boolean, oldVal: boolean){
+ if (newVal != oldVal && newVal){
+ this.inFlash = true;
+ setTimeout(() => {this.inFlash = false;}, this.uiOpts.transitionDuration);
+ }
+ },
+ },
name: 'tile', // Note: Need this to use self in template
components: {InfoIcon, },
emits: ['leaf-click', 'nonleaf-click', 'leaf-click-held', 'nonleaf-click-held', 'info-click', ],