unsplash_search.js

import EditorPlugin = prezi_plugin_api.EditorPlugin;
import ApplicationApi = prezi_plugin_api.ApplicationApi;
import ApplicationUI = prezi_plugin_api.ApplicationUI;
import UIRoot = prezi_plugin_api.UIRoot;
import MenuId = prezi_plugin_api.MenuId;

type UIState = {
  name: string;
  urls: string[];
  progress: prezi_plugin_api.ListProgress;
};

class Main implements EditorPlugin {
  init(applicationApi: ApplicationApi) {
    const uiRoot = applicationApi.declareUI<UIState>(
      {
        name: null,
        urls: [],
        progress: prezi_plugin_api.ListProgress.finished
      },
      (state, ui) => {
        this.createMenuItem(ui, state, uiRoot);
        this.createSidebar(ui, state, uiRoot);
      }
    );
  }

  createMenuItem(ui: ApplicationUI, state: UIState, uiRoot: UIRoot<UIState>) {
    ui.menuItem({
      id: "mapsMenuItem",
      parent: MenuId.Insert,
      weight: 3,
      title: "BMW Search",
      icon: prezi_plugin_api.IconId.Crown,
      onClick: () => {
        uiRoot.sidebar.open("imagesSidebarId");
      }
    });
  }

  createSidebar(ui: ApplicationUI, state: UIState, uiRoot: UIRoot<UIState>) {
    return ui.createSidebar({
      id: "imagesSidebarId",
      root: {
        title: "BMW Searcher",
        content: [
          this.createSearch(ui, state, uiRoot),
          this.createResultList(ui, state, uiRoot)
        ]
      }
    });
  }

  createSearch(ui: ApplicationUI, state: UIState, uiRoot: UIRoot<UIState>) {
    return ui.sidebar.containerWithColoredBackground({
      content: [
        ui.sidebar.sectionHeader("Search"),
        ui.sidebar.searchField({
          id: "image-input",
          onSearchButtonClick: async (
            pluginCtx: prezi_plugin_api.PluginCtx,
            value: string
          ) => {
            uiRoot.setState({
              progress: prezi_plugin_api.ListProgress.working
            });

            try {
              const images: any = await fetch(
                "https://atlas.jifo.co/api/graphics?q=" + value + "&type=image&v=10"
              ).then(function(response) {
                return response.json();
              });

              const urls: any = images.map((image: any) => ({
                thumb: image["url"],
                url: image["src"],
                author: image["author"]
              }));

              uiRoot.setState({ urls: urls });
            } finally {
              uiRoot.setState({
                progress: prezi_plugin_api.ListProgress.finished
              });
            }
          }
        })
      ]
    });
  }

  private createResultList(
    ui: prezi_plugin_api.ApplicationUI,
    state: UIState,
    uiRoot: prezi_plugin_api.UIRoot<UIState>
  ) {
    return ui.sidebar.simpleVerticalList({
      items: state.urls
        .map(url => this.createImage(url["url"], ui))
        .filter(image => image != null),
      itemLayout: prezi_plugin_api.ListItemLayout.fixed,
      itemSize: prezi_plugin_api.ListItemSize.small,
      flexGrow: 1,
      progress: state.progress
    });
  }

  private createImage(
    url: string,
    ui: prezi_plugin_api.ApplicationUI
  ): prezi_plugin_api.ListItemDescription {
    return ui.listItem.droppableImage({
      getDropData: () => {
        return {
          dataType: "dropbox",
          info: url
        };
      },
      url: url,
      disabled: false,
      selected: false,
      onClick: () => {},
      title: url
    });
  }

  processMessage() {}
}