--- /dev/null
+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);
+ }
+
+});
+
+}
projects / eow / blobdiff