Table Component - Dropped Content

Jquery - Babel

by ti2005

HTML

<script src="https://omnipotent.net/jquery.sparkline/2.1.2/jquery.sparkline.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/justgage/1.2.9/justgage.min.js"></script>
<div id="editor">

  <ul id="menu">
    <li>
      <div id="gauge" class="gauge" draggable="true" ondragstart="drag(event)"></div>
      <!-- <span id="gauge" draggable="true" ondragstart="drag(event)"></span> -->
    </li>
    <li>
      <span id="inlinesparkline" draggable="true" ondragstart="drag(event)">1,4,4,7,5,9,10</span>
    </li>
    <li>
      <span id="dynamicsparkline" draggable="true" ondragstart="drag(event)">Loading..</span>
    </li>
    <li>
      <span id="dynamicbar" draggable="true" ondragstart="drag(event)">Loading..</span>
    </li>
    <li>
      <span id="inlinebar" draggable="true" ondragstart="drag(event)">1,3,4,5,3,5</span>
    </li>
  </ul>

</div>

CSS

body {
  background: #fff;
  padding: 20px;
  font-family: Helvetica;
}

ul#menu li {
  display: inline;
  padding: 10px 25px;
  border: 1px solid #000;
  min-width: 120px;
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

.gauge {
  width: 100px;
  height: 100px;
}

Babel + JSX

var editor = $("#editor");

var myvalues = [10, 8, 5, 7, 4, 4, 1];

function  gauge(config) {
 new JustGage({
    id: config.id,
    value: config.value || 67,
    min: config.min || 0,
    max: config.max || 100,
    title: config.title || "Visitors"
  });
}

/** This code runs when everything has been loaded on the page */
/* Inline sparklines take their values from the contents of the tag */
function inlinesparkline(id) {
  myvalues1 = [1, 4, 5, 7, 4, 8, 10];
  $(id).sparkline(myvalues1);
}

/* Sparklines can also take their values from the first argument 
passed to the sparkline() function */
function dynamicsparkline(id) {
  $(id).sparkline(myvalues);
}


/* The second argument gives options such as chart type */
function dynamicbar(id) {
  $(id).sparkline(myvalues, {
    type: 'bar',
    barColor: 'green'
  });
}

/* Use 'html' instead of an array of values to pass options 
to a sparkline with data in the tag */
function inlinebar(id) {
  $(id).sparkline(myvalues, {
    type: 'bar',
    barColor: 'red'
  });
}

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  let newId = `${ev.target.id}_${new Date().valueOf()}`;
  let elem = $('#' + ev.target.id).clone().prop('id', newId);
  // console.log(elem);
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev, options) {
console.log(options);
  ev.preventDefault();
  const data = ev.dataTransfer.getData("text");
  let newId = `${data}_${new Date().valueOf()}`;

  let newElem = document.getElementById(data);
  const clone = newElem.cloneNode(true);
  clone.id = newId;
  // ev.target.appendChild(clone);
  if(data === "gauge") {
  	ev.target.innerHTML = `<div id="${newId}" class="gauge"></div>`;
  } else {
   	ev.target.innerHTML = clone.outerHTML;
  }
 

  let componentInvoker = {
  gauge: (_id) => gauge({ id:_id }),
    inlinesparkline: (_id) => inlinesparkline('#'+_id),
    dynamicsparkline: (_id) => dynamicsparkline('#'+_id),
    dynamicbar: (_id) => dynamicbar('#'+_id),
   ...