From aba3d25d7a8124ae49c15f9bc81d7f74921aca37 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Mon, 14 Dec 2020 15:01:05 +0800
Subject: [PATCH] Always load browser default checkbox

---
 _includes/refactor-content.html | 27 ++++++++++++++++++---------
 assets/css/_addon/main.scss     |  6 ++++--
 assets/js/_commons/checkbox.js  |  8 ++++----
 3 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/_includes/refactor-content.html b/_includes/refactor-content.html
index 876d66e33..1e44de328 100644
--- a/_includes/refactor-content.html
+++ b/_includes/refactor-content.html
@@ -4,24 +4,33 @@
 
 {% assign _content = include.content %}
 
-<!--
-  Suroundding the markdown table with '<div class="table-wrapper">. and '</div>'
--->
+<!-- Suroundding the markdown table with '<div class="table-wrapper">. and '</div>' -->
 {% if _content contains '<table>' %}
-  {% assign _content = _content | replace: '<table>', '<div class="table-wrapper"><table>' %}
-  {% assign _content = _content | replace: '</table>', '</table></div>' %}
-  {% assign _content = _content | replace: '</table></div></code>', '</table></code>' %}
+  {% assign _content = _content
+    | replace: '<table>', '<div class="table-wrapper"><table>'
+    | replace: '</table>', '</table></div>'
+    | replace: '</table></div></code>', '</table></code>'
+  %}
 {% endif %}
 
-
 <!--
   Fixed kramdown code highlight rendering:
   https://github.com/penibelst/jekyll-compress-html/issues/101
   https://github.com/penibelst/jekyll-compress-html/issues/71#issuecomment-188144901
 -->
 {% if _content contains '<pre class="highlight">' %}
-  {% assign _content = _content | replace: '<div class="highlight"><pre class="highlight"><code', '<div class="highlight"><code' %}
-  {% assign _content = _content | replace: '</code></pre></div>', '</code></div>' %}
+  {% assign _content = _content
+    | replace: '<div class="highlight"><pre class="highlight"><code', '<div class="highlight"><code'
+    | replace: '</code></pre></div>', '</code></div>'
+  %}
 {% endif %}
 
+<!-- Add attribute 'hide-bullet' to the checkbox list -->
+{% if _content contains '<li class="task-list-item"><' %}
+  {% assign _content = _content
+    | replace: '"task-list-item"><', '"task-list-item" hide-bullet><'
+  %}
+{% endif %}
+
+<!-- return -->
 {{ _content }}
diff --git a/assets/css/_addon/main.scss b/assets/css/_addon/main.scss
index f88615a40..ab8bd9f83 100644
--- a/assets/css/_addon/main.scss
+++ b/assets/css/_addon/main.scss
@@ -866,7 +866,7 @@ div.post-content .table-wrapper {
       padding-left: 2rem;
     }
 
-    // attribute 'hide-bullet' added by JS
+    // attribute 'hide-bullet' was added by liquid
     .task-list-item[hide-bullet] {
       list-style-type: none;
 
@@ -898,10 +898,12 @@ div.post-content .table-wrapper {
           }
         }
       }
+
     } // .task-list-item
 
     input[type=checkbox] {
-      display: none;
+      margin: 0 .5rem .2rem -1.3rem;
+      vertical-align: middle;
     }
 
   } // ul
diff --git a/assets/js/_commons/checkbox.js b/assets/js/_commons/checkbox.js
index 39d9d3856..93ab6d1e8 100644
--- a/assets/js/_commons/checkbox.js
+++ b/assets/js/_commons/checkbox.js
@@ -3,10 +3,10 @@
  */
 
 $(function() {
-  /* hide bullet of checkbox item */
-  $("li.task-list-item:has(input)").attr("hide-bullet", "");
+  /* hide browser default checkbox */
+  $("input[type=checkbox]").addClass("unloaded");
   /* create checked checkbox */
-  $("input[type=checkbox][checked=checked]").before("<span checked></span>");
+  $("input[type=checkbox][checked]").before("<span checked></span>");
   /* create normal checkbox */
-  $("input[type=checkbox]:not([checked=checked])").before("<span></span>");
+  $("input[type=checkbox]:not([checked])").before("<span></span>");
 });