DEV: CSS-only mask

2025-03-07 17:56:55 +00:00
parent 3777405f0b
commit ab76fd345d
2 changed files with 12 additions and 61 deletions
@@ -1,57 +1,11 @@
-import Component from "@glimmer/component";
-import { tracked } from "@glimmer/tracking";
-import { action } from "@ember/object";
-import didInsert from "@ember/render-modifiers/modifiers/did-insert";
-import { htmlSafe } from "@ember/template";
-import { bind } from "discourse/lib/decorators";
+const ExperimentalScreen = <template>
+  <ul class="experimental-screen">
+    <li class="experimental-screen__top-left"></li>
+    <li class="experimental-screen__top-right"></li>
+    <li class="experimental-screen__bottom-left"></li>
+    <li class="experimental-screen__bottom-right"></li>
+    <li class="experimental-screen__bottom-bar"></li>
+  </ul>
+</template>;

-export default class ExperimentalScreen extends Component {
-  @tracked left = 0;
-  @tracked right = 0;
-  resizeObserver;
-
-  willDestroy() {
-    super.willDestroy(...arguments);
-    this.resizeObserver.disconnect();
-  }
-
-  @bind
-  calculateDistance(element) {
-    const distance = element.getBoundingClientRect();
-    this.left = distance.left;
-    this.right = distance.right;
-  }
-
-  get distanceStyles() {
-    return htmlSafe(
-      `--left-distance: ${this.left}px; --right-distance: ${this.right}px;`
-    );
-  }
-
-  @action
-  onInsert(element) {
-    this.calculateDistance(element);
-
-    this.resizeObserver = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        this.calculateDistance(entry.target);
-      }
-    });
-
-    this.resizeObserver.observe(element);
-  }
-
-  <template>
-    <ul
-      class="experimental-screen"
-      {{didInsert this.onInsert}}
-      style={{this.distanceStyles}}
-    >
-      <li class="experimental-screen__top-left"></li>
-      <li class="experimental-screen__top-right"></li>
-      <li class="experimental-screen__bottom-left"></li>
-      <li class="experimental-screen__bottom-right"></li>
-      <li class="experimental-screen__bottom-bar"></li>
-    </ul>
-  </template>
-}
+export default ExperimentalScreen;