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/dojox/fx/tests/_animation.css | 97 +++++ .../js/dojox/fx/tests/_animation.css.commented.css | 113 ++++++ includes/js/dojox/fx/tests/example_Line.html | 80 ++++ .../dojox/fx/tests/example_backgroundPosition.html | 59 +++ .../js/dojox/fx/tests/example_dojoAnimations.html | 442 +++++++++++++++++++++ .../js/dojox/fx/tests/example_easingChart2D.html | 147 +++++++ includes/js/dojox/fx/tests/images/averycutedog.jpg | Bin 0 -> 40879 bytes includes/js/dojox/fx/tests/images/dot.png | Bin 0 -> 4064 bytes includes/js/dojox/fx/tests/images/longBg.png | Bin 0 -> 12217 bytes includes/js/dojox/fx/tests/test_Nodelist-fx.html | 282 +++++++++++++ includes/js/dojox/fx/tests/test_Shadow.html | 93 +++++ includes/js/dojox/fx/tests/test_animateClass.html | 222 +++++++++++ includes/js/dojox/fx/tests/test_crossFade.html | 145 +++++++ includes/js/dojox/fx/tests/test_easing.html | 142 +++++++ includes/js/dojox/fx/tests/test_highlight.html | 45 +++ includes/js/dojox/fx/tests/test_scroll.html | 98 +++++ includes/js/dojox/fx/tests/test_sizeTo.html | 142 +++++++ includes/js/dojox/fx/tests/test_slideBy.html | 75 ++++ includes/js/dojox/fx/tests/test_wipeTo.html | 109 +++++ 19 files changed, 2291 insertions(+) create mode 100644 includes/js/dojox/fx/tests/_animation.css create mode 100644 includes/js/dojox/fx/tests/_animation.css.commented.css create mode 100644 includes/js/dojox/fx/tests/example_Line.html create mode 100644 includes/js/dojox/fx/tests/example_backgroundPosition.html create mode 100644 includes/js/dojox/fx/tests/example_dojoAnimations.html create mode 100644 includes/js/dojox/fx/tests/example_easingChart2D.html create mode 100644 includes/js/dojox/fx/tests/images/averycutedog.jpg create mode 100644 includes/js/dojox/fx/tests/images/dot.png create mode 100644 includes/js/dojox/fx/tests/images/longBg.png create mode 100644 includes/js/dojox/fx/tests/test_Nodelist-fx.html create mode 100644 includes/js/dojox/fx/tests/test_Shadow.html create mode 100644 includes/js/dojox/fx/tests/test_animateClass.html create mode 100644 includes/js/dojox/fx/tests/test_crossFade.html create mode 100644 includes/js/dojox/fx/tests/test_easing.html create mode 100644 includes/js/dojox/fx/tests/test_highlight.html create mode 100644 includes/js/dojox/fx/tests/test_scroll.html create mode 100644 includes/js/dojox/fx/tests/test_sizeTo.html create mode 100644 includes/js/dojox/fx/tests/test_slideBy.html create mode 100644 includes/js/dojox/fx/tests/test_wipeTo.html (limited to 'includes/js/dojox/fx/tests') diff --git a/includes/js/dojox/fx/tests/_animation.css b/includes/js/dojox/fx/tests/_animation.css new file mode 100644 index 0000000..efab455 --- /dev/null +++ b/includes/js/dojox/fx/tests/_animation.css @@ -0,0 +1,97 @@ +.testBox { + border:1px solid #333; + width:75px; + height:75px; +} +.absolutely { position:absolute; + top:0; left:0; +} +.floating { + float:left; +} +.wide { + width:200px; +} +.tall { + height:200px; +} +.tiny { + width:3px; + height:3px; +} +.black { + color:#fff; + background-color:#000; +} +.white { + color:#666; + background-color:#fff; +} +.green { + color:#000; + background-color:#eef; +} +.red { + color:#fff; + background-color:#ffe; +} +.blue { + color:#000; + background-color:#fef !important; +} +.baseFont { + line-height:14px; + font:12px Arial,sans-serif; + letter-spacing:0.1em; +} +.spacedVertical { + line-height:42px; +} +.spacedHorizontal { + letter-spacing:0.42em; +} +.fontSizeTest { + font:20px Arial,sans-serif; +} +.bigMargin { + margin:30px; +} +.noMargin { + margin:0; +} +.mediumMargin { + margin:15px; +} +.bigMarginLeft { + margin-left:150px; +} +.padded { + padding:3px; +} +.noPadding { + padding:0; +} +.topPadding { + padding-top:50px; +} +.bigPadding { + padding:30px; +} +.offsetSome { + top:50px; + left:75px; +} +.topLeft { + top:0; + left:0; +} +.bottomRight { + bottom:0; + right:0; +} +.bothAxis { + top:10px; + left:10px; + right:10px; + bottom:10px; +} diff --git a/includes/js/dojox/fx/tests/_animation.css.commented.css b/includes/js/dojox/fx/tests/_animation.css.commented.css new file mode 100644 index 0000000..ba01d03 --- /dev/null +++ b/includes/js/dojox/fx/tests/_animation.css.commented.css @@ -0,0 +1,113 @@ +.testBox { + border:1px solid #333; + width:75px; + height:75px; +} +.absolutely { position:absolute; + top:0; left:0; +} +.floating { + float:left; +} +.wide { + width:200px; +} +.tall { + height:200px; +} +.tiny { + width:3px; + height:3px; +} + + +.black { + color:#fff; + background-color:#000; +} + +.white { + color:#666; + background-color:#fff; +} + +.green { + color:#000; + background-color:#eef; +} +.red { + color:#fff; + background-color:#ffe; +} +.blue { + color:#000; + background-color:#fef !important; +} + +/* font sizes */ +.baseFont { + line-height:14px; + font:12px Arial,sans-serif; + letter-spacing:0.1em; +} + +.spacedVertical { + line-height:42px; +} +.spacedHorizontal { + letter-spacing:0.42em; +} +.fontSizeTest { + font:20px Arial,sans-serif; +} + +/* margins */ +.bigMargin { + margin:30px; +} +.noMargin { + margin:0; +} +.mediumMargin { + margin:15px; +} +.bigMarginLeft { + margin-left:150px; +} + +/* padding */ +.padded { + padding:3px; +} +.noPadding { + padding:0; +} +.topPadding { + padding-top:50px; +} +.bigPadding { + padding:30px; +} + +/* positioning */ + +.offsetSome { + top:50px; + left:75px; +} + +.topLeft { + top:0; + left:0; +} +.bottomRight { + bottom:0; + right:0; +} + +.bothAxis { + top:10px; + left:10px; + right:10px; + bottom:10px; +} diff --git a/includes/js/dojox/fx/tests/example_Line.html b/includes/js/dojox/fx/tests/example_Line.html new file mode 100644 index 0000000..4177e96 --- /dev/null +++ b/includes/js/dojox/fx/tests/example_Line.html @@ -0,0 +1,80 @@ + + +
++
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Nam facilisis enim. Pellentesque in elit et lacus euismod dignissim. + Aliquam dolor pede, convallis eget, dictum a, blandit ac, urna. + Pellentesque sed nunc ut justo volutpat egestas. Class aptent taciti + sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. + In erat. +
+(FisheyeLite makes this easy. be creative:)
+this chart shows time (x axis) vs. position (y axis) for a movement from 0px to 30px modified by easing functions
+ + + +
+ .testBox
+ .noIdHere
+ each row: .rowOne .rowTwo .rowThree .rowFour
+ each col: .iOne .iTwo .. iSeven
+ #randomNode, #node9, #node7, #aNode, #node1, #node2, #node4, #node6
+
+
+ the dojo.query() isn't limited to the testDiv, it parses the body. try: dojo.query("fieldset") and slideBy animation
+ + + diff --git a/includes/js/dojox/fx/tests/test_Shadow.html b/includes/js/dojox/fx/tests/test_Shadow.html new file mode 100644 index 0000000..fd21fd2 --- /dev/null +++ b/includes/js/dojox/fx/tests/test_Shadow.html @@ -0,0 +1,93 @@ + + + +Lorem
Lorem
Lorem
Lorem
+ dojox.fx.style provides a few methods to animate the changes that would occur + when adding or removing a class from a domNode. +
+This is a div position:relative with a position:absolute div inside. testing various t/l/b/r combos. + normal css inheritance rules apply, so setting .foo .bar if .foo was defined last in the css text, .bar + will take precedent. the below position test shows the results of this: +
+ + + + + +Some properties + cannot be modified (fontFace, and so on), so to ensure the results at the end + of the animation are applied correctly and fully, the class name is set on the node + via dojo.add/removeClass(). +
+ + + + diff --git a/includes/js/dojox/fx/tests/test_crossFade.html b/includes/js/dojox/fx/tests/test_crossFade.html new file mode 100644 index 0000000..330a34a --- /dev/null +++ b/includes/js/dojox/fx/tests/test_crossFade.html @@ -0,0 +1,145 @@ + + + ++ dojox.fx.easing is stand-alone, and does not require the dojox.fx base files. to see a chart + of these functions see example_easingChart2D.html +
+ +neat.
+dojox.fx.scroll provides:
++ which will create and return a dojo._Animation to scroll + a window to a desired offset. (or a node that has overflow:auto/hidden, if you pass the domNode as the win: argument) +
+ + +getScroll
+ Scroll top: 0
+ Scroll left: 0
+
|
+
+ + + |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.
+ + +getElementsByClassLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.
+ +Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.
+ + + diff --git a/includes/js/dojox/fx/tests/test_sizeTo.html b/includes/js/dojox/fx/tests/test_sizeTo.html new file mode 100644 index 0000000..0c21e9b --- /dev/null +++ b/includes/js/dojox/fx/tests/test_sizeTo.html @@ -0,0 +1,142 @@ + + + +quick sizeTo API overview:
+ +
+ dojox.fx.sizeTo({
+ // basic requirements:
+ node: "aDomNodeId", // or a domNode reference
+ width: 200, // measured in px
+ height: 200, // measured in px
+ method: "chain" // is default, or "combine"
+ });
+
+ + little test blocks (works in FF/win/mac + ie6) dojo.query() test +
+ + +quick sizeTo API overview:
+ +
+ dojox.fx.wipeTo({
+ // basic requirements:
+ node: "aDomNodeId", // or a domNode reference
+ width: 200 // measured in px
+ // height: 200 // measured in px (only one at a time, see sizeTo)
+ });
+
+
+ Some test boxes: (id="box1,box2,box3" etc ...)
+ + + + + + + +