Puppertino

After installing via NPM, you can import the framework or individual components into your build pipeline.

// --- JavaScript/TypeScript --- 

// Import the full framework
import '@codedgar/puppertino';

// Import individual components (modular approach)
import '@codedgar/puppertino/buttons';
import '@codedgar/puppertino/modals';
import '@codedgar/puppertino/forms';
import '@codedgar/puppertino/tabs';

// Import JavaScript modules (ES6)
import '@codedgar/puppertino/js/modals.js';
import '@codedgar/puppertino/js/dakmode_manager.js';
import '@codedgar/puppertino/js/tabs.js';

// Import JavaScript modules (CommonJS)
const modals = require('@codedgar/puppertino/src/js/modals.js');

// --- CSS --- 

// Import full framework
@import '@codedgar/puppertino';

// Import individual components
@import '@codedgar/puppertino/buttons';
@import '@codedgar/puppertino/modals';
@import '@codedgar/puppertino/dark-mode';

You can trigger the opening and closing of action cards (modals) using specific HTML data attributes. This allows you to manage UI actions without writing custom JavaScript for every button.

Open an Action Card

Add the data-p-open-actions attribute to a button or element. The value of this attribute must be a valid CSS selector (e.g., an ID or class) for the action card you wish to display.

Close an Action Card

Add the data-p-cancel-action attribute to a button or element to trigger the closing of the currently active action card.

Close on Outside Click

To allow a user to close an action card by clicking the background overlay, add the attribute data-p-close-on-outside="true" to the action card container (which should have the class .p-action-big-container).

<!-- Triggering an action card with ID 'my-action-card' -->
<button data-p-open-actions="#my-action-card">Open Actions</button>

<!-- The action card itself -->
<div id="my-action-card" class="p-action-big-container" data-p-close-on-outside="true" aria-hidden="true">
  <p>Action Content</p>
  <!-- Button to close the card -->
  <button data-p-cancel-action>Cancel</button>
</div>

<!-- The background overlay (required for the manager to work) -->
<div class="p-action-background"></div>

If you need to control modals via JavaScript instead of relying on data attributes, use the methods available on the PuppertinoModalManager instance.

Methods

• openModal(selector): Opens the modal matching the provided CSS selector. It adds the active class to the modal, nowactive to the background, and p-modal-opened to the body.
• closeActiveModal(): Closes whichever modal currently has the .p-modal.active class.
• closeModal(selector): Closes a specific modal matching the provided selector, provided it is currently active.
• isModalOpen(selector): Returns true if the modal matching the selector has the active class, otherwise false.

// Open a specific modal
PuppertinoModalManager.openModal('#login-modal');

// Check if a modal is open
if (PuppertinoModalManager.isModalOpen('#login-modal')) {
  console.log('Login modal is visible');
}

// Close the currently active modal
PuppertinoModalManager.closeActiveModal();

// Close a specific modal
PuppertinoModalManager.closeModal('#login-modal');

The PuppertinoActionsManager instance provides a programmatic API to manage the state of action cards. This is useful when you need to open or close modals based on application logic rather than direct user clicks.

Methods

• openAction(selector): Opens the action card matching the provided CSS selector. It adds the active class to the card, sets aria-hidden="false", and activates the background overlay.
• closeActiveAction(): Closes whichever action card currently has the .active class.
• closeAction(selector): Closes a specific action card matching the selector, provided it is currently active.
• isActionOpen(selector): Returns true if the action card matching the selector is currently open (has the .active class), otherwise false.

import { PuppertinoActionsManager } from './path/to/puppertino/actions.js';

// Check if a specific action is open
if (PuppertinoActionsManager.isActionOpen('#settings-menu')) {
  console.log('Settings are open');
}

// Programmatically open an action
PuppertinoActionsManager.openAction('#settings-menu');

// Programmatically close the active action
PuppertinoActionsManager.closeActiveAction();

The PuppertinoTabsMan class manages tabbed UI components by handling click events for both desktop and mobile layouts. It automatically initializes upon instantiation and attaches listeners to specific DOM structures.

Desktop Tabs

Desktop tabs are managed via a container with the class .p-tabs-container. The manager expects:

• A .p-tabs element containing the tab triggers.
• A .p-panels element containing the content panels.
• The manager uses the container's id to target specific tab sets.

Mobile Tabs

Mobile tabs are managed via elements with the class .p-mobile-tabs.

• Triggers can be <a> or <button> elements.
• Use the data-p-mobile-toggle attribute on the trigger to specify the selector of the panel to show.
• The manager toggles the .active class on the trigger and the target panel.
• It expects a content container with the class .p-mobile-tabs--content.active to manage visibility transitions.

// The instance is automatically initialized when the script is loaded
// but you can interact with the class logic if needed.

// Desktop HTML Structure Example:
/*
<div id="my-tabs" class="p-tabs-container">
  <div class="p-tabs">
    <button>Tab 1</button>
    <button>Tab 2</button>
  </div>
  <div class="p-panels">
    <div class="panel">Content 1</div>
    <div class="panel">Content 2</div>
  </div>
</div>
*/

// Mobile HTML Structure Example:
/*
<div class="p-mobile-tabs">
  <button data-p-mobile-toggle="#panel-1" class="active">Tab 1</button>
  <button data-p-mobile-toggle="#panel-2">Tab 2</button>
</div>

<div class="p-mobile-tabs--content active">
  <div id="panel-1">Content 1</div>
  <div id="panel-2">Content 2</div>
</div>
*/