navigate-js-router.js

Client Side Router

html

    <div style="float: left;">
        <button data-route="/">Root</button>
        <button data-route="/vista2">Empty</button>
        <button data-route="/contacts">Contacts</button>
        <button data-route="/about">About</button>

        <div id="container" style="margin-top: 15px;"></div>
    </div>
    <div style="float: left;">
        <div data-route-view="Root">
            <img src="1.jpg" alt="" style="width: 300px">
        </div>
        <div data-route-view="Contacts">
            <img src="2.jpg" alt="" style="width: 300px">
        </div>
        <div data-route-view="About">
            <img src="3.jpg" alt="" style="width: 300px">
        </div>
        <div data-route-view="vista2"> 
            <img src="4.jpg" alt="" style="width: 300px">
        </div>
    </div>


    <script src="../navigate-js-router.js"></script>
    <script src="main.js"></script>

main.js

var container = document.getElementById('container');

navigate.setRoutes([
    {
        path: '/',
        view: 'Root',
        before: function(){
            container.innerHTML += 'BEFORE Root >><br>'
        },
        after: function(){
            container.innerHTML += 'AFTER Root >><br>';
        }
    },
    {
        path: '/contacts',
        view: ['Contacts', 'Root'],
        allow: false,
        key: '321-321321',
        before: function(){
            container.innerHTML += 'BEFORE Contacts <br>';
        }
    },
    {
        path: '/about',
        view: 'About',
        before: function(data){
            container.innerHTML += 'BEFORE ABOUT <br>'
            console.log(data)
        }
    }
    
]);

navigate.init('/about?myparam=valueparam&otroparam=otrovalor');

Ejemplos de uso

// establece las rutas
navigate.setRoutes([
    {
        path: '/',
        view: 'Root',
        before: function(){
            container.innerHTML += 'BEFORE Root >><br>'
        },
        after: function(){
            container.innerHTML += 'AFTER Root >><br>';
        }
    },
    {
        path: '/contacts',
        view: ['Contacts', 'Root'], // se pueden pasar varias vistas
        allow: false, // vista no permitida
        key: '321-321321', // proporsionar este "key" en las opciones para acceder a esta vista
        before: function(){
            container.innerHTML += 'BEFORE Contacts <br>';
        }
    },
    {
        path: '/about',
        view: 'About',
        before: function(data){
            container.innerHTML += 'BEFORE ABOUT <br>'
            console.log(data)
        }
    }
    
]);

// agrega una nueva ruta
navigate.addRoute('/newPath', {
    view: "myView",
    show: true
})

// actualiza las opciones de la ruta
navigate.updateRoute('/about', {
    view: "otherView"
})

navigate.delRoute('/about') // elimina la ruta

navigate.getRoutes() // optiene todas las rutas

navigate.getRoutes('/about') // optiene la ruta especificada

navigate.getParams() // obtiene todos los parametros de la url

navigate.getParams('myparam') // obtiene el parametro especificado de la url

navigate.init() // inicia el modulo ( oculta las vistas y agrega los "Listener" )

navigate.init('/about') // inicia el modulo y va a esta ruta por defecto

navigate.goto('/contacts') // ir con las opciones establecidas en "getRoutes"

// ir con opciones personalizadas, pero sin cambiar las opciones en "getRoutes"
navigate.goto('/about', {
    show: false,
    after: function(){
        console.log("Whatever after")
    }
})

navigate.goto('/about', {
    before: function(){
        console.log("Whatever before")
    },
    view: "otherView",
    update: true // ir con las opciones personalizadas y cambiarlas en "getRoutes"
})

navigate.getViews() // optiene todas las vistas ( '[data-route-view]' )

navigate.getActiveRoutes() // optiene todas las rutas activas ( '[data-route]' )

navigate.bindEvent() // agrega los "Listener" a las rutas activas ( '[data-route]' )

navigate.hideViews() // aculta todas las vistas

navigate.addOnLoad() // agrega el modulo al evento "load"

navigate.addOnhashchange() // agrega el modulo al evento "hashchange"