dna-router-behaviors.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-ajax/iron-request.html">
<link rel="import" href="./dna-utility-behavior.html">

<script type="text/javascript">
	var DNA = {
		ready: false,
	}

	$state = null;

	var utility;

!function (){
	window.addEventListener('WebComponentsReady', function() {
		DNA.ready =true;
		if(DNA.run){
			DNA.run()
		}

		srefs.forEach(function(sref){
			sref._setHREF();
		})

		utility._resolveUrl();
		window.onhashchange = function(e){
			// console.log(e)
			utility._resolveUrl();
		}

	})

	var states = [];
	var views = [];
	var manyViews = [];
	var current = null;

	var currentStateData = {
		views: [],
		manyViews: []
	}





	utility = {
		_Exception: function(msg, data){
			if(!data)
				data = {};
			return {
				name: 'dna-router',
				message: msg,
				data: data,
			}
		},
		_resolveUrl: function(){
			// Extract hash from browser link
			// Redirect to home if invalid url
			// Get state using '_resolveRoute'
			// Go to that state
			// console.log wrong url for no state
			var url = location.hash;
			if(url != ''){
				var route = url.substring(1);
				if(route[route.length-1]=='/')
					route = route.substring(0,route.length-1);
				if(route=='')
					route='/'

				var res = utility._resolveRoute(route);
				if(res.found){
					utility.go(res.found, res.param, true)
				}else{
					console.log('Route not found');
					if(config.wrongUrl)
						utility.go(config.wrongUrl)
				}
			}
			else{
				utility.go(config.home)
			}
		},
		_resolveRoute: function(route){
			// Takes post hash url as input
			// Resolve current state name and parameters
			// return state and parameters
			var found = false;
			var param = {};
			for(var i=0; i< states.length; i++){
				var state = states[i];
				var patt = new RegExp(state.regRoute,'i');
				var res = patt.exec(route);
				if(res){
					found = state.state;
					if(state.params){
						for(var i=0; i<state.params.length;i++){
							param[state.params[i]] = res[1+i]
						}
					}
					break;
				}
			}
			return {found: found, param: param};
		},
		getState: function(state){
			for(i=0; i<states.length; i++)
				if(states[i].state == state)
					return states[i];
			return false;
		},
		_paramOk: function(state, param){
			// Check for parameter inconsistency
			if(param==undefined)
				param = {};
			var ok = true;
			if(state.params){
				for(var i=0; i<state.params.length; i++)
					if(!(state.params[i] in param)){
						ok = false;
						break;
					}
			}
			return ok;
		},
		go: function(next, params, resolve){
			if(!next){
				throw new utility._Exception('Insufficient parameters. State name missing')
			}

			var nextState = utility.getState(next);
			if(!nextState)
				throw new utility._Exception("State '"+next+"' not found.")

			// Check for Param
			if(!utility._paramOk(nextState, params))
				throw new utility._Exception('Wrong params', {state: next, expectedParams: nextState.params, recievedParams: params})


			if(current && !utility._canLeave())
				return false;

			// Leave current
			utility._leaveState();

			var state = nextState;

			utility._prepareStateData(next);
			var previous = current;
			current = next;

			// Load next

			state.hash = state.route;
			for(attr in params){
				state.hash = state.hash.replace(':'+attr, params[attr])
			}
			// Send Param data
			var data={};
			data.route = state.route;
			data.hash = state.hash;
			data.previous = previous;
			data.params = params;
			data.current = current;
			data.state = current;
			data.context = config.context;
			utility._loadState(data)
			if(resolve != true){
				window.history.pushState(null, null, '#'+state.hash)
			}
			return true;
		},
		_prepareStateData: function(state){
			currentStateData = {
				views: [],
				manyViews: []
			}
			manyViews.forEach(function(many){
				if(many.state){
		    		var res = many.state.split(' ');
		    		for(var i=0; i<res.length; i++){
		    			if(res[i]==state){
		    				currentStateData.manyViews.push(many);
		    				break;
		    			}
		    		}
		    	}
			})
			views.forEach(function(view){
    			if(view.state==state){
					currentStateData.views.push(view)
    			}
			})
		},
		_loadState: function(data){
            $state = data;
            $state.go = utility.go;
			currentStateData.manyViews.forEach(function(many){
				many.fire('page-load-begin', data)
			})
			currentStateData.views.forEach(function(view){
				view.fire('page-load-begin', data)
			})
		},
		_canLeave: function(){
			for(i=0; i<currentStateData.views.length; i++){
				var child = currentStateData.views[i].children[0];
				if(child && child.onleave && !child.onleave())
					return false;
			}
			return true;
		},
		_leaveState: function(){
			currentStateData.views.forEach(function(view){
				view.fire('page-leave')
			})
			currentStateData.manyViews.forEach(function(many){
				many.fire('page-leave')
			})
		},
	};

	DnaViewBehavior = {
		hostAttributes: {
			'with-auth': false,
			'with-no-auth': false,
			active: false,
		},
		properties: {
			state: {
				type: String,
			},
			template: {
				type: String,
				value: '',
			},
			element: {
				type: String,
			},
			elseElement: {
				type: String,
			},
			elseState: {
				type: String,
			},
		},
		listeners: {
			'page-load-begin': '_pageLoadBegin',
			'page-leave': '_pageLeave',
			// 'page-active': '_pageActive'
		},
	    attached: function() {
	    	views.push(this);
	    },
		_pageLoadBegin: function(e){
	        var self = this;
	        var element = false;
	        var template = config.template + this.template;

	        var withAuth = this.getAttribute('with-auth');
	        var withNoAuth = this.getAttribute('with-no-auth');

        	var goElse = false;
        	if((withAuth!=null && !config.auth) || (withNoAuth!=null && config.auth)){
        		goElse = true;
        	}

        	if(goElse){
        		if(this.elseElement)
        			element = this.elseElement;
        		else if(this.elseState)
        			utility.go(this.elseState)
        		else if(config.elseState)
        			utility.go(this.elseState)
        		else
        			console.log('Error')
        	}
        	else{
	        	element = this.element;
        	}


        	if(element){
        		var ell = element.replace(/-(.)/g, function($1) { return $1.toUpperCase(); }).replace(/-/g, '');

	        	var file = '/'+ell+'.html';
	        	template +=file;

	        	if(config.manualLoad){
			        self._loadElement(element)

	        	} else{
			        Polymer.Base.importHref(template ,function(){
			        	self._loadElement(element)
			        });
			    }
		    }
		},
		_loadElement: function(element){
        	this.innerHTML='';
            var el = document.createElement(element);
            this.appendChild(el);
            this.setAttribute('active', true);
            this.fire('page-active')
            if(conf)
            	conf.fire('state-changed')
		},
		_pageLeave: function(){
	        this.removeAttribute('active')
	        this.innerHTML = ''
		},
		on: function(event, func){
			this.addEventListener(event, func)
		}
	};


	DnaManyViewBehavior = {
		hostAttributes: {
			active: false,
		},
		properties: {
			state: {
				type: String,
			}
		},
		listeners: {
			'page-load-begin': '_pageLoadBegin',
			'page-leave': '_pageLeave',
			// 'page-active': '_pageActive'
		},
	    attached: function() {
	    	manyViews.push(this);
	    },
		_pageLoadBegin: function(e){
			if(e.detail.state == current){
	        	this.setAttribute('active', true);
	        	this.fire('page-active')
			}
		},
		_pageLeave: function(e){
			// if(e.detail.state != current)
	        	this.removeAttribute('active');
		},
		on: function(event, func){
			this.addEventListener(event, func)
		}
	}





	StateManager= {
		formatRoute: function(route){
			if(route!='/'|| route.length>1){
				if(route[0]!='/')
					route = '/'+route;
				if(route[route.length-1] == '/')
					route = route.substring(0, route.length-1);
			}
			return route;
		},
		getParams: function(route){
			var patt = /\/:[0-9a-z]+/ig;
			var res = route.match(patt);
			if(res){
				for(var i=0; i<res.length; i++)
					res[i] = res[i].substring(2);
			}
			return res;
		},
		getRegX: function(route, param){
			var patt = "([0-9a-z-]+)";
			if(param){
				param.forEach(function(p){
					route = route.replace(':'+p, patt);
				})
			}
			route = route.replace(/\//g,'\\/');
			route = '^'+route+'$';
			return route;
		},
	}

	DnaStateRegisterBehavior = {
		properties: {
			state: {
				type: String,
			},
			route: {
				type: String,
			},
			params: {
				type: Object,
			},
			regRoute: {
				type: String,
			},
		},
		attached: function(){
			if(this.state && this.route){
				this.route = StateManager.formatRoute(this.route);
				this.params = StateManager.getParams(this.route);
				this.regRoute = StateManager.getRegX(this.route, this.params);

				states.push(this);
			}
			else{
				console.log('WARNING in DNA-state-provider: some state cannot be registered.')
			}
		},
	};



	var config = {
		auth: false,
		home: 'home',
		wrongUrl: null,
		template: '',
		elseState: null,
		manualLoad: false,
		context: {},
	};

	var conf = null;
	DnaConfigBehavior = {
		properties: {
			auth: {
				type: Boolean,
				value: false,
				reflectToAttribute: true,
				observer: '_authStatusChanged',
			},
			template: {
				type: String,
				observer: '_templateUrl',
			},
			home: {
				type: String,
				observer: '_homeChanged'
			},
			elseState: {
				type: String,
				observer: '_elseState'
			},
			manualLoad: {
				type: Boolean,
				value: false,
				reflectToAttribute: true,
			},
			context: {
				type: Object,
				value:{},
				observer: '_contextChanged'
			},
			wrongUrl: {
				type: String,
				observer: '_wrongUrl',
			}
		},
		ready: function(){
			config.manualLoad = this.manualLoad;
		},
		attached: function(){
			conf = this;
		},
		_authStatusChanged: function(){
			config.auth = this.auth;
			if(DNA.ready){
				utility._resolveUrl();
			}
		},
		_templateUrl: function(){
			config.template = this.template;
		},
		_homeChanged: function(){
			config.home = this.home;
		},
		_contextChanged: function(){
			config.context = this.context;
		},
		_elseState: function(){
			config.elseState = this.elseState;
		},
		_wrongUrl: function(){
			config.wrongUrl = this.wrongUrl;
		},
		on: function(event, func){
			this.addEventListener(event, func)
		}
	};



	var srefs = [];
	DnaSrefBehavior = {
		properties: {
			goto: {
				type: Object,
			},
			params: {
				type: Object,
			}
		},
		attached: function(){
			srefs.push(this)
		},
		go: utility.go,
		setHREF: function(params) {
			if(DNA.ready){
				var state = utility.getState(this.goto[0]);
				var hash = state.route;
				if(params !== undefined && typeof params != 'object')
					params = JSON.parse(params);
				for(attr in params){
					hash = hash.replace(':'+attr, params[attr]);
				}
				this.setAttribute('href', '#'+hash);
			}
		},

		ready: function() {
			if(undefined === this.goto) console.error('You must set "goto" property')
			if(undefined !== this.params) this.setHREF(this.params);
			else this.setHREF(this.goto[1]);
		}
	}
}();



Polymer({
	is: 'dna-config',
	behaviors: [DnaConfigBehavior],
});


</script>