{"id":19443143,"url":"https://github.com/lbgm/tiny-dialog","last_synced_at":"2025-04-25T00:32:17.521Z","repository":{"id":53270335,"uuid":"417472413","full_name":"lbgm/tiny-dialog","owner":"lbgm","description":"Tiny Javascript dialog box made with TypeScript,","archived":false,"fork":false,"pushed_at":"2023-09-27T12:03:06.000Z","size":8,"stargazers_count":12,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-19T09:59:46.274Z","etag":null,"topics":["alert","angular","dialog","javascript","nodejs","prompt","typescript","vuejs"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lbgm.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}},"created_at":"2021-10-15T11:18:25.000Z","updated_at":"2024-04-08T14:32:07.000Z","dependencies_parsed_at":"2024-11-10T15:44:37.504Z","dependency_job_id":"b6b81aca-b975-4252-bafc-e192c9fcbddb","html_url":"https://github.com/lbgm/tiny-dialog","commit_stats":null,"previous_names":["lbgm/tiny-dialog","lbgm/ncom"],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lbgm%2Ftiny-dialog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lbgm%2Ftiny-dialog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lbgm%2Ftiny-dialog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lbgm%2Ftiny-dialog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lbgm","download_url":"https://codeload.github.com/lbgm/tiny-dialog/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250733402,"owners_count":21478361,"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":["alert","angular","dialog","javascript","nodejs","prompt","typescript","vuejs"],"created_at":"2024-11-10T15:42:18.677Z","updated_at":"2025-04-25T00:32:17.250Z","avatar_url":"https://github.com/lbgm.png","language":"TypeScript","readme":"- [TinyDialog](#tinydialog)\n  - [Description](#description)\n  - [Using on Node Js](#using-on-node-js)\n  - [Example with HTML](#example-with-html)\n- [Docs](#docs)\n  - [Types \\\u0026 Interfaces](#types--interfaces)\n  - [Options](#options)\n  - [Prototype public functions](#prototype-public-functions)\n  - [ClassName](#classname)\n\n\n# TinyDialog\nTiny Javascript dialog box made with TypeScript\n\n\u003cimg width=\"473\" alt=\"image\" src=\"https://user-images.githubusercontent.com/92580505/206837730-44fe4c07-0089-473f-aabd-22d7508d929b.png\"\u003e\n\n\u003c!-- \u003cimg width=\"372\" alt=\"image\" src=\"https://user-images.githubusercontent.com/92580505/206837838-917b2d5b-ae1c-4506-9261-a51b72894e1c.png\"\u003e --\u003e\n\n\n\n## Description\nTiny, flexible and featured javascript dialog box wrote in TypeScript.\nYou can add it to any web project with Angular, Vue, React, and others Front-End Framework.\nFully compatible with FontAwesome Icons.\n\n## Using on Node Js\n```sh\nnpm install @lbgm/tiny-dialog\n```\n\n```ts\n// import style only once\nimport \"@lbgm/tiny-dialog/style\"\n\nimport { TinyDialog } from \"@lbgm/tiny-dialog\";\n\nconst mydialog = new TinyDialog({\n  closeIcon: true,\n  ctrlOpen: false,\n  timer: \"ok|36000\",\n  icon: \"far fa-grin-beam\",\n  title: \"\",\n  content: \"Are you confirming your participation for the Friday event?\",\n  buttons: {\n    ok: {\n      className: \"as-button btn-accept\",\n      text: '\u003ci class=\"fa fa-check-circle\"\u003e\u003c/i\u003e\u0026nbsp;Confirm',\n      action: function () {\n        // do something\n      }\n    },\n    cancel: {\n      hide: false,\n      className: \"as-button btn-cancel\",\n      text: '\u003ci class=\"fa fa-times\"\u003e\u003c/i\u003e\u0026nbsp;Refuse',\n      action: function () {\n        // do something\n      }\n    }\n  },\n  onContentReady: function () {\n    // do something\n  },\n  onOpenBefore: function () {\n    // do something\n  },\n  onOpen: function () {\n    // do something\n  },\n  onAction: function () {\n    // do something\n  },\n  onClose: function () {\n    // do something\n  },\n  onDestroy: function () {\n    // do something\n  }\n});\n```\n\n\n## Example with HTML\n\n- clone and build by running `npm run compile`;\n- Copy `build/src`(`c.js|js.map`, `index.js|js.map`) into your destination.\n\n```html\n\u003cscript type=\"module\" src=\"https://domain.com/previous-destination/c.js?your_hash\"\u003e\u003c/script\u003e\n\n\u003cscript type=\"text/javascript\"\u003e\n\nconst mydialog = new TinyDialog({\n  closeIcon: true,\n  ctrlOpen: false,\n  timer: \"ok|36000\",\n  title: \"\",\n  content: \"Are you confirming your participation for the Friday event?\",\n  buttons: {\n    ok: {\n      className: \"as-button btn-accept\",\n      text: '\u003ci class=\"fa fa-check-circle\"\u003e\u003c/i\u003e\u0026nbsp;Confirm',\n      action: function () {\n        // do something\n      }\n    },\n    cancel: {\n      hide: false,\n      className: \"as-button btn-cancel\",\n      text: '\u003ci class=\"fa fa-times\"\u003e\u003c/i\u003e\u0026nbsp;Refuse',\n      action: function () {\n        // do something\n      }\n    }\n  },\n});\n\n\u003c/script\u003e\n```\n\n# Docs\n\n## Types \u0026 Interfaces\n\n```ts\ntype TinyDialogContent = string | HTMLElement | Node | Node[];\nexport type TinyDialogButton = {\n    hide?: boolean;\n    className?: string;\n    text?: TinyDialogContent;\n    action: (...args: any[]) =\u003e any;\n};\nexport type TinyDialogButtons = {\n    [id_button: string]: TinyDialogButton;\n};\nexport interface TinyDialogArg {\n    closeIcon?: boolean;\n    ctrlOpen?: boolean;\n    timer?: string;\n    title?: string;\n    content?: TinyDialogContent;\n    icon?: string;\n    buttons?: TinyDialogButtons;\n    onContentReady?: (...args: any[]) =\u003e any;\n    onOpenBefore?: (...args: any[]) =\u003e any;\n    onOpen?: (...args: any[]) =\u003e any;\n    onAction?: (...args: any[]) =\u003e any;\n    onClose?: (...args: any[]) =\u003e any;\n    onDestroy?: (...args: any[]) =\u003e any;\n}\nexport declare class TinyDialog {\n    #private;\n    arg: TinyDialogArg;\n    $$content: HTMLDivElement;\n    $$title: HTMLDivElement;\n    $$buttons: HTMLDivElement;\n    $$icon: HTMLDivElement;\n    constructor(arg: TinyDialogArg);\n    destroy(): boolean;\n    close(): boolean | void;\n    open(): boolean | void;\n    isOpen(): boolean;\n    domResized(): void;\n}\n```\n\n## Options\n\n| Option  | Type | Description |\n| :--- | :--- | :--- |\n| closeIcon | `boolean` | This option displays an icon to close the box. the widget is directly linked to the close and action functions `onClose`, `onAction`. Code inside these functions will be executed. |\n| ctrlOpen  | `boolean`  | This option controls the automatic opening of the box. it is linked to the pre-opening and opening functions `onOpenBefore`, `onOpen`. Code inside these functions will be executed. When the option is `true` you must call `.open()` to open the box. If it is `false`, the box will open automatically.  |\n| timer  | `string` | `id_button\\|delay_time`\u003cbr\u003eThis option automatically executes a `click` on a button `id_button` located on the box after a given time in milliseconds `delay_time`. This function is linked to the `onAction` function, and the action function linked to the targeted button. Code found inside these functions will be executed. |\n| icon  | `string` | This option displays a main icon. use a [fontAwesome](https://fontawesome.com/) className or a className displaying a personal icon. The displayed content is accessible via `this.$$icon` |\n| title  | `string`  | `text or html`\u003cbr\u003eThis option displays a main title. The displayed content is accessible via `this.$$title` . |\n| content  | `string`  | `text or html`\u003cbr\u003eThis option displays html or text content in the main container. The displayed content is accessible via `this.$$content` . |\n| buttons  | `TinyDialogButtons`  | This option creates buttons.\u003cbr\u003e\u003cul\u003e\u003cli\u003e`id_button`: button identifier equal to `id_button` for the timer option.\u003c/li\u003e\u003cli\u003e`hide`: to hide the button.\u003c /li\u003e\u003cli\u003e`className`: One or more to style the button.\u003c/li\u003e\u003cli\u003e`text`: text or html content to be displayed on the button.\u003c/li\u003e\u003cli\u003e` action`: javascript function which will be executed when the button is clicked. the function passes the event and the button as parameters. The dialog box accessible with `this`. \u003c/li\u003e\u003c/ul\u003eThe buttons are accessible via their parent `this.$$buttons`. A button is accessible via `this.$$id_button`. |\n| onContentReady  | `Function`  | This function runs when the box instance is created and ready for use. Code inside this function will be executed. within the function, `this` refers to the box instance. Thus its elements like `this.$$title`, `this.$$icon`, `this.$$buttons`, `this.$$content` are accessible (the same for the functions below). |\n| onOpenBefore  | `Function`  | This function runs before opening the box. Code inside this function will be executed.  |\n| onOpen  | `Function`  | This function runs when the box is opened. Code inside this function will be executed.  |\n| onAction  | `Function`  | This function is executed when an action is triggered on the box. Code inside this function will be executed.  |\n| onClose  | `Function`  | This function runs when the box is closed. Code inside this function will be executed.  |\n| onDestroy  | `Function`  | This function is executed when the box is destroyed. Code inside this function will be executed.  |\n\n## Prototype public functions\n\n| Function    | Description   |\n| :---        | :---          |\n| .open()     | This function opens the box. It returns true on success or void on failure. |\n| .close()    | This function closes the box. It returns true on success or void on failure. Note that closing does not destroy the box on DOM. We can reopen the box by calling .open() |\n| .destroy()  | This function closes and destroys the box on DOM. It returns true on success or false on failure. |\n| .isOpen()   | This function checks if the box is open or closed. It returns true or false. |\n\n## ClassName\n\n| Name      | Description     |\n| :---      | :---          |\n| tiny-dialog-cross  | svg icon className of closeIcon option. If you need to change the color of the icon, use the `tiny-dialog-cross-path` className then define some css. \u003cbr\u003e ex: `fill: #fff;`. |\n| tiny-dialog-closer | container className of the button to close the box. |\n| tiny-dialog-icon | container className of box icon. |\n| tiny-dialog-wrp | box overlay className. |\n| tiny-dialog-bw | className of the box container. Flexible, centered and no selection of content possible. |\n| tiny-dialog-head | header container className. It extends over the available width. |\n| tiny-dialog-title | box title container className. It extends over the available width. |\n| tiny-dialog-content | className of the container of the content you are displaying. It extends over the available width. |\n| tiny-dialog-btns | Dialog button container className. Flexible, it extends over the available width. |\n\n\u003e All containers are `HTMLDivElement`\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flbgm%2Ftiny-dialog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flbgm%2Ftiny-dialog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flbgm%2Ftiny-dialog/lists"}