Skip to content

Commit ebe3884

Browse files
author
Joel Steres
committed
Convert spacing to tabs to comply with style convention
1 parent 4f8554b commit ebe3884

File tree

3 files changed

+143
-143
lines changed

3 files changed

+143
-143
lines changed

‎src/utility.js‎

Lines changed: 33 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ function getViewportDimensions() {
5959
session.scrollTop = $window.scrollTop();
6060
session.windowWidth = $window.width();
6161
session.windowHeight = $window.height();
62-
session.positionCompensation = computePositionCompensation(session.windowWidth, session.windowHeight);
62+
session.positionCompensation = computePositionCompensation(session.windowWidth, session.windowHeight);
6363
}
6464

6565
/**
@@ -69,7 +69,7 @@ function getViewportDimensions() {
6969
function trackResize() {
7070
session.windowWidth = $window.width();
7171
session.windowHeight = $window.height();
72-
session.positionCompensation = computePositionCompensation(session.windowWidth, session.windowHeight);
72+
session.positionCompensation = computePositionCompensation(session.windowWidth, session.windowHeight);
7373
}
7474

7575
/**
@@ -167,9 +167,9 @@ function getTooltipContent(element) {
167167
* @return {number} Value with the collision flags.
168168
*/
169169
function getViewportCollisions(coords, elementWidth, elementHeight) {
170-
// adjusting viewport even though it might be negative because coords
171-
// comparing with are relative to compensated position
172-
var viewportTop = session.scrollTop - session.positionCompensation.top,
170+
// adjusting viewport even though it might be negative because coords
171+
// comparing with are relative to compensated position
172+
var viewportTop = session.scrollTop - session.positionCompensation.top,
173173
viewportLeft = session.scrollLeft - session.positionCompensation.left,
174174
viewportBottom = viewportTop + session.windowHeight,
175175
viewportRight = viewportLeft + session.windowWidth,
@@ -213,32 +213,32 @@ function countFlags(value) {
213213
* @return {Offsets} The top, left, right, bottom offset in pixels
214214
*/
215215
function computePositionCompensation(windowWidth, windowHeight) {
216-
var bodyWidthWithMargin,
217-
bodyHeightWithMargin,
218-
offsets,
219-
bodyPositionPx;
220-
221-
switch ($body.css('position')) {
222-
case 'absolute':
223-
case 'fixed':
224-
case 'relative':
225-
// jquery offset and position functions return top and left
226-
// offset function computes position + margin
227-
offsets = $body.offset();
228-
bodyPositionPx = $body.position();
229-
// because element might be positioned compute right margin using the different between
230-
// outerWidth computations and add position offset
231-
bodyWidthWithMargin = $body.outerWidth(true);
232-
bodyHeightWithMargin = $body.outerHeight(true);
233-
// right offset = right margin + body right position
234-
offsets.right = (bodyWidthWithMargin - $body.outerWidth() - (offsets.left - bodyPositionPx.left)) + (windowWidth - bodyWidthWithMargin - bodyPositionPx.left);
235-
// bottom offset = bottom margin + body bottom position
236-
offsets.bottom = (bodyHeightWithMargin - $body.outerHeight() - offsets.top) + (windowHeight - bodyHeightWithMargin - bodyPositionPx.top);
237-
break;
238-
default:
239-
// even though body may have offset, no compensation is required
240-
offsets = { top: 0, bottom: 0, left: 0, right: 0 };
241-
}
242-
243-
return offsets;
216+
var bodyWidthWithMargin,
217+
bodyHeightWithMargin,
218+
offsets,
219+
bodyPositionPx;
220+
221+
switch ($body.css('position')) {
222+
case 'absolute':
223+
case 'fixed':
224+
case 'relative':
225+
// jquery offset and position functions return top and left
226+
// offset function computes position + margin
227+
offsets = $body.offset();
228+
bodyPositionPx = $body.position();
229+
// because element might be positioned compute right margin using the different between
230+
// outerWidth computations and add position offset
231+
bodyWidthWithMargin = $body.outerWidth(true);
232+
bodyHeightWithMargin = $body.outerHeight(true);
233+
// right offset = right margin + body right position
234+
offsets.right = (bodyWidthWithMargin - $body.outerWidth() - (offsets.left - bodyPositionPx.left)) + (windowWidth - bodyWidthWithMargin - bodyPositionPx.left);
235+
// bottom offset = bottom margin + body bottom position
236+
offsets.bottom = (bodyHeightWithMargin - $body.outerHeight() - offsets.top) + (windowHeight - bodyHeightWithMargin - bodyPositionPx.top);
237+
break;
238+
default:
239+
// even though body may have offset, no compensation is required
240+
offsets = { top: 0, bottom: 0, left: 0, right: 0 };
241+
}
242+
243+
return offsets;
244244
}

‎test/bodyoffset-abs.html‎

Lines changed: 55 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
<meta charset="utf-8" />
55
<title>PowerTip Test Suite</title>
66

7-
<!-- Library Resources -->
8-
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
7+
<!-- Library Resources -->
8+
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
99

1010
<!-- PowerTip Core Resources -->
1111
<script type="text/javascript" src="../src/core.js"></script>
@@ -19,60 +19,60 @@
1919
<!-- Unit Test Scripts -->
2020
<script type="text/javascript" src="tests-bodyoffset.js"></script>
2121

22-
<!-- Custom Styles For Test Cases -->
23-
<style type="text/css">
24-
header, section { margin-bottom: 20px; }
25-
section { border: 1px solid #CCC; margin: 20px; padding: 20px; }
26-
#powerTip { white-space: normal; }
27-
#huge-text div, #huge-text-smart div { text-align: center; }
28-
#huge-text input, #huge-text-smart input { margin: 10px; padding: 10px; }
29-
#huge-text .east, #huge-text-smart .east { margin-left: 450px; }
30-
#session { position: fixed; right: 10px; top: 10px; font-size: 10px; width: 160px; background-color: #fff; border: 1px solid #ccc; padding: 10px; overflow: hidden; }
31-
#session pre { margin: 0; }
32-
</style>
22+
<!-- Custom Styles For Test Cases -->
23+
<style type="text/css">
24+
header, section { margin-bottom: 20px; }
25+
section { border: 1px solid #CCC; margin: 20px; padding: 20px; }
26+
#powerTip { white-space: normal; }
27+
#huge-text div, #huge-text-smart div { text-align: center; }
28+
#huge-text input, #huge-text-smart input { margin: 10px; padding: 10px; }
29+
#huge-text .east, #huge-text-smart .east { margin-left: 450px; }
30+
#session { position: fixed; right: 10px; top: 10px; font-size: 10px; width: 160px; background-color: #fff; border: 1px solid #ccc; padding: 10px; overflow: hidden; }
31+
#session pre { margin: 0; }
32+
</style>
3333
</head>
3434
<body style="position:absolute; left:50px; right:100px; top:25px; bottom:75px;">
35-
<section id="huge-text">
36-
<h2>Huge Text</h2>
37-
<p>The tooltips for the buttons below have a lot of text. The tooltip div is completely elastic for this demo. The tooltips should be properly placed when they render.</p>
38-
<div>
39-
<input type="button" class="north-west-alt" value="North West Alt" />
40-
<input type="button" class="north-west" value="North West" />
41-
<input type="button" class="north" value="North" />
42-
<input type="button" class="north-east" value="North East" />
43-
<input type="button" class="north-east-alt" value="North East Alt" /><br />
44-
<input type="button" class="west" value="West" />
45-
<input type="button" class="east" value="East" /><br />
46-
<input type="button" class="south-west-alt" value="South West Alt" />
47-
<input type="button" class="south-west" value="South West" />
48-
<input type="button" class="south" value="South" />
49-
<input type="button" class="south-east" value="South East" />
50-
<input type="button" class="south-east-alt" value="South East Alt" />
51-
</div>
52-
</section>
53-
<section id="huge-text-smart">
54-
<h2>Huge Text with Smart Placement</h2>
55-
<p>The tooltips for the buttons below have a lot of text. The tooltip div is completely elastic for this demo. The tooltips should be properly placed when they render.</p>
56-
<div>
57-
<input type="button" class="north-west-alt" value="North West Alt" />
58-
<input type="button" class="north-west" value="North West" />
59-
<input type="button" class="north" value="North" />
60-
<input type="button" class="north-east" value="North East" />
61-
<input type="button" class="north-east-alt" value="North East Alt" /><br />
62-
<input type="button" class="west" value="West" />
63-
<input type="button" class="east" value="East" /><br />
64-
<input type="button" class="south-west-alt" value="South West Alt" />
65-
<input type="button" class="south-west" value="South West" />
66-
<input type="button" class="south" value="South" />
67-
<input type="button" class="south-east" value="South East" />
68-
<input type="button" class="south-east-alt" value="South East Alt" />
69-
</div>
70-
</section>
71-
<section id="trapped-mousefollow" data-powertip="This is the tooltip text.&lt;br /&gt;It is tall so you can test the padding.">
72-
<h2>Trapped mouse following tooltip</h2>
73-
<p>This box has a mouse following tooltip.</p>
74-
<p>Trap it in the bottom right corner of the viewport. It should flip out of the way. It should not flip if it only hits one edge.</p>
75-
</section>
76-
<div id="session"><pre /></div>
35+
<section id="huge-text">
36+
<h2>Huge Text</h2>
37+
<p>The tooltips for the buttons below have a lot of text. The tooltip div is completely elastic for this demo. The tooltips should be properly placed when they render.</p>
38+
<div>
39+
<input type="button" class="north-west-alt" value="North West Alt" />
40+
<input type="button" class="north-west" value="North West" />
41+
<input type="button" class="north" value="North" />
42+
<input type="button" class="north-east" value="North East" />
43+
<input type="button" class="north-east-alt" value="North East Alt" /><br />
44+
<input type="button" class="west" value="West" />
45+
<input type="button" class="east" value="East" /><br />
46+
<input type="button" class="south-west-alt" value="South West Alt" />
47+
<input type="button" class="south-west" value="South West" />
48+
<input type="button" class="south" value="South" />
49+
<input type="button" class="south-east" value="South East" />
50+
<input type="button" class="south-east-alt" value="South East Alt" />
51+
</div>
52+
</section>
53+
<section id="huge-text-smart">
54+
<h2>Huge Text with Smart Placement</h2>
55+
<p>The tooltips for the buttons below have a lot of text. The tooltip div is completely elastic for this demo. The tooltips should be properly placed when they render.</p>
56+
<div>
57+
<input type="button" class="north-west-alt" value="North West Alt" />
58+
<input type="button" class="north-west" value="North West" />
59+
<input type="button" class="north" value="North" />
60+
<input type="button" class="north-east" value="North East" />
61+
<input type="button" class="north-east-alt" value="North East Alt" /><br />
62+
<input type="button" class="west" value="West" />
63+
<input type="button" class="east" value="East" /><br />
64+
<input type="button" class="south-west-alt" value="South West Alt" />
65+
<input type="button" class="south-west" value="South West" />
66+
<input type="button" class="south" value="South" />
67+
<input type="button" class="south-east" value="South East" />
68+
<input type="button" class="south-east-alt" value="South East Alt" />
69+
</div>
70+
</section>
71+
<section id="trapped-mousefollow" data-powertip="This is the tooltip text.&lt;br /&gt;It is tall so you can test the padding.">
72+
<h2>Trapped mouse following tooltip</h2>
73+
<p>This box has a mouse following tooltip.</p>
74+
<p>Trap it in the bottom right corner of the viewport. It should flip out of the way. It should not flip if it only hits one edge.</p>
75+
</section>
76+
<div id="session"><pre /></div>
7777
</body>
7878
</html>

‎test/bodyoffset-rel.html‎

Lines changed: 55 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
<meta charset="utf-8" />
55
<title>PowerTip Test Suite</title>
66

7-
<!-- Library Resources -->
8-
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
7+
<!-- Library Resources -->
8+
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
99

1010
<!-- PowerTip Core Resources -->
1111
<script type="text/javascript" src="../src/core.js"></script>
@@ -19,60 +19,60 @@
1919
<!-- Unit Test Scripts -->
2020
<script type="text/javascript" src="tests-bodyoffset.js"></script>
2121

22-
<!-- Custom Styles For Test Cases -->
23-
<style type="text/css">
24-
header, section { margin-bottom: 20px; }
25-
section { border: 1px solid #CCC; margin: 20px; padding: 20px; }
26-
#powerTip { white-space: normal; }
27-
#huge-text div, #huge-text-smart div { text-align: center; }
28-
#huge-text input, #huge-text-smart input { margin: 10px; padding: 10px; }
29-
#huge-text .east, #huge-text-smart .east { margin-left: 450px; }
30-
#session { position: fixed; right: 10px; top: 10px; font-size: 10px; width: 160px; background-color: #fff; border: 1px solid #ccc; padding: 10px; overflow: hidden; }
31-
#session pre { margin: 0; }
32-
</style>
22+
<!-- Custom Styles For Test Cases -->
23+
<style type="text/css">
24+
header, section { margin-bottom: 20px; }
25+
section { border: 1px solid #CCC; margin: 20px; padding: 20px; }
26+
#powerTip { white-space: normal; }
27+
#huge-text div, #huge-text-smart div { text-align: center; }
28+
#huge-text input, #huge-text-smart input { margin: 10px; padding: 10px; }
29+
#huge-text .east, #huge-text-smart .east { margin-left: 450px; }
30+
#session { position: fixed; right: 10px; top: 10px; font-size: 10px; width: 160px; background-color: #fff; border: 1px solid #ccc; padding: 10px; overflow: hidden; }
31+
#session pre { margin: 0; }
32+
</style>
3333
</head>
3434
<body style="position:relative">
35-
<section id="huge-text">
36-
<h2>Huge Text</h2>
37-
<p>The tooltips for the buttons below have a lot of text. The tooltip div is completely elastic for this demo. The tooltips should be properly placed when they render.</p>
38-
<div>
39-
<input type="button" class="north-west-alt" value="North West Alt" />
40-
<input type="button" class="north-west" value="North West" />
41-
<input type="button" class="north" value="North" />
42-
<input type="button" class="north-east" value="North East" />
43-
<input type="button" class="north-east-alt" value="North East Alt" /><br />
44-
<input type="button" class="west" value="West" />
45-
<input type="button" class="east" value="East" /><br />
46-
<input type="button" class="south-west-alt" value="South West Alt" />
47-
<input type="button" class="south-west" value="South West" />
48-
<input type="button" class="south" value="South" />
49-
<input type="button" class="south-east" value="South East" />
50-
<input type="button" class="south-east-alt" value="South East Alt" />
51-
</div>
52-
</section>
53-
<section id="huge-text-smart">
54-
<h2>Huge Text with Smart Placement</h2>
55-
<p>The tooltips for the buttons below have a lot of text. The tooltip div is completely elastic for this demo. The tooltips should be properly placed when they render.</p>
56-
<div>
57-
<input type="button" class="north-west-alt" value="North West Alt" />
58-
<input type="button" class="north-west" value="North West" />
59-
<input type="button" class="north" value="North" />
60-
<input type="button" class="north-east" value="North East" />
61-
<input type="button" class="north-east-alt" value="North East Alt" /><br />
62-
<input type="button" class="west" value="West" />
63-
<input type="button" class="east" value="East" /><br />
64-
<input type="button" class="south-west-alt" value="South West Alt" />
65-
<input type="button" class="south-west" value="South West" />
66-
<input type="button" class="south" value="South" />
67-
<input type="button" class="south-east" value="South East" />
68-
<input type="button" class="south-east-alt" value="South East Alt" />
69-
</div>
70-
</section>
71-
<section id="trapped-mousefollow" data-powertip="This is the tooltip text.&lt;br /&gt;It is tall so you can test the padding.">
72-
<h2>Trapped mouse following tooltip</h2>
73-
<p>This box has a mouse following tooltip.</p>
74-
<p>Trap it in the bottom right corner of the viewport. It should flip out of the way. It should not flip if it only hits one edge.</p>
75-
</section>
76-
<div id="session"><pre /></div>
35+
<section id="huge-text">
36+
<h2>Huge Text</h2>
37+
<p>The tooltips for the buttons below have a lot of text. The tooltip div is completely elastic for this demo. The tooltips should be properly placed when they render.</p>
38+
<div>
39+
<input type="button" class="north-west-alt" value="North West Alt" />
40+
<input type="button" class="north-west" value="North West" />
41+
<input type="button" class="north" value="North" />
42+
<input type="button" class="north-east" value="North East" />
43+
<input type="button" class="north-east-alt" value="North East Alt" /><br />
44+
<input type="button" class="west" value="West" />
45+
<input type="button" class="east" value="East" /><br />
46+
<input type="button" class="south-west-alt" value="South West Alt" />
47+
<input type="button" class="south-west" value="South West" />
48+
<input type="button" class="south" value="South" />
49+
<input type="button" class="south-east" value="South East" />
50+
<input type="button" class="south-east-alt" value="South East Alt" />
51+
</div>
52+
</section>
53+
<section id="huge-text-smart">
54+
<h2>Huge Text with Smart Placement</h2>
55+
<p>The tooltips for the buttons below have a lot of text. The tooltip div is completely elastic for this demo. The tooltips should be properly placed when they render.</p>
56+
<div>
57+
<input type="button" class="north-west-alt" value="North West Alt" />
58+
<input type="button" class="north-west" value="North West" />
59+
<input type="button" class="north" value="North" />
60+
<input type="button" class="north-east" value="North East" />
61+
<input type="button" class="north-east-alt" value="North East Alt" /><br />
62+
<input type="button" class="west" value="West" />
63+
<input type="button" class="east" value="East" /><br />
64+
<input type="button" class="south-west-alt" value="South West Alt" />
65+
<input type="button" class="south-west" value="South West" />
66+
<input type="button" class="south" value="South" />
67+
<input type="button" class="south-east" value="South East" />
68+
<input type="button" class="south-east-alt" value="South East Alt" />
69+
</div>
70+
</section>
71+
<section id="trapped-mousefollow" data-powertip="This is the tooltip text.&lt;br /&gt;It is tall so you can test the padding.">
72+
<h2>Trapped mouse following tooltip</h2>
73+
<p>This box has a mouse following tooltip.</p>
74+
<p>Trap it in the bottom right corner of the viewport. It should flip out of the way. It should not flip if it only hits one edge.</p>
75+
</section>
76+
<div id="session"><pre /></div>
7777
</body>
7878
</html>

0 commit comments

Comments
 (0)