JSFiddle - React, Tailwind, and code Playground

by Adrian Dusa

HTML

<div>
    <button id="fireit">Open</button>
</div>


<div id="content"></div>

JavaScript

$( function() {

    $("#content").dialog({
        position: {my: "left top", at: "left+5px top+40px", of: window},
        title: "A title",
        width: 350,
        height: 375,
        resizable: false,
        closeOnEscape: true,
        autoOpen: false
    });
    
    var paper_content = Raphael("content", 300, 30);
    
    var info = {
        dirs  : ["dir1", "dir2", "dir3", "dir4", "dir5", "dir6", "dir7", "dir8", "dir9", "dir10"],
        files : ["file1", "file2", "file3", "file4", "file5", "file6", "file7", "file8", "file9", "file10"]
    };
    
    paper_content.setStart();
    var texts = paper_content.setFinish();
    
    function print_dirs() {
        
        texts.remove();
        
        var i;
        var row = 10;
        
        paper_content.setStart();
        
        for (i = 0; i < info.dirs.length; i++) {
            paper_content.text(5, row, "+").attr({'text-anchor': 'start', 'font-size': '14px'});
            paper_content.text(25, row, info.dirs[i]).attr({'text-anchor': 'start', 'font-size': '14px'});
            row += 20;
        }
        for (i = 0; i < info.files.length; i++) {
            paper_content.text(25, row, info.files[i]).attr({'text-anchor': 'start', 'font-size': '14px'});
            row += 20;     
        }
        
        
        row = 10;
        var arect;
        
        for (i = 0; i < info.dirs.length; i++) {
            arect = paper_content.rect(5, row - 10, 500, 20).attr({fill: "#acadea", 'stroke-opacity': '0.5', 'fill-opacity': 0.5});
            arect.id = i;
            arect.click(function() {
                alert(info.dirs[this.id]);
            })
            row += 20;
        }
        
        for (i = 0; i < info.files.length; i++) {
            arect = paper_content.rect(5, row - 10, 500, 20).attr({fill: "#acadea", 'stroke-opacity': '0.5', 'fill-opacity': 0.5});
            arect.id = i;
            arect.click(function() {
                alert(info.files[this.id]);
           ...