清理评论加载的代码 (#586)

* separate CSS and Javascript from the layout file

* remove date in search page

* avoid exposing global functions

* only select iframes that have "data-src" attributes

content/search.md

@@ -1,6 +1,5 @@
 ---
 title: 搜索
-date: '2009-03-15T23:48:26+00:00'
 weight: 8
 menu: main
 ---

layouts/partials/comments.html

@@ -4,39 +4,8 @@
 </section>
 
 <div id="comment-box">
-    <iframe id="forum-frame" style="visibility:hidden;border:none;display:block;width:100%;height:0;"></iframe>
+    <iframe id="forum-frame" data-src="{{ .Site.Params.comment_embed_url }}{{ .Params.forum_id }}"></iframe>
 </div>
 
-<script type="text/javascript">
-function show_comment_box() {
-    var frame = document.getElementById("forum-frame");
-    frame.src = "{{ .Site.Params.comment_embed_url }}{{ .Params.forum_id }}";
-    frame.style.height = "800px";
-    frame.style.visibility = "visible";
-}
-
-// https://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling/488073#488073
-function is_visible(elem) {
-    var elem_top = elem.getBoundingClientRect().top;
-    var elem_bot = elem.getBoundingClientRect().bottom;
-    var is_vis = (elem_top >= 0) && (elem_bot <= window.innerHeight);
-    return is_vis;
-}
-
-var comment_box = document.getElementById("comment-box");
-// If the comment box is already in the current screen, start loading comments
-if(is_visible(comment_box)) {
-    show_comment_box()
-} else {
-    // Otherwise, attach the action to the scroll event
-    document.body.onscroll = function() {
-        var comment_box = document.getElementById("comment-box");
-        if(is_visible(comment_box)) {
-            // Run only once
-            document.body.onscroll = null;
-            show_comment_box();
-        }
-    }
-}
-</script>
+<script type="text/javascript" src="/js/comments.js"></script>
 {{ end }}

static/css/custom.css

@@ -49,3 +49,13 @@ article a:hover { font-weight: bold; color: #00b0cf; }
 .nav-next { text-align: right; }
 
 .nav-sep { color: transparent; }
+
+/* iframe of Flarum page */
+#forum-frame {
+  display: block;
+  border: none;
+  width: 100%;
+  /* height and visibility will be changed by Javascript on loading */
+  visibility: hidden;
+  height: 0;
+}

static/js/comments.js

@@ -0,0 +1,45 @@
+(function() {
+
+function show_iframe(iframe_elem) {
+    if (iframe_elem.hasAttribute("src")) {
+        return;
+    }
+    iframe_elem.src = iframe_elem.getAttribute("data-src");
+    iframe_elem.style.height = "700px";
+    iframe_elem.style.visibility = "visible";
+}
+
+// https://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling/488073#488073
+function on_screen(elem) {
+    var elem_top = elem.getBoundingClientRect().top;
+    var elem_bot = elem.getBoundingClientRect().bottom;
+    var on_scr = (elem_top >= 0) && (elem_bot <= window.innerHeight);
+    return on_scr;
+}
+
+function iframe_delayed_loading(iframe_elem) {
+    // If the element is already on the current screen, start loading it
+    if (on_screen(iframe_elem)) {
+        show_iframe(iframe_elem);
+    } else {
+        // Otherwise, attach the action to the scroll event
+        function listener() {
+            if (on_screen(iframe_elem)) {
+                // Run only once
+                document.removeEventListener("scroll", listener);
+                show_iframe(iframe_elem);
+            }
+        }
+        document.addEventListener("scroll", listener);
+    }
+}
+
+// Find all iframes
+var iframes = document.querySelectorAll("iframe[data-src]");
+var len = iframes.length;
+var i;
+for (i = 0; i < len; i++) {
+    iframe_delayed_loading(iframes[i]);
+}
+
+})();