Merge pull request #577 from Martii/someClientSidejQueryFixes

Some misc client side jQuery fixes

Auto-merge

Author: Martii

views/includes/scripts/commentReplyScript.html

@@ -1,5 +1,10 @@
 <script type="text/javascript">
   (function () {
+
+    var events = 'DOMContentLoaded load resize scroll';
+    var handler = null;
+    var didCallback = false;
+
     $('#reply-control').on('show.bs.collapse', function () {
       // Show spacer div
       $('#show-reply-form-when-visible').css({
@@ -18,17 +23,19 @@
     });
 
     $('.btn-comment-reply').click(function (aE) {
-      $('#reply-control').collapse('show');
-
       var $comment = $(aE.target).closest('.topic-post');
       var $author = $comment.find('.topic-meta-data .names .username').first();
       var $replyTextarea = $('#reply-control textarea[name="comment-content"]');
+      var value = null;
+
+      $('#reply-control').collapse('show');
 
       document.location.hash = $comment.attr('id');
 
-      var value = $replyTextarea.val();
+      value = $replyTextarea.val();
       if (!/^\s*$/.test(value)) {
-        value += '\n\n'; // Add linebreaks if reply already started.
+        // Add linebreaks if reply already started.
+        value += '\n\n';
       }
       value += '[Re](' + document.location.href.replace(/\(/g, '%28').replace(/\)/g, '%29') + '): ';
       value += '[@' + $author.text() + '](' + $author.attr('href') + '): ';
@@ -37,43 +44,29 @@
       $replyTextarea.focus();
     });
 
-    function isElementInViewport(aEl) {
-      if (aEl instanceof jQuery) {
-        aEl = aEl[0];
-      }
-
-      var rect = aEl.getBoundingClientRect();
-
-      return (
-        rect.top >= 0 &&
-        rect.left >= 0 &&
-        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
-        rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
-      );
-    }
-
-    var hasShownReplyForm = false;
     function callback(aEl) {
-      if (!hasShownReplyForm) {
-        $('#reply-control').collapse('show');
-        hasShownReplyForm = true;
+      if (!didCallback) {
+        didCallback = true;
 
+        $('#reply-control').collapse('show');
         $('#reply-control textarea[name="comment-content"]').focus();
       }
     }
 
+    {{> includes/scripts/isElementInViewport.js }}
+
     function fireIfElementVisible(aEl, aCallback) {
       return function () {
         if (isElementInViewport(aEl)) {
+          $(window).off(events, handler);
+
           aCallback(aEl);
         }
       }
     }
 
-    var handler = fireIfElementVisible($('#show-reply-form-when-visible'), callback);
-
-    // jQuery
-    $(window).on('DOMContentLoaded load resize scroll', handler);
+    handler = fireIfElementVisible($('#show-reply-form-when-visible'), callback);
+    $(window).on(events, handler);
 
   })();
 </script>

views/includes/scripts/hideReminders.html

@@ -1,24 +1,13 @@
 <script type="text/javascript">
   (function () {
-    function isElementInViewport(aEl) {
-      if (aEl instanceof jQuery) {
-        aEl = aEl[0];
-      }
-
-      var rect = aEl.getBoundingClientRect();
 
-      return (
-        rect.top >= 0 &&
-        rect.left >= 0 &&
-        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
-        rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
-      );
-    }
+    var events = 'focus resize scroll';
+    var handler = null;
+    var didCallback = false;
 
-    var hasShownReminders = false;
     function callback(aEl) {
-      if (!hasShownReminders) {
-        hasShownReminders = true;
+      if (!didCallback) {
+        didCallback = true;
 
         setTimeout(function () {
           $('.reminders .alert .close').each(function () {
@@ -28,17 +17,20 @@
       }
     }
 
+    {{> includes/scripts/isElementInViewport.js }}
+
     function fireIfElementVisible(aEl, aCallback) {
       return function () {
         if (isElementInViewport(aEl)) {
+          $(window).off(events, handler);
+
           aCallback(aEl);
         }
       }
     }
 
-    var handler = fireIfElementVisible($('.reminders'), callback);
-
-    $(window).on('focus resize scroll', handler);
+    handler = fireIfElementVisible($('.reminders'), callback);
+    $(window).on(events, handler);
 
   })();
 </script>

views/includes/scripts/isElementInViewport.js

@@ -0,0 +1,16 @@
+function isElementInViewport(aEl) {
+  var rect = null;
+
+  if (aEl instanceof jQuery) {
+    aEl = aEl[0];
+  }
+
+  rect = aEl.getBoundingClientRect();
+
+  return (
+    rect.top >= 0 &&
+    rect.left >= 0 &&
+    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && // or $(window).height()
+    rect.right <= (window.innerWidth || document.documentElement.clientWidth) // or $(window).width()
+  );
+}

views/includes/scripts/showTopPagination.html

@@ -1,30 +1,22 @@
 <script type="text/javascript">
   (function () {
-    function isElementInViewport(aEl) {
-      if (aEl instanceof jQuery) {
-        aEl = aEl[0];
-      }
 
-      var rect = aEl.getBoundingClientRect();
+    var events = 'scroll';
+    var handler = null;
+    var didCallback = false;
 
-      return (
-        rect.top >= 0 &&
-        rect.left >= 0 &&
-        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
-        rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
-      );
-    }
+    var lastScrollTop = 0;
+    var hasScrolledDown = false;
 
-    var hasShownPagination = false;
     function callback(aEl) {
-      if (!hasShownPagination) {
+      if (!didCallback) {
+        didCallback = true;
+
         aEl.collapse('show');
-        hasShownPagination = true;
       }
     }
 
-    var lastScrollTop = 0;
-    var hasScrolledDown = false;
+    {{> includes/scripts/isElementInViewport.js }}
 
     function fireIfElementVisible(aEl, aCallback) {
       return function () {
@@ -34,17 +26,17 @@
           hasScrolledDown = true;
         } else {
           if (isElementInViewport(aEl) && hasScrolledDown) {
+            $(window).off(events, handler);
+
             aCallback(aEl);
           }
         }
         lastScrollTop = scrollTop;
       }
     }
 
-    var handler = fireIfElementVisible($('.pagination:first').parent(), callback);
-
-    // jQuery
-    $(window).on('scroll', handler);
+    handler = fireIfElementVisible($('.pagination:first').parent(), callback);
+    $(window).on(events, handler);
 
   })();
 </script>