Always load browser default checkbox

mikesnotebook · Dec 14, 2020 · 85f170c · 85f170c
1 parent eb76d43
commit 85f170c
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 15 deletions.
diff --git 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
@@ -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
@@ -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>");
 });