Skip to content

Instantly share code, notes, and snippets.

@Anmo

Anmo/index.php

Created November 19, 2013 14:14
Show Gist options
  • Save Anmo/7545989 to your computer and use it in GitHub Desktop.
Save Anmo/7545989 to your computer and use it in GitHub Desktop.
Download ZIP
Ink.Util.Router example (pushState mode)
Raw
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>test pushState</title>
<meta name="og:description" content=<?php echo '"este é o pedido: '. urldecode( $_SERVER[ 'REQUEST_URI' ] ) .'"'; ?>/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<!-- Stylesheets -->
<link rel="stylesheet" href="http://rawgithub.com/Anmo/Ink/develop/css/ink.css" />
<!--[if IE 7 ]>
<link rel="stylesheet" href="http://rawgithub.com/Anmo/Ink/develop/css/ink-ie7.css" type="text/css" media="screen" title="no title" charset="utf-8">
<![endif]-->
<style type="text/css">
.subMenu,
.element {
display: none;
}
.M1 .subMenu.M1, .M2 .subMenu.M2, .M3 .subMenu.M3,
.M1SM1 .element.M1SM1, .M1SM2 .element.M1SM2, .M1SM3 .element.M1SM3,
.M2SM1 .element.M2SM1, .M2SM2 .element.M2SM2, .M2SM3 .element.M2SM3,
.M3SM1 .element.M3SM1, .M3SM2 .element.M3SM2, .M3SM3 .element.M3SM3 {
display: block;
}
</style>
<!-- Javascripts -->
<script type="text/javascript">
window.INK_PATH = 'http://rawgithub.com/Anmo/Ink/develop/Inkjs/Ink/';
</script>
<script type="text/javascript" src="http://rawgithub.com/Anmo/Ink/develop/Inkjs/Ink/1/lib.js"></script>
</head>
<body>
<div class="ink-grid">
<nav class="ink-navigation large-100 medium-100 small-100">
<ul class="menu horizontal black shadowed" id="mainMenu">
<li class="M1"><a href="javascript:void(0)">MENU 1</a></li>
<li class="M2"><a href="javascript:void(0)">MENU 2</a></li>
<li class="M3"><a href="javascript:void(0)">MENU 3</a></li>
</ul>
</nav>
<div id="subMenu">
<div class="subMenu M1">
<nav class="ink-navigation large-100 medium-100 small-100">
<ul class="menu horizontal black shadowed">
<li class="M1SM1"><a href="javascript:void(0)">MENU 1.1</a></li>
<li class="M1SM2"><a href="javascript:void(0)">MENU 1.2</a></li>
<li class="M1SM3"><a href="javascript:void(0)">MENU 1.3</a></li>
</ul>
</nav>
<div class="subSubMenu">
<div class="element M1SM1">
<p>M1_1</p>
</div>
<div class="element M1SM2">
<p>M1_2</p>
</div>
<div class="element M1SM3">
<p>M1_3</p>
</div>
</div>
</div>
<div class="subMenu M2">
<nav class="ink-navigation large-100 medium-100 small-100">
<ul class="menu horizontal black shadowed">
<li class="M2SM1"><a href="javascript:void(0)">MENU 2.1</a></li>
<li class="M2SM2"><a href="javascript:void(0)">MENU 2.2</a></li>
<li class="M2SM3"><a href="javascript:void(0)">MENU 2.3</a></li>
</ul>
</nav>
<div class="subSubMenu">
<div class="element M2SM1">
<p>M2_1</p>
</div>
<div class="element M2SM2">
<p>M2_2</p>
</div>
<div class="element M2SM3">
<p>M2_3</p>
</div>
</div>
</div>
<div class="subMenu M3">
<nav class="ink-navigation large-100 medium-100 small-100">
<ul class="menu horizontal black shadowed">
<li class="M3SM1"><a href="javascript:void(0)">MENU 3.1</a></li>
<li class="M3SM2"><a href="javascript:void(0)">MENU 3.2</a></li>
<li class="M3SM3"><a href="javascript:void(0)">MENU 3.3</a></li>
</ul>
</nav>
<div class="subSubMenu">
<div class="element M3SM1">
<p>M3_1</p>
</div>
<div class="element M3SM2">
<p>M3_2</p>
</div>
<div class="element M3SM3">
<p>M3_3</p>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
Ink.requireModules( [ 'Ink.Dom.Css_1' , 'Ink.Dom.Event_1' , 'Ink.Dom.Element_1' , 'Ink.Dom.Selector_1' , 'Ink.Util.Router_1' ] , function( Css , Event , Element , Selector , Router ) {
//Dom Elements
var mainMenu = document.getElementById( 'mainMenu' );
var mainLI = Selector.select( 'li' , mainMenu );
var subMenu = document.getElementById( 'subMenu' );
var liMenu = Selector.select( '.subMenu li' , subMenu );
var subSubMenu = Selector.select( '.subSubMenu' , subMenu );
//helpers
var main2idx = { 'M1' : 0 , 'M2' : 1 , 'M3' : 2 };
var sub2idx = { 'SM1' : 0 , 'SM2' : 1 , 'SM3' : 2 };
//micro functions
var inMain = function( main ) {
var mIdx = main2idx[ main ];
Css.addClassName( mainLI[ mIdx ] , 'active' );
Css.addClassName( subMenu , main );
};
var outMain = function( main ) {
var mIdx = main2idx[ main ];
Css.removeClassName( mainLI[ mIdx ] , 'active' );
Css.removeClassName( subMenu , main );
};
var inSub = function( sub , main ) {
var mIdx = main2idx[ main[ 0 ] ];
var sIdx = sub2idx[ sub.slice( 2 , Infinity ) ];
Css.addClassName( liMenu[ mIdx * 3 + sIdx ] , 'active' );
Css.addClassName( subSubMenu[ mIdx ] , sub );
};
var outSub = function( sub , main ) {
var mIdx = main2idx[ main[ 0 ] ];
var sIdx = sub2idx[ sub.slice( 2 , Infinity ) ];
Css.removeClassName( liMenu[ mIdx * 3 + sIdx ] , 'active' );
Css.removeClassName( subSubMenu[ mIdx ] , sub );
};
//initialize Router
var router = new Router({
baseURL : '/testRouter/2/' ,
mode : 'path' ,
onFail : function( ) { this.setPath( 'M1/M1SM1' , true ); } ,
params : {
main : 'M[1-3]' ,
sub : 'M[1-3]SM[1-3]'
} ,
paths : [{
path : ':main' ,
enter : inMain ,
exit : outMain ,
paths : [{
path : ':sub' ,
enter : inSub ,
exit : outSub
}]
}]
});
//add listeners
Event.observe( mainMenu , 'click' , function( e ) {
var elem = Element.findUpwardsByTag( Event.element( e ) , 'li' );
if ( elem && !Css.hasClassName( elem , 'active' ) ) {
router.setPath( elem.className + '/' + elem.className + 'SM1' );
}
});
Event.observe( subMenu , 'click' , function( e ) {
var elem = Element.findUpwardsByTag( Event.element( e ) , 'li' );
if ( elem && !Css.hasClassName( elem , 'active' ) ) {
router.setPath( router.getPath( ).replace( /[^\/]+$/ , elem.className ) );
}
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment