1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29
30. 30
31. 31

import { FigspecFrameViewer } from "../src";

import * as demoFrame from "./examples/demo-data/Klm6pxIZSaJFiOMX5FpTul9F/64:1.json";
import demoImage from "./examples/demo-data/Klm6pxIZSaJFiOMX5FpTul9F/64:1.svg";

const PREFERENCES_KEY = "figspec_preferences_v1";

const savedPreferences = localStorage.getItem(PREFERENCES_KEY);

const demo = document.getElementById("frame_demo");

if (demo && demo instanceof FigspecFrameViewer) {
  try {
    if (savedPreferences) {
      const value = JSON.parse(savedPreferences);

      demo.preferences = value;
    }
  } catch (error) {
    console.error("Failed to restore saved preferences");
  }

  demo.apiResponse = demoFrame;
  demo.renderedImage = demoImage;

  demo.addEventListener("preferencesupdate", (ev) => {
    const { preferences } = (ev as CustomEvent).detail;

    localStorage.setItem(PREFERENCES_KEY, JSON.stringify(preferences));
  });
}