path: root/includes/js/dojox/presentation/_base.js

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
		this.inherited(arguments);

		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.inherited(arguments);
		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: "",
	
	// 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: "",

	// 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; 
			//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()?

		this.inherited(arguments);
		// 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);
	}	

});

}