Router or Views

Views is used when you want to load different template/page in current browser's tab. To initialize it you need to prepare the view element on the DOM, it also support lazy element that dynamically being loaded.

You can see the example here and try inspect the elements. The example need few second to compile with parcel, because we need a server too so we can't use jsbin. Click here if you want to see the source of the example.

Defining new view element

The view name is optional, if you doesn't give name it will be your real URL path. Instead if you give it the view name, you will get hashtag with the view path.

// sf.Views(selector, name);

// Path as main URL
var myMain = new sf.Views('.my-selector');

// Path in hashtag
var myView = new sf.Views('.my-selector', 'first');

// Hidden path
var viewOnly = new sf.Views('.my-selector', false);

Specify routes for the view

Before the view can being used, you must specify the available routes.

myView.addRoute([
   // Route: with callback when leaving or visited
   {
      path:'/',
      template:'custom/file.html' // This will use window.templates['custom/file.html']
   },

   // Route: with callback when leaving or visited
   {
      path:'/',
      url:'/',
      cache:true, // Keep current page
      on:{
         coming(){
            console.log('henlo from / route');
         },
         leaving(){
            console.log('leaving from / route');
         },
      },
   },
   
   // Route: with dynamic path
   {
      // Dynamic path depend on the pattern
      path:'/about/:page',

      // Callback before routing
      beforeRoute(data){
         this.url = '/about/static/'+data.page+'.html';
      },

      // Nested route
      routes:[
         {
            path:'/:id', //=> /about/:page/:id
            ...
         }
      ]
   },

   // Route: inside of specified element selector
   {
      // You can obtain username from myView.data
      path:'/:username',
      url:'/home',

      // Selector for the view, inside of .my-selector
      '.user-page-view':[{
         path:'/gallery',
         url:'/user/gallery'
      }]
   }
]);

There are another options too:

property	description
path	Route URL that will be used for view.goto()
url	Route into dynamic URL
template	Use window.templates property if exist
templateURL	Use template from an URL
html	Use template from HTML string
on	Callback for coming and leaving
routes	Nested route for current path
beforeRoute	Callback before starting the router
defaultData	Object that will be passed as default data
cache	Keep the current DOM on the DOM tree

These route will valid for your current tab, and can also being called like

<a href="#first/about/profile">First view route</a>
<a href="/realpath#first/alex">First view with real path route</a>
<a href="@/browser/route">Native browser's route</a>
<a href="//www.google.com/">Change domain</a>

Multiple view path also supported by adding more hashtag and the view name, or adding the real URL. But you can also call the route by calling myView.goto(path).

myView.goto('/user/home', {/* 'GET' Data Field */}, method = 'GET');

// Route to custom element
myView.goto('/user/home', <html-element>);

Views event

Here you can listen if any page was loaded, loading, or load error.

myView.on('start', function(current, target) {
   console.log("Navigating from", current, "to", target);
})
.on('finish', function(current, target) {
   console.log("Navigated from", current, "to", target);
})
.on('loading', function(current, totalDepth) {
   console.log("Loading", current, "from", totalDepth);
})
.on('loaded', function(current, totalDepth) {
   console.log("Loaded", current, "from", totalDepth);
})
.on('error', function(statusCode) {
   console.log("Navigation failed", statusCode);
});

// Handle domain crossing <a href>
myView.onCrossing = console.warn;

// To remove listener
myView.off('error');

After/when these event you can obtain the route data by using:

// path:'/:username'
myView.data; // {username:'myself'}

Set page view cache

This feature will cache the page view on the DOM and let it invisible.
The default limit is set to 3 page view.

myView.maxCache = 10;

Page transition

Because there are many design that can be implemented, this framework doesn't come with CSS styles. If you want to animate the page (like hiding/showing) within the script, you can use routeStart and routeFinish/routeCached above.

/* Default style for all page */
sf-page-view{
   display: block;
   visibility: hidden;
   position: absolute;
   overflow: hidden;
   z-index: -1;
   width: 100%;
   height: 100%;
}

/* When page was displayed from cache/new page */
sf-page-view.page-current{
   visibility: visible;
   z-index: 1;
}

/* When page is being prepared but already inserted into DOM */
sf-page-view.page-prepare{
   display: none;
}

Remove route

// Route somewhere before removing
myView.goto('/', function(){
   // Remove route and the page from DOM
   myView.removeRoute('/path');
});