JSFiddle - React, Tailwind, and code Playground

by bombo

HTML

<link rel="stylesheet" href="http://suppenzauber.com/sitrion/css/apptemplates.css">
<link rel="stylesheet" href="http://suppenzauber.com/sitrion/css/wizard.css">
<link rel="stylesheet" href="http://suppenzauber.com/sitrion/css/jquery-ui-1.8.16.custom.css">
<script src="http://www.suppenzauber.com/sitrion/js/slide.js"></script>
<link rel="stylesheet" href="http://suppenzauber.com/sitrion/css/slide.css">
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-1.3.0beta.debug.js"></script>
<script src="http://www.suppenzauber.com/sitrion/js/jquery.loading.js"></script>
<script src="http://www.suppenzauber.com/sitrion/js/constructors.js"></script>
<script src="http://www.suppenzauber.com/sitrion/js/data.js"></script>
<script src="http://www.suppenzauber.com/sitrion/js/container.js"></script>
<div class="container" id="Banks-container">
    <div class="title">
        <div class="breadcrumb">
            <div class="help">
                <div id="toggle" class="closed">
                    <div id="helplink"><a href="#">help</a></div>
                    <div id="closelink"><a href="#">close</a></div>
                </div>
            </div>
            <ul>
                <li class="first"><a href="#">My HR</a></li>
                <li><a href="#">Time</a></li>
                <li><a href="#" class="current">Teamviewer</a></li>
            </ul>
        </div>
    </div>
    <div id="toppanel">
        <div id="panel" style="display: none">
            <div id="topics">
                <div class="logo"></div>
                 <div id="relatedDocuments">
                    <h1>Related Documents</h1>
                    <ul></ul>
                </div>
            </div>
            <div id="helpcontent">
                <div id="helpText" class="flexcroll"></div>
            </div>
            <div class="helpcontent clearfix"></div>
        </div>
    </div>
    
    <div class="loading"></div>
    <div class="content">
        <div...

CSS

.active {
    background: url('http://www.suppenzauber.com/sitrion/img/sitrion/loading_active.png') no-repeat;
}

.inactive {
    background: url('http://www.suppenzauber.com/sitrion/img/sitrion/loading_passive.png') no-repeat;
}

.teamViewer {
    padding-bottom: 30px;
}

.orgTree {
    position: relative;
    width: 210px;
    float: left;
}

.teamViewer .title  {
    background: url('http://www.suppenzauber.com/sitrion/img/tv/title_bg.png') repeat-x;
    height: 28px;
    border: 1px solid #9d6226;
    border-bottom: 1px solid #b18252;
}

.orgTitle {
    font-weight: bold;
    color: white;
}

.orgTitle .name {
    margin-top: 5px;
    float: left;
    width: 128px;
}
.actions {
    width: 50px;
    height: inherit;
    float: left;
}

.actions > * {
    cursor: pointer;
    float: left;
    width: 25px;
    height: inherit;
}

.actions .showTree {
    background: url('http://www.suppenzauber.com/sitrion/img/tv/viewTree_icon.png') no-repeat center;
}

.actions .navUp {
    background: url('http://www.suppenzauber.com/sitrion/img/tv/goUp_icon.png') no-repeat center;
}

.orgTitle .favicon {
    background: url('http://www.suppenzauber.com/sitrion/img/tv/orgTree_icon.png') no-repeat center;
    width: 30px;
    height: inherit;
    float: left;
}

.team {
    font-weight: bold;   
    background: url('http://www.suppenzauber.com/sitrion/img/tv/teamTitle_bg.png') repeat-x;
    height: 27px;
    border-top: #ddd 1px solid;
    border-bottom: #ddd 1px solid;
    border-left: #c8c8c8 1px solid;
    border-right: #c8c8c8 1px solid;
    padding-right: 5px;
}

.team .favicon {
    background: url('http://www.suppenzauber.com/sitrion/img/tv/team_icon.png') no-repeat center;
    width: 30px;
    height: inherit;
    float: left;
}

.team .name {
    padding-top: 6px;
    float: left;
    width: 156px;
}

.search {
    margin-top: 5px;
    margin-right_ 5px;
    background: url('http://www.suppenzauber.com/sitrion/img/tv/search_icon.png') no-repeat center;
    height:...

JavaScript

(function (sitrion, core, $, ko) {
    
    var viewModel = new Team({
        Members : [],
        SIVM_ID : '',
        Title : '',
        SubTeams : [],
        Parent : new TeamRef({
            SIVM_ID : '',
            Title : ''
        })
    });
    
    viewModel.ParentTitle = ko.dependentObservable(function () {
        if (this.Parent()) {
            return this.Parent().Title();
        }
        return '';
    }, viewModel);
    
    viewModel.MembersView = ko.observableArray();
    viewModel.SubTeamsView = ko.observableArray();
    
    viewModel.SelectedMember = ko.observable();
    
    viewModel.Members.subscribe(function (newValue) {
        var newArray = [];
        if (newValue) {
            this.MembersView([]);
            ko.utils.arrayForEach(newValue, function (item) {
                
                item.SelectMe = function () {
                    viewModel.SelectedMember(item);
                };
                
                newArray.push(item);
            });
            this.MembersView(newArray);
        }
    }, viewModel);

    viewModel.SubTeams.subscribe(function (newValue) {
        var newArray = [];    
        if (newValue) {
            this.SubTeamsView([]);
            ko.utils.arrayForEach(newValue, function (item) {
                
                item.NavDown = function () {
                    changeTeam(item.SIVM_ID());
                }
                
                newArray.push(item);
            });
            this.SubTeamsView(newArray);
        }
    }, viewModel);
    
    viewModel.SearchActive = ko.observable(false);
    viewModel.ToggleSearch = function () {
        viewModel.SearchActive(!viewModel.SearchActive());
    };

    
    function toggleTree () {
        $('.orgTitle').next().slideToggle(function () {
            $(this).next().slideToggle();
        });
    }
    
    function changeTeam(newTeam) {
        var data = Data[newTeam],
                curParent =...