https://github.com/matheusjohannaraujo/popup
Biblioteca que implementa as funções Alert, Confirm e Prompt do JS, utilizando tecnologia de Web Components de forma padronizada e assíncrona em todos os navegadores modernos.
https://github.com/matheusjohannaraujo/popup
alert async await confirm javascript js popup prompt webcomponent webcomponents
Last synced: 8 months ago
JSON representation
Biblioteca que implementa as funções Alert, Confirm e Prompt do JS, utilizando tecnologia de Web Components de forma padronizada e assíncrona em todos os navegadores modernos.
- Host: GitHub
- URL: https://github.com/matheusjohannaraujo/popup
- Owner: matheusjohannaraujo
- License: mit
- Created: 2020-12-10T14:05:57.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2020-12-21T09:48:22.000Z (almost 5 years ago)
- Last Synced: 2024-12-31T02:13:19.010Z (10 months ago)
- Topics: alert, async, await, confirm, javascript, js, popup, prompt, webcomponent, webcomponents
- Language: JavaScript
- Homepage:
- Size: 17.6 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# [POPUP](https://github.com/matheusjohannaraujo/popup)
```javascript
const DEVELOPER_INFO = {
'autor': 'Matheus Johann Araújo',
'country': 'Brasil',
'state': 'Pernambuco',
'date': '2020-12-21'
}
```
### O POPUP é uma biblioteca que implementa as funções Alert, Confirm e Prompt do JavaScript de forma padronizada e assíncrona em todos os navegadores modernos.
#### Utiliza a tecnologia de [Web Components](https://developer.mozilla.org/pt-BR/docs/Web/Web_Components) que permite a criação de tags customizadas.
#### Com isso, foi criada a tag ``
#### A biblioteca não necessita de instalação de plugins adicionais! Requer somente a inclusão do arquivo de script conforme é descrito abaixo.
#### Visualização dos POPUPs:
[Clique aqui para visualizar o funcionamento online](https://matheusjohannaraujo.github.io/popup/)
#### Para utilizar a biblioteca é necessário incluí-la no projeto.
- Escreva em seu projeto:
```html
```
#### Você pode usar a biblioteca de duas formas.
- A primeira maneira é escrevendo o nome da TAG ``````
```html
Alert
Hello, welcome to popup-js.
```
- A segunda forma é através da utilização do JavaScript `popup()`
```html
window.addEventListener("load", async () => {
await popup()
.title("Alert")
.body("Hello, welcome to popup-js.")
.show()
})
```
#### O Web Component `````` pode ser personalizado de diversas formas.
#### Funcionalidades do POPUP:
* `style` -> Estilo CSS;
* `top` -> Topo de cima;
* `left` -> Lateral esquerda;
* `body` -> Define o corpo do popup;
* `title` -> Define o título do popup;
* `content` -> Define o conteúdo para o popup;
* `seconds` -> Tempo do popup em tela;
* `btn_ok` -> Renomear o texto do botão OK;
* `btn_cancel` -> Renomear o texto do botão Cancel;
* `light` -> Define o tema do popup como light (claro);
* `dark` -> Define o tema do popup como dark (escuro);
* `theme` -> Define o tema do popup, dark (escuro) e light (claro);
* `callback` -> Função chamada quando o popup sair da tela;
* `type` -> alert, confirm e prompt são tipos de popup;
* `alert` -> Define o popup como tipo de alert (alerta);
* `prompt` -> Define o popup como tipo de prompt (pergunta);
* `confirm` -> Define o popup como tipo de confirm (confirmação);
* `config` -> Objeto JSON que contém todas as configurações descritas acima;
* `show` -> Função responsável por adicionar o popup para lista de exibição no navegador.
#### Para utilizar as funcionalidades descritas acima, use o atributo `data-config="{}"`
#### O atributo `data-config="{}"` deve conter um JSON (objeto chave-valor), com as configurações de exibição do ``````
- Exemplo de uso por TAG `` e por meio da função `popup()` do JavaScript:
```html
example
Alert
Olá, seja bem-vindo ao popup-js.
Confirm
Deseja continuar?
Prompt
Qual o seu nome?
window.addEventListener("load", async () => {
// USANDO ALERT
await popup()
.alert()
.seconds(5)
.callback("console.log")
.title("Alert")
.body("Olá, seja bem-vindo ao popup-js.")
.show()
// USANDO CONFIRM
await popup()
.confirm()
.seconds(5)
.callback("console.log")
.title("Confirm")
.body("Deseja continuar?")
.show()
// USANDO PROMPT
await popup()
.config({
'type': 'prompt',
'seconds': 5,
'callback': 'console.log',
'top': '50px',
'left': '50px',
'style': {
'color': '#000',
'background': '#fff'
}
})
.content(`
<label slot="title">Prompt</label>
<div slot="body">
<label>Qual o seu nome?</label>
<input type="text" placeholder="NOME" id="inp">
</div>
`)
.show()
})
```