lit · AndrewJakubowicz · Oct 6, 2022 · Oct 6, 2022 · Oct 10, 2022 · Oct 12, 2022
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/lit-dev-content/package.json b/packages/lit-dev-content/package.json
@@ -195,6 +195,7 @@
   },
   "dependencies": {
     "@lit-labs/motion": "^1.0.1",
+    "@lit-labs/observers": "1.1.0",
     "@lit-labs/react": "^1.0.8",
     "@lit-labs/task": "^1.0.0",
     "@lit/localize": "^0.10.0",

diff --git a/packages/lit-dev-content/samples/examples/observers-resize-controller/index.html b/packages/lit-dev-content/samples/examples/observers-resize-controller/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<script type="module" src="./resize-demo.js"></script>
+<script type="module" src="./mock-drawer.js"></script>
+<style>
+  body {
+    display: flex;
+    font-family: Sans-Serif;
+  }
+</style>
+
+<mock-drawer></mock-drawer>
+<simple-resize-demo></simple-resize-demo>
diff --git a/packages/lit-dev-content/samples/examples/observers-resize-controller/mock-drawer.ts b/packages/lit-dev-content/samples/examples/observers-resize-controller/mock-drawer.ts
@@ -0,0 +1,75 @@
+import {LitElement, html, css} from 'lit';
+import {customElement, state} from 'lit/decorators.js';
+import {styleMap} from 'lit/directives/style-map.js';
+
+// Material icon: https://fonts.google.com/icons?selected=Material%20Symbols%20Outlined%3Aunfold_more%3AFILL%400%3Bwght%40400%3BGRAD%400%3Bopsz%4048
+const unfold_more = html`<svg
+  xmlns="http://www.w3.org/2000/svg"
+  fill="white"
+  height="48"
+  width="48"
+  viewBox="0 0 48 48"
+>
+  <path
+    xmlns="http://www.w3.org/2000/svg"
+    d="m24 42-9-9 2.2-2.2 6.8 6.8 6.8-6.8L33 33Zm-6.8-24.6L15 15.2l9-9 9 9-2.2 2.2-6.8-6.8Z"
+  />
+</svg>`;
+
+// Material icon: https://fonts.google.com/icons?selected=Material%20Symbols%20Outlined%3Aunfold_less%3AFILL%400%3Bwght%40400%3BGRAD%400%3Bopsz%4048
+const unfold_less = html`<svg
+  xmlns="http://www.w3.org/2000/svg"
+  fill="white"
+  height="48"
+  width="48"
+  viewBox="0 0 48 48"
+>
+  <path
+    d="M17.15 40 15 37.85l9-9 9 9L30.85 40 24 33.15ZM24 19.15l-9-9L17.15 8 24 14.85 30.85 8 33 10.15Z"
+  />
+</svg>`;
+
+/**
+ * `mock-drawer` imitates a menu on the page. Clicking this drawer expands and
+ * contracts it.
+ */
+@customElement('mock-drawer')
+export class MockDrawer extends LitElement {
+  @state() extended = false;
+
+  toggleExtended() {
+    this.extended = !this.extended;
+  }
+
+  render() {
+    return html`
+      <div
+        style=${styleMap({width: this.extended ? '200px' : '50px'})}
+        @click=${this.toggleExtended}
+      >
+        ${this.extended ? unfold_less : unfold_more}
+      </div>
+    `;
+  }
+
+  static styles = css`
+    :host {
+      display: flex;
+      height: calc(100vh - 90px);
+    }
+    div {
+      background-color: #324fff;
+      transition: width 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+      cursor: pointer;
+      display: flex;
+      flex-direction: row;
+      justify-content: end;
+    }
+    div:hover {
+      background-color: #101ccc;
+    }
+    svg {
+      rotate: 90deg;
+    }
+  `;
+}
diff --git a/packages/lit-dev-content/samples/examples/observers-resize-controller/project.json b/packages/lit-dev-content/samples/examples/observers-resize-controller/project.json
@@ -0,0 +1,14 @@
+{
+  "extends": "/samples/base.json",
+  "hide": true,
+  "title": "ResizeController",
+  "description": "@lit-labs/observers ResizeController example",
+  "section": "Observers",
+  "files": {
+    "resize-demo.ts": {},
+    "styles.ts": {},
+    "mock-drawer.ts": {},
+    "index.html": {}
+  },
+  "order": 0
+}
diff --git a/packages/lit-dev-content/samples/examples/observers-resize-controller/resize-demo.ts b/packages/lit-dev-content/samples/examples/observers-resize-controller/resize-demo.ts
@@ -0,0 +1,31 @@
+import {html, LitElement} from 'lit';
+import {customElement} from 'lit/decorators.js';
+import {styles, svgCross} from './styles.js';
+import {ResizeController} from '@lit-labs/observers/resize_controller.js';
+
+/**
+ * This example demonstrates a simple usage of the ResizeController exported
+ * from the `@lit-labs/observers` package. This element uses a resize controller
+ * to render its width and height.
+ *
+ * The controller automatically triggers a reactive update when a resize on the
+ * element is observed.
+ */
+@customElement('simple-resize-demo')
+export class SimpleResizeDemo extends LitElement {
+  static styles = styles;
+
+  private resizeController = new ResizeController(this, {
+    callback([entry]) {
+      return [entry.contentRect.width, entry.contentRect.height];
+    },
+  });
+
+  render() {
+    const [width, height] = this.resizeController.value ?? [0, 0];
+    return html`
+      ${svgCross}
+      <span>${width.toFixed(0)}px by ${height.toFixed(0)}px</span>
+    `;
+  }
+}
diff --git a/packages/lit-dev-content/samples/examples/observers-resize-controller/styles.ts b/packages/lit-dev-content/samples/examples/observers-resize-controller/styles.ts
@@ -0,0 +1,57 @@
+import {css, html} from 'lit';
+
+export const styles = css`
+  :host {
+    display: grid;
+    min-height: 100px;
+    width: 100%;
+    height: 100%;
+    font-size: 1.4rem;
+  }
+
+  * {
+    grid-area: 1 / 1 / 1 / 1;
+  }
+
+  span {
+    align-self: center;
+    justify-self: center;
+    color: white;
+    background-color: #324fff;
+  }
+
+  svg {
+    color: #324fff;
+    border: 5px solid #324fff;
+    max-height: calc(100vh - 100px);
+    width: 100%;
+  }
+`;
+
+export const svgCross = html`
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    version="1.1"
+    preserveAspectRatio="none"
+    viewBox="0 0 100 100"
+  >
+    <line
+      x1="0"
+      y1="0"
+      x2="100"
+      y2="100"
+      stroke="currentColor"
+      stroke-width="5px"
+      vector-effect="non-scaling-stroke"
+    />
+    <line
+      x1="0"
+      y1="100"
+      x2="100"
+      y2="0"
+      stroke="currentColor"
+      stroke-width="5px"
+      vector-effect="non-scaling-stroke"
+    />
+  </svg>
+`;