OOUILib
A library for quick deployment of UI components. It is needed when the components are used in the site. The library will continue to be updated, this is not its last build.
Install / Use
/learn @DKMFzF/OOUILibREADME
The library was created by accident. Initially, I created components in my pet-projects, then I realized that the components were moving from project to project, I started assembling them in one place, and as a result, this resulted in my micro library. There are a lot of similar libraries on the Internet, so this is just my vision of the layout of the UI (the implementation practically does not change from project to project). The library shows itself best in the architectural patterns of the MV group.
Documentation language
Navigation in documentation
- lib/ — project source files
- lib/Components/Chat — chat component folder
- lib/Components/Notification — the folder with the message component
- lib/Components/PopUpSelectionError — folder with the error selection component
- lib/ContentSwitcher — folder with the content switch component
- lib/FormValidation — folder with the form validation component
- lib/PopUp — folder with pop-up window components
- lib/ooui.ts — the main library file
- lib/UILib.ts — the main library lifecycle file
- lib/utils/utils.ts — a file with auxiliary functions
DISCLAIMER: The library is in its very first build, and it will later be added to the npm package infrastructure. At the moment, it is only available through explicit use in the project.
In order to use the library, you need to import it into your project, and all files in src/ (it is advisable to create a separate directory for this, for example: ``src/lib/'library file"`). After the files are imported, you can start creating components and use them in your project.
<h3 id="dwn-lib"> 1. Installing the library </h3>git clone https://github.com/DKMFzF/web-ui-library.git
// index.ts (located at the root of the project)
import {
UILib,
PopUp,
Tooltip,
Modal,
Dropdown,
FormValidator,
Accordion,
ContentSwitcher,
Gallery,
Slider,
Tabs,
AsyncDropdown,
PopUpNotification,
NotificationElement,
PopUpSelectionError,
Queue,
Chat,
} from './lib/ooui.ts';
Now you can use the components and functions from the library in your project. Here are some examples:
<h4 id="use-component-1"> 3.1 Using PopUp </h4> const popup = new PopUp();
popup.initAll(); // Initialization of all pop-up windows on the page
const tooltip = new Tooltip();
tooltip.init('[data-trigger-tooltip]', '[data-content-tooltip]'); // Initializing tooltips
const formValidator = new FormValidator();
formValidator.initAll(); // Initialization of validation of all forms on the page
const chat = new Chat({
nameFile: 'chat.html',
widthWindow: 400,
heightWindow: 600,
form: document.querySelector('#chat-form'), // User name input form
});
const popupNotification = new PopUpNotification();
popupNotification.addNotification('New notification!');
popupNotification.renderNotification(); // Notification display
4. HTML Settings
Some components (for example, PopUp, Tooltip, Dropdown) require a specific HTML structure to work. For example:
4.1 For PopUp
<button data-trigger-popup="myPopup">Open PopUp</button>
<div id="myPopup" data-content-popup>
<p>It's a pop-up window!</p>
</div>
4.2 For Tooltip:
<button data-trigger-tooltip="myTooltip">Point it at me</button>
<div id="myTooltip" data-content-tooltip>
<p>This is a tooltip!</p>
</div>
4.3 For FormVali
<form data-form>
<input type="text" class="form__input" required>
<button type="submit">Send</button>
</form>
5. Customize styles
Make sure that you have styles enabled for the components. For example, PopUp and Tooltip may require CSS classes such as widget_hidden, display_flex, and others.
.widget_hidden {
display: none;
}
.display_flex {
display: flex;
}
6. Using utilities You can use utilities like ensureElement, ensureAllElements, capitalizeFirst, and others in your code. For example:
import { ensureElement, capitalizeFirst } from 'your path to the library';
const element = ensureElement('#myElement'); // Getting the element
const capitalizedString = capitalizeFirst('hello'); // "Hello"
7. An example of full usage Here is an example of using multiple components together:
import { PopUp, Tooltip, FormValidator, Chat } from 'your way to the library';
// Initializing the PopUp
const popup = new PopUp();
popup.initAll();
// Initialization of the Tooltip
const tooltip = new Tooltip();
tooltip.init('[data-trigger-tooltip]', '[data-content-tooltip]');
// Initializing the FormValidator
const formValidator = new FormValidator();
formValidator.initAll();
// Initialization of Chat
const chat = new Chat({
nameFile: 'chat.html',
widthWindow: 400,
heightWindow: 600,
form: document.querySelector('#chat-form'),
});
This section describes all the components that are used in the library. The components are accompanied by UML diagrams that clearly show the relationships between the components. To reduce the space in some components , the visualization is reduced. This means that the component was described above and a repeat description was not required.
<h3 id="section-ui-framework"> Basic UI Framework (Core UI Library) </h3>An abstract class that serves as the basis for all UI components. It defines the basic methods for initializing interface elements and managing their state (showing, hiding, switching).
Methods:
initAll(): void— Initializes all UI components on the page.init(widget: SelectorElement | SelectorElement[], trigger: SelectorElement | SelectorElement[]): void— Initializes a specific component with the specified trigger.toggle(popup: HTMLElement): void— Switches the visibility of the popup element.show(popup: HTMLElement): void— Shows a popup element.hide(popup: HTMLElement): void— Hides the popup element.
How can it be used:
- Create new UI components that require visibility management.
- Implementation of common mechanisms for pop-up windows, tabs, modal windows and other interface elements.
UML component diagram
<p> <img width="100%" height="100%" src="./docs/base-class.png"> </p> <h3 id="section-popups-modals"> Popups and Elements (Popups & Modals) </h3>Class: PopUp
Description: A basic class for managing pop-up elements such as modal windows, drop-down lists, and tooltips. It defines methods for displaying pop-up elements and positioning them relative to triggers.
Methods:
initAll(): void— Initializes all PopUp elements.init(trigger: SelectorElement, popup: SelectorElement): void— Initializes a specific popup window.determineCoords(trigger: HTMLElement, popup: HTMLElement): void— Defines the coordinates of the popup window display relative to the trigger.- ```positioningElement(positionStr: string, coords: DOMRect, popupSize: DOMRect): PositionInterface`` — Calculates the final position of the window.
addBehavior(trigger: HTMLElement, popup: HTMLElement): void— Adds event handlers.
How can it be used:
- Managing modal windows in a web application.
- Display of popup hints or context menus on hover.
Class: Dropdown
Description: Extends PopUp functionality and implements dropdown behavior.
Methods:
addBehavior(trigger: HTMLElement, popup: HTMLElement): void— Adds behavior for opening and closing a list.
How can it be used:
- Implementation of navigation menus with nested items.
- Creation of input fields with auto-completion.
Class: Modal (Inherited from PopUp)
Description: A separate type of popup element designed to display modal windows with darkened backgrounds.
Methods:
- ``addBehavior(trigger: HTMLElement, popup
