Opera Show Documentation: JavaScript Addons

The Opera Show generator provides several JavaScript addons, which can also be applied as bookmarklets. This page highlights some aspects of those scripts, but does not discuss them in detail.

Check OSF 1.0

All addons include a check function which determines if the file is an OSF 1.0 file. This is merely done by checking if there is a meta-element present with name="version" and content="OSF 1.0". It returns an error message when not the case.

// Check if Opera Show file
function checkOShow() {
	var metas = document.getElementsByTagName('meta');
	for (var i=0;i<metas.length;i++) {
	if (metas[i].getAttribute('content').match(/^OSF.(\d+)\.(\d+)$/)) { document.addEventListener('keypress', dokey, false); return; }
	}
	alert('Cannot apply Script. File is not compatible Opera Show')
}

When the required <meta> tag is present, an eventlistener is set which triggers the actual functions.

Check Fullscreen

Some scripts should only execute when the browser is in projection mode. However, currently there is no elegant way to determine the mediatype the document is being viewed with. So in order to determine this, the getComputedStyle method is used to check for page-break-after on the .slide and certain functions will only be called if that check returns true.

// Handle keypresses
function dokey(evt) {
	var ch = evt.keyCode;

	// check to see if you're in fullscreen. Dirty hack, but hey?! :-)
	var firstslide = document.getElementById('slide1');
	if (window.getComputedStyle(firstslide,null).pageBreakAfter == "always") {
		if (ch == "34" || ch == "32" ) {  doAnim(); }		// PageDown, spacebar
		else if (ch == "33" ) { slidedisplay = slidedisplay -2; doAnim(); }		// PageUp
		else if (ch == "0" ) { slidedisplay = -1; doAnim(); }		// home
		else if (ch == "110" ) {  toggleNavMenu(); }		// n
	}
	else {
		if (ch == "110" ) {  toggleNavMenu(); }
	}
}

Namespace

Some scripts, such as the navigation menu insert elements into the document. As the document is application/xhtml+xml the DOM inserting the code should provide a namespace with each inserted element. Otherwise an <a> element would not be recognized as a link.

var y = document.createElementNS('http://www.w3.org/1999/xhtml','div');