ciffi-js-router

JS Router for ciffi-js based project


Keywords
ciffi, ciffi-js, javascript, router, spa, framework, front-end, development, dev, build, web, tool, stack, module, frontend, pushstate, single-page-app, twigjs
License
MIT
Install
npm install ciffi-js-router@0.2.12

Documentation

npm-version npm-month npm-total Join the chat at https://gitter.im/ciffi-js/Lobby

ciffi-js-router

JS Router for Ciffi-js based projects

  • import in main.js
  • enable/disable pushState with twig template
require('ciffi-js-router').pushState(false);
  • define env config in src/scripts/config/config.js
var Config = {
    projectName: 'my-site',
    env: {
        dev: {
            baseUrl: 'http://localhost',
            apiUrl: 'http://my-site.local/',
            shareUrl: 'http://localhost',
            assetsUrl: '/dev/'
        },
        local: {
            baseUrl: 'http://my-site.local',
            apiUrl: 'http://my-site.local/',
            shareUrl: 'http://my-site.local/',
            assetsUrl: 'http://my-site.local/src/'
        },
        stage: {
            baseUrl: 'http://my-site.stage.it',
            apiUrl: 'http://my-site.stage.it/',
            shareUrl: 'http://my-site.stage.it/',
            assetsUrl: 'http://my-site.stage.it/src/'
        },
        prod: {
            baseUrl: 'http://www.my-site.it',
            apiUrl: 'http://www.my-site.it',
            shareUrl: 'http://www.my-site.it',
            assetsUrl: 'http://www.my-site.it/src/'
        }
    }
    };

module.exports = Config;
  • define pages modules in src/scripts/config/pages.js
var Pages = {
    '.js-router--home': 'index',
    '.js-router--example': 'example',
    '.js-router--test-one': 'test/one'
};

module.exports = Pages;
  • create pages modules in src/scripts/pages/
  • config is current env config defined in src/scripts/config/config.js
  • define this.content if pushState is active and you want load a relative twig view
  • this.onLoad will be called on each document.onLoad or urlChange and twig template render events
var Page = (function () {
	
    function Page(config) {
        
        this.config = config;
        
        this.content = {
            prova: [1, 2, 3, 4, 5, 6, 7, 8, 9]
        };
        
        this.onLoad = onLoad;
        
        return this;
        
    }
    
    function onLoad() {
        console.log('index page loaded');
    }
    
    return Page;
	
});

module.exports = Page;

full documentation available at ciffi.it/ciffi-js