JSFiddle - React, Tailwind, and code Playground

by ronilan

CSS

html,
body {
     height: 100%;
     margin: 0;
     padding: 0;
}


[data-xstatic-prompt] {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: rgba(0,0,0,0.75);
}

[data-xstatic-promopt-inner] {
  max-width: 50%;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 12px;
  border: 1px solid #666;
  border-radius: 5px;
  padding: 10px;
  background: white;
  box-shadow: 3px 3px 6px 0px rgba(0,0,0,0.75);
}

[data-xstatic-prompt-msg] {
  display: block;
  padding-bottom: 5px;
}

[data-xstatic-promopt-inner] button {
  margin: 2px;
}

JavaScript

function xstaticPrompt (data, func) {

	var el = document.querySelector('[data-xstatic-prompt]');
  var str,
  		result;
  
  function cancelAction () {
  
  	el.parentNode.removeChild(el);
  
  }
  
  function okAction () {
  
  		result = el.getElementsByTagName('INPUT')[0].value;
  		el.parentNode.removeChild(el);
      data.ok_action.call(null, result);
      
  }
  
  // only render the box if there is no other such element rendered and a callback is provided.
	if (!el && (typeof data.ok_action === 'function' || typeof func === 'function')) {
  
  	str = data.template || '<div data-xstatic-prompt><div data-xstatic-promopt-inner><span data-xstatic-prompt-msg>{{msg}}</span><input type="text" data-xstatic-promopt-result value={{default}}><button data-xstatic-prompt-cancel>{{cancel_button}}</button><button data-xstatic-prompt-ok>{{ok_button}}</button></div></div>';

    data.default = data.default || '';
    data.msg = data.msg || ''; 
    data.ok_button = data.ok_button || 'OK'; 
    data.cancel_button = data.cancel_button || 'Cancel';

    typeof data.cancel_action !== 'function' ?  data.cancel_action = cancelAction : null;
 		typeof data.ok_action !== 'function' ?  data.ok_action = func : null;
    
    for (key in data) {
      str = str.replace('{{' + key + '}}', data[key])
    }

    document.body.insertAdjacentHTML('afterbegin', str);
    el = document.querySelector('[data-xstatic-prompt]');
    document.querySelector('[data-xstatic-promopt-result]').focus();

    el.addEventListener('click', function(e) {

      if (e.target.hasAttribute('data-xstatic-prompt-cancel')) {

        data.cancel_action.call(null, el);   
     
      }

      if (e.target.hasAttribute('data-xstatic-prompt-ok')) {
     
     		okAction();
        
      }

      if (e.target.hasAttribute('data-xstatic-prompt')) {
      
        typeof data.modal_action === 'function' ? data.modal_action.call(null, el) : null;
        
      }

    });

    el.addEventListener('keyup',...