JSFiddle - React, Tailwind, and code Playground

by vpetrychuk

HTML

<script src="https://raw.github.com/cubiq/iscroll/master/src/iscroll.js"></script>
<div id="loadingScreen"></div>
<div id="desktop">
    <div class="unity panel"></div>
    <div class="unity launcher">
        <div class="launcherIcon bfb">
            <img src="img/unity/launcher.bfb.png" alt="Dash Home" />
        </div>
        <div class="launcherApps" id="launcherApps">
            <!-- added iScrollViewport -->
            <div class="launcherAppsList iScrollViewport">
                app1<hr/>
                app2
            </div>
        </div>
        <div class="launcherIcon launchTrash">
            <img src="img/apps/trash.icon.png" alt="Rubbish Bin" />
        </div>
    </div>
    <div class="window">
        <div class="windowClose"></div>
        <div class="windowContent">
            <div class="windowPreferences">
                <p>Nothing to be seen here, yet</p>
            </div>
        </div>
    </div>
    <div class="unity dash">
        <div class="dashContent">
            <div class="dashApps dashPage iScroll" id="dashApps">
               <!-- added iScrollViewport -->
               <div class="appList iScrollViewport">app1<hr/>app2</div>
            </div>
            <div class="dashFiles dashPage iScroll" id="dashFiles">
                 <!-- added iScrollViewport -->
                <div class="fileList iScrollViewport">file<hr/>file</div>
            </div>
        </div>
        <div class="dashRibbon">
            <img src="img/unity/apps.png" alt="Applications" class="activeRibbonItem ribbonApps" />
        </div>
    </div>
</div>

CSS

html, body
{
    font-family: 'Ubuntu', 'Droid Sans';
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    background: rgb(43,0,30);
}

/*# Loading screen #*/
div#loadingScreen
{
    position: fixed;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    text-align: center;
    background: rgb(43,0,30) url(img/ubuntuLogo.png) center center no-repeat;
    color: white;
    z-index: 49;
}

/*# Desktop #*/
div#desktop
{
    display: none;
    position: fixed;
    left: 0px;
    top: 0px;
    bottom: 0px;
    right: 0px;
    background: rgb(43,0,30) url(img/wallpaper/wartyFinal.jpg);
    background-position: center center;
    background-size: cover;
}
div.unity.panel
{
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 24px;
    background: rgb(69,68,64) url(img/unity/panel.background.jpg);
    background-repeat: repeat-x;
}
    div.unity.panel.dashOpened
    {
        background: transparent url(img/unity/dashOpened.png);
        border-bottom: 1px solid #504E4F;
    }
div.unity.launcher
{
    display: none;
    position: absolute;
    top: 24px;
    left: 0px;
    bottom: 0px;
    width: 0px; /* Animates to 64px */
    background: transparent url(img/unity/launcher.background.png);
    border-right: 1px solid #504E4F;
    padding: 3px 0px 55px 0px;
}
    div.unity.launcher.dashOpened
    {
        background: transparent url(img/unity/dashOpened.png);
    }
    div.launcherIcon
    {
        display: none;
        width: 52px;
        height: 52px;
        margin: 4px 6px 4px 6px;
        border-radius: 5px;
        background: transparent url(img/unity/launcher.iconbg.png);
        background-position: center;
        background-size: cover;
    }
        div.unity.launcherIcon.dashOpened
        {
            background: grey !important;
            opacity: 0.8;
        }
        div.launcherIcon.bfb
        {
            background-image: none;
            border-radius: 0px;
        }
       ...

JavaScript

var bootscreenDelay = 500; // 2500 //
var appOpened = false;
var dashOpened = false;
var isAppStarted = false;
var scrolls = {};

// this was added:
$(document).on('appStarted', function() {
    // $('div.launcherIcon').length === 2
    // but we should init scroll only once
    if (isAppStarted) return;
    isAppStarted = true;
    scrolls.launcherApps = new iScroll($('#launcherApps').get(0));
    
    // some time later when dashApps or/and dashFiles will be shown - init scroll;
    setTimeout(function() {
        var $dash = $('.dash').show();
        // destroy previous scrolls
        // but the best option to destroy scroll when it will be hidden (to free the memory) or before it will be removed
        scrolls.dashApps && scrolls.dashApps.destroy();
        scrolls.dashFiles && scrolls.dashFiles.destroy();
        // create new scrolls
        scrolls.dashApps = new iScroll($dash.find('.dashApps').get(0));
        scrolls.dashFiles = new iScroll($dash.find('.dashFiles').get(0));
        
        // then some time later user will open another app and you have to update page content:
        setTimeout(function() {
            $('.dashApps > .appList').html(new Array(10).join('some text<br/>'));
            // if content height will be changed you should refresh scroll
            // .dashApps doesn't have fixed height but should (iScroll should know continer size, try pass to new Array 50 element and you will see what I'm talking about)
            scrolls.dashApps.refresh();
        },
        500);
    },
    500);
});








$('div#loadingScreen').delay(bootscreenDelay).fadeOut(800);
$('div#desktop').delay(bootscreenDelay + 300).fadeIn(600, function () {
    $('div.unity.panel').slideDown(400, function () {
        $('div.unity.launcher').css('display', 'block').animate({ width: 64 }, 600, function () {
            $('div.launcherIcon').each(function (i) {
                $(this).delay(i * 200).slideDown(400, function() {
                    // this was...