Subversion Repositories Applications.papyrus

if(!dojo._hasResource["dojox.off.ui"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.

dojo._hasResource["dojox.off.ui"] = true;

dojo.provide("dojox.off.ui");

dojo.require("dojox.storage.Provider");

dojo.require("dojox.storage.manager");

dojo.require("dojox.storage.GearsStorageProvider");

// Author: Brad Neuberg, bkn3@columbia.edu, http://codinginparadise.org

// summary:

//	dojox.off.ui provides a standard,

//	default user-interface for a

//	Dojo Offline Widget that can easily

//	be dropped into applications that would

//	like to work offline.

dojo.mixin(dojox.off.ui, {

	// appName: String

	//	This application's name, such as "Foobar". Note that

	//	this is a string, not HTML, so embedded markup will

	//	not work, including entities. Only the following

	//	characters are allowed: numbers, letters, and spaces.

	//	You must set this property.

	appName: "setme",

	// autoEmbed: boolean

	//	For advanced usage; most developers can ignore this.

	//	Whether to automatically auto-embed the default Dojo Offline

	//	widget into this page; default is true.

	autoEmbed: true,

	// autoEmbedID: String

	//	For advanced usage; most developers can ignore this.

	//	The ID of the DOM element that will contain our

	//	Dojo Offline widget; defaults to the ID 'dot-widget'.

	autoEmbedID: "dot-widget",

	// runLink: String

	//	For advanced usage; most developers can ignore this.

	//	The URL that should be navigated to to run this

	//	application offline; this will be placed inside of a

	//	link that the user can drag to their desktop and double

	//	click. Note that this URL must exactly match the URL

	//	of the main page of our resource that is offline for

	//	it to be retrieved from the offline cache correctly.

	//	For example, if you have cached your main page as

	//	http://foobar.com/index.html, and you set this to

	//	http://www.foobar.com/index.html, the run link will

	//	not work. By default this value is automatically set to

	//	the URL of this page, so it does not need to be set

	//	manually unless you have unusual needs.

	runLink: window.location.href,

	// runLinkTitle: String

	//	For advanced usage; most developers can ignore this.

	//	The text that will be inside of the link that a user

	//	can drag to their desktop to run this application offline.

	//	By default this is automatically set to "Run " plus your

	//	application's name.

	runLinkTitle: "Run Application",

	// learnHowPath: String

	//	For advanced usage; most developers can ignore this.

	//	The path to a web page that has information on

	//	how to use this web app offline; defaults to

	//	src/off/ui-template/learnhow.html, relative to

	//	your Dojo installation. Make sure to set

	//	dojo.to.ui.customLearnHowPath to true if you want

	//	a custom Learn How page.

	learnHowPath: dojo.moduleUrl("dojox", "off/resources/learnhow.html"),

	// customLearnHowPath: boolean

	//	For advanced usage; most developers can ignore this.

	//	Whether the developer is using their own custom page

	//	for the Learn How instructional page; defaults to false.

	//	Use in conjunction with dojox.off.ui.learnHowPath.

	customLearnHowPath: false,

	htmlTemplatePath: dojo.moduleUrl("dojox", "off/resources/offline-widget.html").uri,

	cssTemplatePath: dojo.moduleUrl("dojox", "off/resources/offline-widget.css").uri,

	onlineImagePath: dojo.moduleUrl("dojox", "off/resources/greenball.png").uri,

	offlineImagePath: dojo.moduleUrl("dojox", "off/resources/redball.png").uri,

	rollerImagePath: dojo.moduleUrl("dojox", "off/resources/roller.gif").uri,

	checkmarkImagePath: dojo.moduleUrl("dojox", "off/resources/checkmark.png").uri,

	learnHowJSPath: dojo.moduleUrl("dojox", "off/resources/learnhow.js").uri,

	_initialized: false,

	onLoad: function(){

		// summary:

		//	A function that should be connected to allow your

		//	application to know when Dojo Offline, the page, and

		//	the Offline Widget are all initialized and ready to be

		//	used:

		//

		//		dojo.connect(dojox.off.ui, "onLoad", someFunc)

	},

	_initialize: function(){

		//console.debug("dojox.off.ui._initialize");

		// make sure our app name is correct

		if(this._validateAppName(this.appName) == false){

			alert("You must set dojox.off.ui.appName; it can only contain "

					+ "letters, numbers, and spaces; right now it "

					+ "is incorrectly set to '" + dojox.off.ui.appName + "'");

			dojox.off.enabled = false;

			return;

		}

		// set our run link text to its default

		this.runLinkText = "Run " + this.appName;

		// setup our event listeners for Dojo Offline events

		// to update our UI

		dojo.connect(dojox.off, "onNetwork", this, "_onNetwork");

		dojo.connect(dojox.off.sync, "onSync", this, "_onSync");

		// cache our default UI resources

		dojox.off.files.cache([

							this.htmlTemplatePath,

							this.cssTemplatePath,

							this.onlineImagePath,

							this.offlineImagePath,

							this.rollerImagePath,

							this.checkmarkImagePath

							]);

		// embed the offline widget UI

		if(this.autoEmbed){

			this._doAutoEmbed();

		}

	},

	_doAutoEmbed: function(){

		// fetch our HTML for the offline widget

		// dispatch the request

		dojo.xhrGet({

			url:	 this.htmlTemplatePath,

			handleAs:	"text",

			error:		function(err){

				dojox.off.enabled = false;

				err = err.message||err;

				alert("Error loading the Dojo Offline Widget from "

						+ this.htmlTemplatePath + ": " + err);

			},

			load:		dojo.hitch(this, this._templateLoaded)

		});

	},

	_templateLoaded: function(data){

		//console.debug("dojox.off.ui._templateLoaded");

		// inline our HTML

		var container = dojo.byId(this.autoEmbedID);

		if(container){ container.innerHTML = data; }

		// fill out our image paths

		this._initImages();

		// update our network indicator status ball

		this._updateNetIndicator();

		// update our 'Learn How' text

		this._initLearnHow();

		this._initialized = true;

		// check offline cache settings

		if(!dojox.off.hasOfflineCache){

			this._showNeedsOfflineCache();

			return;

		}

		// check to see if we need a browser restart

		// to be able to use this web app offline

		if(dojox.off.hasOfflineCache && dojox.off.browserRestart){

			this._needsBrowserRestart();

			return;

		}else{

			var browserRestart = dojo.byId("dot-widget-browser-restart");

			if(browserRestart){ browserRestart.style.display = "none"; }

		}

		// update our sync UI

		this._updateSyncUI();

		// register our event listeners for our main buttons

		this._initMainEvtHandlers();

		// if offline functionality is disabled, disable everything

		this._setOfflineEnabled(dojox.off.enabled);

		// update our UI based on the state of the network

		this._onNetwork(dojox.off.isOnline ? "online" : "offline");

		// try to go online

		this._testNet();

	},

	_testNet: function(){

		dojox.off.goOnline(dojo.hitch(this, function(isOnline){

			//console.debug("testNet callback, isOnline="+isOnline);

			// display our online/offline results

			this._onNetwork(isOnline ? "online" : "offline");

			// indicate that our default UI

			// and Dojo Offline are now ready to

			// be used

			this.onLoad();

		}));

	},

	_updateNetIndicator: function(){

		var onlineImg = dojo.byId("dot-widget-network-indicator-online");

		var offlineImg = dojo.byId("dot-widget-network-indicator-offline");

		var titleText = dojo.byId("dot-widget-title-text");

		if(onlineImg && offlineImg){

			if(dojox.off.isOnline == true){

				onlineImg.style.display = "inline";

				offlineImg.style.display = "none";

			}else{

				onlineImg.style.display = "none";

				offlineImg.style.display = "inline";

			}

		}

		if(titleText){

			if(dojox.off.isOnline){

				titleText.innerHTML = "Online";

			}else{

				titleText.innerHTML = "Offline";

			}

		}

	},

	_initLearnHow: function(){

		var learnHow = dojo.byId("dot-widget-learn-how-link");

		if(!learnHow){ return; }

		if(!this.customLearnHowPath){

			// add parameters to URL so the Learn How page

			// can customize itself and display itself

			// correctly based on framework settings

			var dojoPath = djConfig.baseRelativePath;

			this.learnHowPath += "?appName=" + encodeURIComponent(this.appName)

									+ "&hasOfflineCache=" + dojox.off.hasOfflineCache

									+ "&runLink=" + encodeURIComponent(this.runLink)

									+ "&runLinkText=" + encodeURIComponent(this.runLinkText)

									+ "&baseRelativePath=" + encodeURIComponent(dojoPath);

			// cache our Learn How JavaScript page and

			// the HTML version with full query parameters

			// so it is available offline without a cache miss

			dojox.off.files.cache(this.learnHowJSPath);

			dojox.off.files.cache(this.learnHowPath);

		}

		learnHow.setAttribute("href", this.learnHowPath);

		var appName = dojo.byId("dot-widget-learn-how-app-name");

		if(!appName){ return; }

		appName.innerHTML = "";

		appName.appendChild(document.createTextNode(this.appName));

	},

	_validateAppName: function(appName){

		if(!appName){ return false; }

		return (/^[a-z0-9 ]*$/i.test(appName));

	},

	_updateSyncUI: function(){

		var roller = dojo.byId("dot-roller");

		var checkmark = dojo.byId("dot-success-checkmark");

		var syncMessages = dojo.byId("dot-sync-messages");

		var details = dojo.byId("dot-sync-details");

		var cancel = dojo.byId("dot-sync-cancel");

		if(dojox.off.sync.isSyncing){

			this._clearSyncMessage();

			if(roller){ roller.style.display = "inline"; }

			if(checkmark){ checkmark.style.display = "none"; }

			if(syncMessages){

				dojo.removeClass(syncMessages, "dot-sync-error");

			}

			if(details){ details.style.display = "none"; }

			if(cancel){ cancel.style.display = "inline"; }

		}else{

			if(roller){ roller.style.display = "none"; }

			if(cancel){ cancel.style.display = "none"; }

			if(syncMessages){

				dojo.removeClass(syncMessages, "dot-sync-error");

			}

		}

	},

	_setSyncMessage: function(message){

		var syncMessage = dojo.byId("dot-sync-messages");

		if(syncMessage){

			// when used with Google Gears pre-release in Firefox/Mac OS X,

			// the browser would crash when testing in Moxie

			// if we set the message this way for some reason.

			// Brad Neuberg, bkn3@columbia.edu

			//syncMessage.innerHTML = message;

			while(syncMessage.firstChild){

				syncMessage.removeChild(syncMessage.firstChild);

			}

			syncMessage.appendChild(document.createTextNode(message));

		}

	},

	_clearSyncMessage: function(){

		this._setSyncMessage("");

	},

	_initImages: function(){

		var onlineImg = dojo.byId("dot-widget-network-indicator-online");

		if(onlineImg){

			onlineImg.setAttribute("src", this.onlineImagePath);

		}

		var offlineImg = dojo.byId("dot-widget-network-indicator-offline");

		if(offlineImg){

			offlineImg.setAttribute("src", this.offlineImagePath);

		}

		var roller = dojo.byId("dot-roller");

		if(roller){

			roller.setAttribute("src", this.rollerImagePath);

		}

		var checkmark = dojo.byId("dot-success-checkmark");

		if(checkmark){

			checkmark.setAttribute("src", this.checkmarkImagePath);

		}

	},

	_showDetails: function(evt){

		// cancel the button's default behavior

		evt.preventDefault();

		evt.stopPropagation();

		if(!dojox.off.sync.details.length){

			return;

		}

		// determine our HTML message to display

		var html = "";

		html += "<html><head><title>Sync Details</title><head><body>";

		html += "<h1>Sync Details</h1>\n";

		html += "<ul>\n";

		for(var i = 0; i < dojox.off.sync.details.length; i++){

			html += "<li>";

			html += dojox.off.sync.details[i];

			html += "</li>";

		}

		html += "</ul>\n";

		html += "<a href='javascript:window.close()' "

				 + "style='text-align: right; padding-right: 2em;'>"

				 + "Close Window"

				 + "</a>\n";

		html += "</body></html>";

		// open a popup window with this message

		var windowParams = "height=400,width=600,resizable=true,"

							+ "scrollbars=true,toolbar=no,menubar=no,"

							+ "location=no,directories=no,dependent=yes";

		var popup = window.open("", "SyncDetails", windowParams);

		if(!popup){ // aggressive popup blocker

			alert("Please allow popup windows for this domain; can't display sync details window");

			return;

		}

		popup.document.open();

		popup.document.write(html);

		popup.document.close();

		// put the focus on the popup window

		if(popup.focus){

			popup.focus();

		}

	},

	_cancel: function(evt){

		// cancel the button's default behavior

		evt.preventDefault();

		evt.stopPropagation();

		dojox.off.sync.cancel();

	},

	_needsBrowserRestart: function(){

		var browserRestart = dojo.byId("dot-widget-browser-restart");

		if(browserRestart){

			dojo.addClass(browserRestart, "dot-needs-browser-restart");

		}

		var appName = dojo.byId("dot-widget-browser-restart-app-name");

		if(appName){

			appName.innerHTML = "";

			appName.appendChild(document.createTextNode(this.appName));

		}

		var status = dojo.byId("dot-sync-status");

		if(status){

			status.style.display = "none";

		}

	},

	_showNeedsOfflineCache: function(){

		var widgetContainer = dojo.byId("dot-widget-container");

		if(widgetContainer){

			dojo.addClass(widgetContainer, "dot-needs-offline-cache");

		}

	},

	_hideNeedsOfflineCache: function(){

		var widgetContainer = dojo.byId("dot-widget-container");

		if(widgetContainer){

			dojo.removeClass(widgetContainer, "dot-needs-offline-cache");

		}

	},

	_initMainEvtHandlers: function(){

		var detailsButton = dojo.byId("dot-sync-details-button");

		if(detailsButton){

			dojo.connect(detailsButton, "onclick", this, this._showDetails);

		}

		var cancelButton = dojo.byId("dot-sync-cancel-button");

		if(cancelButton){

			dojo.connect(cancelButton, "onclick", this, this._cancel);

		}

	},

	_setOfflineEnabled: function(enabled){

		var elems = [];

		elems.push(dojo.byId("dot-sync-status"));

		for(var i = 0; i < elems.length; i++){

			if(elems[i]){

				elems[i].style.visibility =

							(enabled ? "visible" : "hidden");

			}

		}

	},

	_syncFinished: function(){

		this._updateSyncUI();

		var checkmark = dojo.byId("dot-success-checkmark");

		var details = dojo.byId("dot-sync-details");

		if(dojox.off.sync.successful == true){

			this._setSyncMessage("Sync Successful");

			if(checkmark){ checkmark.style.display = "inline"; }

		}else if(dojox.off.sync.cancelled == true){

			this._setSyncMessage("Sync Cancelled");

			if(checkmark){ checkmark.style.display = "none"; }

		}else{

			this._setSyncMessage("Sync Error");

			var messages = dojo.byId("dot-sync-messages");

			if(messages){

				dojo.addClass(messages, "dot-sync-error");

			}

			if(checkmark){ checkmark.style.display = "none"; }

		}

		if(dojox.off.sync.details.length && details){

			details.style.display = "inline";

		}

	},

	_onFrameworkEvent: function(type, saveData){

		if(type == "save"){

			if(saveData.status == dojox.storage.FAILED && !saveData.isCoreSave){

				alert("Please increase the amount of local storage available "

						+ "to this application");

				if(dojox.storage.hasSettingsUI()){

					dojox.storage.showSettingsUI();

				}

				// FIXME: Be able to know if storage size has changed

				// due to user configuration

			}

		}else if(type == "coreOperationFailed"){

			console.log("Application does not have permission to use Dojo Offline");

			if(!this._userInformed){

				alert("This application will not work if Google Gears is not allowed to run");

				this._userInformed = true;

			}

		}else if(type == "offlineCacheInstalled"){

			// clear out the 'needs offline cache' info

			this._hideNeedsOfflineCache();

			// check to see if we need a browser restart

			// to be able to use this web app offline

			if(dojox.off.hasOfflineCache == true

				&& dojox.off.browserRestart == true){

				this._needsBrowserRestart();

				return;

			}else{

				var browserRestart = dojo.byId("dot-widget-browser-restart");

				if(browserRestart){

					browserRestart.style.display = "none";

				}

			}

			// update our sync UI

			this._updateSyncUI();

			// register our event listeners for our main buttons

			this._initMainEvtHandlers();

			// if offline is disabled, disable everything

			this._setOfflineEnabled(dojox.off.enabled);

			// try to go online

			this._testNet();

		}

	},

	_onSync: function(type){

		//console.debug("ui, onSync="+type);

		switch(type){

			case "start":

				this._updateSyncUI();

				break;

			case "refreshFiles":

				this._setSyncMessage("Downloading UI...");

				break;

			case "upload":

				this._setSyncMessage("Uploading new data...");

				break;

			case "download":

				this._setSyncMessage("Downloading new data...");

				break;

			case "finished":

				this._syncFinished();

				break;

			case "cancel":

				this._setSyncMessage("Canceling Sync...");

				break;

			default:

				dojo.warn("Programming error: "

							+ "Unknown sync type in dojox.off.ui: " + type);

				break;

		}

	},

	_onNetwork: function(type){

		// summary:

		//	Called when we go on- or off-line

		// description:

		//	When we go online or offline, this method is called to update

		//	our UI. Default behavior is to update the Offline

		//	Widget UI and to attempt a synchronization.

		// type: String

		//	"online" if we just moved online, and "offline" if we just

		//	moved offline.

		if(!this._initialized){ return; }

		// update UI

		this._updateNetIndicator();

		if(type == "offline"){

			this._setSyncMessage("You are working offline");

			// clear old details

			var details = dojo.byId("dot-sync-details");

			if(details){ details.style.display = "none"; }

			// if we fell offline during a sync, hide

			// the sync info

			this._updateSyncUI();

		}else{ // online

			// synchronize, but pause for a few seconds

			// so that the user can orient themselves

			if(dojox.off.sync.autoSync){

				window.setTimeout("dojox.off.sync.synchronize()", 1000);

			}

		}

	}

});

// register ourselves for low-level framework events

dojo.connect(dojox.off, "onFrameworkEvent", dojox.off.ui, "_onFrameworkEvent");

// start our magic when the Dojo Offline framework is ready to go

dojo.connect(dojox.off, "onLoad", dojox.off.ui, dojox.off.ui._initialize);

}