PPC Chat Links Bar

ppc.js

(function (window) {
    'use strict';

    const TELEGRAM_LINK = 'https://t.me/peercoin';
    const ROCKETCHAT_LINK = 'https://peercoin.chat/channel/general/';
    const FIRST_SHOWUP_DELAY = 3500;
    const STORAGE_KEY = 'PPC-Injector--USER-INTERACTED';
    const HTML_ID = `INJECTOR-${Math.floor(Math.random()*1000*1000*1000)}`;
    const COLOR_GREEN = '#3cb054';
    const COLOR_GREEN_DARK = '#308d43';
    const COLOR_WHITE = '#fff';
    const ICON_SVG_TELEGRAM = `
      <svg 
       xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 45" preserveAspectRatio="xMidYMid">
        <path fill-rule="evenodd" fill="rgb(255, 255, 255)"
       d="M22.500,0.000 C10.074,0.000 -0.000,10.074 -0.000,22.500 C-0.000,34.926 10.074,45.000 22.500,45.000 C34.926,45.000 45.000,34.926 45.000,22.500 C45.000,10.074 34.926,0.000 22.500,0.000 ZM29.429,33.205 C29.429,33.205 28.867,34.610 27.322,33.935 L21.603,29.551 L21.604,29.552 L17.936,32.896 C17.936,32.896 17.649,33.113 17.335,32.977 L18.076,26.657 C18.076,26.657 28.362,17.411 28.783,17.018 C29.205,16.624 29.064,16.540 29.064,16.540 C29.092,16.062 28.305,16.540 28.305,16.540 L14.676,25.196 L8.999,23.284 C8.999,23.284 8.128,22.975 8.043,22.301 C7.959,21.627 9.027,21.261 9.027,21.261 L31.593,12.409 C31.593,12.409 33.448,11.594 33.448,12.943 L29.429,33.205 Z"/>
      </svg>
    `;
    const ICON_SVG_ROCKETCHAT = `
      <svg 
       xmlns="http://www.w3.org/2000/svg" viewBox="0 0 53 45" preserveAspectRatio="xMidYMid">
        <path fill-rule="evenodd" fill="rgb(255, 255, 255)"
       d="M52.999,22.537 C52.999,25.192 52.203,27.739 50.632,30.106 C49.222,32.232 47.246,34.112 44.760,35.698 C39.959,38.757 33.650,40.442 26.995,40.442 C24.772,40.442 22.581,40.254 20.456,39.883 C19.137,41.115 17.594,42.223 15.960,43.099 C7.234,47.319 -0.002,43.198 -0.002,43.198 C-0.002,43.198 6.726,37.683 5.632,32.848 C2.622,29.869 0.991,26.276 0.991,22.536 C0.991,22.523 0.991,22.512 0.991,22.500 C0.991,22.488 0.991,22.476 0.991,22.464 C0.991,18.724 2.622,15.131 5.632,12.152 C6.726,7.317 -0.002,1.802 -0.002,1.802 C-0.002,1.802 7.234,-2.319 15.960,1.902 C17.594,2.777 19.137,3.885 20.456,5.117 C22.581,4.745 24.772,4.558 26.995,4.558 C33.650,4.558 39.959,6.244 44.760,9.303 C47.246,10.889 49.222,12.770 50.632,14.895 C52.203,17.262 52.999,19.808 52.999,22.464 C52.999,22.476 52.999,22.489 52.999,22.501 C52.999,22.513 52.999,22.525 52.999,22.537 ZM26.995,8.313 C14.672,8.313 4.681,14.680 4.682,22.536 C4.682,25.958 6.579,29.099 9.739,31.552 C10.283,36.669 7.742,39.775 6.027,41.613 C11.300,42.944 16.728,38.826 19.196,35.864 C21.623,36.441 24.251,36.758 26.995,36.758 C39.318,36.758 49.309,30.390 49.309,22.536 C49.309,14.681 39.318,8.313 26.995,8.313 ZM37.301,25.951 C35.664,25.951 34.337,24.627 34.337,22.993 C34.337,21.360 35.664,20.035 37.301,20.035 C38.938,20.035 40.265,21.360 40.265,22.993 C40.265,24.627 38.938,25.951 37.301,25.951 ZM26.995,25.951 C25.358,25.951 24.031,24.627 24.031,22.993 C24.031,21.360 25.358,20.035 26.995,20.035 C28.632,20.035 29.959,21.360 29.959,22.993 C29.959,24.627 28.632,25.951 26.995,25.951 ZM16.689,25.951 C15.052,25.951 13.725,24.627 13.725,22.993 C13.725,21.360 15.052,20.036 16.689,20.036 C18.326,20.036 19.653,21.360 19.653,22.993 C19.653,24.627 18.326,25.951 16.689,25.951 Z"/>
      </svg>
    `;
    const ICON_SVG_CLOSE = `
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25" preserveAspectRatio="xMidYMid">
        <path fill-rule="evenodd" fill="rgb(255, 255, 255)"
       d="M25.521,23.400 L22.692,26.228 L12.793,16.328 L3.600,25.521 L0.772,22.692 L9.964,13.500 L0.772,4.308 L3.600,1.479 L12.793,10.672 L22.692,0.772 L25.521,3.601 L15.621,13.500 L25.521,23.400 Z"/>
      </svg>
    `;

    let mainElement;

    function CSSInjector () {
      let styleElement = document.createElement('STYLE');
      let styles = `
        #${HTML_ID}.PPC-Injector {
          -webkit-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
          user-select: none;
          box-sizing: border-box;
          position: fixed;
          bottom: 0;
          left: 0;
          z-index: 999999;
          width: 100%;
          padding: 15px;
          font-size: 15px;
          text-align: center;
          border-top: 1px solid ${COLOR_GREEN_DARK};
          text-shadow: 0 1px 0 ${COLOR_GREEN_DARK};
          background: ${COLOR_GREEN};
          color: ${COLOR_WHITE};
          transition: all 0.5s ease-in-out;
          transform: translate3d(0, 100%, 0);
        }

        #${HTML_ID}.PPC-Injector.status--active {
          transform: translate3d(0, 0, 0);
        }

        #${HTML_ID}.PPC-Injector h4 {
          font-size: 1em;
          margin: 0 0 10px;
          padding: 0;
          font-weight: normal;
        }

        #${HTML_ID} .PPC-Injector__button {
          display: inline-block;
          border: 1px solid ${COLOR_GREEN_DARK};
          border-radius: 4px;
          padding: 0.8em 1.5em;
          font-size: 14px;
          width: 150px;
          text-align: center;
          font-weight: bold;
          color: ${COLOR_WHITE};
        }

        #${HTML_ID} .PPC-Injector__button svg {
          display: inline-block;
          height: 21px;
          float: left;
          margin-top: -2px;
        }

        #${HTML_ID} .PPC-Injector__button:hover {
          background: ${COLOR_GREEN_DARK};
        }

        #${HTML_ID} .PPC-Injector__button:last-child {
          margin-left: 10px;
        }

        #${HTML_ID} .PPC-Injector__close {
          position: absolute;
          top: 10px;
          right: 10px;
          width: 30px;
          height: 30px;
          border-radius: 4px;
          background: ${COLOR_GREEN_DARK};
          opacity: 0.6;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
        }

        #${HTML_ID} .PPC-Injector__close:hover {
          opacity: 0.8;
        }

        #${HTML_ID} .PPC-Injector__close:active {
          opacity: 1;
        }

        #${HTML_ID} .PPC-Injector__close svg {
          width: 12px;
          height: 12px;
        }

        @media screen and (max-width: 600px) {
          #${HTML_ID}.PPC-Injector {
            padding: 5px 5px 10px;
          }

          #${HTML_ID}.PPC-Injector h4 {
            padding: 30px;
            font-size: 1.2em;
          }

          #${HTML_ID} .PPC-Injector__close {
            background: none;
          }

          #${HTML_ID} .PPC-Injector__button {
            width: 46%;
            max-width: 150px;
          }
        }
      `;

      styleElement.innerHTML = styles;

      // Append Style to page
      document.head.appendChild(styleElement);
    }

    function HTMLInjector () {
      mainElement = document.createElement('DIV');
      let html = `
        <div id="${HTML_ID}" class="PPC-Injector">
          <div class="PPC-Injector__close" id="${HTML_ID}-close">
            ${ICON_SVG_CLOSE}
          </div>
          <h4>Chat with community members and developers:</h4>
          <a href="${TELEGRAM_LINK}" id="${HTML_ID}-telegram" class="PPC-Injector__button">${ICON_SVG_TELEGRAM} Telegram</a>
          <a href="${ROCKETCHAT_LINK}" id="${HTML_ID}-rocketchat" class="PPC-Injector__button">${ICON_SVG_ROCKETCHAT} Web Chat</a>
        </div>
      `;

      mainElement.innerHTML = html;

      // Append HTML to page
      document.body.appendChild(mainElement);
    }

    function hasUserInteracted () {
      return !!localStorage.getItem(STORAGE_KEY);
    }

    function saveUserInteraction () {
      localStorage.setItem(STORAGE_KEY, 'yes');
    }

    function closeBar () {
      saveUserInteraction();
      mainElement.children[0].classList.remove('status--active');
    }

    function showBar () {
      mainElement.children[0].classList.add('status--active');
    }

    function assignEvents () {
      document.getElementById(`${HTML_ID}-close`).addEventListener('click', closeBar);
      document.getElementById(`${HTML_ID}-telegram`).addEventListener('click', closeBar);
      document.getElementById(`${HTML_ID}-rocketchat`).addEventListener('click', closeBar);
    }

    function initialize () {
      // User never interacted with this popup
      if (!hasUserInteracted()) {
        CSSInjector();
        HTMLInjector();
        assignEvents();
        setTimeout(() => {
          showBar();
        }, FIRST_SHOWUP_DELAY);
      }
    }

    return initialize();
})(window)