<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />

    <title>reveal.js - Test Iframes</title>

    <link rel="stylesheet" href="../dist/reveal.css" />
    <link rel="stylesheet" href="../node_modules/qunit/qunit/qunit.css" />
    <script src="../node_modules/qunit/qunit/qunit.js"></script>
  </head>

  <body style="overflow: auto">
    <div id="qunit"></div>
    <div id="qunit-fixture"></div>

    <div class="deck1">
      <div class="reveal" style="display: none">
        <div class="slides">
          <section>1.1</section>
          <section>1.2</section>
          <section>1.3</section>
        </div>
      </div>
    </div>

    <div class="deck2">
      <div class="reveal" style="display: none">
        <div class="slides">
          <section>2.1</section>
          <section>2.2</section>
          <section>2.3</section>
        </div>
      </div>
    </div>

    <script src="../dist/reveal.js"></script>
    <script src="../plugin/zoom/zoom.js"></script>
    <script>
      QUnit.config.testTimeout = 30000;
      QUnit.module("Multiple reveal.js instances");

      let r1 = new Reveal(document.querySelector(".deck1 .reveal"), {
        embedded: true,
        keyboard: true,
        plugins: [RevealZoom()],
      });
      r1.initialize();

      let r2 = new Reveal(document.querySelector(".deck2 .reveal"), {
        embedded: true,
        keyboard: false,
      });
      r2.initialize();

      QUnit.test("Can make independent changes", function (assert) {
        r1.slide(1);
        r2.slide(2);
        assert.strictEqual(r1.getCurrentSlide().textContent, "1.2");
        assert.strictEqual(r2.getCurrentSlide().textContent, "2.3");

        r2.toggleOverview(true);
        assert.strictEqual(r1.isOverview(), false);
        assert.strictEqual(r2.isOverview(), true);
        r2.toggleOverview(false);

        assert.strictEqual(r1.getConfig().keyboard, true);
        assert.strictEqual(r2.getConfig().keyboard, false);
      });

      QUnit.test("Can register plugins independently", function (assert) {
        assert.ok(r1.hasPlugin("zoom"));
        assert.notOk(r2.hasPlugin("zoom"));
      });
    </script>
  </body>
</html>