udx.wp.spa

by andypotanin

HTML

<script src="http://cdn.udx.io/udx.requires.js"></script>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12 module hero">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">full-width</div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 module-container">
            <div class="container">
                <div class="row">
                    <div class="col-md-6">left</div>
                    <div class="col-md-6">right</div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 module-wrapper hero">
            <div class="container">
                <div class="row">
                    <div class="col-md-12" id="content">full-width</div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 module-container">
            <div class="container">
                <div class="row">
                    <div class="col-md-3">left</div>
                    <div class="col-md-3 col-md-push-6">right</div>
                    <div class="col-md-6 col-md-pull-3">middle</div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 module-container">
            <div class="container">
                <div class="row">
                    <div class="col-md-6 module">left hero</div>
                    <div class="col-md-6 module">right hero</div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 module gallery">
            <div class="container">
                <div class="row">
                    <div class="col-md-12 module">
                         <h2>Kitten Gallery</h2>

                        <aside data-requires="udx.ui.gallery"...

CSS

@import'//umesouthpadre.com/assets/styles/app.main.css';

div {
    text-align: center;
}
div:hover {
    background-color: #dadada;
}
 .container {
}
div[class*='col-'] {
    box-shadow: inset 0 0 1px #dadada;
}
body {
}
.content {
}
.module {
}
.module.col-md-6 {
    background-color: tomato;
}
.module.hero {
    background: url('http://placehold.it/1200x100.png') center center;
}
.module.gallery {
    background-color: yellow;
}
.module.hero > .container > .row > div {
    min-height: 100px;
}
.pace .pace-progress {
    background: #29d;
    position: fixed;
    z-index: 2000;
    top: 0;
    left: 0;
    height: 2px;
    -webkit-transition: width 1s;
    -moz-transition: width 1s;
    -o-transition: width 1s;
    transition: width 1s;
}
.pace-inactive {
    display: none;
}

JavaScript

require([ 'jquery', 'pace' ], function (jQuery, pace) {
//    console.clear();
    console.log('ready!', jQuery, pace);

    pace.options = {
        document: true,
        ajax: true,
        //eventLag: false,
        restartOnPushState: true,
        restartOnRequestAfter: true,
        elements: {
            selectors: ['.sdf']
        }
    };

    pace.on('start', function () {
        console.debug('pace started');
    });
    pace.on('restart', function () {
        console.debug('pace restart');
    });

    pace.on('done', function () {
        console.debug('pace done');
    });

    pace.on('hide', function () {
        console.debug('pace hide');
    });

    pace.on('stop', function () {
        console.debug('pace stop');
    });

    pace.on('done', function () {
        console.debug('pace done');
    });

    //    console.dir( pace );

    //pace.start();

    window.setTimeout(function () {
        //history.pushState(null, 'sadf', '/asdfdas');
        //jQuery('#content').load('//umesouthpadre.com/_tests .cfct-module-hero-image');
    }, 4000);

    window.setTimeout(function () {
        //history.pushState(null, 'sadf', '/asdfdas');
        //jQuery('#content').load('//umesouthpadre.com/home .artists-list');
    }, 10000);


    window.setTimeout(function () {
        //history.pushState(null, 'sadf', '/asdfdas');
        //jQuery('#content').load('//umesouthpadre.com .header');
    }, 10000);

});