diff options
| author | mensonge <mensonge@b3834d28-1941-0410-a4f8-b48e95affb8f> | 2008-11-13 09:49:11 +0000 |
|---|---|---|
| committer | mensonge <mensonge@b3834d28-1941-0410-a4f8-b48e95affb8f> | 2008-11-13 09:49:11 +0000 |
| commit | e44a7e37b6c7b5961adaffc62b9042b8d442938e (patch) | |
| tree | 95b67c356e93163467db2451f2b8cce84ed5d582 /includes/js/dojo/tests/dnd | |
| parent | a62b9742ee5e28bcec6872d88f50f25b820914f6 (diff) | |
| download | semanticscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.gz semanticscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.bz2 | |
New feature: basic Ajax suggestion for tags and implementation of Dojo toolkit
git-svn-id: https://semanticscuttle.svn.sourceforge.net/svnroot/semanticscuttle/trunk@151 b3834d28-1941-0410-a4f8-b48e95affb8f
Diffstat (limited to 'includes/js/dojo/tests/dnd')
18 files changed, 1457 insertions, 0 deletions
diff --git a/includes/js/dojo/tests/dnd/dndDefault.css b/includes/js/dojo/tests/dnd/dndDefault.css new file mode 100644 index 0000000..eca2ef5 --- /dev/null +++ b/includes/js/dojo/tests/dnd/dndDefault.css @@ -0,0 +1,52 @@ + +.container { + border:3px solid #ccc; + padding: 1em 3em; + cursor: default; + radius:8pt; + background:#fff; + -moz-border-radius:8pt 8pt; +} +.dojoDndContainerOver { + + border:3px solid #aaa; +} +.dojoDndItem { + padding:3px; +} +.dojoDndItemOver { + background: #ededed; + cursor:pointer; +} +.dojoDndItemSelected { + background: #ccf; color: #444; +} +.dojoDndItemAnchor { + background: #ccf; color: black; +} +.dojoDndItemOver .dojoDndItemSelected { + background: #ededed; +} +.dojoDndItemOver .dojoDndItemAnchor { + background: #ededed; +} +.dojoDndItemBefore { + border-top: 2px solid #369; +} +.dojoDndItemAfter { + border-bottom: 2px solid #369; +} +.dojoDndAvatar { + border:2px solid #ccc; + font-size: 75%; + -moz-border-radius:8pt 8pt; + radius:8pt; +} + +.dojoDndAvatarHeader { + background: #aaa; +} +.dojoDndAvatarItem { + background: #fff; + border-bottom:1px solid #666; +} diff --git a/includes/js/dojo/tests/dnd/dndDefault.css.commented.css b/includes/js/dojo/tests/dnd/dndDefault.css.commented.css new file mode 100644 index 0000000..cad410c --- /dev/null +++ b/includes/js/dojo/tests/dnd/dndDefault.css.commented.css @@ -0,0 +1,69 @@ +/* + + there are basically all the classes you can set + for the various dojo.dnd states and elements in + their simplest form. hacking welcome. + +*/ +.container { + border:3px solid #ccc; + padding: 1em 3em; + cursor: default; + radius:8pt; + background:#fff; + -moz-border-radius:8pt 8pt; +} + +.dojoDndContainerOver { + /* cursor:pointer; */ + border:3px solid #aaa; +} + +.dojoDndItem { + padding:3px; +} + +.dojoDndItemOver { + background: #ededed; + cursor:pointer; +} + +.dojoDndItemSelected { + background: #ccf; color: #444; +} + +.dojoDndItemAnchor { + background: #ccf; color: black; +} + +.dojoDndItemOver .dojoDndItemSelected { + background: #ededed; +} + +.dojoDndItemOver .dojoDndItemAnchor { + background: #ededed; +} + +.dojoDndItemBefore { + border-top: 2px solid #369; +} + +.dojoDndItemAfter { + border-bottom: 2px solid #369; +} + +.dojoDndAvatar { + border:2px solid #ccc; + font-size: 75%; + -moz-border-radius:8pt 8pt; + radius:8pt; +} + +.dojoDndAvatarHeader { + background: #aaa; +} + +.dojoDndAvatarItem { + background: #fff; + border-bottom:1px solid #666; +} diff --git a/includes/js/dojo/tests/dnd/flickr_viewer.html b/includes/js/dojo/tests/dnd/flickr_viewer.html new file mode 100644 index 0000000..4ede297 --- /dev/null +++ b/includes/js/dojo/tests/dnd/flickr_viewer.html @@ -0,0 +1,168 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>Sort Flickr images by tags</title> + <style type="text/css"> + @import "../../resources/dojo.css"; + @import "../../resources/dnd.css"; + body { + padding: 1em; + } + + /* application-specific settings */ + #status {font-weight: bold;} + .container {padding: 5px; cursor: default; background: #f8f8ff;} + .wrap1 {float: left; width: 275px; height: 600px; overflow: auto; margin-right: 1em;} + .wrap1 div {min-height: 100px;} + .wrap2 {width: 350px; height: 170px; overflow: auto;} + .wrap2 div {min-height: 150px;} + .container .name {font-weight: bold; padding-right: 4px;} + .container .image {padding: 5px;} + body.dojoDndCopy, body.dojoDndMove {color: #888;} + .dojoDndCopy .container, .dojoDndMove .container {background: #ddf;} + + /* container-specific settings */ + .dojoDndContainer {border: 1px solid white; color: black;} + .dojoDndContainerOver {border: 1px solid black; color: black;} + .container.dojoDndTargetDisabled {background: #ccc; color: #888;} + + /* item-specific settings */ + .dojoDndItemOver {background: #feb;} + .dojoDndItemSelected {background: #ccf; color: #444;} + .dojoDndItemAnchor {background: #ccf; color: black;} + .dojoDndItemOver.dojoDndItemSelected {background: #ec8;} + .dojoDndItemOver.dojoDndItemAnchor {background: #ec8;} + .dojoDndItemBefore {border-top: 3px solid red;} + .dojoDndItemAfter {border-bottom: 3px solid red;} + .dojoDndHorizontal .dojoDndItemBefore {border-top: none;} + .dojoDndHorizontal .dojoDndItemAfter {border-bottom: none;} + .dojoDndHorizontal .dojoDndItemBefore img {border-left: 3px solid red;} + .dojoDndHorizontal .dojoDndItemAfter img {border-right: 3px solid red;} + </style> + <script type="text/javascript" src="../../dojo.js" djConfig="isDebug: true, parseOnLoad: true"></script> + <script type="text/javascript" src="../../dnd/common.js"></script> + <script type="text/javascript" src="../../dnd/autoscroll.js"></script> + <script type="text/javascript" src="../../dnd/Container.js"></script> + <script type="text/javascript" src="../../dnd/Selector.js"></script> + <script type="text/javascript" src="../../dnd/Source.js"></script> + <script type="text/javascript" src="../../dnd/Avatar.js"></script> + <script type="text/javascript" src="../../dnd/Manager.js"></script> + <script type="text/javascript"> + dojo.require("dojo.parser"); + dojo.require("dojo.io.script"); + dojo.require("dojo.dnd.Source"); + + // The main image container creator + var main_creator = function(item, hint){ + var type = []; + if(item.tags.search(/cat/i) >= 0){ type.push("cat"); } + if(item.tags.search(/dog/i) >= 0){ type.push("dog"); } + var node; + if(hint == "avatar"){ + node = dojo.doc.createElement("span"); + node.innerHTML = "<img src='" + item.media.m.replace(/_m\./, "_s.") + "'/>"; + }else{ + var t = ["<table border='0' cellpadding='0' cellspacing='0' width='250'>"]; + t.push("<tr><td colspan='2' class='image' align='center' width='250'><img src='" + + item.media.m + "'/></td></tr>"); + t.push("<tr><td class='name' valign='top'>Title:</td><td class='value'><a href='" + + item.link + "' target='_blank'>" + + (item.title ? item.title : "<em>untitled</em>") + "</a></td></tr>"); + t.push("<tr><td class='name' valign='top'>Author:</td><td class='value'>" + + item.author + "</td></tr>"); + t.push("<tr><td class='name' valign='top'>Tags:</td><td class='value'>" + + item.tags + "</td></tr>"); + t.push("</table>"); + node = dojo.doc.createElement("div"); + node.innerHTML = t.join(""); + } + node.id = dojo.dnd.getUniqueId(); + return {node: node, data: item, type: type}; + }; + + // The band image container creator + var band_creator = function(item, hint){ + var type = []; + if(item.tags.search(/cat/i) >= 0){ type.push("cat"); } + if(item.tags.search(/dog/i) >= 0){ type.push("dog"); } + var src = item.media.m.replace(/_m\./, "_s."); + var node = dojo.doc.createElement("span"); + node.innerHTML = "<img src='" + src + "'/>"; + node.id = dojo.dnd.getUniqueId(); + return {node: node, data: item, type: type}; + }; + + // Flickr's JSONP function + var jsonFlickrFeed = function(data){ + if(!data.items || !data.items.length){ + dojo.byId("status").innerHTML = "Flickr didn't return any images"; + return; + } + dojo.byId("status").innerHTML = data.items.length + " images were retrieved"; + // initialize sources + c1.selectAll().deleteSelectedNodes(); + c2.selectAll().deleteSelectedNodes(); + c3.selectAll().deleteSelectedNodes(); + // populate the main source + c1.insertNodes(false, data.items); + }; + + var init = function(){ + // replace the avatar string to make it more human readable + dojo.dnd.Avatar.prototype._generateText = function(){ + return (this.manager.copy ? "copy" : "mov") + + "ing " + this.manager.nodes.length + " item" + + (this.manager.nodes.length != 1 ? "s" : ""); + }; + // ask Flickr for images + var td = dojo.io.script.get({ + url: "http://api.flickr.com/services/feeds/photos_public.gne", + content: {tags: "cat,dog,cow", tagmode: "any", format: "json"}, + handleAs: "text/javascript", + preventCache: true + }); + td.addErrback(function(){ + dojo.byId("status").innerHTML = "Flickr failed to return images"; + }); + }; + + dojo.addOnLoad(init); + </script> +</head> +<body> + <h1>Sort Flickr images by tags</h1> + <p>This simple web application retrieves public images from Flickr that were tagged either as "cat", "dog", or "cow". + You can copy/move images in different containers according to their tags.</p> + <p>Following selection modes are supported by default:</p> + <ul> + <li>Simple click — selects a single element, all other elements will be unselected.</li> + <li>Ctrl+click — toggles a selection state of an element (use Meta key on Mac).</li> + <li>Shift+click — selects a range of element from the previous anchor to the current element.</li> + <li>Ctrl+Shift+click — adds a range of element from the previous anchor to the current element (use Meta key on Mac).</li> + </ul> + <p>Following drop modes are supported by default:</p> + <ul> + <li>Simple drop — moves elements to the valid target removing them from the source. It can be used to reorganize elements within a single source/target.</li> + <li>Ctrl+drop — copies elements to the valid target (use Meta key on Mac).</li> + </ul> + <p>Now scroll down and start dragging and dropping, rearrange images using DnD, copy and move them back!</p> + <p>Status: <span id="status">retrieving a list of Flickr images...</span></p> + <div class="wrap1"> + <div dojoType="dojo.dnd.Source" jsId="c1" accept="cat, dog, cow" class="container"> + <script type="dojo/method" event="creator" args="item, hint">return main_creator(item, hint);</script> + </div> + </div> + <p>Tag: cat</p> + <div class="wrap2"> + <div dojoType="dojo.dnd.Source" jsId="c2" accept="cat" horizontal="true" class="container"> + <script type="dojo/method" event="creator" args="item, hint">return band_creator(item, hint);</script> + </div> + </div> + <p>Tag: dog</p> + <div class="wrap2"> + <div dojoType="dojo.dnd.Source" jsId="c3" accept="dog" horizontal="true" class="container"> + <script type="dojo/method" event="creator" args="item, hint">return band_creator(item, hint);</script> + </div> + </div> +</body> +</html> diff --git a/includes/js/dojo/tests/dnd/test_box_constraints.html b/includes/js/dojo/tests/dnd/test_box_constraints.html new file mode 100644 index 0000000..85a5033 --- /dev/null +++ b/includes/js/dojo/tests/dnd/test_box_constraints.html @@ -0,0 +1,61 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>Dojo box constraint test</title> + <style type="text/css"> + @import "../../resources/dojo.css"; + @import "dndDefault.css"; + + body { + padding: 1em; + } + + .moveable { + background: #FFFFBF; + border: 1px solid black; + width: 300px; + padding: 10px 20px; + cursor: pointer; + } + </style> + <script type="text/javascript" src="../../dojo.js" djConfig="isDebug: true, parseOnLoad: true"></script> + <script type="text/javascript" src="../../dnd/move.js"></script> + <script type="text/javascript"> + dojo.require("dojo.parser"); + dojo.require("dojo.dnd.move"); + var m5, m6; + var init = function(){ + m5 = new dojo.dnd.move.boxConstrainedMoveable("moveable5", {box: {l: 100, t: 100, w: 500, h: 500}}); + m6 = new dojo.dnd.move.boxConstrainedMoveable("moveable6", {box: {l: 100, t: 100, w: 500, h: 500}, within: true}); + + // system-wide topics + dojo.subscribe("/dnd/move/start", function(node){ + console.debug("Start move", node); + }); + dojo.subscribe("/dnd/move/stop", function(node){ + console.debug("Stop move", node); + }); + + // watching a particular moveable instance + dojo.connect(m5, "onDndMoveStart", function(mover){ + console.debug("Start moving m5 with this mover:", mover); + }); + dojo.connect(m5, "onDndMoveStop", function(mover){ + console.debug("Stop moving m5 with this mover:", mover); + }); + }; + dojo.addOnLoad(init); + </script> +</head> +<body> + <h1>Dojo box constraint test</h1> + <p class="moveable" id="moveable5"><strong>Paragraph restricted to (100,100:500,500) box:</strong> Donec ac odio sed pede aliquet auctor. Donec et lectus. Praesent feugiat ultrices enim. Morbi lectus. Donec vestibulum posuere libero. Donec quam enim, nonummy a, auctor vitae, placerat id, massa. Vivamus vulputate luctus nibh. Donec dolor orci, sagittis ac, pretium sed, ornare sit amet, pede. Vestibulum leo justo, pellentesque sit amet, tristique sed, tempor eu, felis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam scelerisque velit vel sem. Curabitur vulputate. Morbi pretium porta dui.</p> + <p class="moveable" id="moveable6"><strong>Paragraph restricted to (100,100:500,500) box, it cannot go outside of this box:</strong> In hac habitasse platea dictumst. Etiam rhoncus, leo quis hendrerit vestibulum, ipsum felis porta massa, vitae posuere nunc lorem ac enim. Nam neque turpis, aliquet quis, sollicitudin sit amet, dapibus sed, eros. Duis volutpat porttitor velit. Vivamus nibh metus, iaculis eget, malesuada eget, facilisis id, lorem. Sed turpis. Vestibulum aliquam mauris. Integer malesuada tellus vel neque. In hac habitasse platea dictumst. Aliquam at lectus. Maecenas nonummy cursus nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi imperdiet purus eu ipsum. Curabitur sapien felis, euismod eu, dapibus vel, tempor vitae, pede. Suspendisse blandit. Nulla imperdiet. Duis placerat nulla ultricies sem. In in mi nec ipsum molestie tempor. Sed scelerisque.</p> + <p class="moveable" dojoType="dojo.dnd.move.boxConstrainedMoveable" box="{l: 100, t: 100, w: 500, h: 500}"><strong>Marked up paragraph restricted to (100,100:500,500) box:</strong> Donec ac odio sed pede aliquet auctor. Donec et lectus. Praesent feugiat ultrices enim. Morbi lectus. Donec vestibulum posuere libero. Donec quam enim, nonummy a, auctor vitae, placerat id, massa. Vivamus vulputate luctus nibh. Donec dolor orci, sagittis ac, pretium sed, ornare sit amet, pede. Vestibulum leo justo, pellentesque sit amet, tristique sed, tempor eu, felis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam scelerisque velit vel sem. Curabitur vulputate. Morbi pretium porta dui. + </p> + <p class="moveable" dojoType="dojo.dnd.Moveable"><strong>Marked up paragraph restricted to (100,100:500,500) box, it cannot go outside of this box:</strong> In hac habitasse platea dictumst. Etiam rhoncus, leo quis hendrerit vestibulum, ipsum felis porta massa, vitae posuere nunc lorem ac enim. Nam neque turpis, aliquet quis, sollicitudin sit amet, dapibus sed, eros. Duis volutpat porttitor velit. Vivamus nibh metus, iaculis eget, malesuada eget, facilisis id, lorem. Sed turpis. Vestibulum aliquam mauris. Integer malesuada tellus vel neque. In hac habitasse platea dictumst. Aliquam at lectus. Maecenas nonummy cursus nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi imperdiet purus eu ipsum. Curabitur sapien felis, euismod eu, dapibus vel, tempor vitae, pede. Suspendisse blandit. Nulla imperdiet. Duis placerat nulla ultricies sem. In in mi nec ipsum molestie tempor. Sed scelerisque. + <!-- this is the obsolete way to do it --> + <script type="dojo/method">this.mover = dojo.dnd.boxConstrainedMover({l: 100, t: 100, w: 500, h: 500}, true);</script> + </p> +</body> +</html> diff --git a/includes/js/dojo/tests/dnd/test_container.html b/includes/js/dojo/tests/dnd/test_container.html new file mode 100644 index 0000000..352aa7a --- /dev/null +++ b/includes/js/dojo/tests/dnd/test_container.html @@ -0,0 +1,74 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>Dojo DnD container test</title> + <style type="text/css"> + @import "../../resources/dojo.css"; + @import "dndDefault.css"; + + body { + padding: 20px; + } + + </style> + <script type="text/javascript" src="../../dojo.js" djConfig="isDebug: true"></script> + <script type="text/javascript" src="../../dnd/Container.js"></script> + <script type="text/javascript"> + // dojo.require("dojo.dnd.Container"); + var c1, c2, c3, c4, c5; + var init = function(){ + c1 = new dojo.dnd.Container(dojo.byId("container1")); + c2 = new dojo.dnd.Container(dojo.byId("container2")); + c3 = new dojo.dnd.Container(dojo.byId("container3")); + c4 = new dojo.dnd.Container(dojo.byId("container4")); + c5 = new dojo.dnd.Container(dojo.byId("container5")); + }; + dojo.addOnLoad(init); + </script> +</head> +<body> + <h1>Dojo DnD container test</h1> + <p>Containers have a notion of a "current container", and one element can be "current".</p> + <p>see <a href="dndDefault.css">dndDefault.css</a> for example styling</p> + <h2>DIV container</h2> + <div id="container1" class="container"> + <div class="dojoDndItem">Item 1</div> + <div class="dojoDndItem">Item 2</div> + <div class="dojoDndItem">Item 3</div> + </div> + <h2>UL container</h2> + <ul id="container2" class="container"> + <li class="dojoDndItem">Item 1</li> + <li class="dojoDndItem">Item 2</li> + <li class="dojoDndItem">Item 3</li> + </ul> + <h2>OL container</h2> + <ol id="container3" class="container"> + <li class="dojoDndItem">Item 1</li> + <li class="dojoDndItem">Item 2</li> + <li class="dojoDndItem">Item 3</li> + </ol> + <h2>TABLE container</h2> + <table id="container4" class="container" border="1px solid black"> + <tr class="dojoDndItem"> + <td>A</td> + <td>row 1</td> + </tr> + <tr class="dojoDndItem"> + <td>B</td> + <td>row 2</td> + </tr> + <tr class="dojoDndItem"> + <td>C</td> + <td>row 3</td> + </tr> + </table> + <h2>P container with SPAN elements</h2> + <p>Elements of this container are layed out horizontally.</p> + <p id="container5" class="container"> + <span class="dojoDndItem"> Item 1 </span> + <span class="dojoDndItem"> Item 2 </span> + <span class="dojoDndItem"> Item 3 </span> + </p> +</body> +</html> diff --git a/includes/js/dojo/tests/dnd/test_container_markup.html b/includes/js/dojo/tests/dnd/test_container_markup.html new file mode 100644 index 0000000..4bde544 --- /dev/null +++ b/includes/js/dojo/tests/dnd/test_container_markup.html @@ -0,0 +1,67 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>Dojo DnD markup container test</title> + <style type="text/css"> + @import "../../resources/dojo.css"; + @import "dndDefault.css"; + + body { + padding: 20px; + } + + </style> + <script type="text/javascript" src="../../dojo.js" djConfig="isDebug: true, parseOnLoad: true"></script> + <script type="text/javascript" src="../../dnd/Container.js"></script> + <script type="text/javascript"> + dojo.require("dojo.parser"); + dojo.require("dojo.dnd.Container"); + </script> +</head> +<body> + <h1>Dojo DnD markup container test</h1> + <p>This example is functionally equivalent to <a href="test_container.html">test_container.html</a> example but is done using the Dojo markup.</p> + <p>Containers have a notion of a "current container", and one element can be "current".</p> + <p>See <a href="dndDefault.css">dndDefault.css</a> for example styling</p> + <h2>DIV container</h2> + <div dojoType="dojo.dnd.Container" jsId="c1" class="container"> + <div class="dojoDndItem">Item 1</div> + <div class="dojoDndItem">Item 2</div> + <div class="dojoDndItem">Item 3</div> + </div> + <h2>UL container</h2> + <ul dojoType="dojo.dnd.Container" jsId="c2" class="container"> + <li class="dojoDndItem">Item 1</li> + <li class="dojoDndItem">Item 2</li> + <li class="dojoDndItem">Item 3</li> + </ul> + <h2>OL container</h2> + <ol dojoType="dojo.dnd.Container" jsId="c3" class="container"> + <li class="dojoDndItem">Item 1</li> + <li class="dojoDndItem">Item 2</li> + <li class="dojoDndItem">Item 3</li> + </ol> + <h2>TABLE container</h2> + <table dojoType="dojo.dnd.Container" jsId="c4" class="container" border="1px solid black"> + <tr class="dojoDndItem"> + <td>A</td> + <td>row 1</td> + </tr> + <tr class="dojoDndItem"> + <td>B</td> + <td>row 2</td> + </tr> + <tr class="dojoDndItem"> + <td>C</td> + <td>row 3</td> + </tr> + </table> + <h2>P container with SPAN elements</h2> + <p>Elements of this container are layed out horizontally.</p> + <p dojoType="dojo.dnd.Container" jsId="c5" class="container"> + <span class="dojoDndItem"> Item 1 </span> + <span class="dojoDndItem"> Item 2 </span> + <span class="dojoDndItem"> Item 3 </span> + </p> +</body> +</html> diff --git a/includes/js/dojo/tests/dnd/test_custom_constraints.html b/includes/js/dojo/tests/dnd/test_custom_constraints.html new file mode 100644 index 0000000..9140914 --- /dev/null +++ b/includes/js/dojo/tests/dnd/test_custom_constraints.html @@ -0,0 +1,51 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>Dojo custom constraint test</title> + <style type="text/css"> + @import "../../resources/dojo.css"; + + body { + padding: 1em; + } + + .moveable { + background: #FFFFBF; + border: 1px solid black; + width: 300px; + padding: 10px 20px; + margin: 0px; + cursor: pointer; + } + </style> + <script type="text/javascript" src="../../dojo.js" djConfig="isDebug: true"></script> + <script type="text/javascript" src="../../dnd/move.js"></script> + <script type="text/javascript"> + dojo.require("dojo.dnd.move"); + + var STEP = 50; + + var init = function(){ + // 1st way + var m1 = new dojo.dnd.Moveable("moveable1"); + m1.onMove = function(mover, leftTop){ + leftTop.l -= leftTop.l % STEP; + leftTop.t -= leftTop.t % STEP; + dojo.marginBox(mover.node, leftTop); + }; + // 2nd way + var m2 = new dojo.dnd.Moveable("moveable2"); + dojo.connect(m2, "onMoving", function(mover, leftTop){ + leftTop.l -= leftTop.l % STEP; + leftTop.t -= leftTop.t % STEP; + }); + }; + dojo.addOnLoad(init); + </script> +</head> +<body> + <h1>Dojo custom constraint test</h1> + <p class="moveable" id="moveable1"><strong>This paragraph stops at 50x50 grid knots:</strong> Donec ac odio sed pede aliquet auctor. Donec et lectus. Praesent feugiat ultrices enim. Morbi lectus. Donec vestibulum posuere libero. Donec quam enim, nonummy a, auctor vitae, placerat id, massa. Vivamus vulputate luctus nibh. Donec dolor orci, sagittis ac, pretium sed, ornare sit amet, pede. Vestibulum leo justo, pellentesque sit amet, tristique sed, tempor eu, felis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam scelerisque velit vel sem. Curabitur vulputate. Morbi pretium porta dui.</p> + <p class="moveable" id="moveable2"><strong>This paragraph stops at 50x50 grid knots:</strong> Donec ac odio sed pede aliquet auctor. Donec et lectus. Praesent feugiat ultrices enim. Morbi lectus. Donec vestibulum posuere libero. Donec quam enim, nonummy a, auctor vitae, placerat id, massa. Vivamus vulputate luctus nibh. Donec dolor orci, sagittis ac, pretium sed, ornare sit amet, pede. Vestibulum leo justo, pellentesque sit amet, tristique sed, tempor eu, felis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam scelerisque velit vel sem. Curabitur vulputate. Morbi pretium porta dui.</p> +</body> +</html> diff --git a/includes/js/dojo/tests/dnd/test_dnd.html b/includes/js/dojo/tests/dnd/test_dnd.html new file mode 100644 index 0000000..7e2a56a --- /dev/null +++ b/includes/js/dojo/tests/dnd/test_dnd.html @@ -0,0 +1,130 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>Dojo DnD test</title> + <style type="text/css"> + @import "../../resources/dojo.css"; + @import "../../resources/dnd.css"; + @import "dndDefault.css"; + + body { + padding: 1em; + background: #ededed; + } + + .container { + width: 100px; + display: block; + } + + .clear { + clear: both; + } + </style> + + <script type="text/javascript" src="../../dojo.js" djConfig="isDebug: true, parseOnLoad: true"></script> + + <script type="text/javascript" src="../../dnd/Container.js"></script> + <script type="text/javascript" src="../../dnd/Selector.js"></script> + <script type="text/javascript" src="../../dnd/Source.js"></script> + <script type="text/javascript" src="../../dnd/Avatar.js"></script> + <script type="text/javascript" src="../../dnd/Manager.js"></script> + + <script type="text/javascript"> + dojo.require("dojo.parser"); + dojo.require("dojo.dnd.Source"); + + var c1; + + function init(){ + c1 = new dojo.dnd.Source("container1"); + c1.insertNodes(false, [1, "A", [1, 2, 3], + function(x){ return x + x; }, + {toString: function(){ return "CUSTOM!"; }}, + null]); + + // example subscribe to events + dojo.subscribe("/dnd/start", function(source){ + console.debug("Starting the drop", source); + }); + dojo.subscribe("/dnd/drop/before", function(source, nodes, copy, target){ + if(target == c1){ + console.debug(copy ? "Copying from" : "Moving from", source, "to", target, "before", target.before); + } + }); + dojo.subscribe("/dnd/drop", function(source, nodes, copy, target){ + if(target == c1){ + console.debug(copy ? "Copying from" : "Moving from", source, "to", target, "before", target.before); + } + }); + dojo.connect(c4, "onDndDrop", function(source, nodes, copy, target){ + if(target == c4){ + console.debug(copy ? "Copying from" : "Moving from", source); + } + }); + }; + + dojo.addOnLoad(init); + </script> +</head> +<body> + <h1 class="testTitle">Dojo DnD test</h1> + + <p>Elements of both sources/targets were created dynamically.</p> + <p>Following selection modes are supported by default:</p> + <ul> + <li>Simple click — selects a single element, all other elements will be unselected.</li> + <li>Ctrl+click — toggles a selection state of an element (use Meta key on Mac).</li> + <li>Shift+click — selects a range of element from the previous anchor to the current element.</li> + <li>Ctrl+Shift+click — adds a range of element from the previous anchor to the current element (use Meta key on Mac).</li> + </ul> + <p>Following drop modes are supported by default:</p> + <ul> + <li>Simple drop — moves elements to the valid target removing them from the source. It can be used to reorganize elements within a single source/target.</li> + <li>Ctrl+drop — copies elements to the valid target (use Meta key on Mac).</li> + </ul> + + <div id="dragLists"> + <div style="float: left; margin: 5px;"> + <h3>Source 1</h3> + <div id="container1" class="container"></div> + </div> + <div style="float: left; margin: 5px;"> + <h3>Source 2</h3> + <div dojoType="dojo.dnd.Source" jsId="c2" class="container"> + <div class="dojoDndItem">Item <strong>X</strong></div> + <div class="dojoDndItem">Item <strong>Y</strong></div> + <div class="dojoDndItem">Item <strong>Z</strong></div> + </div> + </div> + <div style="float: left; margin: 5px;"> + <h3>Source 3</h3> + <div dojoType="dojo.dnd.Source" jsId="c3" class="container"> + <script type="dojo/method" event="creator" args="item, hint"> + // this is custom creator, which changes the avatar representation + var node = dojo.doc.createElement("div"), s = String(item); + node.id = dojo.dnd.getUniqueId(); + node.className = "dojoDndItem"; + node.innerHTML = (hint != "avatar" || s.indexOf("Item") < 0) ? + s : "<strong style='color: darkred'>Special</strong> " + s; + return {node: node, data: item, type: ["text"]}; + </script> + <div class="dojoDndItem">Item <strong>Alpha</strong></div> + <div class="dojoDndItem">Item <strong>Beta</strong></div> + <div class="dojoDndItem">Item <strong>Gamma</strong></div> + <div class="dojoDndItem">Item <strong>Delta</strong></div> + </div> + </div> + <div style="float: left; margin: 5px;"> + <h3>Pure Target 4</h3> + <div dojoType="dojo.dnd.Target" jsId="c4" class="container"> + <div class="dojoDndItem">One item</div> + </div> + </div> + <div class="clear"></div> + </div> + + <p>HTML after</p> + +</body> +</html> diff --git a/includes/js/dojo/tests/dnd/test_dnd_handles.html b/includes/js/dojo/tests/dnd/test_dnd_handles.html new file mode 100644 index 0000000..bcc58dc --- /dev/null +++ b/includes/js/dojo/tests/dnd/test_dnd_handles.html @@ -0,0 +1,65 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>Dojo DnD with handles test</title> + <style type="text/css"> + @import "../../resources/dojo.css"; + @import "../../resources/dnd.css"; + @import "dndDefault.css"; + + body { padding: 1em; background: #ededed; } + + .container { width: 100px; display: block; } + .container.handles .dojoDndHandle { background: #fee; } + .clear { clear: both; } + </style> + + <script type="text/javascript" src="../../dojo.js" djConfig="isDebug: true, parseOnLoad: true"></script> + + <script type="text/javascript" src="../../dnd/Container.js"></script> + <script type="text/javascript" src="../../dnd/Selector.js"></script> + <script type="text/javascript" src="../../dnd/Source.js"></script> + <script type="text/javascript" src="../../dnd/Avatar.js"></script> + <script type="text/javascript" src="../../dnd/Manager.js"></script> + + <script type="text/javascript"> + dojo.require("dojo.parser"); + dojo.require("dojo.dnd.Source"); + </script> +</head> +<body> + <h1 class="testTitle">Dojo DnD with handles test</h1> + + <p>Following selection modes are supported by default:</p> + <ul> + <li>Simple click — selects a single element, all other elements will be unselected.</li> + <li>Ctrl+click — toggles a selection state of an element (use Meta key on Mac).</li> + <li>Shift+click — selects a range of element from the previous anchor to the current element.</li> + <li>Ctrl+Shift+click — adds a range of element from the previous anchor to the current element (use Meta key on Mac).</li> + </ul> + <p>Following drop modes are supported by default:</p> + <ul> + <li>Simple drop — moves elements to the valid target removing them from the source. It can be used to reorganize elements within a single source/target.</li> + <li>Ctrl+drop — copies elements to the valid target (use Meta key on Mac).</li> + </ul> + + <p>Source with handles. Items should be draggable by "Item".</p> + <div dojoType="dojo.dnd.Source" jsId="c1" withHandles="true" class="container handles"> + <div class="dojoDndItem"><span class="dojoDndHandle">Item</span> <strong>Alpha</strong></div> + <div class="dojoDndItem"><span class="dojoDndHandle">Item</span> <strong>Beta</strong></div> + <div class="dojoDndItem"><span class="dojoDndHandle">Item</span> <strong>Gamma</strong></div> + <div class="dojoDndItem"><span class="dojoDndHandle">Item</span> <strong>Delta</strong></div> + </div> + + <p>Source without handles.</p> + <div dojoType="dojo.dnd.Source" jsId="c2" class="container"> + <div class="dojoDndItem"><span class="dojoDndHandle">Item</span> <strong>Epsilon</strong></div> + <div class="dojoDndItem"><span class="dojoDndHandle">Item</span> <strong>Zeta</strong></div> + <div class="dojoDndItem"><span class="dojoDndHandle">Item</span> <strong>Eta</strong></div> + <div class="dojoDndItem"><span class="dojoDndHandle">Item</span> <strong>Theta</strong></div> + </div> + + <p>HTML after</p> + +</body> +</html> diff --git a/includes/js/dojo/tests/dnd/test_form.html b/includes/js/dojo/tests/dnd/test_form.html new file mode 100644 index 0000000..cac46c0 --- /dev/null +++ b/includes/js/dojo/tests/dnd/test_form.html @@ -0,0 +1,103 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>Dojo DnD form test</title> + <style type="text/css"> + @import "../../resources/dojo.css"; + @import "../../resources/dnd.css"; + @import "dndDefault.css"; + + body { + padding: 1em; + background:#ededed; + } + + #container1,#container2 { width:300px; display:block; } + .clear { clear:both; } + + </style> + + <script type="text/javascript" src="../../dojo.js" djConfig="isDebug: true, parseOnLoad: true"></script> + + <script type="text/javascript" src="../../dnd/Container.js"></script> + <script type="text/javascript" src="../../dnd/Selector.js"></script> + <script type="text/javascript" src="../../dnd/Source.js"></script> + <script type="text/javascript" src="../../dnd/Avatar.js"></script> + <script type="text/javascript" src="../../dnd/Manager.js"></script> + + <script type="text/javascript"> + dojo.require("dojo.parser"); + //dojo.require("dojo.dnd.Source"); + //dojo.require("dojo.dnd.Manager"); + + var c1, c2; + + function init(){ + + c1 = new dojo.dnd.Source("container1"); + c1.insertNodes(false, [1, 2, 3, 4, 5, 6, [1, 2, 3], function(x){ return x + x; }]); + c2 = new dojo.dnd.Target("container2", {accept: ["money"]}); + + // example subscribe to events + dojo.subscribe("/dnd/start",function(foo){ + console.debug(foo); + }); + + }; + dojo.addOnLoad(init); + </script> +</head> +<body> + <h1 class="testTitle">Dojo DnD form test</h1> + + <p>This is a test to confirm that the DnD container does not interfere with form elements.</p> + + <div id="dragLists"> + + <div style="float:left; margin:5px; "> + <h3>Target 1</h3> + <p id="container1" class="container"></p> + </div> + + <div style="float:left; margin:5px; "> + <h3>Target 2: form controls galore</h3> + <form id="container2" class="container" action="http://dojotoolkit.org"> + Input text: <input type="text" /><br /> + Input checkbox: <input type="checkbox" /><br /> + Input radio: <input type="radio" /><br /> + Input password: <input type="password" /><br /> + Input file: <input type="file" /><br /> + Input button: <input type="button" value="Button" /><br /> + Input reset: <input type="reset" /><br /> + Input submit: <input type="submit" /><br /> + Input image: <input type="image" src="http://dojotoolkit.org/misc/feed.png" /><br /> + Button: <button>Button</button><br /> + Select: <select><option>Yes</option><option>No</option></select><br /> + Textarea: <textarea cols="20" rows="3">Some text.</textarea> + </form> + </div> + <div class="clear"></div> + </div> + + <p> </p> + + <div dojoType="dojo.dnd.Source" class="container"> + <div>Source with <strong>skipForm = false</strong> (by default)</div> + <div class="dojoDndItem">Item <strong>X</strong>: <input type="text" value="1" /></div> + <div class="dojoDndItem">Item <strong>Y</strong>: <input type="text" value="2" /></div> + <div class="dojoDndItem">Item <strong>Z</strong>: <input type="text" value="3" /></div> + </div> + + <p> </p> + + <div dojoType="dojo.dnd.Source" class="container" skipForm="true"> + <div>Source with <strong>skipForm = true</strong></div> + <div class="dojoDndItem">Item <strong>A</strong>: <input type="text" value="a" /></div> + <div class="dojoDndItem">Item <strong>B</strong>: <input type="text" value="b" /></div> + <div class="dojoDndItem">Item <strong>C</strong>: <input type="text" value="c" /></div> + </div> + + <p>HTML after</p> + +</body> +</html> diff --git a/includes/js/dojo/tests/dnd/test_moveable.html b/includes/js/dojo/tests/dnd/test_moveable.html new file mode 100644 index 0000000..3f7e2e7 --- /dev/null +++ b/includes/js/dojo/tests/dnd/test_moveable.html @@ -0,0 +1,106 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>Dojo Moveable test</title> + <style type="text/css"> + @import "../../resources/dojo.css"; + @import "dndDefault.css"; + + body { + padding: 1em; + color:#666; + background-color:#dedede; + } + + #moveable1 { + background: #fff; + border: 1px solid black; + padding:8px; + } + #handle1 { + background: #333; + color: #fff; + font-weight: bold; + cursor: pointer; + border: 1px solid black; + } + #moveable2 { + position: absolute; + background: #fff; + width: 200px; + height: 200px; + left: 100px; + top: 100px; + padding: 10px 20px; + margin: 10px 20px; + border: 10px solid black; + cursor: pointer; + radius:8pt; + -moz-border-radius:8pt 8pt; + } + #moveable3 { + position: relative; + width: 150px; + height: 100px; + background: #ff8; + color: blue; + font-weight: bold; + } + </style> + <script type="text/javascript" src="../../dojo.js" djConfig="isDebug: true"></script> + <script type="text/javascript" src="../../dnd/Mover.js"></script> + <script type="text/javascript" src="../../dnd/Moveable.js"></script> + <script type="text/javascript" src="../../dnd/move.js"></script> + <script type="text/javascript"> + dojo.require("dojo.dnd.move"); + var m1, m2; + var init = function(){ + m1 = new dojo.dnd.Moveable("moveable1", {handle: "handle1"}); + m2 = new dojo.dnd.Moveable("moveable2"); + m3 = new dojo.dnd.Moveable("moveable3"); + + dojo.subscribe("/dnd/move/start", function(mover){ + console.debug("Start move", mover); + }); + dojo.subscribe("/dnd/move/stop", function(mover){ + console.debug("Stop move", mover); + }); + + dojo.connect(m1, "onMoveStart", function(mover){ + console.debug("Start moving m1", mover); + }); + dojo.connect(m1, "onMoveStop", function(mover){ + console.debug("Stop moving m1", mover); + }); + }; + dojo.addOnLoad(init); + </script> +</head> +<body> + <h1>Dojo Moveable test</h1> + <h2>1st run</h2> + <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent erat. In malesuada ultricies velit. Vestibulum tempor odio vitae diam. Morbi arcu lectus, laoreet eget, nonummy at, elementum a, quam. Pellentesque ac lacus. Cras quis est. Etiam suscipit, quam at eleifend nonummy, elit nunc sollicitudin tellus, at mattis est ligula interdum urna. Vivamus id augue sed mi consectetuer dictum. Suspendisse dapibus elit non urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam gravida dapibus ante. Nam viverra ligula in neque. Nullam at metus. Aenean ipsum.</p> + <p>Mauris vulputate elit a risus. Praesent pellentesque velit ac neque. Fusce ultrices augue vitae orci. Proin a ante. Nulla consectetuer arcu quis est. Suspendisse potenti. Aliquam erat volutpat. Morbi purus augue, eleifend eu, consectetuer sed, tristique ut, wisi. Cras ac tellus. Phasellus adipiscing, libero ac consequat volutpat, ligula purus mollis lectus, ac porttitor ipsum diam non urna. Donec lorem. Pellentesque diam tortor, posuere et, placerat vitae, iaculis et, sapien. Proin sodales vehicula purus. Quisque bibendum mi ac mauris. Quisque tellus. Morbi sagittis. Integer euismod rhoncus augue. Ut accumsan. Curabitur quis tellus sit amet odio ultricies tristique. Etiam malesuada.</p> + <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec est. Cras semper nunc ut metus. Pellentesque blandit pede at erat. Quisque nonummy leo id metus. Donec mi mi, viverra id, adipiscing vitae, consectetuer ut, elit. In lectus augue, porttitor quis, viverra id, dignissim id, leo. Maecenas sapien. Nam adipiscing sem. Aenean ligula. Etiam vel velit. In mollis cursus dolor. Suspendisse ac nibh id leo tempor posuere. Aliquam sapien tellus, elementum non, aliquam sed, luctus eu, augue. Aliquam elementum leo nec enim. Donec ornare sagittis magna. Mauris ac tellus.</p> + <p>Duis ac augue rhoncus neque adipiscing feugiat. Donec pulvinar sem vitae neque. Donec commodo metus at ipsum. Cras vel magna vehicula lorem varius consequat. Morbi at enim vitae lectus mollis sodales. Sed tincidunt quam ut mi varius hendrerit. Sed porta arcu non libero. Quisque et wisi. Pellentesque lobortis. Ut enim felis, varius vitae, ornare quis, auctor ut, risus. Ut porta lorem vel quam. Etiam nunc purus, consectetuer non, lobortis eu, fermentum eu, magna. Aenean ultrices ante. Aliquam erat volutpat. Morbi quis velit eu mi sollicitudin lacinia. Suspendisse potenti. Donec lectus.</p> + <p>Quisque egestas turpis. Sed id ipsum id libero euismod nonummy. Nam sed dolor. Mauris in turpis. Duis nec wisi eget ante ultrices varius. Ut eget neque. Suspendisse sagittis iaculis tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus at justo. Donec imperdiet, elit et commodo bibendum, leo augue pellentesque arcu, ac dapibus lorem nulla eget erat. In viverra, tellus eu luctus eleifend, urna nibh lobortis sapien, ac pulvinar massa enim vel turpis. Sed orci neque, sagittis eu, mattis vitae, rutrum condimentum, leo. Fusce wisi odio, convallis at, condimentum vel, imperdiet id, mi. Mauris semper, magna pretium consectetuer sollicitudin, eros enim vehicula risus, eu ultrices turpis quam at wisi. Nam mollis.</p> + <table id="moveable1"> + <tr><td id="handle1" colspan="2">You can drag the table using this handle.</td></tr> + <tr><td>1</td><td>Lorem ipsum dolor sit amet...</td></tr> + <tr><td>2</td><td>Mauris vulputate elit a risus...</td></tr> + <tr><td>3</td><td>Pellentesque habitant morbi tristique senectus...</td></tr> + <tr><td>4</td><td>Duis ac augue rhoncus neque...</td></tr> + <tr><td>5</td><td>Quisque egestas turpis. Sed id...</td></tr> + </table> + <h2>2nd run</h2> + <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent erat. In malesuada ultricies velit. Vestibulum tempor odio vitae diam. Morbi arcu lectus, laoreet eget, nonummy at, elementum a, quam. Pellentesque ac lacus. Cras quis est. Etiam suscipit, quam at eleifend nonummy, elit nunc sollicitudin tellus, at mattis est ligula interdum urna. Vivamus id augue sed mi consectetuer dictum. Suspendisse dapibus elit non urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam gravida dapibus ante. Nam viverra ligula in neque. Nullam at metus. Aenean ipsum.</p> + <p>Mauris vulputate elit a risus. Praesent pellentesque velit ac neque. Fusce ultrices augue vitae orci. Proin a ante. Nulla consectetuer arcu quis est. Suspendisse potenti. Aliquam erat volutpat. Morbi purus augue, eleifend eu, consectetuer sed, tristique ut, wisi. Cras ac tellus. Phasellus adipiscing, libero ac consequat volutpat, ligula purus mollis lectus, ac porttitor ipsum diam non urna. Donec lorem. Pellentesque diam tortor, posuere et, placerat vitae, iaculis et, sapien. Proin sodales vehicula purus. Quisque bibendum mi ac mauris. Quisque tellus. Morbi sagittis. Integer euismod rhoncus augue. Ut accumsan. Curabitur quis tellus sit amet odio ultricies tristique. Etiam malesuada.</p> + <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec est. Cras semper nunc ut metus. Pellentesque blandit pede at erat. Quisque nonummy leo id metus. Donec mi mi, viverra id, adipiscing vitae, consectetuer ut, elit. In lectus augue, porttitor quis, viverra id, dignissim id, leo. Maecenas sapien. Nam adipiscing sem. Aenean ligula. Etiam vel velit. In mollis cursus dolor. Suspendisse ac nibh id leo tempor posuere. Aliquam sapien tellus, elementum non, aliquam sed, luctus eu, augue. Aliquam elementum leo nec enim. Donec ornare sagittis magna. Mauris ac tellus.</p> + <p>Duis ac augue rhoncus neque adipiscing feugiat. Donec pulvinar sem vitae neque. Donec commodo metus at ipsum. Cras vel magna vehicula lorem varius consequat. Morbi at enim vitae lectus mollis sodales. Sed tincidunt quam ut mi varius hendrerit. Sed porta arcu non libero. Quisque et wisi. Pellentesque lobortis. Ut enim felis, varius vitae, ornare quis, auctor ut, risus. Ut porta lorem vel quam. Etiam nunc purus, consectetuer non, lobortis eu, fermentum eu, magna. Aenean ultrices ante. Aliquam erat volutpat. Morbi quis velit eu mi sollicitudin lacinia. Suspendisse potenti. Donec lectus.</p> + <p>Quisque egestas turpis. Sed id ipsum id libero euismod nonummy. Nam sed dolor. Mauris in turpis. Duis nec wisi eget ante ultrices varius. Ut eget neque. Suspendisse sagittis iaculis tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus at justo. Donec imperdiet, elit et commodo bibendum, leo augue pellentesque arcu, ac dapibus lorem nulla eget erat. In viverra, tellus eu luctus eleifend, urna nibh lobortis sapien, ac pulvinar massa enim vel turpis. Sed orci neque, sagittis eu, mattis vitae, rutrum condimentum, leo. Fusce wisi odio, convallis at, condimentum vel, imperdiet id, mi. Mauris semper, magna pretium consectetuer sollicitudin, eros enim vehicula risus, eu ultrices turpis quam at wisi. Nam mollis.</p> + <div id="moveable2"> + <div>You can drag this whole object around.</div> + <div id="moveable3">You can move this paragraph. It is relatively positioned.</div> + </div> +</body> +</html> diff --git a/includes/js/dojo/tests/dnd/test_moveable_markup.html b/includes/js/dojo/tests/dnd/test_moveable_markup.html new file mode 100644 index 0000000..1f63d13 --- /dev/null +++ b/includes/js/dojo/tests/dnd/test_moveable_markup.html @@ -0,0 +1,83 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>Dojo Moveable markup test</title> + <style type="text/css"> + @import "../../resources/dojo.css"; + @import "dndDefault.css"; + + body { + padding: 1em; + color:#666; + background-color:#dedede; + } + + #moveable1 { + background: #fff; + border: 1px solid black; + padding:8px; + } + #handle1 { + background: #333; + color: #fff; + font-weight:bold; + cursor: pointer; + border: 1px solid black; + } + #moveable2 { + background: #fff; + position: absolute; + width: 200px; + height: 200px; + left: 100px; + top: 100px; + padding: 10px 20px; + margin: 10px 20px; + border: 10px solid black; + cursor: pointer; + radius:8pt; + -moz-border-radius:8pt 8pt; + } + </style> + <script type="text/javascript" src="../../dojo.js" djConfig="isDebug: true, parseOnLoad: true"></script> + <script type="text/javascript" src="../../dnd/move.js"></script> + <script type="text/javascript"> + dojo.require("dojo.parser"); + dojo.require("dojo.dnd.move"); + + dojo.addOnLoad(function(){ + dojo.subscribe("/dnd/move/start", function(node){ + console.debug("Start move", node); + }); + + dojo.subscribe("/dnd/move/stop", function(node){ + console.debug("Stop move", node); + }); + }); + </script> +</head> +<body> + <h1>Dojo Moveable markup test</h1> + <h2>1st run</h2> + <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent erat. In malesuada ultricies velit. Vestibulum tempor odio vitae diam. Morbi arcu lectus, laoreet eget, nonummy at, elementum a, quam. Pellentesque ac lacus. Cras quis est. Etiam suscipit, quam at eleifend nonummy, elit nunc sollicitudin tellus, at mattis est ligula interdum urna. Vivamus id augue sed mi consectetuer dictum. Suspendisse dapibus elit non urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam gravida dapibus ante. Nam viverra ligula in neque. Nullam at metus. Aenean ipsum.</p> + <p>Mauris vulputate elit a risus. Praesent pellentesque velit ac neque. Fusce ultrices augue vitae orci. Proin a ante. Nulla consectetuer arcu quis est. Suspendisse potenti. Aliquam erat volutpat. Morbi purus augue, eleifend eu, consectetuer sed, tristique ut, wisi. Cras ac tellus. Phasellus adipiscing, libero ac consequat volutpat, ligula purus mollis lectus, ac porttitor ipsum diam non urna. Donec lorem. Pellentesque diam tortor, posuere et, placerat vitae, iaculis et, sapien. Proin sodales vehicula purus. Quisque bibendum mi ac mauris. Quisque tellus. Morbi sagittis. Integer euismod rhoncus augue. Ut accumsan. Curabitur quis tellus sit amet odio ultricies tristique. Etiam malesuada.</p> + <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec est. Cras semper nunc ut metus. Pellentesque blandit pede at erat. Quisque nonummy leo id metus. Donec mi mi, viverra id, adipiscing vitae, consectetuer ut, elit. In lectus augue, porttitor quis, viverra id, dignissim id, leo. Maecenas sapien. Nam adipiscing sem. Aenean ligula. Etiam vel velit. In mollis cursus dolor. Suspendisse ac nibh id leo tempor posuere. Aliquam sapien tellus, elementum non, aliquam sed, luctus eu, augue. Aliquam elementum leo nec enim. Donec ornare sagittis magna. Mauris ac tellus.</p> + <p>Duis ac augue rhoncus neque adipiscing feugiat. Donec pulvinar sem vitae neque. Donec commodo metus at ipsum. Cras vel magna vehicula lorem varius consequat. Morbi at enim vitae lectus mollis sodales. Sed tincidunt quam ut mi varius hendrerit. Sed porta arcu non libero. Quisque et wisi. Pellentesque lobortis. Ut enim felis, varius vitae, ornare quis, auctor ut, risus. Ut porta lorem vel quam. Etiam nunc purus, consectetuer non, lobortis eu, fermentum eu, magna. Aenean ultrices ante. Aliquam erat volutpat. Morbi quis velit eu mi sollicitudin lacinia. Suspendisse potenti. Donec lectus.</p> + <p>Quisque egestas turpis. Sed id ipsum id libero euismod nonummy. Nam sed dolor. Mauris in turpis. Duis nec wisi eget ante ultrices varius. Ut eget neque. Suspendisse sagittis iaculis tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus at justo. Donec imperdiet, elit et commodo bibendum, leo augue pellentesque arcu, ac dapibus lorem nulla eget erat. In viverra, tellus eu luctus eleifend, urna nibh lobortis sapien, ac pulvinar massa enim vel turpis. Sed orci neque, sagittis eu, mattis vitae, rutrum condimentum, leo. Fusce wisi odio, convallis at, condimentum vel, imperdiet id, mi. Mauris semper, magna pretium consectetuer sollicitudin, eros enim vehicula risus, eu ultrices turpis quam at wisi. Nam mollis.</p> + <table id="moveable1" dojoType="dojo.dnd.Moveable" handle="handle1"> + <tr><td id="handle1" colspan="2">You can drag the table using this handle.</td></tr> + <tr><td>1</td><td>Lorem ipsum dolor sit amet...</td></tr> + <tr><td>2</td><td>Mauris vulputate elit a risus...</td></tr> + <tr><td>3</td><td>Pellentesque habitant morbi tristique senectus...</td></tr> + <tr><td>4</td><td>Duis ac augue rhoncus neque...</td></tr> + <tr><td>5</td><td>Quisque egestas turpis. Sed id...</td></tr> + </table> + <h2>2nd run</h2> + <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent erat. In malesuada ultricies velit. Vestibulum tempor odio vitae diam. Morbi arcu lectus, laoreet eget, nonummy at, elementum a, quam. Pellentesque ac lacus. Cras quis est. Etiam suscipit, quam at eleifend nonummy, elit nunc sollicitudin tellus, at mattis est ligula interdum urna. Vivamus id augue sed mi consectetuer dictum. Suspendisse dapibus elit non urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam gravida dapibus ante. Nam viverra ligula in neque. Nullam at metus. Aenean ipsum.</p> + <p>Mauris vulputate elit a risus. Praesent pellentesque velit ac neque. Fusce ultrices augue vitae orci. Proin a ante. Nulla consectetuer arcu quis est. Suspendisse potenti. Aliquam erat volutpat. Morbi purus augue, eleifend eu, consectetuer sed, tristique ut, wisi. Cras ac tellus. Phasellus adipiscing, libero ac consequat volutpat, ligula purus mollis lectus, ac porttitor ipsum diam non urna. Donec lorem. Pellentesque diam tortor, posuere et, placerat vitae, iaculis et, sapien. Proin sodales vehicula purus. Quisque bibendum mi ac mauris. Quisque tellus. Morbi sagittis. Integer euismod rhoncus augue. Ut accumsan. Curabitur quis tellus sit amet odio ultricies tristique. Etiam malesuada.</p> + <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec est. Cras semper nunc ut metus. Pellentesque blandit pede at erat. Quisque nonummy leo id metus. Donec mi mi, viverra id, adipiscing vitae, consectetuer ut, elit. In lectus augue, porttitor quis, viverra id, dignissim id, leo. Maecenas sapien. Nam adipiscing sem. Aenean ligula. Etiam vel velit. In mollis cursus dolor. Suspendisse ac nibh id leo tempor posuere. Aliquam sapien tellus, elementum non, aliquam sed, luctus eu, augue. Aliquam elementum leo nec enim. Donec ornare sagittis magna. Mauris ac tellus.</p> + <p>Duis ac augue rhoncus neque adipiscing feugiat. Donec pulvinar sem vitae neque. Donec commodo metus at ipsum. Cras vel magna vehicula lorem varius consequat. Morbi at enim vitae lectus mollis sodales. Sed tincidunt quam ut mi varius hendrerit. Sed porta arcu non libero. Quisque et wisi. Pellentesque lobortis. Ut enim felis, varius vitae, ornare quis, auctor ut, risus. Ut porta lorem vel quam. Etiam nunc purus, consectetuer non, lobortis eu, fermentum eu, magna. Aenean ultrices ante. Aliquam erat volutpat. Morbi quis velit eu mi sollicitudin lacinia. Suspendisse potenti. Donec lectus.</p> + <p>Quisque egestas turpis. Sed id ipsum id libero euismod nonummy. Nam sed dolor. Mauris in turpis. Duis nec wisi eget ante ultrices varius. Ut eget neque. Suspendisse sagittis iaculis tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus at justo. Donec imperdiet, elit et commodo bibendum, leo augue pellentesque arcu, ac dapibus lorem nulla eget erat. In viverra, tellus eu luctus eleifend, urna nibh lobortis sapien, ac pulvinar massa enim vel turpis. Sed orci neque, sagittis eu, mattis vitae, rutrum condimentum, leo. Fusce wisi odio, convallis at, condimentum vel, imperdiet id, mi. Mauris semper, magna pretium consectetuer sollicitudin, eros enim vehicula risus, eu ultrices turpis quam at wisi. Nam mollis.</p> + <div id="moveable2" dojoType="dojo.dnd.Moveable">You can drag this whole paragraph around.</div> +</body> +</html> diff --git a/includes/js/dojo/tests/dnd/test_params.html b/includes/js/dojo/tests/dnd/test_params.html new file mode 100644 index 0000000..1be540c --- /dev/null +++ b/includes/js/dojo/tests/dnd/test_params.html @@ -0,0 +1,61 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>Dojo DnD optional parameters test</title> + <style type="text/css"> + @import "../../resources/dojo.css"; + + body { + padding: 1em; + } + + .moveable { + background: #FFFFBF; + border: 1px solid black; + width: 300px; + padding: 10px 20px; + cursor: pointer; + } + </style> + <script type="text/javascript" src="../../dojo.js" djConfig="isDebug: true"></script> + <script type="text/javascript" src="../../dnd/move.js"></script> + <script type="text/javascript"> + dojo.require("dojo.dnd.move"); + var m1, m2, m3, m4; + var init = function(){ + m1 = new dojo.dnd.Moveable("moveable1"); + m2 = new dojo.dnd.Moveable("moveable2", {delay: 10}); + m3 = new dojo.dnd.Moveable("moveable3"); + m4 = new dojo.dnd.Moveable("moveable4", {skip: true}); + }; + dojo.addOnLoad(init); + </script> +</head> +<body> + <h1>Dojo DnD optional parameters test</h1> + <p class="moveable" id="moveable1"><strong>Normal paragraph:</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris augue augue, condimentum nec, viverra et, porttitor sit amet, ligula. Cras malesuada sollicitudin risus. Praesent tincidunt nunc ut enim. Aliquam sit amet libero ac lorem ornare vulputate. Nulla a mauris cursus erat rutrum condimentum. Vivamus sit amet pede in felis sodales adipiscing. Curabitur arcu turpis, pharetra ac, porttitor ac, ultrices nec, quam. Donec feugiat purus eu nulla. Aenean mattis tellus vel nulla. Pellentesque vitae quam. Vestibulum scelerisque, eros nec imperdiet interdum, sapien quam accumsan libero, at vestibulum risus purus ut quam. Nam mattis, lorem vel rhoncus pulvinar, augue nibh rhoncus felis, et elementum felis dolor vitae justo. Nullam felis augue, ultricies ac, laoreet sed, lobortis in, neque. Vivamus nunc quam, dictum at, egestas et, fringilla non, magna.</p> + <p class="moveable" id="moveable2"><strong>Delayed move by 10px:</strong> Quisque at urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Pellentesque ante sem, ullamcorper in, ornare vitae, placerat id, velit. Ut ut tortor vitae lectus dignissim fringilla. Praesent urna enim, laoreet in, lobortis eget, porttitor eget, lacus. Suspendisse et enim. Duis semper nulla a felis. Duis dolor odio, ultrices et, lobortis sed, posuere eu, dolor. Duis est. Nam laoreet. Sed vehicula augue aliquam tortor.</p> + <p class="moveable" id="moveable3"><strong>With form elements:</strong> + <a href="http://dojotoolkit.org">dojotoolkit</a><br /> + <input type="button" value="Button" /> + <input type="text" value="abc" /> + <input type="checkbox" checked /> + <input type="radio" /> + <select> + <option value="1">one</option> + <option value="2">two</option> + </select> + </p> + <p class="moveable" id="moveable4"><strong>With form elements and skip setting:</strong> + <a href="http://dojotoolkit.org">dojotoolkit</a> + <input type="button" value="Button" /> + <input type="text" value="abc" /> + <input type="checkbox" checked /> + <input type="radio" /> + <select> + <option value="1">one</option> + <option value="2">two</option> + </select> + </p> +</body> +</html> diff --git a/includes/js/dojo/tests/dnd/test_parent_constraints.html b/includes/js/dojo/tests/dnd/test_parent_constraints.html new file mode 100644 index 0000000..a814a06 --- /dev/null +++ b/includes/js/dojo/tests/dnd/test_parent_constraints.html @@ -0,0 +1,53 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>Dojo parent constraint test</title> + <style type="text/css"> + @import "../../resources/dojo.css"; + + body { + padding: 1em; + } + + .moveable { + background: #FFFFBF; + border: 1px solid black; + width: 300px; + padding: 10px 20px; + cursor: pointer; + } + + .parent { + background: #BFECFF; + border: 10px solid lightblue; + width: 500px; + height: 500px; + padding: 10px; + margin: 10px; + } + </style> + <script type="text/javascript" src="../../dojo.js" djConfig="isDebug: true"></script> + <script type="text/javascript" src="../../dnd/move.js"></script> + <script type="text/javascript"> + dojo.require("dojo.dnd.move"); + var m1, m2, m3, m4; + var init = function(){ + m1 = new dojo.dnd.move.parentConstrainedMoveable("moveable1", {area: "margin", within: true}); + m2 = new dojo.dnd.move.parentConstrainedMoveable("moveable2", {area: "border", within: true}); + m3 = new dojo.dnd.move.parentConstrainedMoveable("moveable3", {area: "padding", within: true}); + m4 = new dojo.dnd.move.parentConstrainedMoveable("moveable4", {area: "content", within: true}); + }; + dojo.addOnLoad(init); + </script> +</head> +<body> + <h1>Dojo parent constraint test</h1> + <div class="parent" id="parent"> + <div><strong>This is the parent element.</strong> All children will be restricted with <strong>within = true</strong>.</div> + <div class="moveable" id="moveable1">I am restricted within my parent's margins.</div> + <div class="moveable" id="moveable2">I am restricted within my parent's border.</div> + <div class="moveable" id="moveable3">I am restricted within my parent's paddings.</div> + <div class="moveable" id="moveable4">I am restricted within my parent's content.</div> + </div> +</body> +</html> diff --git a/includes/js/dojo/tests/dnd/test_parent_constraints_margins.html b/includes/js/dojo/tests/dnd/test_parent_constraints_margins.html new file mode 100644 index 0000000..3ee455c --- /dev/null +++ b/includes/js/dojo/tests/dnd/test_parent_constraints_margins.html @@ -0,0 +1,51 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <title>Dojo parent constraint test</title>
+ <style type="text/css">
+ @import "../../resources/dojo.css";
+
+ body {
+ padding: 1em;
+ }
+
+ .moveable {
+ background: #FFFFBF;
+ border: 1px solid black;
+ width: 300px;
+ padding: 10px 20px;
+ cursor: pointer;
+ margin: 20px;
+ }
+
+ .parent {
+ background: #BFECFF;
+ border: 10px solid lightblue;
+ width: 500px;
+ height: 500px;
+ padding: 10px;
+ margin: 10px;
+ overflow: hidden;
+ }
+ </style>
+ <script type="text/javascript" src="../../dojo.js" djConfig="isDebug: true"></script>
+ <script type="text/javascript" src="../../dnd/move.js"></script>
+ <script type="text/javascript">
+ dojo.require("dojo.dnd.move");
+ var m7, m8;
+ var init = function(){
+ m7 = new dojo.dnd.move.parentConstrainedMoveable("moveable7", {area: "margin"});
+ m8 = new dojo.dnd.move.parentConstrainedMoveable("moveable8", {area: "margin", within: true});
+ };
+ dojo.addOnLoad(init);
+ </script>
+</head>
+<body>
+ <h1>Dojo parent constraint test</h1>
+ <div class="parent" id="parent">
+ <div><strong>This is the parent element.</strong></div>
+ <div class="moveable" id="moveable7"><strong>Paragraph restricted to its parent element:</strong> Sed hendrerit ornare justo. Maecenas ac urna. Maecenas in leo in tortor tincidunt pellentesque. Vivamus augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer eget ipsum vitae quam condimentum tempus. Phasellus augue tortor, pretium nec, bibendum eget, eleifend eget, quam. Nam sem mauris, volutpat eget, ultricies in, consequat nec, tortor. Nulla eleifend. Vivamus et purus ultricies turpis vehicula auctor.</div>
+ <div class="moveable" id="moveable8"><strong>Paragraph restricted to its parent element (cannot go outside):</strong> Nam nibh. Mauris neque sem, pharetra ac, gravida ac, ultricies eget, quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vivamus scelerisque molestie mi. Duis eget ligula nec justo interdum hendrerit. Curabitur tempor convallis enim. In quis lorem. Proin nonummy consectetuer ligula. Curabitur tempor adipiscing lorem. Maecenas vitae nunc. Aliquam et magna. In vestibulum justo eleifend ante. Nulla pede sem, tempus tincidunt, vehicula ut, tempor et, nisi. Nulla ut lorem. Aliquam erat volutpat. Proin sodales, elit ut molestie dignissim, quam neque vulputate felis, quis scelerisque magna arcu aliquet lacus. Vivamus blandit. Nam eu mi vel augue pharetra semper.</div>
+ </div>
+</body>
+</html>
diff --git a/includes/js/dojo/tests/dnd/test_selector.html b/includes/js/dojo/tests/dnd/test_selector.html new file mode 100644 index 0000000..bebdca9 --- /dev/null +++ b/includes/js/dojo/tests/dnd/test_selector.html @@ -0,0 +1,80 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>Dojo DnD selector test</title> + <style type="text/css"> + @import "../../resources/dojo.css"; + @import "dndDefault.css"; + + body { padding: 20px; } + </style> + <script type="text/javascript" src="../../dojo.js" djConfig="isDebug: true"></script> + <script type="text/javascript" src="../../dnd/common.js"></script> + <script type="text/javascript" src="../../dnd/Container.js"></script> + <script type="text/javascript" src="../../dnd/Selector.js"></script> + <script type="text/javascript"> + //dojo.require("dojo.dnd.Selector"); + var c1, c2, c3, c4, c5; + var init = function(){ + c1 = new dojo.dnd.Selector(dojo.byId("container1"), {singular: true}); + c2 = new dojo.dnd.Selector(dojo.byId("container2")); + c3 = new dojo.dnd.Selector(dojo.byId("container3")); + c4 = new dojo.dnd.Selector(dojo.byId("container4")); + c5 = new dojo.dnd.Selector(dojo.byId("container5")); + }; + dojo.addOnLoad(init); + </script> +</head> +<body> + <h1>Dojo DnD selector test</h1> + <p>Containers have a notion of a "current container", and one element can be "current". All containers on this page are selectors that allow to select elements.</p> + <p>Following selection modes are supported by default:</p> + <ul> + <li>Simple click — selects a single element, all other elements will be unselected.</li> + <li>Ctrl+click — toggles a selection state of an element (use Meta key on Mac).</li> + <li>Shift+click — selects a range of elements from the previous anchor to the current element.</li> + <li>Ctrl+Shift+click — adds a range of elements from the previous anchor to the current element (use Meta key on Mac).</li> + </ul> + <h2>DIV selector</h2> + <p>This selector can select just one element a time. It was specified during the creation time.</p> + <div id="container1" class="container"> + <div class="dojoDndItem">Item 1</div> + <div class="dojoDndItem">Item 2</div> + <div class="dojoDndItem">Item 3</div> + </div> + <h2>UL selector</h2> + <ul id="container2" class="container"> + <li class="dojoDndItem">Item 1</li> + <li class="dojoDndItem">Item 2</li> + <li class="dojoDndItem">Item 3</li> + </ul> + <h2>OL selector</h2> + <ol id="container3" class="container"> + <li class="dojoDndItem">Item 1</li> + <li class="dojoDndItem">Item 2</li> + <li class="dojoDndItem">Item 3</li> + </ol> + <h2>TABLE selector</h2> + <table id="container4" class="container" border="1px solid black"> + <tr class="dojoDndItem"> + <td>A</td> + <td>row 1</td> + </tr> + <tr class="dojoDndItem"> + <td>B</td> + <td>row 2</td> + </tr> + <tr class="dojoDndItem"> + <td>C</td> + <td>row 3</td> + </tr> + </table> + <h2>P selector with SPAN elements</h2> + <p>Elements of this container are layed out horizontally.</p> + <p id="container5" class="container"> + <span class="dojoDndItem"> Item 1 </span> + <span class="dojoDndItem"> Item 2 </span> + <span class="dojoDndItem"> Item 3 </span> + </p> +</body> +</html> diff --git a/includes/js/dojo/tests/dnd/test_selector_markup.html b/includes/js/dojo/tests/dnd/test_selector_markup.html new file mode 100644 index 0000000..43c8e9c --- /dev/null +++ b/includes/js/dojo/tests/dnd/test_selector_markup.html @@ -0,0 +1,71 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>Dojo DnD markup selector test</title> + <style type="text/css"> + @import "../../resources/dojo.css"; + @import "dndDefault.css"; + + body { padding: 20px; } + </style> + <script type="text/javascript" src="../../dojo.js" djConfig="isDebug: true, parseOnLoad: true"></script> + <script type="text/javascript" src="../../dnd/Selector.js"></script> + <script type="text/javascript"> + dojo.require("dojo.parser"); + dojo.require("dojo.dnd.Selector"); + </script> +</head> +<body> + <h1>Dojo DnD markup selector test</h1> + <p>This example is functionally equivalent to <a href="test_selector.html">test_selector.html</a> example but is done using the Dojo markup.</p> + <p>Containers have a notion of a "current container", and one element can be "current". All containers on this page are selectors that allow to select elements.</p> + <p>Following selection modes are supported by default:</p> + <ul> + <li>Simple click — selects a single element, all other elements will be unselected.</li> + <li>Ctrl+click — toggles a selection state of an element (use Meta key on Mac).</li> + <li>Shift+click — selects a range of elements from the previous anchor to the current element.</li> + <li>Ctrl+Shift+click — adds a range of elements from the previous anchor to the current element (use Meta key on Mac).</li> + </ul> + <h2>DIV selector</h2> + <p>This selector can select just one element a time. It was specified during the creation time.</p> + <div dojoType="dojo.dnd.Selector" jsId="c1" singular="true" class="container"> + <div class="dojoDndItem">Item 1</div> + <div class="dojoDndItem">Item 2</div> + <div class="dojoDndItem">Item 3</div> + </div> + <h2>UL selector</h2> + <ul dojoType="dojo.dnd.Selector" jsId="c2" class="container"> + <li class="dojoDndItem">Item 1</li> + <li class="dojoDndItem">Item 2</li> + <li class="dojoDndItem">Item 3</li> + </ul> + <h2>OL selector</h2> + <ol dojoType="dojo.dnd.Selector" jsId="c3" class="container"> + <li class="dojoDndItem">Item 1</li> + <li class="dojoDndItem">Item 2</li> + <li class="dojoDndItem">Item 3</li> + </ol> + <h2>TABLE selector</h2> + <table dojoType="dojo.dnd.Selector" jsId="c4" class="container" border="1px solid black"> + <tr class="dojoDndItem"> + <td>A</td> + <td>row 1</td> + </tr> + <tr class="dojoDndItem"> + <td>B</td> + <td>row 2</td> + </tr> + <tr class="dojoDndItem"> + <td>C</td> + <td>row 3</td> + </tr> + </table> + <h2>P selector with SPAN elements</h2> + <p>Elements of this container are layed out horizontally.</p> + <p dojoType="dojo.dnd.Selector" jsId="c5" class="container"> + <span class="dojoDndItem"> Item 1 </span> + <span class="dojoDndItem"> Item 2 </span> + <span class="dojoDndItem"> Item 3 </span> + </p> +</body> +</html> diff --git a/includes/js/dojo/tests/dnd/test_timed_moveable.html b/includes/js/dojo/tests/dnd/test_timed_moveable.html new file mode 100644 index 0000000..685067e --- /dev/null +++ b/includes/js/dojo/tests/dnd/test_timed_moveable.html @@ -0,0 +1,112 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>Dojo TimedMoveable test</title> + <style type="text/css"> + @import "../../resources/dojo.css"; + @import "dndDefault.css"; + + body { + padding: 1em; + color:#666; + background-color:#dedede; + } + + #moveable1 { + background: #fff; + border: 1px solid black; + padding:8px; + } + #handle1 { + background: #333; + color: #fff; + font-weight:bold; + cursor: pointer; + border: 1px solid black; + } + #moveable2 { + background: #fff; + position: absolute; + width: 200px; + height: 200px; + left: 100px; + top: 100px; + padding: 10px 20px; + margin: 10px 20px; + border: 10px solid black; + cursor: pointer; + radius:8pt; + -moz-border-radius:8pt 8pt; + } + #moveable3 { + background: #fff; + position: absolute; + width: 200px; + height: 200px; + left: 350px; + top: 350px; + padding: 10px 20px; + margin: 10px 20px; + border: 10px solid green; + cursor: pointer; + radius:8pt; + -moz-border-radius:8pt 8pt; + } + </style> + <script type="text/javascript" src="../../dojo.js" djConfig="isDebug: true"></script> + <script type="text/javascript" src="../../dnd/Mover.js"></script> + <script type="text/javascript" src="../../dnd/Moveable.js"></script> + <script type="text/javascript" src="../../dnd/TimedMoveable.js"></script> + <script type="text/javascript" src="../../dnd/move.js"></script> + <script type="text/javascript"> + dojo.require("dojo.dnd.TimedMoveable"); + var m1, m2; + var init = function(){ + m1 = new dojo.dnd.TimedMoveable("moveable1", {handle: "handle1"}); + m2 = new dojo.dnd.TimedMoveable("moveable2"); + m3 = new dojo.dnd.TimedMoveable("moveable3", {timeout: 500}); + + dojo.subscribe("/dnd/move/start", function(mover){ + console.debug("Start move", mover); + }); + dojo.subscribe("/dnd/move/stop", function(mover){ + console.debug("Stop move", mover); + }); + + dojo.connect(m1, "onMoveStart", function(mover){ + console.debug("Start moving m1", mover); + }); + dojo.connect(m1, "onMoveStop", function(mover){ + console.debug("Stop moving m1", mover); + }); + }; + dojo.addOnLoad(init); + </script> +</head> +<body> + <h1>Dojo TimedMoveable test</h1> + <p>One moveable (specially marked) is delayed by 500ms (2 fps). Other two are delayed by 40ms (25 fps) — this is the default value.</p> + <h2>1st run</h2> + <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent erat. In malesuada ultricies velit. Vestibulum tempor odio vitae diam. Morbi arcu lectus, laoreet eget, nonummy at, elementum a, quam. Pellentesque ac lacus. Cras quis est. Etiam suscipit, quam at eleifend nonummy, elit nunc sollicitudin tellus, at mattis est ligula interdum urna. Vivamus id augue sed mi consectetuer dictum. Suspendisse dapibus elit non urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam gravida dapibus ante. Nam viverra ligula in neque. Nullam at metus. Aenean ipsum.</p> + <p>Mauris vulputate elit a risus. Praesent pellentesque velit ac neque. Fusce ultrices augue vitae orci. Proin a ante. Nulla consectetuer arcu quis est. Suspendisse potenti. Aliquam erat volutpat. Morbi purus augue, eleifend eu, consectetuer sed, tristique ut, wisi. Cras ac tellus. Phasellus adipiscing, libero ac consequat volutpat, ligula purus mollis lectus, ac porttitor ipsum diam non urna. Donec lorem. Pellentesque diam tortor, posuere et, placerat vitae, iaculis et, sapien. Proin sodales vehicula purus. Quisque bibendum mi ac mauris. Quisque tellus. Morbi sagittis. Integer euismod rhoncus augue. Ut accumsan. Curabitur quis tellus sit amet odio ultricies tristique. Etiam malesuada.</p> + <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec est. Cras semper nunc ut metus. Pellentesque blandit pede at erat. Quisque nonummy leo id metus. Donec mi mi, viverra id, adipiscing vitae, consectetuer ut, elit. In lectus augue, porttitor quis, viverra id, dignissim id, leo. Maecenas sapien. Nam adipiscing sem. Aenean ligula. Etiam vel velit. In mollis cursus dolor. Suspendisse ac nibh id leo tempor posuere. Aliquam sapien tellus, elementum non, aliquam sed, luctus eu, augue. Aliquam elementum leo nec enim. Donec ornare sagittis magna. Mauris ac tellus.</p> + <p>Duis ac augue rhoncus neque adipiscing feugiat. Donec pulvinar sem vitae neque. Donec commodo metus at ipsum. Cras vel magna vehicula lorem varius consequat. Morbi at enim vitae lectus mollis sodales. Sed tincidunt quam ut mi varius hendrerit. Sed porta arcu non libero. Quisque et wisi. Pellentesque lobortis. Ut enim felis, varius vitae, ornare quis, auctor ut, risus. Ut porta lorem vel quam. Etiam nunc purus, consectetuer non, lobortis eu, fermentum eu, magna. Aenean ultrices ante. Aliquam erat volutpat. Morbi quis velit eu mi sollicitudin lacinia. Suspendisse potenti. Donec lectus.</p> + <p>Quisque egestas turpis. Sed id ipsum id libero euismod nonummy. Nam sed dolor. Mauris in turpis. Duis nec wisi eget ante ultrices varius. Ut eget neque. Suspendisse sagittis iaculis tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus at justo. Donec imperdiet, elit et commodo bibendum, leo augue pellentesque arcu, ac dapibus lorem nulla eget erat. In viverra, tellus eu luctus eleifend, urna nibh lobortis sapien, ac pulvinar massa enim vel turpis. Sed orci neque, sagittis eu, mattis vitae, rutrum condimentum, leo. Fusce wisi odio, convallis at, condimentum vel, imperdiet id, mi. Mauris semper, magna pretium consectetuer sollicitudin, eros enim vehicula risus, eu ultrices turpis quam at wisi. Nam mollis.</p> + <table id="moveable1"> + <tr><td id="handle1" colspan="2">You can drag the table using this handle.</td></tr> + <tr><td>1</td><td>Lorem ipsum dolor sit amet...</td></tr> + <tr><td>2</td><td>Mauris vulputate elit a risus...</td></tr> + <tr><td>3</td><td>Pellentesque habitant morbi tristique senectus...</td></tr> + <tr><td>4</td><td>Duis ac augue rhoncus neque...</td></tr> + <tr><td>5</td><td>Quisque egestas turpis. Sed id...</td></tr> + </table> + <h2>2nd run</h2> + <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent erat. In malesuada ultricies velit. Vestibulum tempor odio vitae diam. Morbi arcu lectus, laoreet eget, nonummy at, elementum a, quam. Pellentesque ac lacus. Cras quis est. Etiam suscipit, quam at eleifend nonummy, elit nunc sollicitudin tellus, at mattis est ligula interdum urna. Vivamus id augue sed mi consectetuer dictum. Suspendisse dapibus elit non urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam gravida dapibus ante. Nam viverra ligula in neque. Nullam at metus. Aenean ipsum.</p> + <p>Mauris vulputate elit a risus. Praesent pellentesque velit ac neque. Fusce ultrices augue vitae orci. Proin a ante. Nulla consectetuer arcu quis est. Suspendisse potenti. Aliquam erat volutpat. Morbi purus augue, eleifend eu, consectetuer sed, tristique ut, wisi. Cras ac tellus. Phasellus adipiscing, libero ac consequat volutpat, ligula purus mollis lectus, ac porttitor ipsum diam non urna. Donec lorem. Pellentesque diam tortor, posuere et, placerat vitae, iaculis et, sapien. Proin sodales vehicula purus. Quisque bibendum mi ac mauris. Quisque tellus. Morbi sagittis. Integer euismod rhoncus augue. Ut accumsan. Curabitur quis tellus sit amet odio ultricies tristique. Etiam malesuada.</p> + <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec est. Cras semper nunc ut metus. Pellentesque blandit pede at erat. Quisque nonummy leo id metus. Donec mi mi, viverra id, adipiscing vitae, consectetuer ut, elit. In lectus augue, porttitor quis, viverra id, dignissim id, leo. Maecenas sapien. Nam adipiscing sem. Aenean ligula. Etiam vel velit. In mollis cursus dolor. Suspendisse ac nibh id leo tempor posuere. Aliquam sapien tellus, elementum non, aliquam sed, luctus eu, augue. Aliquam elementum leo nec enim. Donec ornare sagittis magna. Mauris ac tellus.</p> + <p>Duis ac augue rhoncus neque adipiscing feugiat. Donec pulvinar sem vitae neque. Donec commodo metus at ipsum. Cras vel magna vehicula lorem varius consequat. Morbi at enim vitae lectus mollis sodales. Sed tincidunt quam ut mi varius hendrerit. Sed porta arcu non libero. Quisque et wisi. Pellentesque lobortis. Ut enim felis, varius vitae, ornare quis, auctor ut, risus. Ut porta lorem vel quam. Etiam nunc purus, consectetuer non, lobortis eu, fermentum eu, magna. Aenean ultrices ante. Aliquam erat volutpat. Morbi quis velit eu mi sollicitudin lacinia. Suspendisse potenti. Donec lectus.</p> + <p>Quisque egestas turpis. Sed id ipsum id libero euismod nonummy. Nam sed dolor. Mauris in turpis. Duis nec wisi eget ante ultrices varius. Ut eget neque. Suspendisse sagittis iaculis tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus at justo. Donec imperdiet, elit et commodo bibendum, leo augue pellentesque arcu, ac dapibus lorem nulla eget erat. In viverra, tellus eu luctus eleifend, urna nibh lobortis sapien, ac pulvinar massa enim vel turpis. Sed orci neque, sagittis eu, mattis vitae, rutrum condimentum, leo. Fusce wisi odio, convallis at, condimentum vel, imperdiet id, mi. Mauris semper, magna pretium consectetuer sollicitudin, eros enim vehicula risus, eu ultrices turpis quam at wisi. Nam mollis.</p> + <div id="moveable2">You can drag this whole paragraph around.</div> + <div id="moveable3">My move is delayed by 500ms, which corresponds to 2 fps.</div> +</body> +</html> |