aboutsummaryrefslogtreecommitdiff
path: root/includes/js/dojox/presentation
diff options
context:
space:
mode:
authormensonge <mensonge@b3834d28-1941-0410-a4f8-b48e95affb8f>2008-11-13 09:49:11 +0000
committermensonge <mensonge@b3834d28-1941-0410-a4f8-b48e95affb8f>2008-11-13 09:49:11 +0000
commite44a7e37b6c7b5961adaffc62b9042b8d442938e (patch)
tree95b67c356e93163467db2451f2b8cce84ed5d582 /includes/js/dojox/presentation
parenta62b9742ee5e28bcec6872d88f50f25b820914f6 (diff)
downloadsemanticscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.gz
semanticscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.bz2
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
Diffstat (limited to 'includes/js/dojox/presentation')
-rw-r--r--includes/js/dojox/presentation/README72
-rw-r--r--includes/js/dojox/presentation/_base.js557
-rw-r--r--includes/js/dojox/presentation/resources/Show.css100
-rw-r--r--includes/js/dojox/presentation/resources/Show.css.commented.css110
-rw-r--r--includes/js/dojox/presentation/resources/Show.html12
-rw-r--r--includes/js/dojox/presentation/resources/Slide.html4
-rw-r--r--includes/js/dojox/presentation/resources/icons/down.pngbin0 -> 469 bytes
-rw-r--r--includes/js/dojox/presentation/resources/icons/next.pngbin0 -> 470 bytes
-rw-r--r--includes/js/dojox/presentation/resources/icons/prev.pngbin0 -> 460 bytes
-rw-r--r--includes/js/dojox/presentation/resources/icons/up.pngbin0 -> 464 bytes
-rw-r--r--includes/js/dojox/presentation/tests/_ext1.html21
-rw-r--r--includes/js/dojox/presentation/tests/test_presentation.html162
12 files changed, 1038 insertions, 0 deletions
diff --git a/includes/js/dojox/presentation/README b/includes/js/dojox/presentation/README
new file mode 100644
index 0000000..4be60f5
--- /dev/null
+++ b/includes/js/dojox/presentation/README
@@ -0,0 +1,72 @@
+-------------------------------------------------------------------------------
+dojox.presentation
+-------------------------------------------------------------------------------
+Version 0.9
+Release date: 10/31/2007
+-------------------------------------------------------------------------------
+Project state:
+experimental
+-------------------------------------------------------------------------------
+Credits
+ pete higgins (dante)
+-------------------------------------------------------------------------------
+
+Project description
+
+This is the presentation base class. It provides a mechanism for various
+display-oriented tasks. It includes a powerpoint-esque engine [prototype].
+The SlideShow aspect of this project has been deprecated and lives now
+in dojox.image project.
+
+-------------------------------------------------------------------------------
+
+Dependencies:
+
+dojox.presentation requires both Dojo Base, Dojo FX Core, and Dijit system(s).
+
+-------------------------------------------------------------------------------
+
+Documentation
+
+See the Dojo API tool (http://dojotoolkit.org/api)
+
+-------------------------------------------------------------------------------
+
+Installation instructions
+
+This package is self-contained, but needs Dijit sytem.
+
+Grab the following from the Dojo SVN Repository:
+
+svn co http://svn.dojotoolkit.org/dojo/dojox/trunk/presentation*
+svn co http://svn.dojotoolkit.org/dojo/dijit/*
+
+into your:
+/dojo root folder [checkout/release root]
+
+and require in dependancies via dojo.require('dojox.presentation');
+
+see /dojox/presentation/tests/test_presentation.html for example usage, but
+basically the structure is this:
+
+presentation />
+ Slide />
+ Slide />
+ Text Outside of Part is Static
+ Part />
+ Part />
+ Action forPart/>
+ Action forPart/>
+ Slide href="remote.html" />
+ Slide />
+ Part />
+ Action forPart/>
+/presentation>
+
+NOTE: project marked experimental, and API has a planned deprecation. To
+participate in the formation of the new presentation class, visit
+the dojotoolkit forums at:
+
+http://dojotoolkit.org/forums
+
+
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);
+ }
+
+});
+
+}
diff --git a/includes/js/dojox/presentation/resources/Show.css b/includes/js/dojox/presentation/resources/Show.css
new file mode 100644
index 0000000..8610675
--- /dev/null
+++ b/includes/js/dojox/presentation/resources/Show.css
@@ -0,0 +1,100 @@
+@media screen {
+ html, body {
+ margin: 0px;
+ padding: 0px;
+ }
+
+ h1.showTitle {
+ margin:0;
+ margin-left:0;
+ padding:0;
+ font-size: 60px;
+ background:transparent;
+ border-bottom:1px solid #000;
+ }
+ p, li {
+ font-size: 17pt;
+ }
+ .dojoShowNav {
+ border-top:1px solid #ccc;
+ background: #ededed;
+ overflow: hidden;
+ position: absolute;
+ bottom: 0px;
+ left: 0px;
+ width: 100%;
+ text-align: center;
+ z-index:420;
+ padding:0;
+ margin-bttom:5px; height:34px;
+ }
+ .dojoShowNav img { cursor:pointer; }
+
+ .dojoShowSlide {
+
+ }
+ .dojoShowNav option { font:6pt; color:#333; }
+ .dojoShowNav select {
+ margin: 0px;
+ color: #999;
+ margin-top: 5px;
+ padding: 2px;
+ border: 1px solid #ccc;
+ -moz-border-radius:6pt 6pt;
+ }
+ .dojoShowHider {
+ height: 5px;
+ overflow: hidden;
+ width: 100%;
+ z-index:421;
+ }
+ .dojoShowPrint {
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ width:100%;
+ }
+ .dojoShowBody {
+ background:#fff url('../../../dijit/themes/tundra/images/testBodyBg.gif') repeat-x top left;
+ padding:10px;
+ }
+ .dojoShow {
+ width:100%; height:100%;
+ overflow:hidden;
+ }
+}
+@media print {
+ .dojoShow {
+ display: none !important;
+ }
+ .dojoShowPrint {
+ display: block !important;
+ }
+ .dojoShowPrintSlide {
+ border: 1px solid #aaa;
+ padding: 10px;
+ margin-bottom: 15px;
+ }
+ .dojoShowPrintSlide, ul {
+ page-break-inside: avoid;
+ }
+ h1 {
+ margin-top: 0;
+ page-break-after: avoid;
+ }
+}
+.dojoShowSlideTitle {
+ height: 100px;
+ width:100%;
+ display:block;
+ background-color: #ededed;
+ border-bottom:1px solid #666;
+}
+.dojoShowSlideTitle h1 {
+ margin-top: 0;
+
+}
+.dojoShowSlideBody {
+ margin: 15px;
+ background:#fff url('../../../dijit/themes/tundra/images/testBodyBg.gif') repeat-x top left;
+}
diff --git a/includes/js/dojox/presentation/resources/Show.css.commented.css b/includes/js/dojox/presentation/resources/Show.css.commented.css
new file mode 100644
index 0000000..ee205e4
--- /dev/null
+++ b/includes/js/dojox/presentation/resources/Show.css.commented.css
@@ -0,0 +1,110 @@
+@media screen {
+ html, body {
+ margin: 0px;
+ padding: 0px;
+ }
+
+ h1.showTitle {
+ margin:0;
+ margin-left:0;
+ padding:0;
+ font-size: 60px;
+ background:transparent;
+ border-bottom:1px solid #000;
+ }
+
+ p, li {
+ font-size: 17pt;
+ }
+
+ .dojoShowNav {
+ border-top:1px solid #ccc;
+ background: #ededed;
+ overflow: hidden;
+ position: absolute;
+ bottom: 0px;
+ left: 0px;
+ width: 100%;
+ text-align: center;
+ z-index:420;
+ padding:0;
+ margin-bttom:5px; height:34px;
+ }
+
+ .dojoShowNav img { cursor:pointer; }
+
+ .dojoShowSlide {
+ /* width:100%; height:100%; */
+ }
+
+ .dojoShowNav option { font:6pt; color:#333; }
+ .dojoShowNav select {
+ margin: 0px;
+ color: #999;
+ margin-top: 5px;
+ padding: 2px;
+ border: 1px solid #ccc;
+ -moz-border-radius:6pt 6pt;
+ }
+
+ .dojoShowHider {
+ height: 5px;
+ overflow: hidden;
+ width: 100%;
+ z-index:421;
+ }
+ .dojoShowPrint {
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ width:100%;
+ }
+
+ .dojoShowBody {
+ background:#fff url('../../../dijit/themes/tundra/images/testBodyBg.gif') repeat-x top left;
+ padding:10px;
+ }
+
+ .dojoShow {
+ width:100%; height:100%;
+ overflow:hidden;
+ }
+}
+
+@media print {
+ .dojoShow {
+ display: none !important;
+ }
+ .dojoShowPrint {
+ display: block !important;
+ }
+ .dojoShowPrintSlide {
+ border: 1px solid #aaa;
+ padding: 10px;
+ margin-bottom: 15px;
+ }
+ .dojoShowPrintSlide, ul {
+ page-break-inside: avoid;
+ }
+ h1 {
+ margin-top: 0;
+ page-break-after: avoid;
+ }
+}
+
+.dojoShowSlideTitle {
+ height: 100px;
+ width:100%;
+ display:block;
+ background-color: #ededed;
+ border-bottom:1px solid #666;
+}
+.dojoShowSlideTitle h1 {
+ margin-top: 0;
+ /* line-height: 100px;
+ margin-left: 30px; */
+}
+.dojoShowSlideBody {
+ margin: 15px;
+ background:#fff url('../../../dijit/themes/tundra/images/testBodyBg.gif') repeat-x top left;
+}
diff --git a/includes/js/dojox/presentation/resources/Show.html b/includes/js/dojox/presentation/resources/Show.html
new file mode 100644
index 0000000..33672db
--- /dev/null
+++ b/includes/js/dojox/presentation/resources/Show.html
@@ -0,0 +1,12 @@
+<div class="dojoShow" dojoAttachPoint="showHolder">
+ <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="onchange:_onEvent" dojoAttachPoint="select">
+ <option dojoAttachPoint="_option">Title</option>
+ </select>
+ <img dojoAttachPoint="nextNode" src="${nextIcon}" dojoAttachEvent="onclick:nextSlide">
+ </div>
+ </div>
+ <div dojoAttachPoint="containerNode"></div>
+</div>
diff --git a/includes/js/dojox/presentation/resources/Slide.html b/includes/js/dojox/presentation/resources/Slide.html
new file mode 100644
index 0000000..dc4627b
--- /dev/null
+++ b/includes/js/dojox/presentation/resources/Slide.html
@@ -0,0 +1,4 @@
+<div dojoAttachPoint="showSlide" class="dojoShowPrint dojoShowSlide">
+ <h1 class="showTitle" dojoAttachPoint="slideTitle"><span class="dojoShowSlideTitle" dojoAttachPoint="slideTitleText">${title}</span></h1>
+ <div class="dojoShowBody" dojoAttachPoint="containerNode"></div>
+</div>
diff --git a/includes/js/dojox/presentation/resources/icons/down.png b/includes/js/dojox/presentation/resources/icons/down.png
new file mode 100644
index 0000000..46bf9ba
--- /dev/null
+++ b/includes/js/dojox/presentation/resources/icons/down.png
Binary files differ
diff --git a/includes/js/dojox/presentation/resources/icons/next.png b/includes/js/dojox/presentation/resources/icons/next.png
new file mode 100644
index 0000000..16afa87
--- /dev/null
+++ b/includes/js/dojox/presentation/resources/icons/next.png
Binary files differ
diff --git a/includes/js/dojox/presentation/resources/icons/prev.png b/includes/js/dojox/presentation/resources/icons/prev.png
new file mode 100644
index 0000000..5519eb5
--- /dev/null
+++ b/includes/js/dojox/presentation/resources/icons/prev.png
Binary files differ
diff --git a/includes/js/dojox/presentation/resources/icons/up.png b/includes/js/dojox/presentation/resources/icons/up.png
new file mode 100644
index 0000000..d77816a
--- /dev/null
+++ b/includes/js/dojox/presentation/resources/icons/up.png
Binary files differ
diff --git a/includes/js/dojox/presentation/tests/_ext1.html b/includes/js/dojox/presentation/tests/_ext1.html
new file mode 100644
index 0000000..d56be0e
--- /dev/null
+++ b/includes/js/dojox/presentation/tests/_ext1.html
@@ -0,0 +1,21 @@
+ <h2>WARNING:</h2>
+
+<p style="font:14pt Arial,sans-serif; color:#666; float:left; ">
+Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean<br>
+semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin<br>
+porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.<br>
+Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.<br>
+Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae<br>
+risus.
+</p>
+
+<p style="font:8pt Arial,sans-serif; color:#666;" dojoType="dojox.presentation.Part" as="one">
+Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
+semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
+porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.<br>
+Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.<br>
+Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
+risus.
+</p>
+
+<input dojoType="dojox.presentation.Action" forSlide="one" toggle="fade">
diff --git a/includes/js/dojox/presentation/tests/test_presentation.html b/includes/js/dojox/presentation/tests/test_presentation.html
new file mode 100644
index 0000000..d9e86b5
--- /dev/null
+++ b/includes/js/dojox/presentation/tests/test_presentation.html
@@ -0,0 +1,162 @@
+<html>
+<head>
+
+ <title>dojox.presentation - Presentation Mechanism</title>
+
+ <script type="text/javascript"> djConfig = { isDebug: true, parseOnLoad: true }; </script>
+ <script type="text/javascript" src="../../../dojo/dojo.js"></script>
+ <script type="text/javascript" src="../../../dijit/form/Button.js"></script>
+
+
+ <script type="text/javascript">
+ dojo.require("dojox.presentation");
+ dojo.require("dijit._Calendar");
+ dojo.require("dijit.TitlePane");
+ dojo.require("dojo.parser");
+ dojo.require("dojo.fx");
+ dojo.require("dojo.dnd.move");
+ </script>
+
+ <style type="text/css">
+ @import "../../../dojo/resources/dojo.css";
+ @import "../../../dijit/themes/tundra/tundra.css";
+ @import "../../../dijit/tests/css/dijitTests.css";
+ @import "../resources/Show.css";
+ </style>
+
+ <script type="text/javascript">
+ var externalAnimation = null;
+ var titleCount=0;
+ var titles = [
+ "Just Kidding",
+ "The Title Will keep changing",
+ "but you can click to advance",
+ "nonthing fancy",
+ "just an example of",
+ "an external function controlling a slide."
+ ];
+ function playIt() {
+ var node = dijit.byId('animated').slideTitle;
+ console.debug(node);
+ // this is the fanciest animation chain i could thing of atm
+ tmpTitle = titles[titleCount++] || titles[0];
+
+ externalAnimation = dojo.fx.chain([
+ dojo.fadeOut({ node: node,
+ duration: 500,
+ onEnd: dojo.hitch(this,function(){
+ node.innerHTML = tmpTitle;
+ })
+ }),
+ dojo.animateProperty({
+ node: node,
+ duration: 10,
+ properties: { letterSpacing: {
+ end:-26.3, unit: 'em', start:3.2
+ }
+ }
+
+ }),
+ dojo.fadeIn({ node: node,
+ duration:300
+ }),
+ dojo.animateProperty({
+ node: node,
+ duration: 800,
+ properties: { letterSpacing: {
+ end:2.8, unit: 'em' , start:-26.0
+ }
+ }
+ })
+ ]);
+ setTimeout(function(){externalAnimation.play();},50);
+ }
+
+ function makeDraggable(node) {
+ var tmp = new dojo.dnd.Moveable(node);
+ }
+
+ </script>
+
+</head>
+<body class="tundra">
+ <div dojoType="dojox.presentation.Deck" id="testPresentation">
+ <div dojoType="dojox.presentation.Slide" id="myFirstSlide" title="Introduction">
+
+ <p>This is a brief overview of what this presentation widget is capable of.</p>
+
+ <div dojoType="dojox.presentation.Part" as="one">... it's new, and completely different, so watch close</div>
+
+ <input dojoType="dojox.presentation.Action" forSlide="one" toggle="fade" duration="3000">
+ <input dojoType="dojox.presentation.Action" forSlide="one" toggle="wipe">
+
+ </div>
+
+ <div dojoType="dojox.presentation.Slide" title="Basic Actions">
+ <p>Click, and more text will appear</p>
+
+ <div dojoType="dojox.presentation.Part" as="one">
+ <p>Lorem something something. I am text, hear me _roar_.</p>
+ </div>
+ <input dojoType="dojox.presentation.Action" forSlide="one" on="click" toggle="fade">
+
+ <div dojoType="dojox.presentation.Part" as="me">
+ I am here to make sure click-advancing is disabled on normal input type elements:
+ <ul>
+ <li><a href="#">href</a></li>
+ <li>Input: <input type="text" name="foo"></li>
+ </ul>
+
+ </div>
+ <input dojoType="dojox.presentation.Action" forslide="me" toggle="slide">
+
+
+ </div>
+ <div dojoType="dojox.presentation.Slide" title="Automatically Advance">
+
+ <p dojoType="dojox.presentation.Part" as="one">First You See me ...</p>
+ <p dojoType="dojox.presentation.Part" as="two">Then you see ME ...</p>
+ <p dojoType="dojox.presentation.Part" as="three" style="padding:20px;">oh yeah!</p>
+
+
+ <input dojoType="dojox.presentation.Action" forSlide="one" on="click" toggle="fade" delay="1500">
+ <input dojoType="dojox.presentation.Action" forSlide="two" toggle="wipe" delay="1500">
+ <input dojoType="dojox.presentation.Action" forSlide="three" toggle="wipe" delay="1500">
+
+ </div>
+ <!--
+ <div dojoType="dojox.presentation.Slide" title="Remote Slide" href="_ext1.html"></div>
+ -->
+ <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>
+ <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">
+ </div>
+
+ <div dojoType="dojox.presentation.Slide" title="Widgets in Slide" noClick="true" id="wdijit">
+ <p>There is a widget in this page:</p>
+ <p>clicking has been stopped on this page to demonstrate the usage ..</p>
+ <div dojoType="dojox.presentation.Part" as="foo" startVisible="true">
+ There _should_ be a _Calendar widget here<br>
+ <div dojoType="dijit._Calendar"></div>
+ </div>
+ <div dojoType="dijit.TitlePane" title="foobar" id="newTitlePane"
+ style="width:300px; position:absolute; right:40px; top:125px;">
+ I am a titlepane, you can do cool things with me.
+ <button onClick="makeDraggable('newTitlePane')">Make me Draggable!</button>
+ </div>
+ <div style="width:400px; position:absolute; right: 40px; bottom:40px;">
+ <p>... so I'm providing a next button: <button dojoType="dijit.form.Button" value="Next" onClick="dijit.byId('testPresentation').nextSlide();">Next</button></p>
+ </div>
+ <input type="dojox.presentation.Action" forSlide="foo" toggle="slide">
+ </div>
+
+ <div dojoType="dojox.presentation.Slide" title="The End">
+ <p>Thanks for watching!</p>
+ </div>
+ </div>
+</body>
+</html>