diff options
Diffstat (limited to 'includes/js/dojox/presentation')
| -rw-r--r-- | includes/js/dojox/presentation/README | 72 | ||||
| -rw-r--r-- | includes/js/dojox/presentation/_base.js | 557 | ||||
| -rw-r--r-- | includes/js/dojox/presentation/resources/Show.css | 100 | ||||
| -rw-r--r-- | includes/js/dojox/presentation/resources/Show.css.commented.css | 110 | ||||
| -rw-r--r-- | includes/js/dojox/presentation/resources/Show.html | 12 | ||||
| -rw-r--r-- | includes/js/dojox/presentation/resources/Slide.html | 4 | ||||
| -rw-r--r-- | includes/js/dojox/presentation/resources/icons/down.png | bin | 0 -> 469 bytes | |||
| -rw-r--r-- | includes/js/dojox/presentation/resources/icons/next.png | bin | 0 -> 470 bytes | |||
| -rw-r--r-- | includes/js/dojox/presentation/resources/icons/prev.png | bin | 0 -> 460 bytes | |||
| -rw-r--r-- | includes/js/dojox/presentation/resources/icons/up.png | bin | 0 -> 464 bytes | |||
| -rw-r--r-- | includes/js/dojox/presentation/tests/_ext1.html | 21 | ||||
| -rw-r--r-- | includes/js/dojox/presentation/tests/test_presentation.html | 162 |
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 Binary files differnew file mode 100644 index 0000000..46bf9ba --- /dev/null +++ b/includes/js/dojox/presentation/resources/icons/down.png diff --git a/includes/js/dojox/presentation/resources/icons/next.png b/includes/js/dojox/presentation/resources/icons/next.png Binary files differnew file mode 100644 index 0000000..16afa87 --- /dev/null +++ b/includes/js/dojox/presentation/resources/icons/next.png diff --git a/includes/js/dojox/presentation/resources/icons/prev.png b/includes/js/dojox/presentation/resources/icons/prev.png Binary files differnew file mode 100644 index 0000000..5519eb5 --- /dev/null +++ b/includes/js/dojox/presentation/resources/icons/prev.png diff --git a/includes/js/dojox/presentation/resources/icons/up.png b/includes/js/dojox/presentation/resources/icons/up.png Binary files differnew file mode 100644 index 0000000..d77816a --- /dev/null +++ b/includes/js/dojox/presentation/resources/icons/up.png 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> |
