JSFiddle - React, Tailwind, and code Playground

by bartek

HTML

<script src="http://underscorejs.org/underscore.js"></script>
<script src="http://backbonejs.org/backbone.js"></script>
<script src="http://marionettejs.com/downloads/backbone.marionette.js"></script>
<div id="container">
  <div id="viewport">
    <div id="world">
      
      <div id="world-bg"><div>
      </div></div>
      <div id="world-fixed">
      </div>
      <div id="world-content">
      </div> <!-- / world-content -->
      
    </div> <!-- / world -->
  </div> <!-- / viewport -->
</div> <!-- / container -->

<script id="slideTemplate" type="template">

  <div class="container-fluid">
    <div class="row-fluid">
        <p>Backbone.Marionette is a composite application library for Backbone.js that aims to simplify the construction of large scale JavaScript applications.

It is a collection of common design and implementation patterns found in the applications that we have been building with Backbone, and includes pieces inspired by composite application architectures, event-driven architectures, messaging architectures, and more.</p>
        <button class="next">next view</button>
    </div> <!-- / row-fluid -->
  </div> <!-- / container-fluid -->

</script>

CSS

#container {
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    transform: translate3d(0, 0, 0);
    /* prevent flicker */
}
/* this is the element the user is looking through */
 #viewport {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow:hidden;
}
/* the world contains everything
 * - the background that will move with the content
 * - an optional fixed background
 * - all content, including off-screen elements
 */
 #world {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* this is where everything will be rendered into */
 #world-content, #world-bg {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    transform-origin: 0 0;
    /* attempting to remove animation flicker */
    perspective: 1000;
    backface-visibility: hidden;
    transform: translateZ(0);
    transform-style: preserve-3d;
}
/* setup moving containers, preparing for animation */
 #world-content.animated, #world-bg.animated {
    transition: transform 0.8s ease-in-out;
    animation-duration: 0.8s;
    // so we can read the value is javascript.
}
/* we think of each content element within the world
 * as a slide. It renders the full size of the container.
 * Initially it will be placed off-scren, and the parent
 * will be transitioned to bring the slide into view.
 */
 #world-content > div {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    transform-origin: 0 0;
    /* attempting to remove animation flicker */
    perspective: 1000;
    backface-visibility: hidden;
    transform: translateZ(0);
    transform-style: preserve-3d;
}
/* 
 * Demo Styles 
 *
 * Nothing below here is strictly necessary for 
 * the panning region to work. It just makes things 
 * look a bit prettier :)
 */
 html, body {
    background: #eaeaea;
}
#container {
    background: #eee;
}
p {
   ...

JavaScript

var PanningRegion = Marionette.Region.extend({
    transitionToView: function (newView, type) {
        var self = this;

        // Do we have a view currently?
        var view = this.currentView;
        if (!view || view.isClosed) {
            console.log("first call");
            this.show(newView);
            return;
        }

        Marionette.triggerMethod.call(this, "willTransition", view);

        this.stopListening(newView, 'render');

        // Wait for the new view to render, then initialize next view
        // show the new view while hiding the old.
        this.listenTo(newView, 'render', function () {
            console.log("do next actions");
        });

        newView.render();
    }
});
var App = new Marionette.Application();

App.addRegions({
    worldContent: {
        selector: "#world-content",
        regionClass: PanningRegion
    }
});

App.module("SampleModule", function (Mod, App, Backbone, Marionette, $, _) {

    var SlideModel = Backbone.Model.extend();
    var SlideView = Marionette.ItemView.extend({
        template: '#slideTemplate',
        events: {
            'click button.next': 'next',
        },
        next: function () {
            this.trigger('next', 'next');
        }
    });

    var Controller = Marionette.Controller.extend({

        initialize: function (options) {
            this.region = options.region;
        },

        show: function (type) {
            var model = new SlideModel({
                title: 'Panning Region',
                subtitle: 'Powered by MarionetteJS',
            });

            var view = new SlideView({
                model: model
            });

            this.region.transitionToView(view, type);

            this.listenTo(view, 'next', function (type) {
                this.show(type);
            });
        }

    });

    Mod.addInitializer(function () {
        Mod.controller = new Controller({
            region: App.worldContent
        });
       ...