forked from hiltonjanfield/jquery.enhsplitter
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtest.html
211 lines (179 loc) · 7.81 KB
/
test.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
<title>jQuery Splitter Features Test</title>
<meta name="Description" content="jQuery Splitter Demo"/>
<link rel="shortcut icon" href=""/>
<!--<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>-->
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script src="js/jquery.enhsplitter.js"></script>
<link href="css/jquery.enhsplitter.css" rel="stylesheet"/>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
body {
font: normal 13px Arial, Helvetica, sans-serif;
margin: 1em;
}
hr {
border-top: 4px solid black;
height: 0;
}
.splitter_panel > div {
padding: 0 1em;
}
.box {
margin-top: 2em;
border-top: 4px solid black;
padding: 1em;
}
.box .panel {
width: 40%;
border: 4px solid silver;
box-shadow: 0 0 0 1px black;
}
.splitter_panel {
background-color: red;
}
.splitter_panel div {
background-color: dodgerblue;
font-weight: bold;
}
.splitter_panel:last-child div {
background-color: orange;
}
.box .info {
width: 50%;
float: right;
margin-right: 5%;
}
.box .info code {
font: normal 12px Consolas, "Source Code Pro", "Courier New", mono;
display: block;
font-size: 90%;
margin-bottom: 0.5em;
}
br {
line-height: 2.5em;
}
.splitter_bar {
background: transparent;
}
</style>
</head>
<body>
<h1>jquery.enhsplitter Features Tests</h1>
<p>
<a href="demo.html">Demo and Documentation</a>
</p>
<p>
This test file uses jQuery 1.8.0, the minimum required version, to ensure there are no version compatibility breaks.
</p>
<p>
Splitters on this test page have been manually colored transparent to ensure the panels retain their proper size
during feature tests. Handles and borders remain for visual identification.
</p>
<script>
// Example of setting defaults.
$.fn.enhsplitter.defaults.onDrag = function(e, splitter) {
panelOne = splitter.children().first();
panelOne.children().first().text(panelOne.width() + 'px');
panelTwo = panelOne.next().next();
panelTwo.children().first().text(panelTwo.width() + 'px');
};
addTest(
{},
'Basic splitter with strictly default options.<br>' +
'All splitters should not begin moving until dragged at least 5 pixels if the drag started on the handle; they should start moving immediately otherwise.'
);
addTest(
{height: '7em', handle: 'none'},
'Basic splitter with the total panel height fixed to 7em (shorter than the default applied to all the other panels).<br>Handle should not exist.'
);
addTest(
{minSize: 0, handle: 'bar', collapse: 'right'},
'Splitter should be able to go all the way to each side with no ill effects or overlap.<br>Handle should be a thin bar, rather than the default stripes.<br>Clicking the collapse handle should collapse the splitter to the right rather than the default left. Feature that restores original position setting for handle when dragged to its collapse position should also work on the right.'
);
addTest(
{leftMinSize: 30, rightMinSize: 150, handle: 'block'},
'Different lower and upper limits. <br>Handle should be a thick block, rather than the default stripes.'
);
addTest(
{vertical: false, height: 200, position: '5%', minSize: 30, collapse: 'down'},
'Attempt to break starting settings by setting the starting position smaller than the defined limit.<br>' +
'The splitter should override this, leaving the text in the first panel visible. If it doesn\'t, "Panel One" will be cut off.<br>' +
'The splitter should also collapse down rather than the default up.'
);
addTest(
{rightMinSize: -10, position: '120%', splitterSize: 13, handle: 'lotsofdots'},
'Touch screen example, plus attempt to break limit and position settings (out of range).<br>' +
'Splitter should start within the container (at the edge, having been restricted to 100%), and remain unable to go beyond the edges.<br>' +
'Splitter bar itself should be twice as wide (13 pixels vs. default 7) but still remain fully within the panel.<br>' +
'Splitter handle should be "lotsofdots" style, twice as tall as normal with a line of dots. Despite its narrow appearance, this handle takes up the full width of the splitter and is easier to hit on touch screens.'
);
addTest(
{invisible: true, leftMinSize: 10, leftMaxSize: 150},
'Invisible splitter. Splitter should still be fully functional (excluding the collapse handle).<br>' +
'Left panel should be able to go from 10 to 150 pixels in size and no bigger.'
);
addTest(
{
leftMaxSize: 300,
rightMaxSize: 300,
onDragStart: function (e, splitter) {
bar = splitter.find('.splitter_bar');
bar.css('background', 'repeating-linear-gradient(60deg, silver, silver 5px, grey 5px, grey 10px)');
},
onDragEnd: function (e, splitter) {
bar.css('background', '');
}
},
'Demonstration of onDragStart and onDragEnd events.<br>' +
'Splitter should gain a striped background when being dragged.<br>'+
'Tests an alternate form of size restriction by setting maximum sizes for each panel rather than minimums.'
);
addTest(
{
handle: 'dots',
onDragStart: function (e, splitter) {
handle = splitter.find('.splitter_handle');
},
onDragEnd: function () {
handle.css('height', '').css('margin-top', '');
},
onDrag: function (e) {
var x = ((e.pageX % 100) > 50 ? (50 - ((e.pageX % 100) - 50)) : e.pageX % 100) + 25;
handle.css('height', x + 'px').css('margin-top', -x / 2 + 'px')
}
},
'Demonstration of onDrag event by setting up a crappy handle size animation.<br>' +
'Handle should be dotted ("dots" style) and pulsate in size as mouse moves left/right.<br>' +
'This entire page also demonstrates the onDrag event; an onDrag function is used to show the panel pixel' +
'sizes when dragging splitters around.'
);
$(window).trigger('resize.splitter'); // temporary fix for Issue #12 to kep that issue out of these tests.
function addTest(options, description) {
var code = '';
$.each(options, function (k, v) {
if (typeof v == "string") {
code += k + ': \'' + v + '\', ';
} else {
code += k + ': ' + v + ', ';
}
});
code = code.slice(0, -2);
var box = $('<div class="box"/>').append(
$('<div class="info"/>').append(
$('<code>$(…).enhsplitter(<b>{' + code + '}</b>)</code><div>' + description + '</div>')
)
);
var panel = $('<div class="panel"><div>Panel One</div><div>Panel Two</div></div>');
box.append(panel);
$('body').append(box);
return panel.enhsplitter(options);
}
</script>
</body>
</html>