{"id":21835833,"url":"https://github.com/vtex/front.messages","last_synced_at":"2025-07-21T07:32:43.836Z","repository":{"id":68365589,"uuid":"10456054","full_name":"vtex/front.messages","owner":"vtex","description":"jQuery and Bootstrap based messages plugin ","archived":false,"fork":false,"pushed_at":"2020-06-01T20:08:46.000Z","size":449,"stargazers_count":10,"open_issues_count":3,"forks_count":2,"subscribers_count":222,"default_branch":"master","last_synced_at":"2025-06-27T13:44:32.734Z","etag":null,"topics":["srv-checkout-ui","xp-shopping"],"latest_commit_sha":null,"homepage":null,"language":"CoffeeScript","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/vtex.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":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2013-06-03T14:15:02.000Z","updated_at":"2024-01-02T14:35:57.000Z","dependencies_parsed_at":null,"dependency_job_id":"f34e603a-5ec9-4d19-b315-29d128125ed2","html_url":"https://github.com/vtex/front.messages","commit_stats":null,"previous_names":[],"tags_count":25,"template":false,"template_full_name":null,"purl":"pkg:github/vtex/front.messages","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex%2Ffront.messages","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex%2Ffront.messages/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex%2Ffront.messages/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex%2Ffront.messages/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vtex","download_url":"https://codeload.github.com/vtex/front.messages/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex%2Ffront.messages/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266261183,"owners_count":23901286,"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":["srv-checkout-ui","xp-shopping"],"created_at":"2024-11-27T20:25:13.856Z","updated_at":"2025-07-21T07:32:43.816Z","avatar_url":"https://github.com/vtex.png","language":"CoffeeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# front.Messages\n\nExemplo de uso:\n```javascript\n$(document).ready(function(){\n\tvar messsages, message;\n\tmessages = new window.vtex.Messages.getInstance({ajaxError:true});\n\n\tmessage = {\n\t\tcontent: \n\t\t\ttitle: 'Erro!',\n\t\t\tdetail: 'Ocorreu um erro inesperado em nos nossos servidores.'\n\t\ttype: 'error'\n\t};\n\t\n\t$(window).trigger('addMessage', message);\t\n});\n```\n====\n\nBaixe o repositório e instale as dependências:\n\n```console\nnpm i -g grunt-cli\nnpm i\ngrunt\n```\n\nVocê poderá vê-lo em ação em `http://localhost/front-messages-ui/`.\n\n## API\n\n### MessagesK\n\n\u003ch4 id=\"Messages()\"\u003e\u003ccode\u003ewindow.vtex.Messages.getInstance(customOptions)\u003c/code\u003e\u003c/h4\u003e\n\u003cp\u003eRetorna a instância de Messages.\u003c/p\u003e\n\u003ctable class=\"table table-bordered table-striped\"\u003e\n\t\u003cthead\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003cth style=\"width: 90px;\"\u003eParam\u003c/th\u003e\n\t\t\t\u003cth style=\"width: 50px;\"\u003etipo\u003c/th\u003e\n\t\t\t\u003cth style=\"width: 140px;\"\u003eexemplo\u003c/th\u003e\n\t\t\t\u003cth\u003edescrição\u003c/th\u003e\n\t\t\u003c/tr\u003e\n\t\u003c/thead\u003e\n\t\u003ctbody\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003ecustomOptions\u003c/td\u003e\n\t\t\t\u003ctd\u003eobject\u003c/td\u003e\n\t\t\t\u003ctd\u003e\n\t\t\t{\n\t\t\t\tajaxError:true, \n\t\t\t\tplaceholder: '.message-placeholder', \n\t\t\t\tmodalPlaceholder: '.modal-placeholder'\n\t\t\t}\n\t\t\t\u003c/td\u003e\n\t\t\t\u003ctd\u003ePassada 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.\n\t\t\t\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\u003c/tbody\u003e\n\u003c/table\u003e\n\n```javascript\n// Modelo de customOptions para Messages\n{\n\tajaxError: 'define se o plugin deve tratar erros ajax', \n\tplaceholder: 'define o elemento do DOM onde serão adicionadas as mensagens', \n\tmodalPlaceholder: 'define o elemento do DOM onde serão adiconados os modais'\n}\n\n// Defaults\n{\n\tajaxError: true, \n\tplaceholder: '.vtex-front-messages-placeholder', \n\tmodalPlaceholder: 'body'\n}\n```\n\n### Message\n\n\u003ch4 id=\"addMessage()\"\u003e\u003ccode\u003e$(window).trigger('addMessage', message [, messageId])\u003c/code\u003e\u003c/h4\u003e\n\u003cp\u003eAdiciona uma mensagem nova ao objeto de Messages.\u003c/p\u003e\n\u003ctable class=\"table table-bordered table-striped\"\u003e\n\t\u003cthead\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003cth style=\"width: 90px;\"\u003eParam\u003c/th\u003e\n\t\t\t\u003cth style=\"width: 50px;\"\u003etipo\u003c/th\u003e\n\t\t\t\u003cth style=\"width: 140px;\"\u003eexemplo\u003c/th\u003e\n\t\t\t\u003cth\u003edescrição\u003c/th\u003e\n\t\t\u003c/tr\u003e\n\t\u003c/thead\u003e\n\t\u003ctbody\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003emessage\u003c/td\u003e\n\t\t\t\u003ctd\u003eobject\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003ca href=\"#message\"\u003emessage\u003c/a\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eObjeto do tipo message descrito abaixo.\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003emessageId\u003c/td\u003e\n\t\t\t\u003ctd\u003eString\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003e'Payment-Unauthorized'\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eParâmetro opcional, é um identificador para a mensagem, útil para o caso de ser necessário remover essa \n\t\t\tmensagem no futuro, programaticamente\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\u003c/tbody\u003e\n\u003c/table\u003e\n\n```javascript\n// Modelo de Message\n{\n\tid: 'id unico da Message',\n\ttimeout: 'tempo que a mesagem será exibida, em milisegundos'\n\ttemplate: 'seletor CSS do template da message',\n\tmodalTemplate: 'seletor CSS do template da modal message',\n\tprefixClassForType: 'prefixo da classe a ser concatenada com o type'\n\tcontent:\n\t\ttitle: 'título da message',\n\t\tdetail: 'detalhe da message'\n\ttype: 'tipo da message (caso seja \"fatal\", sera exibida como modal, tipos disponíveis são [\"success\", \"info\", \"warning\", \"danger\", \"fatal\", \"error\"])',\n\tvisible: 'caso true a message sera exibida apos ser adicionada',\n\tusingModal: 'caso seja true sera exibida como modal',\n\tdomElement: 'propriedade que será preenchida com o elemento do DOM da message',\n\tinsertMethod: 'método de inserção da mensagem no placeholder (ex: html, append, prepend, etc)'\n}\n\n// Defaults\n{\n\tid: _.uniqueId('vtex-front-message-')\n\ttemplate: '.vtex-front-messages-template'\n\tmodalTemplate: '.vtex-front-messages-modal-template.vtex-front-messages-modal-template-default'\n\tprefixClassForType: 'vtex-front-messages-type-'\n\tcontent:\n\t\ttitle: ''\n\t\tdetail: ''\n\ttype: 'info'\n\tvisible: true\n\tusingModal: false\n\tdomElement: $()\n\tinsertMethod: 'append'\n}\n```\n\n\u003ch4 id=\"removeMessage()\"\u003e\u003ccode\u003e$(window).trigger('removeMessage', messageId)\u003c/code\u003e\u003c/h4\u003e\n\u003cp\u003eRemove a mensagem com o id igual ao solicitado.\u003c/p\u003e\n\u003ctable class=\"table table-bordered table-striped\"\u003e\n\t\u003cthead\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003cth style=\"width: 90px;\"\u003eParam\u003c/th\u003e\n\t\t\t\u003cth style=\"width: 50px;\"\u003etipo\u003c/th\u003e\n\t\t\t\u003cth style=\"width: 140px;\"\u003eexemplo\u003c/th\u003e\n\t\t\t\u003cth\u003edescrição\u003c/th\u003e\n\t\t\u003c/tr\u003e\n\t\u003c/thead\u003e\n\t\u003ctbody\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003emessageId\u003c/td\u003e\n\t\t\t\u003ctd\u003eString\u003c/td\u003e\n\t\t\t\u003ctd\u003e$(window).trigger('removeMessage', 'Payment-Unauthorized')\u003c/td\u003e\n\t\t\t\u003ctd\u003eRemove a mensagem cujo id é igual ao messageId enviado como parâmetro\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\u003c/tbody\u003e\n\u003c/table\u003e\n\n\u003ch4 id=\"removeAllMessages()\"\u003e\u003ccode\u003e$(window).trigger('removeAllMessages' [, booleanIncluded])\u003c/code\u003e\u003c/h4\u003e\n\u003cp\u003eRemove todas as mensagens da lista.\u003c/p\u003e\n\u003ctable class=\"table table-bordered table-striped\"\u003e\n\t\u003cthead\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003cth style=\"width: 90px;\"\u003eParam\u003c/th\u003e\n\t\t\t\u003cth style=\"width: 50px;\"\u003etipo\u003c/th\u003e\n\t\t\t\u003cth style=\"width: 140px;\"\u003eexemplo\u003c/th\u003e\n\t\t\t\u003cth\u003edescrição\u003c/th\u003e\n\t\t\u003c/tr\u003e\n\t\u003c/thead\u003e\n\t\u003ctbody\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003ebooleanIncluded\u003c/td\u003e\n\t\t\t\u003ctd\u003eBoolean\u003c/td\u003e\n\t\t\t\u003ctd\u003e$(window).trigger('removeAllMessage', true)\u003c/td\u003e\n\t\t\t\u003ctd\u003eO parâmetro booleanIncluded define se as mensagens exibidas em modais também devem ser excluídas\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\u003c/tbody\u003e\n\u003c/table\u003e\n\n\u003cbr\u003e\n\nDependências:\n- jQuery\n- Bootstrap\n- Underscore\n- Modernizr (csstransforms, csstransitions, opacity)\n\n------\n\nVTEX - 2014","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvtex%2Ffront.messages","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvtex%2Ffront.messages","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvtex%2Ffront.messages/lists"}