@afeefa/vue-app 0.0.153 → 0.0.155

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

@@ -1 +1 @@
-0.0.153
+0.0.155

package/package.json

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

package/src-admin/components/FlyingContext.vue

@@ -13,7 +13,7 @@ import { randomCssClass } from '@a-vue/utils/random'
 import { CancelOnEscMixin } from '@a-vue/services/escape/CancelOnEscMixin'
 
 @Component({
-  props: [{show: false}, 'beforeClose']
+  props: [{show: false}, 'beforeClose', 'width']
 })
 export default class FlyingContext extends Mixins(CancelOnEscMixin) {
   isVisible = false
@@ -43,7 +43,14 @@ export default class FlyingContext extends Mixins(CancelOnEscMixin) {
     }
 
     if (this.isVisible) {
-      const container = this.getSidebarContainer()
+      const containerContainer = this.getFlyingContextContainer()
+      if (this.width) {
+        containerContainer.style.width = this.width
+      } else {
+        containerContainer.style.width = 'auto'
+      }
+
+      const container = this.getChildrenContainer()
       container.appendChild(el)
       this.coe_watchCancel() // show context -> watch esc
     } else {
@@ -53,7 +60,7 @@ export default class FlyingContext extends Mixins(CancelOnEscMixin) {
   }
 
   destroyed () {
-    const container = this.getSidebarContainer()
+    const container = this.getChildrenContainer()
     const el = this.getContent()
     if (container.contains(el)) {
       container.removeChild(el)
@@ -87,7 +94,11 @@ export default class FlyingContext extends Mixins(CancelOnEscMixin) {
     return document.querySelector('.' + this.contextId)
   }
 
-  getSidebarContainer () {
+  getFlyingContextContainer () {
+    return document.getElementById('flyingContextContainer')
+  }
+
+  getChildrenContainer () {
     return document.getElementById('flyingContextContainer__children')
   }
 }

package/src-admin/components/FlyingContextContainer.vue

@@ -35,10 +35,13 @@ export default class FlyingContextContainer extends Vue {
   oldOverflowY = null
 
   mounted () {
-    this.mutationWatcher = new MutationObserver(this.domChanged)
-    this.mutationWatcher.observe(this.getChildrenContainer(), { childList: true })
+    const mutationWatcher = new MutationObserver(this.domChanged)
+    mutationWatcher.observe(this.getChildrenContainer(), { childList: true })
 
     window.addEventListener('mousedown', this.onClickOutside)
+
+    const sizeWatcher = new ResizeObserver(this.sizeChanged)
+    sizeWatcher.observe(this.getChildrenContainer())
   }
 
   getScrollbarWidth () {
@@ -57,6 +60,17 @@ export default class FlyingContextContainer extends Vue {
   }
 
 
+  sizeChanged () {
+    if (this.visible) {
+      this.$nextTick(() => {
+        const scrollbarWidth = this.getScrollbarWidth()
+        const el = document.documentElement
+        const newSize = el.offsetWidth - this.$el.offsetWidth + scrollbarWidth
+        this.$el.style.left = newSize + 'px'
+      })
+    }
+  }
+
   domChanged () {
     const container = this.getChildrenContainer()
     this.visible = !!container.children.length
@@ -71,6 +85,8 @@ export default class FlyingContextContainer extends Vue {
         el.style.overflowY = 'hidden'
         el.style.marginRight = scrollbarWidth + 'px'
       }, 100)
+
+      this.$el.style.left = (el.offsetWidth - this.$el.offsetWidth + scrollbarWidth) + 'px'
     } else {
       el.style.overflowY = this.oldOverflowY
       el.style.marginRight = 0
@@ -79,7 +95,10 @@ export default class FlyingContextContainer extends Vue {
 
   hide () {
     if (this.visible) {
-      this.$events.dispatch(new FlyingContextEvent(FlyingContextEvent.HIDE_ALL))
+      this.$el.style.left = '101vw'
+      setTimeout(() => { // fade in then hide contents
+        this.$events.dispatch(new FlyingContextEvent(FlyingContextEvent.HIDE_ALL))
+      }, 200)
     }
   }
 
@@ -120,19 +139,19 @@ export default class FlyingContextContainer extends Vue {
 #flyingContextContainer {
   position: fixed;
   z-index: 200;
-  right: 0;
   height: 100%;
+  width: auto;
   min-width: 400px;
   max-width: calc(100vw - 100px);
   top: 0;
   background: white;
-  transition: right .2s;
+  transition: left .2s;
   padding: 2rem;
   overflow-y: auto;
   border-left: 1px solid rgba(0, 0, 0, .12);
 
   &:not(.visible) {
-    right: -80vw;
+    left: 101vw;
   }
 
   .closeButton {