From 99ce95a9cc4da579c7dc74d693c4cbb511b38d27 Mon Sep 17 00:00:00 2001
From: Stanislav Romanov <kaermorchen@gmail.com>
Date: Tue, 13 Sep 2022 18:28:41 +0300
Subject: [PATCH] Add positional observer

---
 app/components/toast.hbs |  4 +++-
 app/components/toast.js  | 33 +++++++++++++++++++++++++++++----
 app/services/toasts.js   |  3 +--
 3 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/app/components/toast.hbs b/app/components/toast.hbs
index f78c633..8d261a0 100644
--- a/app/components/toast.hbs
+++ b/app/components/toast.hbs
@@ -1,8 +1,10 @@
 {{#in-element this.toasts.destinationElement insertBefore=null}}
   <div
-    class='flex items-center p-4 w-full max-w-xs border rounded shadow-sm'
+    class='absolute flex items-center p-4 w-full max-w-xs border rounded bg-base-7 shadow-sm'
     role='alert'
+    style={{this.style}}
     {{did-insert this.didInsert}}
+    ...attributes
   >
     {{yield (hash triggerOnClose=this.triggerOnClose)}}
   </div>
diff --git a/app/components/toast.js b/app/components/toast.js
index 0059650..ad4db55 100644
--- a/app/components/toast.js
+++ b/app/components/toast.js
@@ -3,6 +3,9 @@ import { inject as service } from '@ember/service';
 import { registerDestructor } from '@ember/destroyable';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
+import { htmlSafe } from '@ember/template';
+
+const margin = 16;
 
 export default class ToastComponent extends Component {
   @service toasts;
@@ -10,6 +13,30 @@ export default class ToastComponent extends Component {
   @tracked width;
   @tracked height;
 
+  get top() {
+    const queue = this.toasts.queue;
+
+    for (let i = 0, height = 0; i < queue.length; i++) {
+      height += margin;
+
+      if (queue[i] === this) {
+        return `top: ${height}px`;
+      }
+
+      height += queue[i].height;
+    }
+
+    return `top: ${margin}px`;
+  }
+
+  get right() {
+    return `right: ${margin}px`;
+  }
+
+  get style() {
+    return htmlSafe([this.top, this.right].join('; '));
+  }
+
   @action
   triggerOnClose() {
     this.args.onClose?.();
@@ -23,10 +50,8 @@ export default class ToastComponent extends Component {
 
   registerResizeObserver(el) {
     const ro = new ResizeObserver((entries) => {
-      for (let entry of entries) {
-        this.width = entry.contentRect.width;
-        this.height = entry.contentRect.height;
-      }
+      this.width = entries[0].borderBoxSize[0].inlineSize;
+      this.height = entries[0].borderBoxSize[0].blockSize;
     });
 
     ro.observe(el);
diff --git a/app/services/toasts.js b/app/services/toasts.js
index 73ffdde..a1bb947 100644
--- a/app/services/toasts.js
+++ b/app/services/toasts.js
@@ -1,8 +1,7 @@
 import Service from '@ember/service';
 import { tracked } from '@glimmer/tracking';
-import SuccessToast from '../components/success-toast';
 import { hbs } from 'ember-template-imports';
-import { fn } from '@ember/helper';
+import SuccessToast from '../components/success-toast';
 
 export default class ToastsService extends Service {
   @tracked container = [];