Redoc: Expand all by default

[karlismelderis]

Can you please add an option to generate file where all responses are expanded by default?
I think it duplicates this -https://github.com/Rebilly/ReDoc/issues/211

Problem is that we still need to provide PDF file of spec (due to internal procedures) and it's painful to click through API spec and expand all before saving to PDF :)

[karlismelderis]

just to clarify I'm looking to expand both "Responses" and "Response Samples"
Response samples might be trickiest as all samples need to be visible

[jsamr]

@karlismelderis In the meantime, you can just do:

document.querySelectorAll('div').forEach((div) => div.click())

in the browser console.

[SaraivaDaniel]

I also have the need to expand all elements in the response schema (not examples). I tried the comment by @jsamr above, but it only expanded first level.

To expand all definitions, I've included the following script after redoc initialization:

// inspired by https://gist.github.com/stephenorem/5162a871c5d96bfa522e31ede6205e51
function getMaxDepth(elem) {
  var maxDepth = 0,
      d,
      parents;

  document.querySelectorAll(elem).forEach((e) => {
    parents = getParents(e);
    d = parents ? parents.length + 1 : 1;
    maxDepth = d > maxDepth ? d : maxDepth;
  });

  return maxDepth;
}

// https://gomakethings.com/how-to-get-all-parent-elements-with-vanilla-javascript/
var getParents = function (elem) {
    // Set up a parent array
    var parents = [];

    // Push each parent element to the array
    for ( ; elem && elem !== document; elem = elem.parentNode ) {
        parents.push(elem);
    }

    // Return our parent array
    return parents;
};

document.querySelectorAll('div').forEach((div) => div.click());
max = getMaxDepth('td');
setTimeout(function() {
    for (i = 0; i <= max; i++) {
        document.querySelectorAll('tr:not(.expanded) > td').forEach((td) => td.click());
    }
}, 1000); 
// the timeout above is needed to let the divs be expanded first (didn't care to figure out right now why)

[JohnGoldInc]

//My quick fix in just pasting into Console

async function loadScript(url) {
let response = await fetch(url);
let script = await response.text();
eval(script);
}

let scriptUrl = "https://code.jquery.com/jquery-3.3.1.min.js"
loadScript(scriptUrl);
$('div.zippy-title').click();
$('span.param-name-wrap').click();

[RomanHotsiy]

Duplicate of #211

note that you can expand all responses by using `expandResponses: "all`` setting.
There is no corresponding option for schemas yet though.

[benbro]

What's the difference between expand all responses and expand schemas? Isn't the schema part of the response?

I've tried adding expand-responses="all" to the redoc tag but the items array inside my response example is still collapsed:

<redoc spec-url="openapi.yaml" expand-responses="all"></redoc>

[RomanHotsiy]

Collapsed responses:

Expanded Responses with collapsed subschemas:

Expanded Responses with expanded subschemas:

[bohnman]

None of these solutions seem to expand deeply nested schemas. My solution is the following:

    var expandInterval = setInterval(function() {
        document.querySelectorAll('tr:not(.expanded) > td').forEach((td) => td.click())
    }, 100);

    setTimeout(function() {
        clearInterval(expandInterval)
    }, 3000);

[rhatfield-bushel]

Here's what I think is a slightly more elegant solution, figured I'd share. It's still a work around, but it doesn't cause any visible expanding, and updates when oneOf sections change.

This works in an almost recursive fashion, with each click event causing a mutation and in turn another click event (and so on).

One slight side effect, the schema sections are no longer collapsable, but for my purposes that's acceptable.

<redoc></redoc>
<script src="https://cdn.jsdelivr.net/npm/redoc@next/bundles/redoc.standalone.js"></script>
<script>
  var expand = () => {
    // this likely could be narrowed, but this finds all table cells,
    // and clicks them just in case.
    document
      .querySelectorAll("tr:not(.expanded) > td")
      .forEach(td => td.click());
  };

  var observe = ({ elements, action, types }) => {
    var ddObserver = new MutationObserver(mutations => action(mutations));
    elements.forEach(dd => ddObserver.observe(dd, types));
  };

  var onLoadCallback = err => {
    // first, watch all buttons to see when the selection changes
    // then, watch the table and expand all subitems
    var observables = [
      {
        elements: document.querySelectorAll(
          ".api-content>div>div>div>div>ul>li"
        ),
        action: mutations => mutations.forEach(m => expand()),
        types: {
          attributes: true
        }
      },
      {
        elements: document.querySelectorAll(
          ".api-content>div>div>div>div>table"
        ),
        action: expand,
        types: {
          attributes: true,
          subtree: true
        }
      }
    ];

    observables.forEach(o => observe(o));

    // once for good measure
    expand();
  };

  Redoc.init(
    "openapi.yaml",
    {
      jsonSampleExpandLevel: "all"
    },
    document.querySelector("redoc"),
    onLoadCallback
  );
</script>