Как пользоваться JavaScript API

Программисты, привет! Очень рады тому что заказчики подкинули вам дополнительную работенку и вы пришли в этот раздел. Мы сделали JavaScript api специально для вас, чтобы вам не было мучительно больно разбираться в дебрях кода вьювера туров, в котором и нам то больно разбираться. 

ВАЖНО! У нас есть два вьювера туров - обычный и VR. Это два разных по принципу и кодовой базе вьювера. Но, оцифиальное API там одинаковое и ведет себя одинаково. Если вы планируете реализовать что то свое кастомное в обход API, например, какую то кастомную кнопку, то в VR оно скорее всего сломается. Можете либо забить на VR режим, либо не отдохить от стандартного API.

Есть 3 официальных способа использовать ваш JS в туре:

Свой код.

Включается в настройках тура (только Pro аккаунт). Вставляется в страницу как есть, поэтому можете не только <script></script> вставлять, но и css и html разметку.

Если меня разбудили и что то сразу требуют, фиг я что то сделаю, с API такая же история. Ждите пока  тур подготовится:

(async function () {
  await ipano.ready()
  ipano.toast('Я родился!')
})()
// или так
ipano.ready().then(function () {
  ipano.toast('API готов')
})

Сценарии.

Подробнее об этом в разделе "Сценарии". Но если кратко, у вас есть возможность запускать свои скрипты при старте отдельных панорам и скрипты, которые запускают по клику на метки на панорамах. 

Там вам не нужно ждать готовности API. Но, эти скрипты живут в своей песочнице, но с некоторыми глобальными объектами. В разделе "Сценарии" об этом тоже написано. 

Встраивание на сайт.

Если тур живет на вашем сайте, то из JS вашего сайта, туром можно управлять. Например, сделать кнопочки, которые переключают панорамы. 

Есть два способа встравки тура - через обычный iframe или через js (который тоже в принципе работает через iframe, но наш ipano-embed.js делает за вас много всякой работы). Для работы через api мы рекомендуем вставлять тур через js. 

// этот код работает на странице вашего сайта
  const embed = IPanoEmbed.get(".ipano-embed");
  const ipano = embed.api;
  ipano.ready().then(function () {
    ipano.toast('Я родился!')
})()
  })
  ipano.on("scenechange", function (event) {
    console.log("Переход в панораму:", event);
  });

Если вы просто вставляете iframe, то вам придется самостоятельно отправлять и принимать сообщения от iframe

<iframe
  id="tour"
  src="https://ipano.ru/my-tour-slug/"
  style="width:100%;height:600px;border:0"
  allow="fullscreen; accelerometer; gyroscope; xr-spatial-tracking"
></iframe>

<script>
  const iframe = document.getElementById("tour");
  const targetOrigin = "https://ipano.ru";
  const pending = {};

  window.addEventListener("message", function (event) {
    if (event.origin !== targetOrigin) return;

    const data = event.data;
    if (!data || typeof data !== "object") return;

    if (data.type === "ipano:api:result" && pending[data.id]) {
      const p = pending[data.id];
      delete pending[data.id];

      if (data.ok) p.resolve(data.result);
      else p.reject(new Error(data.error || "IPano API error"));
    }

    if (data.type === "ipano:api:event") {
      console.log("Событие тура:", data.event, data.payload);
    }
  });

  function callIpano(method, args) {
    const id = "ipano-call-" + Date.now() + "-" + Math.random();

    iframe.contentWindow.postMessage({
      type: "ipano:api:call",
      id: id,
      method: method,
      args: args || []
    }, targetOrigin);

    return new Promise(function (resolve, reject) {
      pending[id] = { resolve, reject };
    });
  }

  callIpano("ready").then(function () {
    return callIpano("initInfoPanel", [{ places: 1 }]);
  }).then(function () {
    return callIpano("setInfoText", [1, "Тур готов"]);
  });
</script>