Доступ до буфера обміну та геолокації

async function copyText(text) {
  if (!navigator.clipboard) {
    throw new Error("Clipboard API недоступний");
  }

  await navigator.clipboard.writeText(text);
}

await copyText("Текст для копіювання");

const copyButton = document.querySelector("#copy-button");
const message = document.querySelector("#copy-message");

copyButton.addEventListener("click", async () => {
  try {
    await navigator.clipboard.writeText("Скопійований текст");
    message.textContent = "Текст скопійовано";
  } catch (error) {
    message.textContent = "Не вдалося скопіювати текст";
    console.error(error);
  }
});

setTimeout(() => {
  navigator.clipboard.writeText("Текст");
}, 5000);

async function pasteText() {
  if (!navigator.clipboard) {
    throw new Error("Clipboard API недоступний");
  }

  const text = await navigator.clipboard.readText();
  return text;
}

const pasteButton = document.querySelector("#paste-button");
const output = document.querySelector("#paste-output");

pasteButton.addEventListener("click", async () => {
  try {
    const text = await navigator.clipboard.readText();
    output.value = text;
  } catch (error) {
    if (error.name === "NotAllowedError") {
      output.value = "Браузер не дозволив читання буфера обміну";
    } else {
      output.value = "Помилка читання буфера обміну";
    }

    console.error(error);
  }
});

async function copyHtml(html, plainText) {
  const item = new ClipboardItem({
    "text/html": new Blob([html], { type: "text/html" }),
    "text/plain": new Blob([plainText], { type: "text/plain" })
  });

  await navigator.clipboard.write([item]);
}

await copyHtml(
  "<strong>Важливий текст</strong>",
  "Важливий текст"
);

if (typeof ClipboardItem !== "undefined") {
  // Браузер підтримує ClipboardItem на рівні JavaScript API
}

if (ClipboardItem.supports("text/html")) {
  // Формат text/html заявлений як підтримуваний
}

async function getClipboardPermission() {
  if (!navigator.permissions) {
    return "unknown";
  }

  try {
    const permission = await navigator.permissions.query({
      name: "clipboard-read"
    });

    return permission.state;
  } catch {
    return "unknown";
  }
}

<iframe
  src="https://example.test/editor"
  allow="clipboard-read; clipboard-write">
</iframe>

navigator.geolocation.getCurrentPosition(success, error, options);
navigator.geolocation.watchPosition(success, error, options);
navigator.geolocation.clearWatch(watchId);

navigator.geolocation.getCurrentPosition(
  (position) => {
    console.log(position.coords.latitude);
    console.log(position.coords.longitude);
  },
  (error) => {
    console.error(error.code, error.message);
  }
);

{
  coords: {
    latitude: 50.4501,
    longitude: 30.5234,
    accuracy: 25,
    altitude: null,
    altitudeAccuracy: null,
    heading: null,
    speed: null
  },
  timestamp: 1710000000000
}

const options = {
  enableHighAccuracy: true,
  timeout: 10000,
  maximumAge: 60000
};

navigator.geolocation.getCurrentPosition(
  handlePosition,
  handleError,
  options
);

{ timeout: 10000 }

{ maximumAge: 60000 }

function handleGeolocationError(error) {
  switch (error.code) {
    case error.PERMISSION_DENIED:
      console.error("Користувач заборонив доступ до геолокації");
      break;

    case error.POSITION_UNAVAILABLE:
      console.error("Інформація про позицію недоступна");
      break;

    case error.TIMEOUT:
      console.error("Час очікування геолокації завершився");
      break;

    default:
      console.error("Невідома помилка геолокації");
  }
}

const watchId = navigator.geolocation.watchPosition(
  (position) => {
    console.log(position.coords.latitude);
    console.log(position.coords.longitude);
  },
  handleGeolocationError,
  {
    enableHighAccuracy: true,
    timeout: 15000,
    maximumAge: 5000
  }
);

navigator.geolocation.clearWatch(watchId);

button.addEventListener("click", () => {
  navigator.geolocation.getCurrentPosition(
    showPosition,
    showError
  );
});

async function getGeolocationPermission() {
  if (!navigator.permissions) {
    return "unknown";
  }

  try {
    const permission = await navigator.permissions.query({
      name: "geolocation"
    });

    return permission.state;
  } catch {
    return "unknown";
  }
}

async function observeGeolocationPermission() {
  if (!navigator.permissions) {
    return;
  }

  try {
    const permission = await navigator.permissions.query({
      name: "geolocation"
    });

    permission.addEventListener("change", () => {
      console.log("Новий стан дозволу:", permission.state);
    });
  } catch {
    // Певні браузери не підтримують перевірку цього дозволу
  }
}

<!doctype html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Clipboard та Geolocation</title>
</head>
<body>
  <h1>Доступ до системних API</h1>

  <section>
    <h2>Буфер обміну</h2>

    <textarea id="clipboard-text" rows="4" cols="50">
Текст для перевірки Clipboard API
    </textarea>

    <div>
      <button id="copy-button" type="button">Скопіювати</button>
      <button id="paste-button" type="button">Вставити</button>
    </div>

    <p id="clipboard-status" role="status"></p>
  </section>

  <section>
    <h2>Геолокація</h2>

    <button id="location-button" type="button">
      Отримати поточну позицію
    </button>

    <button id="watch-button" type="button">
      Почати відстеження
    </button>

    <button id="stop-watch-button" type="button" disabled>
      Зупинити відстеження
    </button>

    <pre id="location-output"></pre>
  </section>

  <script>
    const clipboardText = document.querySelector("#clipboard-text");
    const clipboardStatus = document.querySelector("#clipboard-status");

    const locationButton = document.querySelector("#location-button");
    const watchButton = document.querySelector("#watch-button");
    const stopWatchButton = document.querySelector("#stop-watch-button");
    const locationOutput = document.querySelector("#location-output");

    let watchId = null;

    function setClipboardStatus(text) {
      clipboardStatus.textContent = text;
    }

    document.querySelector("#copy-button").addEventListener("click", async () => {
      if (!navigator.clipboard) {
        setClipboardStatus("Clipboard API недоступний у цьому контексті");
        return;
      }

      try {
        await navigator.clipboard.writeText(clipboardText.value);
        setClipboardStatus("Текст скопійовано");
      } catch (error) {
        setClipboardStatus("Копіювання заборонено або не вдалося");
        console.error("Помилка запису в буфер обміну:", error);
      }
    });

    document.querySelector("#paste-button").addEventListener("click", async () => {
      if (!navigator.clipboard) {
        setClipboardStatus("Clipboard API недоступний у цьому контексті");
        return;
      }

      try {
        clipboardText.value = await navigator.clipboard.readText();
        setClipboardStatus("Текст прочитано з буфера обміну");
      } catch (error) {
        if (error.name === "NotAllowedError") {
          setClipboardStatus("Браузер не дозволив читання буфера обміну");
        } else {
          setClipboardStatus("Не вдалося прочитати буфер обміну");
        }

        console.error("Помилка читання з буфера обміну:", error);
      }
    });

    function renderPosition(position) {
      const { latitude, longitude, accuracy } = position.coords;

      locationOutput.textContent = [
        `Широта: ${latitude}`,
        `Довгота: ${longitude}`,
        `Точність: приблизно ${Math.round(accuracy)} м`,
        `Час: ${new Date(position.timestamp).toLocaleString("uk-UA")}`
      ].join("\n");
    }

    function renderGeolocationError(error) {
      const messages = {
        [error.PERMISSION_DENIED]:
          "Доступ до геолокації заборонено користувачем або браузером.",
        [error.POSITION_UNAVAILABLE]:
          "Поточну позицію не вдалося визначити.",
        [error.TIMEOUT]:
          "Час очікування позиції завершився."
      };

      locationOutput.textContent =
        messages[error.code] || "Сталася невідома помилка геолокації.";

      console.error("Помилка геолокації:", error);
    }

    const geolocationOptions = {
      enableHighAccuracy: false,
      timeout: 10000,
      maximumAge: 60000
    };

    locationButton.addEventListener("click", () => {
      if (!navigator.geolocation) {
        locationOutput.textContent =
          "Geolocation API не підтримується цим браузером.";
        return;
      }

      locationOutput.textContent = "Отримання позиції...";

      navigator.geolocation.getCurrentPosition(
        renderPosition,
        renderGeolocationError,
        geolocationOptions
      );
    });

    watchButton.addEventListener("click", () => {
      if (!navigator.geolocation) {
        locationOutput.textContent =
          "Geolocation API не підтримується цим браузером.";
        return;
      }

      if (watchId !== null) {
        return;
      }

      locationOutput.textContent = "Відстеження позиції запущено.";

      watchId = navigator.geolocation.watchPosition(
        renderPosition,
        renderGeolocationError,
        {
          enableHighAccuracy: true,
          timeout: 15000,
          maximumAge: 5000
        }
      );

      watchButton.disabled = true;
      stopWatchButton.disabled = false;
    });

    stopWatchButton.addEventListener("click", () => {
      if (watchId === null) {
        return;
      }

      navigator.geolocation.clearWatch(watchId);
      watchId = null;

      locationOutput.textContent = "Відстеження позиції зупинено.";
      watchButton.disabled = false;
      stopWatchButton.disabled = true;
    });
  </script>
</body>
</html>

result.innerHTML = await navigator.clipboard.readText();

result.textContent = await navigator.clipboard.readText();

function getGeolocationErrorMessage(error) {
  switch (error.code) {
    case 1:
      return "Користувач заборонив доступ до геолокації.";
    case 2:
      return "Позиція тимчасово недоступна.";
    case 3:
      return "Не вдалося отримати позицію вчасно.";
    default:
      return "Невідома помилка.";
  }
}

function getClipboardErrorMessage(error) {
  if (error?.name === "NotAllowedError") {
    return "Операція потребує дозволу або дії користувача.";
  }

  if (error?.name === "NotFoundError") {
    return "У буфері обміну немає потрібного формату.";
  }

  return "Операція з буфером обміну не виконана.";
}

const clipboardSupported = Boolean(navigator.clipboard);
const geolocationSupported = Boolean(navigator.geolocation);

navigator.clipboard.writeText("Текст");

navigator.clipboard
  .writeText("Текст")
  .catch((error) => {
    console.error(error);
  });

if (position.coords.accuracy > 1000) {
  console.warn("Координати надто неточні для цієї операції");
}