LIL-96 Реализация комментария к лайку или курсу (фронт)

apps/course/templates/course/blocks/comment.html

@@ -1,6 +1,6 @@
 {% load static %}
 
-<div class="questions__item {% if node.is_child_node %}questions__item_reply{% endif %}">
+<div id="question__{{ node.id }}" class="questions__item {% if node.is_child_node %}questions__item_reply{% endif %}">
   {% if node.author.photo %}
   <div class="questions__ava ava">
     <img class="ava__pic" src="{{ node.author.photo.url }}">
@@ -19,7 +19,7 @@
       <div class="questions__content">{{ node.content }}</div>
     </div>
     <div class="questions__foot">
-      <button class="questions__action">ОТВЕТИТЬ</button>
+      <button class="questions__action question__reply-button" data-reply-id="{{ node.id }}">ОТВЕТИТЬ</button>
     </div>
   </div>
 </div>

apps/course/templates/course/course.html

@@ -195,14 +195,21 @@
 
     <div class="title">Задавайте вопросы:</div>
     <div class="questions">
-      <div class="questions__form">
-        <div class="questions__ava ava"><img class="ava__pic" src="{% static 'img/user.jpg' %}"></div>
-        <div class="questions__wrap">
-          <div class="questions__field"><textarea class="questions__textarea" placeholder="Спросите автора курса интересующие вас вопросы"></textarea></div><button class="questions__btn btn btn_light">ОТПРАВИТЬ</button></div>
-      </div>
       <div class="questions__list">
           {% include "./blocks/comments.html" with object=course %}
       </div>
+      <form class="questions__form" method="post" action="{% url 'coursecomment' course_id=course.id %}">
+        <input type="hidden" name="reply_id">
+        <div class="questions__ava ava"><img class="ava__pic" src="{% static 'img/user.jpg' %}"></div>
+        <div class="questions__wrap">
+          <div class="questions__reply-info">В ответ на <a
+              href="" class="questions__reply-anchor">этот комментарий</a>. <a href="#" class="questions__reply-cancel grey-link">Отменить</a></div>
+          <div class="questions__field"><textarea class="questions__textarea"
+                                                  placeholder="Спросите автора курса интересующие вас вопросы"></textarea>
+          </div>
+          <button class="questions__btn btn btn_light">ОТПРАВИТЬ</button>
+        </div>
+      </form>
     </div>
   </div>
 </div>

web/build/css/app.css

@@ -336,227 +336,6 @@ html {
   fill: #1C2635;
 }
 
-/**
- * Owl Carousel v2.2.1
- * Copyright 2013-2017 David Deutsch
- * Licensed under  ()
- */
-/*
- *  Owl Carousel - Core
- */
-.owl-carousel {
-  display: none;
-  width: 100%;
-  -webkit-tap-highlight-color: transparent;
-  /* position relative and z-index fix webkit rendering fonts issue */
-  position: relative;
-  z-index: 1;
-}
-
-.owl-carousel .owl-stage {
-  position: relative;
-  -ms-touch-action: pan-Y;
-  -moz-backface-visibility: hidden;
-  /* fix firefox animation glitch */
-}
-
-.owl-carousel .owl-stage:after {
-  content: ".";
-  display: block;
-  clear: both;
-  visibility: hidden;
-  line-height: 0;
-  height: 0;
-}
-
-.owl-carousel .owl-stage-outer {
-  position: relative;
-  overflow: hidden;
-  /* fix for flashing background */
-  -webkit-transform: translate3d(0px, 0px, 0px);
-}
-
-.owl-carousel .owl-wrapper,
-.owl-carousel .owl-item {
-  -webkit-backface-visibility: hidden;
-  -moz-backface-visibility: hidden;
-  -ms-backface-visibility: hidden;
-  -webkit-transform: translate3d(0, 0, 0);
-  -moz-transform: translate3d(0, 0, 0);
-  -ms-transform: translate3d(0, 0, 0);
-}
-
-.owl-carousel .owl-item {
-  position: relative;
-  min-height: 1px;
-  float: left;
-  -webkit-backface-visibility: hidden;
-  -webkit-tap-highlight-color: transparent;
-  -webkit-touch-callout: none;
-}
-
-.owl-carousel .owl-item img {
-  display: block;
-  width: 100%;
-}
-
-.owl-carousel .owl-nav.disabled,
-.owl-carousel .owl-dots.disabled {
-  display: none;
-}
-
-.owl-carousel .owl-nav .owl-prev,
-.owl-carousel .owl-nav .owl-next,
-.owl-carousel .owl-dot {
-  cursor: pointer;
-  cursor: hand;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-.owl-carousel.owl-loaded {
-  display: block;
-}
-
-.owl-carousel.owl-loading {
-  opacity: 0;
-  display: block;
-}
-
-.owl-carousel.owl-hidden {
-  opacity: 0;
-}
-
-.owl-carousel.owl-refresh .owl-item {
-  visibility: hidden;
-}
-
-.owl-carousel.owl-drag .owl-item {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-.owl-carousel.owl-grab {
-  cursor: move;
-  cursor: -webkit-grab;
-  cursor: grab;
-}
-
-.owl-carousel.owl-rtl {
-  direction: rtl;
-}
-
-.owl-carousel.owl-rtl .owl-item {
-  float: right;
-}
-
-/* No Js */
-.no-js .owl-carousel {
-  display: block;
-}
-
-/*
- *  Owl Carousel - Animate Plugin
- */
-.owl-carousel .animated {
-  animation-duration: 1000ms;
-  animation-fill-mode: both;
-}
-
-.owl-carousel .owl-animated-in {
-  z-index: 0;
-}
-
-.owl-carousel .owl-animated-out {
-  z-index: 1;
-}
-
-.owl-carousel .fadeOut {
-  animation-name: fadeOut;
-}
-
-@keyframes fadeOut {
-  0% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-
-/*
- * 	Owl Carousel - Auto Height Plugin
- */
-.owl-height {
-  transition: height 500ms ease-in-out;
-}
-
-/*
- * 	Owl Carousel - Lazy Load Plugin
- */
-.owl-carousel .owl-item .owl-lazy {
-  opacity: 0;
-  transition: opacity 400ms ease;
-}
-
-.owl-carousel .owl-item img.owl-lazy {
-  transform-style: preserve-3d;
-}
-
-/*
- * 	Owl Carousel - Video Plugin
- */
-.owl-carousel .owl-video-wrapper {
-  position: relative;
-  height: 100%;
-  background: #000;
-}
-
-.owl-carousel .owl-video-play-icon {
-  position: absolute;
-  height: 80px;
-  width: 80px;
-  left: 50%;
-  top: 50%;
-  margin-left: -40px;
-  margin-top: -40px;
-  background: url("owl.video.play.png") no-repeat;
-  cursor: pointer;
-  z-index: 1;
-  -webkit-backface-visibility: hidden;
-  transition: transform 100ms ease;
-}
-
-.owl-carousel .owl-video-play-icon:hover {
-  -ms-transform: scale(1.3, 1.3);
-  transform: scale(1.3, 1.3);
-}
-
-.owl-carousel .owl-video-playing .owl-video-tn,
-.owl-carousel .owl-video-playing .owl-video-play-icon {
-  display: none;
-}
-
-.owl-carousel .owl-video-tn {
-  opacity: 0;
-  height: 100%;
-  background-position: center center;
-  background-repeat: no-repeat;
-  background-size: contain;
-  transition: opacity 400ms ease;
-}
-
-.owl-carousel .owl-video-frame {
-  position: relative;
-  z-index: 1;
-  height: 100%;
-  width: 100%;
-}
-
 @font-face {
   font-family: ProximaNova-Regular;
   src: url("fonts/ProximaNova-Regular.woff2") format("woff2"), url("fonts/ProximaNova-Regular.woff") format("woff");
@@ -1772,6 +1551,17 @@ a.btn {
   max-height: 277px;
 }
 
+a.grey-link {
+  color: #A7A7A7;
+  border-bottom: 1px #ccc solid;
+  font-size: 14px;
+}
+
+a.grey-link:hover {
+  color: #000;
+  border-bottom: 1px #545454 solid;
+}
+
 .game {
   position: relative;
   padding: 70px 0 80px;
@@ -3268,9 +3058,9 @@ a.btn {
 }
 
 .questions__form {
-  margin-bottom: 40px;
+  margin-top: 40px;
-  padding-bottom: 20px;
+  padding-top: 20px;
-  border-bottom: 1px solid #E6E6E6;
+  border-top: 1px solid #E6E6E6;
 }
 
 .questions__item:not(:last-child) {
@@ -3281,6 +3071,11 @@ a.btn {
   padding-left: 80px;
 }
 
+.questions__reply-info {
+  display: none;
+  margin-bottom: 10px;
+}
+
 .questions__item_reply .questions__details {
   margin-bottom: 10px;
   padding: 20px;
@@ -3312,7 +3107,7 @@ a.btn {
 .questions__textarea {
   display: block;
   width: 100%;
-  height: 44px;
+  height: 70px;
   padding: 11px 15px;
   border-radius: 2px;
   font-size: 16px;

web/src/js/app.js

@@ -7,6 +7,6 @@ import "./modules/search";
 import "./modules/toggle";
 import "./modules/auth";
 import "./modules/select";
-// import "./modules/datepicker";
 import "./modules/tabs";
 import "./modules/popup";
+import "./modules/comments";

web/src/js/modules/comments.js

@@ -0,0 +1,60 @@
+import $ from 'jquery';
+
+$(document).ready(function () {
+    // Обработчик отправки комментария. Нам не важно, комментарий к курсу или к уроку - URL берется из action формы
+    $('form.questions__form').on('submit', function (e) {
+        e.preventDefault();
+
+        const submitButton = $(this).find('button.questions__action');
+        const replyToInput = $(this).find('input[name=reply_id]');
+        const replyToValue = replyToInput.val() ? parseInt(replyToInput.val()) : 0;
+        const commentTextarea = $(this).find('textarea.questions__textarea');
+        commentTextarea.attr('disabled', 'disabled');
+        submitButton.attr('disabled', 'disabled');
+
+        $.ajax($(this).attr('action'), {
+            method: 'post',
+            data: {
+                reply_id: replyToValue,
+                comment: commentTextarea.val(),
+            }
+        })
+            .done(function (data) {
+                console.log(data);
+                if (data.success === true) {
+                    if (replyToValue > 0) {
+                        $(`#question__${replyToValue}`).after(data.comment);
+                    } else {
+                        $('.questions__list').append(data.comment);
+                    }
+
+                    commentTextarea.val('');
+                }
+            })
+            .fail(function (xhr) {
+
+            })
+            .always(function () {
+                commentTextarea.removeAttr('disabled');
+                submitButton.removeAttr('disabled');
+            });
+    });
+
+    // Обработчик кнопки "Ответить"
+    $('.questions__list').on('click', 'button.question__reply-button', function () {
+        const replyId = $(this).attr('data-reply-id');
+        const form = $('form.questions__form');
+        form.find('input[name=reply_id]').val(replyId);
+        form.find('.questions__reply-anchor').attr('href', `#question__${replyId}`);
+        form.find('.questions__reply-info').show();
+    });
+
+    // Обработчик отмены комментирования в ответ на комментарий
+    $('.questions__reply-cancel').on('click', function (e) {
+        e.preventDefault();
+
+        const form = $('form.questions__form');
+        form.find('input[name=reply_id]').val(0);
+        form.find('.questions__reply-info').hide();
+    });
+});

web/src/sass/_common.sass

@@ -1165,6 +1165,14 @@ a.btn
     +m
       max-height: 185px 
 
+a.grey-link
+  color: #A7A7A7
+  border-bottom: 1px #ccc solid
+  font-size: 14px
+  &:hover
+    color: #000
+    border-bottom: 1px #545454 solid
+
 .game
   position: relative
   padding: 70px 0 80px
@@ -2376,9 +2384,9 @@ a.btn
   &__item
     display: flex
   &__form
-    margin-bottom: 40px
+    margin-top: 40px
-    padding-bottom: 20px
+    padding-top: 20px
-    border-bottom: 1px solid $border
+    border-top: 1px solid $border
   &__item
     &:not(:last-child)
       margin-bottom: 25px
@@ -2386,6 +2394,9 @@ a.btn
       padding-left: 80px
       +m
         padding: 0
+  &__reply-info
+    display: none
+    margin-bottom: 10px
   &__item_reply &__details
     margin-bottom: 10px
     padding: 20px
@@ -2413,7 +2424,7 @@ a.btn
   &__textarea
     display: block
     width: 100%
-    height: 44px
+    height: 70px
     padding: 11px 15px
     border-radius: 2px 
     font-size: 16px

web/src/sass/app.sass

@@ -1,5 +1,5 @@
 // done by arturmoroz.com
 @import helpers/all
 @import generated/sprite-svg
-@import lib/owl.carousel
+// @import lib/owl.carousel
 @import common