https://github.com/vtex/front.messages
jQuery and Bootstrap based messages plugin
https://github.com/vtex/front.messages
srv-checkout-ui xp-shopping
Last synced: 11 months ago
JSON representation
jQuery and Bootstrap based messages plugin
- Host: GitHub
- URL: https://github.com/vtex/front.messages
- Owner: vtex
- License: mit
- Created: 2013-06-03T14:15:02.000Z (about 13 years ago)
- Default Branch: master
- Last Pushed: 2020-06-01T20:08:46.000Z (about 6 years ago)
- Last Synced: 2025-06-27T13:44:32.734Z (12 months ago)
- Topics: srv-checkout-ui, xp-shopping
- Language: CoffeeScript
- Size: 438 KB
- Stars: 10
- Watchers: 222
- Forks: 2
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# front.Messages
Exemplo de uso:
```javascript
$(document).ready(function(){
var messsages, message;
messages = new window.vtex.Messages.getInstance({ajaxError:true});
message = {
content:
title: 'Erro!',
detail: 'Ocorreu um erro inesperado em nos nossos servidores.'
type: 'error'
};
$(window).trigger('addMessage', message);
});
```
====
Baixe o repositório e instale as dependências:
```console
npm i -g grunt-cli
npm i
grunt
```
Você poderá vê-lo em ação em `http://localhost/front-messages-ui/`.
## API
### MessagesK
window.vtex.Messages.getInstance(customOptions)
Retorna a instância de Messages.
Param
tipo
exemplo
descrição
customOptions
object
{
ajaxError:true,
placeholder: '.message-placeholder',
modalPlaceholder: '.modal-placeholder'
}
Passada a opção ajaxError como true, o plugin handle requests AJAX com erro, exibindo um modal de erro com as suas devidas mensagens de erro. As opções de placeholder e modalPlaceholder definem onde as mensagens serão adicionadas no DOM.
```javascript
// Modelo de customOptions para Messages
{
ajaxError: 'define se o plugin deve tratar erros ajax',
placeholder: 'define o elemento do DOM onde serão adicionadas as mensagens',
modalPlaceholder: 'define o elemento do DOM onde serão adiconados os modais'
}
// Defaults
{
ajaxError: true,
placeholder: '.vtex-front-messages-placeholder',
modalPlaceholder: 'body'
}
```
### Message
$(window).trigger('addMessage', message [, messageId])
Adiciona uma mensagem nova ao objeto de Messages.
Param
tipo
exemplo
descrição
message
object
message
Objeto do tipo message descrito abaixo.
messageId
String
'Payment-Unauthorized'
Parâmetro opcional, é um identificador para a mensagem, útil para o caso de ser necessário remover essa
mensagem no futuro, programaticamente
```javascript
// Modelo de Message
{
id: 'id unico da Message',
timeout: 'tempo que a mesagem será exibida, em milisegundos'
template: 'seletor CSS do template da message',
modalTemplate: 'seletor CSS do template da modal message',
prefixClassForType: 'prefixo da classe a ser concatenada com o type'
content:
title: 'título da message',
detail: 'detalhe da message'
type: 'tipo da message (caso seja "fatal", sera exibida como modal, tipos disponíveis são ["success", "info", "warning", "danger", "fatal", "error"])',
visible: 'caso true a message sera exibida apos ser adicionada',
usingModal: 'caso seja true sera exibida como modal',
domElement: 'propriedade que será preenchida com o elemento do DOM da message',
insertMethod: 'método de inserção da mensagem no placeholder (ex: html, append, prepend, etc)'
}
// Defaults
{
id: _.uniqueId('vtex-front-message-')
template: '.vtex-front-messages-template'
modalTemplate: '.vtex-front-messages-modal-template.vtex-front-messages-modal-template-default'
prefixClassForType: 'vtex-front-messages-type-'
content:
title: ''
detail: ''
type: 'info'
visible: true
usingModal: false
domElement: $()
insertMethod: 'append'
}
```
$(window).trigger('removeMessage', messageId)
Remove a mensagem com o id igual ao solicitado.
Param
tipo
exemplo
descrição
messageId
String
$(window).trigger('removeMessage', 'Payment-Unauthorized')
Remove a mensagem cujo id é igual ao messageId enviado como parâmetro
$(window).trigger('removeAllMessages' [, booleanIncluded])
Remove todas as mensagens da lista.
Param
tipo
exemplo
descrição
booleanIncluded
Boolean
$(window).trigger('removeAllMessage', true)
O parâmetro booleanIncluded define se as mensagens exibidas em modais também devem ser excluídas
Dependências:
- jQuery
- Bootstrap
- Underscore
- Modernizr (csstransforms, csstransitions, opacity)
------
VTEX - 2014