EVOLUTION-NINJA

Edit File: Video2.php

<?php
    echo view('includes/flow-header');    
?>

<section class="spec-main">
  <div class="row">
    <div class="col-sm-3">
      <div class="spec-left">
        <ul>
          <li><a href="">VIDEOS</a></li>
        </ul>
      </div>
    </div>
    <div class="col-sm-9">
      <div class="cme-right-new" style="padding: 2% 5% 0 0;">
        <div class="row">
          <div class="col-sm-9"></div>
          <div class="col-sm-3 mb-5" id="go-back-new">
            <a href="<?php echo base_url('ls1-video');?>"><i class="fa fa-arrow-left" aria-hidden="true"></i>Back</a>
          </div>
        </div>

<div class="videos">
          <h4>Videos</h4>
          <div class="row pt-5">
            <div class="col-sm-6" id="right-border">
              <div class="video-card1 border-r">
                <video width="" height="" controls>
                  <source src="<?php echo base_url('public/assets/videos/youtube_video.mp4');?>" type="video/mp4">
                </video>
                <div class="video-info1">
                  <h5>Daily Update</h5>
                  <p><img src="<?php echo base_url('public/assets/images/LS_img.png');?>"><span>James</span>
                    &nbsp 1 Day ago<button type="btn" id="but" onclick="myfunc22()"><img
                        src="<?php echo base_url('public/assets/images/Comment.png');?>"></button>
                  </p>
                </div>
              </div>
            </div>
            <div class="col-sm-6 comment-full2" id="comment-full">
              <div class="add-right">
                <div class="post__container" id="post-container">
                  <article class="post"></article>
                  <div class="comment__box">
                    
                    <input type="text" name="comment-input" class="comment__input" placeholder="Add a comment ...">
                    <button name="post-comment" class="btn btn--primary">Post</button>
                  </div>
                  <div class="comments" id="comments"></div>
                </div>
                
              </div>
            </div>
          </div>

</div>

<?php
                echo view('includes/flow-footer');    
            ?>

import { BUTTON_TYPES } from "./public/assets/js/button-types.js";

// Dom elements

const postContainerElement = document.getElementById("post-container");

const commentsContainerElement = document.getElementById("comments");

// Event listeners

postContainerElement.addEventListener("click", postEventsHandler);

// Functions

function replyClickHandler(e) {
            const commentWrapper = e.target.closest(".comment__container");

let replyContainer;

if (commentWrapper.dataset.type === "comment") {
              replyContainer = commentWrapper.querySelector(".replies");
            } else {
              replyContainer = commentWrapper.closest(".replies");
            }
            if (replyContainer.querySelector(".comment__box")) {
              return;
            }
            replyContainer.appendChild(getCommentBoxNode());
          }

function deleteCommentHandler(e) {
            e.target.closest("article.comment__container").remove();
          }

function editCommentHandler(e) {
            const commentNode = e.target
              .closest(".comment__container")
              .querySelector(".comment");

commentNode.appendChild(getEditCommentCTAElement());
            const comment = commentNode.querySelector("p.comment__content");
            comment.setAttribute("contentEditable", true);
            placeCursorAtEnd(comment);
            e.target.parentNode.remove();
          }

function cancelEditHandler(e) {
            const parent = e.target.parentNode;
            parent.parentNode.after(getCommentCTAElement());
            parent.remove();
          }

function saveUpdatedCommentHandler(e) {
            const parent = e.target.parentNode;
            parent.parentNode.after(getCommentCTAElement());
            parent.remove();
          }

// Utilities

function getCommentBoxNode() {
            const DIV = document.createElement("div");
            DIV.classList.add("comment__box", "mt-xs");

const INPUT = document.createElement("input");
            INPUT.setAttribute("type", "text");
            INPUT.setAttribute("name", "comment-input");
            INPUT.setAttribute("placeholder", "Add a reply ...");
            INPUT.classList.add("comment__input");

const BUTTON = document.createElement("button");
            BUTTON.setAttribute("name", "post-reply");
            BUTTON.classList.add("btn", "btn--primary");
            BUTTON.textContent = "Post";

DIV.append(INPUT, BUTTON);
            return DIV;
          }

function getCommentValue(e) {
            const inputElement = e.target.previousElementSibling;
            let value = "";
            if (
              inputElement?.nodeName === "INPUT" &&
              inputElement?.name === "comment-input"
            ) {
              value = inputElement.value;
              inputElement.value = "";
            }
            return value;
          }

function getCommentNode(commentValue, isComment = true) {
            const ARTICLE = document.createElement("article");
            ARTICLE.classList.add("comment__container");
            ARTICLE.dataset.type = isComment ? "comment" : "reply";

const DIV = document.createElement("div");
            DIV.classList.add("comment");

const PARAGRAPH = document.createElement("p");
            PARAGRAPH.classList.add("comment__content");
            PARAGRAPH.textContent = commentValue;

DIV.appendChild(PARAGRAPH);

ARTICLE.append(DIV, getCommentCTAElement());

if (isComment) {
              const DIV_REPLIES = document.createElement("div");
              DIV_REPLIES.classList.add("replies");
              ARTICLE.append(DIV_REPLIES);
            }

return ARTICLE;
            
          }

function getCommentCTAElement() {
            const DIV_CTA = document.createElement("div");
            DIV_CTA.classList.add("comment__cta");

const BUTTON_REPLY = getButtonElement(
              BUTTON_TYPES.replyToComment,
              "Reply",
              "btn btn--secondary"
            );

const BUTTON_EDIT = getButtonElement(
              BUTTON_TYPES.editComment,
              "Edit",
              "btn btn--secondary"
            );

const BUTTON_DELETE = getButtonElement(
              BUTTON_TYPES.deleteComment,
              "Delete",
              "btn btn--secondary"
            );

DIV_CTA.append(
              BUTTON_REPLY,
              getVerticalDividerElement(),
              BUTTON_EDIT,
              // getVerticalDividerElement(),
              // BUTTON_DELETE
            );

return DIV_CTA;
          }

function getEditCommentCTAElement() {
            const DIV_CTA = document.createElement("div");
            DIV_CTA.classList.add("comment__edit-cta");

const BUTTON_SAVE = getButtonElement(
              BUTTON_TYPES.saveChanges,
              "Save Changes",
              "btn btn--primary"
            );

const BUTTON_CANCEL = getButtonElement(
              BUTTON_TYPES.cancelChanges,
              "Cancel",
              "btn btn--tertiary"
            );

DIV_CTA.append(BUTTON_SAVE, BUTTON_CANCEL);

return DIV_CTA;
          }

function getButtonElement(name, text, classes) {
            const BUTTON = document.createElement("button");
            BUTTON.textContent = text;
            BUTTON.className = classes;
            BUTTON.name = name;
            return BUTTON;
          }

function postComment(comment) {
            const commentNode = getCommentNode(comment);
            commentsContainerElement.prepend(commentNode);
          }

function postReplyToComment(e, comment) {
            const commentNode = getCommentNode(comment, false);
            const repliesContainer = e.target.closest(".replies");
            repliesContainer.appendChild(commentNode);
            e.target.parentNode.remove();
          }

function getVerticalDividerElement() {
            const DIV = document.createElement("div");
            DIV.classList.add("vertical-divider");
            return DIV;
          }

function placeCursorAtEnd(node) {
            const selection = window.getSelection();
            const range = document.createRange();
            selection.removeAllRanges();
            range.selectNodeContents(node);
            range.collapse(false);
            selection.addRange(range);
            node.focus();
          }

var myDiv = document.getElementById('post-container');
          
          myDiv.addEventListener("scroll",myPageScroll);

function myPageScroll(){
            var myScrollTop= myDiv.scrollTop;
            var myScrollHeight = myDiv.scrollHeight;

var diff = myScrollHeight - myScrollTop;
            // console.log(myScrollTop +" " +myScrollHeight);
            var height = myDiv.clientHeight;

var offPageHeight =50;
            if(diff< (height + offPageHeight)){
              console.log("call ajax to refresh");
            }
          }

</script>