nickpons666/ventas_php
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Primer commit del sistema avantika sin cambios

Browse Source
This commit is contained in:
nickpons666
2026-01-06 19:42:24 -06:00
commit 3ae4be5957
7127 changed files with 440072 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
javascript/scoluos/test/functional/_ajax_inplaceeditor_result.html Executable file
View File

@@ -0,0 +1 @@
Server received: To be edited

1
javascript/scoluos/test/functional/_ajax_inplaceeditor_text.html Executable file
View File

@@ -0,0 +1 @@
Text from server

9
javascript/scoluos/test/functional/_autocomplete_result.html Executable file
View File

@@ -0,0 +1,9 @@
<ul>
<li>test1<span class="selectme">selectme1</span></li><li><span class="selectme">selectme2</span>test2</li>
<li>test3<span class="selectme">selectme3</span></li>
<li><b>BOLD</b><span class="selectme">selectme4<b>boldinselectme</b></span></li>
<li><span class="informal">(GET ME NOT)</span>(GET &lt;ME&gt; INSTEAD)<span class="selectme">(forselectme!)</span></li>
<li><span class="selectme">Here we have <a href="_autocomplete_result.html">a link</a> which should work</span></li>
</ul>

3
javascript/scoluos/test/functional/_autocomplete_result_single.html Executable file
View File

@@ -0,0 +1,3 @@
<ul>
<li>test1<span class="selectme">selectme1</span></li>
</ul>

86
javascript/scoluos/test/functional/ajax_autocompleter2_test.html Executable file
View File

@@ -0,0 +1,86 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>script.aculo.us Autocompleter functional test file</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="../../lib/prototype.js" type="text/javascript"></script>
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
<script src="../../src/unittest.js" type="text/javascript"></script>
<style type="text/css" media="screen">
.selected { background-color: #888; }
</style>
</head>
<body>
<h1>script.aculo.us Autocompleter functional test file</h1>
This is an incremental Ajax autocompleter. Type something, then type a comma, than type more. This autocompleter features an indicator.<br/>
<div id="ac1_indicator" style="display:none">NOW FETCHING RESULTS</div>
Autocompleter ac1: <input type="text" id="ac1" autocomplete="off"/>
<div id="ac1update" style="display:none;border:1px solid black;background-color:white;position:relative;"></div>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
new Ajax.Autocompleter('ac1','ac1update','_autocomplete_result.html', {
tokens: ',', indicator: 'ac1_indicator'
} );
// ]]>
</script>
<br/><br/>
Non-incremental Ajax autocompleter.<br/>
Autocompleter ac2: <input id="ac2" type="text" autocomplete="off"/>
<div id="ac2update" style="display:none;border:1px solid black;background-color:white;"></div>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
new Ajax.Autocompleter('ac2','ac2update','_autocomplete_result.html');
// ]]>
</script>
<br/><br/>
Non-incremental Ajax autocompleter.<br/>
Autocompleter ac3: <input id="ac3" type="text" autocomplete="off"/>
<div id="ac3update" style="display:none;border:1px solid black;background-color:white;"></div>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
new Ajax.Autocompleter('ac3','ac3update','_autocomplete_result.html');
// ]]>
</script>
<br/><br/>
Local incremental array autocompleter ac4<br/> with full-search. Type 'Jac', hit enter a few <br/>times, type 'gne'.<br/> <textarea rows=5 cols=40 id="ac4" autocomplete="off"></textarea>
<div id="ac4update" style="display:none;border:1px solid black;background-color:white;"></div>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
new Autocompleter.Local('ac4','ac4update',
new Array("John Jackson", "", "Jack Johnson", "", "Jane Agnews"), { tokens: new Array(',','\n'), fullSearch: true, partialSearch: true });
// ]]>
</script>
<br/><br/>
Local incremental array autocompleter ac5<br/> with fixed height and scrollbar. Type 'Jac', hit enter a few <br/>times, type 'gne'.<br/> <input id="ac5" type="text" autocomplete="off"/>
<div id="ac5update" style="display:none;border:1px solid black;background-color:white;height:50px;overflow:auto;"></div>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
new Autocompleter.Local('ac5','ac5update',
new Array("John Jackson", "Jack Johnson", "Jane Agnews", "Jack Johnson", "Jane Agnews", "Jack Johnson", "Jane Agnews"), { tokens: new Array(',','\n'), fullSearch: true, partialSearch: true });
// ]]>
</script>
<br /><br /><br />
<br /><br /><br />
<div id="debug" style="font-size:11px;"></div>
</body>
</html>

71
javascript/scoluos/test/functional/ajax_autocompleter_test.html Executable file
View File

@@ -0,0 +1,71 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>script.aculo.us Autocompleter functional test file</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="../../lib/prototype.js" type="text/javascript"></script>
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
<script src="../../src/unittest.js" type="text/javascript"></script>
<style type="text/css" media="screen">
.selected { background-color: #888; }
</style>
</head>
<body>
<h1>script.aculo.us Autocompleter functional test file</h1>
Autocompleter ac1 (updated panel is relative, so no overlapping should occur): <input id="ac1" name="ac1" type="text"/>
<div id="ac1update" style="display:none;border:1px solid black;background-color:white;position:relative;"></div>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
new Ajax.Autocompleter('ac1','ac1update','_autocomplete_result.html');
// ]]>
</script>
<br/>
Autocompleter ac2 w/ parameters: <input id="ac2" type="text" name="ac2"/>
<div id="ac2update" style="display:none;border:1px solid black;background-color:white;"></div>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
new Ajax.Autocompleter('ac2','ac2update','_autocomplete_result.html',{parameters:'a=b&b=c'});
// ]]>
</script>
<br/>
Autocompleter ac3 (nested in postion:relative div, selects "selectme" class):
<br/>
<div style="position:relative">
<input id="ac3" type="text"/>
<div id="ac3update" style="display:none;border:1px solid black;background-color:white;"></div>
</div>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
new Ajax.Autocompleter('ac3','ac3update','_autocomplete_result.html',{select:'selectme'});
// ]]>
</script>
<br/><select><option>First Item</option><option>Second Item</option><option>Third Item</option></select>
<br/><br/>
Autocompleter ac4 (autoselects option if single single option is returned):
<br/>
<input id="ac4" type="text"/>
<div id="ac4update" style="display:none;border:1px solid black;background-color:white;"></div>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
new Ajax.Autocompleter('ac4','ac4update','_autocomplete_result_single.html',{select:'selectme',autoSelect:true});
// ]]>
</script>
<div id="debug" style="font-size:11px;"></div>
</body>
</html>

60
javascript/scoluos/test/functional/ajax_inplacecollectioneditor_test.html Executable file
View File

@@ -0,0 +1,60 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>script.aculo.us Demo</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="../../lib/prototype.js" type="text/javascript"></script>
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
<script src="../../src/unittest.js" type="text/javascript"></script>
<style type="text/css" media="screen">
.inplaceeditor-saving { background: url(wait.gif) bottom right no-repeat; }
</style>
</head>
<body>
<h1>script.aculo.us Demo</h1>
<p>
Demo of the Ajax.InPlaceCollectionEditor.
</p>
<p id="tobeedited">three</p> (should autoselect "three")
<script>
new Ajax.InPlaceCollectionEditor(
'tobeedited', '_ajax_inplaceeditor_result.html', {
collection: ['one','two','three'],
ajaxOptions: {method: 'get'} //override so we can use a static for the result
});
</script>
<p id="tobeedited2">two</p> (should autoselect "two")
<script>
new Ajax.InPlaceCollectionEditor(
'tobeedited2', '_ajax_inplaceeditor_result.html', {
collection: [[0,'one'],[1,'two'],[2,'three']],
ajaxOptions: {method: 'get'} //override so we can use a static for the result
});
</script>
<p id="tobeedited3">three</p> (should manually select "one")
<script>
new Ajax.InPlaceCollectionEditor(
'tobeedited3', '_ajax_inplaceeditor_result.html', {
collection: [[0,'one'],[1,'two'],[2,'three']],
value: 0,
ajaxOptions: {method: 'get'} //override so we can use a static for the result
});
</script>
<p id="tobeedited4">one</p> (should manually select "two")
<script>
new Ajax.InPlaceCollectionEditor(
'tobeedited4', '_ajax_inplaceeditor_result.html', {
collection: ['one','two','three'],
value: 'two',
ajaxOptions: {method: 'get'} //override so we can use a static for the result
});
</script>
</body>
</html>

116
javascript/scoluos/test/functional/ajax_inplaceeditor_test.html Executable file
View File

@@ -0,0 +1,116 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>script.aculo.us Demo</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="../../lib/prototype.js" type="text/javascript"></script>
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
<script src="../../src/unittest.js" type="text/javascript"></script>
<style type="text/css" media="screen">
.inplaceeditor-saving { background: url(wait.gif) bottom right no-repeat; }
</style>
</head>
<body>
<h1>script.aculo.us Demo</h1>
<p>
Demo of the Ajax.InPlaceEditor.
</p>
<h1 id="tobeedited">To be edited</h1>
<script>
new Ajax.InPlaceEditor($('tobeedited'), '_ajax_inplaceeditor_result.html', {
ajaxOptions: {method: 'get'} //override so we can use a static for the result
});
</script>
<h1 id="tobeeditedblur">To be edited w/ blur</h1>
<script>
new Ajax.InPlaceEditor($('tobeeditedblur'), '_ajax_inplaceeditor_result.html', {
submitOnBlur: true, okButton: false, cancelLink: true,
ajaxOptions: {method: 'get'} //override so we can use a static for the result
});
</script>
<h1 id="tobeeditedoklink">To be edited w/ okLink and cancelButton</h1>
<script>
new Ajax.InPlaceEditor($('tobeeditedoklink'),
'_ajax_inplaceeditor_result.html', {
okButton: false,
okLink: true,
cancelButton: true,
cancelLink: false,
textBeforeControls: ' ---> ',
textBetweenControls: ' | ',
textAfterControls: ' <--- ',
ajaxOptions: {method: 'get'} //override so we can use a static for the result
});
</script>
<h1 id="tobeeditedoklinkonly">To be edited w/ okLink only </h1>
<script>
new Ajax.InPlaceEditor($('tobeeditedoklinkonly'),
'_ajax_inplaceeditor_result.html', {
okButton: false,
okLink: true,
cancelButton: false,
cancelLink: false,
textBeforeControls: ' ---> ',
textBetweenControls: ' | ', // will not be used, as one control only
textAfterControls: ' <--- ',
ajaxOptions: {method: 'get'} //override so we can use a static for the result
});
</script>
<span id="tobeedited2">With external edit control and custom parameter name</span> &nbsp; <a id="tobeedited2EditControl" href="#">edit</a>
<script>
new Ajax.InPlaceEditor($('tobeedited2'), '_ajax_inplaceeditor_result.html', {
externalControl: 'tobeedited2EditControl',
paramName: 'foobar',
ajaxOptions: {method: 'get'} //override so we can use a static for the result
});
</script>
<table>
<tbody>
<tr>
<td><span id="tobeeditedTD">test</span></td>
<td><a id="tobeeditedTDEditControl" href="#">edit</a></td>
</tr>
</tbody>
</table>
<script>
new Ajax.InPlaceEditor($('tobeeditedTD'), '_ajax_inplaceeditor_result.html', {
externalControl: 'tobeeditedTDEditControl'
});
</script>
<p id="tobeedited3">Multi row editor: Lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum</p>
<script>
new Ajax.InPlaceEditor($('tobeedited3'), '_ajax_inplaceeditor_result.html', {
rows:5,
ajaxOptions: {method: 'get'} //override so we can use a static for the result
});
</script>
<p id="tobeedited4">Loads text from server</p>
<script>
new Ajax.InPlaceEditor($('tobeedited4'), '_ajax_inplaceeditor_result.html',
{ajaxOptions: {method: 'get'}, //override so we can use a static for the result and to load the text
loadTextURL: '_ajax_inplaceeditor_text.html'
});
</script>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<h1 id="tobeeditedFarDown">Editor very far down to test scrolling bug</h1>
<script>
new Ajax.InPlaceEditor($('tobeeditedFarDown'), '../unit/_ajax_inplaceeditor_result.html');
</script>
</body>
</html>

85
javascript/scoluos/test/functional/dragdrop2_test.html Executable file
View File

@@ -0,0 +1,85 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>script.aculo.us Drag and drop functional test file</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="../../lib/prototype.js" type="text/javascript"></script>
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
<script src="../../src/unittest.js" type="text/javascript"></script>
<style type="text/css" media="screen">
#thelist li { background: green; margin:5px; padding: 30px; }
#thelist2 li { background: #ffb; margin:2px; padding: 2px; }
</style>
</head>
<body>
<h1>script.aculo.us Drag and drop functional test file</h1>
<h2>Draggables/Droppables</h2>
<div id="revertbox1" class="box1" style="z-index:1000;width:150px;height:150px;background:#bbf;">
<span id="handle1">drag here</span><br/>
<input type="checkbox" id="shouldrevert1"/> Revert?
</div>
<div id="revertbox2" class="box" style="z-index:1000;width:150px;height:150px;background:#bbf;">
<span id="handle2">drag here</span><br/>
<input type="checkbox" id="shouldrevert2"/> Revert?
I've onStart, onDrag and onEnd events!<br/>
<span id="event-info"></span>
</div>
<div id="specialbox" class="box" style="z-index:1000;width:150px;height:150px;background:#fbb;">
This box overrides the default endeffect
</div>
<div id="specialbox2" class="box" style="z-index:1000;width:150px;height:150px;background:#fbb;">
This box overrides the default starteffect
</div>
<div id="specialbox3" class="box" style="z-index:1000;width:150px;height:150px;background:#fbb;">
This box overrides the default end- and starteffects
</div>
<div id="droptarget1" style="width:200px;height:200px;background-color:#eee;">accepts first box</div>
<div id="droptarget2" style="width:200px;height:200px;background-color:#eee;">accepts second box</div>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
new Draggable('revertbox1',{scroll:window,handle:'handle1',revert:function(element){return ($('shouldrevert1').checked)}});
new Draggable('revertbox2',{
handle:'handle2',
revert:function(element){return ($('shouldrevert2').checked)},
onStart:function(){$('revertbox2').setStyle({backgroundColor:'#bfb'})},
onDrag:function(){$('event-info').update('drag!')},
onEnd:function(){alert('end!')}
});
Droppables.add('droptarget1',{accept:['box1','otherstuff'],onDrop:function(){alert('drop!')}});
Droppables.add('droptarget2',{accept:'box',onDrop:function(){alert('drop!')}});
new Draggable('specialbox',{
endeffect:function(){
new Effect.Highlight('specialbox',{queue:'end'});
}
});
new Draggable('specialbox2',{
starteffect:function(){
new Effect.Highlight('specialbox2',{queue:'end'});
}
});
new Draggable('specialbox3',{
starteffect:function(){
new Effect.Highlight('specialbox3',{queue:'end'});
},
endeffect:function(){
new Effect.Highlight('specialbox3',{queue:'end'});
}
});
// ]]>
</script>
</body>
</html>

90
javascript/scoluos/test/functional/dragdrop3_test.html Executable file
View File

@@ -0,0 +1,90 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>script.aculo.us Drag and drop functional test file</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="../../lib/prototype.js" type="text/javascript"></script>
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
<script src="../../src/unittest.js" type="text/javascript"></script>
<style type="text/css" media="screen">
#thelist li { background: green; margin:5px; padding: 30px; }
#thelist2 li { background: #ffb; margin:2px; padding: 2px; }
</style>
</head>
<body>
<h1>script.aculo.us Drag and drop functional test file</h1>
<h2>Draggables/Droppables</h2>
<div style="width:400px;height:400px;overflow:scroll;position:relative;" id="scroll-container">
<ul id="thelist2" style="padding: 2px; background:red;">
<li>Relatively here!</li>
<li><input onclick="this.checked = !this.checked" name="x" id="x" type="checkbox"/>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<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>
</div>
<pre id="debug"></pre>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
// Sortable.create('thelist', {overlap: 'horizontal', constraint: false});
Position.includeScrollOffsets = true;
Sortable.create('thelist2',{scroll:'scroll-container'});
// ]]>
</script>
</body>
</html>

41
javascript/scoluos/test/functional/dragdrop4_test.html Executable file
View File

@@ -0,0 +1,41 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>script.aculo.us Drag and drop functional test file</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="../../lib/prototype.js" type="text/javascript"></script>
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
<script src="../../src/unittest.js" type="text/javascript"></script>
</head>
<body style="background-color:#eee;">
<div style="position:relative;margin-left:100px;top:40px;background-color:white;">
(inside position:relative container)
<h1>script.aculo.us Drag and drop functional test file</h1>
<h2>Draggables/Droppables</h2>
<div id="absolute_positioned_element" class="box1" style="width:150px;height:150px;background:#bbf;">
<b>Ghosting effect</b>
<input type="text" value="blah"/>
<div id="hurradiegams">test!</div>
<br/>
</div>
<a href="#" onclick="alert($('hurradiegams').innerHTML); return false;">alert contents of test div</a>
<div id="absolute_positioned_element2" class="box1" style="width:150px;height:150px;background:#bbf;">
<span id="handle1">Ghost effect</span><br/>
</div>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
Position.includeScrollOffsets = true;
new Draggable('absolute_positioned_element',{ghosting: true});
new Draggable('absolute_positioned_element2',{ghosting: true, revert:true});
// ]]>
</script>
</div>
</body>
</html>

42
javascript/scoluos/test/functional/dragdrop5_test.html Executable file
View File

@@ -0,0 +1,42 @@
<html>
<head>
<title>script.aculo.us Drag and drop functional test file</title>
<script src="../../lib/prototype.js" type="text/javascript"></script>
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
<script src="../../src/unittest.js" type="text/javascript"></script>
</head>
<style>
div.hoverclass123 {
border:1px solid red;
}
</style>
<body>
<h1>script.aculo.us Drag and drop functional test file</h1>
<h2>w/o hoverclass</h2>
<div id="cart" class="cart" style="text-align:center;height:50px;padding:10px;background-color:#fba">
### DROP HERE ###
</div>
<script type="text/javascript">Droppables.add('cart', {onDrop:function(element,dropon){alert('w/o hoverclass, should be \'product_id\':' + encodeURIComponent(element.id) + ', dropon should be \'cart\':' + dropon.id)}})</script>
<br/>
<img alt="Product2" id="product_id" src="icon.png" /> &lt;-- drag this!
<script type="text/javascript">new Draggable('product_id', {revert:true})</script>
<h2>w/ hoverclass</h2>
<div id="carth" class="cart" style="text-align:center;height:50px;padding:10px;background-color:#fba">
### DROP HERE ###
</div>
<script type="text/javascript">Droppables.add('carth', {hoverclass:'hoverclass123',onDrop:function(element, dropon, event){alert('w/ hoverclass: should be \'product_id\':' + encodeURIComponent(element.id) + ', dropon should be \'carth\':' + dropon.id)}})</script>
</body>
</html>

76
javascript/scoluos/test/functional/dragdrop6_test.html Executable file
View File

@@ -0,0 +1,76 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>script.aculo.us Drag and drop functional test file</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="../../lib/prototype.js" type="text/javascript"></script>
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
<script src="../../src/unittest.js" type="text/javascript"></script>
<style type="text/css" media="screen">
div.box { background: green; width:100px; height:100px }
div.box-container { background: yellow; width:200px; height:200px }
</style>
</head>
<body>
<h1>script.aculo.us Drag and drop functional test file</h1>
<h2>Draggables/Droppables</h2>
<div id="box-normal" class="box">
Normal box
</div>
<div id="box-grid-numeric" class="box">
snap: 25
</div>
<div id="box-grid-array" class="box">
snap: [5,25]
</div>
<div id="box-grid-procedural" class="box">
snap: procedural (e.g. constrain to box)
</div>
<div class="box-container">
<div id="box-grid-procedural-gets-draggable" class="box">
snap: procedural (e.g. constrain to parent element)
</div>
</div>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
new Draggable('box-normal',{snap:false,revert:true});
new Draggable('box-grid-numeric',{snap:25,revert:true});
new Draggable('box-grid-array',{snap:[5,25],revert:true});
new Draggable('box-grid-procedural',{
snap: function(x,y) {
return[
x<100 ? (x > 0 ? x : 0 ) : 100,
y<50 ? (y > 0 ? y : 0) : 50];
},
revert:true
});
new Draggable('box-grid-procedural-gets-draggable',{
snap: function(x,y,draggable) {
function constrain(n, lower, upper) {
if (n > upper) return upper;
else if (n < lower) return lower;
else return n;
}
element_dimensions = Element.getDimensions(draggable.element);
parent_dimensions = Element.getDimensions(draggable.element.parentNode);
return[
constrain(x, 0, parent_dimensions.width - element_dimensions.width),
constrain(y, 0, parent_dimensions.height - element_dimensions.height)];
},
revert:true
});
// ]]>
</script>
</body>
</html>

211
javascript/scoluos/test/functional/dragdrop7_test.html Executable file
View File

@@ -0,0 +1,211 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script src="../../lib/prototype.js" type="text/javascript"></script>
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
Position.includeScrollOffsets = true;
Draggables.clear = function (event) {
while (Draggables.drags.length) {
var d = Draggables.drags.pop();
var e = d.element;
d.stopScrolling();
d.destroy();
d.element = null;
if (e.parentNode) {e.parentNode.removeChild(e)};
}
}
function cleanup() { //try to remove circular references
lis = document.getElementsByTagName("li");
for (i = 0; i < lis.length; i++) {
if (lis[i].longListItem) {lis[i].longListItem.destroy();}
else if (lis[i].container) {lis[i].container.destroy();}
}
Draggables.clear();
}
window.onload = function() {
var li = $("masterList").getElementsByTagName('LI');
for (var i = 0; i < li.length; i++) {
//var d = new LongListItem(li[i]);
//li[i].onmousedown = d.onMouseDown.bindAsEventListener(d);
var d = new Draggable(li[i],
{revert: true,
ghosting: false,
scroll: "rightContainers"
});
}
var divs = $("rightContainers").getElementsByTagName("div");
for (i = 0; i < divs.length; i++) {
if (divs[i].className && Element.hasClassName(divs[i], "container")) {
Droppables.add(divs[i].id, {hoverclass: "hover", scrollingParent: "rightContainers"});
}
}
Event.observe(window, 'unload', cleanup, false);
}
//]]>
</script>
<style type="text/css">
html, body {
margin:0; padding: 0;
height: 100% !important;
}
body {
position:relative;
color: black;
background-color: white;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
}
h1 {font-size:115%;}
h2 {font-size: 110%;}
h3 {font-size: 105%;}
div, p, li, td {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
}
p {margin: 0 0 .7em 0; padding:0;}
ul {
position:relative;
list-style: none;
margin:0; padding:0;
overflow: visible;
}
li {position:relative;}
.instructions {font-style:italic;}
#leftDiv {
position: absolute;
top: 0; left: 0; bottom: 0;
width: 30%;
margin: 0; padding: 7px;
border-right: 2px solid #bb9;
background-color: #eed;
}
#leftDiv li, #rightContainers div.container li {
margin: 3px 0; padding: 3px 3em 3px 10px;
border: 2px solid #456;
background-color: #cde;
cursor: move;
}
#rightContainers {
padding: .5em;
position: absolute;
top: 0; bottom: 0; right: 0; left: 35%;
overflow:auto;
}
#rightContainers div.container{
background-color: #bb9;
margin: 0 0 40px 0; padding: 0 0 1px 0;
border: 2px solid #775;
}
#rightContainers div.container h2{
margin:0; padding: 2px 1em 0 1em;
text-align:center;
}
#rightContainers div.container ul {
margin: 5px; padding: 0 3px;
background-color: white;
border: 1px solid black;
}
#rightContainers div.container ul.empty {
padding: 3px 0;
}
#rightContainers div.hover {
background-color: #eed;
}
</style>
<!--[if IE]><style type="text/css">
#leftDiv {
height: expression((document.body.clientHeight - 44) + "px");
}
#leftDiv ul{width:93%;}
#leftDiv li div.count {
right:4px;
top:4px;
}
#rightContainers li a.remove {
display:block;
float:none;
position:absolute;
top: 4px;
right: 1.6em;
margin:0; padding:0 .2em;
}
</style><![endif]-->
</head>
<body>
<div id="leftDiv" class="">
<form id="frmContinue" action="#" method="post">
<p class="instructions">Shrink your window until the right-hand pane is scrollable.</p>
<p class="instructions">Drag from the list on left to groups on the right, force the right-hand pane to scroll.</p>
<input name="data" type="hidden" value=" ">
</form>
<ul id="masterList">
<li id="drag1">One</li>
<li id="drag2">Two</li>
<li id="drag3">Three</li>
<li id="drag4">Four</li>
<li id="drag5">Five</li>
<li id="drag6">Six</li>
<li id="drag7">Seven</li>
<li id="drag8">Eight</li>
</ul>
</div>
<div id="rightContainers" class="">
</form>
<div id="grp1" class="container">
<h2><span id="grp1_name">Group 1</span></h2>
<ul id="grp1ul" class="empty"></ul>
</div>
<div id="grp2" class="container">
<h2><span id="grp2_name">Group 2</span></h2>
<ul id="grp2ul" class="empty"></ul>
</div>
<div id="grp3" class="container">
<h2><span id="grp3_name">Group 3</span></h2>
<ul id="grp3ul" class="empty"></ul>
</div>
<div id="grp4" class="container">
<h2><span id="grp4_name">Group 4</span></h2>
<ul id="grp4ul" class="empty"></ul>
</div>
<div id="grp5" class="container">
<h2><span id="grp5_name">Group 5</span></h2>
<ul id="grp5ul" class="empty"></ul>
</div>
<div id="grp6" class="container">
<h2><span id="grp6_name">Group 6</span></h2>
<ul id="grp6ul" class="empty"></ul>
</div>
<div id="grp7" class="container">
<h2><span id="grp7_name">Group 7</span></h2>
<ul id="grp7ul" class="empty"></ul>
</div>
<div id="grp8" class="container">
<h2><span id="grp8_name">Group 8</span></h2>
<ul id="grp8ul" class="empty"></ul>
</div>
<div id="grp9" class="container">
<h2><span id="grp9_name">Group 9</span></h2>
<ul id="grp9ul" class="empty"></ul>
</div>
</div>
</body>
</html>

142
javascript/scoluos/test/functional/dragdrop8_test.html Executable file
View File

@@ -0,0 +1,142 @@
<html>
<head>
<title>Drag &amp; Drop</title>
<style type="text/css">
td
{
width: 10em;
text-align: center;
}
table.mytable {
list-style-type: none;
padding: 4px 4px 0 4px;
margin: 0px;
font-size: 13px;
font-family: Arial, sans-serif;
}
table.mytable tr {
margin-bottom: 4px;
padding: 2px 2px;
border: 1px solid #c00;
background-color: #eee;
}
div.draggable {
cursor:move;
padding:2px;
background-color: #BBCCDD;
}
div.dropsite {
padding:2px;
background-color: #DDBB99;
}
div.hoverclass123
{
border:1px solid red;
}
</style>
<script language="JavaScript" type="text/javascript" src="../../lib/prototype.js"></script>
<script language="JavaScript" type="text/javascript" src="../../src/scriptaculous.js"></script>
<script language="JavaScript" type="text/javascript">
Position.includeScrollOffsets = true;
window.onload = function()
{
var t1 = document.getElementById("t1");
add_divs(t1, 'td', 'draggable');
var trs = t1.getElementsByTagName("tr");
for (var i = 0; i < trs.length; i++)
{
var divs = document.getElementsByClassName("draggable", trs[i]);
var drag_text = divs[2].innerHTML;
for (var j = 0; j < divs.length; ++j)
{
new Draggable(divs[j], {ghosting:true, revert:true});
}
}
var t2 = document.getElementById("t2");
add_divs(t2, 'td', 'dropsite');
var divs = document.getElementsByClassName("dropsite", t2);
for (var j = 0; j < divs.length; ++j)
{
Droppables.add(divs[j], {accept:'draggable',
hoverclass:'hoverclass123',
onDrop:function(element, dropon, event)
{ debug("dropped " + element.innerHTML + " on "
+ dropon.innerHTML + "\n")}});
}
};
function debug(text)
{
document.getElementById('debug').innerHTML
= "<pre>" + text + "</pre>";
}
function add_divs(table, tag, classname)
{
var items = table.getElementsByTagName(tag);
for (var i = 0; i < items.length; i++)
items[i].innerHTML =
"<div class='" + classname + "'>" + items[i].innerHTML + "</div>";
}
</script>
</head>
<body>
<p>Drag from this table:</p>
<DIV STYLE="padding-left: 50pt;">
<DIV STYLE="overflow: auto; width: 250; height: 100;
border: 1px gray solid;
padding:0px; margin: 0px;">
<table id="t1" class="sortable mytable">
<tr><td>one</td><td>1</td><td>uno</td></tr>
<tr><td>two</td><td>2</td><td>dos</td></tr>
<tr><td>three</td><td>3</td><td>tres</td></tr>
<tr><td>four</td><td>4</td><td>quatro</td></tr>
<tr><td>five</td><td>5</td><td>cinco</td></tr>
<tr><td>six</td><td>6</td><td>seis</td></tr>
<tr><td>seven</td><td>7</td><td>siete</td></tr>
<tr><td>eight</td><td>8</td><td>ocho</td></tr>
<tr><td>nine</td><td>9</td><td>nueve</td></tr>
<tr><td>ten</td><td>10</td><td>diez</td></tr>
</table>
</DIV>
</DIV>
<p>
<p>Drop on this table:</p>
<DIV STYLE="padding-left: 50pt;">
<DIV STYLE="overflow: auto; width: 250; height: 100;
border: 1px gray solid;
padding:0px; margin: 0px;">
<table id="t2" class="sortable mytable">
<tr><td>eleven</td><td>11</td><td>once</td></tr>
<tr><td>twelve</td><td>12</td><td>doce</td></tr>
<tr><td>thirteen</td><td>13</td><td>trece</td></tr>
<tr><td>fourteen</td><td>14</td><td>catorce</td></tr>
<tr><td>fifteen</td><td>15</td><td>quince</td></tr>
<tr><td>sixteen</td><td>16</td><td>dieciseis</td></tr>
<tr><td>seventeen</td><td>17</td><td>diecisiete</td></tr>
<tr><td>eightteen</td><td>18</td><td>dieciocho</td></tr>
<tr><td>nineteen</td><td>19</td><td>diecinueve</td></tr>
<tr><td>twenty</td><td>20</td><td>veinte</td></tr>
</table>
</DIV>
</DIV>
<p>
<div id="debug"></div>
</p>
</body>
</html>

47
javascript/scoluos/test/functional/dragdrop9_test.html Executable file
View File

@@ -0,0 +1,47 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script src="../../lib/prototype.js" type="text/javascript"></script>
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
</head>
<body>
<div id="source" style="height: 100px; width: 100px; background-color: gray;">
Draggable
</div>
<script type="text/javascript">
//<![CDATA[
new Draggable("source", {
revert:"failure",
onDropped: function(element){ $(element).update('I WAS DROPPED!') },
reverteffect: function(element, top_offset, left_offset) {
var dur = Math.sqrt(Math.abs(top_offset^2)+Math.abs(left_offset^2))*0.02;
new Effect.Move(element, {
x: -left_offset, y: -top_offset, duration: dur,
transition: Effect.Transitions.spring,
queue: {scope:'_draggable', position:'end'}
});
}
});
//]]>
</script>
<br/>
<div id="target" style="height: 100px; width: 100px; background-color: green;">
Good Target
</div>
<script type="text/javascript">
//<![CDATA[
Droppables.add("target", {
onDrop:function(element){ Effect.Puff($('source')); }
});
//]]>
</script>
<br/>
</body>
</html>

84
javascript/scoluos/test/functional/dragdrop_delay_test.html Executable file
View File

@@ -0,0 +1,84 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>script.aculo.us functional test</title>
<script type="text/javascript" src="../../lib/prototype.js"></script>
<script type="text/javascript" src="../../src/effects.js"></script>
<script type="text/javascript" src="../../src/dragdrop.js"></script>
<script type="text/javascript">
//<![CDATA[
var myStartEffect = function(element) {
element._opacity = Element.getOpacity(element);
new Effect.Opacity(element, {duration:0.2, from:element._opacity, to:0.7});
new Effect.Highlight(element, {});
}
//]]>
</script>
<style type="text/css">
/*<![CDATA[*/
h1 {font-size: 1.2em; text-align:center;}
li {
margin: 5px auto;
padding: 2px;
width: 200px;
text-align:center;
list-style-type:none;
border: 2px solid #779;
background-color: #dde
}
div {
margin: 5px auto;
padding: 2px;
width: 300px;
text-align:center;
border: 2px solid #797;
background-color: #ded
}
/*]]>*/
</style>
</head>
<body>
<h1>No delay sortable</h1>
<ul id="sort1">
<li id="s1_1">one</li>
<li id="s1_2">two</li>
<li id="s1_3">three</li>
</ul>
<h1>Delayed sortable (500 ms)</h1>
<ul id="sort2">
<li id="s2_1">one</li>
<li id="s2_2">two</li>
<li id="s2_3">three</li>
</ul>
<h1>No delay draggable</h1>
<div id="drag1">
Lorem ipsum
</div>
<h1>Delayed draggable (1000 ms)</h1>
<div id="drag2">
Lorem ipsum
</div>
<script type="text/javascript" charset="utf-8">
Sortable.create('sort1', {starteffect: myStartEffect});
Sortable.create('sort2', {starteffect:myStartEffect, delay:500});
new Draggable('drag1', {starteffect:myStartEffect});
new Draggable('drag2', {starteffect:myStartEffect, delay:1000});
</script>
</body>
</html>

120
javascript/scoluos/test/functional/dragdrop_test.html Executable file
View File

@@ -0,0 +1,120 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>script.aculo.us Drag and drop functional test file</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="../../lib/prototype.js" type="text/javascript"></script>
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
<script src="../../src/unittest.js" type="text/javascript"></script>
<style type="text/css" media="screen">
#thelist li { background: green; margin:5px; padding: 30px; }
#thelist2 li { background: #ffb; margin:2px; padding: 2px; }
#revertbox2 { position:absolute;top:40px;left:50px;z-index:1000;width:150px;height:150px;background:#bbf; }
</style>
</head>
<body>
<h1>script.aculo.us Drag and drop functional test file</h1>
<h2>Draggables/Droppables</h2>
<a href="#" onclick="alert($H(Sortable.sortables).inspect());return false">inspect sortables</a>
<div id="revertbox1" class="box1" style="opacity:0.5;z-index:1000;width:150px;height:150px;background:#bfb;">
<span class="handle1">drag here</span>
<span class="handle1">(but not here)</span><br/>
<input type="checkbox" id="shouldrevert1"/> Revert?
</div>
<div id="revertbox2" class="box">
<span id="handle2">drag here</span><br/>
<input type="checkbox" id="shouldrevert2"/> Revert?
</div>
<div id="xxxx">testtest</div>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
new Draggable('revertbox1',{scroll:window,zindex:-5,handle:'handle1',revert:function(element){return ($('shouldrevert1').checked)}});
new Draggable('revertbox2',{scroll:window,handle:'handle2',revert:function(element){return ($('shouldrevert2').checked)}});
Droppables.add('xxxx',{accept:['box1','box2'],onDrop:function(){alert('drop!')}});
// ]]>
</script>
<ul id="thelist" style="padding: 10px; position: absolute; top:20px; left:200px;z-index:1000;">
<li id="thelist_4">Hey there! I'm absolutely positioned</li>
<li id="thelist_1">one<br/><form id="form1"><input type="checkbox" onclick="this.checked = !this.checked" value="x" name="x" id="xyz"/><input type="text" id="xxx"></input></form></li>
<li id="thelist_2">two<br/><form id="form2"><input type="text" id="xyx"></input></form></li>
<li id="thelist_3">three<br/><form id="form3"><input type="text" id="xu3"></input></form></li>
</ul>
<ul id="thelist2" style="padding: 2px; background:red;">
<li>Relatively here!</li>
<li><input onclick="this.checked = !this.checked" name="x" id="x" type="checkbox"/>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<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>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
// Sortable.create('thelist', {overlap: 'horizontal', constraint: false});
Sortable.create('thelist');
Sortable.create('thelist2');
// ]]>
</script>
</body>
</html>

BIN
javascript/scoluos/test/functional/dropmarker.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 213 B

35
javascript/scoluos/test/functional/effect_direct_test.html Executable file
View File

@@ -0,0 +1,35 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>script.aculo.us Effects functional test file</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="../../lib/prototype.js" type="text/javascript"></script>
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
<script src="../../src/unittest.js" type="text/javascript"></script>
<style type="text/css" media="screen">
/* <![CDATA[ */
#d1 { background-color: #888; }
/* ]]> */
</style>
</head>
<body>
<h1>script.aculo.us Effects functional test file</h1>
<a href="#" onclick="$$('div.d').each( function(e) { e.visualEffect('highlight',{duration:1.5}) }); return false;">Highlight</a> |
<a href="#" onclick="$$('div.d').each( function(e) { e.visualEffect('blind_up','d1',{duration:1.5}) }); return false;">BlindUp</a> |
<a href="#" onclick="$$('div.d').each( function(e) { e.visualEffect('blind_down',{duration:1.5}) }); return false;">BlindDown</a> |
<a href="#" onclick="$$('div.d').each( function(e) { e.visualEffect('slide_up',{duration:1.5}) }); return false;">SlideUp</a> |
<a href="#" onclick="$$('div.d').each( function(e) { e.visualEffect('slide_down',{duration:1.5}) }); return false;">SlideDown</a>
<div class="d"><div style="overflow:hidden">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas enim. Nulla facilisi. Vestibulum accumsan augue vulputate justo. Fusce faucibus. Sed blandit, neque sed lacinia nonummy, diam quam imperdiet justo, at dictum augue nunc a neque. Sed urna lacus, tincidunt at, aliquam id, fringilla id, felis. Vivamus feugiat molestie quam. Sed id dolor. Sed ac purus id sapien sollicitudin ultricies. Aliquam hendrerit orci et odio. Suspendisse volutpat wisi at sem. Integer eget nulla. Duis eu diam a nunc condimentum tempus. Praesent gravida metus vitae massa. Aliquam neque magna, fringilla eu, porta id, interdum sit amet, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin lorem est, ultrices sit amet, condimentum vitae, vehicula a, massa.
</div></div>
<div class="d"><div style="overflow:hidden">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas enim. Nulla facilisi. Vestibulum accumsan augue vulputate justo. Fusce faucibus. Sed blandit, neque sed lacinia nonummy, diam quam imperdiet justo, at dictum augue nunc a neque. Sed urna lacus, tincidunt at, aliquam id, fringilla id, felis. Vivamus feugiat molestie quam. Sed id dolor. Sed ac purus id sapien sollicitudin ultricies. Aliquam hendrerit orci et odio. Suspendisse volutpat wisi at sem. Integer eget nulla. Duis eu diam a nunc condimentum tempus. Praesent gravida metus vitae massa. Aliquam neque magna, fringilla eu, porta id, interdum sit amet, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin lorem est, ultrices sit amet, condimentum vitae, vehicula a, massa.
</div></div>
</body>
</html>

65
javascript/scoluos/test/functional/effect_puff_test.html Executable file
View File

@@ -0,0 +1,65 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>script.aculo.us Effects functional test file</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="../../lib/prototype.js" type="text/javascript"></script>
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
<script src="../../src/unittest.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
Position.includeScrollOffsets = true;
</script>
<body>
<h1>script.aculo.us Effects functional test file</h1>
<h2>Effect.Puff</h2>
<div id="p1" style="width:100px;height:100px;background-color:#dde;" onclick="Effect.Puff(this)">
click to test puff, no position set
</div>
<div id="p2" style="float:right;width:100px;height:100px;background-color:#dde;" onclick="Effect.Puff(this)">
click to test puff, floats
</div>
<div id="p3" style="position:absolute;left:200px;top:100px;width:100px;height:100px;background-color:#dde;" onclick="Effect.Puff(this)">
click to test puff, absolute position set
</div>
<h3>Floating inside a container</h3>
<div style="width:300px;height:300px;border:1px solid red">
<div style="float:left;width:100px;height:100px;background-color:#888;" onclick="Effect.Puff(this)">
click to puff
</div>
<div style="float:left;width:100px;height:100px;background-color:#999;" onclick="Effect.Puff(this)">
click to puff
</div>
<div style="float:left;width:100px;height:100px;background-color:#aaa;" onclick="Effect.Puff(this)">
click to puff
</div>
<div style="float:left;width:100px;height:100px;background-color:#bbb;" onclick="Effect.Puff(this)">
click to puff
</div>
<div style="float:left;width:100px;height:100px;background-color:#ccc;" onclick="Effect.Puff(this)">
click to puff
</div>
<div style="float:left;width:100px;height:100px;background-color:#ddd;" onclick="Effect.Puff(this)">
click to puff
</div>
<div style="float:left;width:100px;height:100px;background-color:#eee;" onclick="Effect.Puff(this)">
click to puff
</div>
<div style="float:left;width:100px;height:100px;background-color:#777;" onclick="Effect.Puff(this)">
click to puff
</div>
<div style="float:left;width:100px;height:100px;background-color:#666;" onclick="Effect.Puff(this)">
click to puff
</div>
</div>
</div>
</body>
</html>

29
javascript/scoluos/test/functional/effect_scale_test.html Executable file
View File

@@ -0,0 +1,29 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>script.aculo.us Effects functional test file</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="../../lib/prototype.js" type="text/javascript"></script>
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
<script src="../../src/unittest.js" type="text/javascript"></script>
<style type="text/css" media="screen">
/* <![CDATA[ */
#scaleable { background-color: #888; }
/* ]]> */
</style>
</head>
<body>
<h1>script.aculo.us Effects functional test file</h1>
<a href="#" onclick="new Effect.Scale( 'scaleable', 20,{ scaleX: true, scaleY: false }); return false;">Scale X only</a> |
<a href="#" onclick="new Effect.Scale( 'scaleable', 20,{ scaleX: false, scaleY: true }); return false;">Scale Y only</a> |
<a href="#" onclick="new Effect.Scale( 'scaleable', 20,{ scaleX: true, scaleY: true }); return false;">Scale X and Y</a>
<div id="scaleable">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas enim. Nulla facilisi. Vestibulum accumsan augue vulputate justo. Fusce faucibus. Sed blandit, neque sed lacinia nonummy, diam quam imperdiet justo, at dictum augue nunc a neque. Sed urna lacus, tincidunt at, aliquam id, fringilla id, felis. Vivamus feugiat molestie quam. Sed id dolor. Sed ac purus id sapien sollicitudin ultricies. Aliquam hendrerit orci et odio. Suspendisse volutpat wisi at sem. Integer eget nulla. Duis eu diam a nunc condimentum tempus. Praesent gravida metus vitae massa. Aliquam neque magna, fringilla eu, porta id, interdum sit amet, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin lorem est, ultrices sit amet, condimentum vitae, vehicula a, massa.
</div>
</body>
</html>

55
javascript/scoluos/test/functional/effect_shake.html Executable file
View File

@@ -0,0 +1,55 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>script.aculo.us Effects functional test file</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="../../lib/prototype.js" type="text/javascript"></script>
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
<script src="../../src/unittest.js" type="text/javascript"></script>
<body>
<h1>script.aculo.us Effect.shake functional test file</h1>
<h2>Effect.Shake</h2>
<div id="debug"> </div>
<a href="#" onclick="new Effect.Shake(this); return false;">shake</a><br/>
<a href="#" onclick="new Effect.Shake(this, {distance:2}); return false;">shake 2</a><br/>
<a href="#" onclick="new Effect.Shake(this, {distance:30}); return false;">shake 30</a><br/>
<a href="#" onclick="new Effect.Shake(this, {distance:60}); return false;">shake 60</a><br/>
<style type="text/css" media="screen">
/* <![CDATA[ */
#shake10, #shake20, #shake30 { margin-left: 50px; }
/* ]]> */
</style>
<a href="#" onclick="shake_these();return false;">shake these</a><br/>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
function shake_these(){
new Effect.Shake("shake10", {distance:10});
new Effect.Shake("shake20", {distance:20});
new Effect.Shake("shake30", {distance:30});
}
// ]]>
</script>
<div id="shake10">shake 10</div>
<div id="shake20">shake 20</div>
<div id="shake30">shake 30</div>
<a href="#" onclick="new Effect.Shake(this, {duration:2.0}); return false;">shake slow</a><br/>
<a href="#" onclick="new Effect.Shake(this, {duration:0.2}); return false;">shake fast</a><br/>
<a href="#" onclick="new Effect.Shake(this, {distance:2, duration:2.0}); return false;">shake 2 slow</a><br/>
<a href="#" onclick="new Effect.Shake(this, {distance:60, duration:0.2}); return false;">shake 60 fast</a><br/>
</body>
</html>

63
javascript/scoluos/test/functional/effects2_test.html Executable file
View File

@@ -0,0 +1,63 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#menu {
width: 300px;
border: 1px #000 solid;
}
.menu_header {
background-color: #00CC99;
color: #FFFFFF;
}
.menu_block {
background-color: #006699;
color: #FFFFFF;
overflow:hidden;
}
.menu_block div {
}
.close_block {
position: relative;
width: 100%;
bottom: 0px;
height: 15px;
text-align: center;
display: block;
}
</style>
<script src="../../lib/prototype.js" type="text/javascript"></script>
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
<script src="../../src/unittest.js" type="text/javascript"></script>
</head>
<body>
<div id="menu">
<div class="menu_header" id="menu_header1"><a href="#" onClick="new Effect.SlideDown('menu_block1'); return false;">HEADER 1</a></div>
<div class="menu_block_container" id="menu_block_container1">
<div class="menu_block" id="menu_block1"><div>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
<a href="#" class="close_block" onClick="new Effect.SlideUp('menu_block1'); return false;">close</a></div></div>
</div>
<div class="menu_header" id="menu_header2"><a href="#" onClick="new Effect.SlideDown('menu_block2'); return false;">HEADER 2</a></div>
<div class="menu_block_container" id="menu_block_container2">
<div class="menu_block" id="menu_block2"><div>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
<a href="#" class="close_block" onClick="new Effect.SlideUp('menu_block2'); return false;">close</a></div></div>
</div>
</div>
</body>
</html>

36
javascript/scoluos/test/functional/effects3_test.html Executable file
View File

@@ -0,0 +1,36 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>script.aculo.us Effects functional test file</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="../../lib/prototype.js" type="text/javascript"></script>
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
<script src="../../src/unittest.js" type="text/javascript"></script>
</head>
<body>
<h1>script.aculo.us Effects functional test file</h1>
<h2>Effect.SlideDown/Effect.SlideUp</h2>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
var effect_1 = null;
// ]]>
</script>
<a href="#" onclick="effect_1 = Effect.SlideDown('d1',{duration:1.0}); return false;">Start slide down</a> |
<a href="#" onclick="effect_1 = Effect.SlideUp('d1',{duration:1.0}); return false;">Start slide up</a> |
<a href="#" onclick="effect_1.cancel(); return false;">cancel()</a> |
<a href="#" onclick="alert(Object.inspect($('d1').firstChild.style)); return false;">inspect()</a> |
<a href="#" onclick="$('d1').firstChild.innerHTML += $('d1').firstChild.innerHTML; return false;">add content</a>
<div id="d1" style="display:none;"><div style="background-color:#ff8080;width:300px;border:2px solid red;padding:10px;">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas enim. Nulla facilisi. Vestibulum accumsan augue vulputate justo. Fusce faucibus. Sed blandit, neque sed lacinia nonummy, diam quam imperdiet justo, at dictum augue nunc a neque. Sed urna lacus, tincidunt at, aliquam id, fringilla id, felis. Vivamus feugiat molestie quam. Sed id dolor. Sed ac purus id sapien sollicitudin ultricies. Aliquam hendrerit orci et odio. Suspendisse volutpat wisi at sem. Integer eget nulla. Duis eu diam a nunc condimentum tempus. Praesent gravida metus vitae massa. Aliquam neque magna, fringilla eu, porta id, interdum sit amet, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin lorem est, ultrices sit amet, condimentum vitae, vehicula a, massa.
</p>
</div></div>
</body>
</html>

31
javascript/scoluos/test/functional/effects4_test.html Executable file
View File

@@ -0,0 +1,31 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>script.aculo.us Effects functional test file</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="../../lib/prototype.js" type="text/javascript"></script>
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
<script src="../../src/unittest.js" type="text/javascript"></script>
<style type="text/css" media="screen">
/* <![CDATA[ */
#d1 { background-color: #888; }
/* ]]> */
</style>
</head>
<body>
<h1>script.aculo.us Effects functional test file</h1>
<a href="#" onclick="new Effect.Highlight('d1',{duration:1.5}); return false;">Highlight</a> |
<a href="#" onclick="new Effect.BlindUp('d1',{duration:1.5}); return false;">BlindUp</a> |
<a href="#" onclick="new Effect.BlindDown('d1',{duration:1.5}); return false;">BlindDown</a> |
<a href="#" onclick="new Effect.SlideUp('d1',{duration:1.5}); return false;">SlideUp</a> |
<a href="#" onclick="new Effect.SlideDown('d1',{duration:1.5}); return false;">SlideDown</a>
<div id="d1"><div style="overflow:hidden">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas enim. Nulla facilisi. Vestibulum accumsan augue vulputate justo. Fusce faucibus. Sed blandit, neque sed lacinia nonummy, diam quam imperdiet justo, at dictum augue nunc a neque. Sed urna lacus, tincidunt at, aliquam id, fringilla id, felis. Vivamus feugiat molestie quam. Sed id dolor. Sed ac purus id sapien sollicitudin ultricies. Aliquam hendrerit orci et odio. Suspendisse volutpat wisi at sem. Integer eget nulla. Duis eu diam a nunc condimentum tempus. Praesent gravida metus vitae massa. Aliquam neque magna, fringilla eu, porta id, interdum sit amet, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin lorem est, ultrices sit amet, condimentum vitae, vehicula a, massa.
</div></div>
</body>
</html>

483
javascript/scoluos/test/functional/effects5_test.html Executable file
View File

@@ -0,0 +1,483 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>script.aculo.us Effects functional test file</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="../../lib/prototype.js" type="text/javascript"></script>
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
<script src="../../src/unittest.js" type="text/javascript"></script>
</head>
<body>
<h1>script.aculo.us ScrollTo effect functional test</h1>
<a href="#" onclick="new Effect.ScrollTo('down-below',{duration:5.0}); return false;">scroll (slow-mo) down-below...</a>,
<a href="#" onclick="new Effect.ScrollTo('last-heading'); return false;">scroll last-heading</a>
<h2 id="first-heading"><b>first-heading</b>Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h2 id="down-below"><b>DOWN BELOW</b>Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<a href="#" onclick="new Effect.ScrollTo('first-heading'); return false;">scroll...</a>
<h2>Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h2>Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<h2 id="last-heading">Heading 2</h2>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</body>
</html>

39
javascript/scoluos/test/functional/effects5b_test.html Executable file
View File

@@ -0,0 +1,39 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>script.aculo.us Effects functional test file</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="../../lib/prototype.js" type="text/javascript"></script>
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
<script src="../../src/unittest.js" type="text/javascript"></script>
</head>
<body>
<div style="height: 200px;">&nbsp;</div>
<h1>script.aculo.us ScrollTo effect (with floats) functional test</h1>
(this test only applies to Firefox)
<div style="float: right; padding: 10px; background: #ccc; height: 1900px;">
<h2>top of float</h2>
<a href="#" onclick="new Effect.ScrollTo('bottom-of-float');return false;">scroll to bottom!</a>
<div style="height: 1500px;">&nbsp;</div>
<h2 id="bottom-of-float">Bottom of Float</h2>
w00t
</div>
<script>
window.scrollBy(0, 200);
</script>
</body>
</html>

61
javascript/scoluos/test/functional/effects6_test.html Executable file
View File

@@ -0,0 +1,61 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>script.aculo.us Effects functional test file</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="../../lib/prototype.js" type="text/javascript"></script>
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
<script src="../../src/unittest.js" type="text/javascript"></script>
</head>
<body>
<h1>script.aculo.us Fade/Appear effect functional test</h1>
<p>Note: these tests use the browser default CSS style rules.</p>
<h2>DIV</h2>
<div id="test_div">TEST</div>
<a href="#" onclick="Effect.Fade('test_div'); return false;">Effect.Fade</a> |
<a href="#" onclick="Effect.Appear('test_div'); return false;">Effect.Appear</a>
<h2>SPAN</h2>
<span id="test_span">TEST</span><br/>
<a href="#" onclick="Effect.Fade('test_span'); return false;">Effect.Fade</a> |
<a href="#" onclick="Effect.Appear('test_span'); return false;">Effect.Appear</a>
<h2>P</h2>
<p id="test_p">TEST</p><br/>
<a href="#" onclick="Effect.Fade('test_p'); return false;">Effect.Fade</a> |
<a href="#" onclick="Effect.Appear('test_p'); return false;">Effect.Appear</a>
<h2>IMG</h2>
<img id="test_img" src="icon.png" alt="test image" /><br/>
<a href="#" onclick="Effect.Fade('test_img'); return false;">Effect.Fade</a> |
<a href="#" onclick="Effect.Appear('test_img'); return false;">Effect.Appear</a>
<hr/>
<p style="color:red;">The following elements are not supported with Fade/Appear on all browsers!</p>
<h2>TABLE</h2>
<table id="test_table"><tbody><tr><td>TEST</td></tr></tbody></table>
<a href="#" onclick="Effect.Fade('test_table'); return false;">Effect.Fade</a> |
<a href="#" onclick="Effect.Appear('test_table'); return false;">Effect.Appear</a>
<h2>TBODY</h2>
<table><tbody id="test_tbody"><tr><td>TEST</td></tr></tbody></table>
<a href="#" onclick="Effect.Fade('test_tbody'); return false;">Effect.Fade</a> |
<a href="#" onclick="Effect.Appear('test_tbody'); return false;">Effect.Appear</a>
<h2>TR</h2>
<table><tbody><tr id="test_tr"><td>TEST</td></tr></tbody></table>
<a href="#" onclick="Effect.Fade('test_tr'); return false;">Effect.Fade</a> |
<a href="#" onclick="Effect.Appear('test_tr'); return false;">Effect.Appear</a>
<h2>TD</h2>
<table><tbody><tr><td id="test_td">TEST</td></tr></tbody></table>
<a href="#" onclick="Effect.Fade('test_td'); return false;">Effect.Fade</a> |
<a href="#" onclick="Effect.Appear('test_td'); return false;">Effect.Appear</a>
</body>
</html>

65
javascript/scoluos/test/functional/effects_blind_test.html Executable file
View File

@@ -0,0 +1,65 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>script.aculo.us Effects functional test file</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="../../lib/prototype.js" type="text/javascript"></script>
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
<script src="../../src/unittest.js" type="text/javascript"></script>
<style type="text/css" media="screen">
/* <![CDATA[ */
#d1 { background-color: #fcb; width: 200px; }
/* ]]> */
</style>
</head>
<body>
<h1>script.aculo.us Effects functional test file</h1>
<h2>Effect.BlindUp/Effect.BlindDown</h2>
<div id="d1">
Lorem ipsum dolor sit amet
<ul>
<li>test!</li>
<li>test!</li>
</ul>
<img src="icon.png" alt="test!"/>
<img src="icon.png" alt="test!"/>
<img src="icon.png" alt="test!"/>
<img src="icon.png" alt="test!"/>
<img src="icon.png" alt="test!"/>
<img src="icon.png" alt="test!"/>
<img src="icon.png" alt="test!"/>
<img src="icon.png" alt="test!"/>
<img src="icon.png" alt="test!"/>
<img src="icon.png" alt="test!"/>
Lorem ipsum dolor sit amet
<ul>
<li>test!</li>
<li>test!</li>
</ul>
Lorem ipsum dolor sit amet
<ul>
<li>test!</li>
<li>test!</li>
</ul>
Lorem ipsum dolor sit amet
<ul>
<li>test!</li>
<li>test!</li>
</ul>
</div>
<p>
<a href="#" onclick="Effect.BlindDown('d1');; return false;">BlindDown()</a>
</p>
<p>
<a href="#" onclick="Effect.BlindUp('d1');; return false;">BlindUp()</a>
</p>
</body>
</html>

46
javascript/scoluos/test/functional/effects_float_appear_test.html Executable file
View File

@@ -0,0 +1,46 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>script.aculo.us Effects functional test file</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="../../lib/prototype.js" type="text/javascript"></script>
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
<script src="../../src/unittest.js" type="text/javascript"></script>
</head>
<body>
<h1>script.aculo.us functional test file</h1>
<p>
See if workaround for Safari and floating elements with Effect.Appear works.
</p>
<a href="#" onclick="Effect.Appear('float_div_left'); return false;">float:left</a> |
<a href="#" onclick="Effect.Appear('float_div_right'); return false;">float:right</a> |
<a href="#" onclick="$('float_div_right').setOpacity(1)">float:right (setOpacity 1)</a> |
<a href="#" onclick="Effect.Appear('icon'); return false;">image (non-floating)</a> |
<a href="#" onclick="Effect.Appear('float_icon'); return false;">image (floating)</a> |
<a href="#" onclick="$('float_icon').setOpacity(1);">image (setOpacity 1)</a>
<hr/>
<div id="float_div_left" style="float:left;display:none">
Lorem ipsum dolor sit amet,<br/>
consectetur adipisicing elit,<br/>
sed do eiusmod tempor incididunt<br/>
ut labore et dolore magna aliqua.
</div>
<div id="float_div_right" style="float:right;opacity:0.4">
Lorem ipsum dolor sit amet,<br/>
consectetur adipisicing elit,<br/>
sed do eiusmod tempor incididunt<br/>
ut labore et dolore magna aliqua.
</div>
<img id="icon" src="icon.png" style="display:none" alt="" />
<img id="float_icon" src="icon.png" style="float:left;opacity:0.4" alt="" />
</body>
</html>

38
javascript/scoluos/test/functional/effects_grow_strink_test.html Executable file
View File

@@ -0,0 +1,38 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>script.aculo.us Effects functional test file</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="../../lib/prototype.js" type="text/javascript"></script>
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
<script src="../../src/unittest.js" type="text/javascript"></script>
<style type="text/css" media="screen">
/* <![CDATA[ */
#d1 { background-color: #fcb; width: 200px; height: 200px; }
/* ]]> */
</style>
</head>
<body>
<h1>script.aculo.us Effects functional test file</h1>
<h2>Effect.Grow/Effect.Shrink</h2>
<div id="d1" style="font-size: 2em;">
<p style="font-size:1em;">Lorem ipsum dolor sit amet</p>
</div>
<p>
Grow:
<a href="#" onclick="Effect.Grow('d1');; return false;">Grow()</a>
</p>
<p>
Shrink:
<a href="#" onclick="Effect.Shrink('d1');; return false;">Shrink()</a>
</p>
</body>
</html>

70
javascript/scoluos/test/functional/effects_highlight_bg_image.html Executable file
View File

@@ -0,0 +1,70 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript" src="../../lib/prototype.js"></script>
<script type="text/javascript" src="../../src/scriptaculous.js?load=effects"></script>
<script type="text/javascript">
//<![CDATA[
Li = {
onMouseDown_image: function(event) {
new Effect.Highlight(this, {keepBackgroundImage:true});
},
onMouseDown_without: function(event) {
new Effect.Highlight(this);
}
}
window.onload = function() {
var li = $("with").getElementsByTagName('LI');
for (var i = 0; i < li.length; i++) {
li[i].onmousedown = Li.onMouseDown_image.bindAsEventListener(li[i]);
}
var li = $("without").getElementsByTagName('LI');
for (i = 0; i < li.length; i++) {
li[i].onmousedown = Li.onMouseDown_without.bindAsEventListener(li[i]);
}
}
//]]>
</script>
<style type="text/css">
body {
color: black;
background-color: white;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
ul {
list-style: none;
margin:0; padding:0;
}
li {
margin: 3px 0; padding: 3px 3em 3px 24px;
border: 2px solid #456;
background-image: url(icon.png);
background-repeat: no-repeat;
background-position: 3px 3px;
}
#with li {background-color: #cde;}
#without li {background-color: #ced;}
</style>
</head>
<body>
<p>Test of <code>keepBackgroundImage</code> parameter for <code>Effect.Highlight</code>. Click items to show effect.</p>
<p>With the <code>keepBackgroundImage</code> parameter.</p>
<ul id="with">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<p>Without the parameter.</p>
<ul id="without">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</body>
</html>

30
javascript/scoluos/test/functional/effects_queue_limit_test.html Executable file
View File

@@ -0,0 +1,30 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>script.aculo.us Effects functional test file</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="../../lib/prototype.js" type="text/javascript"></script>
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
<script src="../../src/unittest.js" type="text/javascript"></script>
<style type="text/css" media="screen">
/* <![CDATA[ */
#d1 { background-color: #fcb; width: 200px; height: 200px; float:left; }
#d2 { background-color: #cfb; font-size: 2em; width: 200px; height: 200px; float:left; }
#d3 { background-color: #bcf; font-size: 2em; width: 200px; height: 200px; float:left; }
/* ]]> */
</style>
</head>
<body>
<h1>script.aculo.us Effects functional test file</h1>
<h2>Effect.Queue limit</h2>
<a href="#" onclick="Effect.SlideUp('slidingtwice',{queue:{scope:'myscope', position:'end', limit: 1}});">up</a>
<a href="#" onclick="Effect.SlideDown('slidingtwice',{queue:{scope:'myscope', position:'end', limit: 1}});">down</a>
<div id="slidingtwice"><div style="background-color:#000;color:white;font-size:20px;height:300px;width:150px;">
Do a bit sliding in parallel, with a scoped queue, but I am limited to one : ) so don't try over and over again...
</div></div>
</body>
</html>

67
javascript/scoluos/test/functional/effects_queue_test.html Executable file
View File

@@ -0,0 +1,67 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>script.aculo.us Effects functional test file</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="../../lib/prototype.js" type="text/javascript"></script>
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
<script src="../../src/unittest.js" type="text/javascript"></script>
<style type="text/css" media="screen">
/* <![CDATA[ */
#d1 { background-color: #fcb; width: 200px; height: 200px; float:left; }
#d2 { background-color: #cfb; font-size: 2em; width: 200px; height: 200px; float:left; }
#d3 { background-color: #bcf; font-size: 2em; width: 200px; height: 200px; float:left; }
/* ]]> */
</style>
</head>
<body>
<h1>script.aculo.us Effects functional test file</h1>
<h2>Effect.Queue</h2>
<div id="d1" style="font-size: 2em;">
<p style="font-size:1em;">Lorem ipsum dolor sit amet</p>
</div>
<div id="d2">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div id="d3">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div style="clear: both">
<a href="#" onclick="startTimeline(); return false;">Start queued effects</a> (in 'global' queue)
</div>
<div id="sliding"><div style="background-color:#ccc;font-size:20px;height:300px;width:150px;">
<a href="#" onclick="Effect.SlideUp('sliding',{queue:{scope:'myscope', position:'end'}}); Effect.SlideDown('sliding',{queue:{scope:'myscope', position:'end'}}); return false;">
Do a bit sliding in parallel, with a scoped queue
</a>
</div></div>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
function startTimeline() {
// 3x highlight in front
for(var i=0; i<3; i++)
new Effect.Highlight('d3', { duration: 1.0, queue: 'front' });
// insert scale at very beginning
new Effect.Scale('d1', 75, { scaleContent: true, duration: 1.0, queue: 'front' });
// parallel implied, delay 0.5 sec
new Effect.Highlight('d1', { delay: 0.5 });
// puff at end
new Effect.Puff('d2', { duration: 4.0, queue: 'end' });
}
// ]]>
</script>
</body>
</html>

76
javascript/scoluos/test/functional/effects_random_demo.html Executable file
View File

@@ -0,0 +1,76 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>script.aculo.us Effects functional test file</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="../../lib/prototype.js" type="text/javascript"></script>
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
<style type="text/css" media="screen">
/* <![CDATA[ */
div.demo { font-size: 70pt; float: left }
div#info { font: 10px/11px Tahoma, Arial, sans-serif; }
/* ]]> */
</style>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
function startDemo() {
$$('div.demo').each( function(d) {
d.visualEffect(
['fade','appear','blind_up','blind_down','puff','switch_off','drop_out','shake',
'slide_up','slide_down','pulsate','squish','fold','grow','shrink'][Math.round(Math.random()*14)],
{ duration:0.5+Math.random()*5, delay: Math.random()*3 });
});
$('info').update(
Effect.Queues.get('global').collect( function(e) {
return e.inspect().escapeHTML()
}).join('<br/>'));
}
// ]]>
</script>
</head>
<body>
<h1>Random effects demo</h1>
<a href="#" onclick="startDemo(); return false;">Start...</a> |
<a href="#" onclick="$('info').toggle(); return false">Show/hide log</a>
<div class="demo" style="background-color:#f00"><div>
DIV1
</div></div>
<div class="demo" style="background-color:#ff0"><div>
DIV2
</div></div>
<div class="demo" style="background-color:#0f0"><div>
DIV3
</div></div>
<div class="demo" style="background-color:#0ff"><div>
DIV4
</div></div>
<div class="demo" style="background-color:#f00"><div>
DIV5
</div></div>
<div class="demo" style="background-color:#ff0"><div>
DIV6
</div></div>
<div class="demo" style="background-color:#f00"><div>
DIV7
</div></div>
<div class="demo" style="background-color:#ff0"><div>
DIV8
</div></div>
<div class="demo" style="background-color:#0f0"><div>
DIV9
</div></div>
<div id="info" style="clear:both; display:none"> </div>
</body>
</html>

74
javascript/scoluos/test/functional/effects_test.html Executable file
View File

@@ -0,0 +1,74 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>script.aculo.us Effects functional test file</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="../../lib/prototype.js" type="text/javascript"></script>
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
<script src="../../src/unittest.js" type="text/javascript"></script>
<body>
<h1>script.aculo.us Effects functional test file</h1>
<h2>Effect.Highlight</h2>
<div id="debug"> </div>
<a href="#" onclick="new Effect.SlideDown('d1'); return false;">asdasd</a>
<div id="d1" onclick="new Effect.SlideUp('d1');" style="overflow:hidden;"><div style="background-color:#ff8080;">
(highlight to red)
</div></div>
<div id="d2" style="width:100px;height:100px;background-color:#80ff80;">
(highlight to greenish)
</div>
<div id="d3" style="width:100px;height:100px;background-color:#dde;">
(bottom-right-grow)
</div>
<div id="d4" style="width:100px;height:100px;background-color:#dde;" onclick="Effect.Shake(this)">
click to test shake
</div>
<div id="d5" style="width:100px;height:100px;background-color:#dde;" onclick="Effect.Puff(this)">
click to test puff
</div>
<p>
update callbacks: <span id="d5_after">(waiting)</span> -- <span id="d5_before">(waiting)</span>
</p>
<a href="#" onclick="$('d5').appear({beforeUpdate:before,afterUpdate:after}); return false;">show puff div again</a>
<a href="#" onclick="Effect.Appear('d6')">test appear</a>
<div id="d6" style="width:100px;height:100px;background-color:#dde;display:none">
appear
</div>
<a href="#" onclick="Effect.Grow('d7')">test grow</a>
<div id="d7" style="width:100px;height:100px;background-color:#dde;display:none">
grow
</div>
<a href="#" onclick="Effect.Pulsate('d8')">test pulsate default times (5)</a>
<a href="#" onclick="Effect.Pulsate('d8', {pulses: 2})">test pulsate 2 times</a>
<div id="d8" style="width:100px;height:100px;background-color:#dde;">
pulsate
</div>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
new Effect.Highlight("d2",{startcolor:"#000000"});
new Effect.Grow("d3",{duration:5.0,direction: 'bottom-right',opacityTransition:Effect.Transitions.linear});
new Effect.BlindDown("d1");
var afterUpdates = 0, beforeUpdates = 0;
function after(){ afterUpdates++; $('d5_after').update(afterUpdates); }
function before(){ beforeUpdates--; $('d5_before').update(beforeUpdates); }
// ]]>
</script>
</body>
</html>

36
javascript/scoluos/test/functional/effects_toggle_test.html Executable file
View File

@@ -0,0 +1,36 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>script.aculo.us Effects functional test file</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="../../lib/prototype.js" type="text/javascript"></script>
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
<script src="../../src/unittest.js" type="text/javascript"></script>
</head>
<body>
<h1>script.aculo.us Effect.toggle functional test file</h1>
<a href="#" onclick="Effect.toggle('d1','slide'); return false;">Toggle slide</a>
<div id="d1" style="display:none;"><div style="background-color:#ff8080;width:300px;border:2px solid red;padding:10px;">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas enim. Nulla facilisi. Vestibulum accumsan augue vulputate justo. Fusce faucibus. Sed blandit, neque sed lacinia nonummy, diam quam imperdiet justo, at dictum augue nunc a neque. Sed urna lacus, tincidunt at, aliquam id, fringilla id, felis. Vivamus feugiat molestie quam. Sed id dolor. Sed ac purus id sapien </p>
</div></div>
<a href="#" onclick="Effect.toggle('d2','BLIND'); return false;">Toggle blind</a>
<div id="d2" style="display:none;"><div style="background-color:#ff8080;width:300px;border:2px solid red;padding:10px;">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas enim. Nulla facilisi. Vestibulum accumsan augue vulputate justo. Fusce faucibus. Sed blandit, neque sed lacinia nonummy, diam quam imperdiet justo, at dictum augue nunc a neque. Sed urna lacus, tincidunt at, aliquam id, fringilla id, felis. Vivamus feugiat molestie quam. Sed id dolor. Sed ac purus id sapien </p>
</div></div>
<a href="#" onclick="Effect.toggle('d3','appear'); return false;">Toggle appear</a>
<div id="d3" style="display:none;"><div style="background-color:#ff8080;width:300px;border:2px solid red;padding:10px;">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas enim. Nulla facilisi. Vestibulum accumsan augue vulputate justo. Fusce faucibus. Sed blandit, neque sed lacinia nonummy, diam quam imperdiet justo, at dictum augue nunc a neque. Sed urna lacus, tincidunt at, aliquam id, fringilla id, felis. Vivamus feugiat molestie quam. Sed id dolor. Sed ac purus id sapien </p>
</div></div>
</body>
</html>

BIN
javascript/scoluos/test/functional/icon.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 281 B

91
javascript/scoluos/test/functional/index.html Executable file
View File

@@ -0,0 +1,91 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>script.aculo.us functional tests</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="../../lib/prototype.js" type="text/javascript"></script>
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
<script src="../../src/unittest.js" type="text/javascript"></script>
<link rel="stylesheet" href="../test.css" type="text/css" />
</head>
<body class="navigation">
<h1>script.aculo.us<br/>Functional Tests</h1>
<p id="version"></p>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
$('version').innerHTML = 'script.aculo.us version '+Scriptaculous.Version+'<br/>Prototype version ' + Prototype.Version;
// ]]>
</script>
<p><a href="http://wiki.script.aculo.us/scriptaculous/show/UnitTesting" target="test">Documentation</a></p>
<h2>Effects</h2>
<ul>
<li><b><a href="effects_random_demo.html" target="test">Random effects test</a></b></li>
<li><a href="effects_test.html" target="test">effects_test</a></li>
<li><a href="effect_direct_test.html" target="test">$$ selector effects/visualEffect</a></li>
<li><a href="effects_queue_test.html" target="test">effects_queue</a></li>
<li><a href="effects_queue_limit_test.html" target="test">effects_queue_limit</a></li>
<li><a href="effects_toggle_test.html" target="test">Effect.toggle</a></li>
<li><a href="effects2_test.html" target="test">effects2_test</a></li>
<li><a href="effects3_test.html" target="test">effects3_test</a></li>
<li><a href="effects4_test.html" target="test">effects4_test</a></li>
<li><a href="effects5_test.html" target="test">effects5_test</a></li>
<li><a href="effects5b_test.html" target="test">effects5b_test</a></li>
<li><a href="effects6_test.html" target="test">effects6_test</a></li>
<li><a href="effect_shake.html" target="test">effect shake</a></li>
<li><a href="effects_grow_strink_test.html" target="test">Grow/Shrink</a></li>
<li><a href="effects_blind_test.html" target="test">BlindUp/BlindDown</a></li>
<li><a href="effect_scale_test.html" target="test">Effect.Scale</a></li>
<li><a href="effect_puff_test.html" target="test">Effect.Puff</a></li>
<li><a href="effects_float_appear_test.html" target="test">Test for Safari .Appear w/ floats</a></li>
<li><a href="effects_highlight_bg_image.html" target="test">Effect.Highlight keepBackgroundImage option</a></li>
<li><a href="texteffects_test.html" target="test">texteffects_test.html</a></li>
</ul>
<h2>Controls</h2>
<ul>
<li><a href="ajax_autocompleter_test.html" target="test">ajax_autocompleter_test</a></li>
<li><a href="ajax_autocompleter2_test.html" target="test">ajax_autocompleter2_test</a></li>
<li><a href="ajax_inplaceeditor_test.html" target="test">ajax_inplaceeditor_test</a></li>
<li><a href="ajax_inplacecollectioneditor_test.html" target="test">ajax_inplacecollectioneditor_test</a></li>
<li><a href="slider_test.html" target="test">slider_test</a></li>
</ul>
<h2>Drag &amp; Drop</h2>
<ul>
<li><a href="dragdrop_test.html" target="test">dragdrop_test</a></li>
<li><a href="dragdrop2_test.html" target="test">dragdrop2_test</a></li>
<li><a href="dragdrop3_test.html" target="test">dragdrop3_test</a></li>
<li><a href="dragdrop4_test.html" target="test">dragdrop4_test</a></li>
<li><a href="dragdrop5_test.html" target="test">dragdrop5_test</a></li>
<li><a href="dragdrop6_test.html" target="test">dragdrop6_test: snap option</a></li>
<li><a href="dragdrop7_test.html" target="test">dragdrop7_test</a></li>
<li><a href="dragdrop8_test.html" target="test">dragdrop8_test</a></li>
<li><a href="dragdrop9_test.html" target="test">Revert: failure</a></li>
<li><a href="dragdrop_delay_test.html" target="test">dragdrop delay test</a></li>
<li><a href="sortable_test.html" target="test">sortable_test</a></li>
<li><a href="sortable2_test.html" target="test">sortable2_test</a></li>
<li><a href="sortable3_test.html" target="test">sortable3_test</a></li>
<li><a href="sortable4_test.html" target="test">sortable4_test</a></li>
<li><a href="sortable5_test.html" target="test">sortable5_test</a></li>
<li><a href="sortable6_test.html" target="test">sortable5_test</a></li>
<li><a href="sortable_tree_test.html" target="test">Sortable trees</a></li>
</ul>
<h2>Sound (experimental)</h2>
<ul>
<li><a href="sound_test.html" target="test">sound_test.html</a></li>
</ul>
<h2>Miscellaneous</h2>
<ul>
<li><a href="position_clone_test.html" target="test">position_clone_test</a></li>
</ul>
</body>
</html>

124
javascript/scoluos/test/functional/position_clone_test.html Executable file
View File

@@ -0,0 +1,124 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>prototype.js Position.clone functional test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="../../lib/prototype.js" type="text/javascript"></script>
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
<style type="text/css">
.margins { margin:20px; }
.nomargins { margin:0; }
</style>
</head>
<body>
<div id="container" style="position:relative; top:10px; width:300px; height:100px; overflow: auto;">
<div id="container2" style="position:relative; top:10px; width:400px; height:150px; overflow: auto;">
<div id="test1" style="border:1px solid black; position:absolute; left: 100px; top: 10px; width:100px; height:200px;">
abs
</div>
<div id="test2" style="border:1px solid black; position:relative; left: 50px; top: 0px;">
rel
</div>
<div id="test3" style="border:1px solid black; position:static;">
static
</div>
</div>
</div>
<div id="c3" style="position:absolute;top:140px;left:55px;width:100px;height:20px;">
abs-body child
</div>
<p id="p1" style="background-color:#eee;">
unpositioned p
</p>
<script type="text/javascript" language="javascript">
// <![CDATA[
function d(el, marker) {
$('debug').innerHTML =
'orig: ' + Object.inspect(Position.page($(el))) + ', ' +
'clone: ' + Object.inspect(Position.page($(marker)));
}
function testA(el) {
Position.clone(el, 'marker');
d(el, 'marker');
}
function testB(el) {
Element.hide('marker2');
Position.clone(el, 'marker2');
Element.show('marker2');
d(el, 'marker2');
}
function testC(el) {
Position.clone(el, 'marker3');
d(el, 'marker3');
}
function testD(el) {
Position.clone(el, 'marker4');
d(el, 'marker4');
}
// ]]>
</script>
<div id="actions" style="position:absolute;top:400px;">
<a href="#" onclick="Element.toggle('big'); return false;">Toggle page scrolling</a> |
Page margings: <a href="#" onclick="document.body.className = 'margins'">on</a> |
<a href="#" onclick="document.body.className = 'nomargins'">off</a>
<br/><br/>
Absolute marker in position:relative container DIV:<br/>
<a href="#" onclick="testA('test1'); return false;">Mark abs</a> |
<a href="#" onclick="testA('test2'); return false;">Mark rel</a> |
<a href="#" onclick="testA('test3'); return false;">Mark static</a> |
<a href="#" onclick="testA('c3'); return false;">Mark abs-body child</a> |
<a href="#" onclick="testA('p1'); return false;">Mark p</a>
<br/><br/>
Hidden marker (display:none), in position:relative container DIV switched on when clone is finished:<br/>
<a href="#" onclick="testB('test1'); return false;">Mark abs</a> |
<a href="#" onclick="testB('test2'); return false;">Mark rel</a> |
<a href="#" onclick="testB('test3'); return false;">Mark static</a> |
<a href="#" onclick="testB('c3'); return false;">Mark abs-body child</a> |
<a href="#" onclick="testB('p1'); return false;">Mark p</a>
<br/><br/>
Absolute marker, child of BODY:<br/>
<a href="#" onclick="testC('test1'); return false;">Mark abs</a> |
<a href="#" onclick="testC('test2'); return false;">Mark rel</a> |
<a href="#" onclick="testC('test3'); return false;">Mark static</a> |
<a href="#" onclick="testC('c3'); return false;">Mark abs-body child</a> |
<a href="#" onclick="testC('p1'); return false;">Mark p</a>
<br/><br/>
Fixed marker, child of BODY:<br/>
<a href="#" onclick="testD('test1'); return false;">Mark abs</a> |
<a href="#" onclick="testD('test2'); return false;">Mark rel</a> |
<a href="#" onclick="testD('test3'); return false;">Mark static</a> |
<a href="#" onclick="testD('c3'); return false;">Mark abs-body child</a> |
<a href="#" onclick="testD('p1'); return false;">Mark p</a> |
<div id="debug"></div>
</div>
<div id="marker-container" style="position:relative;left:400px;top:20px;width:100px;height:100px;">
<div id="blah" style="top:20px;">
<div id="marker" style="position:absolute;background-color:#f00;opacity:0.5;z-index:10000;width:10px;height:10px;">!</div>
</div>
<div id="marker2" style="display:none;position:absolute;background-color:#0f0;opacity:0.5;z-index:10000;width:10px;height:10px;">!</div>
</div>
<div id="marker3" style="position:absolute;background-color:#00f;opacity:0.5;z-index:10000;width:10px;height:10px;">!</div>
<div id="marker4" style="position:fixed;background-color:#08f;opacity:0.5;z-index:10000;width:10px;height:10px;">!</div>
<div id="big" style="display:none;height:10000px;"> </div>
</body>
</html>

152
javascript/scoluos/test/functional/slider_test.html Executable file
View File

@@ -0,0 +1,152 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Text effects tests</title>
<script type="text/javascript" src="../../lib/prototype.js"></script>
<script type="text/javascript" src="../../src/scriptaculous.js"></script>
</head>
<body>
<h1>Sliders</h1>
<h2>Standard horizontal slider</h2>
<div id="track1" style="width:200px;background-color:#aaa;height:5px;">
<div id="handle1" style="width:5px;height:10px;background-color:#f00;"> </div>
</div>
<p id="debug1"> </p>
<h2>Vertical slider</h2>
<div id="track2" style="height:100px;background-color:#aaa;width:5px;">
<div id="handle2" style="width:10px;height:5px;background-color:#f00;"> </div>
</div>
<p id="debug2"> </p>
<h2>Slider with predefined values [2,4,6,8] and a non-default range [2,15]</h2>
<div id="track3" style="width:200px;background-color:#aaa;height:5px;">
<div id="handle3" style="width:5px;height:10px;background-color:#f00;"> </div>
</div>
<p id="debug3"> </p>
<h2>Slider with multiple handles</h2>
<div id="track4" style="width:200px;background-color:#aaa;height:5px;position:relative;">
<div id="handle4-1" style="position:absolute;top:0;left:0;width:5px;height:10px;background-color:#f00;"> </div>
<div id="handle4-2" style="position:absolute;top:0;left:0;width:5px;height:10px;background-color:#0f0;"> </div>
<div id="handle4-3" style="position:absolute;top:0;left:0;width:5px;height:10px;background-color:#00f;"> </div>
</div>
<p id="debug4"> </p>
<h2>Slider with multiple handles and predefined values</h2>
<div id="track5" style="width:200px;background-color:#aaa;height:5px;position:relative;">
<div id="handle5-1" style="opacity:0.5;position:absolute;top:0;left:0;width:5px;height:10px;background-color:#f00;"> </div>
<div id="handle5-2" style="opacity:0.5;position:absolute;top:0;left:0;width:5px;height:10px;background-color:#0f0;"> </div>
<div id="handle5-3" style="opacity:0.5;position:absolute;top:0;left:0;width:5px;height:10px;background-color:#00f;"> </div>
</div>
<p id="debug5"> </p>
<h2>Slider with multiple handles, external controls, handles are restricted (can't be moved prior/after adjacent handles)</h2>
<div id="track6" style="width:200px;background-color:#aaa;height:5px;position:relative;">
<div id="handle6-1" style="position:absolute;top:0;left:0;width:5px;height:10px;background-color:#f00;"> </div>
<div id="handle6-2" style="position:absolute;top:0;left:0;width:5px;height:10px;background-color:#0f0;"> </div>
</div>
<br/><br/>
<a href="#" onclick="slider6.setValueBy(-0.1);return false;">&lt;--</a>
<a href="#" onclick="slider6.setValueBy(0.1);return false;">--&gt;</a>
<p id="debug6"> </p>
<h2>Fun with spans</h2>
<style>
#track7 div.handle {
background-color:#aaa;
color:#444;
top:0;
left:0;
position:absolute;
z-index:2;
height:100px;
font-size:20px;
}
#track7 div.handle.selected {
background-color:#444;
color:#fff;
}
</style>
<div id="track7" style="width:300px;background-color:#cbf;height:50px;position:relative;z-index:0;">
<div id="handle7-1" class="handle">1</div>
<div id="handle7-2" class="handle">2</div>
<div id="handle7-3" class="handle">3</div>
<div id="span7-1" style="top:0;left:0;position:absolute;background-color:#000;height:50px;z-index:1;"> </div>
<div id="span7-2" style="top:0;left:0;position:absolute;background-color:#444;height:50px;z-index:1;"> </div>
<div id="span7-start" style="top:0;left:0;position:absolute;background-color:#f00;height:50px;z-index:1;"> </div>
<div id="span7-end" style="top:0;left:0;position:absolute;background-color:#00f;height:50px;z-index:1;"> </div>
</div>
<br/><br/><br/><br/>
<h2>Slider with span and [1,10] range (test for #3731)</h2>
<div id="zoom-track" style="width:300px;background-color:#aaa;height:20px;position:relative;z-index:0;">
<div id="zoom-handle-1" style="position:absolute;background-color:#f00;height:20px;z-index:2">!</div>
<div id="zoom-handle-2" style="position:absolute;background-color:#0f0;height:20px;z-index:2">!</div>
<div id="zoom-track-selected" style="position:absolute;background-color:#00f;height:20px;z-index:1"> </div>
</div>
<!-- FIXME: add more demos here -->
<script type="text/javascript">
// <![CDATA[
new Control.Slider('handle1','track1',{
sliderValue:0.5,
onSlide:function(v){$('debug1').innerHTML='slide: '+v},
onChange:function(v){$('debug1').innerHTML='changed! '+v}});
new Control.Slider('handle2','track2',{axis:'vertical',
onSlide:function(v){$('debug2').innerHTML='slide: '+v},
onChange:function(v){$('debug2').innerHTML='changed! '+v}});
new Control.Slider('handle3','track3',{values:[2,4,6,8],range:$R(2,15),
onSlide:function(v){$('debug3').innerHTML='slide: '+v},
onChange:function(v){$('debug3').innerHTML='changed! '+v}});
new Control.Slider(['handle4-1','handle4-2','handle4-3'],'track4',{
onSlide:function(v){$('debug4').innerHTML='slide: '+v.inspect()},
onChange:function(v){$('debug4').innerHTML='changed! '+v.inspect()}});
new Control.Slider(['handle5-1','handle5-2','handle5-3'],'track5',{values:[0,0.2,0.4,0.6,0.8],
onSlide:function(v){$('debug5').innerHTML='slide: '+v.inspect()},
onChange:function(v){$('debug5').innerHTML='changed! '+v.inspect()}});
var slider6 = new Control.Slider(['handle6-1','handle6-2'],'track6',{
sliderValue:[0.3, 0.8],
restricted:true,
onSlide:function(v){$('debug6').innerHTML='slide: '+v.inspect()},
onChange:function(v){$('debug6').innerHTML='changed! '+v.inspect()}});
new Control.Slider(['handle7-1','handle7-2','handle7-3'], 'track7',
{ spans:['span7-1','span7-2'],
startSpan:'span7-start',
endSpan:'span7-end',
range:$R(0,300) });
new Control.Slider(
['zoom-handle-1','zoom-handle-2'],'zoom-track',{
sliderValue:[1,10], range:$R(1,10),
values:[1,2,3,4,5,6,7,8,9,10],
restricted:true,
spans:['zoom-track-selected'] });
// ]]>
</script>
</body>
</html>

148
javascript/scoluos/test/functional/sortable2_test.html Executable file
View File

@@ -0,0 +1,148 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>script.aculo.us Sortable ghosting functional test file</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="../../lib/prototype.js" type="text/javascript"></script>
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
<script src="../../src/unittest.js" type="text/javascript"></script>
<link rel="stylesheet" href="../test.css" type="text/css" />
<style>
ul.testlist {
list-style-type:none;
margin:0;
padding:0;
}
ul.testlist li {
width:200px;
font:12px Verdana;
padding:4px;
cursor:move;
}
ul.testlist li.over {
background-color:#fcb;
}
ul.testlist li img {
float:left;
margin-right:8px;
}
div.dropmarker {
height:6px;
width:200px;
background: url(dropmarker.png) left top;
margin-top:-3px;
margin-left:-5px;
z-index:1000;
overflow: hidden;
}
#testlist4 li {
float:left;
}
</style>
</head>
<body>
<h1>script.aculo.us Sortable ghosting functional test file</h1>
<h2>Ghosting</h2>
<ul id="testlist" class="testlist">
<li id="item_1"><img src="icon.png" alt=""/> Lorem ipsum dolor</li>
<li id="item_2"><img src="icon.png" alt=""/> sit amet</li>
<li id="item_3"><img src="icon.png" alt=""/> consectetur adipisicing</li>
<li id="item_4"><img src="icon.png" alt=""/> elit</li>
<li id="item_5"><img src="icon.png" alt=""/> sed do eiusmod</li>
<li id="item_6"><img src="icon.png" alt=""/> tempor incididunt</li>
<li id="item_7"><img src="icon.png" alt=""/> ut labore et dolore</li>
<li id="item_8"><img src="icon.png" alt=""/> magna aliqua</li>
</ul>
<p id="testlist_serialize">(waiting for onChange)</p>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
Sortable.create('testlist',{ghosting:true,constraint:false,hoverclass:'over',
onUpdate:function(sortable){alert(Sortable.serialize(sortable))},
onChange:function(element){$('testlist_serialize').innerHTML = Sortable.serialize(element.parentNode)}
});
// ]]>
</script>
<h2>No ghosting</h2>
<ul id="testlist2" class="testlist">
<li id="item_9"><img src="icon.png" alt=""/> Lorem ipsum dolor</li>
<li id="item_10"><img src="icon.png" alt=""/> sit amet</li>
<li id="item_11"><img src="icon.png" alt=""/> consectetur adipisicing</li>
<li id="item_12"><img src="icon.png" alt=""/> elit</li>
<li id="item_13"><img src="icon.png" alt=""/> sed do eiusmod</li>
<li id="item_14"><img src="icon.png" alt=""/> tempor incididunt</li>
<li id="item_15"><img src="icon.png" alt=""/> ut labore et dolore</li>
<li id="item_16"><img src="icon.png" alt=""/> magna aliqua</li>
</ul>
<p id="testlist2_serialize">(waiting for onChange)</p>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
Sortable.create('testlist2',{ghosting:false,constraint:false,hoverclass:'over',
onUpdate:function(sortable){alert(Sortable.serialize(sortable))},
onChange:function(element){$('testlist2_serialize').innerHTML = Sortable.serialize(element.parentNode)}
});
// ]]>
</script>
<h2>Ghosting (inside position:relative container)</h2>
<div style="position:relative;left:100px;top:-5px;">
<ul id="testlist3" class="testlist">
<li id="item_17"><img src="icon.png" alt=""/> Lorem ipsum dolor</li>
<li id="item_18"><img src="icon.png" alt=""/> sit amet</li>
<li id="item_19"><img src="icon.png" alt=""/> consectetur adipisicing</li>
<li id="item_20"><img src="icon.png" alt=""/> elit</li>
<li id="item_21"><img src="icon.png" alt=""/> sed do eiusmod</li>
<li id="item_22"><img src="icon.png" alt=""/> tempor incididunt</li>
<li id="item_23"><img src="icon.png" alt=""/> ut labore et dolore</li>
<li id="item_24"><img src="icon.png" alt=""/> magna aliqua</li>
</ul>
</div>
<p id="testlist3_serialize">(waiting for onChange)</p>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
Sortable.create('testlist3',{ghosting:true,constraint:false,
onUpdate:function(sortable){alert(Sortable.serialize(sortable))},
onChange:function(element){$('testlist3_serialize').innerHTML = Sortable.serialize(element.parentNode)}
});
// ]]>
</script>
<h2>Ghosting (inside position:relative container)</h2>
<div style="position:relative;left:100px;top:-5px;">
<ul id="testlist4" class="testlist">
<li id="item_417"><img src="icon.png" alt=""/> Lorem ipsum dolor</li>
<li id="item_418"><img src="icon.png" alt=""/> sit amet</li>
<li id="item_419"><img src="icon.png" alt=""/> consectetur adipisicing</li>
<li id="item_420"><img src="icon.png" alt=""/> elit</li>
<li id="item_421"><img src="icon.png" alt=""/> sed do eiusmod</li>
<li id="item_422"><img src="icon.png" alt=""/> tempor incididunt</li>
<li id="item_423"><img src="icon.png" alt=""/> ut labore et dolore</li>
<li id="item_424"><img src="icon.png" alt=""/> magna aliqua</li>
</ul>
</div>
<p id="testlist4_serialize">(waiting for onChange)</p>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
Sortable.create('testlist4',{overlap:'horizontal',ghosting:true,constraint:false,
onUpdate:function(sortable){alert(Sortable.serialize(sortable))},
onChange:function(element){$('testlist4_serialize').innerHTML = Sortable.serialize(element.parentNode)}
});
// ]]>
</script>
<div id="debug"></div>
</body>
</html>

40
javascript/scoluos/test/functional/sortable3_test.html Executable file
View File

@@ -0,0 +1,40 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>script.aculo.us sortable functional test file</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="../../lib/prototype.js" type="text/javascript"></script>
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
<script src="../../src/unittest.js" type="text/javascript"></script>
<link rel="stylesheet" href="../test.css" type="text/css" />
<style type="text/css" media="screen">
ul { height: 100px; border:1px dotted #888; }
</style>
</head>
<body>
<h1>script.aculo.us Sortable two-lists w/ dropOnEmpty functional test file</h1>
<ul id="thelist1">
<li id="thelist1_1">Hey there! I'm item#1/1</li>
<li id="thelist1_2">Hey there! I'm item#1/2</li>
<li id="thelist1_3">Hey there! I'm item#1/3</li>
</ul>
<ul id="thelist2">
</ul>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
Sortable.create('thelist1',{containment:['thelist1','thelist2'], dropOnEmpty:true});
Sortable.create('thelist2',{containment:['thelist1','thelist2'], dropOnEmpty:true});
// ]]>
</script>
<a href="#" onclick="alert(Sortable.serialize('thelist1'));return false;">Serialize sortable1</a>
<a href="#" onclick="alert(Sortable.serialize('thelist2'));return false;">Serialize sortable2</a>
<div id="debug"></div>
</body>
</html>

88
javascript/scoluos/test/functional/sortable4_test.html Executable file
View File

@@ -0,0 +1,88 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>script.aculo.us sortable functional test file</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="../../lib/prototype.js" type="text/javascript"></script>
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
<script src="../../src/unittest.js" type="text/javascript"></script>
<link rel="stylesheet" href="../test.css" type="text/css" />
<style type="text/css" media="screen">
ul.sortablelist {
list-style-image:none;
list-style-type:none;
margin-top:5px;
margin:0px;
padding:0px;
}
ul.sortabledemo li {
padding:0px;
margin:0px;
}
span.handle {
background-color: #E8A400;
color:white;
cursor: move;
}
li.green {
background-color: #ECF3E1;
border:1px solid #C5DEA1;
cursor: move;
}
li.orange {
border:1px solid #E8A400;
background-color: #FFF4D8;
}
</style>
</head>
<body>
<h1>script.aculo.us: Two floating sortables with containment and dropOnEmpty</h1>
<div style="height:200px;">
<div style="float:left;">
<h3>This is the first list</h3>
<ul class="sortabledemo" id="firstlist" style="height:150px;width:200px;">
<li class="green" id="firstlist_firstlist1">Item 1 from first list.</li>
<li class="green" id="firstlist_firstlist2">Item 2 from first list.</li>
<li class="green" id="firstlist_firstlist3">Item 3 from first list.</li>
</ul>
</div>
<div style="float:left;">
<h3>And now the second list</h3>
<ul class="sortabledemo" id="secondlist" style="height:150px;width:200px;">
<li class="orange" id="secondlist_secondlist1">
<span class="handle">DRAG HERE</span> Item 1 from second list.
</li>
<li class="orange" id="secondlist_secondlist2">
<span class="handle">DRAG HERE</span> Item 2 from second list.
</li>
<li class="orange" id="secondlist_secondlist3">
<span class="handle">DRAG HERE</span> Item 3 from second list.
</li>
</ul>
</div>
</div>
<hr style="clear:both" />
<pre id="firstlist_debug"></pre>
<pre id="secondlist_debug"></pre>
<script type="text/javascript">
// <![CDATA[
Sortable.create("firstlist",
{dropOnEmpty:true,containment:["firstlist","secondlist"],constraint:false,
onChange:function(){$('firstlist_debug').innerHTML = Sortable.serialize('firstlist') }});
Sortable.create("secondlist",
{dropOnEmpty:true,handle:'handle',containment:["firstlist","secondlist"],constraint:false,
onChange:function(){$('secondlist_debug').innerHTML = Sortable.serialize('secondlist') }});
// ]]>
</script>
</body>
</html>

43
javascript/scoluos/test/functional/sortable5_test.html Executable file
View File

@@ -0,0 +1,43 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>script.aculo.us sortable functional test file</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="../../lib/prototype.js" type="text/javascript"></script>
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
<script src="../../src/unittest.js" type="text/javascript"></script>
<link rel="stylesheet" href="../test.css" type="text/css" />
</head>
<body>
<div id="container_div">
</div>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
var new_ul_id = 'new_id_123';
var ul = document.createElement("ul");
var ul_id = document.createAttribute("id");
ul_id.nodeValue = new_ul_id;
ul.setAttributeNode(ul_id);
var li = document.createElement("li");
li.setAttribute("id", "test_1");
li.appendChild(document.createTextNode("blah1"));
ul.appendChild(li);
var li2 = document.createElement("li");
li2.setAttribute("id", "test_2");
li2.appendChild(document.createTextNode("blah2"));
ul.appendChild(li2);
$('container_div').appendChild(ul);
Sortable.create(new_ul_id, { onUpdate: function() { alert(Sortable.serialize('new_id_123')); } });
// ]]>
</script>
</body>
</html>

148
javascript/scoluos/test/functional/sortable6_test.html Executable file
View File

@@ -0,0 +1,148 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>script.aculo.us Drag and drop functional test file</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="../../lib/prototype.js" type="text/javascript"></script>
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
<style type="text/css" media="screen">
#thelist li { background: green; margin:5px; padding: 30px; }
#thelist2 li { background: #ffb; margin:2px; padding: 2px; }
</style>
</head>
<body>
<h1>script.aculo.us Drag and drop functional test file</h1>
<p>Scroll window down to test autoscrolling inside scrollable elements when window is scrolled</p>
<h2>Draggables/Droppables</h2>
<div style="width:400px;height:400px;overflow:scroll;position:relative;" id="scroll-container">
<ul id="thelist2" style="padding: 2px; background:red;">
<li>Relatively here!</li>
<li><input onclick="this.checked = !this.checked" name="x" id="x" type="checkbox"/>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<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>
</div>
<h1> Some space in between</h1>
<div style="width:400px;height:400px;overflow:scroll" id="scroll-container-mod">
<ul id="thelist2-mod" style="padding: 2px; background:red;">
<li>Relatively here!</li>
<li><input onclick="this.checked = !this.checked" name="y" id="y" type="checkbox"/>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<li>one</li>
<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>
</div>
<pre id="debug"></pre>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
// Sortable.create('thelist', {overlap: 'horizontal', constraint: false});
Position.includeScrollOffsets = true;
Sortable.create('thelist2',{scroll:'scroll-container'});
Sortable.create('thelist2-mod',{scroll:'scroll-container-mod'});
// ]]>
</script>
</body>
</html>

57
javascript/scoluos/test/functional/sortable_nested_test.html Executable file
View File

@@ -0,0 +1,57 @@
<html>
<head>
<title>Nested Sortable element bug</title>
<script src="../../lib/prototype.js" type="text/javascript"></script>
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
</head>
<body>
<ul id ="route">
<li id="39" class="segment">
<h2 id="39_title"> <span id="39_note" class="segment_title">COLLEGE AVE</span></h2>
<ul id="39_entries">
<li id="39:3" class="entry">625</li>
<li id="39:4" class="entry">617</li>
<li id="39:5" class="entry">601</li>
</ul>
</li>
<li id="40" class="segment">
<h2 id="40_title">Right <span id="40_note" class="segment_title">COLLEGE CT</span></h2>
<ul id="40_entries">
<li id="40:7" class="entry">14</li>
<li id="40:8" class="entry">27</li>
<li id="40:9" class="entry">30</li>
</ul>
</li>
</ul>
<script type="text/javascript">
Sortable.create(
"route",
{
handle:'segment_title',
format: /([0-9]+)/
}
);
Sortable.create("39_entries", {
dropOnEmpty:true,
constraint:false,
format: /[0-9]+:([0-9]+)/
}
);
Sortable.create("40_entries", {
dropOnEmpty:true,
constraint:false,
format: /[0-9]+:([0-9]+)/
}
);
</script>
</body>
</html>

141
javascript/scoluos/test/functional/sortable_test.html Executable file
View File

@@ -0,0 +1,141 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>script.aculo.us sortable functional test file</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="../../lib/prototype.js" type="text/javascript"></script>
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
<script src="../../src/unittest.js" type="text/javascript"></script>
<link rel="stylesheet" href="../test.css" type="text/css" />
<style type="text/css" media="screen">
#thelist li { background: green; margin:5px; padding: 30px; }
div.dropmarker {
height:6px;
width:200px;
background: url(dropmarker.png) left top;
margin-top:-3px;
margin-left:-5px;
z-index:1000;
overflow: hidden;
}
</style>
<script type="text/javascript" charset="utf-8">
var callsToOnUpdate = 0;
</script>
</head>
<body>
<ul id="thelist">
<li id="thelist_1">Hey there! I'm item#1</li>
<li id="thelist_2">Hey there! I'm item#2</li>
<li id="thelist_3">Hey there! I'm item#3</li>
</ul>
<a href="#" onclick="Sortable.create('thelist',{onUpdate:function(){$('debug').update(++callsToOnUpdate+' call(s) to onUpdate')}});return false;">Create sortable</a> |
<a href="#" onclick="Sortable.destroy('thelist');return false;">Destroy sortable</a> |
<a href="#" onclick="alert(Sortable.serialize('thelist'));return false;">Serialize sortable</a>
<ul id="thehandlelist">
<li id="thehandlelist_1">Hey there! I'm item#1<span class="handle">HANDLE</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
</li>
<li id="thehandlelist_2">Hey there! I'm item#2<span class="handle">HANDLE</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
</li>
<li id="thehandlelist_3">Hey there! I'm item#3<span class="handle">HANDLE</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
</li>
</ul>
<a href="#" onclick="Sortable.create('thehandlelist',{handle:'handle',onUpdate:function(){$('debug').update(++callsToOnUpdate+' call(s) to onUpdate')}});return false;">Create sortable</a> |
<a href="#" onclick="Sortable.destroy('thehandlelist');return false;">Destroy sortable</a> |
<a href="#" onclick="alert(Sortable.serialize('thehandlelist'));return false;">Serialize sortable</a>
<p id="debug">no calls to onUpdate</p>
<ul id="sortable_elements_handles">
<li id="s_1">s1 <span class="handle" id="h_1">handle</span></li>
<li id="s_2">s2 <span class="handle" id="h_2">handle</span></li>
<li id="s_3">s3 <span class="handle" id="h_3">handle</span></li>
<li id="s_4">s4 <span class="handle" id="h_4">handle</span></li>
<li id="s_5">s5 <span class="handle" id="h_5">handle</span></li>
<li id="s_6">s6 <span class="handle" id="h_6">handle</span></li>
<li id="s_7">s7 <span class="handle" id="h_7">handle</span></li>
<li id="s_8">s8 <span class="handle" id="h_8">handle</span></li>
<li id="s_9">s9 <span class="handle" id="h_9">handle</span></li>
<li id="s_10">s10 <span class="handle" id="h_10">handle</span></li>
</ul>
<script type="text/javascript" charset="utf-8">
function initializePreselected(){
Sortable.create('sortable_elements_handles',{
handle: 'handle',
handles: ['h_1','h_2','h_3','h_4','h_5','h_6','h_7','h_8','h_9','h_10'],
elements: ['s_1','s_2','s_3','s_4','s_5','s_6','s_7','s_8','s_9','s_10']
});
}
function initializeNormal(){
Sortable.create('sortable_elements_handles',{
handle: 'handle'
});
}
function benchmark(method,times){
var now = new Date();
times.times(method);
$('benchmark').update((new Date()-now)+'ms');
}
</script>
20 times: <a href="#" onclick="benchmark(function(){initializePreselected()},20);return false">Init with Preselection</a> |
<a href="#" onclick="benchmark(function(){initializeNormal()},20);return false">Init normally</a> <span id="benchmark"></span>
</body>
</html>

185
javascript/scoluos/test/functional/sortable_tree_test.html Executable file
View File

@@ -0,0 +1,185 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Sortable tree test</title>
<script src="../../lib/prototype.js" type="text/javascript" language="javascript" charset="utf-8"></script>
<script src="../../src/scriptaculous.js" type="text/javascript" language="javascript" charset="utf-8"></script>
<style type="text/css">
ul {padding-top:4px; padding-bottom: 2px; border: 1px solid #ccf;}
li {border: 1px solid #fcc;}
</style>
</head>
<body>
<a href="#" onclick="alert(Sortable.serialize('menu'));return false">serialize 1</a>
<ul id="menu" style="padding-top: 6px; padding-bottom: 6px;">
<li class="edit_link level0" id="t1_7">
System
<ul class="edit_list">
<li class="edit_link level1" id="t1_8">
Page Not Found
<ul class="edit_list"></ul>
</li>
<li class="edit_link level1" id="t1_9">
Translation Not Available
<ul class="edit_list"></ul>
</li>
</ul>
</li>
<li class="edit_link level0" id="t1_10">
Main Menu
<ul class="edit_list">
<li class="edit_link level1" id="t1_1">
Welcome
<ul class="edit_list"></ul>
</li>
<li class="edit_link level1" id="t1_2">
Software
<ul class="edit_list">
<li class="edit_link level2" id="t1_4">
Serial Console
<ul class="edit_list">
<li class="edit_link level3" id="t1_6">
Features
<ul class="edit_list"></ul>
</li>
</ul>
</li>
<li class="edit_link level2" id="t1_5">
Property Manager
<ul class="edit_list"></ul>
</li>
<li class="edit_link level2" id="t1_11">
Geomap
<ul class="edit_list"></ul>
</li>
</ul>
</li>
<li class="edit_link level1" id="t1_12">
Services
<ul class="edit_list"></ul>
</li>
<li class="edit_link level1" id="t1_13">
Software
<ul class="edit_list">
<li class="edit_link level2" id="t1_14">
Serial Console
<ul class="edit_list">
<li class="edit_link level3" id="t1_15">
Features
<ul class="edit_list"></ul>
</li>
</ul>
</li>
<li class="edit_link level2" id="t1_16">
Property Manager
<ul class="edit_list"></ul>
</li>
<li class="edit_link level2" id="t1_17">
Geomap
<ul class="edit_list"></ul>
</li>
</ul>
</li>
<li class="edit_link level1" id="t1_18">
Services
<ul class="edit_list"></ul>
</li>
</ul>
</li>
</ul>
<script type="text/javascript">
//<![CDATA[
Sortable.create('menu', {tree:true,scroll:window});
//]]>
</script>
<ul id="menu2" style="padding-top: 6px; padding-bottom: 6px;">
<li class="edit_link level0" id="t2_7">
System
<ul class="edit_list">
<li class="edit_link level1" id="t2_8">
Page Not Found
<ul class="edit_list"></ul>
</li>
<li class="edit_link level1" id="t2_9">
Translation Not Available
<ul class="edit_list"></ul>
</li>
</ul>
</li>
<li class="edit_link level0" id="t2_10">
Main Menu
<ul class="edit_list">
<li class="edit_link level1" id="t2_1">
Welcome
<ul class="edit_list"></ul>
</li>
<li class="edit_link level1" id="t2_2">
Software
<ul class="edit_list">
<li class="edit_link level2" id="t2_4">
Serial Console
<ul class="edit_list">
<li class="edit_link level3" id="t2_6">
Features
<ul class="edit_list"></ul>
</li>
</ul>
</li>
<li class="edit_link level2" id="t2_5">
Property Manager
<ul class="edit_list"></ul>
</li>
<li class="edit_link level2" id="t2_11">
Geomap
<ul class="edit_list"></ul>
</li>
</ul>
</li>
<li class="edit_link level1" id="t2_12">
Services
<ul class="edit_list"></ul>
</li>
<li class="edit_link level1" id="t2_13">
Software
<ul class="edit_list">
<li class="edit_link level2" id="t2_14">
Serial Console
<ul class="edit_list">
<li class="edit_link level3" id="t2_15">
Features
<ul class="edit_list"></ul>
</li>
</ul>
</li>
<li class="edit_link level2" id="t2_16">
Property Manager
<ul class="edit_list"></ul>
</li>
<li class="edit_link level2" id="t2_17">
Geomap
<ul class="edit_list"></ul>
</li>
</ul>
</li>
<li class="edit_link level1" id="t2_18">
Services
<ul class="edit_list"></ul>
</li>
</ul>
</li>
</ul>
<script type="text/javascript">
//<![CDATA[
Sortable.create('menu2', {tree:true,scroll:window});
//]]>
</script>
</body>
</html>

21
javascript/scoluos/test/functional/sound_test.html Executable file
View File

@@ -0,0 +1,21 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>script.aculo.us Sound functional test file</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="../../lib/prototype.js" type="text/javascript"></script>
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
</head>
<body>
<h1>script.aculo.us Sound test file</h1>
<a href="#" onclick="Sound.play('sword.mp3'); return false">play sound (parallel)</a>
<a href="#" onclick="Sound.play('sword.mp3',{replace:true}); return false">play sound (overwrite)</a>
<a href="#" onclick="Sound.disable(); return false">Mute</a>
<a href="#" onclick="Sound.enable(); return false">Enable sounds</a>
</body>
</html>

BIN
javascript/scoluos/test/functional/sword.mp3 Executable file
View File

Binary file not shown.

52
javascript/scoluos/test/functional/texteffects_test.html Executable file
View File

@@ -0,0 +1,52 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Text effects tests</title>
<script type="text/javascript" src="../../lib/prototype.js"></script>
<script type="text/javascript" src="../../src/scriptaculous.js"></script>
<style>
div#many_test span { font-size:40pt; color: white; background:black; width:100px; float:left; position: relative; }
</style>
</head>
<body>
<h1 id="h1_text" style="font:20pt Lucida Grande;color:#fff;text-align:center;background-color:#482;">
Maybe this is useful? <img src="icon.png" alt="blah"/> Dunno...
</h1>
<a href="#" onclick="Effect.multiple('h1_text', Effect.Appear, {speed:0.05, afterFinishInternal:function(){}}); return false;">Appear</a> |
<a href="#" onclick="Effect.multiple('h1_text', Effect.Fade, {speed:0.05, afterFinishInternal:function(){}}); return false;">Fade</a> |
<a href="#" onclick="Effect.multiple('h1_text', Effect.DropOut, {speed:0.07, afterFinishInternal:function(){}}); return false;">DropOut</a> |
<a href="#" onclick="alert($('h1_text').innerHTML); return false;">show H1 innerHTML</a>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p id="p_text" style="font:12px Verdana;color:red;font-weight:bold;">THIS IS A WARNING!</p>
<p>
<a href="#" onclick="Effect.multiple('p_text', Effect.Appear, {speed:0.05, afterFinishInternal:function(){}}); return false;">Appear</a> |
<a href="#" onclick="Effect.multiple('p_text', Effect.Fade, {speed:0.05, afterFinishInternal:function(){}}); return false;">Fade</a> |
<a href="#" onclick="Effect.multiple('p_text', Effect.DropOut, {speed:0.07, afterFinishInternal:function(){}}); return false;">DropOut</a>
</p>
<div id="many_test" style="height:50px;">1234567890ABCDEFG</div>
<div style="clear:both;"> </div>
<a href="#" onclick="Effect.multiple('many_test', Effect.Appear, {speed:0.5, duration:3.0, afterFinishInternal:function(){}}); return false;">Appear</a> |
<a href="#" onclick="Effect.multiple('many_test', Effect.Fade, {speed:0.05, afterFinishInternal:function(){}}); return false;">Fade</a> |
<a href="#" onclick="Effect.multiple($('many_test').childNodes, Effect.DropOut, {speed:0.07, afterFinishInternal:function(){}}); return false;">DropOut</a> |
<a href="#" onclick="Effect.multiple($('many_test').childNodes, Effect.Highlight, {speed:0.07, afterFinishInternal:function(){}}); return false;">Highlight</a> |
<a href="#" onclick="Effect.multiple($('many_test').childNodes, Effect.BlindDown, {speed:0.15, afterFinishInternal:function(){}}); return false;">BlindDown</a>
<script type="text/javascript" language="javascript">
// <![CDATA[
Effect.tagifyText('h1_text');
Effect.tagifyText('p_text');
Effect.tagifyText('many_test');
// ]]>
</script>
<br/><br/>
<a href="#" onclick="Effect.multiple(document.getElementsByTagName('span'), Effect.Fade, {speed:0.04, afterFinishInternal:function(){}}); return false;">Fade all spans on page</a>
<p id="debug"> <p>
</body>
</html>