front.Messages

Exemplo de uso:

$(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:

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.

// 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

// 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