# wtools.js

**wtools.js** is a lightweight and versatile browser library offering a set of practical utilities to speed up web development. It includes tools for HTML table manipulation, form handling, HTTP requests, styled notifications, dynamic menus, and more.

## ✨ Key Features

- 📄 **CSVOperator**: Converts HTML tables to CSV and downloads the file.
- 🧠 **ElementState**: Controls the state (enabled/disabled) of buttons or blocks, with optional content change.
- ✅ **FormChecker**: Validates HTML5 forms and automatically adds CSS classes (`was-validated`).
- 🧭 **MenuManager**: Creates menus with dynamic sections, URL hash support, and highlights the active option.
- 🔔 **Notification**: Displays alert-style notifications (success, warning, error) with automatic or manual dismissal.
- 🌐 **Request**: HTTP client based on `fetch` with support for GET, POST, PUT, DELETE methods and JSON handling.
- 🧩 **StepperFunctions**: Executes a sequence of functions step by step (useful for wizards or tutorials).
- 🔍 **SearchElements**: Filters DOM elements by text contained within a specific sub-element.
- ⚙️ **ServerConfig**: Automatically configures API URLs based on the environment (production/development).
- 🎨 **UIElementsCreator**: Generates DOM elements from data and a callback function.
- ⏳ **WaitAnimation**: Provides loading spinners for blocks, buttons, selects, or full screen.
- 📦 **SelectOptions**: Dynamically manages `<select>` options.
- 🧹 **CleanForm**: Resets forms by removing validations and entered values.
- 🔗 **GetUrlSearchParam**: Easily retrieves URL parameters.

## 📦 Installation

### Including via CDN (recommended for quick testing)

```html
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://josefelixrc7.github.io/wtools/wtools.js"></script>

Installation with npm (recommended for professional projects)

npm install wtools jquery bootstrap

Then, in your code:

import wtools from 'wtools';
import 'bootstrap/dist/css/bootstrap.min.css';
// jQuery is required globally; ensure it's loaded before wtools

🚀 Basic Usage

1. Convert an HTML table to CSV and download it

<table id="users-table">
  <thead>
    <tr><th>ID</th><th>Name</th></tr>
  </thead>
  <tbody>
    <tr><td>1</td><td>Ana</td></tr>
    <tr><td>2</td><td>Luis</td></tr>
  </tbody>
</table>
<button id="download-btn">Download CSV</button>

<script>
  const csv = new wtools.CSVOperator('#users-table', 'users.csv');
  document.getElementById('download-btn').onclick = () => {
    const csvData = csv.TableToCSV_();
    csv.DownloadCSVFile_(csvData);
  };
</script>

2. Display a notification

const notification = new wtools.Notification('SUCCESS', 3000, '#app', true);
notification.Show_('Data saved successfully!');

3. Make an HTTP request

async function fetchData() {
  const req = new wtools.Request('/api/users', 'GET');
  const response = await req.Exec_();
  if (response.status === 200) {
    console.log(response.body);
  }
}

4. Manage a menu with sections

Required HTML:

<div id="my-menu">
  <a href="#section1" menu="home">Home</a>
  <a href="#section2" menu="profile">Profile</a>
</div>
<div id="content">
  <div class="section_home">Home content</div>
  <div class="section_profile d-none">Profile content</div>
</div>

JavaScript:

new wtools.MenuManager('#my-menu');

📖 Class Reference

CSVOperator

Constructor: new CSVOperator(tableSelector, filename)
Methods:

• TableToCSV_() → Returns CSV string.
• DownloadCSVFile_(csvData) → Downloads the file.

Notification

Constructor: new Notification(type, timeMs, containerSelector, clearOnStart)

• type: "SUCCESS", "WARNING", or "ERROR".
• Show_(message, closable) → Displays notification.

Request

Constructor: new Request(endpoint, method, data, stringify)
Methods:

• Exec_() → Returns Promise<ResponseData>.
• Exec_(callback) → Executes with callback.

SelectOptions

Constructor: new SelectOptions(arrayOfOptionValue)
Methods:

• Build_(selectSelector) → Populates the <select>.
• ValueToOption_(value) → Gets the option text.
• OptionToValue_(optionText) → Gets the option value.

Other Utilities

• wtools.CleanForm(formSelector) → Resets the form.
• wtools.GetUrlSearchParam(param) → Returns the URL parameter value.

🧩 Dependencies

wtools.js requires jQuery and Bootstrap 5 (for notifications and spinner styles).

Stable Versions with Good Compatibility

| Dependency | Version | Reason | |------------|---------|--------| | jQuery | 3.7.1 | Most stable and widely compatible version. jQuery 4.0+ removes legacy APIs but should work; 3.7.1 is recommended for production. | | Bootstrap | 5.3.0 | Latest stable version with excellent browser support and modern features. |

Make sure to include them before wtools.js:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://josefelixrc7.github.io/wtools/wtools.js"></script>

npm Installation

npm install wtools jquery bootstrap

Note: jQuery must be available globally. If using a module bundler (Webpack, Vite), you may need to expose it:

import $ from 'jquery';
window.$ = window.jQuery = $;
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';
import wtools from 'wtools';

🤝 Contributing

Contributions are welcome. If you'd like to improve wtools.js, please:

1. Fork the repository.
2. Create a branch (git checkout -b feature/new-feature).
3. Make your changes and commit (git commit -am 'Add new feature').
4. Push to the branch (git push origin feature/new-feature).
5. Open a Pull Request.

📄 License

This project is licensed under the MIT License. You may use it freely in personal and commercial projects.

👤 Author

• josefelixrc7 - GitHub

⭐ If wtools.js has been useful to you, please consider giving it a star on GitHub! ⭐