oleg
/
Puppertino
spiegel van https://github.com/codedgar/Puppertino.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Modals - Puppertino Framework</title>
    <link
      href="https://rsms.me/inter/inter.css"
      rel="stylesheet"
    />
    
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css" />

    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <link rel="stylesheet" type="text/css" href="doc.css" />
    <meta
      name="description"
      content="This is the documentation for Modals on the Puppertino Framework, a framework that mimics Apple's design, woof!"
    />
    <link rel="icon" type="image/png" href="../landing-images/doggo.png" />
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-176821843-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-176821843-1');
</script>
  </head>
  <body class="p-layout">
    <div class="p-modal-background">
      <div class="p-modal" id="normal-modal" data-p-close-on-outside="true">
        <h2>Hello!</h2>
        <p>This modal has 3 buttons, please don't add more than 3 :)</p>
        <div class="p-modal-button-container">
          <a href="#"><strong>Confirm</strong></a>
          <a href="#">Settings</a>
          <button data-p-cancel>Cancel</button>
        </div>
      </div>

      <div class="p-modal" id="two-button-modal" data-p-close-on-outside="true">
        <h2>Alert!</h2>
        <p>This modals has 2 buttons!</p>
        <div class="p-modal-button-container">
          <a href="#" data-p-cancel>OK</a>
          <a href="#" data-p-cancel>Cancel</a>
        </div>
      </div>

      <div class="p-modal" id="one-button-modal">
        <h2>Alert!</h2>
        <p>
          Hope you are having an amazing day :)<br />
          Also this modal does not close when you click outside, you have to
          click the OK button
        </p>
        <div class="p-modal-button-container">
          <a href="#" data-p-cancel>OK</a>
        </div>
      </div>

      <div class="p-modal" id="example-modal">
        <h2>Hey!</h2>
        <p>
          This is an example modal! It does not feature the attribute
          data-p-close-on-outside, so it's not gonna close if you click outside
          of it
        </p>
        <div class="p-modal-button-container">
          <a href="#" data-p-cancel>OK</a>
        </div>
      </div>
    </div>

    <div class="route">
      <a
        href="https://codedgar.github.io/Puppertino/"
        class="p-btn p-btn-scope p-btn-scope-unactive"
        >Puppertino</a
      >
      <p>/</p>
      <a href="index.html" class="p-btn p-btn-scope p-btn-scope-unactive"
        >Examples</a
      >
      <p>/</p>
      <a href="modals.html" class="p-btn p-btn-scope">Modals</a>
    </div>
    <h1>Modals</h1>
    <div class="master">
      <p>
        Modals are iconic in iOS design, making them a natural addition to Puppertino. Unlike macOS-style dialog boxes (planned for future versions), these modals are currently categorized under mobile components.
        <br><br>To implement modals, you’ll need:
        <a
          href="https://github.com/codedgar/Puppertino/blob/master/dist/css/modals.css"
          target="_blank"
          >Modals CSS</a
        >
        and
        <a
          href="https://github.com/codedgar/Puppertino/blob/master/src/js/modals.js"
          target="_blank"
          >Modals JS</a
        >
        alternatively you can use the
        <a
          href="https://github.com/codedgar/Puppertino/blob/master/dist/css/newfull.css"
          target="_blank"
          >Full CSS</a
        >
        (Not recommended if you are just going to use this component). Please be
        aware that you still need to download the JS of Modals, since at the
        time, there's no full.js
      </p>

      <div class="talk-about-it">
        <h3>Note on Previous Versions</h3>
        <p>In earlier versions of Puppertino, modal actions were exclusively links. In the latest version, you now have the option to use either <strong>Buttons</strong> or <strong>Links</strong>, offering greater flexibility for appropriate actions while maintaining proper semantics and accessibility.</p>
      </div>

      <div class="talk-about-it">
        <h2>Modals: Limitations</h2>
        <p>
          Puppertino modals are designed for simplicity and optimized user experience. However, there are current limitations to be aware of:
        </p>
        <ul>
          <li>Adding form elements within modals is <strong>not supported</strong> (planned for the next release).</li>
          <li>Opening multiple modals simultaneously is not supported to maintain usability.</li>
        </ul>

        <button data-p-open-modal="#normal-modal" class="p-btn">
          Three button modal
        </button>
        <button data-p-open-modal="#two-button-modal" class="p-btn">
          Two button modal
        </button>
        <button data-p-open-modal="#one-button-modal" class="p-btn">
          One button modal
        </button>
      </div>
    </div>
    <div class="talk-about-it">
      <h2>First steps.</h2>
      <p>
        To use modals, we need to have a master div where every modal will be
        located, as such:
      </p>
      <div class="code">
        <pre>
				<code class="html">
&#60;div class="p-modal-background">
	&#60;!-- Your modals will be here -->
&#60;/div>
				</code>
			</pre>
      </div>
    </div>

    <div class="talk-about-it">
      <h2>General usage.</h2>
      <p>
        To use modals, we need 2 principal components:
        <strong>A trigger for the modal</strong> and
        <strong>the modal itself</strong>. For the button to work, you need to
        add the attribute <code class="code">data-p-open-modal</code> followed
        by the ID of the actual modal. The actual modal can have from 1 to 3
        buttons, and if you add the attribute
        <code class="code">data-p-close-on-outside="true"</code> the modal will
        close if you click outside of it. Also, modals appear a little bit at
        the bottom in lower resolutions, just to make them easier to tap in
        mobile devices.<br />
        Also, if the <code class="code">data-p-cancel</code> attribute is
        present on a button of the modal, the modal will close when the user
        clicks the button.
      </p>

      <button data-p-open-modal="#example-modal" class="p-btn">
        Toggle Modal
      </button>

      <p>Usage:</p>
      <div class="code">
        <pre>
				<code class="html">
&#60;!-- The button that toggles the modal -->

&#60;a href="#" class="p-btn" data-p-open-modal="#example-modal">Default&#60;/a>


&#60;!-- Modal container, all the modals you use should be inside of it. -->

&#60;div class="p-modal-background">

	&#60;!-- Your modals will be here -->
	&#60;div class="p-modal" id="example-modal">
		&#60;h2>Hey!&#60;/h2>
		&#60;p>This is an example modal!&#60;/p>
		&#60;div class="p-modal-button-container">
			&#60;button data-p-cancel>OK&#60;/button>
		&#60;/div>
	&#60;/div>

&#60;/div>
				</code>
			</pre>
      </div>
    </div>

    <div class="talk-about-it">
      <h2>Several Buttons in a modal.</h2>
      <p>
        Modals support having several buttons on them without breaking, but due
        to composition, you should not add more than 3 buttons, but if you need them, you are free to put them. To add more buttons, the
        only thing you need is to add another
        <code class="code">&#60;a></code> element inside the Modal button
        container (<code class="code"
          >&#60;div class="p-modal-button-container"></code
        >).
      </p>

      <button data-p-open-modal="#two-button-modal" class="p-btn">
        Toggle Modal
      </button>

      <p>Usage:</p>
      <div class="code">
        <pre>
				<code class="html">

&#60;div class="p-modal-button-container">
	&#60;a href="#" data-p-cancel>OK&#60;/a>
	&#60;a href="#">Settings&#60;/a>
&#60;/div>

				</code>
			</pre>
      </div>
    </div>

    <div class="talk-about-it">
      <section id="api-methods">
        <h2>JS API Methods</h2>
        <p>In newer versions, the old JavaScript has been replaced with the PuppertinoModalMan class—a lightweight utility for managing modals within the Puppertino framework.
          <br><br>
          While the way you use modals remains unchanged thanks to automatic initialization, this class introduces programmatic methods for Opening or Closing modals, and handling user interactions. <br><br> Here's what currently possible using Puppertino's Modal Manager</p>
        <article id="open-modal" class="d-flex align-bottom mt-4">
          <div class="flex-1 w-100">
            <h3>openModal(selector)</h3>
            <p>Opens the modal specified by the CSS selector.</p>
            <p><strong>Parameters:</strong></p>
            <ul>
              <li><code class="code">selector</code> (string): CSS selector for the modal to open.</li>
            </ul>
          </div>
          <div class="flex-1 w-100">
            <p><strong>Usage:</strong></p>

          <div class="code" >
<pre>
  <code>  
PuppertinoModalManager.openModal("#exampleModal");
</code>
</pre>
</div>
</div>

        </article>
      
        <article id="close-active-modal" class="d-flex align-bottom mt-4">
          <div class="flex-1 w-100">
            <h3>closeActiveModal()</h3>
            <p>Closes the currently active (open) modal.</p>
          </div>
          <div class="flex-1 w-100">
            <p><strong>Usage:</strong></p>
            <div class="code">
<pre>
  <code>
PuppertinoModalManager.closeActiveModal();
</code>
</pre>
            </div>
          </div>
          
        </article>
      
        <article id="close-modal" class="d-flex align-bottom mt-4">
          <div class="flex-1 w-100">
            <h3>closeModal(selector)</h3>
            <p>Closes a specific modal specified by the CSS selector.</p>
            <p><strong>Parameters:</strong></p>
            <ul>
              <li><code class="code">selector</code> (string): CSS selector for the modal to close.</li>
            </ul>
          </div>
          <div class="flex-1 w-100">
            <p><strong>Usage:</strong></p>
            <div class="code">

<pre>
  <code>
PuppertinoModalManager.closeModal("#exampleModal");
  </code>
</pre>

</div>

          </div>

        </article>
      
        <article id="is-modal-open" class="d-flex align-bottom mt-4">
          <div class="flex-1 w-100">
            <h3>isModalOpen(selector)</h3>
            <p>Checks if a specific modal is currently open.</p>
            <p><strong>Parameters:</strong></p>
            <ul>
              <li><code class="code">selector</code> (string): CSS selector for the modal to check.</li>
            </ul>
            <p><strong>Returns:</strong></p>
            <ul>
              <li><code class="code">true</code> if the modal is open, <code>false</code> otherwise.</li>
            </ul>
          </div>
          <div class="flex-1 w-100">
            <p><strong>Usage:</strong></p>
            <div class="code">
<pre>
  <code>
if (PuppertinoModalManager.isModalOpen("#exampleModal")) {
  console.log("The modal is open.");
}
</code>
</pre>
            </div>
            
          </div>
          
        </article>
      </section>
    </div>

    <div class="talk-about-it">
      <h2>Support for blur on Firefox.</h2>
      <p>
        Modals use a backdrop-filter, which is currently supported by Firefox
        but you need to manually activate it, but in Puppertino there's a
        fallback, and for users who don't have active the backdrop-filter in
        Firefox, the modal will appear completely white.
      </p>
    </div>
 
</body>

  <script src="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/src/js/dakmode_manager.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/src/js/modals.js"></script>
  <script
    type="text/javascript"
    src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js"
  ></script>
  <script>
    hljs.initHighlightingOnLoad();
  </script>
</html>