Subversion Repositories Applications.papyrus

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

dojo._hasResource["dojox.presentation._base"] = true;

dojo.provide("dojox.presentation._base");

dojo.experimental("dojox.presentation");

dojo.require("dijit._Widget");

dojo.require("dijit._Container");

dojo.require("dijit._Templated");

dojo.require("dijit.layout.StackContainer");

dojo.require("dijit.layout.ContentPane");

dojo.require("dojo.fx");

dojo.declare("dojox.presentation.Deck", [ dijit.layout.StackContainer, dijit._Templated ], {

	// summary:

	//	dojox.presentation class

	//	basic powerpoint esque engine for handling transitons and control

	//	in a page-by-page and part-by-part way

	//

	// 	FIXME: parsing part(s)/widget(s) in href="" Slides not working

	//	TODO: make auto actions progress.

	//	FIXME: Safari keydown/press/up listener not working.

	//	noClick=true prevents progression of slides in that broweser

	//

	// fullScreen: Boolean

	// 	unsupported (that i know of) just yet. Default it to take control

	//	of window. Would be nice to be able to contain presentation in a

	//	styled container, like StackContainer ... theoretically possible.

	//	[and may not need this variable?]

	fullScreen: true,

	// useNav: Boolean

	//	true to allow navigation popup, false to disallow

	useNav: true,

	// navDuration: Integer

	//	time in MS fadein/out of popup nav [default: 250]

	navDuration: 250,

	// noClick: Boolean

	//	if true, prevents _any_ click events to propagate actions

	//	(limiting control to keyboard and/or action.on="auto" or action.delay=""

	//	actions.

	noClick: false,

	// setHash: Boolean

	//	if true, window location bar will get a #link to slide for direct

	//	access to a particular slide number.

	setHash: true,

	// just to over-ride:

	templateString: null,

	templateString:"<div class=\"dojoShow\" dojoAttachPoint=\"showHolder\">\n\t<div class=\"dojoShowNav\" dojoAttachPoint=\"showNav\" dojoAttachEvent=\"onmouseover: _showNav, onmouseout: _hideNav\">\n\t<div class=\"dojoShowNavToggler\" dojoAttachPoint=\"showToggler\">\n\t\t<img dojoAttachPoint=\"prevNode\" src=\"${prevIcon}\" dojoAttachEvent=\"onclick:previousSlide\">\n\t\t<select dojoAttachEvent=\"onchange:_onEvent\" dojoAttachPoint=\"select\">\n\t\t\t<option dojoAttachPoint=\"_option\">Title</option>\n\t\t</select>\n\t\t<img dojoAttachPoint=\"nextNode\" src=\"${nextIcon}\" dojoAttachEvent=\"onclick:nextSlide\">\n\t</div>\n\t</div>\n\t<div dojoAttachPoint=\"containerNode\"></div>\n</div>\n",

	// nextIcon: String

	//	icon for navigation "next" button

	nextIcon: dojo.moduleUrl('dojox.presentation','resources/icons/next.png'),

	// prevIcon: String

	// 	icon for navigation "previous" button

	prevIcon: dojo.moduleUrl('dojox.presentation','resources/icons/prev.png'),

	_navOpacMin: 0,

	_navOpacMax: 0.85,

	_slideIndex: 0,

	// Private:

	_slides: [],

	_navShowing: true,

	_inNav: false,

	startup: function(){

		// summary: connect to the various handlers and controls for this presention

		dojox.presentation.Deck.superclass.startup.call(this);

		if(this.useNav){

			this._hideNav();

		}else{

			this.showNav.style.display = "none";

		}

		this.connect(document,'onclick', '_onEvent');

		this.connect(document,'onkeypress', '_onEvent');

		// only if this.fullScreen == true?

		this.connect(window, 'onresize', '_resizeWindow');

		this._resizeWindow();

		this._updateSlides();

		this._readHash();

		this._setHash();

	},

	moveTo: function(/* Integer */ number){

		// summary: jump to slide based on param

		var slideIndex = number - 1;

		if(slideIndex < 0)

			slideIndex = 0;

		if(slideIndex > this._slides.length - 1)

			slideIndex = this._slides.length - 1;

		this._gotoSlide(slideIndex);

	},

	onMove: function (number){

		// summary: stub function? TODOC: ?

	},

	nextSlide: function(/*Event*/ evt){

		// summary: transition to the next slide.

		if (!this.selectedChildWidget.isLastChild) {

			this._gotoSlide(this._slideIndex+1);

		}

		if (evt) { evt.stopPropagation(); }

	},

	previousSlide: function(/*Event*/ evt){

		// summary: transition to the previous slide

		if (!this.selectedChildWidget.isFirstChild) {

			this._gotoSlide(this._slideIndex-1);

		} else { this.selectedChildWidget._reset(); }

		if (evt) { evt.stopPropagation();}

	},

	getHash: function(id){

		// summary: get the current hash to set in localtion

		return this.id+"_SlideNo_"+id;

	},

	_hideNav: function(evt){

		// summary: hides navigation

		if(this._navAnim){ this._navAnim.stop(); }

		this._navAnim = dojo.animateProperty({

			node:this.showNav,

			duration:this.navDuration,

			properties: {

				opacity: { end:this._navOpacMin }

			}

		}).play();

	},

	_showNav: function(evt){

		// summary: shows navigation

		if(this._navAnim){ this._navAnim.stop(); }

		this._navAnim = dojo.animateProperty({

			node:this.showNav,

			duration:this.navDuration,

			properties: {

				opacity: { end:this._navOpacMax }

			}

		}).play();

	},

	_handleNav: function(evt){

		// summary: does nothing? _that_ seems useful.

		evt.stopPropagation();

	},

	_updateSlides: function(){

		// summary:

		//		populate navigation select list with refs to slides call this

		//		if you add a node to your presentation dynamically.

		this._slides = this.getChildren();

		if(this.useNav){

			// populate the select box with top-level slides

			var i=0;

			dojo.forEach(this._slides,dojo.hitch(this,function(slide){

				i++;

				var tmp = this._option.cloneNode(true);

				tmp.text = slide.title+" ("+i+") ";

				this._option.parentNode.insertBefore(tmp,this._option);

			}));

			if(this._option.parentNode){

				this._option.parentNode.removeChild(this._option);

			}

			// dojo._destroyElement(this._option);

		}

	},

	_onEvent: function(/* Event */ evt){

		// summary:

		//		main presentation function, determines next 'best action' for a

		//		specified event.

		var _node = evt.target;

		var _type = evt.type;

		if(_type == "click" || _type == "change"){

			if(_node.index && _node.parentNode == this.select){

				this._gotoSlide(_node.index);

			}else if(_node == this.select){

				this._gotoSlide(_node.selectedIndex);

			}else{

				if (this.noClick || this.selectedChildWidget.noClick || this._isUnclickable(evt)) return;

				this.selectedChildWidget._nextAction(evt);

			}

		}else if(_type=="keydown" || _type == "keypress"){

			// FIXME: safari doesn't report keydown/keypress?

			var key = (evt.charCode == dojo.keys.SPACE ? dojo.keys.SPACE : evt.keyCode);

			switch(key){

				case dojo.keys.DELETE:

				case dojo.keys.BACKSPACE:

				case dojo.keys.LEFT_ARROW:

				case dojo.keys.UP_ARROW:

				case dojo.keys.PAGE_UP:

				case 80:	// key 'p'

					this.previousSlide(evt);

					break;

				case dojo.keys.ENTER:

				case dojo.keys.SPACE:

				case dojo.keys.RIGHT_ARROW:

				case dojo.keys.DOWN_ARROW:

				case dojo.keys.PAGE_DOWN:

				case 78:	// key 'n'

					this.selectedChildWidget._nextAction(evt);

					break;

				case dojo.keys.HOME:	this._gotoSlide(0);

			}

		}

		this._resizeWindow();

		evt.stopPropagation();

	},

	_gotoSlide: function(/* Integer */ slideIndex){

		// summary: goes to slide

		this.selectChild(this._slides[slideIndex]);

		this.selectedChildWidget._reset();

		this._slideIndex = slideIndex;

		if(this.useNav){

			this.select.selectedIndex = slideIndex;

		}

		if(this.setHash){

			this._setHash();

		}

		this.onMove(this._slideIndex+1);

	},

	_isUnclickable: function(/* Event */ evt){

		// summary: returns true||false base of a nodes click-ability

		var nodeName = evt.target.nodeName.toLowerCase();

		// TODO: check for noClick='true' in target attrs & return true

		// TODO: check for relayClick='true' in target attrs & return false

		switch(nodeName){

			case 'a' :

			case 'input' :

			case 'textarea' : return true; break;

		}

		return false;

	},

	_readHash: function(){

		var th = window.location.hash;

		if (th.length && this.setHash) {

			var parts = (""+window.location).split(this.getHash(''));

			if(parts.length>1){

				this._gotoSlide(parseInt(parts[1])-1);

			}

		}

	},

	_setHash: function(){

		// summary: sets url #mark to direct slide access

		if(this.setHash){

			var slideNo = this._slideIndex+1;

			window.location.href = "#"+this.getHash(slideNo);

		}

	},

	_resizeWindow: function(/*Event*/ evt){

		// summary: resize this and children to fix this window/container

		// only if this.fullScreen?

		dojo.body().style.height = "auto";

		var wh = dijit.getViewport();

		var h = Math.max(

			document.documentElement.scrollHeight || dojo.body().scrollHeight,

			wh.h);

		var w = wh.w;

		this.selectedChildWidget.domNode.style.height = h +'px';

		this.selectedChildWidget.domNode.style.width = w +'px';

	},

	_transition: function(newWidget,oldWidget){

		// summary: over-ride stackcontainers _transition method

		//	but atm, i find it to be ugly with not way to call

		//	_showChild() without over-riding it too. hopefull

		//	basic toggles in superclass._transition will be available

		//	in dijit, and this won't be necessary.

		var anims = [];

		if(oldWidget){

			/*

			anims.push(dojo.fadeOut({ node: oldWidget.domNode,

				duration:250,

				onEnd: dojo.hitch(this,function(){

					this._hideChild(oldWidget);

				})

			}));

			*/

			this._hideChild(oldWidget);

		}

		if(newWidget){

			/*

			anims.push(dojo.fadeIn({

				node:newWidget.domNode, start:0, end:1,

				duration:300,

				onEnd: dojo.hitch(this,function(){

					this._showChild(newWidget);

					newWidget._reset();

					})

				})

			);

			*/

			this._showChild(newWidget);

			newWidget._reset();

		}

		//dojo.fx.combine(anims).play();

	}

});

dojo.declare(

	"dojox.presentation.Slide",

	[dijit.layout.ContentPane,dijit._Contained,dijit._Container,dijit._Templated],

	{

	// summary:

	//	a Comonent of a dojox.presentation, and container for each 'Slide'

	//	made up of direct HTML (no part/action relationship), and dojox.presentation.Part(s),

	//	and their attached Actions.

	// templatPath: String

	//	make a ContentPane templated, and style the 'titleNode'

	templateString:"<div dojoAttachPoint=\"showSlide\" class=\"dojoShowPrint dojoShowSlide\">\n\t<h1 class=\"showTitle\" dojoAttachPoint=\"slideTitle\"><span class=\"dojoShowSlideTitle\" dojoAttachPoint=\"slideTitleText\">${title}</span></h1>\n\t<div class=\"dojoShowBody\" dojoAttachPoint=\"containerNode\"></div>\n</div>\n",

	// title: String

	//	string to insert into titleNode, title of Slide

	title: "",

	// inherited from ContentPane FIXME: don't seem to work ATM?

	refreshOnShow: true,

	preLoad: false,

	doLayout: true,

	parseContent: true,

	// noClick: Boolean

	// 	true on slide tag prevents clicking, false allows

	// 	(can also be set on base presentation for global control)

	noClick: false,

	// private holders:

	_parts: [],

	_actions: [],

	_actionIndex: 0,

	_runningDelay: false,

	startup: function(){

		// summary: setup this slide with actions and components (Parts)

		this.slideTitleText.innerHTML = this.title;

		var children = this.getChildren();

		this._actions = [];

		dojo.forEach(children,function(child){

			var tmpClass = child.declaredClass.toLowerCase();

			switch(tmpClass){

				case "dojox.presentation.part" : this._parts.push(child); break;

				case "dojox.presentation.action" : this._actions.push(child); break;

			}

		},this);

	},

	_nextAction: function(evt){

		// summary: gotoAndPlay current cached action

		var tmpAction = this._actions[this._actionIndex] || 0;

		if (tmpAction){

			// is this action a delayed action? [auto? thoughts?]

			if(tmpAction.on == "delay"){

				this._runningDelay = setTimeout(

					dojo.hitch(tmpAction,"_runAction"),tmpAction.delay

					);

				console.debug('started delay action',this._runningDelay);

			}else{

				tmpAction._runAction();

			}

			// FIXME: it gets hairy here. maybe runAction should

			// call _actionIndex++ onEnd? if a delayed action is running, do

			// we want to prevent action++?

			var tmpNext = this._getNextAction();

			this._actionIndex++;

			if(tmpNext.on == "delay"){

				// FIXME: yeah it looks like _runAction() onend should report

				// _actionIndex++

				console.debug('started delay action',this._runningDelay);

				setTimeout(dojo.hitch(tmpNext,"_runAction"),tmpNext.delay);

			}

		}else{

			// no more actions in this slide

			this.getParent().nextSlide(evt);

		}

	},

	_getNextAction: function(){

		// summary: returns the _next action in this sequence

		return this._actions[this._actionIndex+1] || 0;

	},

	_reset: function(){

		// summary: set action chain back to 0 and re-init each Part

		this._actionIndex = [0];

		dojo.forEach(this._parts,function(part){

			part._reset();

		},this);

	}

});

dojo.declare("dojox.presentation.Part", [dijit._Widget,dijit._Contained], {

	// summary:

	//	a node in a presentation.Slide that inherits control from a

	//	dojox.presentation.Action

	//	can be any element type, and requires styling before parsing

	//

	// as: String

	//	like an ID, attach to Action via (part) as="" / (action) forSlide="" tags

	//	this should be unique identifier?

	as: null,

	// startVisible: boolean

	//	true to leave in page on slide startup/reset

	//	false to hide on slide startup/reset

	startVisible: false,

	// isShowing: Boolean,

	//	private holder for _current_ state of Part

	_isShowing: false,

	postCreate: function(){

		// summary: override and init() this component

		this._reset();

	},

	_reset: function(){

		// summary: set part back to initial calculate state

		// these _seem_ backwards, but quickToggle flips it

		this._isShowing =! this.startVisible;

		this._quickToggle();

	},

	_quickToggle: function(){

		// summary: ugly [unworking] fix to test setting state of component

		//	before/after an animation. display:none prevents fadeIns?

		if(this._isShowing){

			dojo.style(this.domNode,'display','none');

			dojo.style(this.domNode,'visibility','hidden');

			dojo.style(this.domNode,'opacity',0);

		}else{

                        dojo.style(this.domNode,'display','');

			dojo.style(this.domNode,'visibility','visible');

			dojo.style(this.domNode,'opacity',1);

		}

		this._isShowing =! this._isShowing;

	}

});

dojo.declare("dojox.presentation.Action", [dijit._Widget,dijit._Contained], {

	// summary:

	//	a widget to attach to a dojox.presentation.Part to control

	//	it's properties based on an inherited chain of events ...

	//

	//

	// on: String

	//	FIXME: only 'click' supported ATM. plans include on="delay",

	//	on="end" of="", and on="auto". those should make semantic sense

	//	to you.

	on: 'click',

	// forSlide: String

	//	attach this action to a dojox.presentation.Part with a matching 'as' attribute

	forSlide: null,

	// toggle: String

	//	will toggle attached [matching] node(s) via forSlide/as relationship(s)

	toggle: 'fade',

	// delay: Integer

	//

	delay: 0,

	// duration: Integer

	//	default time in MS to run this action effect on it's 'forSlide' node

	duration: 1000,

	// private holders:

	_attached: [],

	_nullAnim: false,

	_runAction: function(){

		// summary: runs this action on attached node(s)

		var anims = [];

		// executes the action for each attached 'Part'

		dojo.forEach(this._attached,function(node){

			// FIXME: this is ugly, and where is toggle class? :(

			var dir = (node._isShowing) ? "Out" : "In";

			// node._isShowing =! node._isShowing;

			node._quickToggle(); // (?) this is annoying

			//var _anim = dojox.fx[ this.toggle ? this.toggle+dir : "fade"+dir]({

			var _anim = dojo.fadeIn({

				node:node.domNode,

				duration: this.duration

				//beforeBegin: dojo.hitch(node,"_quickToggle")

			});

			anims.push(_anim);

		},this);

		var _anim = dojo.fx.combine(anims);

		if(_anim){ _anim.play(); }

	},

	_getSiblingsByType: function(/* String */ declaredClass){

		// summary: quick replacement for getChildrenByType("class"), but in

		// a child here ... so it's getSiblings. courtesy bill in #dojo

		// could be moved into parent, and just call this.getChildren(),

		// which makes more sense.

		var siblings = dojo.filter( this.getParent().getChildren(), function(widget){

			return widget.declaredClass==declaredClass;

			}

		);

		return siblings; // dijit._Widget

	},

	postCreate: function(){

		// summary: run this once, should this be startup: function()?

		// prevent actions from being visible, _always_

		dojo.style(this.domNode,"display","none");

 		var parents = this._getSiblingsByType('dojox.presentation.Part');

		// create a list of "parts" we are attached to via forSlide/as

		this._attached = [];

		dojo.forEach(parents,function(parentPart){

			if(this.forSlide == parentPart.as){

				this._attached.push(parentPart);

			}

		},this);

	}

});

}