{"_id":"@akamine96204/jsdialog","_rev":"3-d5c69470402eea724d7bfacb2dfaafe5","name":"@akamine96204/jsdialog","dist-tags":{"latest":"3.5.1"},"versions":{"3.4.4":{"name":"@akamine96204/jsdialog","version":"3.4.4","keywords":["javascript-dialog","jsdialog","promised-based","dialog"],"author":{"name":"Akamine20496"},"license":"ISC","_id":"@akamine96204/jsdialog@3.4.4","maintainers":[{"name":"akamine96204","email":"akaminekinoshita03@gmail.com"}],"homepage":"https://github.com/Akamine20496/jsdialog#readme","bugs":{"url":"https://github.com/Akamine20496/jsdialog/issues"},"dist":{"shasum":"ebeeedaffd487e33f66727188859a5f6697b7594","tarball":"https://registry.npmjs.org/@akamine96204/jsdialog/-/jsdialog-3.4.4.tgz","fileCount":4,"integrity":"sha512-5yNB9pi3vVaqZUaUMG2tGDf6uNg6LXu9/41hrxfSS7UlGozQE3We0U+3cm8dNu88dGK+4nkD7W91yvD4eiER9g==","signatures":[{"sig":"MEYCIQClED4sQWhyYJijRP+ll5R5YtZENWxzje8OY3ZA1uScGAIhAN8VoPnC+XZxqz6Lkx3rt9WeIdtba9xlXByRjwWCTwFc","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":29257},"main":"dist/dialog.min.js","type":"module","types":"dist/dialog.d.ts","gitHead":"affadc2d0cb72808513f743228cd2308877ab17e","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"esbuild src/dialog.js --minify --format=esm --keep-names --outfile=dist/dialog.min.js && shx cp src/dialog.d.ts dist/","watch":"esbuild src/dialog.js --minify --format=esm --keep-names --outfile=dist/dialog.min.js && shx cp src/dialog.d.ts dist/ --watch"},"_npmUser":{"name":"akamine96204","email":"akaminekinoshita03@gmail.com"},"repository":{"url":"git+https://github.com/Akamine20496/jsdialog.git","type":"git"},"_npmVersion":"11.1.0","description":"Promised-based JavaScript Dialog Utility","directories":{},"_nodeVersion":"22.14.0","_hasShrinkwrap":false,"devDependencies":{"shx":"^0.3.4","esbuild":"^0.25.1"},"_npmOperationalInternal":{"tmp":"tmp/jsdialog_3.4.4_1742138365441_0.306215205428257","host":"s3://npm-registry-packages-npm-production"}},"3.4.6":{"name":"@akamine96204/jsdialog","version":"3.4.6","keywords":["javascript-dialog","jsdialog","promised-based","dialog"],"author":{"name":"Akamine20496"},"license":"ISC","_id":"@akamine96204/jsdialog@3.4.6","maintainers":[{"name":"akamine96204","email":"akaminekinoshita03@gmail.com"}],"homepage":"https://github.com/Akamine20496/jsdialog#readme","bugs":{"url":"https://github.com/Akamine20496/jsdialog/issues"},"dist":{"shasum":"0f707b0cfa045b611ce9da56786f52b16658ac53","tarball":"https://registry.npmjs.org/@akamine96204/jsdialog/-/jsdialog-3.4.6.tgz","fileCount":4,"integrity":"sha512-u9WjtzLxY2rv94n2FpvhUGhwirjKCLXpBOrshkvgjIth1vxE459QBopVQObu4WtnQVe1RJZsSDMi4DlQbTf5AQ==","signatures":[{"sig":"MEUCIQCbjQ3JT22DU8P8N36MwIaIatFG70x49HuI6jZAfcRbagIgW44pFMcf6GCdedlQJRtEU6bWhM0hZjea7Qpa+GNfxLY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":30949},"main":"dist/dialog.min.js","type":"module","types":"dist/dialog.d.ts","gitHead":"99afe19d31380bb4f4cb7f9a79cc895a95d1263d","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"esbuild src/dialog.js --minify --format=esm --keep-names --outfile=dist/dialog.min.js && shx cp src/dialog.d.ts dist/","watch":"esbuild src/dialog.js --minify --format=esm --keep-names --outfile=dist/dialog.min.js && shx cp src/dialog.d.ts dist/ --watch"},"_npmUser":{"name":"akamine96204","email":"akaminekinoshita03@gmail.com"},"repository":{"url":"git+https://github.com/Akamine20496/jsdialog.git","type":"git"},"_npmVersion":"11.1.0","description":"Promised-based JavaScript Dialog Utility","directories":{},"_nodeVersion":"22.14.0","_hasShrinkwrap":false,"devDependencies":{"shx":"^0.3.4","csstype":"^3.1.3","esbuild":"^0.25.1"},"_npmOperationalInternal":{"tmp":"tmp/jsdialog_3.4.6_1742229040773_0.6683709884240108","host":"s3://npm-registry-packages-npm-production"}},"3.5.1":{"name":"@akamine96204/jsdialog","version":"3.5.1","description":"Promised-based JavaScript Dialog Utility","keywords":["javascript-dialog","jsdialog","promised-based","dialog"],"homepage":"https://github.com/Akamine20496/jsdialog#readme","bugs":{"url":"https://github.com/Akamine20496/jsdialog/issues"},"repository":{"type":"git","url":"git+https://github.com/Akamine20496/jsdialog.git"},"license":"ISC","author":{"name":"Akamine20496"},"type":"module","main":"dist/dialog.min.js","types":"dist/dialog.d.ts","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"esbuild src/dialog.js --minify --format=esm --keep-names --outfile=dist/dialog.min.js && shx cp src/dialog.d.ts dist/","watch":"esbuild src/dialog.js --minify --format=esm --keep-names --outfile=dist/dialog.min.js && shx cp src/dialog.d.ts dist/ --watch"},"devDependencies":{"csstype":"^3.1.3","esbuild":"^0.25.1","shx":"^0.3.4"},"_id":"@akamine96204/jsdialog@3.5.1","gitHead":"d0a34d2d76a12fd5341fbd465725d4aaf719fa1a","_nodeVersion":"22.16.0","_npmVersion":"11.4.0","dist":{"integrity":"sha512-I1BqkAYPSJp14kEf5xfmGLvaSLoxC2auTPZTvOTMdVkFTZhy0JCj8M3x4Hxe9118sEf4ttz5IgB68LknwrjuKQ==","shasum":"49fe797a8f065a99b759b79bbc6b3036f92e4f8e","tarball":"https://registry.npmjs.org/@akamine96204/jsdialog/-/jsdialog-3.5.1.tgz","fileCount":4,"unpackedSize":31299,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIF9bbN7kMPbiuf2iSA4C7H5Jyq83ycMbkI8h4/xF9cROAiEAtC2oe6uWi90p0B3F4frVBiqZ6DPr+f0oCNZBDVssnPw="}]},"_npmUser":{"name":"akamine96204","email":"akaminekinoshita03@gmail.com"},"directories":{},"maintainers":[{"name":"akamine96204","email":"akaminekinoshita03@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/jsdialog_3.5.1_1748708581258_0.49771152062746404"},"_hasShrinkwrap":false}},"time":{"created":"2025-03-16T15:19:25.342Z","modified":"2025-05-31T16:23:01.608Z","3.4.4":"2025-03-16T15:19:25.612Z","3.4.6":"2025-03-17T16:30:40.942Z","3.5.1":"2025-05-31T16:23:01.433Z"},"bugs":{"url":"https://github.com/Akamine20496/jsdialog/issues"},"author":{"name":"Akamine20496"},"license":"ISC","homepage":"https://github.com/Akamine20496/jsdialog#readme","keywords":["javascript-dialog","jsdialog","promised-based","dialog"],"repository":{"type":"git","url":"git+https://github.com/Akamine20496/jsdialog.git"},"description":"Promised-based JavaScript Dialog Utility","maintainers":[{"name":"akamine96204","email":"akaminekinoshita03@gmail.com"}],"readme":"\r\n# JSDialog\r\n\r\nThe `JSDialog` is a promise-based JavaScript utility that imitates native dialogs in desktop applications and provides a user-friendly way to display input dialogs, message dialogs, plain dialogs, and confirmation dialogs.\r\n\r\nMessage Dialog, Plain Dialog, and Instruction Dialog can be used without the `await` keyword, and for Input Dialog and Confirm Dialog, since they require waiting for user input, `await` must be used or use `then()` to get the input data. Not using `await` will make all dialog appear at once.\r\n\r\n## CDN Links\r\n\r\nTo use the Dialog class in your project, include the following CDN links in your HTML:\r\n\r\n```html\r\n<script src=\"https://res.cloudinary.com/dy0sbkf3u/raw/upload/Dialog.js\"></script>\r\n```\r\n\r\nor for the minified version:\r\n\r\n```html\r\n<script src=\"https://res.cloudinary.com/dy0sbkf3u/raw/upload/Dialog.min.js\"></script>\r\n```\r\n\r\nnode package install\r\n\r\n```bash\r\nnpm i @akamine20496/jsdialog\r\n```\r\n\r\n## Installation\r\n\r\nYou can include the Dialog class in your project by either downloading the JavaScript file, linking to it via a CDN, or install in node package as shown above.\r\n\r\n## Usage\r\n\r\n## Input Dialog\r\n\r\nTo create an input dialog, use the `showInputDialog` method. This method returns a promise that resolves with the user input.\r\n\r\n```javascript\r\nconst result = await Dialog.showInputDialog(\"Enter your name\", \"Please provide your name:\");\r\nconsole.log(\"User input:\", result.output, \"Option used:\", result.option);\r\n```\r\n\r\n## Message Dialog\r\n\r\nTo show a message dialog, use the `showMessageDialog` method. This method displays a message to the user.\r\n\r\n```javascript\r\nawait Dialog.showMessageDialog(\"Information\", \"This is a message dialog.\");\r\n```\r\n\r\n## Confirmation Dialog\r\n\r\nTo ask the user for a Yes or No answer, use the `showConfirmDialog` method. This method returns a promise that resolves with the user's choice.\r\n\r\n```javascript\r\nconst userChoice = await Dialog.showConfirmDialog(\"Confirm Action\", \"Are you sure you want to proceed?\");\r\nif (userChoice.option === Dialog.YES_OPTION) {\r\n    console.log(\"User chose Yes\");\r\n} else {\r\n    console.log(\"User chose No\");\r\n}\r\n```\r\n\r\n## Plain Dialog\r\n\r\nThe `showPlainDialog` method displays a customizable information dialog to the user.\r\n\r\n```javascript\r\nawait Dialog.showPlainDialog('This is a plain dialog', {\r\n    backdrop: { 'background-color': 'rgba(0, 0, 0, 1)' },\r\n    dialog: { 'width': '400px', 'background-color': '#fff' },\r\n    eventStyles: {\r\n        button: {\r\n            mouseover: { 'background-color': 'green' },\r\n            mouseout: {\r\n                'color': 'violet',\r\n                'background-color': 'lightgray'\r\n            }\r\n        }\r\n    }\r\n});\r\n```\r\n\r\n## Instruction Dialog\r\n\r\nThe `showInstructionDialog` method displays a paginated content that has a page count tracker to the user.\r\n\r\n```javascript\r\nconst contents = [\r\n    'Page 1, start',\r\n    'Page 2 <b>It allows html tags here</b>',\r\n    'Page 3, end.'\r\n];\r\n\r\nawait Dialog.showInstructionDialog('Instruction Dialog', contents, {\r\n    btnPrev: { 'background-color': 'red' },\r\n    btnNext: { 'background-color': 'green' },\r\n    eventStyles: {\r\n        '#instructionDialogBtnPrev': {\r\n            mouseover: { 'background-color': 'maroon' },\r\n            mouseout: { 'background-color': 'red' }\r\n        },\r\n        '#instructionDialogBtnNext': {\r\n            mouseover: { 'background-color': 'darkgreen' },\r\n            mouseout: { 'background-color': 'green' }\r\n        }\r\n    }\r\n})\r\n```\r\n\r\n## `customDialogStyle` Object structure\r\n```javascript\r\n{\r\n    backdrop: { 'property': 'value', ... },\r\n    dialog: { 'property': 'value', ... },\r\n    header: { 'property': 'value', ... },\r\n    content: { 'property': 'value', ... },\r\n    footer: { 'property': 'value', ... },\r\n    btnOk: { 'property': 'value', ... },\r\n    btnCancel: { 'property': 'value', ... },\r\n    btnYes: { 'property': 'value', ... },\r\n    btnNo: { 'property': 'value', ... },\r\n    btnPrev: { 'property': 'value', ... },\r\n    btnNext: { 'property': 'value', ... },\r\n    eventStyles: {\r\n        backdrop: {\r\n            eventname: { 'property': 'value', ... }\r\n        },\r\n        dialog: {\r\n            eventname: { 'property': 'value', ... }\r\n        },\r\n        header: {\r\n            eventname: { 'property': 'value', ... }\r\n        },\r\n        content: {\r\n            eventname: { 'property': 'value', ... }\r\n        },\r\n        footer: {\r\n            eventname: { 'property': 'value', ... }\r\n        },\r\n        button: {\r\n            eventname: { 'property': 'value', ... }\r\n        },\r\n        '<button-element-id>': {\r\n            eventname: { 'property': 'value', ... }\r\n        }\r\n    }\r\n}\r\n```\r\n\r\n## Static Variables\r\n\r\n- `OK_OPTION`: State of OK (0).\r\n- `CANCEL_OPTION`: State of CANCEL (1).\r\n- `YES_OPTION`: State of YES (2).\r\n- `NO_OPTION`: State of NO (3).\r\n\r\n## Methods\r\n\r\n- `showInputDialog(dialogTitle, dialogContent, customDialogStyle)`: Displays an input dialog and returns the user input.\r\n- `showMessageDialog(dialogTitle, dialogContent, customDialogStyle)`: Displays a message dialog.\r\n- `showConfirmDialog(dialogTitle, dialogContent, customDialogStyle)`: Displays a confirmation dialog and returns the user's choice.\r\n- `showPlainDialog(dialogContent, customDialogStyle)`: Displays a plain dialog and can be customized.\r\n- `showInstructionDialog(dialogTitle, dialogContents, customDialogStyle)`: Displays a paginated dialog that has a page counter to track the current page. \r\n\r\n### Options\r\n\r\n- **Input Dialog**: Returns an object containing:\r\n  - `output`: User input or `null`.\r\n  - `option`: `0` for OK, `1` for Cancel.\r\n\r\n- **Confirm Dialog**: Returns:\r\n  - `option`: `2` for Yes, `3` for No.\r\n\r\n## IDs and Classes\r\n\r\nIf you want to override manually, please refer to the IDs and Classes below. ID is denoted by `#`, and Class is denoted by `.`.\r\nBe sure to add `!important` in your css value to override it.\r\n\r\n**Input Dialog**\r\n- dialog                -> #inputDialog\r\n- title                 -> #inputDialogTitle\r\n- header                -> #inputDialogHeader\r\n- footer                -> #inputDialogFooter\r\n- content               -> #inputDialogContent, .scrollableDialogContent\r\n- input                 -> #inputDialogInput\r\n- btnOk                 -> #inputDialogBtnOk\r\n- btnCancel             -> #inputDialogBtnCancel\r\n\r\n**Message Dialog**\r\n- dialog                -> #messageDialog\r\n- title                 -> #messageDialogTitle\r\n- header                -> #messageDialogHeader\r\n- footer                -> #messageDialogFooter\r\n- content               -> #messageDialogContent, .scrollableDialogContent\r\n- btnOk                 -> #messageDialogBtnOk\r\n\r\n**Confirm Dialog**\r\n- dialog                -> #confirmDialog\r\n- title                 -> #confirmDialogTitle\r\n- header                -> #confirmDialogHeader\r\n- footer                -> #confirmDialogFooter\r\n- content               -> #confirmDialogContent, .scrollableDialogContent\r\n- btnYes                -> #confirmDialogBtnYes\r\n- btnNo                 -> #confirmDialogBtnNo\r\n\r\n**Instruction Dialog**\r\n- dialog                -> #instructionDialog\r\n- title                 -> #instructionDialogTitle\r\n- header                -> #instructionDialogHeader\r\n- footer                -> #instructionDialogFooter\r\n- content               -> #instructionDialogContent, .scrollableDialogContent\r\n- btnOk                 -> #instructionDialogBtnOk\r\n- btnPrev               -> #instructionDialogBtnPrev\r\n- btnNext               -> #instructionDialogBtnNext\r\n\r\n**Plain Dialog**\r\n- backdrop              -> #plainDialogBackdrop\r\n- dialog                -> #plainDialog\r\n- button                -> #plainDialogBtnClose\r\n- header                -> #plainDialogHeader\r\n- content               -> #plainDialogContent, .scrollableDialogContent\r\n\r\n## Example\r\n\r\nHere’s an example that combines the usage of all dialog types:\r\n\r\n```javascript\r\n(async () => {\r\n    const name = await Dialog.showInputDialog(\"Name Input\", \"Please enter your name:\");\r\n    console.log(\"Name entered:\", name.output);\r\n    \r\n    await Dialog.showMessageDialog(\"Welcome\", `Hello, ${name.output}!`);\r\n    \r\n    const confirmed = await Dialog.showConfirmDialog(\"Confirmation\", \"Do you want to continue?\");\r\n    if (confirmed.option === Dialog.YES_OPTION) {\r\n        console.log(\"User confirmed.\");\r\n    } else {\r\n        console.log(\"User cancelled.\");\r\n    }\r\n\r\n    await Dialog.showPlainDialog('This is a plain dialog', {\r\n        backdrop: { 'background-color': 'rgba(0, 0, 0, 1)' },\r\n        dialog: { 'width': '400px', 'background-color': '#fff' },\r\n        button: { 'color': 'red', 'background-color': '#fefefe' }\r\n    });\r\n\r\n    const contents = [\r\n        'Page 1',\r\n        `Page 2 <b>This is a bold text, using b element tag</b>`,\r\n        'Page 3'\r\n    ];\r\n\r\n    await Dialog.showInstructionDialog('Instruction Dialog', contents, {\r\n        btnPrev: { 'background-color': 'green' },\r\n        eventStyles: {\r\n            '#instructionDialogBtnPrev': {\r\n                mouseover: {\r\n                    'background-color': 'yellow'\r\n                },\r\n                mouseout: {\r\n                    'background-color': 'blue'\r\n                }\r\n            }\r\n        }\r\n    })\r\n})()\r\n```\r\n","readmeFilename":"README.md"}