summaryrefslogtreecommitdiffstats
path: root/apps/it/static/js/ui/tests/visual/position/position_feedback.html
diff options
context:
space:
mode:
Diffstat (limited to 'apps/it/static/js/ui/tests/visual/position/position_feedback.html')
-rw-r--r--apps/it/static/js/ui/tests/visual/position/position_feedback.html145
1 files changed, 0 insertions, 145 deletions
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
deleted file mode 100644
index 19a8538..0000000
--- a/apps/it/static/js/ui/tests/visual/position/position_feedback.html
+++ /dev/null
@@ -1,145 +0,0 @@
-<!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>