together-button-web/dist/together-button.min.js

Button for women in situation of violence to ask help.

!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}()}])}));