_includes/static_comments.html in jekyll-theme-mehdix-rtl-1.1.1 vs _includes/static_comments.html in jekyll-theme-mehdix-rtl-1.2.0

@@ -2,42 +2,73 @@
 {% endcapture %}
 <section id="static-comments">
   {% capture key %}{{ page.id | remove_first: "/" }}{% endcapture %}
   {% assign comments = site.data.comments[key] %}
   {% if comments %}
-  <h4 id="comments-header">نظرات خوانندگان</h4>
+  <h4 id="comments-header">دیدگاه‌ها</h4>
   <div id="comments">
     {% for comment in comments %}
-      <article>
+    <div class="comment-chain">
+      <article id="{{ comment.id }}">
         <div class="comment-image-wrapper">
           <img class="comment-avatar" src="https://www.gravatar.com/avatar/{{comment.email}}?s=200&d=robohash" />
         </div>
         <div class="comment-body-wrapper">
           <span class="comment-meta">
             <small>
               {% if comment.website != '' %}
-                <a href={{comment.website}} target="_">{{ comment.name }}</a>
+                <a href={{comment.website}} target="_"><span commenter>{{ comment.name }}</span></a>
               {% else %}
-                {{ comment.name }}
+                <span commenter>{{ comment.name }}</span>
               {% endif %}
             </small>
-            <small> &nbsp; {{ comment.date | jdate: "%d %b %Y" | habify }}</small>
+            <small> &nbsp; <a href="#{{ comment.id }}">{{ comment.created_at | jdate: "%d %b %Y" | habify }}</a></small>
+            <small> &nbsp; <a href="#comment-form" onclick="replyTo('{{ comment.id }}')">پاسخ</a></small>
+            <span style="display:none" commentId>{{ comment.id }}</span>
           </span>
           {{ comment.message | replace: "<p>", '' | replace: "</p>", newLine | replace: "<br>", newLine | strip_html | markdownify }}
         </div>
       </article>
+
+        {% if comment.reply_to %}
+          {% for cmt in comments %}
+            {% if cmt.id == comment.reply_to %}
+              <article class="sub-comment">
+
+                <div class="comment-image-wrapper">
+                  <img class="comment-avatar" src="https://www.gravatar.com/avatar/{{comment.email}}?s=200&d=robohash" />
+                </div>
+                <div class="comment-body-wrapper">
+                  <span class="comment-meta">
+                    <small>
+                      {% if cmt.website != '' %}
+                        <a href={{comment.website}} target="_"><span commenter>{{ cmt.name }}</span></a>
+                      {% else %}
+                        {{ cmt.name }}
+                      {% endif %}
+                    </small>
+                    <small> &nbsp; <a href="#{{ cmt.id }}">{{ cmt.created_at | jdate: "%d %b %Y" | habify }}</a></small>
+                  </span>
+                  {{ cmt.message | replace: "<p>", '' | replace: "</p>", newLine | replace: "<br>", newLine | strip_html | markdownify }}
+                </div>
+
+              </article>
+              {% break %}
+            {% endif %}
+          {% endfor %}
+        {% endif %}
+
+    </div>
     {% endfor%}
   </div>
   {% endif %}
 
   <form id="comment-form" name="comment" netlify-honeypot="bot-field" netlify>
     <input name="bot-field" style="display:none">
     <input name="page_id" style="display:none" value="{{page.id}}">
-    <input name="page_uuid" style="display:none" value="{{page.uuid}}">
-    <input name="page_date" style="display:none" value="{{page.date}}">
-    <input name="page_title" style="display:none" value="{{page.title}}">
-    <label for="message">دیدگاه<sup class="required">*</sup> &nbsp;<small>می‌توانید با <a href="http://commonmark.org/help/" target="_">مارک‌داون</a> هم بنویسید.</small>
+    <input id="reply-to" name="reply-to" style="display:none">
+    <label for="message">دیدگاه<sup class="required">*</sup> &nbsp;<small>می‌توانید با <a href="http://commonmark.org/help/" target="_">مارک‌داون</a> هم بنویسید.</small><br><small id="replyToVisualClue"></small>
       <textarea id="message" name="message" required alt="no!!" onkeyup="preview()"></textarea>
       <div id="preview"></div>
     </label>
     <label for="name">نام<sup class="required">*</sup>
       <input id="name" type="text" name="name" required>
@@ -55,11 +86,17 @@
 
 </section>
 <script src="{{ 'assets/js/showdown.min.js' | absolute_url }}" type="text/javascript">
 </script>
 <script type="text/javascript">
-  function preview(){
+  function preview() {
     var converter = new showdown.Converter();
     var markdown = document.getElementById("message").value;
     document.getElementById("preview").innerHTML = converter.makeHtml(markdown);
+  }
+
+  function replyTo(commentID) {
+    var comment = document.getElementById(commentID);
+    document.getElementById("reply-to").value = comment.querySelector("span[commentId]").innerText;
+    document.getElementById("replyToVisualClue").innerText = "[در جواب " + comment.querySelector("span[commenter]").innerText + "]";
   }
 </script>
\ No newline at end of file