@afeefa/vue-app 0.0.194 → 0.0.195

package/.afeefa/package/release/version.txt

@@ -1 +1 @@
-0.0.194
+0.0.195

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@afeefa/vue-app",
-  "version": "0.0.194",
+  "version": "0.0.195",
   "description": "",
   "author": "Afeefa Kollektiv <kollektiv@afeefa.de>",
   "license": "MIT",

package/src/components/flying-context/FlyingContextEvent.js

@@ -2,4 +2,5 @@ import { BaseEvent } from '@a-vue/plugins/event-bus/BaseEvent'
 
 export class FlyingContextEvent extends BaseEvent {
   static HIDE_ALL = 'FlyingContextEvent:hide-all'
+  static START_HIDE_CONTEXT = 'FlyingContextEvent:start-hide-context'
 }

package/src-admin/components/FlyingContext.vue

@@ -78,10 +78,14 @@ export default class FlyingContext extends Mixins(CancelOnEscMixin) {
         }
       }
 
-      this.$el.appendChild(this.getContent())
-      this.coe_unwatchCancel() // hide context -> do not watch esc any more
-      this.isVisible = false
-      this.$emit('hide')
+      this.$events.dispatch(new FlyingContextEvent(FlyingContextEvent.START_HIDE_CONTEXT))
+
+      setTimeout(() => { // fade in then hide contents
+        this.$el.appendChild(this.getContent())
+        this.coe_unwatchCancel() // hide context -> do not watch esc any more
+        this.isVisible = false
+        this.$emit('hide')
+      }, 200)
     }
   }
 

package/src-admin/components/FlyingContextContainer.vue

@@ -44,6 +44,8 @@ export default class FlyingContextContainer extends Vue {
 
     const sizeWatcher = new ResizeObserver(this.sizeChanged)
     sizeWatcher.observe(this.getChildrenContainer())
+
+    this.$events.on(FlyingContextEvent.START_HIDE_CONTEXT, this.onStartHideContext)
   }
 
   /**
@@ -115,18 +117,25 @@ export default class FlyingContextContainer extends Vue {
       el.style.overflowY = this.oldOverflowY
       el.style.marginRight = 0
 
-      this.$el.style.left = '101vw' // set this if closing from outside e.g. via esc, which does not call this.hide()
+      this.$el.style.left = '101vw' // set this if closing from outside e.g. via context.esc, which does not call this.hide()
     }
+
     this.isClosing = false
   }
 
+  onStartHideContext () {
+    // context will be removed in 200ms
+    // we start right now and slide out the container
+    // so that all the contents will last until moved out of screen
+    this.$el.style.left = '101vw'
+  }
+
   hide () {
     if (this.visible) {
-      this.$el.style.left = '101vw'
+      // ignore resize watcher while closing, prevents flickering
       this.isClosing = true
-      setTimeout(() => { // fade in then hide contents
-        this.$events.dispatch(new FlyingContextEvent(FlyingContextEvent.HIDE_ALL))
-      }, 200)
+      // say the context that it should try to remove
+      this.$events.dispatch(new FlyingContextEvent(FlyingContextEvent.HIDE_ALL))
     }
   }