brite
Version:
DOM Centric Minimalistic MVC Framework
81 lines (60 loc) • 2.64 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>briteUITest - brite transition (experimental API)</title>
<!-- ****** Generic Test Includes ****** -->
<link rel="stylesheet" href="css/test.css"/>
<link rel="stylesheet" href="../others/bootstrap/css/bootstrap.css" />
<!-- only brite.js dependency -->
<script type="text/javascript" src="../js-dependencies/jquery.js" ></script>
<!-- include the brite.min.js in prod -->
<script type="text/javascript" src="../dist/brite.js" ></script>
<!-- some test utilities -->
<script type="text/javascript" src="../others/handlebars.min.js" ></script>
<script type="text/javascript" src="js/main.js" ></script>
<!-- ****** /Generic Test Includes ****** -->
<script type="text/javascript" src="js/HelloView.js"></script>
</head>
<body>
<h2>NOT WORKING NOW >> brite Transition (Experimental API for now)</h2>
<!-- Here we override the config with the transition:'wipe' -->
<button onclick="brite.display('HelloView',{name:'Mike'},{transition:'wipe'})">Display Hello World</button>
<div id="HelloWorld-Container" style="margin: 30px;border: solid 1px #dddddd;height: 30px;overflow:hidden;position:relative;">
</div>
<!-- Transition -->
<!-- This is a reusable transition for any components that use the transition "wipe" -->
<script type="text/javascript">
brite.registerTransition("wipe",function(component,data,config){
//This is new component
var $new = component.$element;
// get the parent from the config
var $parent = $(config.parent);
var $old = $parent.children();
//if we have already some elements, then, do the animation
if ($old.length > 0) {
$old.animate({
left: "300px",
opacity: "0"
}, 500, function(){
// make sure to call sRemove so that the component lifecyle get removed
$old.bRemove();
});
}
$new.css({
left: "-200px"
});
$parent.append($new);
$new.animate({
left: "0px"
});
});
</script>
<!-- /Transition -->
<!-- ********* Handlebars Inline Template ********* -->
<script id="tmpl-HelloView" type="text/html">
<div style='position:absolute'>Hello... {{name}} ({{count}})</div>
</script>
<!-- ********* /Handlebars Inline Template ********* -->
</body>
</html>