Ticket #4063: presentation.patch

dijit/_Widget.js

@@ -52 +52 @@
 
         this.buildRendering();
         if(this.domNode){
+                this.domNode.setAttribute("id", this.id);
                 this.domNode.setAttribute("widgetId", this.id);
                 if(this.srcNodeRef && this.srcNodeRef.dir){
                         this.domNode.dir = this.srcNodeRef.dir;

dojox/presentation/_base.js

@@ -68 +68 @@
         // _navOpacMin: 0.15,
         _navOpacMin: 0,
         _navOpacMax: 0.85,
-
+        _slideIndex: 0,
+        
         // Private:
         _slides: [], 
         _navShowing: true,
@@ -76 +77 @@
         
         startup: function(){
                 // summary: connect to the various handlers and controls for this presention
-                console.log('fooooo'); 
                 dojox.presentation.Deck.superclass.startup.call(this);
 
                 if(this.useNav){ 
@@ -85 +85 @@
                         this.showNav.style.display = "none"; 
                 } 
 
-                this.connect(document,'onclick', 'gotoSlideByEvent');
+                this.connect(document,'onclick', '_onEvent');
                 /*
                 var tmp = (dojo.isIE)   ? dojo.connect(document,'onkeydown',this,'gotoSlideByEvent') 
                                         : dojo.connect(document,'onkeypress',this,'gotoSlideByEvent');
                 */
-                this.connect(document,'onkeypress', 'gotoSlideByEvent');
-
+                this.connect(document,'onkeypress', '_onEvent');
+                
                 // only if this.fullScreen == true?
                 this.connect(window, 'onresize', '_resizeWindow');
                 this._resizeWindow();
                 
                 this._updateSlides(); 
                 
-                var th = window.location.hash;
-                if(th.length && this.setHash){
-                        var parts = (""+window.location).split(this.id+"_SlideNo_");
-                        if(parts.length>1){
-                                this._gotoSlide(parseInt(parts[1]));
-                        }       
+                this._readHash();
+                this._setHash();
+        },
+
+        moveTo: function(/* Integer */ number) {
+                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) {
+        },
+        
+        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){
+                return this.id+"_SlideNo_"+id;
+        },
+        
         _hideNav: function(evt){
                 // summary: hides navigation
                 if(this._navAnim){ this._navAnim.stop(); }
@@ -159 +189 @@
                 }
         },
 
-        gotoSlideByEvent: function(/* Event */ evt){
+        _onEvent: function(/* Event */ evt){
                 // summary: 
                 //              main presentation function, determines next 'best action' for a
                 //              specified event.
@@ -168 +198 @@
 
                 if(_type == "click" || _type == "change"){
                         if(_node.index && _node.parentNode == this.select){ 
-                                this.selectChild(this._slides[_node.index]); 
+                                this._gotoSlide(_node.index);
                         }else if(_node == this.select){
-                                this.selectChild(this._slides[_node.selectedIndex]);
+                                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"){
-                        // TODO: match these again dojo.keys.*
+                        
                         // FIXME: safari doesn't report keydown/keypress?
-                        var key = evt.keyCode;
-                        var ch = evt.charCode;
-                        if(key == 63234 || key == 37){
-                                this.previousSlide(evt);
-                        }else if(key == 63235 || key == 39 || ch == 32) {
-                                this.selectedChildWidget._nextAction(evt); 
+                        
+                        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 */ slideNo) {
-                slideNo -= 1; 
-                this.selectChild(this._slides[slideNo]);
-                this._slides[slideNo]._reset();
-                this.select.selectedIndex = slideNo; 
-                if(this.setHash){ this._setHash(); }
+        _gotoSlide: function(/* Integer */ slideIndex) {
+
+                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){
@@ -210 +265 @@
                 }
                 return false; 
         },
-        nextSlide: function(/*Event*/ evt){
-                // summary: transition to the next slide.
-                if(!this.selectedChildWidget.isLastChild){
-                        this.forward();
-                        this.select.selectedIndex += 1; 
+
+        _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);
+                        }
                 }
-                if(this.setHash){ this._setHash(); }
-                if(evt){ evt.stopPropagation(); }
         },
 
-        previousSlide: function(/*Event*/ evt){
-                // summary: transition to the previous slide
-                if(!this.selectedChildWidget.isFirstChild){
-                        this.back();
-                        this.select.selectedIndex -= 1; 
-                }else{
-                        this.selectedChildWidget._reset();
-                } 
-                if(this.setHash){ this._setHash(); }
-                if(evt){ evt.stopPropagation();}
-        },
-
         _setHash: function(){
-                // summary: sets url #mark to direct slide access
-                var slideNo = this.select.selectedIndex+1;
-                window.location.href = "#"+this.id+"_SlideNo_"+slideNo;
-
+                if (this.setHash) {
+                        // summary: sets url #mark to direct slide access
+                        var slideNo = this._slideIndex+1;
+                        window.location.href = "#"+this.getHash(slideNo);       
+                }
         },
 
         _resizeWindow: function(/*Event*/ evt){
@@ -253 +298 @@
                 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

dojox/presentation/resources/Show.html

@@ -2 +2 @@
         <div class="dojoShowNav" dojoAttachPoint="showNav" dojoAttachEvent="onmouseover: _showNav, onmouseout: _hideNav">
         <div class="dojoShowNavToggler" dojoAttachPoint="showToggler">
                 <img dojoAttachPoint="prevNode" src="${prevIcon}" dojoAttachEvent="onclick:previousSlide">
-                <select dojoAttachEvent="onclick:gotoSlideByEvent, onchange:gotoSlideByEvent" dojoAttachPoint="select">
+                <select dojoAttachEvent="onchange:_onEvent" dojoAttachPoint="select">
                         <option dojoAttachPoint="_option">Title</option>
                 </select>
                 <img dojoAttachPoint="nextNode" src="${nextIcon}" dojoAttachEvent="onclick:nextSlide">

dojox/presentation/tests/test_presentation.html

@@ -5 +5 @@
 
         <script type="text/javascript"> djConfig = { isDebug: true, parseOnLoad: true }; </script>
         <script type="text/javascript" src="../../../dojo/dojo.js"></script>
-        <script type="text/javascript" src="../_base.js"></script>
+        
                 
         <script type="text/javascript">
-                // dojo.require("dojox.presentation");
+                dojo.require("dojox.presentation");
                 dojo.require("dijit._Calendar"); 
                 dojo.require("dijit.TitlePane"); 
                 dojo.require("dojo.parser"); 
@@ -129 +129 @@
                 <div dojoType="dojox.presentation.Slide" title="Click Blocking" id="animated">
                         <p>You cannot click on this page</p>
                         <p dojoType="dojox.presentation.Part" as="1">I told you that you can't click ...</p>
-                        <a href="#" onclick="playIt()">click here to move the title</a>
+                        <a href="#" onClick="playIt()">click here to move the title</a>
                         <input dojoType="dojox.presentation.Action" forSlide="1" toggle="wipe">
                         <input dojoType="dojox.presentation.Action" forSlide="2">
                         <input dojoType="dojox.presentation.Action" forSlide="1" toggle="fade">

dojox/timing/_base.js

@@ +1 @@
+dojo.provide("dojox.timing._base");
+
+dojox.timing.Timer = function(/*int*/ interval){
+        // summary: Timer object executes an "onTick()" method repeatedly at a specified interval. 
+        //                      repeatedly at a given interval.
+        // interval: Interval between function calls, in milliseconds.
+        this.timer = null;
+        this.isRunning = false;
+        this.interval = interval;
+
+        this.onStart = null;
+        this.onStop = null;
+};
+
+dojo.extend(dojox.timing.Timer, {
+        onTick : function(){
+                // summary: Method called every time the interval passes.  Override to do something useful.
+        },
+                
+        setInterval : function(interval){
+                // summary: Reset the interval of a timer, whether running or not.
+                // interval: New interval, in milliseconds.
+                if (this.isRunning){
+                        window.clearInterval(this.timer);
+                }
+                this.interval = interval;
+                if (this.isRunning){
+                        this.timer = window.setInterval(dojo.lang.hitch(this, "onTick"), this.interval);
+                }
+        },
+        
+        start : function(){
+                // summary: Start the timer ticking.
+                // description: Calls the "onStart()" handler, if defined.
+                //                              Note that the onTick() function is not called right away, 
+                //                              only after first interval passes.
+                if (typeof this.onStart == "function"){
+                        this.onStart();
+                }
+                this.isRunning = true;
+                this.timer = window.setInterval(dojo.lang.hitch(this, "onTick"), this.interval);
+        },
+        
+        stop : function(){
+                // summary: Stop the timer.
+                // description: Calls the "onStop()" handler, if defined.
+                if (typeof this.onStop == "function"){
+                        this.onStop();
+                }
+                this.isRunning = false;
+                window.clearInterval(this.timer);
+        }
+});

dojox/timing/Streamer.js

@@ +1 @@
+dojo.provide("dojox.timing.Streamer");
+
+dojo.require("dojox.timing._base");
+
+dojox.timing.Streamer = function(
+        /* function */input, 
+        /* function */output, 
+        /* int */interval, 
+        /* int */minimum,
+        /* array */initialData
+){
+        //      summary
+        //      Streamer will take an input function that pushes N datapoints into a
+        //              queue, and will pass the next point in that queue out to an
+        //              output function at the passed interval; this way you can emulate
+        //              a constant buffered stream of data.
+        //      input: the function executed when the internal queue reaches minimumSize
+        //      output: the function executed on internal tick
+        //      interval: the interval in ms at which the output function is fired.
+        //      minimum: the minimum number of elements in the internal queue.
+
+        var self = this;
+        var queue = [];
+
+        //      public properties
+        this.interval = interval || 1000;
+        this.minimumSize = minimum || 10;       //      latency usually == interval * minimumSize
+        this.inputFunction = input || function(q){ };
+        this.outputFunction = output || function(point){ };
+
+        //      more setup
+        var timer = new dojox.timing.Timer(this.interval);
+        var tick = function(){
+                self.onTick(self);
+
+                if(queue.length < self.minimumSize){
+                        self.inputFunction(queue);
+                }
+
+                var obj = queue.shift();
+                while(typeof(obj) == "undefined" && queue.length > 0){
+                        obj = queue.shift();
+                }
+                
+                //      check to see if the input function needs to be fired
+                //      stop before firing the output function
+                //      TODO: relegate this to the output function?
+                if(typeof(obj) == "undefined"){
+                        self.stop();
+                        return;
+                }
+
+                //      call the output function.
+                self.outputFunction(obj);
+        };
+
+        this.setInterval = function(/* int */ms){
+                //      summary
+                //      sets the interval in milliseconds of the internal timer
+                this.interval = ms;
+                timer.setInterval(ms);
+        };
+
+        this.onTick = function(/* dojox.timing.Streamer */obj){ };
+        // wrap the timer functions so that we can connect to them if needed.
+        this.start = function(){
+                //      summary
+                //      starts the Streamer
+                if(typeof(this.inputFunction) == "function" && typeof(this.outputFunction) == "function"){
+                        timer.start();
+                        return;
+                }
+                dojo.raise("You cannot start a Streamer without an input and an output function.");
+        };
+        this.onStart = function(){ };
+        this.stop = function(){
+                //      summary
+                //      stops the Streamer
+                timer.stop();
+        };
+        this.onStop = function(){ };
+
+        //      finish initialization
+        timer.onTick = this.tick;
+        timer.onStart = this.onStart;
+        timer.onStop = this.onStop;
+        if(initialData){
+                queue.concat(initialData);
+        }
+};

dojox/timing/_base.js

@@ +1 @@
+dojo.provide("dojox.timing._base");
+
+dojox.timing.Timer = function(/*int*/ interval){
+        // summary: Timer object executes an "onTick()" method repeatedly at a specified interval. 
+        //                      repeatedly at a given interval.
+        // interval: Interval between function calls, in milliseconds.
+        this.timer = null;
+        this.isRunning = false;
+        this.interval = interval;
+
+        this.onStart = null;
+        this.onStop = null;
+};
+
+dojo.extend(dojox.timing.Timer, {
+        onTick : function(){
+                // summary: Method called every time the interval passes.  Override to do something useful.
+        },
+                
+        setInterval : function(interval){
+                // summary: Reset the interval of a timer, whether running or not.
+                // interval: New interval, in milliseconds.
+                if (this.isRunning){
+                        window.clearInterval(this.timer);
+                }
+                this.interval = interval;
+                if (this.isRunning){
+                        this.timer = window.setInterval(dojo.lang.hitch(this, "onTick"), this.interval);
+                }
+        },
+        
+        start : function(){
+                // summary: Start the timer ticking.
+                // description: Calls the "onStart()" handler, if defined.
+                //                              Note that the onTick() function is not called right away, 
+                //                              only after first interval passes.
+                if (typeof this.onStart == "function"){
+                        this.onStart();
+                }
+                this.isRunning = true;
+                this.timer = window.setInterval(dojo.lang.hitch(this, "onTick"), this.interval);
+        },
+        
+        stop : function(){
+                // summary: Stop the timer.
+                // description: Calls the "onStop()" handler, if defined.
+                if (typeof this.onStop == "function"){
+                        this.onStop();
+                }
+                this.isRunning = false;
+                window.clearInterval(this.timer);
+        }
+});

dojox/timing/Streamer.js

@@ +1 @@
+dojo.provide("dojox.timing.Streamer");
+
+dojo.require("dojox.timing._base");
+
+dojox.timing.Streamer = function(
+        /* function */input, 
+        /* function */output, 
+        /* int */interval, 
+        /* int */minimum,
+        /* array */initialData
+){
+        //      summary
+        //      Streamer will take an input function that pushes N datapoints into a
+        //              queue, and will pass the next point in that queue out to an
+        //              output function at the passed interval; this way you can emulate
+        //              a constant buffered stream of data.
+        //      input: the function executed when the internal queue reaches minimumSize
+        //      output: the function executed on internal tick
+        //      interval: the interval in ms at which the output function is fired.
+        //      minimum: the minimum number of elements in the internal queue.
+
+        var self = this;
+        var queue = [];
+
+        //      public properties
+        this.interval = interval || 1000;
+        this.minimumSize = minimum || 10;       //      latency usually == interval * minimumSize
+        this.inputFunction = input || function(q){ };
+        this.outputFunction = output || function(point){ };
+
+        //      more setup
+        var timer = new dojox.timing.Timer(this.interval);
+        var tick = function(){
+                self.onTick(self);
+
+                if(queue.length < self.minimumSize){
+                        self.inputFunction(queue);
+                }
+
+                var obj = queue.shift();
+                while(typeof(obj) == "undefined" && queue.length > 0){
+                        obj = queue.shift();
+                }
+                
+                //      check to see if the input function needs to be fired
+                //      stop before firing the output function
+                //      TODO: relegate this to the output function?
+                if(typeof(obj) == "undefined"){
+                        self.stop();
+                        return;
+                }
+
+                //      call the output function.
+                self.outputFunction(obj);
+        };
+
+        this.setInterval = function(/* int */ms){
+                //      summary
+                //      sets the interval in milliseconds of the internal timer
+                this.interval = ms;
+                timer.setInterval(ms);
+        };
+
+        this.onTick = function(/* dojox.timing.Streamer */obj){ };
+        // wrap the timer functions so that we can connect to them if needed.
+        this.start = function(){
+                //      summary
+                //      starts the Streamer
+                if(typeof(this.inputFunction) == "function" && typeof(this.outputFunction) == "function"){
+                        timer.start();
+                        return;
+                }
+                dojo.raise("You cannot start a Streamer without an input and an output function.");
+        };
+        this.onStart = function(){ };
+        this.stop = function(){
+                //      summary
+                //      stops the Streamer
+                timer.stop();
+        };
+        this.onStop = function(){ };
+
+        //      finish initialization
+        timer.onTick = this.tick;
+        timer.onStart = this.onStart;
+        timer.onStop = this.onStop;
+        if(initialData){
+                queue.concat(initialData);
+        }
+};