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,
	}
	String.prototype.toCamelCase = function() {
	    return this.replace(/^([A-Z])|[\s-_](\w)/g, function(match, p1, p2, offset) {
	        if (p2) return p2.toUpperCase();
	        return p1.toLowerCase();        
	    });
	};

	$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('wrong url')
			}
			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;
			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: {
			'on-auth': false,
			'on-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',
		},
	    attached: function() {
	    	views.push(this);
	    },
		_pageLoadBegin: function(e){
	        var self = this;
	        var element = false;
	        var template = config.template + this.template;

	        var onAuth = this.getAttribute('on-auth');
	        var onNoAuth = this.getAttribute('on-no-auth');

        	var goElse = false;
        	if((onAuth!=null && !config.auth) || (onNoAuth!=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 file = '/'+element.toCamelCase()+'.html';
	        	template +=file;

		        Polymer.Base.importHref(template ,function(){
		        	self.innerHTML='';
		            var el = document.createElement(element);
		            self.appendChild(el);
		            self.setAttribute('active', true)
		        });
		    }
		},
		_pageLeave: function(){
			if(this.element){
				var element = this.element;
				var template = config.template + this.template;
	        	var file = '/'+element.toCamelCase()+'.html';
	        	template +=file;
	        	var rLink = document.head.querySelector('link[href="' + template + '"]');
	        	rLink.parentElement.removeChild(rLink);
			}
      this.removeAttribute('active')
      this.innerHTML = ''
		},
	};


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







	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',
		template: '',
		elseState: 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'
			}
		},
		_authStatusChanged: function(){
			config.auth = this.auth;
			if(DNA.ready){
				utility._resolveUrl();
			}
		},
		_templateUrl: function(){
			config.template = this.template;
		},
		_homeChanged: function(){
			config.home = this.home;
		},
		_elseState: function(){
			config.elseState = this.elseState;
		}
	};



	var srefs = [];
	DnaSrefBehavior = {
		properties: {
			goto: {
				type: Object,
				observer: '_setHREF'
			}
		},
		attached: function(){
			srefs.push(this)
		},
		go: utility.go,
		_setHREF: function(){
			if(DNA.ready){
				var state = utility.getState(this.goto[0])
				var params = this.goto[1]
				var hash = state.route;

				for(attr in params){
					hash = hash.replace(':'+attr, params[attr])
				}
				this.setAttribute('href', '#'+hash);
			}
		},
	}


}();



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


</script>