summaryrefslogtreecommitdiffstats
path: root/apps/it/static/js/ui/tests/visual/position
diff options
context:
space:
mode:
authorFilipp Lepalaan <f@230.to>2014-02-19 18:02:09 +0200
committerFilipp Lepalaan <f@230.to>2014-02-19 18:02:09 +0200
commit75ad7e4bd7d69243e7e5281c2642f00478fb072d (patch)
treeeaaaf360902d369f42d94778aac8803db7973ce0 /apps/it/static/js/ui/tests/visual/position
parentcfc7c3f52544af8a71d3fa3988a06fee200d2c24 (diff)
downloadpudding-75ad7e4bd7d69243e7e5281c2642f00478fb072d.tar.gz
pudding-75ad7e4bd7d69243e7e5281c2642f00478fb072d.tar.bz2
pudding-75ad7e4bd7d69243e7e5281c2642f00478fb072d.zip
Added tags, jquery UI
Diffstat (limited to 'apps/it/static/js/ui/tests/visual/position')
-rw-r--r--apps/it/static/js/ui/tests/visual/position/position.html143
-rw-r--r--apps/it/static/js/ui/tests/visual/position/position_feedback.html145
2 files changed, 288 insertions, 0 deletions
diff --git a/apps/it/static/js/ui/tests/visual/position/position.html b/apps/it/static/js/ui/tests/visual/position/position.html
new file mode 100644
index 0000000..7b01929
--- /dev/null
+++ b/apps/it/static/js/ui/tests/visual/position/position.html
@@ -0,0 +1,143 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>Position Visual Test</title>
+ <script src="../../../jquery-1.10.2.js"></script>
+ <script src="../../../ui/jquery.ui.core.js"></script>
+ <script src="../../../ui/jquery.ui.widget.js"></script>
+ <script src="../../../ui/jquery.ui.mouse.js"></script>
+ <script src="../../../ui/jquery.ui.draggable.js"></script>
+ <script src="../../../ui/jquery.ui.position.js"></script>
+ <style>
+ .demo {
+ position: relative;
+ height: 500px;
+ width: 80%;
+ margin: 20px auto;
+ background: #eee;
+ }
+ #target {
+ width: 60%;
+ margin: 0 auto;
+ border: 1px solid #777;
+ background-color: #fbca93;
+ text-align: center;
+ cursor: move;
+ }
+ .positionable {
+ position: absolute;
+ background-color: #bcd5e6;
+ text-align: center;
+ }
+ .extra-margin {
+ margin: 0 15px 15px 0;
+ }
+ </style>
+ <script>
+ $(function() {
+ var within = $( ".demo" ),
+ positionable = $( ".positionable" );
+ function position() {
+ positionable.position({
+ of: $( "#target" ),
+ my: $( "#my_horizontal" ).val() + " " + $( "#my_vertical" ).val(),
+ at: $( "#at_horizontal" ).val() + " " + $( "#at_vertical" ).val(),
+ within: within,
+ collision: $( "#collision_horizontal" ).val() + " " + $( "#collision_vertical" ).val()
+ });
+ }
+
+ positionable.css( "opacity", 0.5 );
+
+ $( "#target" ).draggable({
+ drag: function() { position(); }
+ });
+
+ $( "#within" ).click(function() {
+ within = within.is( ".demo" ) ? $( window ) : $( ".demo" );
+ position();
+ });
+
+ $( "#margin" ).click(function() {
+ positionable.toggleClass( "extra-margin" );
+ position();
+ });
+
+ $( "select, input" ).bind( "click keyup change", function() { position(); } );
+
+ position();
+ });
+ </script>
+</head>
+<body>
+
+<div class="demo">
+ <div id="target">
+ <p>This is the position target element.</p>
+ </div>
+
+ <div class="positionable" style="width: 75px; height: 75px;">
+ <p>to position</p>
+ </div>
+
+ <div class="positionable" style="width:120px; height: 40px;">
+ <p>to position 2</p>
+ </div>
+
+ <form style="padding: 20px; margin-top: 75px;">
+ <h2>Position configuration:</h2>
+ <div style="padding-bottom: 20px;">
+ <b>my:</b>
+ <select id="my_horizontal">
+ <option value="left">left</option>
+ <option value="center">center</option>
+ <option value="right" selected="selected">right</option>
+ </select>
+ <select id="my_vertical">
+ <option value="top">top</option>
+ <option value="middle">center</option>
+ <option value="bottom">bottom</option>
+ </select>
+ </div>
+ <div style="padding-bottom: 20px;">
+ <b>at:</b>
+ <select id="at_horizontal">
+ <option value="left">left</option>
+ <option value="center">center</option>
+ <option value="right" selected="selected">right</option>
+ </select>
+ <select id="at_vertical">
+ <option value="top">top</option>
+ <option value="middle">center</option>
+ <option value="bottom">bottom</option>
+ </select>
+ </div>
+ <div style="padding-bottom: 20px;">
+ <b>collision:</b>
+ <select id="collision_horizontal">
+ <option value="flip">flip</option>
+ <option value="fit">fit</option>
+ <option value="flipfit">flipfit</option>
+ <option value="none">none</option>
+ </select>
+ <select id="collision_vertical">
+ <option value="flip">flip</option>
+ <option value="fit">fit</option>
+ <option value="flipfit">flipfit</option>
+ <option value="none">none</option>
+ </select>
+ </div>
+ <div>
+ <label for="within">within:</label>
+ <input id="within" type="checkbox" checked="checked">
+ </div>
+ <div>
+ <label for="margin">extra margin:</label>
+ <input id="margin" type="checkbox">
+ </div>
+ </form>
+</div>
+
+</body>
+</html>
diff --git a/apps/it/static/js/ui/tests/visual/position/position_feedback.html b/apps/it/static/js/ui/tests/visual/position/position_feedback.html
new file mode 100644
index 0000000..19a8538
--- /dev/null
+++ b/apps/it/static/js/ui/tests/visual/position/position_feedback.html
@@ -0,0 +1,145 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>Position Visual Test: Feedback</title>
+ <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css">
+ <script src="../../../jquery-1.10.2.js"></script>
+ <script src="../../../ui/jquery.ui.core.js"></script>
+ <script src="../../../ui/jquery.ui.widget.js"></script>
+ <script src="../../../ui/jquery.ui.position.js"></script>
+ <script src="../../../ui/jquery.ui.menu.js"></script>
+ <script>
+ $(function() {
+ function using( position, feedback ) {
+ $( this )
+ .css( position )
+ .text( feedback.horizontal + " " + feedback.vertical + " " + feedback.important )
+ .removeClass( "left right top bottom center middle vertical horizontal" )
+ .addClass( feedback.horizontal )
+ .addClass( feedback.vertical )
+ .addClass( feedback.important );
+ }
+
+ var element = $( ".element" ),
+ target = $( "#target" ).position({
+ my: "center",
+ at: "center",
+ of: window
+ }),
+ targetOffset = target.offset(),
+ oppositeElement = element.clone().width( 50 ).appendTo( "body" ),
+ leftElement = element.clone().width( 50 ).height( 150 ).appendTo( "body" ),
+ rightElement = element.clone().height( 150 ).width( 150 ).appendTo( "body" );
+
+ $.each([
+ "center top-100",
+ "right+25 top-50",
+ "right+75 top",
+ "right+75 center",
+ "right+75 bottom",
+ "right+25 bottom+50",
+ "center bottom+100",
+ "left-25 bottom+50",
+ "left-75 bottom",
+ "left-75 center",
+ "left-75 top",
+ "left-25 top-50"
+ ], function( index, direction ) {
+ element.clone().insertAfter( target ).position({
+ my: "center",
+ at: direction,
+ of: target,
+ using: using
+ });
+ });
+
+ element.width( 150 );
+ function positionWithOffset( horizontal, vertical ) {
+ return {
+ my: "left top",
+ at: "left" + (horizontal < 0 ? horizontal : "+" + horizontal) + " " +
+ "top" + (vertical < 0 ? vertical : "+" + vertical),
+ of: target,
+ using: using
+ };
+ };
+ $( document ).on( "mousemove", function( event ) {
+ element.position( positionWithOffset(
+ event.pageX - targetOffset.left, event.pageY - targetOffset.top ) );
+ oppositeElement.position( positionWithOffset(
+ -1 * (event.pageX - targetOffset.left), -1 * (event.pageY - targetOffset.top) ) );
+ leftElement.position( positionWithOffset(
+ -0.9 * (event.pageX - targetOffset.left), 0.9 * (event.pageY - targetOffset.top) ) );
+ rightElement.position( positionWithOffset(
+ 0.9 * (event.pageX - targetOffset.left), -0.9 * (event.pageY - targetOffset.top) ) );
+ });
+ });
+ </script>
+ <style>
+ #target, .element {
+ position: absolute;
+ border: 1px solid black;
+ border-radius: 5px;
+ width: 75px;
+ height: 25px;
+ padding: 5px;
+ font-size: 62.5%;
+ }
+ #target {
+ height: 75px;
+ }
+ .element:before {
+ font-size: 12pt;
+ content: "↑";
+ position: absolute;
+ top: -19px;
+ left: 5px;
+ }
+ .right:before {
+ left: auto;
+ right: 5px;
+ }
+ .bottom:before {
+ content: "↓";
+ top: auto;
+ bottom: -19px;
+ }
+ .center:before {
+ left: 50%;
+ right: auto;
+ }
+ .middle:before {
+ top: 50%;
+ bottom: auto;
+ }
+ .horizontal:before {
+ height: 10px;
+ top: 50%;
+ margin-top: -8px;
+ bottom: auto;
+ left: -18px;
+ right: auto;
+ content: "←";
+ }
+ .right.horizontal:before {
+ left: auto;
+ right: -18px;
+ content: "→";
+ }
+ .bottom.horizontal:before {
+ top: auto;
+ bottom: 5px;
+ }
+ .top.horizontal:before {
+ top: 5px;
+ }
+ </style>
+</head>
+<body>
+
+<div id="target">all around me</div>
+<div class="element"></div>
+
+</body>
+</html>
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-21 23:00:41 +0000