JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://agrisphere-portal.com/clientPortal/includes/allSafe/forms/formlist/css/docubin.icon.selection.component.css">
<script src="https://agrisphere-portal.com/clientPortal/includes/allSafe/forms/formlist/js/docubin.icon.selection.component.js"></script>
<input type="hidden" name="docubin-form-icon-configuration" value="[]">

CSS

.docubin-icon-configurator{
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 99999999999;
  background-color: rgba(0,0,0,0.6);
  font-family: helvetica;
}
.docubin-icon-configurator>div{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 800px;
  transform: translateX(-50%) translateY(-50%);
  padding: 20px;
  background-color: #222;
  color: #fff;
}
.docubin-icon-configurator>div>h2{
  text-align: center;
  font-size: 21px;
  font-weight: normal;
  margin: 0;
  margin-bottom: 15px;
}
.docubin-icon-configurator>div>ul{
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 348px;
  overflow: auto;
}
.docubin-icon-configurator>div>ul>li{
  width: calc(33.3333% - 30px);
  padding: 10px;
  margin: 5px;
  background-color: #fff;
  display: inline-block;
  color: #000;
  font-size: 15px;
  vertical-align: top;
}
.docubin-icon-configurator>div>ul>li>img{
  height: 32px;
  vertical-align: middle;
  margin-right: 10px;
}
.docubin-icon-configurator>div>ul>li>ul{
  list-style: none;
  margin: 0;
  padding: 0;
  margin-top: 10px;
}
.docubin-icon-configurator>div>ul>li>ul>li{
  background-color: #ccc;
  color: #000;
  padding: 5px;
  font-size: 11px;
  border-bottom: solid 1px #666;
}
.docubin-icon-configurator>div>ul>li>ul>li>strong{
  font-size: 13px;
  display: block;
  margin-bottom: 5px;
}
.docubin-icon-configurator>div>ul>li>ul>li>p{
  margin: 0px;
}
.docubin-icon-configurator>div>ul>li>ul>li>p>span{
  vertical-align: middle;
  margin-right: 6px;
}
.docubin-icon-configurator>div>ul>li>ul>li>p>img{
  height: 16px;
}

JavaScript

class docubinIconConfigurator {

	constructor( services, scopes, configuration, onchange ){
  
  	this.root = 'https://agrisphere-portal.com';
  
  	this.onchange = onchange;
    
  	this.services = services;
    this.scopes = scopes;
    this.configuration = configuration;
    
    this.component = null;
    
    this.buildUI();
  
  }
  
  buildUI(){
  
  	this.component = $('<div class="docubin-icon-configurator"><div><h2>Docu-Bin Form Icon Configuration Editor</h2><ul></ul></div></div>');
    
    let services_list = this.component.find('>div>ul');
    
    for(let i=0;i<this.services.length;i++){
    
    	let service = $('<li><img src="' + this.root + this.services[i].vault_icon_path + '" />' + this.services[i].name + '<ul></ul></li>');
      
      services_list.append(service);
      
      for(let ii=0;ii<this.scopes.length;ii++){
      
      	if(this.services[i].id == this.scopes[ii].service_id){
        
        	let scope = $('<li><strong>' + this.scopes[ii].name + '</strong><p data-name="Multi-Form Packages"><span></span> Multi-Form Packages</p><p data-name="Digital Forms"><span></span> Digital Forms</p></li>');
          
          let scopeIconPackages = this.root + this.scopes[ii].package_icon_path;
          let scopeIcon = this.root + this.scopes[ii].icon_path;
          
          let icon = new DocubinIconSelectionComponent(
            scope.find('p[data-name="Digital Forms"]>span'),
            scopeIcon,
            libraryIcons,
            (newIcon) => {
            
            	this.scopes[ii].icon_path = newIcon;

              this.recompileData();

            }
          );
          
          let packageicon = new DocubinIconSelectionComponent(
            scope.find('p[data-name="Multi-Form Packages"]>span'),
            scopeIconPackages,
            libraryIcons,
            (newIcon) => {
            
            	this.scopes[ii].package_icon_path = newIcon;

       ...