JSFiddle - React, Tailwind, and code Playground

by AntowaKartowa

HTML

<script>window.mercanto = { ids: { rtid: 123456789, cuid: 987654321 }, events: [] };</script>
<div class="mrcnt-test-widget">
  <input type="checkbox" name="modal-toggle" id="modal-toggle" class="mrcnt-hidden">
  <div class="mrcnt-modal-open">
    <label for="modal-toggle" class="mrcnt-modal-open-trigger">
      <img class="mrcnt-logo" width="36" height="36" alt="Mercanto" src="https://log.kantowa.com/static/logo.png">
    </label>
  </div>

  <div class="mrcnt-test-modal-wrapper">
    <div class="mrcnt-test-modal">
      <input type="checkbox" name="monitors-toggle" id="monitors-toggle" class="mrcnt-hidden">
      <div class="mrcnt-modal-header">
        <label for="monitors-toggle" class="mrcnt-monitors-panel-toggle">
          <span class="mrcnt-show-monitors">Show monitors</span>
          <span class="mrcnt-hide-monitors">Hide monitors</span>
        </label> | 
        <label for="modal-toggle" class="mrcnt-modal-close">Close modal</label>
      </div>
      <div class="mrcnt-event-panel mrcnt-test-panel">
          <label class="mrcnt-label" for="cuid">Customer Id</label>
          <input type="text" name="cuid" id="cuid" class="mrcnt-input mrcnt-cuid" value="">
          <button class="mrcnt-btn mrcnt-gen-cuid">Generate</button>
          <button class="mrcnt-btn mrcnt-set-cuid">Login</button>
          <hr/>

          <label class="mrcnt-label" for="cmpgnid">Campaign Id</label>
          <input type="text" class="mrcnt-input mrcnt-cmpgnid" name="cmpgnid" id="cmpgnid" value="">
          <button class="mrcnt-btn mrcnt-gen-cmpgnid">Generate</button>
          <button class="mrcnt-btn mrcnt-set-cmpgnid">Set</button>
          <button class="mrcnt-btn mrcnt-clear-cmpgnid">Clear Id</button>
          <hr/>

          <label class="mrcnt-label">Event type:</label>
          <input type="radio" name="event" id="evtype-click" class="mrcnt-hidden mrcnt-input mrcnt-evtype" value="click" checked>
          <input type="radio" name="event" id="evtype-purchase"...

CSS

.mrcnt-test-widget {
  position: relative;
  font-size: 14px;
  z-index: 1000000;
}

.mrcnt-modal-open {
  position: fixed;
  top: 50%;
  left: 5px;
  width: 40px;
  height: 40px;
  z-index: 3;
}

#modal-toggle:checked ~ .mrcnt-modal-open {
  visibility: hidden;
  z-index: -1;
}

.mrcnt-modal-open-trigger {
  display: block;
  margin: 0;
  height: 36px;
  width: 36px;
  text-align: center;
  border: 2px solid #fff;
  -webkit-border-radius: 19px;
  -moz-border-radius: 19px;
  border-radius: 19px;
  background-color: #fff;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

.mrcnt-logo {
  vertical-align: middle;
}


.mrcnt-test-modal-wrapper {
  position: fixed;
  top: 0;
  height: 0;
  width: 0;
  height: 0;
  text-align: center;
  z-index: -1;
  visibility: hidden;
  overflow: hidden;
}


#modal-toggle:checked ~ .mrcnt-test-modal-wrapper {
  width: 100vw;
  height: 100vh;
  line-height: 100vh;
  visibility: visible;
  z-index: 3;
}

.mrcnt-test-modal {
  position: relative;
  display: inline-block;
  max-width: 960px;
  line-height: 1.3em;
  vertical-align: middle;
  background-color: #fff;
}

label {
  line-height: 1.5em;
  margin: 5px 0;
}

label[for] {
  cursor: pointer;
}

input[type=checkbox] {
  margin-right: 5px;
}

.mrcnt-hidden {
  position: absolute;
  visibility: hidden;
  z-index: -1;
}

.mrcnt-label {
  display: inline-block;
  width: 100px;
}

.mrcnt-hide-monitors {
  display: none;
}

#monitors-toggle:checked ~ .mrcnt-modal-header .mrcnt-hide-monitors {
  display: inline-block;
}

#monitors-toggle:checked ~ .mrcnt-modal-header .mrcnt-show-monitors {
  display: none;
}

.mrcnt-test-panel {
  position: relative;
  display: inline-block;
  width: 475px;
  padding: 10px;
  vertical-align: top;
  text-align: left;
  box-sizing: border-box;
  z-index: 1;
}

.mrcnt-monitor-panel {
  visibility: hidden;
  width: 0;
  height: 0;
  z-index: -1;
}

#monitors-toggle:checked ~ .mrcnt-monitor-panel {
  visibility:...

JavaScript

init();

function init() {
  /* var customerId = window.mercanto.ids.cuid || '';
    var campaignId = window.mercanto.ids.campaingId || ''; */
  window.mrcntTest = { eventObj: { event: 'click'} };

  updateEventMonitor();
  /* updateStateMonitor();
  updateVarsMonitor();
  updateLogMonitor(); */

  setCuidLoginHandler();
  setCmpgnIdHandlers();
  setEventTypeHandler();
  setPrdctsHandlers();
  setTrsctnIdHandler();
  setSrchHandler();
  setGenerateHandlers(['cuid', 'cmpgnid', 'prdctid', 'trsctnid']);
  setEventHandlers();
  setMonitorsHandlers();
}

function setCuidLoginHandler() {
  var btn = document.querySelector('.mrcnt-set-cuid');
  btn.addEventListener('click', cuidSetHandler.bind(this));
}

function cuidSetHandler(input) {
  var cuid = document.querySelector('.mrcnt-cuid').value;
  window.mercanto.ids.cuid = cuid;
  update(['state', 'event', 'log']);
}

function setCmpgnIdHandlers() {
  var setBtn = document.querySelector('.mrcnt-set-cmpgnid');
  var clrBtn = document.querySelector('.mrcnt-clear-cmpgnid');

  setBtn.addEventListener('click', cmpgnSetHandler.bind(null));
  clrBtn.addEventListener('click', cmpgnClrHandler.bind(null));
}

function cmpgnSetHandler() {
  var cmpgnId = document.querySelector('.mrcnt-cmpgnid').value;
  window.mercanto.ids.campaignId = cmpgnId;
  update(['state', 'vars', 'event']);
}

function cmpgnClrHandler() {
  delete window.mercanto.ids.campaignId;
  setCookie('mrcnt_campaign', '');
  update(['state', 'vars', 'event']);
}

function setEventTypeHandler() {
  var evTypes = document.querySelectorAll('.mrcnt-evtype');
  [].forEach.call(evTypes, function(evType) {
    evType.addEventListener('change', eventTypeChangeHandler.bind(this));
  });
}

function eventTypeChangeHandler(event) {
  if (event.target.checked) {
    eventSpecificParamsClean();
    window.mrcntTest.eventObj['event'] = event.target.value;
    event.target.value === 'click' && prdctSelectLast();
    update(['event']);
  }
}

function eventSpecificParamsClean() {
 ...