/trunk/api/js/dojo1.0/dojox/widget/FileInput/FileInput.html |
---|
New file |
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" /> |
<span class="dijitFileInputText" dojoAttachPoint="titleNode">${label}</span> |
<span class="dijitFileInputButton" dojoAttachPoint="cancelNode" |
dojoAttachEvent="onclick:_onClick">${cancelText}</span> |
</div> |
</div> |
/trunk/api/js/dojo1.0/dojox/widget/FileInput/FileInput.css |
---|
New file |
0,0 → 1,83 |
.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 { |
opacity:0; |
filter:alpha(opacity:0); |
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; |
} |
/trunk/api/js/dojo1.0/dojox/widget/FileInput/ReceiveFile.php |
---|
New file |
0,0 → 1,29 |
<?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( |
'status' => "success", |
'details' => $_FILES[$name] |
); |
}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> |
/trunk/api/js/dojo1.0/dojox/widget/FileInput/FileInputAuto.html |
---|
New file |
0,0 → 1,9 |
<div class="dijitFileInput"> |
<input class="dijitFileInputReal" type="file" dojoAttachPoint="fileInput" /> |
<div class="dijitFakeInput" dojoAttachPoint="fakeNodeHolder"> |
<input class="dijitFileInputVisible" type="text" dojoAttachPoint="focusNode, inputNode" /> |
<span class="dijitInline dijitFileInputText" dojoAttachPoint="titleNode">${label}</span> |
<span class="dijitInline dijitFileInputButton" dojoAttachPoint="cancelNode" dojoAttachEvent="onclick:_onClick">${cancelText}</span> |
</div> |
<div class="dijitProgressOverlay" dojoAttachPoint="overlay"> </div> |
</div> |
/trunk/api/js/dojo1.0/dojox/widget/tests/demo_FisheyeList.html |
---|
New file |
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> |
/trunk/api/js/dojo1.0/dojox/widget/tests/test_TimeSpinner.html |
---|
New file |
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> |
/trunk/api/js/dojo1.0/dojox/widget/tests/test_FileInput.html |
---|
New file |
0,0 → 1,116 |
<!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,widget){ |
// 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){ |
var d = dojo.fromJson(data); |
if(d.status && d.status == "success"){ |
widget.overlay.innerHTML = "success!"; |
}else{ |
widget.overlay.innerHTML = "error? "; |
console.log(data,ioArgs); |
} |
}else{ |
// debug assist |
console.log(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> |
/trunk/api/js/dojo1.0/dojox/widget/tests/test_Toaster.html |
---|
New file |
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> |
/trunk/api/js/dojo1.0/dojox/widget/tests/images/icon_users.png |
---|
Cannot display: file marked as a binary type. |
svn:mime-type = application/octet-stream |
/trunk/api/js/dojo1.0/dojox/widget/tests/images/icon_users.png |
---|
New file |
Property changes: |
Added: svn:mime-type |
+application/octet-stream |
\ No newline at end of property |
/trunk/api/js/dojo1.0/dojox/widget/tests/images/icon_update.png |
---|
Cannot display: file marked as a binary type. |
svn:mime-type = application/octet-stream |
/trunk/api/js/dojo1.0/dojox/widget/tests/images/icon_update.png |
---|
New file |
Property changes: |
Added: svn:mime-type |
+application/octet-stream |
\ No newline at end of property |
/trunk/api/js/dojo1.0/dojox/widget/tests/images/icon_browser.png |
---|
Cannot display: file marked as a binary type. |
svn:mime-type = application/octet-stream |
/trunk/api/js/dojo1.0/dojox/widget/tests/images/icon_browser.png |
---|
New file |
Property changes: |
Added: svn:mime-type |
+application/octet-stream |
\ No newline at end of property |
/trunk/api/js/dojo1.0/dojox/widget/tests/images/fisheye_1.png |
---|
Cannot display: file marked as a binary type. |
svn:mime-type = application/octet-stream |
/trunk/api/js/dojo1.0/dojox/widget/tests/images/fisheye_1.png |
---|
New file |
Property changes: |
Added: svn:mime-type |
+application/octet-stream |
\ No newline at end of property |
/trunk/api/js/dojo1.0/dojox/widget/tests/images/fisheye_2.png |
---|
Cannot display: file marked as a binary type. |
svn:mime-type = application/octet-stream |
/trunk/api/js/dojo1.0/dojox/widget/tests/images/fisheye_2.png |
---|
New file |
Property changes: |
Added: svn:mime-type |
+application/octet-stream |
\ No newline at end of property |
/trunk/api/js/dojo1.0/dojox/widget/tests/images/fisheye_3.png |
---|
Cannot display: file marked as a binary type. |
svn:mime-type = application/octet-stream |
/trunk/api/js/dojo1.0/dojox/widget/tests/images/fisheye_3.png |
---|
New file |
Property changes: |
Added: svn:mime-type |
+application/octet-stream |
\ No newline at end of property |
/trunk/api/js/dojo1.0/dojox/widget/tests/images/fisheye_4.png |
---|
Cannot display: file marked as a binary type. |
svn:mime-type = application/octet-stream |
/trunk/api/js/dojo1.0/dojox/widget/tests/images/fisheye_4.png |
---|
New file |
Property changes: |
Added: svn:mime-type |
+application/octet-stream |
\ No newline at end of property |
/trunk/api/js/dojo1.0/dojox/widget/tests/images/icon_email.png |
---|
Cannot display: file marked as a binary type. |
svn:mime-type = application/octet-stream |
/trunk/api/js/dojo1.0/dojox/widget/tests/images/icon_email.png |
---|
New file |
Property changes: |
Added: svn:mime-type |
+application/octet-stream |
\ No newline at end of property |
/trunk/api/js/dojo1.0/dojox/widget/tests/images/icon_calendar.png |
---|
Cannot display: file marked as a binary type. |
svn:mime-type = application/octet-stream |
/trunk/api/js/dojo1.0/dojox/widget/tests/images/icon_calendar.png |
---|
New file |
Property changes: |
Added: svn:mime-type |
+application/octet-stream |
\ No newline at end of property |
/trunk/api/js/dojo1.0/dojox/widget/tests/images/icon_texteditor.png |
---|
Cannot display: file marked as a binary type. |
svn:mime-type = application/octet-stream |
/trunk/api/js/dojo1.0/dojox/widget/tests/images/icon_texteditor.png |
---|
New file |
Property changes: |
Added: svn:mime-type |
+application/octet-stream |
\ No newline at end of property |
/trunk/api/js/dojo1.0/dojox/widget/tests/test_SortList.html |
---|
New file |
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> |
/trunk/api/js/dojo1.0/dojox/widget/tests/test_Loader.html |
---|
New file |
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> |
/trunk/api/js/dojo1.0/dojox/widget/tests/test_FisheyeList.html |
---|
New file |
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> |
/trunk/api/js/dojo1.0/dojox/widget/tests/test_Iterator.html |
---|
New file |
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> |
/trunk/api/js/dojo1.0/dojox/widget/tests/test_ColorPicker.html |
---|
New file |
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> |
/trunk/api/js/dojo1.0/dojox/widget/FileInputAuto.js |
---|
New file |
0,0 → 1,178 |
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 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<span class=\"dijitInline dijitFileInputText\" dojoAttachPoint=\"titleNode\">${label}</span>\n\t\t<span class=\"dijitInline dijitFileInputButton\" dojoAttachPoint=\"cancelNode\" dojoAttachEvent=\"onclick:_onClick\">${cancelText}</span>\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 = document.createElement('form'); |
_newForm.setAttribute("enctype","multipart/form-data"); |
var node = dojo.clone(this.fileInput); |
_newForm.appendChild(this.fileInput); |
dojo.body().appendChild(_newForm); |
dojo.io.iframe.send({ |
url: this.url+"?name="+this.name, |
form: _newForm, |
handleAs: "text", |
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(/* Object */data, /* dojo.Deferred._ioArgs */ioArgs, /* this */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 |
} |
}); |
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"); |
//dojo.style(this.fileInput,"height",this.overlay.scrollHeight+"px") |
}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(); |
} |
}); |
} |
/trunk/api/js/dojo1.0/dojox/widget/FisheyeList.js |
---|
New file |
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("dojox.widget", "FisheyeList/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 |
} |
}); |
} |
/trunk/api/js/dojo1.0/dojox/widget/Iterator.js |
---|
New file |
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 = {}; |
} |
/trunk/api/js/dojo1.0/dojox/widget/Loader/honey.php |
---|
New file |
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); |
} |
?> |
/trunk/api/js/dojo1.0/dojox/widget/Loader/icons/loading.gif |
---|
Cannot display: file marked as a binary type. |
svn:mime-type = application/octet-stream |
/trunk/api/js/dojo1.0/dojox/widget/Loader/icons/loading.gif |
---|
New file |
Property changes: |
Added: svn:mime-type |
+application/octet-stream |
\ No newline at end of property |
/trunk/api/js/dojo1.0/dojox/widget/Loader/Loader.css |
---|
New file |
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; |
} |
/trunk/api/js/dojo1.0/dojox/widget/Loader/README |
---|
New file |
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. |
/trunk/api/js/dojo1.0/dojox/widget/TimeSpinner.js |
---|
New file |
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" |
}); |
} |
/trunk/api/js/dojo1.0/dojox/widget/FileInput.js |
---|
New file |
0,0 → 1,76 |
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,dijit._Templated], |
{ |
// 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<span class=\"dijitFileInputText\" dojoAttachPoint=\"titleNode\">${label}</span>\n\t\t<span class=\"dijitFileInputButton\" dojoAttachPoint=\"cancelNode\" \n\t\t\tdojoAttachEvent=\"onclick:_onClick\">${cancelText}</span>\n\t</div>\n</div>\n", |
startup: function(){ |
// summary: listen for changes on our real file input |
this.inherited("startup",arguments); |
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 = ""; |
} |
}); |
} |
/trunk/api/js/dojo1.0/dojox/widget/ColorPicker/ColorPicker.css |
---|
New file |
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; } |
/trunk/api/js/dojo1.0/dojox/widget/ColorPicker/images/hue.png |
---|
Cannot display: file marked as a binary type. |
svn:mime-type = application/octet-stream |
/trunk/api/js/dojo1.0/dojox/widget/ColorPicker/images/hue.png |
---|
New file |
Property changes: |
Added: svn:mime-type |
+application/octet-stream |
\ No newline at end of property |
/trunk/api/js/dojo1.0/dojox/widget/ColorPicker/images/underlay.png |
---|
Cannot display: file marked as a binary type. |
svn:mime-type = application/octet-stream |
/trunk/api/js/dojo1.0/dojox/widget/ColorPicker/images/underlay.png |
---|
New file |
Property changes: |
Added: svn:mime-type |
+application/octet-stream |
\ No newline at end of property |
/trunk/api/js/dojo1.0/dojox/widget/ColorPicker/images/hueHandle.png |
---|
Cannot display: file marked as a binary type. |
svn:mime-type = application/octet-stream |
/trunk/api/js/dojo1.0/dojox/widget/ColorPicker/images/hueHandle.png |
---|
New file |
Property changes: |
Added: svn:mime-type |
+application/octet-stream |
\ No newline at end of property |
/trunk/api/js/dojo1.0/dojox/widget/ColorPicker/images/pickerPointer.png |
---|
Cannot display: file marked as a binary type. |
svn:mime-type = application/octet-stream |
/trunk/api/js/dojo1.0/dojox/widget/ColorPicker/images/pickerPointer.png |
---|
New file |
Property changes: |
Added: svn:mime-type |
+application/octet-stream |
\ No newline at end of property |
/trunk/api/js/dojo1.0/dojox/widget/ColorPicker/ColorPicker.html |
---|
New file |
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> |
/trunk/api/js/dojo1.0/dojox/widget/Loader.js |
---|
New file |
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.attachPointer){ |
dojo.disconnect(this._pointerConnect); |
} |
dojo.fadeOut({ node: this.loadNode, duration:this.duration }).play(); |
} |
} |
}); |
} |
/trunk/api/js/dojo1.0/dojox/widget/Toaster/Toaster.css |
---|
New file |
0,0 → 1,47 |
/* main classes for dojox.widget.Toaster */ |
.tundra .dijitToasterContent{ |
padding:1em; |
padding-top:0.25em; |
background:#73c74a; |
} |
.tundra .dijitToasterMessage{ |
color:#fff; |
} |
.tundra .dijitToasterWarning{ } |
.tundra .dijitToasterError, |
.tundra .dijitToasterFatal{ |
font-weight:bold; |
color:#fff; |
} |
.tundra .dijitToasterWarning .dijitToasterContent{ |
padding:1em; |
padding-top:0.25em; |
background:#d4d943; |
} |
.tundra .dijitToasterError .dijitToasterContent{ |
padding:1em; |
padding-top:0.25em; |
background:#c46600; |
} |
/* imported from dijit.css */ |
.dijitToasterClip { |
position: absolute; |
overflow: hidden; |
} |
.dijitToasterContainer { |
display: block; |
position: absolute; |
width: 17.5em; |
z-index: 5000; |
margin: 0px; |
font:0.75em Tahoma, Helvetica, Verdana, Arial; |
} |
/trunk/api/js/dojo1.0/dojox/widget/SortList/SortList.html |
---|
New file |
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> |
/trunk/api/js/dojo1.0/dojox/widget/SortList/SortList.css |
---|
New file |
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; |
} |
/trunk/api/js/dojo1.0/dojox/widget/ColorPicker.js |
---|
New file |
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("dojox.widget","FisheyeList/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]; |
} |
}); |
} |
/trunk/api/js/dojo1.0/dojox/widget/FisheyeList/blank.gif |
---|
Cannot display: file marked as a binary type. |
svn:mime-type = application/octet-stream |
/trunk/api/js/dojo1.0/dojox/widget/FisheyeList/blank.gif |
---|
New file |
Property changes: |
Added: svn:mime-type |
+application/octet-stream |
\ No newline at end of property |
/trunk/api/js/dojo1.0/dojox/widget/FisheyeList/FisheyeList.css |
---|
New file |
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; |
} |
/trunk/api/js/dojo1.0/dojox/widget/Toaster.js |
---|
New file |
0,0 → 1,252 |
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"); |
// This is mostly taken from Jesse Kuhnert's MessageNotifier. |
// Modified by Bryan Forbes to support topics and a variable delay. |
// Modified by Karl Tiedt to support 0 duration messages that require user interaction and message stacking |
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(){ |
dojox.widget.Toaster.superclass.postCreate.apply(this); |
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); |
} |
}, |
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); |
}), 50); |
return; |
} |
} |
var capitalize = function(word){ |
return word.substring(0,1).toUpperCase() + word.substring(1); |
}; |
// determine type of content and apply appropriately |
for(var type in this.messageTypes){ |
dojo.removeClass(this.containerNode, "dijitToaster" + 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" + 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); |
if(this.isVisible){ |
this._placeClip(); |
}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}); |
dojo.connect(this.slideAnim, "onEnd", this, 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}); |
dojo.connect(this.fadeAnim, "onEnd", this, function(evt){ |
this.isVisible = false; |
this.hide(); |
}); |
//if duration == 0 we keep the message displayed until clicked |
//TODO: fix so that if a duration > 0 is displayed when a duration==0 is appended to it, the fadeOut is canceled |
if(duration>0){ |
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.fadeAnim.play(); |
}), duration); |
}else{ |
dojo.connect(this, 'onSelect', this, function(evt){ |
this.fadeAnim.play(); |
}); |
} |
this.isVisible = true; |
}); |
this.slideAnim.play(); |
} |
}, |
_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); |
//TODO this.bgIframe.setZIndex(this.clipNode); |
} |
//TODO this.bgIframe.onResized(); |
var iframe = this.bgIframe.iframe; |
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.containerNode, 'display', ''); |
this._placeClip(); |
if(!this._scrollConnected){ |
this._scrollConnected = dojo.connect(window, "onscroll", this, this._placeClip); |
} |
}, |
hide: function(){ |
// summary: hide the Toaster |
//Q: ALP: I didn't port all the toggler stuff from d.w.HtmlWidget. Is it needed? Ditto for show. |
dojo.style(this.containerNode, 'display', 'none'); |
if(this._scrollConnected){ |
dojo.disconnect(this._scrollConnected); |
this._scrollConnected = false; |
} |
dojo.style(this.containerNode, "opacity", 1); |
} |
} |
); |
} |
/trunk/api/js/dojo1.0/dojox/widget/README |
---|
New file |
0,0 → 1,65 |
------------------------------------------------------------------------------- |
dojox.widget Collection |
------------------------------------------------------------------------------- |
Version 1.0 |
Release date: 10/31/2007 |
------------------------------------------------------------------------------- |
Project state: |
expermental | beta |
------------------------------------------------------------------------------- |
Credits |
Peter Higgins (dante) |
Karl Tiedt (ktiedt@gmail.com) |
------------------------------------------------------------------------------- |
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 |
* 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. |
/trunk/api/js/dojo1.0/dojox/widget/SortList.js |
---|
New file |
0,0 → 1,153 |
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 <ul> 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 = document.createElement("li"); |
var text = this.store.getValue(item,this.key); |
node.innerHTML = text; |
this.containerNode.appendChild(node); |
}, |
postCreate: function(){ |
if (this.store){ |
// FIXME: is this right? |
this.store = eval(this.store); |
var props = { |
onItem: dojo.hitch(this,"_addItem"), |
onComplete: dojo.hitch(this,"onSort") |
}; |
this.store.fetch(props); |
}else{ this.onSort(); } |
this.inherited("postCreate",arguments); |
}, |
startup: function(){ |
this.inherited("startup",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("resize",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 = title; |
}, |
onChanged: function(){ |
// summary: stub function, passes the last changed item, and is fired after current state |
} |
}); |
} |