script.js

(function () {
'use strict';

// Public CORS proxy. allorigins is the most boring/stable free option;
// expects the target URL as a query parameter.
const cors_proxy_url = "https://api.allorigins.win/raw?url=";

var _scalarInstance = null;

// State lives in the query string (?url=...) so Scalar can keep using
// location.hash for its own deep-link navigation.
function getParams() {
  return new URLSearchParams(window.location.search);
}

function setParams(params) {
  var qs = params.toString();
  var newUrl = window.location.pathname + (qs ? '?' + qs : '') + window.location.hash;
  history.replaceState(null, '', newUrl);
}

function getParam(key) {
  return getParams().get(key);
}

function syncToggleLabel() {
  var btn = document.getElementById('toggle-form');
  if (!btn) return;
  btn.textContent = document.body.classList.contains('from_url') ? 'Show form' : 'Hide form';
}

function setStatus(msg, isError) {
  var el = document.getElementById('status');
  el.textContent = msg || '';
  el.classList.toggle('error', !!isError);
}

function renderScalar(config) {
  var app = document.getElementById('app');
  if (_scalarInstance && typeof _scalarInstance.destroy === 'function') {
    try { _scalarInstance.destroy(); } catch (e) { /* ignore */ }
  }
  app.innerHTML = '';
  var fullConfig = Object.assign({
    darkMode: false,
    forceDarkModeState: 'light'
  }, config);
  _scalarInstance = Scalar.createApiReference('#app', fullConfig);
  setStatus('');
  document.body.classList.add('from_url');
  syncToggleLabel();
  showShareLink();
}

function showShareLink() {
  var link = document.getElementById('share-link');
  if (link) {
    link.hidden = false;
    link.href = window.location.href;
  }
}

function hideShareLink() {
  var link = document.getElementById('share-link');
  if (link) link.hidden = true;
}

function createShareUrl(url, cors, file) {
  var params = getParams();
  if (url) params.set('url', url); else params.delete('url');
  if (file) params.set('file', file); else params.delete('file');
  if (cors) params.set('cors', 'true'); else params.delete('cors');
  setParams(params);
  showShareLink();
}

// Browsers cap the URL length around 32 KB; base64 of the file is the dominant
// component. ~24000 base64 chars ≈ 18 KB raw, which keeps the share URL safe.
const MAX_SHAREABLE_BASE64 = 24000;

function loadSelectedFile() {
  var input = document.getElementById('myfile');
  if (!input.files || !input.files[0]) {
    setStatus('No file selected.', true);
    return;
  }
  var reader = new FileReader();
  reader.onload = function () {
    const result = reader.result.split('base64,')[1];
    if (result.length > MAX_SHAREABLE_BASE64) {
      // Too big to round-trip via the URL; render but skip the share link.
      hideShareLink();
      setStatus('File is too large to share via URL; rendering locally only.');
    } else {
      createShareUrl(null, false, result);
    }
    loadSpecFromBase64(result);
  };
  reader.readAsDataURL(input.files[0]);
}

function loadSpecFromBase64(input) {
  const bytes = Uint8Array.from(atob(input), c => c.charCodeAt(0));
  loadSpecText(new TextDecoder('utf-8').decode(bytes));
}

function loadSpecText(text) {
  if (!text) return;
  renderScalar({ content: text });
}

// Public CORS proxies sometimes return short plaintext error blobs
// (e.g. "error code: 522") with a 200 status. Reject those before
// handing them to Scalar, which would fail with "Invalid YAML object".
function looksLikeSpec(text) {
  if (!text) return false;
  var trimmed = text.replace(/^/, '').trim();
  if (!trimmed) return false;
  if (/^error code:\s*\d+/i.test(trimmed)) return false;
  if (trimmed.length < 16) return false;
  return true;
}

function fetchText(url) {
  return fetch(url).then(function(response) {
    if (!response.ok) {
      var err = new Error('HTTP ' + response.status);
      err.httpStatus = response.status;
      throw err;
    }
    return response.text();
  });
}

// Only network/CORS failures are worth retrying via the proxy.
// HTTP error responses (404, 500, …) reached the origin successfully
// and represent a definitive answer.
function isLikelyCorsError(err) {
  return !err.httpStatus;
}

function fetchViaProxy(url) {
  return fetchText(cors_proxy_url + encodeURIComponent(url))
    .then(function(text) {
      if (!looksLikeSpec(text)) {
        var preview = text ? text.trim().slice(0, 80) : '(empty)';
        throw new Error('CORS proxy returned invalid response: ' + preview);
      }
      return text;
    });
}

// Update checkbox + URL params + share link to reflect what was actually used.
function applyUrlState(url, cors) {
  document.getElementById('cors-enabled').checked = !!cors;
  var params = getParams();
  params.set('url', url);
  params.delete('file');
  if (cors) params.set('cors', 'true'); else params.delete('cors');
  setParams(params);
  showShareLink();
}

function loadSpecFromUrl(url, cors) {
  if (!url) return;
  if (cors) {
    setStatus('Fetching ' + url + ' via CORS proxy...');
    fetchViaProxy(url)
      .then(function(text) {
        applyUrlState(url, true);
        loadSpecText(text);
      })
      .catch(function(err) {
        console.error('Failed to fetch OpenAPI spec via proxy:', err);
        setStatus('Failed to fetch via proxy: ' + err.message, true);
      });
    return;
  }
  setStatus('Fetching ' + url + '...');
  fetchText(url)
    .then(function(text) {
      if (!looksLikeSpec(text)) throw new Error('Response did not look like a spec');
      applyUrlState(url, false);
      loadSpecText(text);
    })
    .catch(function(err) {
      if (!isLikelyCorsError(err)) {
        console.error('Failed to fetch OpenAPI spec:', err);
        setStatus('Failed to fetch: ' + err.message, true);
        return;
      }
      console.warn('Direct fetch failed, retrying via CORS proxy:', err);
      setStatus('Direct fetch failed (' + err.message + '); retrying via CORS proxy...');
      fetchViaProxy(url)
        .then(function(text) {
          applyUrlState(url, true);
          loadSpecText(text);
        })
        .catch(function(err2) {
          console.error('Failed to fetch OpenAPI spec:', err2);
          setStatus('Failed to fetch: ' + err2.message, true);
        });
    });
}

function loadOpenApi() {
  const p_url = getParam('url');
  const p_file = getParam('file');
  const p_cors = getParam('cors') === 'true';

  if (p_cors) {
    document.getElementById('cors-enabled').checked = true;
  }
  if (p_url) {
    document.getElementById('specsource').value = p_url;
    loadSpecFromUrl(p_url, p_cors);
    showShareLink();
  } else if (p_file) {
    loadSpecFromBase64(p_file);
    showShareLink();
  }
}

function bindEventListeners() {
  document.getElementById('fetch-form').addEventListener('submit', function(e) {
    e.preventDefault();
    var corsOn = document.getElementById('cors-enabled').checked;
    var url = document.getElementById('specsource').value.trim();
    if (!url) return;
    loadSpecFromUrl(url, corsOn);
  });

  document.getElementById('load-file').addEventListener('click', loadSelectedFile);

  document.getElementById('toggle-form').addEventListener('click', function() {
    document.body.classList.toggle('from_url');
    syncToggleLabel();
  });

  document.getElementById('load-text').addEventListener('click', function() {
    var text = document.getElementById('spec-text').value.trim();
    if (!text) return;
    // Pasted text is too big for the URL; clear any url/file params.
    var params = getParams();
    params.delete('url');
    params.delete('file');
    params.delete('cors');
    setParams(params);
    // Pasted text isn't shareable via URL.
    hideShareLink();
    loadSpecText(text);
  });

  document.getElementById('reset').addEventListener('click', function() {
    document.getElementById('specsource').value = '';
    document.getElementById('spec-text').value = '';
    document.getElementById('myfile').value = '';
    document.getElementById('cors-enabled').checked = false;
    hideShareLink();
    document.body.classList.remove('from_url');
    syncToggleLabel();
    setStatus('');
    if (_scalarInstance && typeof _scalarInstance.destroy === 'function') {
      try { _scalarInstance.destroy(); } catch (e) { /* ignore */ }
    }
    _scalarInstance = null;
    document.getElementById('app').innerHTML = '';
    history.replaceState(null, '', window.location.pathname);
  });
}

document.addEventListener('DOMContentLoaded', function() {
  bindEventListeners();
  loadOpenApi();
});

})();