app/assets/lookbook/js/components/inspector.js in lookbook-0.4.8 vs app/assets/lookbook/js/components/inspector.js in lookbook-0.5.0.beta.0

@@ -1,18 +1,55 @@
+import sizeObserver from "./sizes";
+
 export default function inspector() {
   return {
+    width: 0,
+    height: 0,
+    init() {
+      const ro = new ResizeObserver((entries) => {
+        const rect = entries[0].contentRect;
+        this.width = Math.round(rect.width);
+        this.height = Math.round(rect.height);
+      });
+      ro.observe(this.$el);
+      this.width = Math.round(this.$el.clientWidth);
+      this.height = Math.round(this.$el.clientHeight);
+    },
+    get orientation() {
+      return this.$store.inspector.drawer.orientation;
+    },
+    get view() {
+      return this.$store.inspector.preview.view;
+    },
+    get horizontal() {
+      return this.canBeVertical ? this.orientation === "horizontal" : true;
+    },
+    get vertical() {
+      return !this.horizontal;
+    },
+    get canBeVertical() {
+      return this.width > 800;
+    },
+    get drawerHidden() {
+      return this.$store.inspector.drawer.hidden;
+    },
     isActivePanel(panel) {
-      return this.$store.inspector.panels.active == panel;
+      return this.$store.inspector.drawer.active == panel;
     },
     switchPanel(panel) {
-      this.$store.inspector.panels.active = panel;
+      this.$store.inspector.drawer.active = panel;
     },
-    get showSource() {
-      return this.$store.inspector.preview.source;
+    toggleView() {
+      this.$store.inspector.preview.view =
+        this.view === "html" ? "preview" : "html";
     },
-    toggleSource() {
-      this.$store.inspector.preview.source =
-        !this.$store.inspector.preview.source;
+    toggleOrientation() {
+      this.$store.inspector.drawer.orientation =
+        this.orientation === "horizontal" ? "vertical" : "horizontal";
+    },
+    toggleDrawer() {
+      this.$store.inspector.drawer.hidden =
+        !this.$store.inspector.drawer.hidden;
     },
     preview: {
       width: null,
       height: null,
     },