Bookmarks

Load and save user bookmarks with custom storage logic.
Code

html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <div id="floorplan" style="width: 100%; height: 100dvh"></div>
    <script type="module">
      import { load } from 'https://unpkg.com/@expofp/floorplan';

      const bookmarksStorage = {
        bookmarks: localStorage.getItem('BOOKMARKS') || {
          'BioSustainable Ltd.': true,
          'CycleWorks Ltd.': true,
        },

        load: () => {
          return new Promise((resolve) => {
            const bm = bookmarksStorage.bookmarks;
            const res = Object.keys(bm).reduce((prev, name) => {
              return [...prev, { name, bookmarked: !!bm[name] }];
            }, []);
            resolve(res);
          });
        },

        save: ({ name, bookmarked }) => {
          return new Promise((resolve) => {
            bookmarksStorage.bookmarks[name] = !!bookmarked;
            localStorage.setItem('BOOKMARKS', JSON.stringify(bookmarksStorage.bookmarks));
            resolve();
          });
        },
      };

      load(
        { $ref: 'https://demo.expofp.com/manifest.json' },
        {
          element: document.querySelector('#floorplan'),
          onInit: (fpRef) => {
            bookmarksStorage.load().then((bookmarks) => {
              fpRef.setBookmarks(bookmarks);
            });
          },
          onBookmarkClick: (e) => {
            bookmarksStorage.save(e);
          },
        },
      );
    </script>
  </body>
</html>
Open live example
Bookmarks ​

Code ​

Bookmarks

Code
