JSFiddle - React, Tailwind, and code Playground

by musicreader

HTML

<link rel="stylesheet" href="https://www.mrsync.com/css/background.css">
<script src="https://www.mrsync.com/js/jquery/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://www.mrsync.com/css/jquery-ui.css">
<div id="pages">

</div>

CSS

.ui-tabs-vertical { width: 55em; }
  .ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
  .ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
  .ui-tabs-vertical .ui-tabs-nav li a { display:block; width:100%; }
  .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; }
  .ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}
  
.pageOrderHandle{
  height:40px;
  width:40px;
  background-color: red;
  display:inline-block;
  float:left;
}

.pageActionButton{
  height:40px;
  width:40px;
  background-color: red;
  display:inline-block;
  float:left;
}

.pageOrderText{
  height:40px;
  width:80px;
  background-color: blue;
  display:inline-block;
  line-height:40px;
  padding-left:5px;
  float:left;
}

JavaScript

function addPages(page_config, selected_callback, move_callback, clone_callback, remove_callback){
  		var pages_tabs=$("#pages")[0];
      pages_tabs.innerHTML=""; //Clear
      var ul_list= document.createElement("ul");
      pages_tabs.appendChild(ul_list);
  		for(var i=0;i<page_config.length;i++){
      	var page=page_config[i];
        var page_id="page-"+page.id;
        //List Item
          var li=document.createElement("li");
          li.id="tab-"+page.id;
          var ahref=document.createElement("a")
          ahref.href="#"+page_id;
          li.appendChild(ahref); 
          //Handle
          	if(typeof move_callback=="function"){
              var handle=document.createElement("div");
              handle.className="pageOrderHandle";
              ahref.appendChild(handle);
            }
          //Text
            var text=document.createElement("div");
            text.className="pageOrderText";
            ahref.appendChild(text);
          	text.innerText=page.name;      
          
          ul_list.appendChild(li);
          //buttons
          if(typeof remove_callback=="function"){
          	  var remove_b=document.createElement("div");
              remove_b.className="pageActionButton";
              remove_b.onpointerdown=remove_callback.bind(this,page.id);
              ahref.appendChild(remove_b);
          }
        //Tab
        	var tab=document.createElement("div");
          tab.id=page_id;
          pages_tabs.appendChild(tab);
      }
      
      var config={
        active: -1,
        activate:function( event, ui ) {
          var pageNumber=ui.newPanel[0].id.split("-")[1];
          selected_callback(pageNumber,ui.newPanel[0]);
        }
      };
      var pages_obj=$( "#pages" );
      pages_obj.tabs(config).addClass( "ui-tabs-vertical ui-helper-clearfix" );
      $( "#pages li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );

      pages_obj.tabs({
        active: 0
      });

      //change order by...