Skip to content

Commit e6d4cfb

Browse files
author
Martii
committed
Some misc client side jQuery fixes
* Turn off some init event handlers once they are triggered... applies to reminders and top pagination * Keeping local conditionals in as turning off event handlers take longer than a local scoped variable boolean toggle. * Some STYLEGUIDE.md conformance in these files * Use mustache *(*mu2* package)* to load common, usually unchanging, .js code into local scope since it's shared across these e.g. make a client side library .js * Renamed a few common variables... still plenty readable and easier to manage across the board * jQuery `load` event [is said](http://www.w3schools.com/jquery/event_load.asp) to be deprecated but keeping in for possible backward compatibility * Scoot some comments around... and remove the "jQuery" comment... we already know it's jQuery
1 parent 6334442 commit e6d4cfb

4 files changed

Lines changed: 60 additions & 67 deletions

File tree

‎views/includes/scripts/commentReplyScript.html‎

Lines changed: 20 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
<script type="text/javascript">
22
(function () {
3+
4+
var events = 'DOMContentLoaded load resize scroll';
5+
var handler = null;
6+
var didCallback = false;
7+
38
$('#reply-control').on('show.bs.collapse', function () {
49
// Show spacer div
510
$('#show-reply-form-when-visible').css({
@@ -18,17 +23,19 @@
1823
});
1924

2025
$('.btn-comment-reply').click(function (aE) {
21-
$('#reply-control').collapse('show');
22-
2326
var $comment = $(aE.target).closest('.topic-post');
2427
var $author = $comment.find('.topic-meta-data .names .username').first();
2528
var $replyTextarea = $('#reply-control textarea[name="comment-content"]');
29+
var value = null;
30+
31+
$('#reply-control').collapse('show');
2632

2733
document.location.hash = $comment.attr('id');
2834

29-
var value = $replyTextarea.val();
35+
value = $replyTextarea.val();
3036
if (!/^\s*$/.test(value)) {
31-
value += '\n\n'; // Add linebreaks if reply already started.
37+
// Add linebreaks if reply already started.
38+
value += '\n\n';
3239
}
3340
value += '[Re](' + document.location.href.replace(/\(/g, '%28').replace(/\)/g, '%29') + '): ';
3441
value += '[@' + $author.text() + '](' + $author.attr('href') + '): ';
@@ -37,43 +44,29 @@
3744
$replyTextarea.focus();
3845
});
3946

40-
function isElementInViewport(aEl) {
41-
if (aEl instanceof jQuery) {
42-
aEl = aEl[0];
43-
}
44-
45-
var rect = aEl.getBoundingClientRect();
46-
47-
return (
48-
rect.top >= 0 &&
49-
rect.left >= 0 &&
50-
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
51-
rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
52-
);
53-
}
54-
55-
var hasShownReplyForm = false;
5647
function callback(aEl) {
57-
if (!hasShownReplyForm) {
58-
$('#reply-control').collapse('show');
59-
hasShownReplyForm = true;
48+
if (!didCallback) {
49+
didCallback = true;
6050

51+
$('#reply-control').collapse('show');
6152
$('#reply-control textarea[name="comment-content"]').focus();
6253
}
6354
}
6455

56+
{{> includes/scripts/isElementInViewport.js }}
57+
6558
function fireIfElementVisible(aEl, aCallback) {
6659
return function () {
6760
if (isElementInViewport(aEl)) {
61+
$(window).off(events, handler);
62+
6863
aCallback(aEl);
6964
}
7065
}
7166
}
7267

73-
var handler = fireIfElementVisible($('#show-reply-form-when-visible'), callback);
74-
75-
// jQuery
76-
$(window).on('DOMContentLoaded load resize scroll', handler);
68+
handler = fireIfElementVisible($('#show-reply-form-when-visible'), callback);
69+
$(window).on(events, handler);
7770

7871
})();
7972
</script>

‎views/includes/scripts/hideReminders.html‎

Lines changed: 11 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,13 @@
11
<script type="text/javascript">
22
(function () {
3-
function isElementInViewport(aEl) {
4-
if (aEl instanceof jQuery) {
5-
aEl = aEl[0];
6-
}
7-
8-
var rect = aEl.getBoundingClientRect();
93

10-
return (
11-
rect.top >= 0 &&
12-
rect.left >= 0 &&
13-
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
14-
rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
15-
);
16-
}
4+
var events = 'focus resize scroll';
5+
var handler = null;
6+
var didCallback = false;
177

18-
var hasShownReminders = false;
198
function callback(aEl) {
20-
if (!hasShownReminders) {
21-
hasShownReminders = true;
9+
if (!didCallback) {
10+
didCallback = true;
2211

2312
setTimeout(function () {
2413
$('.reminders .alert .close').each(function () {
@@ -28,17 +17,20 @@
2817
}
2918
}
3019

20+
{{> includes/scripts/isElementInViewport.js }}
21+
3122
function fireIfElementVisible(aEl, aCallback) {
3223
return function () {
3324
if (isElementInViewport(aEl)) {
25+
$(window).off(events, handler);
26+
3427
aCallback(aEl);
3528
}
3629
}
3730
}
3831

39-
var handler = fireIfElementVisible($('.reminders'), callback);
40-
41-
$(window).on('focus resize scroll', handler);
32+
handler = fireIfElementVisible($('.reminders'), callback);
33+
$(window).on(events, handler);
4234

4335
})();
4436
</script>

‎views/includes/scripts/isElementInViewport.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
function isElementInViewport(aEl) {
2+
var rect = null;
3+
4+
if (aEl instanceof jQuery) {
5+
aEl = aEl[0];
6+
}
7+
8+
rect = aEl.getBoundingClientRect();
9+
10+
return (
11+
rect.top >= 0 &&
12+
rect.left >= 0 &&
13+
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && // or $(window).height()
14+
rect.right <= (window.innerWidth || document.documentElement.clientWidth) // or $(window).width()
15+
);
16+
}

‎views/includes/scripts/showTopPagination.html‎

Lines changed: 13 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,22 @@
11
<script type="text/javascript">
22
(function () {
3-
function isElementInViewport(aEl) {
4-
if (aEl instanceof jQuery) {
5-
aEl = aEl[0];
6-
}
73

8-
var rect = aEl.getBoundingClientRect();
4+
var events = 'scroll';
5+
var handler = null;
6+
var didCallback = false;
97

10-
return (
11-
rect.top >= 0 &&
12-
rect.left >= 0 &&
13-
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
14-
rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
15-
);
16-
}
8+
var lastScrollTop = 0;
9+
var hasScrolledDown = false;
1710

18-
var hasShownPagination = false;
1911
function callback(aEl) {
20-
if (!hasShownPagination) {
12+
if (!didCallback) {
13+
didCallback = true;
14+
2115
aEl.collapse('show');
22-
hasShownPagination = true;
2316
}
2417
}
2518

26-
var lastScrollTop = 0;
27-
var hasScrolledDown = false;
19+
{{> includes/scripts/isElementInViewport.js }}
2820

2921
function fireIfElementVisible(aEl, aCallback) {
3022
return function () {
@@ -34,17 +26,17 @@
3426
hasScrolledDown = true;
3527
} else {
3628
if (isElementInViewport(aEl) && hasScrolledDown) {
29+
$(window).off(events, handler);
30+
3731
aCallback(aEl);
3832
}
3933
}
4034
lastScrollTop = scrollTop;
4135
}
4236
}
4337

44-
var handler = fireIfElementVisible($('.pagination:first').parent(), callback);
45-
46-
// jQuery
47-
$(window).on('scroll', handler);
38+
handler = fireIfElementVisible($('.pagination:first').parent(), callback);
39+
$(window).on(events, handler);
4840

4941
})();
5042
</script>

0 commit comments

Comments
 (0)