New feature: basic Ajax suggestion for tags and implementation of Dojo toolkit

git-svn-id: https://semanticscuttle.svn.sourceforge.net/svnroot/semanticscuttle/trunk@151 b3834d28-1941-0410-a4f8-b48e95affb8f

1 files changed, 557 insertions, 0 deletions

diff --git a/includes/js/dojox/presentation/_base.js b/includes/js/dojox/presentation/_base.js
new file mode 100644
index 0000000..2077a4e
--- /dev/null
+++ b/includes/js/dojox/presentation/_base.js
@@ -0,0 +1,557 @@
+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);
+	}	
+
+});
+
+}