Page MenuHomeCode
Files F947755

_base.js
No OneTemporary
Actions

_base.js
View Options

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);
}
});
}

File Metadata

Mime Type
text/plain
Expires
Sat, Apr 26, 13:14 (19 h, 48 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
25325
Default Alt Text
_base.js (16 KB)

Event Timeline