PHPackages                             gianlucagiacometti/web-toolbox - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Database & ORM](/categories/database)
4. /
5. gianlucagiacometti/web-toolbox

ActiveLibrary[Database & ORM](/categories/database)

gianlucagiacometti/web-toolbox
==============================

Set of tools for website development

v2.1.8(3w ago)124GPL-3.0-or-laterCSSCI passing

Since Dec 1Pushed 3w ago1 watchersCompare

[ Source](https://github.com/gianlucagiacometti/web-toolbox)[ Packagist](https://packagist.org/packages/gianlucagiacometti/web-toolbox)[ Docs](https://github.com/gianlucagiacometti/web-toolbox/)[ RSS](/packages/gianlucagiacometti-web-toolbox/feed)WikiDiscussions main Synced 2w ago

READMEChangelog (10)Dependencies (4)Versions (13)Used By (0)

web-toolbox
===========

[](#web-toolbox)

This is a set of tools for web developers written with two concepts in mind: a gadget should do at least what it is supposed to do and, at the same time, it should do no more that what it is supposed to do.

In other words, keep it as simple as possible.

I, of course, use jQuery. I consider jQuery the most powerful JavaScript library ever, and I have never felt the need to re-invent the wheel.

I also appreciate Bootstrap, Bootstrap Icons and Font Awesome Free, and I consider them not only very useful web design tools, but also the very basis of modern web design.

Therefore, I conformed the layouts to the Bootstrap standards and I designed all my tools for an optional use of the two icon sets.

Requirements
------------

[](#requirements)

- jQuery 4
- Bootstrap Select 5.3.x, when using `jquery-bootstrap-select`
- Bootstrap Pickadate 5.3.x, when using `jquery-bootstrap-pickadate`

jQuery is treated as a frontend dependency and is not installed through Composer. Install it with your frontend package manager, for example with Yarn.

Install
-------

[](#install)

```
composer require gianlucagiacometti/web-toolbox
```

or

```
git clone https://github.com/gianlucagiacometti/web-toolbox.git
```

Then include the CSS and JS files you need in your web page.

Tools
-----

[](#tools)

- `jquery-toast`
- `jquery-bootstrap-select`
- `jquery-bootstrap-pickadate`

jquery-bootstrap-select
-----------------------

[](#jquery-bootstrap-select)

`jquery-bootstrap-select` is a jQuery wrapper and extended rendering layer for Bootstrap Select.

It can be used as a light bridge to Bootstrap Select in normal mode, or as a local paged renderer for very large select elements.

The wrapper does not replace Bootstrap Select. It uses Bootstrap Select underneath and adds jQuery-style initialisation, helper methods, and large-list rendering modes.

### Script order

[](#script-order)

Load jQuery first, then Bootstrap, then Bootstrap Select, then `jquery-bootstrap-select`.

```

```

### Basic usage

[](#basic-usage)

```

    One
    Two
    Three

```

```
$("#my-select").jqueryBootstrapSelect()
```

### Normal mode

[](#normal-mode)

Normal mode delegates rendering and behaviour to Bootstrap Select.

```

    One
    Two
    Three

```

```
$("#normal-select").jqueryBootstrapSelect()
```

### Large local select example

[](#large-local-select-example)

Paged mode keeps the full option source in memory and renders only the current page into Bootstrap Select.

This is useful when the full native select contains many options, but rendering all visual option rows at once would make the dropdown heavy or slow.

```

    Italy
    France
    Germany
    Japan

```

```
$("#country-select").jqueryBootstrapSelect()
```

Paged mode adds a compact pager above and below the option list:

```
Previous | Next | Page 2 / 6

```

The dropdown keeps its current placement while paging. If Bootstrap opens the dropdown above the field because the select is near the bottom of the page, the dropdown stays above while moving between pages.

Paged mode also applies a default `300px` dropdown width so large lists do not become unnecessarily wide. You can widen it, narrow it, or disable the fixed width with `data-bs-select-paged-dropdown-width` or the `pagedDropdownWidth` JavaScript option.

### Render modes

[](#render-modes)

ModeDescription`normal`Delegates rendering and behaviour to Bootstrap Select.`paged`Keeps the full option source in memory and renders only the current page.`remote`Reserved for future remote data loading.### Data attributes

[](#data-attributes)

AttributeDescription`data-bs-select-huge="true"`Enables huge-select handling. If no render mode is provided, paged mode is used.`data-bs-select-page-size="50"`Sets how many options are rendered per page.`data-bs-select-render-mode="paged"`Sets the render mode. Accepted values are `normal`, `paged`, and `remote`.`data-bs-select-paged-dropdown-width="300px"`Sets the dropdown width in paged mode. Use `false` to disable the default fixed width.### JavaScript options

[](#javascript-options)

Options can also be passed directly when initialising the plugin.

```
$("#country-select").jqueryBootstrapSelect({
    huge: true,
    pageSize: 50,
    renderMode: "paged",
    pagedListMaxHeight: "300px",
    pagedDropdownWidth: "300px"
})
```

OptionDefaultDescription`huge``false`Enables huge-select handling.`pageSize``50`Number of options rendered per page in paged mode.`renderMode``"normal"`Render mode. Accepted values are `normal`, `paged`, and `remote`.`destroyBootstrapSelect``true`Allows the wrapper to destroy and rebuild the underlying Bootstrap Select instance when needed.`pagedListMaxHeight``"300px"`Maximum height of the paged option list before internal scrolling is used.`pagedDropdownWidth``"300px"`Width applied to the dropdown in paged mode. Use `false` to leave the dropdown width untouched.### Methods

[](#methods)

The plugin follows the usual jQuery plugin style.

```
$("#country-select").jqueryBootstrapSelect("methodName", argument1, argument2)
```

#### `value()`

[](#value)

Gets the current value.

```
$("#country-select").jqueryBootstrapSelect("value")
```

#### `value(values, parameters)`

[](#valuevalues-parameters)

Sets the current value by delegating to Bootstrap Select.

```
$("#country-select").jqueryBootstrapSelect("value", "it")
```

For multiple selects:

```
$("#country-select").jqueryBootstrapSelect("value", ["it", "fr"])
```

#### `sort(parameters)`

[](#sortparameters)

Sorts the options.

```
$("#country-select").jqueryBootstrapSelect("sort")
```

In normal mode, sorting is delegated to Bootstrap Select.

In paged mode, the wrapper sorts the local source options and rebuilds the current page.

#### `disabled(status)`

[](#disabledstatus)

Sets the select as disabled or enabled.

```
$("#country-select").jqueryBootstrapSelect("disabled", true)
$("#country-select").jqueryBootstrapSelect("disabled", false)
```

#### `readonly(status)`

[](#readonlystatus)

Sets the select as readonly or not readonly.

```
$("#country-select").jqueryBootstrapSelect("readonly", true)
$("#country-select").jqueryBootstrapSelect("readonly", false)
```

#### `mode()`

[](#mode)

Returns the current render mode.

```
$("#country-select").jqueryBootstrapSelect("mode")
```

#### `isHuge()`

[](#ishuge)

Returns whether huge-select handling is enabled.

```
$("#country-select").jqueryBootstrapSelect("isHuge")
```

#### `pageSize()`

[](#pagesize)

Returns the configured page size.

```
$("#country-select").jqueryBootstrapSelect("pageSize")
```

#### `currentPageNumber()`

[](#currentpagenumber)

Returns the current page number, starting from 1.

```
$("#country-select").jqueryBootstrapSelect("currentPageNumber")
```

#### `pages()`

[](#pages)

Returns the total number of pages.

```
$("#country-select").jqueryBootstrapSelect("pages")
```

#### `previousPage()`

[](#previouspage)

Moves to the previous page.

```
$("#country-select").jqueryBootstrapSelect("previousPage")
```

#### `nextPage()`

[](#nextpage)

Moves to the next page.

```
$("#country-select").jqueryBootstrapSelect("nextPage")
```

#### `filter(search)`

[](#filtersearch)

Filters local source options in paged mode and rebuilds the rendered page.

```
$("#country-select").jqueryBootstrapSelect("filter", "it")
```

### Notes on paged mode

[](#notes-on-paged-mode)

Paged mode is designed for large local lists.

The original options are cloned and kept in memory. Only the current page is written into the native select and rendered by Bootstrap Select.

Current limits:

- `insert()` is not implemented for paged mode yet.
- `remove()` is not implemented for paged mode yet.
- `remote` mode is reserved for future remote data loading.

jquery-bootstrap-pickadate
--------------------------

[](#jquery-bootstrap-pickadate)

`jquery-bootstrap-pickadate` is a jQuery wrapper for Bootstrap Pickadate.

The wrapper does not replace Bootstrap Pickadate. It keeps Bootstrap Pickadate as the underlying plain JavaScript component and adds jQuery-style initialisation, helper methods, safe refresh/destroy calls, and framework-friendly helpers for dynamically injected HTML.

No companion CSS file is required. Styling remains provided by Bootstrap Pickadate.

### Script order

[](#script-order-1)

Load jQuery first, then Bootstrap, then Bootstrap Pickadate, then any locale files, then `jquery-bootstrap-pickadate`.

```

```

### Basic usage

[](#basic-usage-1)

```

```

```
$("#event-date-display").jqueryBootstrapPickadate()
```

### Same-input interval example

[](#same-input-interval-example)

```

```

```
$("#booking-dates-display").jqueryBootstrapPickadate()
```

### JavaScript options

[](#javascript-options-1)

Options are passed directly to Bootstrap Pickadate when the underlying component is created.

```
$("#event-date-display").jqueryBootstrapPickadate({
    locale: "current"
})
```

OptionDefaultDescription`destroyBootstrapPickadate``true`Allows the wrapper to destroy the underlying Bootstrap Pickadate instance when `destroy()` or `reinitialise()` is called.### Methods

[](#methods-1)

The plugin follows the usual jQuery plugin style.

```
$("#event-date-display").jqueryBootstrapPickadate("methodName", argument1, argument2)
```

#### `instanceObject()`

[](#instanceobject)

Returns the underlying Bootstrap Pickadate instance.

```
$("#event-date-display").jqueryBootstrapPickadate("instanceObject")
```

#### `refresh()`

[](#refresh)

Refreshes the underlying picker from the current data attributes and state.

```
$("#event-date-display").jqueryBootstrapPickadate("refresh")
```

#### `refreshLocale(locale)`

[](#refreshlocalelocale)

Refreshes the picker locale.

```
$("#event-date-display").jqueryBootstrapPickadate("refreshLocale", "current")
$("#event-date-display").jqueryBootstrapPickadate("refreshLocale", "it")
```

#### `reinitialise(options)`

[](#reinitialiseoptions)

Destroys and creates the picker again.

```
$("#event-date-display").jqueryBootstrapPickadate("reinitialise", {
    locale: "current"
})
```

#### `destroy()`

[](#destroy)

Destroys the underlying picker and removes the jQuery wrapper data.

```
$("#event-date-display").jqueryBootstrapPickadate("destroy")
```

#### `value()`

[](#value-1)

Gets the current ISO value.

```
$("#event-date-display").jqueryBootstrapPickadate("value")
```

For interval mode, the returned value is the combined ISO interval value:

```
yyyy-mm-dd/yyyy-mm-dd

```

#### `value(value)`

[](#valuevalue)

Sets the current value.

```
$("#event-date-display").jqueryBootstrapPickadate("value", "2026-06-25")
$("#booking-dates-display").jqueryBootstrapPickadate("value", "2026-06-01/2026-06-10")
```

#### `clear()`

[](#clear)

Clears the picker value.

```
$("#event-date-display").jqueryBootstrapPickadate("clear")
```

#### `today()`

[](#today)

Selects today when it is selectable.

```
$("#event-date-display").jqueryBootstrapPickadate("today")
```

#### `open()`, `close()`, `toggle()`

[](#open-close-toggle)

Controls the picker dropdown.

```
$("#event-date-display").jqueryBootstrapPickadate("open")
$("#event-date-display").jqueryBootstrapPickadate("close")
$("#event-date-display").jqueryBootstrapPickadate("toggle")
```

#### `setMin(value)` and `setMax(value)`

[](#setminvalue-and-setmaxvalue)

Sets runtime minimum and maximum selectable dates.

```
$("#event-date-display").jqueryBootstrapPickadate("setMin", "2026-01-01")
$("#event-date-display").jqueryBootstrapPickadate("setMax", "2026-12-31")
```

#### `setViewMonth(month)` and `setViewYear(year)`

[](#setviewmonthmonth-and-setviewyearyear)

Changes the visible month or year without changing the selected value.

```
$("#event-date-display").jqueryBootstrapPickadate("setViewMonth", 5)
$("#event-date-display").jqueryBootstrapPickadate("setViewYear", 2026)
```

Month numbers are zero-based, following JavaScript `Date` month indexes.

#### `moveMonth(delta)` and `moveYear(delta)`

[](#movemonthdelta-and-moveyeardelta)

Moves the visible calendar view.

```
$("#event-date-display").jqueryBootstrapPickadate("moveMonth", 1)
$("#event-date-display").jqueryBootstrapPickadate("moveYear", -1)
```

### Framework helpers

[](#framework-helpers)

The wrapper exposes helper methods for dynamically injected pages, components, and modals.

```
$.jqueryBootstrapPickadate.initialise(container, {
    locale: "current"
})
```

```
$.jqueryBootstrapPickadate.refreshAll(container)
$.jqueryBootstrapPickadate.refreshLocale("current", container)
$.jqueryBootstrapPickadate.destroyAll(container)
$.jqueryBootstrapPickadate.setDefaultLocale("it")
```

This is useful after AJAX-rendered HTML has been inserted into the page:

```
$.jqueryBootstrapPickadate.initialise(document.getElementById("main-content"), {
    locale: "current"
})
```

After a website language change:

```
$.jqueryBootstrapPickadate.setDefaultLocale("it")
$.jqueryBootstrapPickadate.refreshLocale("current")
```

jquery-toast
------------

[](#jquery-toast)

I decided to write a simple function on purpose. No need for a jQuery plugin, at least so far.

### Usage

[](#usage)

```
toast(type, options)
```

or, since the function returns a jQuery object:

```
var MyToast = toast(type, options)
```

### Basic usage examples

[](#basic-usage-examples)

```
toast("success", { title: "Toast personalised title", text: "Toast success message" })
```

```
toast("error", { text: "Toast error message", hasBootstrapIcons: true })
```

```
toast("warning", { text: "Toast warning message", hasFontAwesome: true })
```

NOTE: `hasBootstrapIcons: true` is the default setting.

NOTE: `message` is a synonym of `text`.

### Toast type

[](#toast-type)

`type` can be any string.

If the type value is one of the following: "success", "info", "warning" or "error", a default colour is automatically set for the title, the header background, and, if there is one, the header icon.

These default colours correspond to the equivalent Bootstrap colours for the same message types.

### Escaping untrusted text

[](#escaping-untrusted-text)

`jquery-toast` allows HTML in `title` and `text`.

When you need to display untrusted user input, escape it first:

```
const escapeHTML = (string) => $("").text(string).html();

toast("info", {
    title: "Message",
    text: escapeHTML(userInput)
});
```

### Toast options

[](#toast-options)

```
var options = {
    position:                // String
    closeIcon:               // Boolean
    autoClose:               // Integer|false
    autoRemove:              // Boolean
    transitionType:          // String
    maxStackMembers:         // Integer
    headerColor:             // String
    headerBackgroundColor:   // String
    iconClass:               // String
    title:                   // String
    titleAlign:              // String
    bodyTextAlign:           // String
    bodyTextColor:           // String
    bodyBackgroundColor:     // String
    text:                    // String|Array
    hasBootstrapIcons:       // Boolean
    hasFontAwesome:          // Boolean
    beforeShow:              // Function
    afterShown:              // Function
    beforeHide:              // Function
    afterHidden:             // Function
}
```

### Option details

[](#option-details)

```
position: "bottom-right"
// Action: sets the toast position
// Default value: "bottom-right"
// Accepted values: "bottom-right", "bottom-centre", "bottom-center", "bottom-left", "top-left", "top-centre", "top-center", "top-right", "mid-centre", "mid-center" or an object like { top: "top value", right: "right value", bottom: "bottom value", left: "left value" }

closeIcon: true
// Action: sets the close button either visible or hidden
// Default value: true
// Accepted values: either true or false
// Note: any non boolean value defaults to false

autoClose: 3000
// Action: sets the timeout for the toast to close automatically
// Default value: 3000
// Accepted values: any integer timeout value in milliseconds or false
// Note: any non integer value different from boolean false defaults to 3000

autoRemove: true
// Action: removes the toast element from the DOM right after the afterHidden function is called
// Default value: true
// Accepted values: either true or false
// Note: any non boolean value defaults to false

transitionType: "fade"
// Action: sets the transition type when the element shows or hides
// Default value: "fade"
// Accepted values: "fade", "slide", or false

maxStackMembers: 5
// Action: sets how many toast messages can be visible at the same time
// Default value: 5
// Accepted values: any positive integer

headerColor: null
// Action: sets the header text colour
// Default value: automatic according to toast type when available

headerBackgroundColor: null
// Action: sets the header background colour
// Default value: automatic according to toast type when available

iconClass: null
// Action: sets a custom icon class
// Default value: automatic according to toast type and icon library options

title: null
// Action: sets the toast title

titleAlign: null
// Action: sets the title text alignment

bodyTextAlign: null
// Action: sets the toast body text alignment

bodyTextColor: null
// Action: sets the toast body text colour

bodyBackgroundColor: null
// Action: sets the toast body background colour

text: null
// Action: sets the toast body text
// Accepted values: string or array

message: null
// Action: synonym of text

hasBootstrapIcons: true
// Action: enables Bootstrap Icons default icons

hasFontAwesome: false
// Action: enables Font Awesome default icons

beforeShow: null
// Action: function called before the toast is shown

afterShown: null
// Action: function called after the toast is shown

beforeHide: null
// Action: function called before the toast is hidden

afterHidden: null
// Action: function called after the toast is hidden
```

### Notes

[](#notes)

Use the tools independently. Include only the files you need for the specific page or project.

`jquery-bootstrap-select` requires Bootstrap Select.

`jquery-bootstrap-pickadate` requires Bootstrap Pickadate.

`jquery-toast` only requires jQuery and Bootstrap-compatible markup/styles.

###  Health Score

42

—

FairBetter than 88% of packages

Maintenance95

Actively maintained with recent releases

Popularity10

Limited adoption so far

Community9

Small or concentrated contributor base

Maturity46

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 96.6% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~55 days

Recently: every ~8 days

Total

12

Last Release

21d ago

Major Versions

v1.1.3 → v2.1.12026-06-23

PHP version history (2 changes)1.0.0PHP >=8.3.0

v1.1.3PHP >=8.4.0

### Community

Maintainers

![](https://www.gravatar.com/avatar/a0b87a5a9028115bee573b19f294fd618c20214889d9e2b6f947242a32a55496?d=identicon)[gianlucagiacometti](/maintainers/gianlucagiacometti)

---

Top Contributors

[![gianlucagiacometti](https://avatars.githubusercontent.com/u/52405?v=4)](https://github.com/gianlucagiacometti "gianlucagiacometti (84 commits)")[![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4)](https://github.com/github-actions[bot] "github-actions[bot] (3 commits)")

---

Tags

phpwebjavascriptcssdatabaseJSmysqlsqlitepostgresqlsqllessstylesheetdevelopmentwebsitetoolsToolboxprogramming

### Embed Badge

![Health badge](/badges/gianlucagiacometti-web-toolbox/health.svg)

```
[![Health](https://phpackages.com/badges/gianlucagiacometti-web-toolbox/health.svg)](https://phpackages.com/packages/gianlucagiacometti-web-toolbox)
```

###  Alternatives

[doctrine/dbal

Powerful PHP database abstraction layer (DBAL) with many features for database schema introspection and management.

9.7k614.3M7.4k](/packages/doctrine-dbal)[aura/sqlquery

Object-oriented query builders for MySQL, Postgres, SQLite, and SQLServer; can be used with any database connection library.

4573.2M41](/packages/aura-sqlquery)[ramadan/custom-fresh

A Laravel package to specify the tables that you do not want to drop while refreshing the database.

613.1k](/packages/ramadan-custom-fresh)[ramadan/easy-model

A Laravel package for enjoyably managing database queries.

111.6k](/packages/ramadan-easy-model)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)