From e44a7e37b6c7b5961adaffc62b9042b8d442938e Mon Sep 17 00:00:00 2001 From: mensonge Date: Thu, 13 Nov 2008 09:49:11 +0000 Subject: 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 --- includes/js/dojo/tests/dnd/dndDefault.css | 52 +++++++ .../js/dojo/tests/dnd/dndDefault.css.commented.css | 69 +++++++++ includes/js/dojo/tests/dnd/flickr_viewer.html | 168 +++++++++++++++++++++ .../js/dojo/tests/dnd/test_box_constraints.html | 61 ++++++++ includes/js/dojo/tests/dnd/test_container.html | 74 +++++++++ .../js/dojo/tests/dnd/test_container_markup.html | 67 ++++++++ .../js/dojo/tests/dnd/test_custom_constraints.html | 51 +++++++ includes/js/dojo/tests/dnd/test_dnd.html | 130 ++++++++++++++++ includes/js/dojo/tests/dnd/test_dnd_handles.html | 65 ++++++++ includes/js/dojo/tests/dnd/test_form.html | 103 +++++++++++++ includes/js/dojo/tests/dnd/test_moveable.html | 106 +++++++++++++ .../js/dojo/tests/dnd/test_moveable_markup.html | 83 ++++++++++ includes/js/dojo/tests/dnd/test_params.html | 61 ++++++++ .../js/dojo/tests/dnd/test_parent_constraints.html | 53 +++++++ .../tests/dnd/test_parent_constraints_margins.html | 51 +++++++ includes/js/dojo/tests/dnd/test_selector.html | 80 ++++++++++ .../js/dojo/tests/dnd/test_selector_markup.html | 71 +++++++++ .../js/dojo/tests/dnd/test_timed_moveable.html | 112 ++++++++++++++ 18 files changed, 1457 insertions(+) create mode 100644 includes/js/dojo/tests/dnd/dndDefault.css create mode 100644 includes/js/dojo/tests/dnd/dndDefault.css.commented.css create mode 100644 includes/js/dojo/tests/dnd/flickr_viewer.html create mode 100644 includes/js/dojo/tests/dnd/test_box_constraints.html create mode 100644 includes/js/dojo/tests/dnd/test_container.html create mode 100644 includes/js/dojo/tests/dnd/test_container_markup.html create mode 100644 includes/js/dojo/tests/dnd/test_custom_constraints.html create mode 100644 includes/js/dojo/tests/dnd/test_dnd.html create mode 100644 includes/js/dojo/tests/dnd/test_dnd_handles.html create mode 100644 includes/js/dojo/tests/dnd/test_form.html create mode 100644 includes/js/dojo/tests/dnd/test_moveable.html create mode 100644 includes/js/dojo/tests/dnd/test_moveable_markup.html create mode 100644 includes/js/dojo/tests/dnd/test_params.html create mode 100644 includes/js/dojo/tests/dnd/test_parent_constraints.html create mode 100644 includes/js/dojo/tests/dnd/test_parent_constraints_margins.html create mode 100644 includes/js/dojo/tests/dnd/test_selector.html create mode 100644 includes/js/dojo/tests/dnd/test_selector_markup.html create mode 100644 includes/js/dojo/tests/dnd/test_timed_moveable.html (limited to 'includes/js/dojo/tests/dnd') 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 @@ + + + + Sort Flickr images by tags + + + + + + + + + + + + +

Sort Flickr images by tags

+

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.

+

Following selection modes are supported by default:

+ +

Following drop modes are supported by default:

+ +

Now scroll down and start dragging and dropping, rearrange images using DnD, copy and move them back!

+

Status: retrieving a list of Flickr images...

+
+
+ +
+
+

Tag: cat

+
+
+ +
+
+

Tag: dog

+
+
+ +
+
+ + 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 @@ + + + + Dojo box constraint test + + + + + + +

Dojo box constraint test

+

Paragraph restricted to (100,100:500,500) box: 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.

+

Paragraph restricted to (100,100:500,500) box, it cannot go outside of this box: 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.

+

Marked up paragraph restricted to (100,100:500,500) box: 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. +

+

Marked up paragraph restricted to (100,100:500,500) box, it cannot go outside of this box: 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. + + +

+ + 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 @@ + + + + Dojo DnD container test + + + + + + +

Dojo DnD container test

+

Containers have a notion of a "current container", and one element can be "current".

+

see dndDefault.css for example styling

+

DIV container

+
+
Item 1
+
Item 2
+
Item 3
+
+

UL container

+ +

OL container

+
    +
  1. Item 1
    2. +
  2. Item 2
    3. +
  3. Item 3
    4. +
+

TABLE container

+ + + + + + + + + + + + + +
Arow 1
Brow 2
Crow 3
+

P container with SPAN elements

+

Elements of this container are layed out horizontally.

+

+  Item 1  +  Item 2  +  Item 3  +

+ + 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 @@ + + + + Dojo DnD markup container test + + + + + + +

Dojo DnD markup container test

+

This example is functionally equivalent to test_container.html example but is done using the Dojo markup.

+

Containers have a notion of a "current container", and one element can be "current".

+

See dndDefault.css for example styling

+

DIV container

+
+
Item 1
+
Item 2
+
Item 3
+
+

UL container

+ +

OL container

+
    +
  1. Item 1
    2. +
  2. Item 2
    3. +
  3. Item 3
    4. +
+

TABLE container

+ + + + + + + + + + + + + +
Arow 1
Brow 2
Crow 3
+

P container with SPAN elements

+

Elements of this container are layed out horizontally.

+

+  Item 1  +  Item 2  +  Item 3  +

+ + 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 @@ + + + + Dojo custom constraint test + + + + + + +

Dojo custom constraint test

+

This paragraph stops at 50x50 grid knots: 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.

+

This paragraph stops at 50x50 grid knots: 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.

+ + 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 @@ + + + + Dojo DnD test + + + + + + + + + + + + + +

Dojo DnD test

+ +

Elements of both sources/targets were created dynamically.

+

Following selection modes are supported by default:

+ +

Following drop modes are supported by default:

+ + +
+
+

Source 1

+
+
+
+

Source 2

+
+
Item X
+
Item Y
+
Item Z
+
+
+
+

Source 3

+
+ +
Item Alpha
+
Item Beta
+
Item Gamma
+
Item Delta
+
+
+
+

Pure Target 4

+
+
One item
+
+
+
+
+ +

HTML after

+ + + 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 @@ + + + + Dojo DnD with handles test + + + + + + + + + + + + + +

Dojo DnD with handles test

+ +

Following selection modes are supported by default:

+ +

Following drop modes are supported by default:

+ + +

Source with handles. Items should be draggable by "Item".

+
+
Item Alpha
+
Item Beta
+
Item Gamma
+
Item Delta
+
+ +

Source without handles.

+
+
Item Epsilon
+
Item Zeta
+
Item Eta
+
Item Theta
+
+ +

HTML after

+ + + 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 @@ + + + + Dojo DnD form test + + + + + + + + + + + + + +

Dojo DnD form test

+ +

This is a test to confirm that the DnD container does not interfere with form elements.

+ +
+ +
+

Target 1

+

+
+ +
+

Target 2: form controls galore

+
+ Input text:
+ Input checkbox:
+ Input radio:
+ Input password:
+ Input file:
+ Input button:
+ Input reset:
+ Input submit:
+ Input image:
+ Button:
+ Select:
+ Textarea: +
+
+
+
+ +

 

+ +
+
Source with skipForm = false (by default)
+
Item X:
+
Item Y:
+
Item Z:
+
+ +

 

+ +
+
Source with skipForm = true
+
Item A:
+
Item B:
+
Item C:
+
+ +

HTML after

+ + + 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 @@ + + + + Dojo Moveable test + + + + + + + + +

Dojo Moveable test

+

1st run

+

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.

+

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.

+

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.

+

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.

+

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.

+ + + + + + + +
You can drag the table using this handle.
1Lorem ipsum dolor sit amet...
2Mauris vulputate elit a risus...
3Pellentesque habitant morbi tristique senectus...
4Duis ac augue rhoncus neque...
5Quisque egestas turpis. Sed id...
+

2nd run

+

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.

+

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.

+

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.

+

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.

+

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.

+
+
You can drag this whole object around.
+
You can move this paragraph. It is relatively positioned.
+
+ + 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 @@ + + + + Dojo Moveable markup test + + + + + + +

Dojo Moveable markup test

+

1st run

+

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.

+

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.

+

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.

+

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.

+

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.

+ + + + + + + +
You can drag the table using this handle.
1Lorem ipsum dolor sit amet...
2Mauris vulputate elit a risus...
3Pellentesque habitant morbi tristique senectus...
4Duis ac augue rhoncus neque...
5Quisque egestas turpis. Sed id...
+

2nd run

+

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.

+

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.

+

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.

+

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.

+

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.

+
You can drag this whole paragraph around.
+ + 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 @@ + + + + Dojo DnD optional parameters test + + + + + + +

Dojo DnD optional parameters test

+

Normal paragraph: 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.

+

Delayed move by 10px: 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.

+

With form elements: + dojotoolkit
+ + + + + +

+

With form elements and skip setting: + dojotoolkit + + + + + +

+ + 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 @@ + + + + Dojo parent constraint test + + + + + + +

Dojo parent constraint test

+
+
This is the parent element. All children will be restricted with within = true.
+
I am restricted within my parent's margins.
+
I am restricted within my parent's border.
+
I am restricted within my parent's paddings.
+
I am restricted within my parent's content.
+
+ + 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 @@ + + + + Dojo parent constraint test + + + + + + +

Dojo parent constraint test

+
+
This is the parent element.
+
Paragraph restricted to its parent element: 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.
+
Paragraph restricted to its parent element (cannot go outside): 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.
+
+ + 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 @@ + + + + Dojo DnD selector test + + + + + + + + +

Dojo DnD selector test

+

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.

+

Following selection modes are supported by default:

+ +

DIV selector

+

This selector can select just one element a time. It was specified during the creation time.

+
+
Item 1
+
Item 2
+
Item 3
+
+

UL selector

+ +

OL selector

+
    +
  1. Item 1
    2. +
  2. Item 2
    3. +
  3. Item 3
    4. +
+

TABLE selector

+ + + + + + + + + + + + + +
Arow 1
Brow 2
Crow 3
+

P selector with SPAN elements

+

Elements of this container are layed out horizontally.

+

+  Item 1  +  Item 2  +  Item 3  +

+ + 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 @@ + + + + Dojo DnD markup selector test + + + + + + +

Dojo DnD markup selector test

+

This example is functionally equivalent to test_selector.html example but is done using the Dojo markup.

+

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.

+

Following selection modes are supported by default:

+ +

DIV selector

+

This selector can select just one element a time. It was specified during the creation time.

+
+
Item 1
+
Item 2
+
Item 3
+
+

UL selector

+ +

OL selector

+
    +
  1. Item 1
    2. +
  2. Item 2
    3. +
  3. Item 3
    4. +
+

TABLE selector

+ + + + + + + + + + + + + +
Arow 1
Brow 2
Crow 3
+

P selector with SPAN elements

+

Elements of this container are layed out horizontally.

+

+  Item 1  +  Item 2  +  Item 3  +

+ + 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 @@ + + + + Dojo TimedMoveable test + + + + + + + + + +

Dojo TimedMoveable test

+

One moveable (specially marked) is delayed by 500ms (2 fps). Other two are delayed by 40ms (25 fps) — this is the default value.

+

1st run

+

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.

+

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.

+

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.

+

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.

+

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.

+ + + + + + + +
You can drag the table using this handle.
1Lorem ipsum dolor sit amet...
2Mauris vulputate elit a risus...
3Pellentesque habitant morbi tristique senectus...
4Duis ac augue rhoncus neque...
5Quisque egestas turpis. Sed id...
+

2nd run

+

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.

+

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.

+

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.

+

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.

+

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.

+
You can drag this whole paragraph around.
+
My move is delayed by 500ms, which corresponds to 2 fps.
+ + -- cgit v1.2.3