{"id":18828390,"url":"https://github.com/dealfonso/power-buttons","last_synced_at":"2025-06-25T02:37:12.634Z","repository":{"id":118337819,"uuid":"426588135","full_name":"dealfonso/power-buttons","owner":"dealfonso","description":"Add additional functions to html buttons, before executing the function that they should execute (e.g. confirmation dialog, verification of values, execute tasks in background, etc.)","archived":false,"fork":false,"pushed_at":"2025-03-07T17:50:43.000Z","size":415,"stargazers_count":5,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-14T02:34:08.081Z","etag":null,"topics":["asynchronous-programming","bootstrap","button","forms","javascript","javascript-library","jquery","jquery-plugin","modal-dialogs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dealfonso.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-11-10T11:01:33.000Z","updated_at":"2025-03-07T17:50:47.000Z","dependencies_parsed_at":"2023-12-04T13:37:05.198Z","dependency_job_id":"e7c73abc-0f29-4c51-934c-5c55e55276d0","html_url":"https://github.com/dealfonso/power-buttons","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"purl":"pkg:github/dealfonso/power-buttons","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dealfonso%2Fpower-buttons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dealfonso%2Fpower-buttons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dealfonso%2Fpower-buttons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dealfonso%2Fpower-buttons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dealfonso","download_url":"https://codeload.github.com/dealfonso/power-buttons/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dealfonso%2Fpower-buttons/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261792179,"owners_count":23210270,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["asynchronous-programming","bootstrap","button","forms","javascript","javascript-library","jquery","jquery-plugin","modal-dialogs"],"created_at":"2024-11-08T01:24:52.979Z","updated_at":"2025-06-25T02:37:12.407Z","avatar_url":"https://github.com/dealfonso.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![PowerButtons Logo](img/power-buttons.png)\n\n# PowerButtons\n[![](https://data.jsdelivr.com/v1/package/gh/dealfonso/power-buttons/badge?style=rounded)](https://www.jsdelivr.com/package/gh/dealfonso/power-buttons) ![GitHub license](https://img.shields.io/github/license/dealfonso/power-buttons.svg) ![GitHub release](https://img.shields.io/github/release/dealfonso/power-buttons.svg) ![GitHub Release Date](https://img.shields.io/github/release-date/dealfonso/power-buttons.svg) ![Minified Size](https://img.shields.io/github/size/dealfonso/power-buttons/dist/powerbuttons.min.js)\n\nThis is a library that adds additional functionality to buttons (or any other html component) in a web page. The idea is to simplify some tasks that we usually do in web pages, such as adding a confirmation dialog prior to submitting a form, or verifying that some condition is met prior to executing a function.\n\nThe library adds the following types of buttons:\n1. _verify_ button that verifies that one condition is valid prior to executing the function that it should execute. And if the condition is not met, show a modal dialog to inform the user and interrupt its action. It is useful for (e.g.) form verification. ([see details](#verify-button))\n1. _confirm_ button that makes that a button shows a confirmation modal dialog prior to executing the function that it should execute. It is useful for (e.g.) confirm the action of submitting a form or deleting entries in a database. ([see details](#confirm-button))\n1. _asynctask_ button that executes an asynchronous task prior to executing its real action, and will show a modal dialog while it is being executed. It is useful for (e.g.) executing a long task prior to submitting a form. ([see details](#asynctask-button))\n1. _showmessage_ button, that shows a modal dialog with a message prior to executing its real action. It is useful for (e.g.) showing the user a message when he is submitting a form. ([see details](#showmessage-button))\n1. _formset_ button, that sets the values of a form fields prior to executing its real action. It is useful for (e.g.) setting a hidden field in a form prior to submitting it, or pre-filling a form. ([see details](#formset-button))\n1. _formbutton_ button, that substitutes the button by a form that will contain the button. It can also add hidden fields to the form, to be submitted along with the button. It is useful to avoid the need of creating unnecessary forms in the html code. ([see details](#formbutton-button))\n\nThe most simple example is the next one:\n\n```html\n\u003cbutton data-confirm=\"Are you sure?\"\u003eclickme\u003c/button\u003e\n```\n\nThen, when the button is clicked, a modal dialog such as the next one will be shown.\n\n![confirmation dialog](img/confirm1.png)\n\nBut it is possible to create more complex workflow such as in the next example:\n\n```html\n\u003cform name=\"fullexampleform\" method=\"get\"\u003e\n    \u003cinput type=\"text\" name=\"name\" class=\"form-control\" placeholder=\"User name\"\u003e\n    \u003cinput type=\"text\" name=\"email\" class=\"form-control\" placeholder=\"User email\"\u003e\n    \u003cinput type=\"hidden\" name=\"payload\" value=\"\"\u003e\n    \u003cbutton type=\"button\" class=\"btn btn-primary\" \n        data-verify=\"this.name.value != '' \u0026\u0026 this.email.value != ''\" \n        data-verify-form=\"fullexampleform\"\n        data-verify-not-verified=\"please fill all the fields\" \n        data-confirm=\"are you sure you want to submit this form?\" \n        data-showmessage=\"thank you for submitting the form\" \n        data-formset=\"fullexampleform\" data-formset-payload=\"javascript:JSON.stringify({name: this.name.value, email: this.email.value})\"\u003esubmit\u003c/button\u003e\n\u003c/form\u003e\n```\n\nIn this example we have a form. When the user submits it...\n\n1. the button verifies that the fields `name` and `email` are not empty. If they are empty, a modal dialog is shown to the user with the message _please fill all the fields_. \n2. If the fields are not empty, a confirmation dialog is shown to the user with the message _are you sure you want to submit this form?_. \n3. If the user confirms, a message dialog is shown to the user with the message _thank you for submitting the form_. \n4. And finally, the values of the fields `name` and `email` are set in the hidden field `payload` in the form\n5. ...and the form is submitted (it was its first purpose).\n\nAnd we did all this without writing a single line of javascript code except for the validation and the creation of the derived values in the payload.\n\nThe library is written in javascript and is mostly designed to work with [Bootstrap](https://getbootstrap.com), although it is not mandatory. It also provides integration with [jQuery](https://jquery.com), but it is not needed.\n\n# Setup\n\n## Serving from your servers\n\nYou can clone this repo and copy the main file into the appropriate folder, to serve using your server:\n\n```console\n$ git clone\n$ cp power-buttons/dist/power-buttons.js /path/to/my/html/folder\n```\n\n## Using a CDN\n\nYou can use this library directly from jsdelivr CDN\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/dealfonso/power-buttons@2/dist/powerbuttons.js\"\u003e\u003c/script\u003e\n```\n\n# Documentation\n\nIt is possible to use _PowerButtons_ in a declarative way (i.e. including parameters in the html5 tags), or programmatically in a script.\n\n## Using the library in a declarative way\n\nI prefer to use the library in a declarative way, so that I can add the functionality to the buttons without writing any javascript code. The library adds the functionality to the buttons by means of html5 attributes.\n\n\u003e Please get to [https://powerbuttons.readthedocs.io/](https://powerbuttons.readthedocs.io/) for the most up-to-date documentation.\n\n### Confirm Button\n\nThe _confirm_ button shows a confirmation dialog prior to executing its real action, so that the user can confirm that he really wants to execute the action.\n\nThe basic syntax to use this plugin is to include the attribute _confirm_ in the button tag such as the next one:\n```html\n\u003cbutton data-confirm=\"Are you sure?\"\u003eclickme\u003c/button\u003e\n```\n\nThen, when the button is clicked, a modal dialog such as the next one will be shown:\n![confirmation dialog](img/confirm1.png)\n\nOnce the _Confirm_ button is clicked, the dialog will be closed and the activity in the button will continue (i.e. submit or execute any other click handler).\n\nIn case that the dialog is closed by other means but the _Confirm_ button, the activity in the button will not continue (i.e. the submission will be cancelled, and any other click handler will not be executed).\n\nThe default values for the options are the next:\n\n```html\n\u003cbutton data-confirm=\"Please confirm this action\"\n    data-confirm-custom-content=\"\"\n    data-confirm-title=\"The action requires confirmation\"\n    data-confirm-button-confirm=\"Confirm\"\n    data-confirm-button-cancel=\"Cancel\"\n    data-confirm-button-close=\"true\"\n    data-confirm-escape-key=\"true\"\n    data-confirm-on-confirm=\"\"\n    data-confirm-dialog-class=\"\"\n    data-confirm-focus=\"\"\n    data-confirm-on-dialog-created=\"\"\n    \u003eclickme\u003c/button\u003e\n```\n\n### Verify Button\n\nThe _verify_ button is a button that verifies that one condition is valid prior to executing the function that it should execute. And if the condition is not met, show a modal dialog to inform the user and interrupt its action. \n\nThe basic syntax to use this verify button pluggin is to include the attribute _data-verify_ in the button tag such as the next one:\n```html\n\u003cbutton type=\"button\" data-verify=\"window.prompt('insert a text to fail') == ''\" data-verify-not-verified=\"you introduced a text\" onclick=\"alert('continue because you left the text blank')\"\u003etest verify\u003c/button\u003e\n```\n\nThen, whenever the button is pushed, the code inside the `data-verify` attribute will be evaluated and, if it did not return `true`, the default action for the element will be cancelled. \n\n\u003e In the case of the example, the code will show a prompt dialog to the user, and if the user does not leave the text blank, the verification will fail and the default action will be cancelled.\n\nThe default values for the options of the _verify_ button are the next:\n\n```html\n\u003cbutton data-verify=\"\"\n    data-verify-form=\"\"\n    data-verify-verified=\"\"\n    data-verify-not-verified=\"The condition for this action is not met\"\n    data-verify-custom-content-verified=\"\"\n    data-verify-custom-content-not-verified=\"\"\n    data-verify-title-verified=\"\"\n    data-verify-title-not-verified=\"The action requires verification\"\n    data-verify-button-accept=\"Accept\"\n    data-verify-button-close=\"false\"\n    data-verify-escape-key=\"true\"\n    data-verify-header=\"true\"\n    data-verify-footer=\"true\"\n    data-verify-dialog-class=\"\"\n    data-verify-focus=\"\"\n    data-verify-on-dialog-created=\"\"\u003etest verify\u003c/button\u003e\n```\n\n### ShowMessage Button\n\nThe _showmessage_ button is a button that shows a modal dialog with a message prior to executing its real action. It is useful for (e.g.) showing the user a message when he is submitting a form.\n\nThe basic syntax to use this plugin is to include the attribute _data-showmessage_ in the button tag such as the next one:\n```html\n\u003cbutton type=\"button\" data-showmessage=\"hello world\" onclick=\"alert('now the button continues')\"\u003eshowmessage test\u003c/button\u003e\n```\n\nThen, when the button is clicked, a modal dialog will be shown with the message and once it is closed, the activity in the button will continue.\n\n\u003e In the case of the example, the code will show a modal dialog with the message _hello world_, and once the dialog is closed, it will show an alert with the message _now the button continues_.\n\nThe default values for the options of the _showmessage_ button are the next:\n\n```html\n\u003cbutton data-showmessage=\"This is a message\"\n    data-showmessage-custom-content=\"\"\n    data-showmessage-title=\"\"\n    data-showmessage-button-accept=\"Accept\"\n    data-showmessage-button-close=\"true\"\n    data-showmessage-escape-key=\"true\"\n    data-showmessage-header=\"true\"\n    data-showmessage-footer=\"true\"\n    data-showmessage-dialog-class=\"\"\n    data-showmessage-focus=\"\"\n    data-showmessage-on-dialog-created=\"\"\u003etest showmessage\u003c/button\u003e\n```\n\n### Override Actions\n\nThis is a special case for the actions chain that is intended to override the next actions chained for this button. If is useful to enable a simple workflow for the power-actions.\n\nThe basic syntax to use this plugin is to include the attribute _data-override_ in the button tag (along with other actions) such as the next one:\n```html\n\u003cbutton type=\"button\" \n    data-override=\"window.fileExists()\"\n    data-confirm=...\n\u003eupload file\u003c/button\u003e\n```\n\n**Use case**: A submit button that may overwrite a file. It is possible to use the `confirm` action to ask the user if he is sure to overwrite the file. But if the file did not exist, the app should not ask for confirmation. In this case, the `override` action can be used to skip the `confirm` action if the file does not exist (__*__ in the declarative way, the `override` action is the first action to be executed).\n```html\n\u003cbutton type=\"button\" data-override=\"window.fileExists()\" data-confirm=\"Are you sure you want to overwrite the file?\" onclick=\"alert('file overwritten')\"\u003eupload file\u003c/button\u003e\n```\n\n### FormSet Button\n\nThe _formset_ button is a button that sets the values of a form fields prior to executing its real action. It is useful for (e.g.) setting a hidden field in a form prior to submitting it, or pre-filling a form.\n\nThe basic syntax to use this plugin is to include the attribute _data-formset_ in the button tag such as the next one:\n```html\n\u003cform name=\"testform1\"\u003e\n    \u003cinput type=\"text\" name=\"testinput1\" class=\"form-control\"\u003e\n    \u003cinput type=\"text\" name=\"testinput2\" class=\"form-control\"\u003e\n\u003c/form\u003e\n\u003cbutton type=\"button\" data-formset=\"testform1\" data-formset-testinput1=\"value for field 1\" data-formset-testinput2=\"javascript:'value for field 2 taken from field 1 using javascript expression: ' + this.testinput1.value\"\u003etest formset\u003c/button\u003e\n```\n\nWhen the button is clicked, the values of the fields `testinput1` and `testinput2` will be set to the values in the attributes `data-formset-testinput1` and `data-formset-testinput2` respectively.\n\nTake into account that the values to set can be either plain text or javascript expressions (provided that the value to set starts with `javascript:`). These expressions will be evaluated in the context of the form (i.e. `this` will be the form), at the moment of clicking the button.\n\n\u003e **IMPORTANT:** in javascript, the names of the dataset attributes cannot contain dashes, and also are camel cased. So the names of the fields to set are case insensitive and cannot contain dashes.\n\n### FormButton Button\n\nThe _formbutton_ button is a button that substitutes the button by a form that will contain the button. It can also add hidden fields to the form, to be submitted along with the button.\n\nThe basic syntax to use this plugin is to include the attribute _data-formbutton_ in the button tag such as the next one:\n```html\n\u003cbutton type=\"button\" data-formbutton data-formbutton-field-x1=\"valueforx1\" name=\"my-form-button\" value=\"1\"\u003eform button\u003c/button\u003e\n```\n\nThis code is automatically translated into the next one:\n\n```html\n\u003cform\u003e\n    \u003cinput type=\"hidden\" name=\"x1\" value=\"valueforx1\"\u003e\n    \u003cbutton type=\"button\" name=\"my-form-button\" value=\"1\"\u003e\n\u003c/form\u003e\n```\n\n\u003e I find that it is very useful to avoid the need of creating unnecessary forms in the html code. For example, a web app with a control panels with many buttons and each of them may submit to different urls or with different parameters.\n\nThe default values for the options of the _formbutton_ button are the next:\n\n```html\n\u003cbutton data-formbutton=\"\"\n    data-formbutton-method=\"post\"\n    data-formbutton-form-class=\"formbutton\"\n    data-formbutton-form-id=\"\"\n    data-formbutton-convert-case=\"snake\"\u003etest formbutton\u003c/button\u003e\n```\n\nIn the tag you can also add multiple `data-formbutton-field-*` which are the additional fields to add to the form, along with their values. The name of the field is the name of the attribute without the prefix `data-formbutton-field-`. The value of the field can be either plain text or javascript expressions (provided that the value to set starts with `javascript:`). These expressions will be evaluated in the context of the form (i.e. `this` will be the form), at the moment of clicking the button.\n\n### AsyncTask Button\n\nThe _asynctask_ button is a button that executes an asynchronous task prior to executing its real action, and will show a modal dialog while it is being executed. \n\nThe basic syntax to use this plugin is to include the attribute _data-asynctask_ in the button tag such as the next one:\n```html\n\u003cbutton data-asynctask=\"fetch('https://hub.dummyapis.com/delay?seconds=5', {mode:'no-cors'})\"\u003easync task\u003c/button\u003e\n```\n\nWhen the button is clicked, the code inside the `data-asynctask` attribute will be evaluated and, the modal dialog will be shown until the evaluation of the code finalizes.\n\n\u003e In the case of the example, the code will fetch a dummy url that will take 5 seconds to respond. The modal dialog will be shown until the response is received.\n\nThe default values for the options of the _asynctask_ button are the next:\n\n```html\n\u003cbutton data-asynctask=\"\"\n    data-asynctask-title=\"Please wait\"\n    data-asynctask-message=\"Please wait while the task is being executed\"\n    data-asynctask-custom-content=\"\"\n    data-asynctask-button-cancel=\"Cancel\"\n    data-asynctask-cancel=\"\"\n    data-asynctask-header=\"true\"\n    data-asynctask-footer=\"true\"\n    data-asynctask-dialog-class=\"\"\n    data-asynctask-focus=\"\"\n    data-asynctask-on-dialog-created=\"\"\u003easync task\u003c/button\u003e\n```\n\n#### A note on the tasks to execute\n\nIt is important that the code inside the `data-asynctask` will be waited for its finalization. So the code executed as the asynctask must be either a synchronous function or a promise. If it is a promise, it will be awaited for its finalization. If it is a function, it will be executed and awaited for its finalization.\n\nE.g. the next code (which is similar to the previous example, but delayed in time) will not work as expected:\n\n```html\n\u003cbutton data-asynctask=\"setTimeout(() =\u003e fetch('https://hub.dummyapis.com/delay?seconds=5', {mode:'no-cors'}), 1000)\"\u003easync task\u003c/button\u003e\n```\n\nIn this case, the function returns inmediately and so the modal dialog will be shown and closed immediately. The correct way to do it is to return a promise that will be resolved when the timeout is finished:\n\n```html\n\u003cbutton data-asynctask=\"new Promise((resolve) =\u003e setTimeout(() =\u003e fetch('https://hub.dummyapis.com/delay?seconds=5', {mode:'no-cors'}).then(resolve),  1000))\"\u003easync task\u003c/button\u003e\n```\n\nIf the code is synchronous, it will be executed and awaited for its finalization. E.g. the next code will work as expected:\n\n```html\n\u003cbutton data-asynctask=\"let now = performance.now(); while (performance.now() - now \u003c 5000) {}\"\u003easync task\u003c/button\u003e\n```\n\n\u003e This code simply runs an unuseful loop for 5 seconds before returning. The modal dialog will be shown until the code returns.\n\n#### Cancellable tasks\n\nIf your task can be aborted, it is possible to set a _cancel_ callback to the _asynctask_ by means of the `data-asynctask-cancel` attribute. If the callback is provided, a cancel button will appear in the modal dialog and, if pressed, the code will be evaluated when the cancel button is pressed.\n\nHave in mind that the execution of the cancellation code will not make the dialog to be hidden: the dialog will be hidden when the code returns. So your function needs to be cancellation-aware. This is made in this way to protect the execution of the original code.\n\nE.g. the next code is a very simple example of a cancellation-aware function:\n\n```html\n\u003cscript\u003e\nvar abort = null;\nfunction runningtask() {\n    return new Promise((resolve, reject) =\u003e {\n        abort = reject;\n        setTimeout(() =\u003e { resolve(); }, 5000);\n    });\n}\n\u003c/script\u003e\n\u003cbutton data-asynctask=\"runningtask()\" data-asynctask-cancel=\"abort()\" \u003easync task\u003c/button\u003e\n```\n\n\u003e **NOTE:** This example does not efectively end the task. You can find a much better example in the [examples.html](examples.html) file.\n\n## Using the library programmatically\nOnce you have your interface, you can use the programmatical method to add any of the functionalities to your buttons.\n\nYou can either use vanilla javascript or jQuery. In the former case, the syntax is:\n\n```javascript\nlet options = {\n    confirm: \"Are you sure?\"\n};\nlet mybutton = document.getElementById('mybutton');\nwindow.powerButtons('confirm', mybutton, options);\n```\n\nIn the case of jQuery, the syntax is:\n\n```javascript\nlet options = {\n    confirm: \"Are you sure?\"\n};\n$('#mybutton').powerButtons('confirm', options);\n```\n\nThe names for the available plugins can be seen in the first section of this document: _confirm_, _verify_, _showmessage_ and _formset_.\n\n### Functions available in the programmatical method\n\nThe `powerButtons` library offers the next functions:\n\n- `powerButtons(element, options)`: adds the functionality of the plugin to the element, by discovering the plugin from the attributes of the element (i.e. `data-confirm`, `data-verify`, etc.).\n- `powerButtons(plugin, element, options)`: adds the functionality of the specified plugin to the element. The plugin can be any of the available plugins: _confirm_, _verify_, _showmessage_, _formset_, _formbutton_ or _asynctask_. The element can be either a selector, a DOM element or an array of DOM elements. The options are the options for the plugin.\n- `powerButtons.discover(element)`: discovers the plugin from the attributes of the element (i.e. `data-confirm`, `data-verify`, etc.) and initializes the elements with the appropriate plugin(s).\n- `powerButtons.discoverAll()`: triggers the discovery of the plugins in all the elements in the document using the attributes of the element (i.e. `data-confirm`, `data-verify`, etc.) and initializes the elements with the appropriate plugin(s).\n- `powerButtons.plugins()`: returns the names of the available plugins.\n- `powerButtons.version`: is a string that contains the version of the library.\n\n### Multiple plugins in the same button\n\nA button can contain multiple of these functionalities at the same time. For example, a button can be a _confirm_ button and a _verify_ button at the same time. \n\nIf using the declarative method, there is a fixed order:\n\n1. _verify_\n1. _confirm_\n1. _asynctask_\n1. _showmessage_\n1. _override_\n1. _formset_\n1. _formbutton_ (set the field values that depend on a function)\n1. the real action (i.e. `onclick` handler)\n\nIf using the programmatical method, the order in which the actions are added is the order in which they will be executed.\n\nE.g. a button can be a _confirm_ button and a _verify_ button at the same time:\n\n```javascript\n$('#mybutton').powerButtons('confirm', options).powerButtons('showmessage', {showmessage: \"The confirmation has been done\"});\n```\n\nThe button will first show a confirmation dialog, and if it is confirmed, it will show a message dialog, and finally it will continue with its action.\n\n### Default values\n\nThe default values for the options can be set globally, so that any not defined value will default to the globals. The defaults are stored in `windows.powerButtons.defaults`, in an associative array where the index are the names of the plugins. As an example, `window.powerButtons.defaults['confirm']` contains the default values for the _confirm_ plugin.\n\nThe default values for each plugin are the next:\n\n#### _verify_\n\n```javascript\n// The function to call to verify the action. It must return a true or false value. If it is an string, it will be evaluated as javascript, using _eval_\nverify: null,\n// The form to bind the verification to. If it is a string, it will be interpreted as a selector (it is not verified if it is a form or any other object). If null, the verification will be bound to the document\nform: null,\n// The content of the message to show to the user if verified to true (it can be either plain text or a HTML fragment)\nverified: null,\n// The content of the message to show to the user if verified to false (it can be either plain text or a HTML fragment)\nnotVerified: \"The condition for this action is not met\",\n// A custom content to show to the user under the message when verified (it can be either plain text or a HTML fragment)\ncustomContentVerified: null,\n// A custom content to show to the user under the message when not verified (it can be either plain text or a HTML fragment)\ncustomContentNotVerified: null,\n// The content of the title of the dialog when the condition is not verified (it can be either plain text or a HTML fragment)\ntitleNotVerified: \"The action requires verification\",\n// The content of the title of the dialog when the condition is verified (it can be either plain text or a HTML fragment)\ntitleVerified: null,\n// The content for the button that confirms the action (it can be either plain text or a HTML fragment)\nbuttonAccept: \"Accept\",\n// If falshi (i.e. null, 0, false, \"false\"), the button to close the dialog will not be shown\nbuttonClose: false,\n// If falshi (i.e. null, 0, false, \"false\"), the esc key will not close the dialog (it will close it if true)\nescapeKey: true,\n// If falshi (i.e. null, 0, false, \"false\"), the head of the dialog will be hidden\nheader: true,\n// If falshi (i.e. null, 0, false, \"false\"), the footer of the dialog will be hidden\nfooter: true,\n// The class to apply to the dialog\ndialogClass: \"fade\",\n// The selector to focus when the dialog is shown\nfocus: \"\",\n// The function to call when the html for the dialog is created\nonDialogCreated: (dialog) =\u003e {}\n```\n\nThe equivalent for html5 attributes are the snake-case version of each of them, with the prefix `data-verify-`; e.g. `data-verify-button-accept`, `data-verify-title-not-verified`, etc.\n\n#### _confirm_\n\n```javascript\n// The content of the message to show to the user (it can be either plain text or a HTML fragment)\nconfirm: \"Please confirm this action\",\n// A custom content to show to the user under the message (it can be either plain text or a HTML fragment)\ncustomContent: null,\n// The content of the title of the dialog (it can be either plain text or a HTML fragment)\ntitle: \"The action requires confirmation\",\n// The content for the button that confirms the action (it can be either plain text or a HTML fragment)\nbuttonConfirm: \"Confirm\",\n// The content for the button that cancels the action (it can be either plain text or a HTML fragment)\nbuttonCancel: \"Cancel\",\n// The function to call when the action is confirmed. If it is a string, it will be evaluated as javascript, using _eval_\nonConfirm: null,\n// If falshi (i.e. null, 0, false, \"false\"), the button to close the dialog will not be shown\nbuttonClose: true,\n// If falshi (i.e. null, 0, false, \"false\"), the esc key will not close the dialog (it will close it if true)\nescapeKey: true,\n// The class to apply to the dialog\ndialogClass: \"fade\",\n// The selector to focus when the dialog is shown\nfocus: \"\"\n// The function to call when the html for the dialog is created\nonDialogCreated: (dialog) =\u003e {}\n```\n\nThe equivalent for html5 attributes are the snake-case version of each of them, with the prefix `data-confirm-`; e.g. `data-confirm-button-confirm`, `data-confirm-title`, etc.\n\n#### _showmessage_\n\n```javascript\n// The content of the message to show to the user (it can be either plain text or a HTML fragment)\nshowmessage: \"This is a message\",\n// A custom content to show to the user under the message (it can be either plain text or a HTML fragment)\ncustomContent: null,\n// The content of the title of the dialog (it can be either plain text or a HTML fragment)\ntitle: null,\n// If falshi (i.e. null, 0, false, \"false\"), the button to close the dialog will not be shown\nbuttonAccept: \"Accept\",\n// If falshi (i.e. null, 0, false, \"false\"), the esc key will not close the dialog (it will close it if true)\nescapeKey: true,\n// If falshi (i.e. null, 0, false, \"false\"), the button to close the dialog will not be shown\nbuttonClose: true,\n// If falshi (i.e. null, 0, false, \"false\"), the head of the dialog will be hidden\nheader: true,\n// If falshi (i.e. null, 0, false, \"false\"), the footer of the dialog will be hidden\nfooter: true,\n// The class to apply to the dialog\ndialogClass: \"fade\",\n// The selector to focus when the dialog is shown\nfocus: \"\"\n// The function to call when the html for the dialog is created\nonDialogCreated: (dialog) =\u003e {}\n```\n\nThe equivalent for html5 attributes are the snake-case version of each of them, with the prefix `data-showmessage-`; e.g. `data-showmessage-button-accept`, `data-showmessage-title`, etc.\n\n#### _override_\n\n```javascript\n// The function to call to check for overriding the next actions. It must return a true or false value. If it is an string, it will be evaluated as javascript, using _eval_\noverride: null,\n// The form to bind the verification to. If it is a string, it will be interpreted as a selector (it is not verified if it is a form or any other object). If null, the verification will be bound to the document\nform: null,\n// The content of the message to show to the user if `override` evaluates to true (it can be either plain text or a HTML fragment)\noverridden: null,\n// A custom content to show to the user under the message when `override` evaluates to true (it can be either plain text or a HTML fragment)\ncustomContent: null,\n// The content of the title of the dialog when `override` evaluates to true (it can be either plain text or a HTML fragment)\ntitle: null,\n// The content for the button that confirms the action (it can be either plain text or a HTML fragment)\nbuttonAccept: \"Accept\",\n// If falshi (i.e. null, 0, false, \"false\"), the esc key will not close the dialog (it will close it if true)\nescapeKey: true,\n// The class to apply to the dialog\ndialogClass: \"fade\",\n// The selector to focus when the dialog is shown\nfocus: \"\"\n// The function to call when the html for the dialog is created\nonDialogCreated: (dialog) =\u003e {}\n```\n\nThe equivalent for html5 attributes are the snake-case version of each of them, with the prefix `data-override-`; e.g. `data-override-button-accept`, `data-override-title`, etc.\n\n#### _formset_\n\n```javascript\n// The form whose values are to be set. If it is a string, it will be interpreted as a selector.\nform: null,\n// A map of field names and values to set in the form. The values can be either plain text or a HTML fragment. If the value is a function, it will be evaluated in the context of the form (i.e. this will be the form). If it is a string that starts with \"javascript:\", it will be evaluated as javascript code.\nfields: {}\n```\n\nThe fields parameter contains a dictionary of field names and values to set in the form. The values can be either strings, functions or javascript code (i.e. string starting with `javascript:`). If the value is a function (or javascript code), it will be evaluated in the context of the form (i.e. `this` will be the form) at the moment of clicking the button. Otherwise it will be set as the value of the field.\n\nThe equivalent for html5 attributes are `data-formset-form` for the case of the form to set, and the case-insensitive name of the each of the fields to set with the prefix `data-formset-`; e.g. `data-formset-q` to set the value for field named (or with id) `q`.\n\n#### _formbutton_\n    \n```javascript\n// The URL to submit the form\nformbutton: null,\n// The method to use for the form\nmethod: 'post',\n// The class to use for the form\nformClass: 'formbutton',\n// Wether to convert the case of the payload names to kebab-case, snake_case, camelCase or PascalCase\nconvertCase: 'none',\n// The id to use for the form\nformId: null,\n// The additional fields to add to the form, along with their values\nfields: {}\n```\n\nThe fields parameter contains a dictionary of field names and values to set in the form. The values can be either strings, functions or javascript code (i.e. string starting with `javascript:`). If the value is a function (or javascript code), it will be evaluated in the context of the form (i.e. `this` will be the form) at the moment of clicking the button. Otherwise it will be set as the value of the field at the moment of creating the form.\n\nThe equivalent for html5 attributes for the fields are the case-insensitive name of the each of the fields to set with the prefix `data-formbutton-`; e.g. `data-formbutton-q` to add the a field with name `q` to the form.\n\n#### _asynctask_\n\n```javascript\n// The function to call to execute the action.\ntask: null,\n// The content of the message to show to the user while the task is being executed (it can be either plain text or a HTML fragment)\nmessage: \"Please wait...\",\n// A custom content to show to the user under the message (it can be either plain text or a HTML fragment)\ncustomContent: null,\n// The content of the title of the dialog (it can be either plain text or a HTML fragment)\ntitle: null,\n// The content for the button that cancels the action (it can be either plain text or a HTML fragment)\nbuttonCancel: \"Cancel\",\n// The function to call to cancel the action (if null, the button will not be shown)\ncancel: null,\n// If falshi (i.e. null, 0, false, \"false\"), the head of the dialog will be hidden\nheader: true,\n// If falshi (i.e. null, 0, false, \"false\"), the footer of the dialog will be hidden\nfooter: true,\n// The class to apply to the dialog\ndialogClass: \"fade\",\n// The selector to focus when the dialog is shown\nfocus: \"\"\n// The function to call when the html for the dialog is created\nonDialogCreated: (dialog) =\u003e {}\n```\n\nThe `task` and `cancel` parameters may be either functions, promises or strings containing javascript code. If they are functions, they will be executed. If they are promises, they will be awaited for their finalization. If they are strings, they will be evaluated as javascript code.\n\n## Internationalization\n\nThe internationalization for this library can be made by means of the global configuration of the library.\n\n**Example of changing language**\n\n```javascript\n\u003chead\u003e\n(...)\n\u003cscript\u003e\nfunction spanish() {\n    // Modal dialog texts in Spanish\n    window.powerButtons.defaults['config'] = {\n        confirm: \"Por favor confirme la acción\",\n        title: \"Esta acción requiere confirmación\",\n        buttonConfirm: \"Confirmar\",\n        buttonCancel: \"Cancelar\",\n    };\n}\nfunction english() {\n    // Modal dialog texts in English\n    window.powerButtons.defaults['config'] = {\n        confirm: \"Please confirm your action\",\n        title: \"This action requires confirmation\",\n        buttonConfirm: \"Confirm\",\n        buttonCancel: \"Cancel\",\n    };\n}\nfunction french() {\n    // Modal dialog texts in French\n    window.powerButtons.defaults['config'] = {\n        confirm: \"Veuillez confirmer votre action\",\n        title: \"Cette action nécessite votre confirmation\",\n        buttonConfirm: \"Confirmer\",\n        buttonCancel: \"Annuler\",\n    };\n}\n\u003c/script\u003e\n\u003c/head\u003e\n```\n\nAnd then, in the html body...\n\n```html\n\u003cbutton onclick=\"english()\" data-confirm=\"Want to set the texts of the library to english?\"\u003eenglish\u003c/button\u003e\n\u003cbutton onclick=\"spanish()\" data-confirm=\"¿Quiere utilizar los textos de la librería en español?\"\u003eespañol\u003c/button\u003e\n\u003cbutton onclick=\"french()\" data-confirm=\"Vous souhaitez utiliser les textes de la librairie en français?\"\u003efrançais\u003c/button\u003e\n```\n\n## Using the library in other than buttons\n\nWe can use this library in any other clickable component than buttons; e.g. `a`, `images`, `li`, etc. The usage is the same as in buttons, but using the appropriate tag. \n\nE.g. will ask for confirmation before following the link:\n\n```html\n\u003ca href=\"https://github.com\" class=\"btn btn-primary\" data-confirm=\"are you sure you want to follow this link?\"\u003efollow link\u003c/a\u003e\n```\n\nE.g. will show a message when the image is clicked:\n\n```html\n\u003cimg src=\"https://picsum.photos/400/200\" data-showmessage=\"Thank you for clicking\"\u003e\n```\n\n## Utilities\n\nThe library exports some utility function that can be used in other javascript code. These utilities are under the namespace `window.powerButtons.utils`.\n\nAt this moment the utilities exported are related to the creation of modal dialogs. The functions are:\n\n- `window.powerButtons.utils.confirmDialog(message, title, onConfirm, onCancel, cancellable)`: creates a modal dialog with the given options. The dialog will have a message, a title, and two buttons: _Confirm_ and _Cancel_. The _Confirm_ button will execute the function `onConfirm` and the _Cancel_ button will execute the function `onCancel`. If the dialog is cancellable, it will be closed if the user clicks outside the dialog or presses the escape key.\n\n- `window.powerButtons.utils.alertDialog(message, title, onAccept)`: creates a modal dialog with the given options. The dialog will have a message, a title, and one button: _Accept_. The _Accept_ button will execute the function `onAccept` (if provided). The dialog will be closed if the user clicks outside the dialog or presses the escape key.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdealfonso%2Fpower-buttons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdealfonso%2Fpower-buttons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdealfonso%2Fpower-buttons/lists"}