@wui-js/main

v0.7.1

Published

15 hours ago

WUI/JS - A vanilla JavaScript/CSS UI component library for building web interfaces.

0High
0Medium
0Low

wui-js

ui components vanilla javascript css wui frontend library

[!IMPORTANT] The GitHub account @wuiproject was migrated to @wui-js to match the name with the NPM account.

English | Español

wuijs-main-lib

| | | | -------------------- | --- | | Library name | wuijs-main-lib | | Library version | 0.7.1 (Change Log) | | NPM package | @wui-js/main (npm) | | Document version | 0.7.1.20260516.0 | | License | Apache License 2.0 | | Author | Sergio E. Belmar V. <[email protected]> | | Repository | https://github.com/wui-js/wuijs-main-lib | | Documentation | https://docs.wuijs.dev | | Website | https://wuijs.dev |

Index

Overview

WUI/JS Main Lib, an acronym for Web User Interface JavaScript library, is an open source JavaScript/CSS vanilla library for the rapid implementation of Web user interfaces composed of 25 classes, which can be used independently or together.

About the WUI/JS Project

WUI/JS Main Lib is part of the WUI/JS project, which currently consists of 4 repositories:

https://github.com/wui-js/wuijs-main-lib UI Main library.
https://github.com/wui-js/wuijs-environment-lib UI Bridge library between a web environments and native web rendering engines.
https://github.com/wui-js/wuijs-plugins-lib UI Plugins library.
https://github.com/wui-js/wuijs-demos Repository with demos and usage examples for the project libraries.

Classes Table

| Class name | Version | Description | | ------------------------------------ | -------:| ----------- | | WUICookie | WUIHead | WUIBody | WUILanguage | WUIScrolly | WUIIcon | WUIFade | WUILoader | WUITooltip | WUIModal | WUIPaging | WUISlider | WUITabs | WUIMenubar | WUIList | WUITable | WUIForm | WUIFormat | WUISelectpicker | WUIDatepicker | WUITimepicker | WUIColorpicker | WUISwitch | WUIIntensity | WUIButton | 0.4 | Utilities for cookies management. | | 0.3 | Utilities for HTML head management. | | 0.4 | Utilities for HTML body management. Allows the import of CSS/JS/HTML content and facilitates implementation in native mobile environments. | | 0.4 | Utilities for interfaces with different languages managment. Allows you to load language files in JS or JSON format and dynamically update the content of HTML elements based on the language. | | 0.5 | Utilities for animating HTML elements managment using the "onscroll" event of the HTML page body. | | 0.5 | Pre-designed icons set loaded via CSS, for use in interfaces. | | 0.3 | Utilities for fading out and fading control in HTML elements with opacity. | | 0.4 | Component for the implementation of loading animations. | | 0.3 | Component for the implementation of tooltip texts. | | 0.5 | Component for the implementation of dialog boxes (type message) and pop-up windows (type page). | | 0.4 | Component for the implementation of paginated views with animated transitions. | | 0.5 | Component for the implementation of slide presentations controlled by mouse/touch dragging and/or by event. | | 0.3 | Component for the implementation of views accessible by tab selection. | | 0.5 | Component for the implementation of menu bars. | | 0.4 | Component for the implementation of data lists and buttons for each row optionally. | | 0.5 | Component for the implementation of data tables. Unlike the WUIList component, the WUITable component includes a column header. | | 0.5 | Component for the implementation of data forms. This component allows the implementation of HTML data input elements such as <input>, <select>, and <textarea>, and WUI library objects such as WUISelectpicker, WUIDatepicker, WUITimepicker, WUIColorpicker, WUISwitch, WUIIntensity, and WUIButton. | | 0.3 | Utilities for management and validation string, number and Date data formats. | | 0.7 | Component for the implementation of multiple or exclusive selection list data inputs based on HTML element <select>. | | 0.7 | Component for the implementation of date type data inputs based on HTML element <input type="date">. | | 0.7 | Component for the implementation of time type data inputs based on HTML element <input type="time">. | | 0.7 | Component for the implementation of color picker type data inputs based on HTML element <input type="color">. | | 0.6 | Component for the implementation of checkbox type data inputs based on HTML element <input type="checkbox">. | | 0.4 | Component for the implementation of 4-level intensity selector type data inputs: none, low, half, and high based on HTML element <input type="range">. | | 0.7 | Component for the implementation of based on HTML element <button>. |

Directory Map

wuijs-main-lib/
├── docs/
├── imgs/
│   ├── icons/
│   └── logo/
├── legacy/
│   └── wui-js/
│       └── main/
├── src/
│   └── wui-js/
│       └── main/
├── tools/
└── tests/

| Path | Description | | -------------------------------------------------------------------------------------------- | ----------- | | docs | Documentation. | | imgs | Images used in the documentation. | | imgs/icons | Icons generated by the /tools/svg-icon-maker.py tool from the WUIIcon class. | | imgs/logo | Project logo and isotype in SVG and PNG format. | | legacy | Deprecated sources with previous versions. | | legacy/wui-js | WUI/JS Project directory. | | legacy/wui-js/main | WUI/JS Main library (previous versions). | | src | Main sources of the latest version. | | src/wui-js | WUI/JS Project directory. | | src/wui-js/main | WUI/JS Main library. | | tools | Complementary tools. | | tests | Testing scripts. |

Install

Option 1: Install from source

To install the WUI/JS library from GitHub, you must clone the official distribution repository (wui-js/wuijs-main-lib). Assuming the project where it will be deployed has a source directory: ./src and within that, a ./src/libraries library directory, you must type the following in the terminal:

git clone https://[email protected]/wui-js/wuijs-main-lib.git
cp -r ./wuijs-main-lib/src/wui-js/ ../src/libraries/

Optionally, it can be downloaded from the same repositories in ZIP format.

wget https://github.com/wui-js/wuijs-main-lib/archive/refs/heads/main.zip
unzip main.zip
cp -r ./wuijs-main-lib-main/src/wui-js/ ../src/libraries/

Option 2: Install via npm

To install the WUI/JS library via npm:

npm i @wui-js/main

The resources will be available at the path ./node_modules/@wui-js/main.

Implementation

The WUI library can be included in a project in two ways: in standard mode, by linking the CSS and JS files of each component individually, or in abbreviated mode, using the wui.js script that automatically manages the loading of the indicated components.

[!NOTE] The use of the wui.css configuration file was deprecated starting from version 0.6.0.

Standard Implementation

To enable all classes, the CSS and JS dependencies of the libraries must be implemented in the HTML header of the web page.

Assuming the library resources are located in the relative path /libraries/ directory, the HTML header looks like this:

HTML code:

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover">
		<meta name="application-name" content="">
		<meta name="theme-color" content="">
		<link type="text/css" rel="stylesheet" href="/libraries/wui-js/main/scrolly/wui-scrolly-0.5.root.css">
		<link type="text/css" rel="stylesheet" href="/libraries/wui-js/main/scrolly/wui-scrolly-0.5.css">
		<link type="text/css" rel="stylesheet" href="/libraries/wui-js/main/icon/wui-icon-0.5.root.css">
		<link type="text/css" rel="stylesheet" href="/libraries/wui-js/main/icon/wui-icon-0.5.css">
		<link type="text/css" rel="stylesheet" href="/libraries/wui-js/main/loader/wui-loader-0.4.root.css">
		<link type="text/css" rel="stylesheet" href="/libraries/wui-js/main/loader/wui-loader-0.4.css">
		<link type="text/css" rel="stylesheet" href="/libraries/wui-js/main/tooltip/wui-tooltip-0.3.root.css">
		<link type="text/css" rel="stylesheet" href="/libraries/wui-js/main/tooltip/wui-tooltip-0.3.css">
		<link type="text/css" rel="stylesheet" href="/libraries/wui-js/main/modal/wui-modal-0.5.root.css">
		<link type="text/css" rel="stylesheet" href="/libraries/wui-js/main/modal/wui-modal-0.5.css">
		<link type="text/css" rel="stylesheet" href="/libraries/wui-js/main/paging/wui-paging-0.4.root.css">
		<link type="text/css" rel="stylesheet" href="/libraries/wui-js/main/paging/wui-paging-0.4.css">
		<link type="text/css" rel="stylesheet" href="/libraries/wui-js/main/slider/wui-slider-0.5.root.css">
		<link type="text/css" rel="stylesheet" href="/libraries/wui-js/main/slider/wui-slider-0.5.css">
		<link type="text/css" rel="stylesheet" href="/libraries/wui-js/main/tabs/wui-tabs-0.3.root.css">
		<link type="text/css" rel="stylesheet" href="/libraries/wui-js/main/tabs/wui-tabs-0.3.css">
		<link type="text/css" rel="stylesheet" href="/libraries/wui-js/main/menubar/wui-menubar-0.5.root.css">
		<link type="text/css" rel="stylesheet" href="/libraries/wui-js/main/menubar/wui-menubar-0.5.css">
		<link type="text/css" rel="stylesheet" href="/libraries/wui-js/main/list/wui-list-0.4.root.css">
		<link type="text/css" rel="stylesheet" href="/libraries/wui-js/main/list/wui-list-0.4.css">
		<link type="text/css" rel="stylesheet" href="/libraries/wui-js/main/table/wui-table-0.5.root.css">
		<link type="text/css" rel="stylesheet" href="/libraries/wui-js/main/table/wui-table-0.5.css">
		<link type="text/css" rel="stylesheet" href="/libraries/wui-js/main/form/wui-form-0.5.root.css">
		<link type="text/css" rel="stylesheet" href="/libraries/wui-js/main/form/wui-form-0.5.css">
		<link type="text/css" rel="stylesheet" href="/libraries/wui-js/main/selectpicker/wui-selectpicker-0.7.root.css">
		<link type="text/css" rel="stylesheet" href="/libraries/wui-js/main/selectpicker/wui-selectpicker-0.7.css">
		<link type="text/css" rel="stylesheet" href="/libraries/wui-js/main/datepicker/wui-datepicker-0.7.root.css">
		<link type="text/css" rel="stylesheet" href="/libraries/wui-js/main/datepicker/wui-datepicker-0.7.css">
		<link type="text/css" rel="stylesheet" href="/libraries/wui-js/main/timepicker/wui-timepicker-0.7.root.css">
		<link type="text/css" rel="stylesheet" href="/libraries/wui-js/main/timepicker/wui-timepicker-0.7.css">
		<link type="text/css" rel="stylesheet" href="/libraries/wui-js/main/colorpicker/wui-colorpicker-0.7.root.css">
		<link type="text/css" rel="stylesheet" href="/libraries/wui-js/main/colorpicker/wui-colorpicker-0.7.css">
		<link type="text/css" rel="stylesheet" href="/libraries/wui-js/main/switch/wui-switch-0.6.root.css">
		<link type="text/css" rel="stylesheet" href="/libraries/wui-js/main/switch/wui-switch-0.6.css">
		<link type="text/css" rel="stylesheet" href="/libraries/wui-js/main/intensity/wui-intensity-0.4.root.css">
		<link type="text/css" rel="stylesheet" href="/libraries/wui-js/main/intensity/wui-intensity-0.4.css">
		<link type="text/css" rel="stylesheet" href="/libraries/wui-js/main/button/wui-button-0.3.css">
		<script type="text/javascript" src="/libraries/wui-js/main/cookie/wui-cookie-0.4.js"></script>
		<script type="text/javascript" src="/libraries/wui-js/main/head/wui-head-0.3.js"></script>
		<script type="text/javascript" src="/libraries/wui-js/main/body/wui-body-0.4.js"></script>
		<script type="text/javascript" src="/libraries/wui-js/main/language/wui-language-0.4.js"></script>
		<script type="text/javascript" src="/libraries/wui-js/main/scrolly/wui-scrolly-0.5.js"></script>
		<script type="text/javascript" src="/libraries/wui-js/main/fade/wui-fade-0.3.js"></script>
		<script type="text/javascript" src="/libraries/wui-js/main/loader/wui-loader-0.4.js"></script>
		<script type="text/javascript" src="/libraries/wui-js/main/tooltip/wui-tooltip-0.3.js"></script>
		<script type="text/javascript" src="/libraries/wui-js/main/modal/wui-modal-0.5.js"></script>
		<script type="text/javascript" src="/libraries/wui-js/main/paging/wui-paging-0.4.js"></script>
		<script type="text/javascript" src="/libraries/wui-js/main/slider/wui-slider-0.5.js"></script>
		<script type="text/javascript" src="/libraries/wui-js/main/tabs/wui-tabs-0.3.js"></script>
		<script type="text/javascript" src="/libraries/wui-js/main/menubar/wui-menubar-0.5.js"></script>
		<script type="text/javascript" src="/libraries/wui-js/main/list/wui-list-0.4.js"></script>
		<script type="text/javascript" src="/libraries/wui-js/main/table/wui-table-0.5.js"></script>
		<script type="text/javascript" src="/libraries/wui-js/main/form/wui-form-0.5.js"></script>
		<script type="text/javascript" src="/libraries/wui-js/main/format/wui-format-0.3.js"></script>
		<script type="text/javascript" src="/libraries/wui-js/main/selectpicker/wui-selectpicker-0.7.js"></script>
		<script type="text/javascript" src="/libraries/wui-js/main/datepicker/wui-datepicker-0.7.js"></script>
		<script type="text/javascript" src="/libraries/wui-js/main/timepicker/wui-timepicker-0.7.js"></script>
		<script type="text/javascript" src="/libraries/wui-js/main/colorpicker/wui-colorpicker-0.7.js"></script>
		<script type="text/javascript" src="/libraries/wui-js/main/switch/wui-switch-0.6.js"></script>
		<script type="text/javascript" src="/libraries/wui-js/main/intensity/wui-intensity-0.4.js"></script>
		<script type="text/javascript" src="/libraries/wui-js/main/button/wui-button-0.3.js"></script>
	</head>
	<body>
	</body>
</html>

[!NOTE] This implementation assumes installation via GitHub. If installed via NPM, the resource calls are made using the path /node_modules/wui/.
<script src="node_modules/@wui-js/main/button/wui-button-0.3.js"></script>

[!TIP] If you need to customize the design, you can add a CSS file with the customization of the CSS variables in the *.root.css files that are needed. According to WUI/JS project standard, this file is called wui.root.css.

Abbreviated Implementation

Starting with version 0.4.0, a resource loader was added for the simplified implementation of WUI libraries. This loader allows you to integrate all WUI libraries into a web page, either full or partial, without requiring the manual inclusion of the corresponding JavaScript and CSS files for each library.

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover">
		<meta name="application-name" content="">
		<meta name="theme-color" content="">
		<link type="text/css" rel="stylesheet" href="./settings/wui.root.css">
		<script type="text/javascript" src="/libraries/wui-js/main/wui.js?v=0.7.1"></script>
	</head>
	<body>
	</body>
</html>

To specify the WUI library version, you must add the version parameter (or its short alias v) to the URL of the wui.js file. If the version parameter is not specified, the installed version will be assumed.

[!TIP] For a correct abbreviated implementation, review the Good Coding Practices section.

[!TIP] For a simplified implementation of the wui.root.css file, you can optionally use the WUIPluginThemes plugin provided in the wuijs-plugins-lib library.

Optionally, libraries can be included individually. To do this, add them to the wui.js file URL using the class parameter (or its short alias c). Library names passed in the class parameter should not contain the version suffix (-x.x) as the version will be automatically defined by the simple load script.

<script type="text/javascript" src="/libraries/wui-js/main/wui.js?v=0.7.1&c=selectpicker,switch"></script>

[!NOTE] The class parameter does not distinguish between uppercase and lowercase.

Additionally, you can omit loading the root.css files for each library by adding the root parameter with the value 0 (zero) to the wui.js file URL.

<script type="text/javascript" src="/libraries/wui-js/main/wui.js?v=0.7.1&c=selectpicker,switch&r=0"></script>

[!TIP] You can check this functional example in CodeSandbox at the link: https://codesandbox.io/p/sandbox/github/wui-js/wuijs-demos/tree/main/demos/main/resource-loader/basic.

Classes

WUICookie

Version: 0.4

Utilities for cookies management.

Sources

| Type | File | |:----:| ---- | | JS | src/wui-js/main/cookie/wui-cookie-0.4.js |

Constructor

| Type | Description | | --------- | ----------- | | WUICookie | WUICookie([properties])Arguments:• properties: object |

Propiedades Públicas

| Nombre | Tipo | Descripción | | ------- | -------- | ----------- | | version | string | Version del plugin. |

Properties

| Property | Type | Default value | Description | | -------- | --------- | ------------------- | ----------- | | domain | string | location.hostname | (get/set)Define the domain for which the cookie is accessible. By default, it's the current host. Setting it to a parent domain (e.g., example.com for sub.example.com) makes it accessible to subdomains. | | path | string | "./" | (get/set)Specifies the path for which the cookie is valid. The default value is the current path, with an empty value being equivalent to this. Setting "/" makes the cookie accessible across the entire domain. | | minutes | number | 525600 | (get/set)Specifies the duration, measured in minutes, for the cookie to remain active. The default value is 365 days. | | overssl | boolean | false | (get/set)If set to true, the cookie will only be sent over HTTPS connections. |

Methods

| Method | Return type | Description | | ------ | ----------- | ----------- | | encode | string | encode(name, value[, options])Arguments:• name: string • value: string • options: object optionalReturns the encoded string of a cookie. | | set | string | set(name, value[, options])Arguments:• name: string • value: string • options: object optionalAdd or modify a cookie and returns its encoded string. | | get | string | get(name)Arguments:• name: stringReads the contents of a cookie by its name. | | remove | void | remove(name)Arguments:• name: stringRemoves a cookie by its name. |

Implementation

CSS Code:

html,
body {
	height: 100%;
	margin: 0;
	padding: 0;
}

.my-output {
	font-family: monospace;
}

HTML head:

<script type="text/javascript" src="/libraries/wui-js/main/cookie/wui-cookie-0.4.js"></script>

HTML code:

<div class="my-output"></div>

JS code:

const init = () => {
	const output = document.body.querySelector(".my-output");
	const cookie = new WUICookie({
		//domain: location.hostname,
		//path: "./",
		//minutes: 365*24*60,
		//overssl: false
	});
	const encode = cookie.set("mycookie", "test");
	const value = cookie.get("mycookie");
	output.innerHTML = "<pre>"
		+ `Encoded value : ${encode}\n`
		+ `Readed value  : ${value}\n`
		+ "</pre>";
}

window.addEventListener("DOMContentLoaded", init);

[!TIP] You can check this functional example in CodeSandbox at the link: https://codesandbox.io/p/sandbox/github/wui-js/wuijs-demos/tree/main/demos/main/cookie/basic.

WUIHead

Version: 0.3

Utilities for HTML head management.

Sources

| Type | File | |:----:| ---- | | JS | src/wui-js/main/head/wui-head-0.3.js |

Constructor

| Type | Description | | ------- | ----------- | | WUIHead | WUIHead() |

Properties

Class without properties.

Methods

| Method | Return type | Description | | ------------------ | ----------- | ----------- | | setTitle | void | setTitle(name)Arguments:• name: stringSets the name of the HTML document using the <title> tag. | | setMetaContent | void | setMetaContent(name, content)Arguments:• name: string • content: stringSets a meta value in the header of the HTML document using the <meta> tag.Check specifications and compatibility in MDN Web Docs. | | setApplicationName | void | setApplicationName(content)Alias of setMetaContent("application-name", content)Arguments:• content: stringSets the application-name meta value in the header of the HTML document. | | setThemeColor | void | setThemeColor(content)Alias of setMetaContent("theme-color", content)Arguments:• content: stringSets the theme-color meta value in the header of the HTML document.Check specifications and compatibility in MDN Web Docs. | | refresh | void | refresh()Reloads JS and CSS files called from the <head> section of the HTML document, by appending a dynamic get parameter. |

Implementation

HTML head:

<title></title>
<meta name="application-name" content="">
<meta name="theme-color" content="">
<script type="text/javascript" src="/libraries/wui-js/main/head/wui-head-0.3.js"></script>

JS code:

const init = () => {
	const head = new WUIHead();
	head.setTitle("Test title");
	head.setApplicationName("Test app");
	head.setThemeColor("#1e90ff");
}

window.addEventListener("DOMContentLoaded", init);

WUIBody

Version: 0.4

Utilities for HTML body management. Allows the import of CSS/JS/HTML content and facilitates implementation in native mobile environments.

Sources

| Type | File | |:----:| ---- | | JS | src/wui-js/main/body/wui-body-0.4.js |

Constructor

| Type | Description | | ------- | ----------- | | WUIBody | WUIBody([properties])Arguments:• properties: object |

Properties

| Property | Type | Default value | Description | | --------------- | ---------- | ------------- | ----------- | | environment | string | "web" | (get/set)Web interface deployment environment.Values:• "web"• "native.android"• "native.ios" | | importDirectory | string | "" | (get/set)Relative path of the directory where the subdirectories for content import are hosted. | | importMode | string | "fetch" | (get/set)Content retrieval method for upload.Values:• "fetch"• "xhr"When deploying to native environments using WebView for Android or WebKit for iOS, it is recommended to use "xhr". | | onCompleted | function | null | (get/set)Function run when all content is imported and loaded into the body of the HTML page. | | debug | boolean | false | (get/set)Test mode. Prints imported content to the console when the property value is true. |

Methods

| Method | Return type | Description | | ----------- | ----------- | ----------- | | import | void | import(id, path[, done])Arguments:• id: string, specifies the id of the HTML element where the content is to be loaded.• path: string, specifies the subdirectory path and filename of the files with extension .css, .htm and .js that will be imported and loaded.• done: function optional, this function is executed when the content loading has finished.Imports CSS/JS/HTML content referenced to an HTML element by its id. The content is also commonly referred to as a "module" and is loaded in three sections:• CSS: using a <style> element inserted before the HTML content.• HTML: over the element identified by its id.• JS: using a <script> element inserted into the body of the HTML document. | | prepare | void | prepare()Depending on the value of the environment parameter, modifies the HTML elements a, input, and select in the HTML document body to adapt them to native environments. | | openURL | void | openURL(url[, download])Arguments:• id: string, specifies the URL that is required to be opened or downloaded.• download: string optional, specifies the name of the file that will be used to download the content referenced by the URL.Open or download content using a URL. This method is required in native environments since WebView on Android or WebKit on iOS aren't always supported. | | isCompleted | boolean | isCompleted()Returns true if all contents have been imported and loaded, false in case contr. | | destroy | void | destroy()Destroyer. |

Implementation

CSS content of the ./modules/test/module.css file:

.test a,
.test a:visited {
	text-decoration: none;
	font-size: 20px;
	color: blue;
}

HTML content of the ./modules/test/module.htm file:

<section id="testContent" class="test">
	<a href="https://wuijs.dev" target="_blank">go to WUI/JS Project website!</a>
</section>

JS content of the ./modules/test/module.js file:

const testContentLog = (content) => {
	const output = document.body.querySelector(".my-output");
	output.innerHTML = `<pre>${content}</pre>`;
}

CSS Code:

html,
body {
	height: 100%;
	margin: 0;
	padding: 0;
}

.my-output {
	font-family: monospace;
}

HTML head:

<script type="text/javascript" src="/libraries/wui-js/main/body/wui-body-0.4.js"></script>

HTML code:

<section id="testContent"></section>

<div class="my-output"><pre>loading content...</pre></div>

JS code:

const init = () => {
	const body = new WUIBody({
		//environment: "web",
		importDirectory: "./modules/",
		//importMode: "fetch",
		onCompleted: () => {
			body.prepare();
		},
		debug: true
	});
	body.import("testContent", "test/module", () => {
		testContentLog("test content loaded");
	});
}

window.addEventListener("DOMContentLoaded", init);

[!TIP] You can check this functional example in CodeSandbox at the link: https://codesandbox.io/p/sandbox/github/wui-js/wuijs-demos/tree/main/demos/main/body/import.

WUILanguage

Version: 0.4

Utilities for interfaces with different languages managment. Allows you to load language files in JS or JSON format and dynamically update the content of HTML elements based on the language.

Sources

| Type | File | |:----:| ---- | | JS | src/wui-js/main/language/wui-language-0.4.js |

Constructor

| Type | Description | | ----------- | ----------- | | WUILanguage | WUILanguage([properties])Arguments:• properties: object optional |

Properties

| Property | Type | Default value | Description | | ---------- | ---------- | ----------------- | ----------- | | selector | string | ".wui-language" | (get/set)CSS selector for HTML elements to be loaded. This can be applied to the content attribute of the meta element, to the innerHTML property of the elements: h1, h2, h3, h4, h5, h6, div, span, p, i, li, a, legend, label, option, data, button, and to the placeholder attribute of the input and textarea elements. | | directory | string | "languages/" | (get/set)Path to the directory where the language files are located. | | sets | array | ["main"] | (get/set)List of language set names to load. | | lang | string | "en" | (get/set)Language code in ISO 639-1 format. | | mode | string | "js" | (get/set)Language file format.Values:• "js"• "json" | | dataKey | string | "key" | (get/set)Name of the data-* attribute that contains the text key in HTML elements. | | dataOutput | string | "text" | (get/set)Name of the data-* attribute where the loaded text can be placed. | | onLoad | function | null | (get/set)Function run when the language loading has finished. |

Methods

| Method | Return type | Description | | ------- | ----------- | ----------- | | load | void | load([lang[, sets]])Arguments:• lang: string optional (default value corresponds to the lang property of the object)• sets: array optional (default value corresponds to the sets property of the object)Loads the language files indicated by language and set, and updates the HTML elements marked with the CSS selector. | | refresh | void | refresh([selector[, lang]])Arguments:• selector: string optional (default value corresponds to the selector property of the object)• lang: string optional (default value corresponds to the lang property of the object)Reloads the text contained in the nested elements of the HTML element specified in the selector argument. | | destroy | void | destroy()Destroyer. |

Implementation

JS code file main-en.js:

return {
	titles: {
		test: "Test title"
	},
	texts: {
		test: "Test text"
	}
};

[!IMPORTANT] If js is used as the format for language files, said file must be initialized by the return keyword followed by a {} object.

JSON code file main-en.json:

{
	"titles": {
		"test": "Test title"
	},
	"texts": {
		"test": "Test text"
	}
}

HTML head:

<script type="text/javascript" src="/libraries/wui-js/main/language/wui-language-0.4.js"></script>

HTML code:

<h1 class="wui-language" data-key="titles.test"></h1>
<div class="wui-language" data-key="texts.test"></div>

JS code:

const init = () => {
	const language = new WUILanguage({
		//selector: ".wui-language",
		//directory: "./languages/",
		//sets: ["main"],
		lang: "en",
		//mode: "js",
		//dataKey: "key",
		//dataOutput: "text",
		onLoad: (...args) => {
			[lang, languages] = args;
			console.log("Language loaded:", lang, languages);
		}
	});
	let lang = language.lang;
	let languages = {};
	language.load();                  // Option 1
	//language.load("en");            // Option 2
	//language.load("en", ["main"]);  // Option 3
}

window.addEventListener("DOMContentLoaded", init);

[!IMPORTANT] The language file must be in the path ./languages/main-en.js or ./languages/main-en.json depending on the set, language and mode used. It is important that language files are in the form {set}-{lang}.{mode}, otherwise the file cannot be imported.

It is possible to combine sets of files from the same language, for example, if you have a main-es.js file and another main2-es.js file that complements the first, they can be called simultaneously using the sets property.

JS code:

// Option 1: Update the sets property and then reload.
language.sets = ["main", "main2"];
language.load(); 

// Option 2: Reload by passing the combination of sets as a parameter.
language.load("en", ["main", "main2"]);

[!TIP] If you want to add dynamic content within a text, It is recommended to use the js language file format (mode: "js") and add the text using the string interpolation method, also known as template literals. I.e. mykey: `My ${var} text` .

WUIScrolly

Version: 0.5

Utilities for animating HTML elements managment using the "onscroll" event of the HTML page body.

Sources

| Type | File | |:----:| ---- | | JS | src/wui-js/main/scrolly/wui-scrolly-0.5.js | | CSS | src/wui-js/main/scrolly/wui-scrolly-0.5.css | | CSS | src/wui-js/main/scrolly/wui-scrolly-0.5.root.css |

Constructor

| Type | Description | | ---------- | ----------- | | WUIScrolly | WUIScrolly([properties])Arguments:• properties: object optional |

Properties

| Property | Type | Default value | Description | | ------------- | ---------- | --------------------------- | ----------- | | sections | array | [] | (get/set)List of objects with the settings of the sections that will be incorporated into the animation, as defined in Section Options. These can be defined directly on this property or using the addSection() method. | | behavior | string | "smooth" | (get/set)Behavior for moving focus to the body of the HTML page.Values:• "auto"• "smooth" | | dataScrollY | string | "scrollY" | (get/set)Name of the data-* attribute of the main document element (<html> / document.documentElement) that contains the numeric value measured in pixels of the total vertical scrolling of the HTML page, where 0 represents the top of the document (or no movement). | | dataDelay | string | "delay" | (get/set)Name of the data-* attribute that determines the time, measured in milliseconds, that it takes for an HTML element animated using CSS styles to animate once it is given focus. | | onStart | function | null | (get/set)Function run when the scroll movement starts, either through the scroll events for the mouse or touchmove for the touch screen. | | onMove | function | null | (get/set)Function run when the scroll movement is executed, either through the scroll events for the mouse or touchmove for the touch screen. | | onStop | function | null | (get/set)Function run when the scroll movement ends, either through the scroll events for the mouse or touchmove for the touch screen. | | scrollY | number | 0 | (get)Vertical position of the page measured in pixels. | | deltaY | number | 0 | (get)Last step of scrolling in the vertical movement of the page, measured in pixels. | | direction | string | null | (get)Direction of vertical page movement.Values:• "up"• "down" | | sceneWidth | number | WUIScrolly.screenWidth() | (get)Scene width measured in pixels. | | sceneHeight | number | WUIScrolly.screenHeight() | (get)Scene height measured in pixels. | | sceneIndex | number | null | (get)Scene number. | | sceneStep | number | null | (get)Step number in a scene. | | sceneProgress | number | null | (get)Percentage of progress of a step in a scene, with values between 0 and 1. | | debug | boolean | false | (get/set)Test mode. Prints to the console the selector and height values of the scenes added in the startup instance, and scrollY, y, index, sceneIndex, step, sceneStep, and progress when they change. Enabled when the property value is true. |

Section Options

| Property | Type | Default value | Description | | --------- | ---------- | ------------- | ----------- | | selector | string | undefined | CSS selector that defines the HTML element to be included as a section. If more than one element matches the selector, only the first match will be included. oblogatory | | target | string | undefined | Auxiliary name for referencing the section. Used in the goSection() method. | | type | string | "auto" | CSS behavior of the section height.Values:• "auto"• "static" | | height | number | undefined | Section height. This can be expressed as a number associated with pixels or in a CSS compatible format. | | steps | number | undefined | Total number of steps defined in the animation animation function. | | pages | number | undefined | Total number of pages defined in the animation animation function. | | animation | function | undefined | function(step, progress)Arguments:• step: number, value between 0 and pages - 1 • progress: number, value between 0 and 1 Function run when the scroll movement is executed in a section. |

Methods

| Method | Return type | Description | | ---------- | ----------- | ----------- | | init | void | init()Initializes the object once the sections that make up the HTML page have been added. | | stop | void | stop()Interrupts the animation in its execution cycle. | | addSection | void | addSection(options)Adds a new animated section settings to the object's section list, as defined in Section Options:. | | goSection | void | goSection(target[, done[, behavior]])Arguments:• target: string • done: function • behavior: string Moves the focus of the HTML page to the section specified by the target parameter. | | selectPage | void | selectPage(sectionIndex, pageIndex)Arguments:• sectionIndex: number, values from 0 • pageIndex: number, value between 0 and pages - 1 Moves the focus of the HTML page to the section specified by the sectionIndex parameter and advances to the pageIndex page in that section. | | drawCenter | void | drawCenter()Draws the center of the visible part of the HTML page in the browser. | | drawRuler | void | drawRuler()Draws a vertical ruler with pixel measurements, on the left side of the HTML page. | | destroy | void | destroy()Destroyer. |

CSS Variables

| Variable | Description | | -------------------------------------- | ----------- | | --wui-scrolly-paging-bgcolor-hidden | Unselected page indicator color. | | --wui-scrolly-paging-bgcolor-visible | Selected page indicator color. |

CSS Styles for Animation

| Style | Description | | ------------- | ----------- | | .fadein | Enter and exits with opacity without movement. | | .fadein-up | Enter and exits with opacity from above. | | .fadein-top | Alias of .fadein-up. | | .fadein-left | Enter and exit with opacity from the left. | | .fadein-right | Enter and exit with opacity from the right. |

Implementation

CSS code:

html,
body {
	height: 100%; /* necessary */
}

body {
	font-family: Arial, Helvetica, Verdana, sans-serif;
	font-size: 14px;
}

.wui-scrolly {
	overflow-x: hidden;
	margin: 0;
	padding: 0;
}

.wui-scrolly > .section {
	width: 100%;
	background-color: lightgray;
}

.wui-scrolly > .section > .scene > .animation {
	position: relative;
}

.wui-scrolly > .section1 {
	background-color: #f1f1f1;
}

.wui-scrolly > .section2 > .scene.scene2 {
	display: flex;
	position: relative; /* necessary */
	align-items: center;
	justify-content: center;
	flex-direction: row;
	gap: 20px;
}

.wui-scrolly > .section2 {
	background-color: #e9e9e9;
}

.wui-scrolly > .section3 {
	background-color: #e1e1e1;
}

.wui-scrolly > .section3 > .scene > .animation > .my-element {
	left: -100px;
}

.my-element {
	display: flex;
	position: relative; /* necessary */
	width: 50px;
	height: 50px;
	margin: 5px;
	margin: 20px;
	background-color: dodgerblue;
	align-items: center;
	justify-content: center;
	color: #fff;
}

.my-output {
	margin: 10px;
	font-family: monospace;
}

HTML head:

<link type="text/css" rel="stylesheet" href="/libraries/wui-js/main/scrolly/wui-scrolly-0.5.root.css">
<link type="text/css" rel="stylesheet" href="/libraries/wui-js/main/scrolly/wui-scrolly-0.5.css">
<script type="text/javascript" src="/libraries/wui-js/main/scrolly/wui-scrolly-0.5.js"></script>

HTML code:

<body class="wui-scrolly">

	<!-- Cover -->

	<section class="section section1">
		<div class="scene">scroll down</div>
	</section>

	<!-- CSS animation -->

	<section class="section section2">
		<div class="scene scene2">
			<div class="my-element wui-scrolly-load fadein" data-delay=".0">1</div>
			<div class="my-element wui-scrolly-load fadein-left" data-delay=".2">2</div>
			<div class="my-element wui-scrolly-load fadein-top" data-delay=".4">3</div>
			<div class="my-element wui-scrolly-load fadein-right" data-delay=".8">4</div>
		</div>
	</section>

	<!-- JS animation -->

	<section class="section section3">
		<div class="scene">
			<div class="animation">
				<div class="my-element element5">5</div>
				<div class="my-element element6">6</div>
				<div class="my-element element7">7</div>
			</div>
			<div class="my-output"></div>
		</div>
		<div class="paging dots"></div>
	</section>
</body>

JS code:

const init = () => {
	const element5 = document.body.querySelector(".section3 .my-element.element5");
	const element6 = document.body.querySelector(".section3 .my-element.element6");
	const element7 = document.body.querySelector(".section3 .my-element.element7");
	const output = document.body.querySelector(".section3 .my-output");
	const scrolly = new WUIScrolly({
		sections: [{
			selector: ".section1",
			target: "cover",
			type: "static",
			height: "100%"
		}, {
			selector: ".section2",
			target: "css-animation",
			type: "static",
			height: 400
		}, {
			selector: ".section3",
			target: "js-animation",
			type: "auto",
			height: 4500,
			steps: 3,
			pages: 3,
			animation: (step, progress) => {
				const direction = scrolly.direction;
				const left = step != null ? parseInt(200 * progress - 100) + "px" : "100px";
				const text = `step: ${step}, progress: ${progress}, direction: ${direction}`;
				scrolly.selectPage(2, step);
				if (step == 0) {
					if (direction == "up") {
						element6.style.left = "-100px";
					}
					element5.style.left = left;
				} else if (step == 1) {
					if (direction == "down") {
						element5.style.left = "100px";
					} else if (direction == "up") {
						element7.style.left = "-100px";
					}
					element6.style.left = left;
				} else if (step == 2) {
					if (direction == "down") {
						element6.style.left = "100px";
					}
					element7.style.left = left;
				} else if (step == null) {
					element7.style.left = left;
				}
				output.textContent = text;
			}
		}],
		//behavior: "smooth",
		//dataScrollY: "scrollY",
		//dataDelay: "delay",
		//onStart: null,
		onMove: (index, step, progress) => {
			if (index == 1) {
				element5.style.left = "-100px";
			}
		},
		//onStop: null,
		debug: true
	});
	scrolly.init();
}

window.addEventListener("DOMContentLoaded", init);

[!TIP] You can check this functional example on CodeSandbox at the link: https://codesandbox.io/p/sandbox/github/wui-js/wuijs-demos/tree/main/demos/main/scrolly/basic.

WUIIcon

Version: 0.5

Pre-designed icons set loaded via CSS, for use in interfaces.

Sources

| Type | File | |:----:| ---- | | CSS | src/wui-js/main/icon/wui-icon-0.5.css | | CSS | src/wui-js/main/icon/wui-icon-0.5.root.css |

Signals Icon Table

| Icon | Style | Icon | Style | Icon | Style | Icon | Style | | :--: | ----- | :--: | ----- | :--: | ----- | :--: | ----- | | | .plus-line | | .plus-lg-line | | .dash-line | | .dash-lg-line | | | .check-line.successful-line | | .check-lg-line.successful-lg-line | | .info-line | | .info-lg-line | | | .question-line | | .question-lg-line | | .exclamation-line.warning-line | | .exclamation-lg-line.warning-lg-line | | | .slash-line | | .slash-lg-line | | .x-line.close-line.error-line | | .x-lg-line.close-lg-line.error-lg-line | | | .filter-line | | .filter-lg-line | | .plus-circle-line | | .plus-circle-fill | | | .dash-circle-line | | .dash-circle-fill | | .check-circle-line.successful-circle-line | | .check-circle-fill.successful-circle-fill | | | .info-circle-line | | .info-circle-fill | | .question-circle-line | | .question-circle-fill | | | .exclamation-circle-line.warning-circle-line | | .exclamation-circle-fill.warning-circle-fill | | .slash-circle-line | | .slash-circle-fill | | | .x-circle-line.close-circle-lineerror-circle-line | | .x-circle-fill.close-circle-fillerror-circle-fill | | .filter-circle-line | | .filter-circle-fill | | | .exclamation-octagon-line.warning-octagon-line | | .exclamation-octagon-fill.warning-octagon-fill | | .x-octagon-line.close-octagon-line.error-octagon-line | | .x-octagon-fill.close-octagon-fill.error-octagon-fill | | | .exclamation-triangle-line.warning-triangle-line | | .exclamation-triangle-fill.warning-triangle-fill | | .x-triangle-line.close-triangle-line.error-triangle-line | | .x-triangle-fill.close-triangle-fill.error-triangle-fill |

Arrow Icon Table

| Icon | Style | Icon | Style | Icon | Style | Icon | Style | | :--: | ----- | :--: | ----- | :--: | ----- | :--: | ----- | | | .arrow-up-line | | .arrow-left-line | | .arrow-right-line | | .arrow-down-line | | | .arrow-up-lg-line | | .arrow-left-lg-line | | .arrow-right-lg-line | | .arrow-down-lg-line | | | .arrow-upleft-lg-line | | .arrow-upright-lg-line | | .arrow-downleft-lg-line | | .arrow-downright-lg-line | | | .arrowhead-up-line | | .arrowhead-left-line | | .arrowhead-right-line | | .arrowhead-down-line | | | .arrowhead-up-lg-line | | .arrowhead-left-lg-line | | .arrowhead-right-lg-line | | .arrowhead-down-lg-line | | | .arrowhead-up-stg-line | | .arrowhead-left-stg-line | | .arrowhead-right-stg-line | | .arrowhead-down-stg-line | | | .arrowhead-up-fill | | .arrowhead-left-fill | | .arrowhead-right-fill | | .arrowhead-down-fill | | | .arrow-up-circle-line | | .arrow-left-circle-line | | .arrow-right-circle-line | | .arrow-down-circle-line | | | .arrow-upleft-circle-line | | .arrow-upright-circle-line | | .arrow-downleft-circle-line | | .arrow-downright-circle-line | | | .arrow-up-circle-fill | | .arrow-left-circle-fill | | .arrow-right-circle-fill | | .arrow-down-circle-fill | | | .arrow-upleft-circle-fill | | .arrow-upright-circle-fill | | .arrow-downleft-circle-fill | | .arrow-downright-circle-fill | | | .arrowbar-up-line | | .arrowbar-left-line | | .arrowbar-right-line | | .arrowbar-down-line | | | .arrows-expand-horizontal-line | | .arrows-expand-vertical-line | | .arrows-collapse-horizontal-line | ![](https://github.com/wui-js/wuijs-main-lib/blob/mai

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

English | Español

wuijs-main-lib

Index

Overview

About the WUI/JS Project

Classes Table

Directory Map

Install

Implementation

Standard Implementation

Abbreviated Implementation

Classes

WUICookie

Sources

Constructor

Propiedades Públicas

Properties

Methods

Implementation

WUIHead

Sources

Constructor

Properties

Methods

Implementation

WUIBody

Sources

Constructor

Properties

Methods

Implementation

WUILanguage

Sources

Constructor

Properties

Methods

Implementation

WUIScrolly

Sources

Constructor

Properties

Section Options

Methods

CSS Variables

CSS Styles for Animation

Implementation

WUIIcon

Sources

Signals Icon Table

Arrow Icon Table