EVOLUTION-NINJA
Edit File: video2.php
<?php echo view('includes/flow-header'); ?> <div id="fb-root"></div> <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v16.0" nonce="m1CHrP3f"></script> <section class="spec-main"> <div class="row"> <div class="col-sm-3"> <div class="spec-left"> <ul> <li><a href="">Videos e-learn Hub</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> --> <iframe width="400" height="280" src="https://player.vimeo.com/video/<?php echo $video[0]['video_link']; ?>" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> <div class="video-info1"> <h5><?php echo $video[0]['title']; ?></h5> <p><span><?php echo $dr_name; ?></span>   <?php echo time_elapsed_string($video[0]['created_at']); ?> <!-- <button type="btn" id="but" onclick="myfunc22()"> <i class="fa fa-share-alt" aria-hidden="true"></i> </button> --> <button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal" id="share">Share</button> </p> <input type = "hidden" id ="video_id" class="form-control"></input> <input type = "hidden" id ="replyToComment_id" class="form-control"></input> <!-- model --> <div class="container"> <!-- Trigger the modal with a button --> <!-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <h5>Share</h5> <button type="button" class="close" data-dismiss="modal">×</button> <!-- <h4 class="modal-title">Modal Header</h4> --> </div> <div class="modal-body"> <!-- <p>Some text in the modal.</p> --> <input type="text" name="" readonly value="https://medusys.in/ls2-video?id=<?php echo $video[0]['id']; ?>" class="form-control" id="url"> <button class="btn btn-primary" onclick="copyToClipboard()" id="copy">Copy</button> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> <!-- model --> </div> </div> </div> <div class="col-sm-6 comment-full2" id="comment-full"> <textarea rows="8" cols="" placeholder="Description" class="form-control" id="description"></textarea> </div> </div> <div class="row pt-3"> <div class="col-sm-12"> <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"> <?php foreach($commet_details as $c) { ?> <article class="comment__container" data-type="comment"> <div class="comment1"> <h6 class="comment__content1"><br><span><?php echo substr(ucwords($c['f_name']),0,1);?></span><?php echo $c['f_name']; ?></h6> </div> <div class="comment"><p class="comment__content"><?php echo $c['message']; ?></p></div> <div class="comment__cta"> <button class="btn btn--secondary" name="reply-to-comment" id= "<?php echo $c['id']; ?>">Reply</button> <div class="vertical-divider"></div> <!-- <button class="btn btn--secondary" name="edit-comment" id="undefined">Edit</button>--> </div> <div class="replies"> <?php foreach($reply_details as $r) { ?> <?php if($r['main_id'] == $c['id']){ ?> <article class="comment__container" data-type="reply"> <div class="comment1"> <h6 class="comment__content1"><br><span><?php echo substr(ucwords($r['f_name']),0,1);?></span><?php echo $r['f_name']; ?></h6> </div> <div class="comment"><p class="comment__content"><?php echo $r['message']; ?></p> </div> <div class="comment__cta"><button class="btn btn--secondary" name="reply-to-comment" id="<?php echo $r['id']; ?>">Reply</button><div class="vertical-divider"></div> <!-- <button class="btn btn--secondary" name="edit-comment" id="undefined">Edit</button> --> </div> </article> <?php } } ?> </div> </article> <?php } ?> </div> </div> </div> <div class="comments" id="comments"></div> </div> </div> </div> <!-- <a href="<?php echo base_url('ls4-video');?>" class="next-a1">NEXT</a> --> <?php echo view('includes/flow-footer'); ?> <?php function time_elapsed_string($datetime, $full = false) { $now = new DateTime; $ago = new DateTime($datetime); $diff = $now->diff($ago); $diff->w = floor($diff->d / 7); $diff->d -= $diff->w * 7; $string = array( 'y' => 'year', 'm' => 'month', 'w' => 'week', 'd' => 'day', 'h' => 'hour', 'i' => 'minute', 's' => 'second', ); foreach ($string as $k => &$v) { if ($diff->$k) { $v = $diff->$k . ' ' . $v . ($diff->$k > 1 ? 's' : ''); } else { unset($string[$k]); } } if (!$full) $string = array_slice($string, 0, 1); return $string ? implode(', ', $string) . ' ago' : 'just now'; } ?> <!-- //=============== new --> <!-- //========== new ========= --> <script> function copyToClipboard() { /* Get the text field */ var inputField = document.getElementById("url"); /* Select the text field */ inputField.select(); /* Copy the text inside the text field to the clipboard */ navigator.clipboard.writeText(inputField.value); /* Alert the copied text */ // alert("Copied the text: " + inputField.value); toastr["success"]("Link copied"); } </script> <script type="module"> $("#description").val('<?php echo $video[0]['description']; ?>'); $("#video_id").val('<?php echo $video_id; ?>'); 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 postEventsHandler(e) { // Post Comment button if (e.target.name === BUTTON_TYPES.postComment) { //lert('commentt'); const comment = getCommentValue(e); comment && postComment(comment); return; } // Reply button if (e.target.name === BUTTON_TYPES.replyToComment) { $("#replyToComment_id").val(e.target.id); //alert('reply'); replyClickHandler(e); } // Post Reply button if (e.target.name === BUTTON_TYPES.postReply) { //alert('reply o past'); const comment = getCommentValue(e); comment && postReplyToComment(e, comment); return; } // // Delete comment // if (e.target.name === BUTTON_TYPES.deleteComment) { // deleteCommentHandler(e); // } // Edit comment if (e.target.name === BUTTON_TYPES.editComment) { editCommentHandler(e); } // Cancel editing comment if (e.target.name === BUTTON_TYPES.cancelChanges) { cancelEditHandler(e); } // save updated comment if (e.target.name === BUTTON_TYPES.saveChanges) { saveUpdatedCommentHandler(e); } } 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 = "fdfdssdg"; if ( inputElement?.nodeName === "INPUT" && inputElement?.name === "comment-input" ) { value = inputElement.value; inputElement.value = ""; } return value; } function getCommentNode(commentValue, isComment = true,id,name) { 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"); //DIV.id.add("20"); const PARAGRAPH = document.createElement("p"); PARAGRAPH.classList.add("comment__content"); //PARAGRAPH.textContent = '@'+name +" "+commentValue; //PARAGRAPH.textContent = commentValue +"<br/>@ Dhanush"; //PARAGRAPH.textContent += commentValue +"<br/>@ Dhanush"; PARAGRAPH.innerHTML = commentValue; const DIV1 = document.createElement("div"); DIV1.classList.add("comment1"); const PARAGRAPH1 = document.createElement("h6"); PARAGRAPH1.classList.add("comment__content1"); // PARAGRAPH.textContent = commentValue; PARAGRAPH1.innerHTML = "<br><span>"+capitalize(name)+"</span> "+name; DIV.appendChild(PARAGRAPH); DIV1.appendChild(PARAGRAPH1); ARTICLE.append(DIV1); ARTICLE.append(DIV, getCommentCTAElement(id)); if (isComment) { const DIV_REPLIES = document.createElement("div"); DIV_REPLIES.classList.add("replies"); ARTICLE.append(DIV_REPLIES); } return ARTICLE; } function capitalize(s) { return s[0].toUpperCase(); } function getCommentCTAElement(id) { const DIV_CTA = document.createElement("div"); DIV_CTA.classList.add("comment__cta"); const BUTTON_REPLY = getButtonElement( BUTTON_TYPES.replyToComment, "Reply", "btn btn--secondary", id ); 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,id) { const BUTTON = document.createElement("button"); BUTTON.textContent = text; BUTTON.className = classes; BUTTON.name = name; BUTTON.id = id; //BUTTON.addEventListener('click', click_reply(id)); return BUTTON; } function postComment(comment) { var video_id = $('#video_id').val(); $.ajax({ type : 'post', url : '<?php echo base_url("saveComment")?>', data : {'id':video_id,'comment':comment,'Comment_id':'0'}, //contentType: false, //processData: false, success:function(response){ console.log(response); response = jQuery.parseJSON(response); if(response.result==1){ toastr["success"](response.message); var name = response.name; const commentNode = getCommentNode(comment,true,response.insertedId,name); commentsContainerElement.prepend(commentNode); } else { toastr["error"](response.message); } } }); } function postReplyToComment(e, comment) { var video_id = $('#video_id').val(); var Comment_id = $('#replyToComment_id').val(); $.ajax({ type : 'post', url : '<?php echo base_url("saveComment")?>', data : {'id':video_id,'comment':comment,'Comment_id':Comment_id}, //contentType: false, //processData: false, success:function(response){ console.log(response); response = jQuery.parseJSON(response); if(response.result==1){ toastr["success"](response.message); var name = response.name; const commentNode = getCommentNode(comment, false,response.insertedId,name); const repliesContainer = e.target.closest(".replies"); repliesContainer.appendChild(commentNode); e.target.parentNode.remove(); } else { toastr["error"](response.message); } } }); } 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>