diff options
Diffstat (limited to 'includes/js/dojox/widget')
102 files changed, 5267 insertions, 0 deletions
diff --git a/includes/js/dojox/widget/ColorPicker.js b/includes/js/dojox/widget/ColorPicker.js new file mode 100644 index 0000000..c180cf1 --- /dev/null +++ b/includes/js/dojox/widget/ColorPicker.js @@ -0,0 +1,284 @@ +if(!dojo._hasResource["dojox.widget.ColorPicker"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. +dojo._hasResource["dojox.widget.ColorPicker"] = true; +dojo.provide("dojox.widget.ColorPicker"); +dojo.experimental("dojox.widget.ColorPicker"); // level: prototype + +dojo.require("dijit.form._FormWidget"); +dojo.require("dojo.dnd.move"); +dojo.require("dojo.fx"); + +dojo.declare("dojox.widget.ColorPicker", + dijit.form._FormWidget, + { + // summary: a HSV color picker - like PhotoShop + // + // description: + // provides an interactive HSV ColorPicker similar to + // PhotoShop's color selction tool. Will eventually + // mixin FormWidget and be used as a suplement or a + // 'more interactive' replacement for ColorPalette + // + // example: + // + // code: + // var picker = new dojox.widget.ColorPicker({ + // // a couple of example toggles: + // animatePoint:false, + // showHsv: false, + // webSafe: false, + // showRgb: false + // }); + // + // markup: + // <div dojoType="dojox.widget.ColorPicker"></div> + // + + // showRgb: Boolean + // show/update RGB input nodes + showRgb: true, + + // showHsv: Boolean + // show/update HSV input nodes + showHsv: true, + + // showHex: Boolean + // show/update Hex value field + showHex: true, + + // webSafe: Boolean + // deprecated? or just use a toggle to show/hide that node, too? + webSafe: true, + + // animatePoint: Boolean + // toggle to use slideTo (true) or just place the cursor (false) on click + animatePoint: true, + + // slideDuration: Integer + // time in ms picker node will slide to next location (non-dragging) when animatePoint=true + slideDuration: 250, + + _underlay: dojo.moduleUrl("dojox.widget","ColorPicker/images/underlay.png"), + templateString:"<div class=\"dojoxColorPicker\">\n\t<div class=\"dojoxColorPickerBox\">\n\t\t<div dojoAttachPoint=\"cursorNode\" class=\"dojoxColorPickerPoint\"></div>\n\t\t<img dojoAttachPoint=\"colorUnderlay\" dojoAttachEvent=\"onclick: _setPoint\" class=\"dojoxColorPickerUnderlay\" src=\"${_underlay}\">\n\t</div>\n\t<div class=\"dojoxHuePicker\">\n\t\t<div dojoAttachPoint=\"hueCursorNode\" class=\"dojoxHuePickerPoint\"></div>\n\t\t<div dojoAttachPoint=\"hueNode\" class=\"dojoxHuePickerUnderlay\" dojoAttachEvent=\"onclick: _setHuePoint\"></div>\n\t</div>\n\t<div dojoAttachPoint=\"previewNode\" class=\"dojoxColorPickerPreview\"></div>\n\t<div dojoAttachPoint=\"safePreviewNode\" class=\"dojoxColorPickerWebSafePreview\"></div>\n\t<div class=\"dojoxColorPickerOptional\">\n\t\t<div class=\"dijitInline dojoxColorPickerRgb\" dojoAttachPoint=\"rgbNode\">\n\t\t\t<table>\n\t\t\t<tr><td>r</td><td><input dojoAttachPoint=\"Rval\" size=\"1\"></td></tr>\n\t\t\t<tr><td>g</td><td><input dojoAttachPoint=\"Gval\" size=\"1\"></td></tr>\n\t\t\t<tr><td>b</td><td><input dojoAttachPoint=\"Bval\" size=\"1\"></td></tr>\n\t\t\t</table>\n\t\t</div>\n\t\t<div class=\"dijitInline dojoxColorPickerHsv\" dojoAttachPoint=\"hsvNode\">\n\t\t\t<table>\n\t\t\t<tr><td>h</td><td><input dojoAttachPoint=\"Hval\"size=\"1\"> °</td></tr>\n\t\t\t<tr><td>s</td><td><input dojoAttachPoint=\"Sval\" size=\"1\"> %</td></tr>\n\t\t\t<tr><td>v</td><td><input dojoAttachPoint=\"Vval\" size=\"1\"> %</td></tr>\n\t\t\t</table>\n\t\t</div>\n\t\t<div class=\"dojoxColorPickerHex\" dojoAttachPoint=\"hexNode\">\t\n\t\t\thex: <input dojoAttachPoint=\"hexCode, focusNode\" size=\"6\" class=\"dojoxColorPickerHexCode\">\n\t\t</div>\n\t</div>\n</div>\n", + + postCreate: function(){ + // summary: As quickly as we can, set up ie6 alpha-filter support for our + // underlay. we don't do image handles (done in css), just the 'core' + // of this widget: the underlay. + if(dojo.isIE && dojo.isIE<7){ + this.colorUnderlay.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+this._underlay+"', sizingMethod='scale')"; + this.colorUnderlay.src = dojo.moduleUrl("dojo","resources/blank.gif").toString(); + } + // hide toggle-able nodes: + if (!this.showRgb){ this.rgbNode.style.display = "none"; } + if (!this.showHsv){ this.hsvNode.style.display = "none"; } + if (!this.showHex){ this.hexNode.style.display = "none"; } + if (!this.webSafe){ this.safePreviewNode.style.display = "none"; } + }, + + startup: function(){ + // summary: defer all additional calls until we're started, and our + // embeded sliders are loaded? (not implemented yet) + + // this._offset = ((dojo.marginBox(this.cursorNode).w)/2); + this._offset = 0; + + this._mover = new dojo.dnd.Moveable(this.cursorNode, { + mover: dojo.dnd.boxConstrainedMover({ t:0, l:0, w:150, h:150 }) + }); + this._hueMover = new dojo.dnd.Moveable(this.hueCursorNode, { + mover: dojo.dnd.boxConstrainedMover({ t:0, l:0, w:0, h:150 }) + }); + + // no dnd/move/move published ... use a timer: + dojo.subscribe("/dnd/move/stop",dojo.hitch(this,"_clearTimer")); + dojo.subscribe("/dnd/move/start",dojo.hitch(this,"_setTimer")); + + // ugly scaling calculator. need a XYslider badly + this._sc = (1/dojo.coords(this.colorUnderlay).w); + this._hueSc = (255/(dojo.coords(this.hueNode).h+this._offset)); + + // initial color + this._updateColor(); + + }, + + _setTimer: function(/* dojo.dnd.Mover */mover){ + this._timer = setInterval(dojo.hitch(this,"_updateColor"),45); + }, + _clearTimer: function(/* dojo.dnd.Mover */mover){ + clearInterval(this._timer); + this.onChange(this.value); + }, + + _setHue: function(/* Decimal */h){ + // summary: sets a natural color background for the + // underlay image against closest hue value (full saturation) + // h: 0..255 + + // this is not a pretty conversion: + var hue = dojo.colorFromArray(this._hsv2rgb(h,1,1,{ inputRange: 1 })).toHex(); + dojo.style(this.colorUnderlay,"backgroundColor",hue); + }, + + _updateColor: function(){ + // summary: update the previewNode color, and input values [optional] + var h = Math.round((255+(this._offset))-((dojo.style(this.hueCursorNode,"top")+this._offset)*this._hueSc)); + var s = Math.round((dojo.style(this.cursorNode,"left")*this._sc)*100); + var v = Math.round(100-(dojo.style(this.cursorNode,"top")*this._sc)*100); + + // limit hue calculations to only when it changes + if(h != this._hue){ this._setHue(h); } + + var rgb = this._hsv2rgb(h,s/100,v/100,{ inputRange: 1 }); + var hex = (dojo.colorFromArray(rgb).toHex()); + + this.previewNode.style.backgroundColor = hex; + if(this.webSafe){ this.safePreviewNode.style.backgroundColor = hex; } + if(this.showHex){ this.hexCode.value = hex; } + if(this.showRgb){ + this.Rval.value = rgb[0]; + this.Gval.value = rgb[1]; + this.Bval.value = rgb[2]; + } + if(this.showHsv){ + this.Hval.value = Math.round((h*360)/255); // convert to 0..360 + this.Sval.value = s; + this.Vval.value = v; + } + this.value=hex; + + // anytime we muck with the color, fire onChange? + if (!this._timer && !(arguments[1])){ + this.setValue(this.value); + this.onChange(this.value); + } + }, + + _setHuePoint: function(/* Event */evt){ + // summary: set the hue picker handle on relative y coordinates + if(this.animatePoint){ + dojo.fx.slideTo({ + node: this.hueCursorNode, + duration:this.slideDuration, + top: evt.layerY, + left: 0, + onEnd: dojo.hitch(this,"_updateColor") + }).play(); + }else{ + dojo.style(this.hueCursorNode,"top",(evt.layerY)+"px"); + this._updateColor(false); + } + }, + + _setPoint: function(/* Event */evt){ + // summary: set our picker point based on relative x/y coordinates + if(this.animatePoint){ + dojo.fx.slideTo({ + node: this.cursorNode, + duration:this.slideDuration, + top: evt.layerY-this._offset, + left: evt.layerX-this._offset, + onEnd: dojo.hitch(this,"_updateColor") + }).play(); + }else{ + dojo.style(this.cursorNode,"left",(evt.layerX-this._offset)+"px"); + dojo.style(this.cursorNode,"top",(evt.layerY-this._offset)+"px"); + this._updateColor(false); + } + }, + + // this ported directly from 0.4 dojo.gfx.colors.hsv, with bugs :) + // FIXME: use ttrenka's HSB ? + _hsv2rgb: function(/* int || Array */h, /* int */s, /* int */v, /* Object? */options){ + // summary + // converts an HSV value set to RGB, ranges depending on optional options object. + // patch for options by Matthew Eernisse + if (dojo.isArray(h)) { + if(s){ + options = s; + } + v = h[2] || 0; + s = h[1] || 0; + h = h[0] || 0; + } + + var opt = { + inputRange: (options && options.inputRange) ? options.inputRange : [255, 255, 255], + outputRange: (options && options.outputRange) ? options.outputRange : 255 + }; + + switch(opt.inputRange[0]) { + // 0.0-1.0 + case 1: h = h * 360; break; + // 0-100 + case 100: h = (h / 100) * 360; break; + // 0-360 + case 360: h = h; break; + // 0-255 + default: h = (h / 255) * 360; + } + if (h == 360){ h = 0;} + + // no need to alter if inputRange[1] = 1 + switch(opt.inputRange[1]){ + case 100: s /= 100; break; + case 255: s /= 255; + } + + // no need to alter if inputRange[1] = 1 + switch(opt.inputRange[2]){ + case 100: v /= 100; break; + case 255: v /= 255; + } + + var r = null; + var g = null; + var b = null; + + if (s == 0){ + // color is on black-and-white center line + // achromatic: shades of gray + r = v; + g = v; + b = v; + }else{ + // chromatic color + var hTemp = h / 60; // h is now IN [0,6] + var i = Math.floor(hTemp); // largest integer <= h + var f = hTemp - i; // fractional part of h + + var p = v * (1 - s); + var q = v * (1 - (s * f)); + var t = v * (1 - (s * (1 - f))); + + switch(i){ + case 0: r = v; g = t; b = p; break; + case 1: r = q; g = v; b = p; break; + case 2: r = p; g = v; b = t; break; + case 3: r = p; g = q; b = v; break; + case 4: r = t; g = p; b = v; break; + case 5: r = v; g = p; b = q; break; + } + } + + switch(opt.outputRange){ + case 1: + r = dojo.math.round(r, 2); + g = dojo.math.round(g, 2); + b = dojo.math.round(b, 2); + break; + case 100: + r = Math.round(r * 100); + g = Math.round(g * 100); + b = Math.round(b * 100); + break; + default: + r = Math.round(r * 255); + g = Math.round(g * 255); + b = Math.round(b * 255); + } + return [r, g, b]; + } +}); + +} diff --git a/includes/js/dojox/widget/ColorPicker/ColorPicker.css b/includes/js/dojox/widget/ColorPicker/ColorPicker.css new file mode 100644 index 0000000..3d62bc7 --- /dev/null +++ b/includes/js/dojox/widget/ColorPicker/ColorPicker.css @@ -0,0 +1,78 @@ +.dojoxColorPicker { + padding:8px; + border:1px solid #a0a0a0; + background:#ededed; + width:300px; + height:150px; + -moz-border-radius:4pt; + -webkit-border-radius:5pt; +} +.dojoxColorPickerBox { + position:relative; + width:150px; + height:150px; + margin:0; padding:0; +} +.dojoxColorPickerUnderlay { + position:absolute; + top:0; left:0; + width:150px; + height:150px; + z-index:1; + border:1px solid #a0a0a0; +} +.dojoxHuePickerUnderlay { + background:url(images/hue.png) no-repeat top center; + position:absolute; + top:0; left:0; + height:150px; + width:20px; + z-index:1; +} +.dojoxHuePicker { position:relative; top:-150px; left:157px; } +.dojoxHuePickerPoint { + position:absolute; + top:0; left:0; + width:20px; + height:8px; + z-index:3; + background-color:#666; + cursor:pointer; + background:url(images/hueHandle.png) no-repeat center center; +} +.dojoxColorPickerPoint { + position:absolute; + width:10px; + height:10px; + background: url(images/pickerPointer.png) no-repeat center center; + border:0; + z-index:3; + cursor:pointer; +} +.dojoxColorPickerPreview { + display:block; + width:45px; + height:45px; + border:1px solid #333; + background-color:#fff; + position:relative; + top:-150px; + left: 185px; +} +.dojoxColorPickerWebSafePreview { + display:block; + width:25px; + height:25px; + position:relative; + top:-197px; + left:240px; + border:1px solid #333; +} +.dojoxColorPickerOptional { + position:relative; + top:-170px; + left:185px; +} +.dojoxColorPickerRgb { position:absolute; top:0; left:0; } +.dojoxColorPickerHsv { position:absolute; top:0; left:50px; } +.dojoxColorPickerHex { position:absolute; top:73px; left:2px; } diff --git a/includes/js/dojox/widget/ColorPicker/ColorPicker.css.commented.css b/includes/js/dojox/widget/ColorPicker/ColorPicker.css.commented.css new file mode 100644 index 0000000..789a9dd --- /dev/null +++ b/includes/js/dojox/widget/ColorPicker/ColorPicker.css.commented.css @@ -0,0 +1,89 @@ +.dojoxColorPicker { + padding:8px; + border:1px solid #a0a0a0; + background:#ededed; + width:300px; + height:150px; + -moz-border-radius:4pt; + -webkit-border-radius:5pt; +} + + +.dojoxColorPickerBox { + position:relative; + width:150px; + height:150px; + margin:0; padding:0; +} + +.dojoxColorPickerUnderlay { + position:absolute; + top:0; left:0; + width:150px; + height:150px; + z-index:1; + border:1px solid #a0a0a0; +} + +.dojoxHuePickerUnderlay { + background:url(images/hue.png) no-repeat top center; + position:absolute; + top:0; left:0; + height:150px; + width:20px; + z-index:1; +} + +.dojoxHuePicker { position:relative; top:-150px; left:157px; } + +.dojoxHuePickerPoint { + position:absolute; + top:0; left:0; + width:20px; + height:8px; + z-index:3; + background-color:#666; + cursor:pointer; + background:url(images/hueHandle.png) no-repeat center center; +} + + +.dojoxColorPickerPoint { + position:absolute; + width:10px; + height:10px; + background: url(images/pickerPointer.png) no-repeat center center; + border:0; + z-index:3; + cursor:pointer; +} + +.dojoxColorPickerPreview { + display:block; + width:45px; + height:45px; + border:1px solid #333; + background-color:#fff; + position:relative; + top:-150px; + left: 185px; +} +.dojoxColorPickerWebSafePreview { + display:block; + width:25px; + height:25px; + position:relative; + top:-197px; + left:240px; + border:1px solid #333; +} + +.dojoxColorPickerOptional { + position:relative; + top:-170px; + left:185px; +} + +.dojoxColorPickerRgb { position:absolute; top:0; left:0; } +.dojoxColorPickerHsv { position:absolute; top:0; left:50px; } +.dojoxColorPickerHex { position:absolute; top:73px; left:2px; } diff --git a/includes/js/dojox/widget/ColorPicker/ColorPicker.html b/includes/js/dojox/widget/ColorPicker/ColorPicker.html new file mode 100644 index 0000000..de317ba --- /dev/null +++ b/includes/js/dojox/widget/ColorPicker/ColorPicker.html @@ -0,0 +1,31 @@ +<div class="dojoxColorPicker"> + <div class="dojoxColorPickerBox"> + <div dojoAttachPoint="cursorNode" class="dojoxColorPickerPoint"></div> + <img dojoAttachPoint="colorUnderlay" dojoAttachEvent="onclick: _setPoint" class="dojoxColorPickerUnderlay" src="${_underlay}"> + </div> + <div class="dojoxHuePicker"> + <div dojoAttachPoint="hueCursorNode" class="dojoxHuePickerPoint"></div> + <div dojoAttachPoint="hueNode" class="dojoxHuePickerUnderlay" dojoAttachEvent="onclick: _setHuePoint"></div> + </div> + <div dojoAttachPoint="previewNode" class="dojoxColorPickerPreview"></div> + <div dojoAttachPoint="safePreviewNode" class="dojoxColorPickerWebSafePreview"></div> + <div class="dojoxColorPickerOptional"> + <div class="dijitInline dojoxColorPickerRgb" dojoAttachPoint="rgbNode"> + <table> + <tr><td>r</td><td><input dojoAttachPoint="Rval" size="1"></td></tr> + <tr><td>g</td><td><input dojoAttachPoint="Gval" size="1"></td></tr> + <tr><td>b</td><td><input dojoAttachPoint="Bval" size="1"></td></tr> + </table> + </div> + <div class="dijitInline dojoxColorPickerHsv" dojoAttachPoint="hsvNode"> + <table> + <tr><td>h</td><td><input dojoAttachPoint="Hval"size="1"> °</td></tr> + <tr><td>s</td><td><input dojoAttachPoint="Sval" size="1"> %</td></tr> + <tr><td>v</td><td><input dojoAttachPoint="Vval" size="1"> %</td></tr> + </table> + </div> + <div class="dojoxColorPickerHex" dojoAttachPoint="hexNode"> + hex: <input dojoAttachPoint="hexCode, focusNode" size="6" class="dojoxColorPickerHexCode"> + </div> + </div> +</div> diff --git a/includes/js/dojox/widget/ColorPicker/images/hue.png b/includes/js/dojox/widget/ColorPicker/images/hue.png Binary files differnew file mode 100644 index 0000000..2746235 --- /dev/null +++ b/includes/js/dojox/widget/ColorPicker/images/hue.png diff --git a/includes/js/dojox/widget/ColorPicker/images/hueHandle.png b/includes/js/dojox/widget/ColorPicker/images/hueHandle.png Binary files differnew file mode 100644 index 0000000..c7b56e8 --- /dev/null +++ b/includes/js/dojox/widget/ColorPicker/images/hueHandle.png diff --git a/includes/js/dojox/widget/ColorPicker/images/pickerPointer.png b/includes/js/dojox/widget/ColorPicker/images/pickerPointer.png Binary files differnew file mode 100644 index 0000000..28a3c81 --- /dev/null +++ b/includes/js/dojox/widget/ColorPicker/images/pickerPointer.png diff --git a/includes/js/dojox/widget/ColorPicker/images/underlay.png b/includes/js/dojox/widget/ColorPicker/images/underlay.png Binary files differnew file mode 100644 index 0000000..0f5eb7c --- /dev/null +++ b/includes/js/dojox/widget/ColorPicker/images/underlay.png diff --git a/includes/js/dojox/widget/FileInput.js b/includes/js/dojox/widget/FileInput.js new file mode 100644 index 0000000..40cf58c --- /dev/null +++ b/includes/js/dojox/widget/FileInput.js @@ -0,0 +1,75 @@ +if(!dojo._hasResource["dojox.widget.FileInput"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. +dojo._hasResource["dojox.widget.FileInput"] = true; +dojo.provide("dojox.widget.FileInput"); +dojo.experimental("dojox.widget.FileInput"); + +dojo.require("dijit.form._FormWidget"); +dojo.require("dijit._Templated"); + +dojo.declare("dojox.widget.FileInput", + dijit.form._FormWidget, + { + // summary: A styled input type="file" + // + // description: A input type="file" form widget, with a button for uploading to be styled via css, + // a cancel button to clear selection, and FormWidget mixin to provide standard dijit.form.Form + // support (FIXME: maybe not fully implemented) + + // label: String + // the title text of the "Browse" button + label: "Browse ...", + + // cancelText: String + // the title of the "Cancel" button + cancelText: "Cancel", + + // name: String + // ugh, this should be pulled from this.domNode + name: "uploadFile", + + templateString:"<div class=\"dijitFileInput\">\n\t<input id=\"${id}\" class=\"dijitFileInputReal\" type=\"file\" dojoAttachPoint=\"fileInput\" name=\"${name}\" />\n\t<div class=\"dijitFakeInput\">\n\t\t<input class=\"dijitFileInputVisible\" type=\"text\" dojoAttachPoint=\"focusNode, inputNode\" />\n\t\t<div class=\"dijitInline dijitFileInputText\" dojoAttachPoint=\"titleNode\">${label}</div>\n\t\t<div class=\"dijitInline dijitFileInputButton\" dojoAttachPoint=\"cancelNode\" \n\t\t\tdojoAttachEvent=\"onclick:_onClick\">${cancelText}</div>\n\t</div>\n</div>\n", + + startup: function(){ + // summary: listen for changes on our real file input + this._listener = dojo.connect(this.fileInput,"onchange",this,"_matchValue"); + this._keyListener = dojo.connect(this.fileInput,"onkeyup",this,"_matchValue"); + }, + + _matchValue: function(){ + // summary: set the content of the upper input based on the semi-hidden file input + this.inputNode.value = this.fileInput.value; + if(this.inputNode.value){ + this.cancelNode.style.visibility = "visible"; + dojo.fadeIn({ node: this.cancelNode, duration:275 }).play(); + } + }, + + setLabel: function(/* String */label,/* String? */cssClass){ + // summary: method to allow use to change button label + this.titleNode.innerHTML = label; + }, + + _onClick: function(/* Event */e){ + // summary: on click of cancel button, since we can't clear the input because of + // security reasons, we destroy it, and add a new one in it's place. + dojo.disconnect(this._listener); + dojo.disconnect(this._keyListener); + this.domNode.removeChild(this.fileInput); + dojo.fadeOut({ node: this.cancelNode, duration:275 }).play(); + + // should we use cloneNode()? can we? + this.fileInput = document.createElement('input'); + this.fileInput.setAttribute("type","file"); + this.fileInput.setAttribute("id",this.id); + this.fileInput.setAttribute("name",this.name); + dojo.addClass(this.fileInput,"dijitFileInputReal"); + this.domNode.appendChild(this.fileInput); + + this._keyListener = dojo.connect(this.fileInput,"onkeyup",this,"_matchValue"); + this._listener = dojo.connect(this.fileInput,"onchange",this,"_matchValue"); + this.inputNode.value = ""; + } + +}); + +} diff --git a/includes/js/dojox/widget/FileInput/FileInput.css b/includes/js/dojox/widget/FileInput/FileInput.css new file mode 100644 index 0000000..2d99c74 --- /dev/null +++ b/includes/js/dojox/widget/FileInput/FileInput.css @@ -0,0 +1,70 @@ +.dijitFileInput { + position:relative; + height:1.3em; + padding:2px; +} +.dijitFileInputReal { + position:absolute; + z-index:2; + opacity:0; + filter:alpha(opacity:0); +} +.dijitFileInputRealBlind { + right:0; +} +.dijitFileInputReal:hover { cursor:pointer; } +.dijitFileInputButton, +.dijitFileInputText { + border:1px solid #333; + padding:2px 12px 2px 12px; + cursor:pointer; +} +.dijitFileInputButton { + z-index:3; + visibility:hidden; +} +.dijitFakeInput { position:absolute; top:0; left:0; z-index:1; } +.dijitProgressOverlay { + display:none; + width:250px; + height:1em; + position:absolute; + top:0; left:0; + border:1px solid #333; + background:#cad2de url('../../../dijit/themes/tundra/images/dijitProgressBarAnim.gif') repeat-x top left; + padding:2px; +} +.tundra .dijitProgressOverlay { + border:1px solid #84a3d1; + background-color:#cad2de; +} +.tundra .dijitFakeInput input { + font-size: inherit; + background:#fff url("../../../dijit/themes/tundra/images/validationInputBg.png") repeat-x top left; + border:1px solid #9b9b9b; + line-height: normal; + padding: 0.2em 0.3em; +} +.tundra .dijitFileInputButton, +.tundra .dijitFileInputText { + border:1px solid #9b9b9b; + padding:2px 12px 2px 12px; + background:#e9e9e9 url("../../../dijit/themes/tundra/images/buttonEnabled.png") repeat-x top; +} +.soria .dijitProgressOverlay { + border:1px solid #333; + background-color:#cad2de; +} +.soria .dijitFakeInput input { + border:1px solid #333; + background:#fff url("../../../dijit/themes/soria/images/gradientInverseTopBg.png") repeat-x top left; + line-height:normal; + background-position:0 -30px; + padding:0.2em 0.3em; +} +.soria .dijitFileInputButton, +.soria .dijitFileInputText { + border:1px solid #333; + padding:2px 12px 2px 12px; + background:#b7cdee url('../../../dijit/themes/soria/images/gradientTopBg.png') repeat-x; +} diff --git a/includes/js/dojox/widget/FileInput/FileInput.css.commented.css b/includes/js/dojox/widget/FileInput/FileInput.css.commented.css new file mode 100644 index 0000000..162133d --- /dev/null +++ b/includes/js/dojox/widget/FileInput/FileInput.css.commented.css @@ -0,0 +1,79 @@ +.dijitFileInput { + position:relative; + height:1.3em; + padding:2px; +} + +.dijitFileInputReal { + position:absolute; + z-index:2; + opacity:0; + filter:alpha(opacity:0); +} +.dijitFileInputRealBlind { + right:0; +} +.dijitFileInputReal:hover { cursor:pointer; } + +.dijitFileInputButton, +.dijitFileInputText { + border:1px solid #333; + padding:2px 12px 2px 12px; + cursor:pointer; +} + +.dijitFileInputButton { + z-index:3; + visibility:hidden; +} +.dijitFakeInput { position:absolute; top:0; left:0; z-index:1; } + +.dijitProgressOverlay { + display:none; + width:250px; + height:1em; + position:absolute; + top:0; left:0; + border:1px solid #333; + background:#cad2de url('../../../dijit/themes/tundra/images/dijitProgressBarAnim.gif') repeat-x top left; + padding:2px; +} + +/* tundra */ +.tundra .dijitProgressOverlay { + border:1px solid #84a3d1; + background-color:#cad2de; +} +.tundra .dijitFakeInput input { + font-size: inherit; + background:#fff url("../../../dijit/themes/tundra/images/validationInputBg.png") repeat-x top left; + border:1px solid #9b9b9b; + line-height: normal; + padding: 0.2em 0.3em; +} +.tundra .dijitFileInputButton, +.tundra .dijitFileInputText { + border:1px solid #9b9b9b; + padding:2px 12px 2px 12px; /* .3em .4em .2em .4em; */ + background:#e9e9e9 url("../../../dijit/themes/tundra/images/buttonEnabled.png") repeat-x top; +} + +/* Soria */ +.soria .dijitProgressOverlay { + border:1px solid #333; + background-color:#cad2de; +} + +.soria .dijitFakeInput input { + border:1px solid #333; + background:#fff url("../../../dijit/themes/soria/images/gradientInverseTopBg.png") repeat-x top left; + line-height:normal; + background-position:0 -30px; + padding:0.2em 0.3em; +} +.soria .dijitFileInputButton, +.soria .dijitFileInputText { + border:1px solid #333; + padding:2px 12px 2px 12px; + background:#b7cdee url('../../../dijit/themes/soria/images/gradientTopBg.png') repeat-x; +} diff --git a/includes/js/dojox/widget/FileInput/FileInput.html b/includes/js/dojox/widget/FileInput/FileInput.html new file mode 100644 index 0000000..41401b7 --- /dev/null +++ b/includes/js/dojox/widget/FileInput/FileInput.html @@ -0,0 +1,9 @@ +<div class="dijitFileInput"> + <input id="${id}" class="dijitFileInputReal" type="file" dojoAttachPoint="fileInput" name="${name}" /> + <div class="dijitFakeInput"> + <input class="dijitFileInputVisible" type="text" dojoAttachPoint="focusNode, inputNode" /> + <div class="dijitInline dijitFileInputText" dojoAttachPoint="titleNode">${label}</div> + <div class="dijitInline dijitFileInputButton" dojoAttachPoint="cancelNode" + dojoAttachEvent="onclick:_onClick">${cancelText}</div> + </div> +</div> diff --git a/includes/js/dojox/widget/FileInput/FileInputAuto.html b/includes/js/dojox/widget/FileInput/FileInputAuto.html new file mode 100644 index 0000000..f3c6216 --- /dev/null +++ b/includes/js/dojox/widget/FileInput/FileInputAuto.html @@ -0,0 +1,9 @@ +<div class="dijitFileInput"> + <input id="${id}" name="${name}" class="dijitFileInputReal" type="file" dojoAttachPoint="fileInput" /> + <div class="dijitFakeInput" dojoAttachPoint="fakeNodeHolder"> + <input class="dijitFileInputVisible" type="text" dojoAttachPoint="focusNode, inputNode" /> + <div class="dijitInline dijitFileInputText" dojoAttachPoint="titleNode">${label}</div> + <div class="dijitInline dijitFileInputButton" dojoAttachPoint="cancelNode" dojoAttachEvent="onclick:_onClick">${cancelText}</div> + </div> + <div class="dijitProgressOverlay" dojoAttachPoint="overlay"> </div> +</div> diff --git a/includes/js/dojox/widget/FileInput/ReceiveFile.php b/includes/js/dojox/widget/FileInput/ReceiveFile.php new file mode 100644 index 0000000..aca541f --- /dev/null +++ b/includes/js/dojox/widget/FileInput/ReceiveFile.php @@ -0,0 +1,37 @@ +<?php + +// THIS IS AN EXAMPLE +// you will obviously need to do more server side work than I am doing here to check and move your upload. +// API is up for discussion, jump on http://dojotoolkit.org/forums + +// JSON.php is available in dojo svn checkout +require("../../../dojo/tests/resources/JSON.php"); +$json = new Services_JSON(); + +// fake delay +sleep(3); +$name = empty($_REQUEST['name'])? "default" : $_REQUEST['name']; +if(is_array($_FILES)){ + $ar = array( + // lets just pass lots of stuff back and see what we find. + // the _FILES aren't coming through in IE6 (maybe 7) + 'status' => "success", + 'name' => $name, + 'request' => $_REQUEST, + 'postvars' => $_POST, + 'details' => $_FILES, + // and some static subarray just to see + 'foo' => array('foo'=>"bar") + ); + +}else{ + $ar = array( + 'status' => "failed", + 'details' => "" + ); +} + +// yeah, seems you have to wrap iframeIO stuff in textareas? +$foo = $json->encode($ar); +?> +<textarea><?php print $foo; ?></textarea> diff --git a/includes/js/dojox/widget/FileInputAuto.js b/includes/js/dojox/widget/FileInputAuto.js new file mode 100644 index 0000000..1035531 --- /dev/null +++ b/includes/js/dojox/widget/FileInputAuto.js @@ -0,0 +1,185 @@ +if(!dojo._hasResource["dojox.widget.FileInputAuto"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. +dojo._hasResource["dojox.widget.FileInputAuto"] = true; +dojo.provide("dojox.widget.FileInputAuto"); + +dojo.require("dojox.widget.FileInput"); +dojo.require("dojo.io.iframe"); + +dojo.declare("dojox.widget.FileInputAuto", + dojox.widget.FileInput, + { + // summary: An extension on dojox.widget.FileInput providing background upload progress + // + // description: An extended version of FileInput - when the user focuses away from the input + // the selected file is posted via dojo.io.iframe to the url. example implementation + // comes with PHP solution for handling upload, and returning required data. + // + // notes: the return data from the io.iframe is used to populate the input element with + // data regarding the results. it will be a JSON object, like: + // + // results = { size: "1024", filename: "file.txt" } + // + // all the parameters allowed to dojox.widget.FileInput apply + + // url: String + // the URL where our background FileUpload will be sent + url: "", + + // blurDelay: Integer + // time in ms before an un-focused widget will wait before uploading the file to the url="" specified + // default: 2 seconds + blurDelay: 2000, + + // duration: Integer + // The time in ms to use as the generic timing mechanism for the animations + // set to 1 or 0 for "immediate respose" + duration: 500, + + // uploadMessage: String + // + // FIXME: i18n somehow? + uploadMessage: "Uploading ...", + + _sent: false, + + // small template changes, new attachpoint: overlay + templateString:"<div class=\"dijitFileInput\">\n\t<input id=\"${id}\" name=\"${name}\" class=\"dijitFileInputReal\" type=\"file\" dojoAttachPoint=\"fileInput\" />\n\t<div class=\"dijitFakeInput\" dojoAttachPoint=\"fakeNodeHolder\">\n\t\t<input class=\"dijitFileInputVisible\" type=\"text\" dojoAttachPoint=\"focusNode, inputNode\" />\n\t\t<div class=\"dijitInline dijitFileInputText\" dojoAttachPoint=\"titleNode\">${label}</div>\n\t\t<div class=\"dijitInline dijitFileInputButton\" dojoAttachPoint=\"cancelNode\" dojoAttachEvent=\"onclick:_onClick\">${cancelText}</div>\n\t</div>\n\t<div class=\"dijitProgressOverlay\" dojoAttachPoint=\"overlay\"> </div>\n</div>\n", + + startup: function(){ + // summary: add our extra blur listeners + this._blurListener = dojo.connect(this.fileInput,"onblur",this,"_onBlur"); + this._focusListener = dojo.connect(this.fileInput,"onfocus",this,"_onFocus"); + this.inherited("startup",arguments); + }, + + _onFocus: function(){ + // summary: clear the upload timer + if(this._blurTimer){ clearTimeout(this._blurTimer); } + }, + + _onBlur: function(){ + // summary: start the upload timer + if(this._blurTimer){ clearTimeout(this._blurTimer); } + if(!this._sent){ + this._blurTimer = setTimeout(dojo.hitch(this,"_sendFile"),this.blurDelay); + } + }, + + + setMessage: function(/*String*/title){ + // summary: set the text of the progressbar + + // FIXME: this throws errors in IE?!?!?!? egads. + if(!dojo.isIE){ this.overlay.innerHTML = title; } + }, + + _sendFile: function(/* Event */e){ + // summary: triggers the chain of events needed to upload a file in the background. + if(!this.fileInput.value || this._sent){ return; } + + dojo.style(this.fakeNodeHolder,"display","none"); + dojo.style(this.overlay,"opacity","0"); + dojo.style(this.overlay,"display","block"); + + this.setMessage(this.uploadMessage); + + dojo.fadeIn({ node: this.overlay, duration:this.duration }).play(); + + var _newForm; + if(dojo.isIE){ + // just to reiterate, IE is a steaming pile of code. + _newForm = document.createElement('<form enctype="multipart/form-data" method="post">'); + _newForm.encoding = "multipart/form-data"; + + }else{ + // this is how all other sane browsers do it + _newForm = document.createElement('form'); + _newForm.setAttribute("enctype","multipart/form-data"); + } + _newForm.appendChild(this.fileInput); + dojo.body().appendChild(_newForm); + + dojo.io.iframe.send({ + url: this.url+"?name="+this.name, + form: _newForm, + handleAs: "json", + handle: dojo.hitch(this,"_handleSend") + }); + }, + + _handleSend: function(data,ioArgs){ + // summary: The callback to toggle the progressbar, and fire the user-defined callback + if(!dojo.isIE){ + // otherwise, this throws errors in ie? FIXME: + this.overlay.innerHTML = ""; + } + + this._sent = true; + dojo.style(this.overlay,"opacity","0"); + dojo.style(this.overlay,"border","none"); + dojo.style(this.overlay,"background","none"); + + this.overlay.style.backgroundImage = "none"; + this.fileInput.style.display = "none"; + this.fakeNodeHolder.style.display = "none"; + dojo.fadeIn({ node:this.overlay, duration:this.duration }).play(250); + + dojo.disconnect(this._blurListener); + dojo.disconnect(this._focusListener); + + this.onComplete(data,ioArgs,this); + }, + + _onClick: function(e){ + // summary: accomodate our extra focusListeners + if(this._blurTimer){ clearTimeout(this._blurTimer); } + + dojo.disconnect(this._blurListener); + dojo.disconnect(this._focusListener); + + this.inherited("_onClick",arguments); + + this._blurListener = dojo.connect(this.fileInput,"onblur",this,"_onBlur"); + this._focusListener = dojo.connect(this.fileInput,"onfocus",this,"_onFocus"); + }, + + onComplete: function(data,ioArgs,widgetRef){ + // summary: stub function fired when an upload has finished. + // data: the raw data found in the first [TEXTAREA] tag of the post url + // ioArgs: the dojo.Deferred data being passed from the handle: callback + // widgetRef: this widget pointer, so you can set this.overlay to a completed/error message easily + } +}); + +dojo.declare("dojox.widget.FileInputBlind", + dojox.widget.FileInputAuto, + { + // summary: An extended version of dojox.widget.FileInputAuto + // that does not display an input node, but rather only a button + // and otherwise behaves just like FileInputAuto + + startup: function(){ + // summary: hide our fileInput input field + this.inherited("startup",arguments); + this._off = dojo.style(this.inputNode,"width"); + this.inputNode.style.display = "none"; + this._fixPosition(); + }, + + _fixPosition: function(){ + // summary: in this case, set the button under where the visible button is + if(dojo.isIE){ + dojo.style(this.fileInput,"width","1px"); + }else{ + dojo.style(this.fileInput,"left","-"+(this._off)+"px"); + } + }, + + _onClick: function(e){ + // summary: onclick, we need to reposition our newly created input type="file" + this.inherited("_onClick",arguments); + this._fixPosition(); + } +}); + +} diff --git a/includes/js/dojox/widget/FisheyeList.js b/includes/js/dojox/widget/FisheyeList.js new file mode 100644 index 0000000..f06d913 --- /dev/null +++ b/includes/js/dojox/widget/FisheyeList.js @@ -0,0 +1,708 @@ +if(!dojo._hasResource["dojox.widget.FisheyeList"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. +dojo._hasResource["dojox.widget.FisheyeList"] = true; +dojo.provide("dojox.widget.FisheyeList"); + +dojo.require("dijit._Widget"); +dojo.require("dijit._Templated"); +dojo.require("dijit._Container"); + +dojo.declare("dojox.widget.FisheyeList", [dijit._Widget, dijit._Templated, dijit._Container], { + // summary: + // Menu similar to the fish eye menu on the Mac OS + // example: + // | <div dojoType="FisheyeList" + // | itemWidth="40" itemHeight="40" + // | itemMaxWidth="150" itemMaxHeight="150" + // | orientation="horizontal" + // | effectUnits="2" + // | itemPadding="10" + // | attachEdge="center" + // | labelEdge="bottom"> + // | + // | <div dojoType="FisheyeListItem" + // | id="item1" + // | onclick="alert('click on' + this.label + '(from widget id ' + this.widgetId + ')!');" + // | label="Item 1" + // | iconSrc="images/fisheye_1.png"> + // | </div> + // | ... + // | </div> + // + constructor: function(){ + // + // TODO + // fix really long labels in vertical mode + // + + this.pos = {'x': -1, 'y': -1}; // current cursor position, relative to the grid + + // for conservative trigger mode, when triggered, timerScale is gradually increased from 0 to 1 + this.timerScale = 1.0; + + }, + + EDGE: { + CENTER: 0, + LEFT: 1, + RIGHT: 2, + TOP: 3, + BOTTOM: 4 + }, + + templateString: '<div class="dojoxFisheyeListBar" dojoAttachPoint="containerNode"></div>', + + snarfChildDomOutput: true, + + // itemWidth: Integer + // width of menu item (in pixels) in it's dormant state (when the mouse is far away) + itemWidth: 40, + + // itemHeight: Integer + // height of menu item (in pixels) in it's dormant state (when the mouse is far away) + itemHeight: 40, + + // itemMaxWidth: Integer + // width of menu item (in pixels) in it's fully enlarged state (when the mouse is directly over it) + itemMaxWidth: 150, + + // itemMaxHeight: Integer + // height of menu item (in pixels) in it's fully enlarged state (when the mouse is directly over it) + itemMaxHeight: 150, + + imgNode: null, + + // orientation: String + // orientation of the menu, either "horizontal" or "vertical" + orientation: 'horizontal', + + // isFixed: Boolean + // toggle to enable additional listener (window scroll) if FisheyeList is in a fixed postion + isFixed: false, + + // conservativeTrigger: Boolean + // if true, don't start enlarging menu items until mouse is over an image; + // if false, start enlarging menu items as the mouse moves near them. + conservativeTrigger: false, + + // effectUnits: Number + // controls how much reaction the menu makes, relative to the distance of the mouse from the menu + effectUnits: 2, + + // itemPadding: Integer + // padding (in pixels) betweeen each menu item + itemPadding: 10, + + // attachEdge: String + // controls the border that the menu items don't expand past; + // for example, if set to "top", then the menu items will drop downwards as they expand. + // values + // "center", "left", "right", "top", "bottom". + attachEdge: 'center', + + // labelEdge: String + // controls were the labels show up in relation to the menu item icons + // values + // "center", "left", "right", "top", "bottom". + labelEdge: 'bottom', + + postCreate: function(){ + var e = this.EDGE; + dojo.setSelectable(this.domNode, false); + + var isHorizontal = this.isHorizontal = (this.orientation == 'horizontal'); + this.selectedNode = -1; + + this.isOver = false; + this.hitX1 = -1; + this.hitY1 = -1; + this.hitX2 = -1; + this.hitY2 = -1; + + // + // only some edges make sense... + // + this.anchorEdge = this._toEdge(this.attachEdge, e.CENTER); + this.labelEdge = this._toEdge(this.labelEdge, e.TOP); + + if(this.labelEdge == e.CENTER){ this.labelEdge = e.TOP; } + + if(isHorizontal){ + if(this.anchorEdge == e.LEFT){ this.anchorEdge = e.CENTER; } + if(this.anchorEdge == e.RIGHT){ this.anchorEdge = e.CENTER; } + if(this.labelEdge == e.LEFT){ this.labelEdge = e.TOP; } + if(this.labelEdge == e.RIGHT){ this.labelEdge = e.TOP; } + }else{ + if(this.anchorEdge == e.TOP){ this.anchorEdge = e.CENTER; } + if(this.anchorEdge == e.BOTTOM){ this.anchorEdge = e.CENTER; } + if(this.labelEdge == e.TOP){ this.labelEdge = e.LEFT; } + if(this.labelEdge == e.BOTTOM){ this.labelEdge = e.LEFT; } + } + + // + // figure out the proximity size + // + var effectUnits = this.effectUnits; + this.proximityLeft = this.itemWidth * (effectUnits - 0.5); + this.proximityRight = this.itemWidth * (effectUnits - 0.5); + this.proximityTop = this.itemHeight * (effectUnits - 0.5); + this.proximityBottom = this.itemHeight * (effectUnits - 0.5); + + if(this.anchorEdge == e.LEFT){ + this.proximityLeft = 0; + } + if(this.anchorEdge == e.RIGHT){ + this.proximityRight = 0; + } + if(this.anchorEdge == e.TOP){ + this.proximityTop = 0; + } + if(this.anchorEdge == e.BOTTOM){ + this.proximityBottom = 0; + } + if(this.anchorEdge == e.CENTER){ + this.proximityLeft /= 2; + this.proximityRight /= 2; + this.proximityTop /= 2; + this.proximityBottom /= 2; + } + }, + + startup: function(){ + // summary: create our connections and setup our FisheyeList + this.children = this.getChildren(); + //original postCreate() --tk + this._initializePositioning(); + + // + // in liberal trigger mode, activate menu whenever mouse is close + // + if(!this.conservativeTrigger){ + this._onMouseMoveHandle = dojo.connect(document.documentElement, "onmousemove", this, "_onMouseMove"); + } + if (this.isFixed){ + this._onScrollHandle = dojo.connect(document,"onscroll",this,"_onScroll"); + } + + // Deactivate the menu if mouse is moved off screen (doesn't work for FF?) + this._onMouseOutHandle = dojo.connect(document.documentElement, "onmouseout", this, "_onBodyOut"); + this._addChildHandle = dojo.connect(this, "addChild", this, "_initializePositioning"); + this._onResizeHandle = dojo.connect(window,"onresize", this, "_initializePositioning"); + }, + + _initializePositioning: function(){ + this.itemCount = this.children.length; + + this.barWidth = (this.isHorizontal ? this.itemCount : 1) * this.itemWidth; + this.barHeight = (this.isHorizontal ? 1 : this.itemCount) * this.itemHeight; + + this.totalWidth = this.proximityLeft + this.proximityRight + this.barWidth; + this.totalHeight = this.proximityTop + this.proximityBottom + this.barHeight; + + // + // calculate effect ranges for each item + // + + for(var i=0; i<this.children.length; i++){ + + this.children[i].posX = this.itemWidth * (this.isHorizontal ? i : 0); + this.children[i].posY = this.itemHeight * (this.isHorizontal ? 0 : i); + + this.children[i].cenX = this.children[i].posX + (this.itemWidth / 2); + this.children[i].cenY = this.children[i].posY + (this.itemHeight / 2); + + var isz = this.isHorizontal ? this.itemWidth : this.itemHeight; + var r = this.effectUnits * isz; + var c = this.isHorizontal ? this.children[i].cenX : this.children[i].cenY; + var lhs = this.isHorizontal ? this.proximityLeft : this.proximityTop; + var rhs = this.isHorizontal ? this.proximityRight : this.proximityBottom; + var siz = this.isHorizontal ? this.barWidth : this.barHeight; + + var range_lhs = r; + var range_rhs = r; + + if(range_lhs > c+lhs){ range_lhs = c+lhs; } + if(range_rhs > (siz-c+rhs)){ range_rhs = siz-c+rhs; } + + this.children[i].effectRangeLeft = range_lhs / isz; + this.children[i].effectRangeRght = range_rhs / isz; + + //dojo.debug('effect range for '+i+' is '+range_lhs+'/'+range_rhs); + } + + // + // create the bar + // + this.domNode.style.width = this.barWidth + 'px'; + this.domNode.style.height = this.barHeight + 'px'; + + // + // position the items + // + for(var i=0; i<this.children.length; i++){ + var itm = this.children[i]; + var elm = itm.domNode; + elm.style.left = itm.posX + 'px'; + elm.style.top = itm.posY + 'px'; + elm.style.width = this.itemWidth + 'px'; + elm.style.height = this.itemHeight + 'px'; + + itm.imgNode.style.left = this.itemPadding+'%'; + itm.imgNode.style.top = this.itemPadding+'%'; + itm.imgNode.style.width = (100 - 2 * this.itemPadding) + '%'; + itm.imgNode.style.height = (100 - 2 * this.itemPadding) + '%'; + } + + // + // calc the grid + // + this._calcHitGrid(); + }, + + _overElement: function(/* DomNode|String */node, /* Event */e){ + // summary: + // Returns whether the mouse is over the passed element. + // Node: Must must be display:block (ie, not a <span>) + node = dojo.byId(node); + var mouse = {x: e.pageX, y: e.pageY}; + var bb = dojo._getBorderBox(node); + var absolute = dojo.coords(node, true); + var top = absolute.y; + var bottom = top + bb.h; + var left = absolute.x; + var right = left + bb.w; + + return (mouse.x >= left + && mouse.x <= right + && mouse.y >= top + && mouse.y <= bottom + ); // boolean + }, + + _onBodyOut: function(/*Event*/ e){ + // clicking over an object inside of body causes this event to fire; ignore that case + if( this._overElement(dojo.body(), e) ){ + return; + } + this._setDormant(e); + }, + + _setDormant: function(/*Event*/ e){ + // summary: called when mouse moves out of menu's range + + if(!this.isOver){ return; } // already dormant? + this.isOver = false; + + if(this.conservativeTrigger){ + // user can't re-trigger the menu expansion + // until he mouses over a icon again + dojo.disconnect(this._onMouseMoveHandle); + } + this._onGridMouseMove(-1, -1); + }, + + _setActive: function(/*Event*/ e){ + // summary: called when mouse is moved into menu's range + + if(this.isOver){ return; } // already activated? + this.isOver = true; + + if(this.conservativeTrigger){ + // switch event handlers so that we handle mouse events from anywhere near + // the menu + this._onMouseMoveHandle = dojo.connect(document.documentElement, "onmousemove", this, "_onMouseMove"); + + this.timerScale=0.0; + + // call mouse handler to do some initial necessary calculations/positioning + this._onMouseMove(e); + + // slowly expand the icon size so it isn't jumpy + this._expandSlowly(); + } + }, + + _onMouseMove: function(/*Event*/ e){ + // summary: called when mouse is moved + if( (e.pageX >= this.hitX1) && (e.pageX <= this.hitX2) && + (e.pageY >= this.hitY1) && (e.pageY <= this.hitY2) ){ + if(!this.isOver){ + this._setActive(e); + } + this._onGridMouseMove(e.pageX-this.hitX1, e.pageY-this.hitY1); + }else{ + if(this.isOver){ + this._setDormant(e); + } + } + }, + + _onScroll: function(){ + this._calcHitGrid(); + }, + + onResized: function(){ + this._calcHitGrid(); + }, + + _onGridMouseMove: function(x, y){ + // summary: called when mouse is moved in the vicinity of the menu + this.pos = {x:x, y:y}; + this._paint(); + }, + + _paint: function(){ + var x=this.pos.x; + var y=this.pos.y; + + if(this.itemCount <= 0){ return; } + + // + // figure out our main index + // + var pos = this.isHorizontal ? x : y; + var prx = this.isHorizontal ? this.proximityLeft : this.proximityTop; + var siz = this.isHorizontal ? this.itemWidth : this.itemHeight; + var sim = this.isHorizontal ? + (1.0-this.timerScale)*this.itemWidth + this.timerScale*this.itemMaxWidth : + (1.0-this.timerScale)*this.itemHeight + this.timerScale*this.itemMaxHeight ; + + var cen = ((pos - prx) / siz) - 0.5; + var max_off_cen = (sim / siz) - 0.5; + + if(max_off_cen > this.effectUnits){ max_off_cen = this.effectUnits; } + + // + // figure out our off-axis weighting + // + var off_weight = 0; + + if(this.anchorEdge == this.EDGE.BOTTOM){ + var cen2 = (y - this.proximityTop) / this.itemHeight; + off_weight = (cen2 > 0.5) ? 1 : y / (this.proximityTop + (this.itemHeight / 2)); + } + if(this.anchorEdge == this.EDGE.TOP){ + var cen2 = (y - this.proximityTop) / this.itemHeight; + off_weight = (cen2 < 0.5) ? 1 : (this.totalHeight - y) / (this.proximityBottom + (this.itemHeight / 2)); + } + if(this.anchorEdge == this.EDGE.RIGHT){ + var cen2 = (x - this.proximityLeft) / this.itemWidth; + off_weight = (cen2 > 0.5) ? 1 : x / (this.proximityLeft + (this.itemWidth / 2)); + } + if(this.anchorEdge == this.EDGE.LEFT){ + var cen2 = (x - this.proximityLeft) / this.itemWidth; + off_weight = (cen2 < 0.5) ? 1 : (this.totalWidth - x) / (this.proximityRight + (this.itemWidth / 2)); + } + if(this.anchorEdge == this.EDGE.CENTER){ + if(this.isHorizontal){ + off_weight = y / (this.totalHeight); + }else{ + off_weight = x / (this.totalWidth); + } + + if(off_weight > 0.5){ + off_weight = 1 - off_weight; + } + + off_weight *= 2; + } + + // + // set the sizes + // + for(var i=0; i<this.itemCount; i++){ + var weight = this._weighAt(cen, i); + if(weight < 0){weight = 0;} + this._setItemSize(i, weight * off_weight); + } + + // + // set the positions + // + + var main_p = Math.round(cen); + var offset = 0; + + if(cen < 0){ + + main_p = 0; + + }else if(cen > this.itemCount - 1){ + + main_p = this.itemCount -1; + + }else{ + + offset = (cen - main_p) * ((this.isHorizontal ? this.itemWidth : this.itemHeight) - this.children[main_p].sizeMain); + } + + this._positionElementsFrom(main_p, offset); + }, + + _weighAt: function(/*Integer*/ cen, /*Integer*/ i){ + var dist = Math.abs(cen - i); + var limit = ((cen - i) > 0) ? this.children[i].effectRangeRght : this.children[i].effectRangeLeft; + return (dist > limit) ? 0 : (1 - dist / limit); // Integer + }, + + _setItemSize: function(p, scale){ + scale *= this.timerScale; + var w = Math.round(this.itemWidth + ((this.itemMaxWidth - this.itemWidth ) * scale)); + var h = Math.round(this.itemHeight + ((this.itemMaxHeight - this.itemHeight) * scale)); + + if(this.isHorizontal){ + + this.children[p].sizeW = w; + this.children[p].sizeH = h; + + this.children[p].sizeMain = w; + this.children[p].sizeOff = h; + + var y = 0; + if(this.anchorEdge == this.EDGE.TOP){ + y = (this.children[p].cenY - (this.itemHeight / 2)); + }else if(this.anchorEdge == this.EDGE.BOTTOM){ + y = (this.children[p].cenY - (h - (this.itemHeight / 2))); + }else{ + y = (this.children[p].cenY - (h / 2)); + } + + this.children[p].usualX = Math.round(this.children[p].cenX - (w / 2)); + this.children[p].domNode.style.top = y + 'px'; + this.children[p].domNode.style.left = this.children[p].usualX + 'px'; + + }else{ + + this.children[p].sizeW = w; + this.children[p].sizeH = h; + + this.children[p].sizeOff = w; + this.children[p].sizeMain = h; + + var x = 0; + if(this.anchorEdge == this.EDGE.LEFT){ + x = this.children[p].cenX - (this.itemWidth / 2); + }else if (this.anchorEdge == this.EDGE.RIGHT){ + x = this.children[p].cenX - (w - (this.itemWidth / 2)); + }else{ + x = this.children[p].cenX - (w / 2); + } + + this.children[p].domNode.style.left = x + 'px'; + this.children[p].usualY = Math.round(this.children[p].cenY - (h / 2)); + + this.children[p].domNode.style.top = this.children[p].usualY + 'px'; + } + + this.children[p].domNode.style.width = w + 'px'; + this.children[p].domNode.style.height = h + 'px'; + + if(this.children[p].svgNode){ + this.children[p].svgNode.setSize(w, h); + } + }, + + _positionElementsFrom: function(p, offset){ + var pos = 0; + + if(this.isHorizontal){ + pos = Math.round(this.children[p].usualX + offset); + this.children[p].domNode.style.left = pos + 'px'; + }else{ + pos = Math.round(this.children[p].usualY + offset); + this.children[p].domNode.style.top = pos + 'px'; + } + this._positionLabel(this.children[p]); + + // position before + var bpos = pos; + for(var i=p-1; i>=0; i--){ + bpos -= this.children[i].sizeMain; + + if (this.isHorizontal){ + this.children[i].domNode.style.left = bpos + 'px'; + }else{ + this.children[i].domNode.style.top = bpos + 'px'; + } + this._positionLabel(this.children[i]); + } + + // position after + var apos = pos; + for(var i=p+1; i<this.itemCount; i++){ + apos += this.children[i-1].sizeMain; + if(this.isHorizontal){ + this.children[i].domNode.style.left = apos + 'px'; + }else{ + this.children[i].domNode.style.top = apos + 'px'; + } + this._positionLabel(this.children[i]); + } + + }, + + _positionLabel: function(itm){ + var x = 0; + var y = 0; + + var mb = dojo.marginBox(itm.lblNode); + + if(this.labelEdge == this.EDGE.TOP){ + x = Math.round((itm.sizeW / 2) - (mb.w / 2)); + y = -mb.h; + } + + if(this.labelEdge == this.EDGE.BOTTOM){ + x = Math.round((itm.sizeW / 2) - (mb.w / 2)); + y = itm.sizeH; + } + + if(this.labelEdge == this.EDGE.LEFT){ + x = -mb.w; + y = Math.round((itm.sizeH / 2) - (mb.h / 2)); + } + + if(this.labelEdge == this.EDGE.RIGHT){ + x = itm.sizeW; + y = Math.round((itm.sizeH / 2) - (mb.h / 2)); + } + + itm.lblNode.style.left = x + 'px'; + itm.lblNode.style.top = y + 'px'; + }, + + _calcHitGrid: function(){ + + var pos = dojo.coords(this.domNode, true); + + this.hitX1 = pos.x - this.proximityLeft; + this.hitY1 = pos.y - this.proximityTop; + this.hitX2 = this.hitX1 + this.totalWidth; + this.hitY2 = this.hitY1 + this.totalHeight; + + }, + + _toEdge: function(inp, def){ + return this.EDGE[inp.toUpperCase()] || def; + }, + + _expandSlowly: function(){ + // summary: slowly expand the image to user specified max size + if(!this.isOver){ return; } + this.timerScale += 0.2; + this._paint(); + if(this.timerScale<1.0){ + setTimeout(dojo.hitch(this, "_expandSlowly"), 10); + } + }, + + destroyRecursive: function(){ + // need to disconnect when we destroy + dojo.disconnect(this._onMouseOutHandle); + dojo.disconnect(this._onMouseMoveHandle); + dojo.disconnect(this._addChildHandle); + if (this.isFixed) { dojo.disconnect(this._onScrollHandle); } + dojo.disconnect(this._onResizeHandle); + this.inherited("destroyRecursive",arguments); + } +}); + +dojo.declare("dojox.widget.FisheyeListItem", [dijit._Widget, dijit._Templated, dijit._Contained], { + /* + * summary + * Menu item inside of a FisheyeList. + * See FisheyeList documentation for details on usage. + */ + + // iconSrc: String + // pathname to image file (jpg, gif, png, etc.) of icon for this menu item + iconSrc: "", + + // label: String + // label to print next to the icon, when it is moused-over + label: "", + + // id: String + // will be set to the id of the orginal div element + id: "", + + _blankImgPath: dojo.moduleUrl("dojo", "resources/blank.gif"), + + templateString: + '<div class="dojoxFisheyeListItem">' + + ' <img class="dojoxFisheyeListItemImage" dojoAttachPoint="imgNode" dojoAttachEvent="onmouseover:onMouseOver,onmouseout:onMouseOut,onclick:onClick">' + + ' <div class="dojoxFisheyeListItemLabel" dojoAttachPoint="lblNode"></div>' + + '</div>', + + _isNode: function(/* object */wh){ + // summary: + // checks to see if wh is actually a node. + if(typeof Element == "function") { + try{ + return wh instanceof Element; // boolean + }catch(e){} + }else{ + // best-guess + return wh && !isNaN(wh.nodeType); // boolean + } + }, + + _hasParent: function(/*Node*/node){ + // summary: + // returns whether or not node is a child of another node. + return Boolean(node && node.parentNode && this._isNode(node.parentNode)); // boolean + }, + + postCreate: function() { + + // set image + if((this.iconSrc.toLowerCase().substring(this.iconSrc.length-4)==".png")&&(dojo.isIE)&&(dojo.isIE<7)){ + /* we set the id of the new fisheyeListItem to the id of the div defined in the HTML */ + if(this._hasParent(this.imgNode) && this.id != ""){ + var parent = this.imgNode.parentNode; + parent.setAttribute("id", this.id); + } + this.imgNode.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+this.iconSrc+"', sizingMethod='scale')"; + this.imgNode.src = this._blankImgPath.toString(); + }else{ + if(this._hasParent(this.imgNode) && this.id != ""){ + var parent = this.imgNode.parentNode; + parent.setAttribute("id", this.id); + } + this.imgNode.src = this.iconSrc; + } + + // Label + if(this.lblNode){ + this.lblNode.appendChild(document.createTextNode(this.label)); + } + dojo.setSelectable(this.domNode, false); + this.startup(); + }, + + startup: function(){ + this.parent = this.getParent(); + }, + + onMouseOver: function(/*Event*/ e){ + // summary: callback when user moves mouse over this menu item + // in conservative mode, don't activate the menu until user mouses over an icon + if(!this.parent.isOver){ + this.parent._setActive(e); + } + if(this.label != "" ){ + dojo.addClass(this.lblNode, "dojoxFishSelected"); + this.parent._positionLabel(this); + } + }, + + onMouseOut: function(/*Event*/ e){ + // summary: callback when user moves mouse off of this menu item + dojo.removeClass(this.lblNode, "dojoxFishSelected"); + }, + + onClick: function(/*Event*/ e){ + // summary: user overridable callback when user clicks this menu item + } +}); + +} diff --git a/includes/js/dojox/widget/FisheyeList/FisheyeList.css b/includes/js/dojox/widget/FisheyeList/FisheyeList.css new file mode 100644 index 0000000..c9b78a9 --- /dev/null +++ b/includes/js/dojox/widget/FisheyeList/FisheyeList.css @@ -0,0 +1,24 @@ +.dojoxFisheyeListItemLabel { + font-family: Arial, Helvetica, sans-serif; + background-color: #eee; + border: 2px solid #666; + padding: 2px; + text-align: center; + position: absolute; + display: none; + white-space:pre; +} +.dojoxFisheyeListItemLabel.dojoxFishSelected { + display: block; +} +.dojoxFisheyeListItemImage { + border: 0px; + position: absolute; +} +.dojoxFisheyeListItem { + position: absolute; + z-index: 2; +} +.dojoxFisheyeListBar { + position: relative; +} diff --git a/includes/js/dojox/widget/FisheyeList/FisheyeList.css.commented.css b/includes/js/dojox/widget/FisheyeList/FisheyeList.css.commented.css new file mode 100644 index 0000000..82469d8 --- /dev/null +++ b/includes/js/dojox/widget/FisheyeList/FisheyeList.css.commented.css @@ -0,0 +1,28 @@ +.dojoxFisheyeListItemLabel { + font-family: Arial, Helvetica, sans-serif; + background-color: #eee; + border: 2px solid #666; + padding: 2px; + text-align: center; + position: absolute; + display: none; + white-space:pre; +} + +.dojoxFisheyeListItemLabel.dojoxFishSelected { + display: block; +} + +.dojoxFisheyeListItemImage { + border: 0px; + position: absolute; +} + +.dojoxFisheyeListItem { + position: absolute; + z-index: 2; +} + +.dojoxFisheyeListBar { + position: relative; +} diff --git a/includes/js/dojox/widget/FisheyeLite.js b/includes/js/dojox/widget/FisheyeLite.js new file mode 100644 index 0000000..34818ae --- /dev/null +++ b/includes/js/dojox/widget/FisheyeLite.js @@ -0,0 +1,135 @@ +if(!dojo._hasResource["dojox.widget.FisheyeLite"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. +dojo._hasResource["dojox.widget.FisheyeLite"] = true; +dojo.provide("dojox.widget.FisheyeLite"); +dojo.experimental("dojox.widget.FisheyeLite"); + +dojo.require("dijit._Widget"); +dojo.require("dojox.fx.easing"); + +dojo.declare("dojox.widget.FisheyeLite", + dijit._Widget, + { + // summary: A Light-weight Fisheye Component, or an exhanced version + // of dojo.fx.Toggler ... + // + // description: + // A Simple FisheyeList-like widget which (in the interest of + // performance) relies on well-styled content for positioning, + // and natural page layout for rendering. + // + // use position:absolute/relative nodes to prevent layout + // changes, and use caution when seleting properties to + // scale. Negative scaling works, but some properties + // react poorly to being set to negative values, IE being + // particularly annoying in that regard. + // + // quirk: uses the domNode as the target of the animation + // unless it finds a node class="fisheyeTarget" in the container + // being turned into a FisheyeLite instance + // + // example: + // | // make all the LI's in a node Fisheye's: + // | dojo.query("#node li").forEach(function(n){ + // | new dojox.widget.FisheyeLite({},n); + // | }); + // + // duationIn: Integer + // The time (in ms) the run the show animation + durationIn: 350, + + // easeIn: Function + // An easing function to use for the show animation + easeIn: dojox.fx.easing.backOut, + + // durationOut: Integer + // The Time (in ms) to run the hide animation + durationOut: 1420, + + // easeOut: Function + // An easing function to use for the hide animation + easeOut: dojox.fx.easing.elasticOut, + + // properties: Object + // An object of "property":scale pairs + // defaults to font-size with a scale of 2.75 + properties: { + fontSize: 2.75 + }, + + // unit: String + // Sometimes, you need to specify a unit. Should be part of + // properties attrib, but was trying to shorthand the logic there + unit:"px", + + postCreate: function(){ + + this.inherited(arguments); + this._target = dojo.query(".fisheyeTarget",this.domNode)[0] || this.domNode; + this._makeAnims(); + + this.connect(this.domNode,"onmouseover","show"); + this.connect(this.domNode,"onmouseout","hide"); + this.connect(this._target,"onclick","onClick"); + + }, + + show: function(){ + // summary: + // Show this Fisheye item. + this._runningOut.stop(); + this._runningIn.play(); + }, + + hide: function(){ + // summary: + // Hide this fisheye item on mouse leave + this._runningIn.stop(); + this._runningOut.play(); + }, + + _makeAnims: function(){ + // summary: + // Pre-generate the animations + + // create two properties: objects, one for each "state" + var _in = {}; + var _out = {}; + var cs = dojo.getComputedStyle(this._target); + for(var p in this.properties){ + var v = parseInt(cs[p]); + // note: do not set negative scale for [a list of properties] for IE support + // note: filter:'s are your own issue, too ;) + _out[p] = { end: v, unit:this.unit }; + _in[p] = { end: (this.properties[p]*v), unit:this.unit }; + } + + this._runningIn = dojo.animateProperty({ + node: this._target, + easing: this.easeIn, + duration: this.durationIn, + properties: _in + }); + + this._runningOut = dojo.animateProperty({ + node: this._target, + duration: this.durationOut, + easing: this.easeOut, + properties: _out + }); + + this.connect(this._runningIn,"onEnd",dojo.hitch(this,"onSelected",this)); + }, + + onClick: function(/* Event */e){ + // summary: stub function fired when target is clicked + // connect or override to use. + }, + + onSelected: function(/* Object */e){ + // summary: stub function fired when Fisheye Item is fully visible and + // hovered. connect or override use. + } + +}); + +} diff --git a/includes/js/dojox/widget/Iterator.js b/includes/js/dojox/widget/Iterator.js new file mode 100644 index 0000000..c2f510d --- /dev/null +++ b/includes/js/dojox/widget/Iterator.js @@ -0,0 +1,177 @@ +if(!dojo._hasResource["dojox.widget.Iterator"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. +dojo._hasResource["dojox.widget.Iterator"] = true; +dojo.provide("dojox.widget.Iterator"); +dojo.require("dijit.Declaration"); + +dojo.experimental("dojox.widget.Iterator"); // level: prototype, designed for dijit.chat.demo + +/* + example: + from markup: + | <span dojoType="dojo.data.ItemFileReadStore" + | jsId="cstore" url="countries.json"></span> + | + | <div> + | <div dojoType="dojox.widget.Iterator" store="cstore" + | query="{ name: 'A*'}"> + | ${name} is a ${type} + | </div> + | </div> + + example: + programmatic: + | var store = new dojo.data.ItemFileReadStore({ url: "countries.json" }); + | + | var iter = new dojox.widget.Iterator({ + | store: store, + | template: "" + | }); + | + + example: + programmatic from an array of objects: + | var dataArr = [ + | { name: "foo", valueAttr: "bar" }, + | { name: "thinger", valueAttr: "blah" } + | ]; + | + | var iter = new dojox.widget.Iterator({ + | data: dataArr, + | template: "" + | }); + + example: + programmatic from an array of strings: + | var dataArr = [ + | { name: "foo", valueAttr: "bar" }, + | { name: "thinger", valueAttr: "blah" } + | ]; + | + | var iter = new dojox.widget.Iterator({ + | data: dataArr, + | template: "" + | }); + +*/ + + +dojo.declare("dojox.widget.Iterator", + [ dijit.Declaration ], + { + + constructor: (function(){ + var ctr = 0; + return function(){ + this.attrs = []; + this.children = []; + this.widgetClass = "dojox.widget.Iterator._classes._"+(ctr++); + } + })(), + + start: 0, + fetchMax: 1000, + query: { name: "*" }, + attrs: [], + defaultValue: "", + widgetCtor: null, + dataValues: [], // an array of strings + data: null, // should be a reference to an Array + store: null, + _srcIndex: 0, + _srcParent: null, + + _setSrcIndex: function(s){ + this._srcIndex = 0; + this._srcParent = s.parentNode; + var ts = s; + while(ts.previousSibling){ + this._srcIndex++; + ts = ts.previousSibling; + }; + }, + + postscript: function(p, s){ + // figure out the position of the source node in it's parent + this._setSrcIndex(s); + // this._srcIndex = dojo.query(">", this._srcParent).indexOf(s); + + this.inherited("postscript", arguments); + var wc = this.widgetCtor = dojo.getObject(this.widgetClass); + + this.attrs = dojo.map( + wc.prototype.templateString.match(/\$\{([^\s\:\}]+)(?:\:([^\s\:\}]+))?\}/g), + function(s){ return s.slice(2, -1); } + ); + dojo.forEach( + this.attrs, + function(m){ wc.prototype[m] = ""; } + ); + this.update(); + }, + + clear: function(){ + if(this.children.length){ + this._setSrcIndex(this.children[0].domNode); + } + dojo.forEach(this.children, "item.destroy();"); + this.children = []; + }, + + update: function(){ + if(this.store){ + // we're executing a query + this.fetch(); + }else{ + // we came from an array of objects. Easier! + this.onDataAvailable(this.data||this.dataValues); + } + }, + + _addItem: function(/*Object*/config, idx){ + if(dojo.isString(config)){ + config = { value: config }; + } + var widget = new this.widgetCtor(config); + this.children.push(widget); + dojo.place(widget.domNode, this._srcParent, this._srcIndex+idx); + }, + + getAttrValuesObj: function(item){ + var obj = {}; + if(dojo.isString(item)){ + dojo.forEach(this.attrs, function(attr){ + obj[attr] = (attr == "value") ? item : this.defaultValue; + }, this); + }else{ + dojo.forEach(this.attrs, function(attr){ + if(this.store){ + obj[attr] = this.store.getValue(item, attr)||this.defaultValue; + }else{ + obj[attr] = item[attr]||this.defaultValue; + } + }, this); + } + return obj; + }, + + onDataAvailable: function(data){ + this.clear(); + // console.debug(data); + dojo.forEach(data, function(item, idx){ + this._addItem(this.getAttrValuesObj(item), idx); + }, this); + }, + + fetch: function(query, start, end){ + this.store.fetch({ + query: query||this.query, + start: start||this.start, + count: end||this.fetchMax, + onComplete: dojo.hitch(this,"onDataAvailable") + }); + } +}); + +dojox.widget.Iterator._classes = {}; + +} diff --git a/includes/js/dojox/widget/Loader.js b/includes/js/dojox/widget/Loader.js new file mode 100644 index 0000000..2493d5a --- /dev/null +++ b/includes/js/dojox/widget/Loader.js @@ -0,0 +1,103 @@ +if(!dojo._hasResource["dojox.widget.Loader"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. +dojo._hasResource["dojox.widget.Loader"] = true; +dojo.provide("dojox.widget.Loader"); +dojo.experimental("dojox.widget.Loader"); + +dojo.require("dijit._Widget"); +dojo.require("dijit._Templated"); + +dojo.declare("dojox.widget.Loader", [dijit._Widget,dijit._Templated], { + // summary: a configurable global xhr-listener to display + // a loading message during running xhr's or to simply provide + // base-level topic to subscribe to for custom loading messages + + // loadIcon: String + // location to the icon used. + loadIcon: dojo.moduleUrl("dojox.widget.Loader","icons/loading.gif"), + + // loadMessage: String + // string to use for progress loading + loadMessage: 'Loading ...', + + // hasVisuals: Boolean + // true to display a fixed loading message in TR cornder, false to unly provide + // "Loader" topic to subscribe to for your own custom loading message. + hasVisuals: true, + + // attachToPointer + // true to use visual indicator where cursor is + attachToPointer: true, + + // duration: Integer + // time in ms to toggle in/out the visual load indicator + duration: 125, + + // _offset: Integer + // distance in px from the mouse pointer to show attachToPointer avatar + _offset: 16, + + // holder for mousemove connection + _pointerConnect: null, + _xhrStart: null, + _xhrEnd: null, + + templateString: '<div dojoAttachPoint="loadNode" class="dojoxLoader">' + +'<img src="${loadIcon}" class="dojoxLoaderIcon"> <span dojoAttachPoint="loadMessageNode" class="dojoxLoaderMessage"></span>' + +'</div>', + + postCreate: function(){ + // summary: setup the loader + + if(!this.hasVisuals){ + this.loadNode.style.display = "none"; // _destroy()? + }else{ + if(this.attachToPointer){ + dojo.removeClass(this.loadNode,"dojoxLoader"); + dojo.addClass(this.loadNode,"dojoxLoaderPointer"); + } + this._hide(); + } + this._setMessage(this.loadMessage); + + // FIXME: create our connections. would be easier, and this might be redundant + // if Deferred published something + this._xhrStart = dojo.connect(dojo,"_ioSetArgs",this,"_show"); + this._xhrEnd = dojo.connect(dojo.Deferred.prototype,"_fire",this,"_hide"); + + }, + + _setMessage: function(/* String */ message){ + // summary: set's the message in the loader + this.loadMessageNode.innerHTML = message; + }, + + _putLoader: function(/* Event */ e){ + // summary: place the floating loading element based on mousemove connection position + dijit.placeOnScreen(this.loadNode,{ x: e.clientX+this._offset, y:e.clientY+this._offset }, ["TL","BR"]); + }, + + _show: function(){ + // summary: publish and show progress indicator + dojo.publish("Loader",[{ message: 'started' }]); + if(this.hasVisuals){ + if(this.attachToPointer){ + this._pointerConnect = dojo.connect(document,"onmousemove",this,"_putLoader"); + } + dojo.fadeIn({ node: this.loadNode, duration:this.duration }).play(); + } + }, + + _hide: function(){ + // summary: publish "xhr ended" and hide progress indicator + dojo.publish("Loader",[{ message: 'ended' }]); + if(this.hasVisuals){ + if(this.attachToPointer){ + dojo.disconnect(this._pointerConnect); + } + dojo.fadeOut({ node: this.loadNode, duration:this.duration }).play(); + } + } + +}); + +} diff --git a/includes/js/dojox/widget/Loader/Loader.css b/includes/js/dojox/widget/Loader/Loader.css new file mode 100644 index 0000000..f209d70 --- /dev/null +++ b/includes/js/dojox/widget/Loader/Loader.css @@ -0,0 +1,24 @@ +.dojoxLoaderPointer { + position:absolute; + z-index:999; +} +.dojoxLoader { + float:right; + position:fixed; + height:25px; + width:100px; + top:0; + right:0; + padding:3px; + border:1px solid #ccc; + background:#fff; + min-width:42px; +} +.dojoxLoaderIcon { + height:22px; width:22px; + vertical-align:middle; +} +.dojoxLoaderMessage { + font:8pt Arial,san-serif; + color:#666; +} diff --git a/includes/js/dojox/widget/Loader/Loader.css.commented.css b/includes/js/dojox/widget/Loader/Loader.css.commented.css new file mode 100644 index 0000000..4b2d19c --- /dev/null +++ b/includes/js/dojox/widget/Loader/Loader.css.commented.css @@ -0,0 +1,27 @@ +.dojoxLoaderPointer { + position:absolute; + z-index:999; +} + +.dojoxLoader { + float:right; + position:fixed; + height:25px; + width:100px; + top:0; + right:0; + padding:3px; + border:1px solid #ccc; + background:#fff; + min-width:42px; +} + +.dojoxLoaderIcon { + height:22px; width:22px; + vertical-align:middle; +} + +.dojoxLoaderMessage { + font:8pt Arial,san-serif; + color:#666; +} diff --git a/includes/js/dojox/widget/Loader/README b/includes/js/dojox/widget/Loader/README new file mode 100644 index 0000000..df6c73d --- /dev/null +++ b/includes/js/dojox/widget/Loader/README @@ -0,0 +1,39 @@ +------------------------------------------------------------------------------- +dojox.widget.Loader +------------------------------------------------------------------------------- +Version 0.1 +Release date: 07/15/2007 +------------------------------------------------------------------------------- +Project state: +prototype / expermental +------------------------------------------------------------------------------- +Credits: Pete Higgins (phiggins@gmail.com) +------------------------------------------------------------------------------- +Description: + a class to indicatie some xhr request + is going on via topics, with optional + eye-candy indicators either offset + from mouse pointer, or in a fixed position + node. + +------------------------------------------------------------------------------- +Dependencies: + widget: none. + test page: to enhance visual effect, a .php + file is used to slowly pass data to an xhr + request. You will need a php-enabled + webserver to view /dojox/tests/test_Loader.html + +------------------------------------------------------------------------------- +Documentation + +------------------------------------------------------------------------------- +Installation instructions + + simply dojo.require("dojox.widget.Loader") and + attach to a div: + <div dojoType="dojox.widget.Loader"></div> + + Configuration options can be found in the API tool. + + diff --git a/includes/js/dojox/widget/Loader/honey.php b/includes/js/dojox/widget/Loader/honey.php new file mode 100644 index 0000000..aeb7776 --- /dev/null +++ b/includes/js/dojox/widget/Loader/honey.php @@ -0,0 +1,27 @@ +<? +/* honey.php - sample fake delay script to push data + - should use ob_flush() to send chunks rather than + just take a long time ... +*/ + +session_start(); + +$char = " "; +$fakeDelay = (empty($_GET['delay'])) ? 1 : $_GET['delay']; +$dataSize = (empty($_GET['size'])) ? 2*1024 : $_GET['size']; +if (empty($_SESSION['counter'])) $_SESSION['counter'] = 1; +$dataSent = 0; +$blockSize = 1024; + +if ($fakeDelay) { sleep($fakeDelay); } + +print "view num: ".$_SESSION['counter']++; +while ($dataSent<=$dataSize) { + for ($i=0; $i<$blockSize/4; $i++) { + print $char; + } print "<br />"; + $dataSent += $blockSize; + sleep(1); +} + +?> diff --git a/includes/js/dojox/widget/Loader/icons/loading.gif b/includes/js/dojox/widget/Loader/icons/loading.gif Binary files differnew file mode 100644 index 0000000..6e7c8e5 --- /dev/null +++ b/includes/js/dojox/widget/Loader/icons/loading.gif diff --git a/includes/js/dojox/widget/MultiComboBox.js b/includes/js/dojox/widget/MultiComboBox.js new file mode 100644 index 0000000..6239d8a --- /dev/null +++ b/includes/js/dojox/widget/MultiComboBox.js @@ -0,0 +1,61 @@ +if(!dojo._hasResource["dojox.widget.MultiComboBox"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. +dojo._hasResource["dojox.widget.MultiComboBox"] = true; +dojo.provide("dojox.widget.MultiComboBox"); +dojo.experimental("dojox.widget.MultiComboBox"); +dojo.require("dijit.form.ComboBox"); +dojo.require("dijit.form.ValidationTextBox"); + +dojo.declare("dojox.widget.MultiComboBox", + [dijit.form.ValidationTextBox, dijit.form.ComboBoxMixin],{ + // + // summary: A ComboBox that accpets multiple inputs on a single line? + // + // delimiter: String + // The character to use to separate items in the ComboBox input + delimiter: ",", + _previousMatches: false, + + setValue: function(value){ + if (this.delimiter && value.length != 0){ + value = value+this.delimiter+" "; + arguments[0] = this._addPreviousMatches(value); + } + this.inherited(arguments); + }, + + _addPreviousMatches: function(/* String */text){ + if(this._previousMatches){ + if(!text.match(new RegExp("^"+this._previousMatches))){ + text = this._previousMatches+text; + } + text = this._cleanupDelimiters(text); + } + return text; // String + }, + + _cleanupDelimiters: function(/* String */text){ + if(this.delimiter){ + text = text.replace(new RegExp(" +"), " "); + text = text.replace(new RegExp("^ *"+this.delimiter+"* *"), ""); + text = text.replace(new RegExp(this.delimiter+" *"+this.delimiter), this.delimiter); + } + return text; + }, + + _autoCompleteText: function(/* String */text){ + arguments[0] = this._addPreviousMatches(text); + this.inherited(arguments); + }, + + _startSearch: function(/* String */text){ + text = this._cleanupDelimiters(text); + var re = new RegExp("^.*"+this.delimiter+" *"); + + if(this._previousMatches = text.match(re)){ + arguments[0] = text.replace(re, ""); + } + this.inherited(arguments); + } +}); + +} diff --git a/includes/js/dojox/widget/README b/includes/js/dojox/widget/README new file mode 100644 index 0000000..8e8cb60 --- /dev/null +++ b/includes/js/dojox/widget/README @@ -0,0 +1,84 @@ +------------------------------------------------------------------------------- +dojox.widget Collection +------------------------------------------------------------------------------- +Version 1.0 +Release date: 10/31/2007 +------------------------------------------------------------------------------- +Project state: +experimental | beta +------------------------------------------------------------------------------- +Credits + Peter Higgins (dante) + Karl Tiedt (ktiedt@gmail.com) + Wolfram Kriesing (http://wolfram.kriesing.de/blog/): Rating +------------------------------------------------------------------------------- +Project description + + This is a collection of standalone widgets for use in + your website. Each individual widget is independant + of the others. +------------------------------------------------------------------------------- +Dependencies: + + Each widget has it's own requirements and dependencies. + Most inherit from dijit base-classes such as dijit._Widget, + dijit._Templated, etc ... So we will assume the availablility + of dojo (core), and dijit packages. +------------------------------------------------------------------------------- +Documentation + + Please refer to the API-tool, or in-line documentation. +------------------------------------------------------------------------------- +Installation instructions + + These are standalone Widgets, so putting the [widget].js file + in your dojox/widget folder, and copying any files in the + /dojox/widget/[widget]/ folder as supplements/templates/etc + should be all you need to do. + + eg: FisheyeList: + /dojox/widget/FisheyeList.js + /dojox/widget/FisheyeList/blank.gif + /dojox/widget/FisheyeList/FisheyeList.css + + should be all you need to use the Fisheye widget. + + you can safely import the whole widget project into your + dojox/ root directory from the following SVN url: + + http://svn.dojotoolkit.org/dojo/dojox/widget + +------------------------------------------------------------------------------- +Other Notes (Brief widget list): + + * ColorPicker - Photoshop-like color picker + + * FileInput - experimental dijit-like input type="file" + + * FileInputAuto/Blind - extension to FileInput for + added flair/automation + + * FisheyeList - the classic FishEye Picker + + * Iterator - Basic array and datastore iterator class + + * Loader - an experimental Class that listens to XHR + connections in the background, and displays + a loading indicator. + + * MultiComboBox - an experimental ComboBox that allows + multiple entries bases on a separator character. + + * SortList - a degradable UL with a fixed header, scrolling, + and sorting. Can be the direct descendat of a + LayoutContainer and will size to fit. + + * TimeSpinner - a number spinner that revolves through + time constrainsts + + * Toaster - a messaging system to display non-obstrusive + alerts on screen. + + * Wizard - a StackContainer with built-in navigation to + ease in the creation of 'step-based' content. + Requires dojo >= 1.1 diff --git a/includes/js/dojox/widget/Rating.js b/includes/js/dojox/widget/Rating.js new file mode 100644 index 0000000..8f12d62 --- /dev/null +++ b/includes/js/dojox/widget/Rating.js @@ -0,0 +1,90 @@ +if(!dojo._hasResource["dojox.widget.Rating"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. +dojo._hasResource["dojox.widget.Rating"] = true; +dojo.provide("dojox.widget.Rating"); + +dojo.require("dijit.form._FormWidget"); + +dojo.declare("dojox.widget.Rating", + dijit.form._FormWidget,{ + // summary: + // A widget for rating using stars. + // + // required: Boolean + // TODO: Can be true or false, default is false. + // required: false, + + templateString: null, + + // numStars: Integer + // The number of stars to show, default is 3. + numStars: 3, + // value: Integer + // The current value of the Rating + value: 0, + + constructor:function(params){ + // Build the templateString. The number of stars is given by this.numStars, + // which is normally an attribute to the widget node. + dojo.mixin(this, params); + + // TODO actually "dijitInline" should be applied to the surrounding div, but FF2 + // screws up when we dojo.query() for the star nodes, it orders them randomly, because of the use + // of display:--moz-inline-box ... very strange bug + // Since using ul and li in combintaion with dijitInline this problem doesnt exist anymore. + + // The focusNode is normally used to store the value, i dont know if that is right here, but seems standard for _FormWidgets + var tpl = '<div dojoAttachPoint="domNode" class="dojoxRating dijitInline">' + + '<input type="hidden" value="0" dojoAttachPoint="focusNode" /><ul>${stars}</ul>' + + '</div>'; + // the value-attribute is used to "read" the value for processing in the widget class --> + var starTpl = '<li class="dojoxRatingStar dijitInline" dojoAttachEvent="onclick:onStarClick,onmouseover:_onMouse,onmouseout:_onMouse" value="${value}"></li>'; + var rendered = ""; + for(var i = 0; i < this.numStars; i++){ + rendered += dojo.string.substitute(starTpl, {value:i+1}); + } + this.templateString = dojo.string.substitute(tpl, {stars:rendered}); + }, + + postCreate: function(){ + this.inherited(arguments); + this._renderStars(this.value); + }, + + _onMouse: function(evt){ + this.inherited(arguments); + if(this._hovering){ + var hoverValue = +dojo.attr(evt.target, "value"); + this.onMouseOver(evt, hoverValue); + this._renderStars(hoverValue, true); + }else{ + this._renderStars(this.value); + } + }, + + _renderStars: function(value, hover){ + // summary: Render the stars depending on the value. + dojo.query(".dojoxRatingStar", this.domNode).forEach(function(star, i){ + if(i + 1 > value){ + dojo.removeClass(star, "dojoxRatingStarHover"); + dojo.removeClass(star, "dojoxRatingStarChecked"); + }else{ + dojo.removeClass(star, "dojoxRatingStar" + (hover ? "Checked" : "Hover")); + dojo.addClass(star, "dojoxRatingStar" + (hover ? "Hover" : "Checked")); + } + }); + }, + + onStarClick:function(/* Event */evt){ +// TODOC: needs summary + var newVal = +dojo.attr(evt.target, "value"); + this.setAttribute("value", newVal == this.value ? 0 : newVal); + this._renderStars(this.value); + this.onChange(this.value); // Do I have to call this by hand? + }, + + onMouseOver: function(/*evt, value*/){ + // summary: connect here if you like to, the value is passed to this function as the second parameter! + } +}); + +} diff --git a/includes/js/dojox/widget/Rating/Rating.css b/includes/js/dojox/widget/Rating/Rating.css new file mode 100644 index 0000000..f4c0957 --- /dev/null +++ b/includes/js/dojox/widget/Rating/Rating.css @@ -0,0 +1,20 @@ +.dojoxRating ul { + padding:0; + margin:0; +} +.dojoxRatingStar { + display:inline-block; + background-image:url(rating_empty.gif); + background-position:left center; + position:relative; + height:15px; + width:15px; + float:left; +} +.dojoxRatingStarChecked { + background-image:url(rating_full.gif); +} +.dojoxRatingStarHover { + background-image:url(rating_full.gif); + opacity:.5; +} diff --git a/includes/js/dojox/widget/Rating/Rating.css.commented.css b/includes/js/dojox/widget/Rating/Rating.css.commented.css new file mode 100644 index 0000000..5fcdcb4 --- /dev/null +++ b/includes/js/dojox/widget/Rating/Rating.css.commented.css @@ -0,0 +1,24 @@ +.dojoxRating ul { + padding:0; + margin:0; +} + +.dojoxRatingStar { + display:inline-block; + background-image:url(rating_empty.gif); + background-position:left center; + position:relative; + height:15px; + width:15px; + float:left; +} + +.dojoxRatingStarChecked { + background-image:url(rating_full.gif); +} + +.dojoxRatingStarHover { + background-image:url(rating_full.gif); + opacity:.5; +} + diff --git a/includes/js/dojox/widget/Rating/rating_empty.gif b/includes/js/dojox/widget/Rating/rating_empty.gif Binary files differnew file mode 100644 index 0000000..8662c43 --- /dev/null +++ b/includes/js/dojox/widget/Rating/rating_empty.gif diff --git a/includes/js/dojox/widget/Rating/rating_empty.png b/includes/js/dojox/widget/Rating/rating_empty.png Binary files differnew file mode 100644 index 0000000..39cd985 --- /dev/null +++ b/includes/js/dojox/widget/Rating/rating_empty.png diff --git a/includes/js/dojox/widget/Rating/rating_full.gif b/includes/js/dojox/widget/Rating/rating_full.gif Binary files differnew file mode 100644 index 0000000..6fe24bf --- /dev/null +++ b/includes/js/dojox/widget/Rating/rating_full.gif diff --git a/includes/js/dojox/widget/Rating/rating_full.png b/includes/js/dojox/widget/Rating/rating_full.png Binary files differnew file mode 100644 index 0000000..bf4c9f1 --- /dev/null +++ b/includes/js/dojox/widget/Rating/rating_full.png diff --git a/includes/js/dojox/widget/Rating/rating_half.png b/includes/js/dojox/widget/Rating/rating_half.png Binary files differnew file mode 100644 index 0000000..1201c85 --- /dev/null +++ b/includes/js/dojox/widget/Rating/rating_half.png diff --git a/includes/js/dojox/widget/SortList.js b/includes/js/dojox/widget/SortList.js new file mode 100644 index 0000000..e50ec2b --- /dev/null +++ b/includes/js/dojox/widget/SortList.js @@ -0,0 +1,151 @@ +if(!dojo._hasResource["dojox.widget.SortList"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. +dojo._hasResource["dojox.widget.SortList"] = true; +dojo.provide("dojox.widget.SortList"); +dojo.experimental("dojox.widget.SortList"); // level: prototype, designed for dijit.chat.demo + +dojo.require("dijit.layout._LayoutWidget"); +dojo.require("dijit._Templated"); + +dojo.declare("dojox.widget.SortList", + [dijit.layout._LayoutWidget, dijit._Templated], + { + // summary: A sortable unordered-list with a fixed header for use in dijit.demos.chat + // for demonstration purposes only for now. feel free to make API suggestions + // or fixes. + // + // title: String + // The title in the header + title: "", + + // heading: String + // In the event a parent container is expecting a title="" attribute, set it for the parent + // via title, and the title of this widget via heading="" ... assuming you want different + // titles for each. eg: TabContainer, AccordionContainer, etc. + heading: "", + + // descending: Boolean + // Toggle sort order based on this value. + descending: true, + + // selected: Array + // A list of the selected <li> nodes at any given time. + selected: null, + + // sortable: Boolean + // toggle to enable/disable sorting + sortable: true, + + // FIXME: this is really simple store support + store: "", + key: "name", + + templateString:"<div class=\"sortList\" id=\"${id}\">\n\t\t<div class=\"sortListTitle\" dojoAttachPoint=\"titleNode\">\n\t\t<div class=\"sortListIcon\"></div>\n\t\t<span dojoAttachPoint=\"focusNode\">${title}</span>\n\t\t</div>\n\t\t<div class=\"sortListBodyWrapper\" dojoAttachEvent=\"onmouseover: _set, onmouseout: _unset, onclick:_handleClick\" dojoAttachPoint=\"bodyWrapper\">\n\t\t<ul dojoAttachPoint=\"containerNode\" class=\"sortListBody\"></ul>\n\t</div>\n</div>\n", + + _addItem: function(item){ + var node = dojo.doc.createElement("li"); + var text = this.store.getValue(item,this.key); + node.innerHTML = text; + this.containerNode.appendChild(node); + }, + + postCreate: function(){ + if(this.store){ + this.store = dojo.getObject(this.store); + var props = { + onItem: dojo.hitch(this,"_addItem"), + onComplete: dojo.hitch(this,"onSort") + }; + this.store.fetch(props); + }else{ this.onSort(); } + this.inherited(arguments); + }, + + startup: function(){ + this.inherited(arguments); + if(this.heading){ + this.setTitle(this.heading); this.title=this.heading; + } + // we cheat, and give the browser just enough time so we know our height + setTimeout(dojo.hitch(this,"resize"),5); + if (this.sortable){ this.connect(this.titleNode,"onclick", "onSort"); } + }, + + resize: function(){ + // summary: do our additional calculations when resize() is called by or in a parent + this.inherited(arguments); + // FIXME: + // the 10 comes from the difference between the contentBox and calculated height + // because of badding and border extents. this shouldn't be done this way, a theme change will + // break it: but we also don't want to run getComputedStyle or dojo.coords() every time resize() + // is fired. + var offset = ((this._contentBox.h) - (dojo.style(this.titleNode,"height")))-10; + this.bodyWrapper.style.height = Math.abs(offset) + "px"; + }, + + onSort: function(/* Event */e){ + // summary: sort the data, and style the nodes. + + var arr = dojo.query("li",this.domNode); + if (this.sortable){ + this.descending = !this.descending; + dojo.addClass(this.titleNode,((this.descending)?"sortListDesc":"sortListAsc")); + dojo.removeClass(this.titleNode,((this.descending)?"sortListAsc":"sortListDesc")); + arr.sort(this._sorter); + if(this.descending){ arr.reverse(); } + } + var i=0; + dojo.forEach(arr,function(item){ + dojo[(i++)%2 === 0 ? "addClass" : "removeClass"](item,"sortListItemOdd"); + this.containerNode.appendChild(item); + },this); + }, + + _set: function(/* Event */e){ + // summary: set hover state + if(e.target !== this.bodyWrapper){ + dojo.addClass(e.target,"sortListItemHover"); + } + }, + + _unset: function(/* Event */e){ + // summary: remove hover state (FIXME: combine with _set?) + dojo.removeClass(e.target,"sortListItemHover"); + }, + + _handleClick: function(/* Event */e){ + // summary: click listener for data portion of widget. toggle selected state + // of node, and update this.selected array accordingly + dojo.toggleClass(e.target,"sortListItemSelected"); + e.target.focus(); + this._updateValues(e.target.innerHTML); + }, + + _updateValues: function(){ + this._selected = dojo.query("li.sortListItemSelected",this.containerNode); + this.selected = []; + dojo.forEach(this._selected,function(node){ + this.selected.push(node.innerHTML); + },this); + this.onChanged(arguments); + }, + + _sorter: function(a,b){ + // summary: a basic sort function, use query sort, or keep this? + var aStr = a.innerHTML; + var bStr = b.innerHTML; + if(aStr>bStr){ return 1; } + if(aStr<bStr){ return -1; } + return 0; + }, + + setTitle: function(/* String */title){ + // summary: Sets the widget title to a String + this.focusNode.innerHTML = this.title = title; + }, + + onChanged: function(){ + // summary: stub function, passes the last changed item, and is fired after current state + } +}); + +} diff --git a/includes/js/dojox/widget/SortList/SortList.css b/includes/js/dojox/widget/SortList/SortList.css new file mode 100644 index 0000000..70d39d2 --- /dev/null +++ b/includes/js/dojox/widget/SortList/SortList.css @@ -0,0 +1,57 @@ +.sortListBody { margin:0; padding:0; background:#fff; } +.soria .sortListBody li, +.tundra .sortListBody li { + border-bottom:1px solid #b7b7b7; + padding:2px 2px 2px 5px; +} +.sortListTitle { + cursor:pointer; + padding:4px 4px 3px 4px; +} +.sortList { height:100%; width:100%; } +.sortListBodyWrapper { + border:1px solid #b7b7b7; + overflow:auto; + height:100%; + cursor:pointer; +} +.soria .sortListBodyWrapper { + border:1px solid #333; +} +.soria .sortListItemOdd, +.tundra .sortListItemOdd { background:#f2f5f9; } +.tundra .sortListTitle { + background:#fafafa url('../../../dijit/themes/tundra/images/titleBarBg.gif') repeat-x top left; + border:1px solid #bfbfbf; + border-bottom:0; +} +.soria .sortListTitle { + background:#4f8ce5 url('../../../dijit/themes/soria/images/gradientTopBg.png') repeat-x top left; + background-position:0px -1px; + border:1px solid #333; + border-bottom:0; + font-weight:bold; + color:#fff; +} +.sortListItemSelected { background:#b7cdee !important; } +.sortListItemHover { background:#ff6 !important; } +.soria .sortListIcon, +.tundra .sortListIcon { + float:right; + height:16px; + width:16px; +} +.tundra .sortListDesc .sortListIcon { + background:url('../../../dijit/themes/tundra/images/arrowDown.png') no-repeat center center; +} +.tundra .sortListAsc .sortListIcon { + background:url('../../../dijit/themes/tundra/images/arrowUp.png') no-repeat center center; +} +.soria .sortListDesc .sortListIcon, +.soria .sortListAsc .sortListIcon { + background:url('../../../dijit/themes/soria/images/arrows.png') no-repeat center center; + background-position:0px 0px; +} +.soria .sortListDesc .sortListIcon { + background-position:-32px 0px; +} diff --git a/includes/js/dojox/widget/SortList/SortList.css.commented.css b/includes/js/dojox/widget/SortList/SortList.css.commented.css new file mode 100644 index 0000000..d5ca995 --- /dev/null +++ b/includes/js/dojox/widget/SortList/SortList.css.commented.css @@ -0,0 +1,64 @@ +.sortListBody { margin:0; padding:0; background:#fff; } + +.soria .sortListBody li, +.tundra .sortListBody li { + border-bottom:1px solid #b7b7b7; + padding:2px 2px 2px 5px; +} +.sortListTitle { + cursor:pointer; + padding:4px 4px 3px 4px; +} +.sortList { height:100%; width:100%; } +.sortListBodyWrapper { + border:1px solid #b7b7b7; + overflow:auto; + height:100%; + cursor:pointer; +} + +.soria .sortListBodyWrapper { + border:1px solid #333; +} + +.soria .sortListItemOdd, +.tundra .sortListItemOdd { background:#f2f5f9; } +.tundra .sortListTitle { + background:#fafafa url('../../../dijit/themes/tundra/images/titleBarBg.gif') repeat-x top left; + border:1px solid #bfbfbf; + border-bottom:0; +} +.soria .sortListTitle { + background:#4f8ce5 url('../../../dijit/themes/soria/images/gradientTopBg.png') repeat-x top left; + background-position:0px -1px; + border:1px solid #333; + border-bottom:0; + font-weight:bold; + color:#fff; +} + +.sortListItemSelected { background:#b7cdee !important; } +.sortListItemHover { background:#ff6 !important; } + +.soria .sortListIcon, +.tundra .sortListIcon { + float:right; + height:16px; + width:16px; +} +.tundra .sortListDesc .sortListIcon { + background:url('../../../dijit/themes/tundra/images/arrowDown.png') no-repeat center center; +} +.tundra .sortListAsc .sortListIcon { + background:url('../../../dijit/themes/tundra/images/arrowUp.png') no-repeat center center; +} + +.soria .sortListDesc .sortListIcon, +.soria .sortListAsc .sortListIcon { + background:url('../../../dijit/themes/soria/images/arrows.png') no-repeat center center; + background-position:0px 0px; +} + +.soria .sortListDesc .sortListIcon { + background-position:-32px 0px; +} diff --git a/includes/js/dojox/widget/SortList/SortList.html b/includes/js/dojox/widget/SortList/SortList.html new file mode 100644 index 0000000..32f678a --- /dev/null +++ b/includes/js/dojox/widget/SortList/SortList.html @@ -0,0 +1,9 @@ +<div class="sortList" id="${id}"> + <div class="sortListTitle" dojoAttachPoint="titleNode"> + <div class="sortListIcon"></div> + <span dojoAttachPoint="focusNode">${title}</span> + </div> + <div class="sortListBodyWrapper" dojoAttachEvent="onmouseover: _set, onmouseout: _unset, onclick:_handleClick" dojoAttachPoint="bodyWrapper"> + <ul dojoAttachPoint="containerNode" class="sortListBody"></ul> + </div> +</div>
\ No newline at end of file diff --git a/includes/js/dojox/widget/TimeSpinner.js b/includes/js/dojox/widget/TimeSpinner.js new file mode 100644 index 0000000..a60c083 --- /dev/null +++ b/includes/js/dojox/widget/TimeSpinner.js @@ -0,0 +1,48 @@ +if(!dojo._hasResource["dojox.widget.TimeSpinner"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. +dojo._hasResource["dojox.widget.TimeSpinner"] = true; +dojo.provide("dojox.widget.TimeSpinner"); + +dojo.require("dijit.form._Spinner"); +dojo.require("dijit.form.NumberTextBox"); +dojo.require("dojo.date"); +dojo.require("dojo.date.locale"); +dojo.require("dojo.date.stamp"); + +dojo.declare( +"dojox.widget.TimeSpinner", +[dijit.form._Spinner], +{ + // summary: Time Spinner + // description: This widget is the same as a normal NumberSpinner, but for the time component of a date object instead + + required: false, + + adjust: function(/* Object */ val, /*Number*/ delta){ + return dojo.date.add(val, "minute", delta) + }, + + //FIXME should we allow for constraints in this widget? + isValid: function(){return true;}, + + smallDelta: 5, + + largeDelta: 30, + + timeoutChangeRate: 0.50, + + parse: function(time, locale){ + return dojo.date.locale.parse(time, {selector:"time", formatLength:"short"}); + }, + + format: function(time, locale){ + if (dojo.isString(time)) { return time; } + return dojo.date.locale.format(time, {selector:"time", formatLength:"short"}); + }, + + serialize: dojo.date.stamp.toISOString, + + value: "12:00 AM" + +}); + +} diff --git a/includes/js/dojox/widget/Toaster.js b/includes/js/dojox/widget/Toaster.js new file mode 100644 index 0000000..5505ede --- /dev/null +++ b/includes/js/dojox/widget/Toaster.js @@ -0,0 +1,268 @@ +if(!dojo._hasResource["dojox.widget.Toaster"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. +dojo._hasResource["dojox.widget.Toaster"] = true; +dojo.provide("dojox.widget.Toaster"); + +dojo.require("dojo.fx"); +dojo.require("dijit._Widget"); +dojo.require("dijit._Templated"); + +dojo.declare("dojox.widget.Toaster", [dijit._Widget, dijit._Templated], { + // summary: + // Message that slides in from the corner of the screen, used for notifications + // like "new email". + + templateString: '<div dojoAttachPoint="clipNode"><div dojoAttachPoint="containerNode" dojoAttachEvent="onclick:onSelect"><div dojoAttachPoint="contentNode"></div></div></div>', + + // messageTopic: String + // Name of topic; anything published to this topic will be displayed as a message. + // Message format is either String or an object like + // {message: "hello word", type: "error", duration: 500} + messageTopic: "", + + _uniqueId: 0, + + // messageTypes: Enumeration + // Possible message types. + messageTypes: { + MESSAGE: "message", + WARNING: "warning", + ERROR: "error", + FATAL: "fatal" + }, + + // defaultType: String + // If message type isn't specified (see "messageTopic" parameter), + // then display message as this type. + // Possible values in messageTypes enumeration ("message", "warning", "error", "fatal") + defaultType: "message", + + // positionDirection: String + // Position from which message slides into screen, one of + // ["br-up", "br-left", "bl-up", "bl-right", "tr-down", "tr-left", "tl-down", "tl-right"] + positionDirection: "br-up", + + // positionDirectionTypes: Array + // Possible values for positionDirection parameter + positionDirectionTypes: ["br-up", "br-left", "bl-up", "bl-right", "tr-down", "tr-left", "tl-down", "tl-right"], + + // duration: Integer + // Number of milliseconds to show message + duration: "2000", + + //separator: String + // String used to separate messages if consecutive calls are made to setContent before previous messages go away + separator: "<hr></hr>", + + postCreate: function(){ + this.inherited(arguments); + this.hide(); + + this.clipNode.className = "dijitToasterClip"; + this.containerNode.className += " dijitToasterContainer"; + this.contentNode.className = "dijitToasterContent"; + if(this.messageTopic){ + dojo.subscribe(this.messageTopic, this, "_handleMessage"); + } + }, + + _handleMessage: function(/*String|Object*/message){ + if(dojo.isString(message)){ + this.setContent(message); + }else{ + this.setContent(message.message, message.type, message.duration); + } + }, + + _capitalize: function(/* String */w){ + return w.substring(0,1).toUpperCase() + w.substring(1); + }, + + setContent: function(/*String*/message, /*String*/messageType, /*int?*/duration){ + // summary: + // sets and displays the given message and show duration + // message: + // the message + // messageType: + // type of message; possible values in messageTypes enumeration ("message", "warning", "error", "fatal") + // duration: + // duration in milliseconds to display message before removing it. Widget has default value. + duration = duration||this.duration; + // sync animations so there are no ghosted fades and such + if(this.slideAnim){ + if(this.slideAnim.status() != "playing"){ + this.slideAnim.stop(); + } + if(this.slideAnim.status() == "playing" || (this.fadeAnim && this.fadeAnim.status() == "playing")){ + setTimeout(dojo.hitch(this, function(){ + this.setContent(message, messageType, duration); + }), 50); + return; + } + } + + // determine type of content and apply appropriately + for(var type in this.messageTypes){ + dojo.removeClass(this.containerNode, "dijitToaster" + this._capitalize(this.messageTypes[type])); + } + + dojo.style(this.containerNode, "opacity", 1); + + if(message && this.isVisible){ + message = this.contentNode.innerHTML + this.separator + message; + } + this.contentNode.innerHTML = message; + + dojo.addClass(this.containerNode, "dijitToaster" + this._capitalize(messageType || this.defaultType)); + + // now do funky animation of widget appearing from + // bottom right of page and up + this.show(); + var nodeSize = dojo.marginBox(this.containerNode); + this._cancelHideTimer(); + if(this.isVisible){ + this._placeClip(); + //update hide timer if no sticky message in stack + if (!this._stickyMessage) + this._setHideTimer(duration); + + }else{ + var style = this.containerNode.style; + var pd = this.positionDirection; + // sets up initial position of container node and slide-out direction + if(pd.indexOf("-up") >= 0){ + style.left=0+"px"; + style.top=nodeSize.h + 10 + "px"; + }else if(pd.indexOf("-left") >= 0){ + style.left=nodeSize.w + 10 +"px"; + style.top=0+"px"; + }else if(pd.indexOf("-right") >= 0){ + style.left = 0 - nodeSize.w - 10 + "px"; + style.top = 0+"px"; + }else if(pd.indexOf("-down") >= 0){ + style.left = 0+"px"; + style.top = 0 - nodeSize.h - 10 + "px"; + }else{ + throw new Error(this.id + ".positionDirection is invalid: " + pd); + } + this.slideAnim = dojo.fx.slideTo({ + node: this.containerNode, + top: 0, left: 0, + duration: 450}); + this.connect(this.slideAnim, "onEnd", function(nodes, anim){ + //we build the fadeAnim here so we dont have to duplicate it later + // can't do a fadeHide because we're fading the + // inner node rather than the clipping node + this.fadeAnim = dojo.fadeOut({ + node: this.containerNode, + duration: 1000}); + this.connect(this.fadeAnim, "onEnd", function(evt){ + this.isVisible = false; + this.hide(); + }); + this._setHideTimer(duration); + this.connect(this, 'onSelect', function(evt){ + this._cancelHideTimer(); + //force clear sticky message + this._stickyMessage=false; + this.fadeAnim.play(); + }); + + this.isVisible = true; + }); + this.slideAnim.play(); + } + }, + + _cancelHideTimer:function(){ + if (this._hideTimer){ + clearTimeout(this._hideTimer); + this._hideTimer=null; + } + }, + + _setHideTimer:function(duration){ + this._cancelHideTimer(); + //if duration == 0 we keep the message displayed until clicked + if(duration>0){ + this._cancelHideTimer(); + this._hideTimer=setTimeout(dojo.hitch(this, function(evt){ + // we must hide the iframe in order to fade + // TODO: figure out how to fade with a BackgroundIframe + if(this.bgIframe && this.bgIframe.iframe){ + this.bgIframe.iframe.style.display="none"; + } + this._hideTimer=null; + //force clear sticky message + this._stickyMessage=false; + this.fadeAnim.play(); + }), duration); + } + else + this._stickyMessage=true; + }, + + _placeClip: function(){ + var view = dijit.getViewport(); + + var nodeSize = dojo.marginBox(this.containerNode); + + var style = this.clipNode.style; + // sets up the size of the clipping node + style.height = nodeSize.h+"px"; + style.width = nodeSize.w+"px"; + + // sets up the position of the clipping node + var pd = this.positionDirection; + if(pd.match(/^t/)){ + style.top = view.t+"px"; + }else if(pd.match(/^b/)){ + style.top = (view.h - nodeSize.h - 2 + view.t)+"px"; + } + if(pd.match(/^[tb]r-/)){ + style.left = (view.w - nodeSize.w - 1 - view.l)+"px"; + }else if(pd.match(/^[tb]l-/)){ + style.left = 0 + "px"; + } + + style.clip = "rect(0px, " + nodeSize.w + "px, " + nodeSize.h + "px, 0px)"; + if(dojo.isIE){ + if(!this.bgIframe){ + this.clipNode.id = "__dojoXToaster_"+this._uniqueId++; + this.bgIframe = new dijit.BackgroundIframe(this.clipNode); + } + var iframe = this.bgIframe.iframe; + if(iframe){ iframe.style.display="block"; } + } + }, + + onSelect: function(/*Event*/e){ + // summary: callback for when user clicks the message + }, + + show: function(){ + // summary: show the Toaster + dojo.style(this.domNode, 'display', 'block'); + + this._placeClip(); + + if(!this._scrollConnected){ + this._scrollConnected = dojo.connect(window, "onscroll", this, this._placeClip); + } + }, + + hide: function(){ + // summary: hide the Toaster + + dojo.style(this.domNode, 'display', 'none'); + + if(this._scrollConnected){ + dojo.disconnect(this._scrollConnected); + this._scrollConnected = false; + } + + dojo.style(this.containerNode, "opacity", 1); + } + } +); + +} diff --git a/includes/js/dojox/widget/Toaster/Toaster.css b/includes/js/dojox/widget/Toaster/Toaster.css new file mode 100644 index 0000000..b898452 --- /dev/null +++ b/includes/js/dojox/widget/Toaster/Toaster.css @@ -0,0 +1,39 @@ + +.dijitToasterContent { + padding:1em; + padding-top:0.25em; + background:#73c74a; +} +.dijitToasterMessage{ + color:#fff; +} +.dijitToasterWarning{ } +.dijitToasterError, +.dijitToasterFatal{ + font-weight:bold; + color:#fff; +} +.dijitToasterWarning .dijitToasterContent{ + padding:1em; + padding-top:0.25em; + background:#d4d943; +} +.dijitToasterError .dijitToasterContent{ + padding:1em; + padding-top:0.25em; + background:#c46600; +} + +.dijitToasterClip { + position: absolute; + z-index: 5000; + overflow: hidden; +} +.dijitToasterContainer { + display: block; + position: absolute; + width: 17.5em; + margin: 0px; + font:0.75em Tahoma, Helvetica, Verdana, Arial; +} + diff --git a/includes/js/dojox/widget/Toaster/Toaster.css.commented.css b/includes/js/dojox/widget/Toaster/Toaster.css.commented.css new file mode 100644 index 0000000..b933063 --- /dev/null +++ b/includes/js/dojox/widget/Toaster/Toaster.css.commented.css @@ -0,0 +1,47 @@ +/* main classes for dojox.widget.Toaster */ + +.dijitToasterContent { + padding:1em; + padding-top:0.25em; + background:#73c74a; +} + +.dijitToasterMessage{ + color:#fff; +} + +.dijitToasterWarning{ } +.dijitToasterError, +.dijitToasterFatal{ + font-weight:bold; + color:#fff; +} + +.dijitToasterWarning .dijitToasterContent{ + padding:1em; + padding-top:0.25em; + background:#d4d943; +} + +.dijitToasterError .dijitToasterContent{ + padding:1em; + padding-top:0.25em; + background:#c46600; +} + +/* imported from dijit.css */ + +.dijitToasterClip { + position: absolute; + z-index: 5000; + overflow: hidden; +} + +.dijitToasterContainer { + display: block; + position: absolute; + width: 17.5em; + margin: 0px; + font:0.75em Tahoma, Helvetica, Verdana, Arial; +} + diff --git a/includes/js/dojox/widget/Wizard.js b/includes/js/dojox/widget/Wizard.js new file mode 100644 index 0000000..b8921b1 --- /dev/null +++ b/includes/js/dojox/widget/Wizard.js @@ -0,0 +1,192 @@ +if(!dojo._hasResource["dojox.widget.Wizard"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. +dojo._hasResource["dojox.widget.Wizard"] = true; +dojo.provide("dojox.widget.Wizard"); + +dojo.require("dijit.layout.StackContainer"); +dojo.require("dijit.layout.ContentPane"); +dojo.require("dijit.form.Button"); + +dojo.require("dojo.i18n"); +dojo.requireLocalization("dijit", "common", null, "zh,pt,da,tr,ru,de,sv,ja,he,fi,nb,el,ar,ROOT,pt-pt,cs,fr,es,ko,nl,zh-tw,pl,it,hu"); +dojo.requireLocalization("dojox.widget", "Wizard", null, "zh,pt,da,tr,ru,de,sv,ja,he,fi,nb,el,ar,pt-pt,cs,fr,es,nl,ko,zh-tw,ROOT,pl,it,hu"); + +dojo.declare( + "dojox.widget.WizardContainer", + [dijit.layout.StackContainer,dijit._Templated], + { + // summary: + // A set of panels that display sequentially, typically notating a step-by-step + // procedure like an install + // + + widgetsInTemplate: true, + templateString:"<div class=\"dojoxWizard\" dojoAttachPoint=\"wizardNode\">\n <div class=\"dojoxWizardContainer\" dojoAttachPoint=\"containerNode\"></div>\n <div class=\"dojoxWizardButtons\" dojoAttachPoint=\"wizardNav\">\n <button dojoType=\"dijit.form.Button\" dojoAttachPoint=\"previousButton\">${previousButtonLabel}</button>\n <button dojoType=\"dijit.form.Button\" dojoAttachPoint=\"nextButton\">${nextButtonLabel}</button>\n <button dojoType=\"dijit.form.Button\" dojoAttachPoint=\"doneButton\" style=\"display:none\">${doneButtonLabel}</button>\n <button dojoType=\"dijit.form.Button\" dojoAttachPoint=\"cancelButton\">${cancelButtonLabel}</button>\n </div>\n</div>\n", + + // nextButtonLabel: String + // Label override for the "Next" button. + nextButtonLabel: "", + + // previousButtonLabel: String + // Label override for the "Previous" button. + previousButtonLabel: "", + + // cancelButtonLabel: String + // Label override for the "Cancel" button. + cancelButtonLabel: "", + + // doneButtonLabel: String + // Label override for the "Done" button. + doneButtonLabel: "", + + // cancelFunction: FunctionName + // Name of function to call if user presses cancel button. + // Cancel button is not displayed if function is not specified. + cancelFunction: "", + + // hideDisabled: Boolean + // If true, disabled buttons are hidden; otherwise, they are assigned the + // "WizardButtonDisabled" CSS class + hideDisabled: false, + + postMixInProperties: function(){ + this.inherited(arguments); + var labels = dojo.mixin({cancel: dojo.i18n.getLocalization("dijit", "common", this.lang).buttonCancel}, + dojo.i18n.getLocalization("dojox.widget", "Wizard", this.lang)); + for(prop in labels){ + if(!this[prop + "ButtonLabel"]){ + this[prop + "ButtonLabel"] = labels[prop]; + } + } + }, + + startup: function(){ + this.inherited(arguments); + + this.connect(this.nextButton, "onClick", "_forward"); + this.connect(this.previousButton, "onClick", "back"); + + if(this.cancelFunction){ + this.cancelFunction = dojo.getObject(this.cancelFunction); + this.connect(this.cancelButton, "onClick", this.cancelFunction); + }else{ + this.cancelButton.domNode.style.display = "none"; + } + this.connect(this.doneButton, "onClick", "done"); + + this._subscription = dojo.subscribe(this.id+"-selectChild", dojo.hitch(this,"_checkButtons")); + this._checkButtons(); + }, + + _checkButtons: function(){ + + var sw = this.selectedChildWidget; + + var lastStep = sw.isLastChild; + this.nextButton.setAttribute("disabled", lastStep); + this._setButtonClass(this.nextButton); + if(sw.doneFunction){ + this.doneButton.domNode.style.display = ""; + if(lastStep){ + this.nextButton.domNode.style.display = "none"; + } + }else{ + // #1438 issue here. + this.doneButton.domNode.style.display = "none"; + } + this.previousButton.setAttribute("disabled", !this.selectedChildWidget.canGoBack); + this._setButtonClass(this.previousButton); + }, + + _setButtonClass: function(button){ + button.domNode.style.display = (this.hideDisabled && button.disabled) ? "none" : ""; + }, + + _forward: function(){ + // summary: callback when next button is clicked + if(this.selectedChildWidget._checkPass()){ + this.forward(); + } + }, + + done: function(){ + // summary: Finish the wizard's operation + this.selectedChildWidget.done(); + }, + + destroy: function(){ + dojo.unsubscribe(this._subscription); + this.inherited(arguments); + } +}); + +dojo.declare( + "dojox.widget.WizardPane", + dijit.layout.ContentPane, + { + // summary: a panel in a WizardContainer + // + // description: + // An extended ContentPane with additional hooks for passing named + // functions to prevent the pane from going either forward or + // backwards. + // + // canGoBack: Boolean + // If true, then can move back to a previous panel (by clicking the "Previous" button) + canGoBack: true, + + // passFunction: String + // Name of function that checks if it's OK to advance to the next panel. + // If it's not OK (for example, mandatory field hasn't been entered), then + // returns an error message (String) explaining the reason. + passFunction: "", + + // doneFunction: String + // Name of function that is run if you press the "Done" button from this panel + doneFunction: "", + + postMixInProperties: function(){ + if(this.passFunction){ + this.passFunction = dojo.getObject(this.passFunction); + } + if(this.doneFunction){ + this.doneFunction = dojo.getObject(this.doneFunction); + } + this.inherited(arguments); + }, + + startup: function(){ + this.inherited(arguments); + if(this.isFirstChild){ this.canGoBack = false; } + }, + + _checkPass: function(){ + // summary: + // Called when the user presses the "next" button. + // Calls passFunction to see if it's OK to advance to next panel, and + // if it isn't, then display error. + // Returns true to advance, false to not advance. + var r = true; + if(this.passFunction && dojo.isFunction(this.passFunction)){ + var failMessage = this.passFunction(); + switch(typeof failMessage){ + case "boolean": + r = failMessage; + break; + case "string": + alert(failMessage); + r = false; + break; + } + } + return r; + }, + + done: function(){ + if(this.doneFunction && dojo.isFunction(this.doneFunction)){ + this.doneFunction(); + } + } + +}); + +} diff --git a/includes/js/dojox/widget/Wizard/Wizard.css b/includes/js/dojox/widget/Wizard/Wizard.css new file mode 100644 index 0000000..f1a9177 --- /dev/null +++ b/includes/js/dojox/widget/Wizard/Wizard.css @@ -0,0 +1,19 @@ +.dojoxWizard { + position:relative; +} +.dojoxWizardButtons { + position:absolute; + bottom:5px; + right:5px; +} +.tundra .dojoxWizard { + background: #eeeeee; + border: #b7b7b7 1px solid; + padding: 2px; + -moz-border-radius:3pt; + -webkit-border-radius:4pt; +} +.soria .dojoxWizard { + border:1px solid #b7b7b7; + padding:2px; +} diff --git a/includes/js/dojox/widget/Wizard/Wizard.css.commented.css b/includes/js/dojox/widget/Wizard/Wizard.css.commented.css new file mode 100644 index 0000000..61340f5 --- /dev/null +++ b/includes/js/dojox/widget/Wizard/Wizard.css.commented.css @@ -0,0 +1,22 @@ +.dojoxWizard { + position:relative; +} + +.dojoxWizardButtons { + position:absolute; + bottom:5px; + right:5px; +} + +.tundra .dojoxWizard { + background: #eeeeee; + border: #b7b7b7 1px solid; + padding: 2px; + -moz-border-radius:3pt; + -webkit-border-radius:4pt; +} + +.soria .dojoxWizard { + border:1px solid #b7b7b7; + padding:2px; +} diff --git a/includes/js/dojox/widget/Wizard/Wizard.html b/includes/js/dojox/widget/Wizard/Wizard.html new file mode 100644 index 0000000..1ae6a1e --- /dev/null +++ b/includes/js/dojox/widget/Wizard/Wizard.html @@ -0,0 +1,9 @@ +<div class="dojoxWizard" dojoAttachPoint="wizardNode"> + <div class="dojoxWizardContainer" dojoAttachPoint="containerNode"></div> + <div class="dojoxWizardButtons" dojoAttachPoint="wizardNav"> + <button dojoType="dijit.form.Button" dojoAttachPoint="previousButton">${previousButtonLabel}</button> + <button dojoType="dijit.form.Button" dojoAttachPoint="nextButton">${nextButtonLabel}</button> + <button dojoType="dijit.form.Button" dojoAttachPoint="doneButton" style="display:none">${doneButtonLabel}</button> + <button dojoType="dijit.form.Button" dojoAttachPoint="cancelButton">${cancelButtonLabel}</button> + </div> +</div> diff --git a/includes/js/dojox/widget/nls/Wizard.js b/includes/js/dojox/widget/nls/Wizard.js new file mode 100644 index 0000000..ec10f3f --- /dev/null +++ b/includes/js/dojox/widget/nls/Wizard.js @@ -0,0 +1 @@ +({"next":"Next","done":"Done","previous":"Previous"})
\ No newline at end of file diff --git a/includes/js/dojox/widget/nls/ar/Wizard.js b/includes/js/dojox/widget/nls/ar/Wizard.js new file mode 100644 index 0000000..66209a5 --- /dev/null +++ b/includes/js/dojox/widget/nls/ar/Wizard.js @@ -0,0 +1 @@ +({"next":"تالي","done":"اتمام","previous":"سابق"})
\ No newline at end of file diff --git a/includes/js/dojox/widget/nls/cs/Wizard.js b/includes/js/dojox/widget/nls/cs/Wizard.js new file mode 100644 index 0000000..4075772 --- /dev/null +++ b/includes/js/dojox/widget/nls/cs/Wizard.js @@ -0,0 +1 @@ +({"next":"Další","done":"Hotovo","previous":"Předchozí"})
\ No newline at end of file diff --git a/includes/js/dojox/widget/nls/da/Wizard.js b/includes/js/dojox/widget/nls/da/Wizard.js new file mode 100644 index 0000000..a3b161f --- /dev/null +++ b/includes/js/dojox/widget/nls/da/Wizard.js @@ -0,0 +1 @@ +({"next":"Næste","done":"Udført","previous":"Foregående"})
\ No newline at end of file diff --git a/includes/js/dojox/widget/nls/de/Wizard.js b/includes/js/dojox/widget/nls/de/Wizard.js new file mode 100644 index 0000000..a7f2164 --- /dev/null +++ b/includes/js/dojox/widget/nls/de/Wizard.js @@ -0,0 +1 @@ +({"next":"Weiter","done":"Fertig","previous":"Zurück"})
\ No newline at end of file diff --git a/includes/js/dojox/widget/nls/el/Wizard.js b/includes/js/dojox/widget/nls/el/Wizard.js new file mode 100644 index 0000000..6a25346 --- /dev/null +++ b/includes/js/dojox/widget/nls/el/Wizard.js @@ -0,0 +1 @@ +({"next":"Επόμενο","done":"Ολοκλήρωση","previous":"Προηγούμενο"})
\ No newline at end of file diff --git a/includes/js/dojox/widget/nls/es/Wizard.js b/includes/js/dojox/widget/nls/es/Wizard.js new file mode 100644 index 0000000..aab5661 --- /dev/null +++ b/includes/js/dojox/widget/nls/es/Wizard.js @@ -0,0 +1 @@ +({"next":"Siguiente","done":"Terminado","previous":"Anterior"})
\ No newline at end of file diff --git a/includes/js/dojox/widget/nls/fi/Wizard.js b/includes/js/dojox/widget/nls/fi/Wizard.js new file mode 100644 index 0000000..ea6a9db --- /dev/null +++ b/includes/js/dojox/widget/nls/fi/Wizard.js @@ -0,0 +1 @@ +({"next":"Seuraava","done":"Valmis","previous":"Edellinen"})
\ No newline at end of file diff --git a/includes/js/dojox/widget/nls/fr/Wizard.js b/includes/js/dojox/widget/nls/fr/Wizard.js new file mode 100644 index 0000000..779919e --- /dev/null +++ b/includes/js/dojox/widget/nls/fr/Wizard.js @@ -0,0 +1 @@ +({"next":"Suivant","done":"Terminé","previous":"Précédent"})
\ No newline at end of file diff --git a/includes/js/dojox/widget/nls/he/Wizard.js b/includes/js/dojox/widget/nls/he/Wizard.js new file mode 100644 index 0000000..e5ee2ee --- /dev/null +++ b/includes/js/dojox/widget/nls/he/Wizard.js @@ -0,0 +1 @@ +({"next":"הבא","done":"סיום","previous":"הקודם"})
\ No newline at end of file diff --git a/includes/js/dojox/widget/nls/hu/Wizard.js b/includes/js/dojox/widget/nls/hu/Wizard.js new file mode 100644 index 0000000..6ad86c7 --- /dev/null +++ b/includes/js/dojox/widget/nls/hu/Wizard.js @@ -0,0 +1 @@ +({"next":"Következő","done":"Kész","previous":"Előző"})
\ No newline at end of file diff --git a/includes/js/dojox/widget/nls/it/Wizard.js b/includes/js/dojox/widget/nls/it/Wizard.js new file mode 100644 index 0000000..78ea64b --- /dev/null +++ b/includes/js/dojox/widget/nls/it/Wizard.js @@ -0,0 +1 @@ +({"next":"Successivo","done":"Eseguito","previous":"Precedente"})
\ No newline at end of file diff --git a/includes/js/dojox/widget/nls/ja/Wizard.js b/includes/js/dojox/widget/nls/ja/Wizard.js new file mode 100644 index 0000000..6394cb3 --- /dev/null +++ b/includes/js/dojox/widget/nls/ja/Wizard.js @@ -0,0 +1 @@ +({"next":"次へ","done":"完了","previous":"前へ"})
\ No newline at end of file diff --git a/includes/js/dojox/widget/nls/ko/Wizard.js b/includes/js/dojox/widget/nls/ko/Wizard.js new file mode 100644 index 0000000..dec3546 --- /dev/null +++ b/includes/js/dojox/widget/nls/ko/Wizard.js @@ -0,0 +1 @@ +({"next":"다음","done":"완료","previous":"이전"})
\ No newline at end of file diff --git a/includes/js/dojox/widget/nls/nb/Wizard.js b/includes/js/dojox/widget/nls/nb/Wizard.js new file mode 100644 index 0000000..0cbe813 --- /dev/null +++ b/includes/js/dojox/widget/nls/nb/Wizard.js @@ -0,0 +1 @@ +({"next":"Neste","done":"Ferdig","previous":"Forrige"})
\ No newline at end of file diff --git a/includes/js/dojox/widget/nls/nl/Wizard.js b/includes/js/dojox/widget/nls/nl/Wizard.js new file mode 100644 index 0000000..d5e680f --- /dev/null +++ b/includes/js/dojox/widget/nls/nl/Wizard.js @@ -0,0 +1 @@ +({"next":"Volgende","done":"Klaar","previous":"Vorige"})
\ No newline at end of file diff --git a/includes/js/dojox/widget/nls/pl/Wizard.js b/includes/js/dojox/widget/nls/pl/Wizard.js new file mode 100644 index 0000000..c7dc6a1 --- /dev/null +++ b/includes/js/dojox/widget/nls/pl/Wizard.js @@ -0,0 +1 @@ +({"next":"Dalej","done":"Gotowe","previous":"Wstecz"})
\ No newline at end of file diff --git a/includes/js/dojox/widget/nls/pt-pt/Wizard.js b/includes/js/dojox/widget/nls/pt-pt/Wizard.js new file mode 100644 index 0000000..2b6bb1e --- /dev/null +++ b/includes/js/dojox/widget/nls/pt-pt/Wizard.js @@ -0,0 +1 @@ +({"next":"Seguinte","done":"Concluído","previous":"Anterior"})
\ No newline at end of file diff --git a/includes/js/dojox/widget/nls/pt/Wizard.js b/includes/js/dojox/widget/nls/pt/Wizard.js new file mode 100644 index 0000000..1840985 --- /dev/null +++ b/includes/js/dojox/widget/nls/pt/Wizard.js @@ -0,0 +1 @@ +({"next":"Avançar","done":"Concluído","previous":"Voltar"})
\ No newline at end of file diff --git a/includes/js/dojox/widget/nls/ru/Wizard.js b/includes/js/dojox/widget/nls/ru/Wizard.js new file mode 100644 index 0000000..bbc1b51 --- /dev/null +++ b/includes/js/dojox/widget/nls/ru/Wizard.js @@ -0,0 +1 @@ +({"next":"Далее","done":"Готово","previous":"Назад"})
\ No newline at end of file diff --git a/includes/js/dojox/widget/nls/sv/Wizard.js b/includes/js/dojox/widget/nls/sv/Wizard.js new file mode 100644 index 0000000..ae75b03 --- /dev/null +++ b/includes/js/dojox/widget/nls/sv/Wizard.js @@ -0,0 +1 @@ +({"next":"Nästa","done":"Stäng","previous":"Föregående"})
\ No newline at end of file diff --git a/includes/js/dojox/widget/nls/tr/Wizard.js b/includes/js/dojox/widget/nls/tr/Wizard.js new file mode 100644 index 0000000..752b8ac --- /dev/null +++ b/includes/js/dojox/widget/nls/tr/Wizard.js @@ -0,0 +1 @@ +({"next":"İleri","done":"Bitti","previous":"Geri"})
\ No newline at end of file diff --git a/includes/js/dojox/widget/nls/zh-tw/Wizard.js b/includes/js/dojox/widget/nls/zh-tw/Wizard.js new file mode 100644 index 0000000..fe45203 --- /dev/null +++ b/includes/js/dojox/widget/nls/zh-tw/Wizard.js @@ -0,0 +1 @@ +({"next":"下一步","done":"完成","previous":"上一步"})
\ No newline at end of file diff --git a/includes/js/dojox/widget/nls/zh/Wizard.js b/includes/js/dojox/widget/nls/zh/Wizard.js new file mode 100644 index 0000000..fe45203 --- /dev/null +++ b/includes/js/dojox/widget/nls/zh/Wizard.js @@ -0,0 +1 @@ +({"next":"下一步","done":"完成","previous":"上一步"})
\ No newline at end of file diff --git a/includes/js/dojox/widget/tests/_tags.json b/includes/js/dojox/widget/tests/_tags.json new file mode 100644 index 0000000..421031a --- /dev/null +++ b/includes/js/dojox/widget/tests/_tags.json @@ -0,0 +1,100 @@ +{identifier:"tag", +items: [ + {tag: "accounting"}, + {tag: "attorney"}, + {tag: "atv"}, + {tag: "backcountry"}, + {tag: "bakery"}, + {tag: "bandb"}, + {tag: "bank"}, + {tag: "bar"}, + {tag: "bicycle"}, + {tag: "cabin"}, + {tag: "cabinoutside"}, + {tag: "camp"}, + {tag: "campoutside"}, + {tag: "catering"}, + {tag: "chamber"}, + {tag: "church"}, + {tag: "city"}, + {tag: "classes"}, + {tag: "coffeehouse"}, + {tag: "condo"}, + {tag: "condooutside"}, + {tag: "conference"}, + {tag: "county"}, + {tag: "crosscountryski"}, + {tag: "dentist"}, + {tag: "dining"}, + {tag: "fishing"}, + {tag: "gallery"}, + {tag: "general"}, + {tag: "golf"}, + {tag: "graphicart"}, + {tag: "grocery"}, + {tag: "guideservice"}, + {tag: "hair"}, + {tag: "health"}, + {tag: "home"}, + {tag: "homeoutside"}, + {tag: "horse"}, + {tag: "hotel"}, + {tag: "hoteloutside"}, + {tag: "hotsprings"}, + {tag: "hotspringspool"}, + {tag: "hunting"}, + {tag: "iceclimbing"}, + {tag: "iceskating"}, + {tag: "inspection"}, + {tag: "insurance"}, + {tag: "internet"}, + {tag: "jeeping"}, + {tag: "jewelry"}, + {tag: "live"}, + {tag: "liveentertainment"}, + {tag: "lodging"}, + {tag: "manicure"}, + {tag: "manufacturing"}, + {tag: "maps"}, + {tag: "massage"}, + {tag: "menu:aboutouray"}, + {tag: "menu:recreation"}, + {tag: "minetour"}, + {tag: "mining"}, + {tag: "mountaineering"}, + {tag: "museum"}, + {tag: "nonprofit"}, + {tag: "offroad"}, + {tag: "online"}, + {tag: "ouraymuseum"}, + {tag: "park"}, + {tag: "performingarts"}, + {tag: "pet"}, + {tag: "pharmacy"}, + {tag: "photographer"}, + {tag: "photography"}, + {tag: "printing"}, + {tag: "publishing"}, + {tag: "rafting"}, + {tag: "railroad"}, + {tag: "realestate"}, + {tag: "recreation"}, + {tag: "rentals"}, + {tag: "retail"}, + {tag: "rockclimbing"}, + {tag: "rv"}, + {tag: "rvoutside"}, + {tag: "school"}, + {tag: "shop"}, + {tag: "skirentals"}, + {tag: "snowmobiling"}, + {tag: "spa"}, + {tag: "summer"}, + {tag: "tours"}, + {tag: "trails"}, + {tag: "utility"}, + {tag: "waterfall"}, + {tag: "wedding"}, + {tag: "weddingplanner"}, + {tag: "winter"} +]} diff --git a/includes/js/dojox/widget/tests/demo_FisheyeList-orig.html b/includes/js/dojox/widget/tests/demo_FisheyeList-orig.html new file mode 100644 index 0000000..a36d32c --- /dev/null +++ b/includes/js/dojox/widget/tests/demo_FisheyeList-orig.html @@ -0,0 +1,111 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>FisheyeList Widget Demonstration</title> + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../../../dijit/themes/tundra/tundra.css"; + @import "../FisheyeList/FisheyeList.css"; + + .dojoxFisheyeListBar { + margin: 0 auto; + text-align: center; + } + + .outerbar { + background-color: #666; + text-align: center; + position: absolute; + left: 0px; + top: 0px; + width: 100%; + border-bottom:2px solid #333; + } + + body { + font-family: Arial, Helvetica, sans-serif; + padding: 0; + margin: 0; + background-color:#fff; + background-image:none; + } + + .page { + padding: 50px 20px 20px 20px; + } + + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:false, parseOnLoad: true"></script> + <script type="text/javascript"> + dojo.require("dojox.widget.FisheyeList"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + + function load_app(id){ + alert('icon '+id+' was clicked'); + } + + </script> +</head> +<body class="tundra"><div class="outerbar"> + <div dojoType="dojox.widget.FisheyeList" + itemWidth="50" itemHeight="50" + itemMaxWidth="200" itemMaxHeight="200" + orientation="horizontal" + effectUnits="2" + itemPadding="10" + attachEdge="top" + labelEdge="bottom" + id="fisheye1" + > + <div dojoType="dojox.widget.FisheyeListItem" + id="item1" + onclick="alert('click on ' + this.label + '(from widget id ' + this.widgetid + ')!');" + label="Item 1" + iconSrc="images/icon_browser.png"> + </div> + + <div dojoType="dojox.widget.FisheyeListItem" + label="Item 2" + iconSrc="images/icon_calendar.png"> + </div> + + <div dojoType="dojox.widget.FisheyeListItem" + label="Item 3" + onclick="alert('click on ' + this.label + '(from widget id ' + this.widgetid + ')!');" + iconSrc="images/icon_email.png"> + </div> + + <div dojoType="dojox.widget.FisheyeListItem" + iconSrc="images/icon_texteditor.png"> + </div> + + <div dojoType="dojox.widget.FisheyeListItem" + label="Really Long Item Label" + iconSrc="images/icon_update.png"> + </div> + + <div dojoType="dojox.widget.FisheyeListItem" + iconSrc="images/icon_users.png"> + </div> +</div></div> + +<div class="page"> + <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam facilisis enim. Pellentesque in elit et lacus euismod dignissim. Aliquam dolor pede, convallis eget, dictum a, blandit ac, urna. Pellentesque sed nunc ut justo volutpat egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. In erat. Suspendisse potenti. Fusce faucibus nibh sed nisi. Phasellus faucibus, dui a cursus dapibus, mauris nulla euismod velit, a lobortis turpis arcu vel dui. Pellentesque fermentum ultrices pede. Donec auctor lectus eu arcu. Curabitur non orci eget est porta gravida. Aliquam pretium orci id nisi. Duis faucibus, mi non adipiscing venenatis, erat urna aliquet elit, eu fringilla lacus tellus quis erat. Nam tempus ornare lorem. Nullam feugiat.</p> + + <p>Sed congue. Aenean blandit sollicitudin mi. Maecenas pellentesque. Vivamus ac urna. Nunc consequat nisi vitae quam. Suspendisse sed nunc. Proin suscipit porta magna. Duis accumsan nunc in velit. Nam et nibh. Nulla facilisi. Cras venenatis urna et magna. Aenean magna mauris, bibendum sit amet, semper quis, aliquet nec, sapien. Aliquam aliquam odio quis erat. Etiam est nisi, condimentum non, lacinia ac, vehicula laoreet, elit. Sed interdum augue sit amet quam dapibus semper. Nulla facilisi. Pellentesque lobortis erat nec quam.</p> + + <p>Sed arcu magna, molestie at, fringilla in, sodales eu, elit. Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus ut elit convallis eleifend. Fusce tincidunt, justo quis tempus euismod, magna nulla viverra libero, sit amet lacinia odio diam id risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu, porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac, faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu, consequat quis, varius interdum, nulla. Donec neque tortor, sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean ut eros sit amet ante pharetra interdum.</p> + + <p>Fusce rutrum pede eget quam. Praesent purus. Aenean at elit in sem volutpat facilisis. Nunc est augue, commodo at, pretium a, fermentum at, quam. Nam sit amet enim. Suspendisse potenti. Cras hendrerit rhoncus justo. Integer libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam erat volutpat. Sed adipiscing mi vel ipsum.</p> + + <p>Sed aliquam, quam consectetuer condimentum bibendum, neque libero commodo metus, non consectetuer magna risus vitae eros. Pellentesque mollis augue id libero. Morbi nonummy hendrerit dui. Morbi nisi felis, fringilla ac, euismod vitae, dictum mollis, pede. Integer suscipit, est sed posuere ullamcorper, ipsum lectus interdum nunc, quis blandit erat eros hendrerit pede. Vestibulum varius, elit id mattis mattis, nulla est feugiat ante, eget vestibulum augue eros ut odio. Maecenas euismod purus quis felis. Ut hendrerit tincidunt est. Fusce euismod, nunc eu tempus tempor, purus ligula volutpat tellus, nec lacinia sapien enim id risus. Aliquam orci turpis, condimentum sed, sollicitudin vel, placerat in, purus. Proin tortor nisl, blandit quis, imperdiet quis, scelerisque at, nisl. Maecenas suscipit fringilla erat. Curabitur consequat, dui blandit suscipit dictum, felis lectus imperdiet tellus, sit amet ornare risus mauris non ipsum. Fusce a purus. Vestibulum sodales. Sed porta ultrices nibh. Vestibulum metus.</p> + + +</div> + + + +</body> +</html> diff --git a/includes/js/dojox/widget/tests/demo_FisheyeList.html b/includes/js/dojox/widget/tests/demo_FisheyeList.html new file mode 100644 index 0000000..703fc55 --- /dev/null +++ b/includes/js/dojox/widget/tests/demo_FisheyeList.html @@ -0,0 +1,117 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>FisheyeList Widget Demonstration</title> + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../../../dijit/themes/tundra/tundra.css"; + + .fisheyebar { + width:550px; + margin: 0 auto; + text-align: center; + } + + .outerbar { + background-color: #666; + text-align: center; + position: absolute; + left: 0px; + top: 0px; + width: 100%; + height:85px; + border-bottom:2px solid #333; + } + + body { + font-family: Arial, Helvetica, sans-serif; + padding: 0; + margin: 0; + background-color:#fff; + background-image:none; + } + + .page { + padding: 85px 20px 20px 20px; + } + .outerbar img { + top:0; + position:relative; + vertical-align:super; + float:left; + } + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:false, parseOnLoad: true"></script> + <script type="text/javascript"> + dojo.require("dojox.widget.FisheyeLite"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + + function load_app(id){ + alert('icon '+id+' was clicked'); + } + + </script> +</head> +<body class="tundra"><div class="outerbar"> + <div class="fisheyebar"> + <img dojoType="dojox.widget.FisheyeLite" + style="width:75px; height:75px" + properties="{ width:1.65, height:1.65 }" + onClick="alert('click on ' + this.label + '(from widget id ' + this.widgetid + ')!');" + src="images/icon_browser.png" + /> + + <img dojoType="dojox.widget.FisheyeLite" + label="Item 2" + src="images/icon_calendar.png" + style="width:75px; height:75px" + properties="{ width:1.65, height:1.65 }" + /> + + <img dojoType="dojox.widget.FisheyeLite" + label="Item 3" + style="width:75px; height:75px" + properties="{ width:1.55, height:1.65 }" + onClick="alert('click on ' + this.label + '(from widget id ' + this.widgetid + ')!');" + src="images/icon_email.png" + /> + + <img dojoType="dojox.widget.FisheyeLite" + src="images/icon_texteditor.png" style="width:75px; height:75px" + properties="{ width:1.65, height:1.65 }" + /> + + <img dojoType="dojox.widget.FisheyeLite" + label="Really Long Item Label" + src="images/icon_update.png" + style="width:75px; height:75px" + properties="{ width:1.65, height:1.65 }" + /> + + <img dojoType="dojox.widget.FisheyeLite" + src="images/icon_users.png" + style="width:75px; height:75px" + properties="{ width:1.75, height:1.75 }" + /> +</div></div> + +<div class="page"> + <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam facilisis enim. Pellentesque in elit et lacus euismod dignissim. Aliquam dolor pede, convallis eget, dictum a, blandit ac, urna. Pellentesque sed nunc ut justo volutpat egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. In erat. Suspendisse potenti. Fusce faucibus nibh sed nisi. Phasellus faucibus, dui a cursus dapibus, mauris nulla euismod velit, a lobortis turpis arcu vel dui. Pellentesque fermentum ultrices pede. Donec auctor lectus eu arcu. Curabitur non orci eget est porta gravida. Aliquam pretium orci id nisi. Duis faucibus, mi non adipiscing venenatis, erat urna aliquet elit, eu fringilla lacus tellus quis erat. Nam tempus ornare lorem. Nullam feugiat.</p> + + <p>Sed congue. Aenean blandit sollicitudin mi. Maecenas pellentesque. Vivamus ac urna. Nunc consequat nisi vitae quam. Suspendisse sed nunc. Proin suscipit porta magna. Duis accumsan nunc in velit. Nam et nibh. Nulla facilisi. Cras venenatis urna et magna. Aenean magna mauris, bibendum sit amet, semper quis, aliquet nec, sapien. Aliquam aliquam odio quis erat. Etiam est nisi, condimentum non, lacinia ac, vehicula laoreet, elit. Sed interdum augue sit amet quam dapibus semper. Nulla facilisi. Pellentesque lobortis erat nec quam.</p> + + <p>Sed arcu magna, molestie at, fringilla in, sodales eu, elit. Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus ut elit convallis eleifend. Fusce tincidunt, justo quis tempus euismod, magna nulla viverra libero, sit amet lacinia odio diam id risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu, porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac, faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu, consequat quis, varius interdum, nulla. Donec neque tortor, sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean ut eros sit amet ante pharetra interdum.</p> + + <p>Fusce rutrum pede eget quam. Praesent purus. Aenean at elit in sem volutpat facilisis. Nunc est augue, commodo at, pretium a, fermentum at, quam. Nam sit amet enim. Suspendisse potenti. Cras hendrerit rhoncus justo. Integer libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam erat volutpat. Sed adipiscing mi vel ipsum.</p> + + <p>Sed aliquam, quam consectetuer condimentum bibendum, neque libero commodo metus, non consectetuer magna risus vitae eros. Pellentesque mollis augue id libero. Morbi nonummy hendrerit dui. Morbi nisi felis, fringilla ac, euismod vitae, dictum mollis, pede. Integer suscipit, est sed posuere ullamcorper, ipsum lectus interdum nunc, quis blandit erat eros hendrerit pede. Vestibulum varius, elit id mattis mattis, nulla est feugiat ante, eget vestibulum augue eros ut odio. Maecenas euismod purus quis felis. Ut hendrerit tincidunt est. Fusce euismod, nunc eu tempus tempor, purus ligula volutpat tellus, nec lacinia sapien enim id risus. Aliquam orci turpis, condimentum sed, sollicitudin vel, placerat in, purus. Proin tortor nisl, blandit quis, imperdiet quis, scelerisque at, nisl. Maecenas suscipit fringilla erat. Curabitur consequat, dui blandit suscipit dictum, felis lectus imperdiet tellus, sit amet ornare risus mauris non ipsum. Fusce a purus. Vestibulum sodales. Sed porta ultrices nibh. Vestibulum metus.</p> + + +</div> + + + +</body> +</html> diff --git a/includes/js/dojox/widget/tests/demo_FisheyeLite.html b/includes/js/dojox/widget/tests/demo_FisheyeLite.html new file mode 100644 index 0000000..e937698 --- /dev/null +++ b/includes/js/dojox/widget/tests/demo_FisheyeLite.html @@ -0,0 +1,175 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>A responsive Fisheye-like FisheyeLite widget | The Dojo Toolkit</title> + <style type="text/css"> + @import "../../../dijit/themes/tundra/tundra.css"; + @import "../../../dojox/layout/resources/RadioGroup.css"; + body, html { margin:0; padding:0; width:100%; + font-family:Arial,sans-serif; + } + + #content { + height:300px; + border-left:1px solid #333; + border-right:1px solid #333; + } + + #container { + top:150px; + width:720px; + margin:0 auto; + } + #header { + position:relative; + height:90px; + border-bottom:1px solid #dedede; + } + #dojoLink, #dijitLink, #dojoxLink { + background:#dedede; + position:absolute; + bottom:0; + width:200px; + padding:0; + cursor:pointer; + } + #dojoLink { + left:20px; + } + #dojoxLink { + left:460px; + } + #dijitLink { + left:240px; + } + .fisheyeTarget { + position:relative; + bottom:0; + left:0; + height:1px; + width:1px; + cursor:pointer; + } + .inner { + cursor:pointer; + position:absolute; + bottom:5px; + margin-left:10px; + } + .subtext { + visibility:hidden; + position:absolute; + bottom:27px; + left:10px; + font:8pt Arial,sans-serif; + color:#666; + } + .cpContent { + padding:15px; + } + .cp { + background:#bebebe; + color:#666; + } + </style> + <script type="text/javascript"> + var djConfig = { isDebug:true, parseOnLoad:true }; + </script> + <script type="text/javascript" src="../../../dojo/dojo.js"></script> + <script type="text/javascript" src="../FisheyeLite.js"></script> + <script type="text/javascript"> + dojo.require("dojo.parser"); + dojo.require("dijit.layout.ContentPane"); + dojo.require("dojox.layout.RadioGroup"); + dojo.require("dojox.widget.FisheyeLite"); + dojo.require("dojox.fx.easing"); + dojo.addOnLoad(function(){ + dojo.query(".headLink").forEach(function(n){ + + var linkto = dojo.attr(n,"id") + "Pane"; + + var widget = new dojox.widget.FisheyeLite({ + properties: { + height:45 + }, + easeOut:dojox.fx.easing.bounceOut, + durationOut:700 + },n); + + var myTarget = dojo.query(".subtext",n)[0]; + if(myTarget){ + + dojo.style(myTarget,{ opacity:"0", visibility:"visible" }); + + var _anim = null; + dojo.connect(widget,"show",function(e){ + _anim && _anim.status && _anim.stop(); + _anim = dojo.fadeIn({ node: myTarget, duration:250 }); + _anim.play(); + }); + dojo.connect(widget,"hide",function(e){ + _anim && _anim.status && _anim.stop(); + _anim = dojo.fadeOut({ node: myTarget, duration:250 }); + _anim.play(); + }); + } + + dojo.connect(n,"onclick",function(e){ + dijit.byId("content").selectChild(dijit.byId(linkto)); + }); + + }); + + dojo.query(".cp").instantiate(dijit.layout.ContentPane); + dojo.query("#content").forEach(function(n){ + new dojox.layout.RadioGroupSlide({ + hasButtons:false + },n).startup(); + }); + }); + </script> + </head> + <body class="tundra"> + + <div id="container"> + <div> + <h2>The Dojo Toolkit:</h2> + </div> + <div id="header"> + <div class="headLink" id="dojoLink"> + <div class="fisheyeTarget"></div> + <div class="inner">Dojo Base</div> + <span class="subtext">the JavaScript Toolkit</span> + </div> + <div class="headLink" id="dijitLink"> + <div class="fisheyeTarget"></div> + <div class="inner">Dijit</div> + <span class="subtext">Themeable, extensible widget system</span> + </div> + <div class="headLink" id="dojoxLink"> + <div class="fisheyeTarget"></div> + <div class="inner">DojoX</div> + <span class="subtext">Extensions, experiments, and extras</span> + </div> + </div> + <div id="content"> + <div class="cp" id="dojoLinkPane"> + <div class="cpContent"> + Dojo Pane + </div> + </div> + <div class="cp" id="dijitLinkPane"> + <div class="cpContent"> + Dijit Pane + </div> + </div> + <div class="cp" id="dojoxLinkPane"> + <div class="cpContent"> + DojoX Pane + </div> + </div> + </div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/includes/js/dojox/widget/tests/images/fisheye_1.png b/includes/js/dojox/widget/tests/images/fisheye_1.png Binary files differnew file mode 100644 index 0000000..7499dcc --- /dev/null +++ b/includes/js/dojox/widget/tests/images/fisheye_1.png diff --git a/includes/js/dojox/widget/tests/images/fisheye_2.png b/includes/js/dojox/widget/tests/images/fisheye_2.png Binary files differnew file mode 100644 index 0000000..2db041b --- /dev/null +++ b/includes/js/dojox/widget/tests/images/fisheye_2.png diff --git a/includes/js/dojox/widget/tests/images/fisheye_3.png b/includes/js/dojox/widget/tests/images/fisheye_3.png Binary files differnew file mode 100644 index 0000000..5d9cc09 --- /dev/null +++ b/includes/js/dojox/widget/tests/images/fisheye_3.png diff --git a/includes/js/dojox/widget/tests/images/fisheye_4.png b/includes/js/dojox/widget/tests/images/fisheye_4.png Binary files differnew file mode 100644 index 0000000..4e74550 --- /dev/null +++ b/includes/js/dojox/widget/tests/images/fisheye_4.png diff --git a/includes/js/dojox/widget/tests/images/icon_browser.png b/includes/js/dojox/widget/tests/images/icon_browser.png Binary files differnew file mode 100644 index 0000000..72fae26 --- /dev/null +++ b/includes/js/dojox/widget/tests/images/icon_browser.png diff --git a/includes/js/dojox/widget/tests/images/icon_calendar.png b/includes/js/dojox/widget/tests/images/icon_calendar.png Binary files differnew file mode 100644 index 0000000..d9e9a22 --- /dev/null +++ b/includes/js/dojox/widget/tests/images/icon_calendar.png diff --git a/includes/js/dojox/widget/tests/images/icon_email.png b/includes/js/dojox/widget/tests/images/icon_email.png Binary files differnew file mode 100644 index 0000000..899dfa5 --- /dev/null +++ b/includes/js/dojox/widget/tests/images/icon_email.png diff --git a/includes/js/dojox/widget/tests/images/icon_texteditor.png b/includes/js/dojox/widget/tests/images/icon_texteditor.png Binary files differnew file mode 100644 index 0000000..ced8c14 --- /dev/null +++ b/includes/js/dojox/widget/tests/images/icon_texteditor.png diff --git a/includes/js/dojox/widget/tests/images/icon_update.png b/includes/js/dojox/widget/tests/images/icon_update.png Binary files differnew file mode 100644 index 0000000..b741cd0 --- /dev/null +++ b/includes/js/dojox/widget/tests/images/icon_update.png diff --git a/includes/js/dojox/widget/tests/images/icon_users.png b/includes/js/dojox/widget/tests/images/icon_users.png Binary files differnew file mode 100644 index 0000000..569e712 --- /dev/null +++ b/includes/js/dojox/widget/tests/images/icon_users.png diff --git a/includes/js/dojox/widget/tests/images/rating_empty.gif b/includes/js/dojox/widget/tests/images/rating_empty.gif Binary files differnew file mode 100644 index 0000000..dc6ecd8 --- /dev/null +++ b/includes/js/dojox/widget/tests/images/rating_empty.gif diff --git a/includes/js/dojox/widget/tests/images/rating_empty.png b/includes/js/dojox/widget/tests/images/rating_empty.png Binary files differnew file mode 100644 index 0000000..3515d1a --- /dev/null +++ b/includes/js/dojox/widget/tests/images/rating_empty.png diff --git a/includes/js/dojox/widget/tests/images/rating_full.gif b/includes/js/dojox/widget/tests/images/rating_full.gif Binary files differnew file mode 100644 index 0000000..2e816a8 --- /dev/null +++ b/includes/js/dojox/widget/tests/images/rating_full.gif diff --git a/includes/js/dojox/widget/tests/images/rating_full.png b/includes/js/dojox/widget/tests/images/rating_full.png Binary files differnew file mode 100644 index 0000000..86fb2e0 --- /dev/null +++ b/includes/js/dojox/widget/tests/images/rating_full.png diff --git a/includes/js/dojox/widget/tests/test_ColorPicker.html b/includes/js/dojox/widget/tests/test_ColorPicker.html new file mode 100644 index 0000000..87d173e --- /dev/null +++ b/includes/js/dojox/widget/tests/test_ColorPicker.html @@ -0,0 +1,41 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>Dojox ColorPicker Test</title> + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../../../dijit/themes/tundra/tundra.css"; + @import "../../../dijit/themes/dijit.css"; + @import "../../../dijit/tests/css/dijitTests.css"; + @import "../ColorPicker/ColorPicker.css"; + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true"></script> + <script type="text/javascript" src="../ColorPicker.js"></script> + <script type="text/javascript"> + // dojo.require("dojox.widget.ColorPicker"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + + </script> +</head> +<body class="tundra"> + + <h1 class="testTitle">Dojox ColorPicker test</h1> + + <h3>defaults:</h3> + <div id="picker" dojoType="dojox.widget.ColorPicker" + onChange="console.log('new val:',this.value)" + ></div> + + <h3>no animation, no hsv, no rgb, no webSafe info:</h3> + <div id="pickerToo" dojoType="dojox.widget.ColorPicker" + animatePoint="false" + showHsv="false" + showRgb="false" + webSafe="false" + onChange="console.log('new val:',this.value)" + ></div> + +</body> +</html> diff --git a/includes/js/dojox/widget/tests/test_FileInput.html b/includes/js/dojox/widget/tests/test_FileInput.html new file mode 100644 index 0000000..caccd0f --- /dev/null +++ b/includes/js/dojox/widget/tests/test_FileInput.html @@ -0,0 +1,115 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>dojox.widget.FileInput | The Dojo Toolkit</title> + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../../../dijit/themes/dijit.css"; + @import "../../../dijit/tests/css/dijitTests.css"; + @import "../FileInput/FileInput.css"; + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true"></script> + <script type="text/javascript" src="../FileInput.js"></script> + <script type="text/javascript" src="../FileInputAuto.js"></script> + <script type="text/javascript"> + // dojo.require("dojox.widget.FileInput"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + + var sampleCallback = function(data,ioArgs,widgetRef){ + // this function is fired for every programatic FileUploadAuto + // when the upload is complete. It uses dojo.io.iframe, which + // expects the results to come wrapped in TEXTAREA tags. + // this is IMPORTANT. to utilize FileUploadAuto (or Blind) + // you have to pass your respose data in a TEXTAREA tag. + // in our sample file (if you have php5 installed and have + // file uploads enabled) it _should_ return some text in the + // form of valid JSON data, like: + // { status: "success", details: { size: "1024" } } + // you can do whatever. + // + // the ioArgs is the standard ioArgs ref found in all dojo.xhr* methods. + // + // widget is a reference to the calling widget. you can manipulate the widget + // from within this callback function + if(data){ + if(data.status && data.status == "success"){ + widgetRef.overlay.innerHTML = "success!"; + }else{ + widgetRef.overlay.innerHTML = "error? "; + console.log('error',data,ioArgs); + } + }else{ + // debug assist + console.log('ugh?',arguments); + } + } + + var i = 0; + function addNewUpload(){ + var node = document.createElement('input'); + dojo.byId('dynamic').appendChild(node); + var widget = new dojox.widget.FileInputAuto({ + id: "dynamic"+(++i), + url: "../FileInput/ReceiveFile.php", + //url:"http://archive.dojotoolkit.org/nightly/checkout/dojox/widget/FileInput/ReceiveFile.php", + name: "dynamic"+i, + onComplete: sampleCallback + },node); + widget.startup(); + } + + </script> +</head> +<body> + + <h1 class="testTitle">dojox FileInput widget:</h1> + <p>This is a prototype of a dojo input type="file" with a FormWidget mixin, to be styled to match tundra and soria themes</p> + <p>The API is up for discussion, nor is it known to drop into forms and "just work" yet</p> + <p>FileInputAuto API is up for discussion, as well, though by use of the url="" attrib, you can basically + do all your file-processing server side, and just use the filename sent that remains in the form input</p> + <p>There are two parts. dojo.require("dojox.widget.FileInput") for just the base class, or dojo.require("dojox.widget.FileInputAuto"); + to provide the Auto Uploading widget (on blur), and the Blind Auto Upload widget.</p> + <p>Both themes are defined in the FileInput.css file, as well as basic styling needed to run</p> + + <h3>A standard file input:</h3> + <input type="file" id="normal" name="inputFile" /> + + <h3>The default dojox.widget.FileInput:</h3> + <p> + <input dojoType="dojox.widget.FileInput" id="default" name="inputFile" /> + </p> + + <h3>default dojox.widget.FileInput, tundra:</h3> + <p class="tundra"> + <input dojoType="dojox.widget.FileInput" id="default2" name="inputFile" /> + </p> + + <h3>dojox.widget.FileInputAuto, soria theme:</h3> + <p class="soria"> + <input dojoType="dojox.widget.FileInputAuto" id="defaultAuto" name="inputFileAuto" url="../FileInput/ReceiveFile.php" /> + </p> + + <h3>another one, tundra theme (with callback)</h3> + <p class="tundra"> + <input dojoType="dojox.widget.FileInputAuto" id="defaultAuto2" name="inputFileAuto2" url="../FileInput/ReceiveFile.php" onComplete="sampleCallback"/> + </p> + + <h3>a blind auto upload widget, tundra:</h3> + <p class="tundra"> + <input dojoType="dojox.widget.FileInputBlind" id="blind1" name="blind1" url="../FileInput/ReceiveFile.php" /> + </p> + + <h3>dojox.widget.FileInputBlind - soria</h3> + <p class="soria"> + <input dojoType="dojox.widget.FileInputBlind" id="blind2" name="blind2" url="../FileInput/ReceiveFile.php" /> + </p> + + <h3>dynamic, tundra, dojox.widget.FileInputAuto:</h3> + <button onclick="addNewUpload()">add new file upload</button> + <br><br> + <div id="dynamic" class="tundra"></div> + +</body> +</html> diff --git a/includes/js/dojox/widget/tests/test_FisheyeList.html b/includes/js/dojox/widget/tests/test_FisheyeList.html new file mode 100644 index 0000000..348ea13 --- /dev/null +++ b/includes/js/dojox/widget/tests/test_FisheyeList.html @@ -0,0 +1,144 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>FisheyeList Widget Dojo Tests</title> + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../../../dijit/themes/tundra/tundra.css"; + @import "../../../dijit/themes/dijit.css"; + @import "../../../dijit/tests/css/dijitTests.css"; + @import "../FisheyeList/FisheyeList.css"; + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true"></script> + <script type="text/javascript" src="../FisheyeList.js"></script> + <script type="text/javascript"> + //dojo.require("dojox.widget.FisheyeList"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + + dojo.addOnLoad(function(){ + fish1 = dijit.byId("fisheye1"); + fish2 = dijit.byId("fisheye2"); + }); + var counter = 1; + function addToFirstList(){ + var item = new dojox.widget.FisheyeListItem(); + item.label = "Dynamically Added "+counter; + item.iconSrc = "images/fisheye_"+counter+".png" + item.postCreate(); + counter++; + if(counter>4){counter=1;} + fish1.addChild(item); + fish1.startup(); + item.startup(); + } + </script> +</head> +<body class="tundra"> + <h1>dojox.widget.FisheyeList test</h1> +<p>HTML before</p> +<button onclick="addToFirstList();">Add a new item to the first list</button> +<p>HTML before</p> +<p>HTML before</p> +<p>Liberal trigger: move the mouse anywhere near the menu and it will start to expand:</p> +<div dojoType="dojox.widget.FisheyeList" + itemWidth="40" itemHeight="40" + itemMaxWidth="150" itemMaxHeight="150" + orientation="horizontal" + effectUnits="2" + itemPadding="10" + attachEdge="center" + labelEdge="bottom" + id="fisheye1" +> + + <div dojoType="dojox.widget.FisheyeListItem" + id="item1" + onclick="alert('click on ' + this.label + '(from widget id ' + this.widgetId + ')!');" + label="Item 1" + iconSrc="images/fisheye_1.png"> + </div> + + <div dojoType="dojox.widget.FisheyeListItem" + label="Item 2" + iconSrc="images/fisheye_2.png"> + </div> + + <div dojoType="dojox.widget.FisheyeListItem" + label="Item 3" + iconSrc="images/fisheye_3.png"> + </div> + + <div dojoType="dojox.widget.FisheyeListItem" + iconSrc="images/fisheye_4.png"> + </div> + + <div dojoType="dojox.widget.FisheyeListItem" + label="Really Long Item Label" + iconSrc="images/fisheye_3.png"> + </div> + + <div dojoType="dojox.widget.FisheyeListItem" + iconSrc="images/fisheye_2.png"> + </div> + + <div dojoType="dojox.widget.FisheyeListItem" + iconSrc="images/fisheye_1.png"> + </div> +</div> + +<p>HTML after</p> +<p>HTML after</p> +<p>HTML after</p> +<p>This one has strict triggering, so you actually have to mouse over the menu to make it start moving:</p> +<div dojoType="dojox.widget.FisheyeList" + itemWidth="40" itemHeight="40" + itemMaxWidth="150" itemMaxHeight="150" + orientation="horizontal" + effectUnits="2" + itemPadding="10" + attachEdge="center" + labelEdge="bottom" + conservativeTrigger="true" + id="fisheye2" +> + + <div dojoType="dojox.widget.FisheyeListItem" + id="item1b" + onclick="alert('click on ' + this.label + '(from widget id ' + this.widgetId + ')!');" + label="Item 1" + iconSrc="images/fisheye_1.png"> + </div> + + <div dojoType="dojox.widget.FisheyeListItem" + label="Item 2" + iconSrc="images/fisheye_2.png"> + </div> + + <div dojoType="dojox.widget.FisheyeListItem" + label="Item 3" + iconSrc="images/fisheye_3.png"> + </div> + + <div dojoType="dojox.widget.FisheyeListItem" + iconSrc="images/fisheye_4.png"> + </div> + + <div dojoType="dojox.widget.FisheyeListItem" + label="Really Long Item Label" + iconSrc="images/fisheye_3.png"> + </div> + + <div dojoType="dojox.widget.FisheyeListItem" + iconSrc="images/fisheye_2.png"> + </div> + + <div dojoType="dojox.widget.FisheyeListItem" + iconSrc="images/fisheye_1.png"> + </div> +</div> + + +</body> +</html> diff --git a/includes/js/dojox/widget/tests/test_FisheyeLite.html b/includes/js/dojox/widget/tests/test_FisheyeLite.html new file mode 100644 index 0000000..0935d10 --- /dev/null +++ b/includes/js/dojox/widget/tests/test_FisheyeLite.html @@ -0,0 +1,257 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>A responsive Fisheye-like FisheyeLite widget | The Dojo Toolkit</title> + <style type="text/css"> + + body, html { margin:0; padding:0; width:100%; + font-family:Arial,sans-serif; + } + a { letter-spacing:0.1em; } + #list { + position:absolute; left:0px; cursor:pointer; + } + #container { margin:0 auto; width:400px; } + #list ul { + width:175px; + list-style-type:none; + } + .fisheyeTarget { + font-weight:bold; + font-size:19px; + } + #container li { + text-align:right; + padding-bottom:12px; + } + .ilk { + border-top:1px solid #999; + color:#666; + font:14px Arial,sans-serif; + } + #inlineList li { + margin-top:20px; + margin-bottom:20px; + padding:20px; + border:2px solid #ededed; + display:inline; + background:#fff; + } + + #lineHeightTest { + text-align:center; + position:relative; + overflow:visible; + } + span.line { + margin:10px; + padding:3px; + line-height:22px; + font:10px Arial,sans-serif; + display:block; + } + .imgBounce { + padding:0; + width:35px; height:35px; + vertical-align:middle; + position:relative; + top:0; + } + </style> + <script type="text/javascript"> + var djConfig = { isDebug:true, parseOnLoad:true }; + </script> + <script type="text/javascript" src="../../../dojo/dojo.js"></script> + <script type="text/javascript" src="../FisheyeLite.js"></script> + <script type="text/javascript"> + dojo.require("dojo.parser"); + dojo.require("dojox.widget.FisheyeLite"); + dojo.addOnLoad(function(){ + + // turn li's in this page into fisheye items, presumtiously: + dojo.query("li.bounce").forEach(function(n){ + new dojox.widget.FisheyeLite({ },n); + }); + + dojo.query("span.line").forEach(function(n){ + // make a widget from each of the lines in the lineHeightTest + new dojox.widget.FisheyeLite({ + properties: { + fontSize:1.75 + }, + easeOut: dojox.fx.easing.backInOut, + durationOut: 500 + },n); + }).connect("onclick",function(e){ + // you can still access the onclick of the real node + alert(e.target.innerHTML); + }); + + dojo.query("a").forEach(function(n){ + // all the anchorhs get a little letter spacing love + new dojox.widget.FisheyeLite({ + properties:{ + fontSize:1.15, + letterSpacing:2.85 + } + },n); + // stop anchors from doing _anything_ + }).connect("onclick",dojo,"stopEvent"); + + dojo.query(".imgBounce").forEach(function(n){ + // all the images need a width and a height (well, not need, + // but to scale you do) + new dojox.widget.FisheyeLite({ + properties: { + height:1.75, + width:1.75 + } + },n); + }); + + // + var vv = 0; + var r = dijit.registry.byClass("dojox.widget.FisheyeLite")._hash; + for(var l in r){ + vv++; + } + // a few in markup, mostly from the query()'ies: + console.log("fisheyes on this page: ", vv); + + }); + </script> + </head> + <body class="tundra"> + <div id="container"> + + <div id="list"> + <ul> + <li class="bounce"><span class="fisheyeTarget">Dojo</span><br><div class="ilk">the javascript toolkit</div></li> + <li class="bounce"><span class="fisheyeTarget">Dijit</span><br><div class="ilk">UI y mas - themeable, plugable.</div></li> + <li class="bounce"><span class="fisheyeTarget">DojoX</span><br><div class="ilk">extensions, experimentals, extras. innovation.</div></li> + <li class="bounce"><span class="fisheyeTarget">Dojo</span><br><div class="ilk">the javascript toolkit</div></li> + <li class="bounce"><span class="fisheyeTarget">Dijit</span><br><div class="ilk">UI y mas - themeable, plugable.</div></li> + <li class="bounce"><span class="fisheyeTarget">DojoX</span><br><div class="ilk">extensions, experimentals, extras. innovation.</div></li> + <li class="bounce"><span class="fisheyeTarget">Dojo</span><br><div class="ilk">the javascript toolkit</div></li> + <li class="bounce"><span class="fisheyeTarget">Dijit</span><br><div class="ilk">UI y mas - themeable, plugable.</div></li> + </ul> + </div> + + <h2>A paragraph: (with links)</h2> + + <p> + Lorem ipsum dolor sit amet, <a href="#">consectetuer</a> adipiscing elit. Aenean + semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. + Proin porta rutrum lacus. <a href="#">Etiam</a> consequat scelerisque quam. Nulla + facilisi. Maecenas luctus venenatis nulla. In sit amet dui non mi + semper iaculis. Sed molestie tortor at ipsum. <a href="#">Morbi</a> dictum rutrum + magna. Sed vitae risus. + </p> + + <h3>read the fine print:</h3> + + <p> + <input type="button" onclick="dijit.byId('l1').show()" value="show first" /> + <input type="button" onclick="dijit.byId('l1').hide()" value="hide first" /> + <input type="button" onclick="dijit.byId('l3').show()" value="show third" /> + <input type="button" onclick="dijit.byId('l3').hide()" value="hide third" /> + </p> + + <div id="lineHeightTest"> + <span id="l1" class="line">Aliquam vitae enim. Duis scelerisque metus auctor est venenatis</span> + <span class="line">imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer</span> + <span id="l3" class="line">lorem nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean</span> + <span class="line">id mi in massa bibendum suscipit. Integer eros. Nullam suscipit</span> + <span id="l5" class="line">mauris. In pellentesque. Mauris ipsum est, pharetra semper,</span> + <span class="line">pharetra in, viverra quis, tellus. Etiam purus.</span> + </div> + + <p> + Lorem ipsum dolor sit amet, <a href="#">consectetuer</a> adipiscing elit. Aenean + semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. + Proin porta rutrum lacus. <a href="#">Etiam</a> consequat scelerisque quam. Nulla + facilisi. Maecenas luctus venenatis nulla. In sit amet dui non mi + semper iaculis. Sed molestie tortor at ipsum. <a href="#">Morbi</a> dictum rutrum + magna. Sed vitae risus. + </p> + <p> + Lorem ipsum dolor sit amet, <a href="#">consectetuer</a> adipiscing elit. Aenean + semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. + Proin porta rutrum lacus. <a href="#">Etiam</a> consequat scelerisque quam. Nulla + facilisi. Maecenas luctus venenatis nulla. In sit amet dui non mi + semper iaculis. Sed molestie tortor at ipsum. <a href="#">Morbi</a> dictum rutrum + magna. Sed vitae risus. + </p> + <p> + Lorem ipsum dolor sit amet, <a href="#">consectetuer</a> adipiscing elit. Aenean + semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. + Proin porta rutrum lacus. <a href="#">Etiam</a> consequat scelerisque quam. Nulla + facilisi. Maecenas luctus venenatis nulla. In sit amet dui non mi + semper iaculis. Sed molestie tortor at ipsum. <a href="#">Morbi</a> dictum rutrum + magna. Sed vitae risus. + </p> + <p> + Lorem ipsum dolor sit amet, <a href="#">consectetuer</a> adipiscing elit. Aenean + semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. + Proin porta rutrum lacus. <a href="#">Etiam</a> consequat scelerisque quam. Nulla + facilisi. Maecenas luctus venenatis nulla. In sit amet dui non mi + semper iaculis. Sed molestie tortor at ipsum. + </p> + <h3>another list: (no target, or ilk)</h3> + <div style="height:125px; position:relative;"> + <div style="position:absolute; width:600px;"> + <ul id="inlineList"> + <li class="bounce">Foo</li> + <li class="bounce">Bar</li> + <li class="bounce">Baz</li> + <li class="bounce">Bam</li> + </ul> + </div> + </div> + + <h3>oh right, Images:</h3> + + <div style="position:relative; height:60px;"><div style="position:absolute"> + <img src="images/fisheye_1.png" class="imgBounce" onClick="alert('clicked img 1')"/> + <img src="images/fisheye_2.png" class="imgBounce" onClick="alert('clicked img 2')"/> + <img src="images/fisheye_3.png" class="imgBounce" onClick="alert('clicked img 3')"/> + <img src="images/fisheye_4.png" class="imgBounce" /> + <img src="images/fisheye_3.png" class="imgBounce" onClick="alert('clicked img 3')"/> + <img src="images/fisheye_2.png" class="imgBounce" onClick="alert('clicked img 2')"/> + <img src="images/fisheye_1.png" class="imgBounce" onClick="alert('clicked img 1')"/> + </div></div> + + <div style="position:relative; float:left; width:1px; left:-75px; top:0;"> + <img src="images/fisheye_1.png" class="imgBounce" onClick="alert('clicked img 1')"/><br> + <img src="images/fisheye_2.png" class="imgBounce" onClick="alert('clicked img 2')"/><br> + <img src="images/fisheye_3.png" class="imgBounce" onClick="alert('clicked img 3')"/><br> + <img src="images/fisheye_4.png" class="imgBounce" /><br> + <img src="images/fisheye_3.png" class="imgBounce" onClick="alert('clicked img 3')"/><br> + <img src="images/fisheye_2.png" class="imgBounce" onClick="alert('clicked img 2')"/><br> + <img src="images/fisheye_1.png" class="imgBounce" onClick="alert('clicked img 1')"/> + </div> + + <p dojoType="dojox.widget.FisheyeLite" + properties="{ padding:1.55 }" + style="padding:12px; text-align:justify;"> + + Aliquam vitae enim. Duis scelerisque metus auctor est venenatis + imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer + lorem nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean + id mi in massa bibendum suscipit. Integer eros. Nullam suscipit + mauris. In pellentesque. Mauris ipsum est, pharetra semper, + pharetra in, viverra quis, tellus. Etiam purus. Quisque egestas, + tortor ac cursus lacinia, felis leo adipiscing nisi, et rhoncus + elit dolor eget eros. Fusce ut quam. Suspendisse eleifend leo vitae + ligula. Nulla facilisi. Nulla rutrum, erat vitae lacinia dictum, + pede purus imperdiet lacus, ut semper velit ante id metus. Praesent + massa dolor, porttitor sed, pulvinar in, consequat ut, leo. Nullam + nec est. Aenean id risus blandit tortor pharetra congue. + Suspendisse pulvinar. + </p> + + <p>the end</p> + + </div> + </body> +</html> diff --git a/includes/js/dojox/widget/tests/test_Iterator.html b/includes/js/dojox/widget/tests/test_Iterator.html new file mode 100644 index 0000000..7cf82ff --- /dev/null +++ b/includes/js/dojox/widget/tests/test_Iterator.html @@ -0,0 +1,73 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>Dojox Iterator Test</title> + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../../../dijit/themes/tundra/tundra.css"; + @import "../../../dijit/themes/dijit.css"; + @import "../../../dijit/tests/css/dijitTests.css"; + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true, debugAtAllCosts: false, parseOnLoad: true"></script> + <script type="text/javascript" src="../../../dijit/tests/_testCommon.js"></script> + <script type="text/javascript"> + dojo.require("dijit.layout.TabContainer"); + dojo.require("dijit.layout.SplitContainer"); + dojo.require("dojo.data.ItemFileReadStore"); + dojo.require("dojox.widget.Iterator"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + </script> +</head> +<body> + + <h1 class="testTitle">Dojox Iterator test</h1> + + <div dojoType="dojo.data.ItemFileReadStore" + url="../../../dijit/tests/_data/countries.json" + jsId="stateStore"></div> + + <h3>Data store backed Iterator</h3> + <ul> + <li>before</li> + <li dojoType="dojox.widget.Iterator" + query="{ name: 'A*' }" + store="stateStore"> + ${name} + </li> + <li>after</li> + </ul> + + <h3>Array backed Iterator</h3> + <ul> + <li>before</li> + <script> + var tdata = [ + { thinger: "blah", name: "named:" }, + { thinger: "..." }, + { thinger: "w00t!" } + ]; + </script> + <li dojoType="dojox.widget.Iterator" + defaultValue="*this space intentionally left blank*" + data="tdata"> + ${name} ${thinger} + </li> + <li>after</li> + </ul> + + <h3>Array-property Iterator</h3> + <ul> + <li>before</li> + <li>blah</li> + <li dojoType="dojox.widget.Iterator" + dataValues="thinger, blah, blah"> + ${value} + </li> + <li>after</li> + </ul> + +</body> +</html> diff --git a/includes/js/dojox/widget/tests/test_Loader.html b/includes/js/dojox/widget/tests/test_Loader.html new file mode 100644 index 0000000..3c014a2 --- /dev/null +++ b/includes/js/dojox/widget/tests/test_Loader.html @@ -0,0 +1,81 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>Dojo Visual Loader Test</title> + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../../../dijit/themes/tundra/tundra.css"; + @import "../../../dijit/themes/dijit.css"; + @import "../../../dijit/tests/css/dijitTests.css"; + @import "../Loader/Loader.css"; + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true"></script> + <script type="text/javascript" src="../Loader.js"></script> + <script type="text/javascript"> + // dojo.require("dojox.widget.Loader"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + + function getHoney(){ + // simple xhrGet example + var foo = dojo.xhrGet({ + url: '../Loader/honey.php?delay=0', + handleAs: 'text', + load: function(result){ + content.innerHTML = result; + } + }); + } + + function postHoney(){ + // simple xhrPost example + var foo = dojo.xhrPost({ + url: '../Loader/honey.php?delay=0', + handleAs: 'text', + load: function(result){ + content.innerHTML = result; + } + }); + } + + function alertMe(){ + console.log('subscription fired',arguments); + } + + var content = null; + dojo.addOnLoad(function(){ + + content = dojo.byId("dataholder"); + // FIXME: why aren't you working? + // var foo = dojo.subscribe("Loader",null,"alertMe"); + // console.log(foo); + + }); + </script> +</head> +<body class="tundra"> + <div id="globalLoader" dojoType="dojox.widget.Loader"></div> + + <!-- Other examples: + <div id="globalLoader" dojoType="dojox.widget.Loader" hasVisuals="false"></div> + <div id="globalLoader" dojoType="dojox.widget.Loader" hasVisuals="true" attachToPointer="false"></div> + --> + + <h1 class="testTitle">Dojox xhrListener test</h1> + + <a href="javascript:getHoney();">start xhrGet demo</a> + <a href="javascript:postHoney();">start xhrPost demo</a> + + <p>No additional code is required except for the existance of a + dojoType="dojox.widget.Loader" node. It will listen for the start + and end of xhr* requests (via _ioSetArgs [ugh] and Deferred.prototype._fire .. + </p> + + <br> + <div id="dataholder" style="float:left; height:300px; overflow:auto; width:400px; border:1px solid #ccc; "></div> + <!-- make me a scrollbar. a Taaaaaall scrollbar --> + <div style="float:left; height:2000px; width:1px; overflow:hidden">spacer</div> + +</body> +</html> diff --git a/includes/js/dojox/widget/tests/test_MultiComboBox.html b/includes/js/dojox/widget/tests/test_MultiComboBox.html new file mode 100644 index 0000000..86f6c54 --- /dev/null +++ b/includes/js/dojox/widget/tests/test_MultiComboBox.html @@ -0,0 +1,70 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>Multi-input ComboBox widget</title> + <style type="text/css"> + @import "../../../dijit/themes/tundra/tundra.css"; + @import "../../../dijit/tests/css/dijitTests.css"; + @import "../../../dojo/resources/dojo.css"; + + body { margin:20px; } + #widget_frogin, + #widget_frogin2 + { width: 30em; height:1.2em; } + + </style> + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true, parseOnLoad: true"></script> + <script type="text/javascript"> + dojo.require("dojox.widget.MultiComboBox"); + dojo.require("dojo.data.ItemFileReadStore"); + dojo.require("dijit.form.Button"); + </script> + </head> + <body class="tundra"> + + <h1 class="testTitle">dojox.widget.MultiComboBox</h1> + <p> + This widget is an extension to ComboBox to allow "tag" style input using a datastore. Start typing + into the box, and your options will be presented. The default delimiter is a comma, which can be over-ridden + by the delimiter="" attrbute. + </p> + + <div dojoType="dojo.data.ItemFileReadStore" jsId="memberTagStore" + url="_tags.json"></div> + + <h3>Default:</h3> + <input dojoType="dojox.widget.MultiComboBox" id="frogin" + store="memberTagStore" + value="" + searchAttr="tag" + name="tags" /> + + <h3>Alternate delimiter (:)</h3> + <input dojoType="dojox.widget.MultiComboBox" id="frogin2" + store="memberTagStore" + value="" + delimiter=":" + searchAttr="tag" + name="tags2" /> + + <h3>From code:</h3> + <button dojoType="dijit.form.Button"> + Make it. + <script type="dojo/method" event="onClick"> + var widget = new dojox.widget.MultiComboBox({ + store:memberTagStore, + searchAttr:"tag" + },"frogin3"); + widget.startup(); + // only make it once. + this.setDisabled(true); + </script> + </button><br> + + <input id="frogin3" name="tags3" value="" /> + + + </body> +</html> diff --git a/includes/js/dojox/widget/tests/test_Rating.html b/includes/js/dojox/widget/tests/test_Rating.html new file mode 100644 index 0000000..e87168f --- /dev/null +++ b/includes/js/dojox/widget/tests/test_Rating.html @@ -0,0 +1,91 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>Dojox Rating Test</title> + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../../../dijit/themes/tundra/tundra.css"; + @import "../../../dijit/themes/dijit.css"; + @import "../../../dijit/tests/css/dijitTests.css"; + @import "../Rating/Rating.css"; + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true"></script> + <script type="text/javascript" src="/dijit/_Templated.js"></script> + <script type="text/javascript" src="/dijit/_Container.js"></script> + <script type="text/javascript" src="/dijit/form/_FormWidget.js"></script> + <script type="text/javascript" src="../Rating.js"></script> + <script type="text/javascript"> + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + + </script> + <style> + /* Use bigger stars and make the node wider than the star actually is, + this creates some space around the stars (use background-position to center the stars)*/ + #rating1Box .dojoxRatingStar { + background-image:url(images/rating_empty.gif); + background-position:top center; + background-repeat:no-repeat; + height:30px; + width:40px; + } + + #rating1Box .dojoxRatingStarChecked { + background-image:url(images/rating_full.gif); + } + + #rating1Box .dojoxRatingStarHover { + background-image:url(images/rating_full.gif); + background-color:lightgrey; + } + + </style> +</head> +<body class="tundra"> + + <h1 class="testTitle">Dojox Rating test</h1> + + <h3>default usage:</h3> + The attribute "numStars" is not given, so the default 3 stars are shown.<br /> + <span id="rating0" dojoType="dojox.widget.Rating" onChange="dojo.query('#rating0Value')[0].innerHTML = this.value"></span> + The value is: <b><span id="rating0Value">0</span></b> + <br /><br /> + + <h3>5 stars:</h3> + The attribute "numStars" is given and set to 5, the initial value is 3.<br /> + <span dojoType="dojox.widget.Rating" numStars="5" value="3"></span> + <br /><br /> + + <h3>Customized, "my big stars":</h3> + The stars are bigger, and styled this way that there is space around each. + When hovering the background color is changed too. All this is achieved via CSS, see top of this file. + <br /> + The attribute "numStars" is set to 10, so we see ten stars. + <div id="rating1Box"> + <span id="rating1" dojoType="dojox.widget.Rating" numStars="10"> + <script type="dojo/event" event="onChange"> + dojo.query('#rating1Value')[0].innerHTML = this.value; + </script> + <script type="dojo/event" event="onMouseOver" args="evt,value"> + dojo.query('#rating1HoverValue')[0].innerHTML = value; + </script> + </span> + <br /><br /> + The value is: <b><span id="rating1Value">0</span></b> + <br /> + The mouse is over: <b><span id="rating1HoverValue">0</span></b> + </div> + + <h3>Spacing</h3> + Surrounded by text to see that it really takes all it's space + Surrounded by text to see that it really takes all it's space + Surrounded by text to see that it really takes all it's space + Surrounded by text to see that it really takes all it's space + Surrounded by text to see that it really takes all it's space<div dojoType="dojox.widget.Rating" numStars="5" value="1"></div> + Surrounded by text to see that it really takes all it's space + Surrounded by text to see that it really takes all it's space + Surrounded by text to see that it really takes all it's space + Surrounded by text to see that it really takes all it's space + <br /><br /> +</body> +</html> diff --git a/includes/js/dojox/widget/tests/test_SortList.html b/includes/js/dojox/widget/tests/test_SortList.html new file mode 100644 index 0000000..55cb7a1 --- /dev/null +++ b/includes/js/dojox/widget/tests/test_SortList.html @@ -0,0 +1,74 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>Dojox SortList Test</title> + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../../../dijit/themes/tundra/tundra.css"; + @import "../../../dijit/themes/dijit.css"; + @import "../../../dijit/tests/css/dijitTests.css"; + @import "../SortList/SortList.css"; + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true"></script> + <script type="text/javascript" src="../../../dijit/tests/_testCommon.js"></script> + <script type="text/javascript" src="../SortList.js"></script> + <script type="text/javascript"> + // dojo.require("dojox.widget.SortList"); + dojo.require("dijit.layout.TabContainer"); + dojo.require("dijit.layout.SplitContainer"); + dojo.require("dojo.data.ItemFileReadStore"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + </script> +</head> +<body> + + <h1 class="testTitle">Dojox SortList test</h1> + + <div dojoType="dojo.data.ItemFileReadStore" url="../../../dijit/tests/_data/countries.json" jsId="stateStore"></div> + + <h3>Simple sortable example</h3> + <ul dojoType="dojox.widget.SortList" store="stateStore" title="sortable List" style="width:200px; height:200px;"></ul> + + <h3>Children of a TabContainer</h3> + <div dojoType="dijit.layout.TabContainer" style="width:300px; height:300px;"> + <div dojoType="dojox.widget.SortList" store="stateStore" title="list 1" heading="countires"></div> + <div dojoType="dojox.widget.SortList" store="stateStore" title="list 2" heading="states"></div> + <div dojoType="dojox.widget.SortList" store="stateStore" title="closable" heading="countries" closable="true"></div> + </div> + + <h3>Child of a SplitContainer</h3> + <div dojoType="dijit.layout.SplitContainer" sizerWidth="7" activeSizing="false" orientaton="vertical" style="width:600px; height:200px;"> + <div dojoType="dojox.widget.SortList" store="stateStore" title="list 1" layoutAlign="left" sizeShare="33"></div> + <div dojoType="dojox.widget.SortList" store="stateStore" title="list 2" layoutAlign="client" sizeShare="33"></div> + <div dojoType="dojox.widget.SortList" store="stateStore" title="closable" layoutAlign="right" sizeShare="33"></div> + </div> + + <br> + <h3>Raw, degradable UL list:</h3> + <ul dojoType="dojox.widget.SortList" title="SortList From Markup" sortable="false" style="width:200px; height:200px;"> + <li>one</li> + <li>two</li> + <li>three</li> + <li>four</li> + <li>five</li> + <li>six</li> + <li>four</li> + <li>five</li> + <li>six</li> + <li>four</li> + <li>five</li> + <li>six</li> + <li>four</li> + <li>five</li> + <li>six</li> + </ul> + + <h3>normal ul:</h3> + <ul style="width:200px; height:200px;"> + <li>one</li><li>one</li><li>one</li><li>one</li><li>one</li><li>one</li><li>one</li><li>one</li> + </ul> + +</body> +</html> diff --git a/includes/js/dojox/widget/tests/test_TimeSpinner.html b/includes/js/dojox/widget/tests/test_TimeSpinner.html new file mode 100644 index 0000000..6009f6d --- /dev/null +++ b/includes/js/dojox/widget/tests/test_TimeSpinner.html @@ -0,0 +1,87 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>Dojo Spinner Widget Test</title> + + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../../../dijit/themes/tundra/tundra.css"; + @import "../../../dijit/themes/dijit.css"; + @import "../../../dijit/tests/css/dijitTests.css"; + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true"></script> + + <script type="text/javascript"> + dojo.require("dojox.widget.TimeSpinner"); + dojo.require("dojo.parser"); // scan page for widgets + + function displayData() { + var spinner = dijit.byId("timeSpinner"); + + //accessing the widget property directly + console.log("TimeSpinner Value (raw, unserialized): ", spinner.getValue()); + + //accessing the widget from the form elements + var theForm = dojo.byId("form1"); + var s = ""; + for (var i=0; i<theForm.elements.length;i++){ + var elem = theForm.elements[i]; + if (!elem.name || elem.name =="button") { continue ; } + s+=elem.name + ": " + elem.value + "\n"; + } + console.log(s); + + } + + </script> + <style type="text/css"> + #integerspinner2 .dojoSpinnerUpArrow { + border-bottom-color: blue; + } + #integerspinner2 .dojoSpinnerDownArrow { + border-top-color: red; + } + #integerspinner2 .dojoSpinnerButton { + background-color: yellow; + } + #integerspinner2 .dojoSpinnerButtonPushed { + background-color: gray; + } + #integerspinner2 .dojoSpinnerButtonPushed .dojoSpinnerDownArrow { + border-top-color: blue; + } + #integerspinner2 .dojoSpinnerButtonPushed .dojoSpinnerUpArrow { + border-bottom-color: red; + } + + .dojoInputFieldValidationNormal#integerspinner2 { + color:blue; + background-color:pink; + } + </style> + </head> + + <body class="tundra"> + <h1 class="testTitle">Dojox TimeSpinner Test</h1> + Try typing values, and use the up/down arrow keys and/or the arrow push + buttons to spin + <br> + <form id="form1" action="" name="example" method="post"> + <h1>time spinner</h1> + <br> + <input id="timeSpinner" dojoType="dojox.widget.TimeSpinner" + onChange="console.debug('onChange fired for widget id = ' + this.id + ' with value = ' + arguments[0]);" + value="12:30 PM" + name="timeSpinner" + hours="12" + id="timeSpinner" /> + </form> + + <div> + <button name="button" onclick="displayData(); return false;">view data</button> + </div> + + </body> +</html> diff --git a/includes/js/dojox/widget/tests/test_Toaster.html b/includes/js/dojox/widget/tests/test_Toaster.html new file mode 100644 index 0000000..015ebbe --- /dev/null +++ b/includes/js/dojox/widget/tests/test_Toaster.html @@ -0,0 +1,147 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>Toaster Widget Dojo Tests</title> + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../../../dijit/themes/tundra/tundra.css"; + @import "../../../dijit/themes/dijit.css"; + @import "../../../dijit/tests/css/dijitTests.css"; + @import "../Toaster/Toaster.css"; + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true"></script> + <script type="text/javascript"> + dojo.require("dojox.widget.Toaster"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + + var toast = null; + function showTestMessage(){ + dojo.publish("testMessageTopic", + [ "This is a message! It's kind of long to show message wrapping."] + ); + } + function showAnotherMessage(){ + dojo.publish("testMessageTopic", + [{ + message: "This is another message!", + type: "warning", + duration: 500 + }] + ); + } + function showYetAnotherMessage(){ + dojo.publish("testMessageTopic", + [{ message: "This is yet another message!" }] + ); + } + + dojo.addOnLoad(function(){ + toast = dijit.byId("toast"); + }); + </script> +</head> +<body class="tundra"> + <div dojoType="dojox.widget.Toaster" id="toast" + positionDirection="br-left" duration="0" + messageTopic="testMessageTopic"></div> + + <div dojoType="dojox.widget.Toaster" id="toast2" + separator="<hr>" positionDirection="bl-up" + messageTopic="testMessageTopic"></div> + + <button type="submit" + onclick="showTestMessage();">Click to show message</button> + <button type="submit" + onclick="showAnotherMessage();">Click to show another message</button> + <button type="submit" + onclick="showYetAnotherMessage();">Click to show yet another message</button> + + <h1>dojox.widget.Toaster test</h1> + + <div style="color: #FF0000;"> + When you click any of the buttons above, the bottom right hand message will + stay on the screen until you acknowledge it by clicking inside the message + box. If you click one of the message buttons while a message is still + displayed in the bottom right corner it should append the new message below + the old one with a separator between them. + </div> + <p> + 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. Maecenas luctus + venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie + tortor at ipsum. Morbi dictum rutrum magna. Sed vitae risus. + </p> + <p> + Aliquam vitae enim. Duis scelerisque metus auctor est venenatis imperdiet. + Fusce dignissim porta augue. Nulla vestibulum. Integer lorem nunc, + ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in massa + bibendum suscipit. Integer eros. Nullam suscipit mauris. In pellentesque. + Mauris ipsum est, pharetra semper, pharetra in, viverra quis, tellus. Etiam + purus. Quisque egestas, tortor ac cursus lacinia, felis leo adipiscing + nisi, et rhoncus elit dolor eget eros. Fusce ut quam. Suspendisse eleifend + leo vitae ligula. Nulla facilisi. Nulla rutrum, erat vitae lacinia dictum, + pede purus imperdiet lacus, ut semper velit ante id metus. Praesent massa + dolor, porttitor sed, pulvinar in, consequat ut, leo. Nullam nec est. + Aenean id risus blandit tortor pharetra congue. Suspendisse pulvinar. + </p> + <p> + Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam ornare + elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque nonummy + mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus lobortis, sem + vitae nonummy lacinia, nisl est gravida magna, non cursus est quam sed + urna. Phasellus adipiscing justo in ipsum. Duis sagittis dolor sit amet + magna. Suspendisse suscipit, neque eu dictum auctor, nisi augue tincidunt + arcu, non lacinia magna purus nec magna. Praesent pretium sollicitudin + sapien. Suspendisse imperdiet. Class aptent taciti sociosqu ad litora + torquent per conubia nostra, per inceptos hymenaeos. + </p> + <p> + Mauris pharetra lorem sit amet sapien. Nulla libero metus, tristique et, + dignissim a, tempus et, metus. Ut libero. Vivamus tempus purus vel ipsum. + Quisque mauris urna, vestibulum commodo, rutrum vitae, ultrices vitae, + nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, + per inceptos hymenaeos. Nulla id erat sit amet odio luctus eleifend. Proin + massa libero, ultricies non, tincidunt a, vestibulum non, tellus. Nunc nunc + purus, lobortis a, pulvinar at, egestas a, mi. Cras adipiscing velit a + mauris. Morbi felis. Etiam at felis. Cras eget eros et justo mattis + pulvinar. Nullam at justo id risus porttitor dignissim. Vestibulum sed + velit vel metus tincidunt tempus. Nunc euismod nisl id dolor tristique + tincidunt. Nullam placerat turpis sed odio. Curabitur in est id nibh tempus + ultrices. Aliquam consectetuer dapibus eros. Aliquam nisl. + </p> + <p> + 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. Maecenas luctus + venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie + tortor at ipsum. Morbi dictum rutrum magna. Sed vitae risus. + </p> + <p> + Aliquam vitae enim. Duis scelerisque metus auctor est venenatis imperdiet. + Fusce dignissim porta augue. Nulla vestibulum. Integer lorem nunc, + ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in massa + bibendum suscipit. Integer eros. Nullam suscipit mauris. In pellentesque. + Mauris ipsum est, pharetra semper, pharetra in, viverra quis, tellus. Etiam + purus. Quisque egestas, tortor ac cursus lacinia, felis leo adipiscing + nisi, et rhoncus elit dolor eget eros. Fusce ut quam. Suspendisse eleifend + leo vitae ligula. Nulla facilisi. Nulla rutrum, erat vitae lacinia dictum, + pede purus imperdiet lacus, ut semper velit ante id metus. Praesent massa + dolor, porttitor sed, pulvinar in, consequat ut, leo. Nullam nec est. + Aenean id risus blandit tortor pharetra congue. Suspendisse pulvinar. + </p> + <p> + Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam ornare + elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque nonummy + mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus lobortis, sem + vitae nonummy lacinia, nisl est gravida magna, non cursus est quam sed + urna. Phasellus adipiscing justo in ipsum. Duis sagittis dolor sit amet + magna. Suspendisse suscipit, neque eu dictum auctor, nisi augue tincidunt + arcu, non lacinia magna purus nec magna. Praesent pretium sollicitudin + sapien. Suspendisse imperdiet. Class aptent taciti sociosqu ad litora + torquent per conubia nostra, per inceptos hymenaeos. + </p> +</body> +</html> diff --git a/includes/js/dojox/widget/tests/test_Wizard.html b/includes/js/dojox/widget/tests/test_Wizard.html new file mode 100644 index 0000000..5de9f02 --- /dev/null +++ b/includes/js/dojox/widget/tests/test_Wizard.html @@ -0,0 +1,118 @@ +<html> +<head> +<title>Wizard Demo</title> + + <script type="text/javascript" djConfig="isDebug:true,parseOnLoad:true" + src="../../../dojo/dojo.js"></script> + <script type="text/javascript" src="../../../dijit/tests/_testCommon.js"></script> + <script type="text/javascript" src="../Wizard.js"></script> + + <script type="text/javascript"> + dojo.require("dojox.widget.Wizard"); + + function cancel() { + alert("Wizard Cancelled!"); + } + + function done() { + alert("Wizard Done!"); + } + </script> + + <style type="text/css"> + @import "../../../dijit/themes/tundra/tundra.css"; + @import "../../../dijit/tests/css/dijitTests.css"; + @import "../Wizard/Wizard.css"; + body { + font-family : sans-serif; + } + </style> +</head> + +<body> + + <div style="width:800px; margin:0 auto"> + + <h1 class="testTitle">dojox.widget.Wizard tests</h1> + + <p>This example shows a wizard with customized button labels.</p> + + <div id="wizard1" dojoType="dojox.widget.WizardContainer" + style="width: 640px; height: 200px;" + nextButtonLabel="Go on" + > + <div dojoType="dojox.widget.WizardPane" title="Tab 1"> + <h1>Tab 1</h1> + <p>Sized content, box one</p> + </div> + <div dojoType="dojox.widget.WizardPane"> + <h1>Tab 2</h1> + </div> + <div dojoType="dojox.widget.WizardPane" doneFunction="done"> + <h1>Tab 3</h1> + + You won't be able to come back, but you can finish now... + </div> + <div dojoType="dojox.widget.WizardPane" canGoBack="false"> + <h1>Tab 4</h1> + + ... and now you can't go back. + </div> + <div dojoType="dojox.widget.WizardPane" doneFunction="done"> + <h1>Tab 5</h1> + ... and now you can finish up. + </div> + </div> + + <p>The next shows the option to hide the inactive buttons, with a smaller width...</p> + + <div id="wizard2" dojoType="dojox.widget.WizardContainer" hideDisabled="true" style="width: 50%; height: 200px;"> + <div dojoType="dojox.widget.WizardPane"> + <h1>Step 1 of 3</h1> + <p>Lorem ipsum dolor sit amet</p> + </div> + <div dojoType="dojox.widget.WizardPane"> + <h1>Step 2 of 3</h1> + <p>consectetur adipisicing elit</p> + </div> + <div dojoType="dojox.widget.WizardPane"> + <h1>Step 3 of 3</h1> + <p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p> + </div> + </div> + + <p>The next shows blocking moving to the next step with a JS function...</p> + + <script> + function checkAgreement() { + var frm = document.forms['acceptAgreement']; + var accept = frm.accept; + if (!accept.checked) { + return "You must agree to the terms before continuing."; + } + } + </script> + <div id="wizard3" dojoType="dojox.widget.WizardContainer" style="width: 600px; height: 400px; margin:0 auto;"> + <div dojoType="dojox.widget.WizardPane" id="Agreement1" passFunction="checkAgreement"> + <h1>Agreement Terms</h1> + + <div dojoType="dijit.layout.ContentPane" style="width:400px; border:1px solid #b7b7b7; background:#fff; padding:8px; margin:0 auto; height:200px; overflow:auto; " + href="../../../dojo/LICENSE"></div> + + <form action="#" name="acceptAgreement"> + <p> + <input type="checkbox" name="accept" value="true"/> I accept the terms of this agreement. + </p> + </form> + </div> + <div dojoType="dojox.widget.WizardPane" canGoBack="false"> + <h1>Complete</h1> + <p>The license has been accepted.</p> + </div> + </div> + </div> + +</body> +</html> + + |
