Backbone Router (Controller) for iframe content. Includes bookmarking and routing support for navigating iframe content.

enside.js

define(['rit','util/router','navIndicator'], function(RIT,Router) {
  var $ = RIT.$, _ = RIT._, B = RIT.Backbone, Events = RIT.Events, self;

	/**
	 * iEnside (/w enside.html) supports legacy Toyota connect and technology pages.
	 * Example uses include (URLs in browser's location / address bar, not iframe):
	 * http://local.rit.toyota.com/entune/enside.html#!/entune/learning-center/new-index.html
	 * http://local.rit.toyota.com/entune/enside.html#!phones (uses urls property object)
	 * http://local.rit.toyota.com/entune/enside.html (uses default route, "defRoute")
	 * @type {Router}
	 */
	var iEnside = Router.extend({
		routes: {
			'': "setIframe",
			"!*hash": "setIframe"
		},
		urls: {
			phones: "/connect/",
			technology: "technology.html",
			support: "/entune/learning-center/"
		},
		setSubNavItem: function(path){
			var subNavItem = (new RegExp(this.urls.phones)).test(path)? "phones"
					: (new RegExp(this.urls.support)).test(path)? "support" : '',
				subNavSelector = subNavItem? "#sub-nav-"+subNavItem : '';
			if (!this.$subnav) this.$subnav = this.DOM.$subnav.navIndicator(subNavSelector);
			else this.$subnav.setItem(subNavSelector);
		},
		captureClick: function(event){
			var random = Math.round(Math.random()*101),
				urlMatch = (/(\/entune\/learning-center.+)/).exec(this.href),
				excluded = $(this).hasClass("disclaimer") || (/\?faq=/).test(this.href);
			if (urlMatch && urlMatch.length && !excluded) {
				location.href = "/entune/enside.html#!"+ urlMatch[1] +"?*="+ random;
				event.preventDefault();
			}
		},
		heightPoller: function(){
			return setInterval(function(){ try {
					var $if = self.DOM.$iframe,
						oh = parseInt($if.data("height"),10),
						nh = $if.contents().find("body").height();
					if (oh !== nh) $if.height(nh).data("height",nh);
				} catch(e) { console.log("Error adjusting height:",e); }
			},500);
		},
		refocusIframe: function(){
			window.scrollTo(0,0); window.setTimeout(function(){
				if ($("html").hasClass("ie9")) window.scrollTo(0,1);
			},500); // Resets subnav positioning for IE loading.
		},
		initIframe: function(){
			this.DOM.$iframe.on("load",(_.bind(function(event){
				// Update the browser's address / location for bookmarking,
				// if the user clicks on a link within the iframe for support.
				this.DOM.$iframe.contents().on("click",'a',this.captureClick);
				// If an ID has been set, clear the interval on iframe load.
				if (this.heightPollerID) clearInterval(this.heightPollerID);
				// Set the subnav item after the content loads.
				this.setSubNavItem(this.DOM.$iframe[0].src);
				// Poll iframe content height for adjustments.
				this.heightPollerID = this.heightPoller();
				// Go to the top of the page on load.
				this.refocusIframe();
			},this)));
		},
		setIframe: function(route){
			var defPath = "phones";
			if (!route) route = defPath;
			var isPath = (/^\//).test(route),
				path = isPath? route : this.urls[route],
				clMethod = (defPath===route)? "add" : "remove";
			this.DOM.$body[clMethod+"Class"](defPath);
			this.DOM.$iframe[0].src = path;
			this.setSubNavItem(path);
		},
		initialize: function(){
			self = this;
			this.DOM = {
				$iframe: $("#ifLegacyContent"),
				$subnav: $("#subnav"),
				$body: $("body")
			};
			this.initIframe();
			B.history.start();
		}
	});

	return iEnside;
});