MarionetteJS Cubed Layout

Developer
Jon Beebe
Size
6,108 Kb
Views
2,024
  1. MarionetteJS Cubed Layout Previews
  2. MarionetteJS Cubed Layout HTML Codes
  3. MarionetteJS Cubed Layout CSS Codes
  4. MarionetteJS Cubed Layout JS Codes

How do I make an marionettejs cubed layout?

A custom component for rendering views onto the sides of a cube, e.g. front/back or left/right (of a cube). This allows for some unique effects, such as a button that causes it's view to rotate to the next side of the cube.. What is a marionettejs cubed layout? How do you make a marionettejs cubed layout? This script and codes were developed by Jon Beebe on 23 January 2023, Monday.

MarionetteJS Cubed Layout Previews
IQ Test

MarionetteJS Cubed Layout - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>MarionetteJS Cubed Layout</title> <link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css'>
<link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ .cube-container { width: 400px; height: 125px; position: relative; top: 30px; left: 50px; perspective: 1200px;
}
.cube-outer { width: 100%; perspective: 0px; position: relative; transform-style: preserve-3d; /* move the outer back by the same amount we offset the inner shapes forward so the front shape is on the same z-plane as the rest of the page */ transform: translateZ(-200px);
}
.cube-inner { position: relative; margin: 0; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 1s;
}
.side { position: absolute; width: 100%; height: 125px; background-color: #777; opacity: 1;
}
.side-left { transform: rotateY(-90deg) translateZ(200px);
}
.side-front { transform: translateZ(200px);
}
.side-right { transform: rotateY(90deg) translateZ(200px);
}
.side-back { transform: rotateY(180deg) translateZ(200px);
}
/* initial position of cube, viewing the front */
.cube-inner { transform: scale(1); transform: rotateX(0deg) rotateY(0deg);
}
/* Define all positions you want to support in the Layout class */
.cube-inner.pos-left { transform: rotateX(0deg) rotateY(90deg);
}
.cube-inner.pos-front { transform: rotateX(0deg) rotateY(0deg);
}
.cube-inner.pos-back { transform: rotateX(0deg) rotateY(180deg);
}
.cube-inner.pos-front-left { transform: rotateX(0deg) rotateY(45deg);
}
.cube-inner.pos-right { transform: rotateX(0deg) rotateY(-90deg);
}
/* custom styles for this pen, not strictly related to the Cube Layout */
.side span { color: white; text-decoration: none; text-align: center; width: 100%; height: 100%; display: block; font-size: 2em; margin: 0; padding: 0; line-height: 125px;
}
.side-left { background-color: #D95B43;
}
.side-front { background-color: #C02942;
}
.side-right { background-color: #542437;
}
.side-back { background-color: #53777A;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="container-fluid"> <div class="page-header"> <h1>Cubed Layout<small> powered by MarionetteJS</small></h1> </div> <p>Each face of the cube below is a region within the <code>CubeLayout</code>, an extension of <code>Marionette.Layout</code>. The content inside each cube face is a discreet <code>Marionette.ItemView</code>. The buttons below link to distinct routes and the <code>Marionette.AppRouter</code> catches these changes, triggering the cube rotation. Thanks to css animations the <code>CubeLayout</code> provides simple transitions between cube faces.</p> <div class="row-fluid"> <div id="controls" class="btn-group"> <a class="btn" href="#/show/front">Front</a> <a class="btn" href="#/show/fl">Front/Left</a> <a class="btn" href="#/show/left">Left</a> <a class="btn" href="#/show/back">Back</a> <a class="btn" href="#/show/right">Right</a> </div> </div> <div class="row-fluid"> <div class="span12"> <article id="main"></article> </div> </div>
</div>
<!-- -- Templates used within this Pen -->
<script type="text/html" id="cubed-layout-template"> <div class="cube-container"> <div class="cube-outer"> <div class="cube-inner"> <div class="side side-left">left</div> <div class="side side-front">front</div> <div class="side side-right">right</div> <div class="side side-back">back</div> </div> </div> </div>
</script>
<script type="text/html" id="cube-side-template"> <span> <%= text %> </span>
</script> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://underscorejs.org/underscore.js'></script>
<script src='https://backbonejs.org/backbone.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/backbone.marionette/1.0.0-rc6-bundled/backbone.marionette.js'></script> <script src="js/index.js"></script>
</body>
</html>

MarionetteJS Cubed Layout - Script Codes CSS Codes

.cube-container { width: 400px; height: 125px; position: relative; top: 30px; left: 50px; perspective: 1200px;
}
.cube-outer { width: 100%; perspective: 0px; position: relative; transform-style: preserve-3d; /* move the outer back by the same amount we offset the inner shapes forward so the front shape is on the same z-plane as the rest of the page */ transform: translateZ(-200px);
}
.cube-inner { position: relative; margin: 0; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 1s;
}
.side { position: absolute; width: 100%; height: 125px; background-color: #777; opacity: 1;
}
.side-left { transform: rotateY(-90deg) translateZ(200px);
}
.side-front { transform: translateZ(200px);
}
.side-right { transform: rotateY(90deg) translateZ(200px);
}
.side-back { transform: rotateY(180deg) translateZ(200px);
}
/* initial position of cube, viewing the front */
.cube-inner { transform: scale(1); transform: rotateX(0deg) rotateY(0deg);
}
/* Define all positions you want to support in the Layout class */
.cube-inner.pos-left { transform: rotateX(0deg) rotateY(90deg);
}
.cube-inner.pos-front { transform: rotateX(0deg) rotateY(0deg);
}
.cube-inner.pos-back { transform: rotateX(0deg) rotateY(180deg);
}
.cube-inner.pos-front-left { transform: rotateX(0deg) rotateY(45deg);
}
.cube-inner.pos-right { transform: rotateX(0deg) rotateY(-90deg);
}
/* custom styles for this pen, not strictly related to the Cube Layout */
.side span { color: white; text-decoration: none; text-align: center; width: 100%; height: 100%; display: block; font-size: 2em; margin: 0; padding: 0; line-height: 125px;
}
.side-left { background-color: #D95B43;
}
.side-front { background-color: #C02942;
}
.side-right { background-color: #542437;
}
.side-back { background-color: #53777A;
}

MarionetteJS Cubed Layout - Script Codes JS Codes

// borrowed from http://www.websanova.com/tutorials/jquery/jquery-remove-class-by-regular-expression
$.fn.removeClassRegEx = function(regex) { var classes = $(this).attr('class'); if(!classes || !regex) return false; var classArray = []; classes = classes.split(' '); for(var i=0, len=classes.length; i<len; i++) { if(!classes[i].match(regex)) classArray.push(classes[i]); } $(this).attr('class', classArray.join(' '));
};
// Define the app and a region to show content
// -------------------------------------------
var App = new Marionette.Application();
App.addRegions({ "mainRegion": "#main"
});
// Create a router for handling button actions
// -------------------------------------------
// A router is not necessary here, but I included it to
// demonstrate how changing a route can cause the cube
// to rotate sides.
AppRouter = Marionette.AppRouter.extend({ routes : { 'show/left' : 'showLeft', 'show/fl' : 'showFrontLeft', 'show/right' : 'showRight', 'show/front' : 'showFront', 'show/back' : 'showBack' }, showLeft : function() { App.module('SampleModule').controller.layout.showLeft(); }, showFrontLeft : function() { App.module('SampleModule').controller.layout.showFrontLeft(); }, showRight : function() { App.module('SampleModule').controller.layout.showRight(); }, showFront : function() { App.module('SampleModule').controller.layout.showFront(); }, showBack : function() { App.module('SampleModule').controller.layout.showBack(); }
});
App.addInitializer(function(options) { this.router = new AppRouter(); this.router.bind('route', function(route, name, args) { $('#controls a').removeClass('disabled'); $('#controls a[href="#/' + Backbone.history.fragment + '"]').addClass('disabled'); }); Backbone.history.start();
});
// Define the Guest of Honor for this Pen - the CubedLayout
// --------------------------------------------------------
var CubedLayout = Marionette.Layout.extend({ template: '#cubed-layout-template', regions: { left: '.side-left', right: '.side-right', front: '.side-front', back: '.side-back' }, onRender: function() { this.$inner = this.$el.find('.cube-inner'); }, clearAnimationClasses: function() { this.$inner.removeClassRegEx(/^pos-/); }, showFrontLeft: function() { this.animateTo('pos-front-left'); }, showLeft: function() { this.animateTo('pos-left'); }, showRight: function() { this.animateTo('pos-right'); }, showFront: function() { this.animateTo('pos-front'); }, showBack: function() { this.animateTo('pos-back'); }, animateTo: function(klass) { this.clearAnimationClasses(); this.$inner.addClass(klass); }
});
// Create a module to contain our functionality
// --------------------------------------------
App.module("SampleModule", function(Mod, App, Backbone, Marionette, $, _){ // Define a controller to run this module // -------------------------------------- var Controller = Marionette.Controller.extend({ initialize: function(options){ this.region = options.region }, show: function(){ // Create our generic content views for the left/right sides var ViewSide = Marionette.ItemView.extend({ template: '#cube-side-template' }); // Create our custom layout for displaying a cube-like // structure with each view being rendered as a side. var layout = new CubedLayout(); this.layout = layout; this.region.show(layout); // Here we create the inidivual views we attach to each // region of the cube. This sample overly simplistic. // Normally you would have more advanced models, and // probably different view classes for each region. layout.left.show(new ViewSide({ model: (new Backbone.Model({ text: "on the left" })) })); layout.right.show(new ViewSide({ model: (new Backbone.Model({ text: "on the right" })) })); layout.front.show(new ViewSide({ model: (new Backbone.Model({ text: "on the front" })) })); layout.back.show(new ViewSide({ model: (new Backbone.Model({ text: "on the back" })) })); } // </ show > }); // Initialize this module when the app starts // ------------------------------------------ Mod.addInitializer(function(){ Mod.controller = new Controller({ region: App.mainRegion }); Mod.controller.show(); });
});
// Start the app
// -------------
App.start();
// Wait a brief moment so it triggers the css transactions
// If we don't delay, at least in my minimal testing, Chrome
// does not animate the content but instead snaps-to-position.
_.delay(function() { App.router.navigate("/show/fl", {trigger: true});
}, 1);
MarionetteJS Cubed Layout - Script Codes
MarionetteJS Cubed Layout - Script Codes
Home Page Home
Developer Jon Beebe
Username somethingkindawierd
Uploaded January 23, 2023
Rating 3
Size 6,108 Kb
Views 2,024
Do you need developer help for MarionetteJS Cubed Layout?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jon Beebe (somethingkindawierd) Script Codes
Name
Emberjs Boilerplate
Backbone Resizeable View
Turning off Marionette wrapper div
Emberjs Nested Components
Encircled Text
Pixelate image into html table
MarionetteJS Stack View Controller
Calendar Widget
Emberjs Simple Calendar Component
Emberjs Component Playground
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!