Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

vtex/front.messages

Open more actions menu

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

134 Commits
134 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

jQuery and Bootstrap based messages plugin

Topics

Resources

License

Stars

Watchers

Forks

Packages

 
 
 

Contributors

Morty Proxy This is a proxified and sanitized view of the page, visit original site.