UNPKG

together-button-web

Version:
1 lines 12.7 kB
!function(n,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.TogetherButton=t():n.TogetherButton=t()}(window,(function(){return function(n){var t={};function e(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return n[o].call(r.exports,r,r.exports,e),r.l=!0,r.exports}return e.m=n,e.c=t,e.d=function(n,t,o){e.o(n,t)||Object.defineProperty(n,t,{enumerable:!0,get:o})},e.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},e.t=function(n,t){if(1&t&&(n=e(n)),8&t)return n;if(4&t&&"object"==typeof n&&n&&n.__esModule)return n;var o=Object.create(null);if(e.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:n}),2&t&&"string"!=typeof n)for(var r in n)e.d(o,r,function(t){return n[t]}.bind(null,r));return o},e.n=function(n){var t=n&&n.__esModule?function(){return n.default}:function(){return n};return e.d(t,"a",t),t},e.o=function(n,t){return Object.prototype.hasOwnProperty.call(n,t)},e.p="",e(e.s=0)}([function(n,t,e){n.exports=e(1).default},function(n,t,e){"use strict";function o(n,t){for(var e=0;e<t.length;e++){var o=t[e];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(n,o.key,o)}}e.r(t),e.d(t,"default",(function(){return r}));var r=function(){function n(){!function(n,t){if(!(n instanceof t))throw new TypeError("Cannot call a class as a function")}(this,n),this.init()}var t,e,r;return t=n,(e=[{key:"showModal",value:function(){null==document.querySelector(".together-content-modal")&&(document.querySelector(".content-together").innerHTML+='\n <div class="together-content-modal">\n \x3c!-- Together Styles --\x3e\n <style>\n /* Configuration */\n\n .together * {\n all: initial;\n padding: 0;\n margin: 0;\n border: 0;\n width: 100%;\n font-family: Arial;\n }\n\n .together a {\n color: blank;\n text-decoration: underline;\n }\n\n .btn-action span {\n cursor: pointer;\n }\n\n .together a {\n cursor: pointer;\n }\n\n \n .together-modal-structure {\n background-color: #FFFFFF;\n border-radius: 20px;\n margin: 2%;\n box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);\n margin: 10% auto;\n animation-name: modalopen;\n animation-duration: 1s;\n \n \n max-width: 438px;\n max-height: 468px;\n height: 480px;\n \n }\n \n .together-container-center {\n margin: auto;\n display: flex;\n align-items: center;\n }\n \n .together-modal {\n display: none;\n position: fixed;\n z-index: 999999;\n left: 0;\n top: 0;\n height: 100%;\n width: 100%;\n overflow: auto;\n background-color: rgba(0, 0, 0, 0.5);\n }\n \n .together-modal-header {\n height: 100px;\n display: flex;\n }\n\n .together-close {\n }\n \n .together-close:hover,\n .together-close:focus {\n cursor: pointer;\n }\n \n .together-back {\n width: auto;\n margin: auto;\n }\n \n .together-back:hover,\n .together-back:focus {\n text-decoration: none;\n cursor: pointer;\n }\n \n .together-modal-content-back-btn {\n display: none;\n }\n \n @keyframes modalopen {\n from {\n opacity: 0;\n }\n \n to {\n opacity: 1;\n }\n }\n \n @keyframes slideup {\n \n from {\n margin-top: 150%;\n }\n \n to {\n margin-top: 48%;\n }\n \n }\n \n \n /* Container back btn */\n \n .together-container-back-btn {\n padding: 30px;\n width: 20px;\n height: 20px;\n position: fixed;\n }\n .together-container-logo {\n padding-top: 15px;\n display: block;\n max-width: 120px;\n margin: auto;\n }\n \n /* Modal Content */\n \n /* Modal content call emergency */\n .together-modal-content-call-help {\n width: auto;\n padding: 20px;\n max-width: 370px;\n height: 350px;\n }\n \n .together-modal-content span {\n font-weight: bold;\n font-size: 16px;\n }\n \n .together-modal-content p {\n font-size: 14px;\n }\n \n \n /* Container img */\n .together-container-img {\n max-width: 500px;\n height: 150px;\n }\n \n .together-img-responsive {\n width: 100%;\n height: 100%;\n }\n \n \n /* Container Principal Text */\n \n .together-container-txt {\n color: black;\n height: 50px;\n }\n .together-container-txt h1 {\n font-size: 18px;\n }\n .together-container-txt span {\n text-align: center;\n }\n\n \n \n \n /* Container btns */\n \n .together-container-btns {\n max-width: 500px;\n height: 90px;\n }\n\n .together-container-btns span{\n text-align: center;\n }\n \n .btn-action {\n width: 200px;\n height: 44px;\n background: #7B2CBF;\n color: #FFFFFF;\n box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);\n border-radius: 20px;\n }\n \n .btn-action span {\n color: #FFFFFF;\n }\n\n .text-btn-action {\n font-size: 18px;\n padding-top: 13px;\n }\n \n .together-btn-help {\n width: 45%;\n float: left;\n margin: auto;\n }\n\n\n .btn-action-left {\n width: 45%;\n float: left;\n margin: auto;\n margin-top: 80px;\n }\n \n .text-btn-action:hover,\n .text-btn-action:focus {\n text-decoration: none;\n cursor: pointer;\n }\n \n \n .btn-action-mobile {\n margin: auto;\n }\n \n .btn-action-mobile a:link {\n color: #FFFFFF;\n text-decoration: none;\n }\n \n .btn-action-mobile a:visited {\n color: #FFFFFF;\n text-decoration: none;\n }\n \n /* Container last texts */\n .together-container-last-txt {\n padding-top: 20px;\n }\n \n .together-container-last-txt h3 {\n font-size: 14px;\n padding: 5px;\n }\n \n .together-container-last-txt div {\n text-align: center;\n }\n \n /* Container call help instructions */\n .together-modal-content-call-help-instructions {\n height: 250px;\n }\n \n \n /* Responsive itens */\n @media (max-width: 540px) {\n .text-btn-action {\n font-size: 15px;\n }\n .together-btn-help {\n display: none;\n }\n .btn-action-mobile {\n display: block;\n }\n \n \n .together-modal-structure {\n background-color: #FFFFFF;\n border-radius: 20px 20px 0px 0px;\n margin: 2%;\n box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);\n margin: 48% 0 0 0;\n animation-name: slideup;\n animation-duration: 1s;\n \n \n max-width: 438px;\n max-height: 468px;\n height: 480px;\n \n }\n \n }\n \n @media (min-width: 540px) {\n .together-btn-help {\n display: block;\n }\n .btn-action-mobile {\n display: none;\n }\n \n }\n </style>\n \n \x3c!-- Together HTML --\x3e\n <div class="together-modal">\n <div class="together together-modal-structure">\n \n <div class="together-modal-header">\n <div class="together-container-back-btn">\n <img class="together-close" src="https://raw.githubusercontent.com/together-project/together-button-web/master/assets/web-close-btn.svg" />\n </div>\n <div class="together-container-logo">\n <img width="20" height="50" src="https://raw.githubusercontent.com/together-project/together-button-web/master/assets/web-logo.svg" />\n </div>\n </div>\n \n <div class="together-modal-content">\n \n <div class="together-modal-content-home">\n \n <div class="together-container-center together-container-txt">\n <span>As vezes só precisamos de </br> alguém para conversar\n </span>\n </div>\n \n <div class="together-container-center together-container-img">\n <img class="together-img-responsive" src="https://raw.githubusercontent.com/together-project/together-button-web/master/assets/web-together.svg" />\n </div>\n \n <div class="together-container-center together-container-last-txt">\n <div>\n <p>Não fique só</p></br>\n <p>Não corra perigo</p></br>\n <p>Busque ajuda</p></br>\n </div>\n </div>\n \n <div class="together-container-center together-container-btns">\n <div class="btn-action together-btn together-btn-help">\n <p class="text-btn-action together-container-center"><span>Preciso de ajuda</span></p>\n </div>\n \n <div class="btn-action together-btn btn-action-mobile">\n <a href="tel:180">\n <p class="text-btn-action together-container-center"><span>Chamar 180</span></p>\n </a>\n </div>\n </div>\n \n </div>\n \n <div class="together-container-center together-modal-content-call-help">\n <div class="together-modal-content-call-help-instructions">\n <div class="together-emergency-item">\n <span>Atenção!</span></br>\n <p>Se você estiver em situação de emergencia ligar para <a href="tel:190">190</a></p></br></br>\n </div>\n <div class="together-emergency-item">\n <span>Por ligação</span></br>\n <p>Se estiver em segurança para falar ao telefone, você pode denunciar ou receber orientações pelo\n numero\n <a href="tel:180">180</a></p></br></br>\n </div>\n <div class="together-emergency-item">\n <span>Fale online</span></br>\n <p>Se você quer conversar online acesse o chat do Ministerio dos Direitos Humanos <a\n href="https://mdh-chat.metasix.solutions/livechat?mode=popout" target="_blank"> clicando aqui</a></p></br>\n <p>É uma forma silenciosa e segura de denunciar.</p></br>\n </div>\n </div>\n \n \n \n <div class="together-container-center together-container-btns">\n <div class="btn-action together-btn btn-action-left">\n <p class="together-container-center text-btn-action together-back"><span>Voltar</span></p>\n </div>\n </div>\n \n </div>\n \n \n \n \n \n </div>\n \n </div>\n </div>\n ',this.modal_scripts())}},{key:"modal_scripts",value:function(){var n=document.querySelector(".together-modal"),t=document.querySelector(".together-btn"),e=document.querySelector(".together-close"),o=document.querySelector(".together-btn-help"),r=document.querySelector(".together-modal-content-home"),a=document.querySelector(".together-modal-content-call-help"),i=document.querySelector(".together-back");function c(){n.style.display="block",r.style.display="block",a.style.display="none"}t.addEventListener("click",c),e.addEventListener("click",(function(){n.style.display="none"})),window.addEventListener("click",(function(t){t.target==n&&(n.style.display="none")})),o.addEventListener("click",(function(){r.style.display="none",a.style.display="block"})),i.addEventListener("click",c),c()}},{key:"init",value:function(){var n=this;document.addEventListener("DOMContentLoaded",(function(){return document.querySelector(".together-btn").addEventListener("click",(function(){return n.showModal()}))}))}}])&&o(t.prototype,e),r&&o(t,r),n}()}])}));