assets/js/script.js
/**
 * Show The View Post Modal When a Post is Clicked
 */
Show The View Post Modal When a Post is Clicked
Show The View Post Modal When a Post is Clicked
function view_post(picture_id) {
  var html = '';
  var main_area = document.querySelector('main.container');
  var post_request = new XMLHttpRequest(); 
  post_request.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
      var post = JSON.parse(this.responseText);
      var user_request = new XMLHttpRequest(); 
      user_request.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
          var user = JSON.parse(this.responseText);
          if (post.user_liked_post) {
            var _class = 'ri-heart-fill liked';
          } else {
            var _class = 'ri-heart-line';
          }
          if (post.privacy == 'public' || (post.privacy == 'private' && post.user_id == post.logged_user_id)) {
            html += '<div class="view-modal">';
            html += '<div class="content">';
            html += '<div class="header">';
            html += `<span class="close" onclick="close_modal('main.container .view-modal')"><i class="ri-close-line"></i></span>`;
            if (post.user_id == post.logged_user_id) {
              html += '<ul class="tools">';
              html += '<li onclick="confirm_post_delete(' + post.id + ')"><a><i class="ri-delete-bin-2-line"></i></a></li>';
              html += '<li><a href="' + window.location.origin + '/laquatat/edit_post.php?post_id=' + post.id + '"><i class="ri-pencil-line"></i></a></li>';
              html += '</ul>'; 
            }
            html += '</div>'; 
            html += '<img src="assets/images/posts/' + post.picture + '" alt="' + post.alt + '">';
            html += '<div class="info">';
            html += '<a href="' + window.location.origin + '/laquatat/profile.php?user_id=' + user.id + '" class="user">';
            html += '<img src="assets/images/profile/' + user.avatar + '" alt="' + user.name + '">';
            html += '<div class="username">' + user.name + '</div>';
            html += '</a>' 
            if (post.logged_user_id != '') {
              html += '<div class="modal-actions">';
              html += '<div class="likes">';
              html += '<span onclick="love_post(' + picture_id + ')"><i class="' + _class + '"></i></span>';
              html += '<div class="nth-likes">' + post.likes + '</div>';
              html += '</div>'; 
              html += '<div class="views">';
              html += '<span><i class="ri-eye-line"></i></span>';
              html += '<div class="nth-views">' + post.views + '</div>';
              html += '</div>'; 
              html += '</div>'; 
            }
            html += '</div >'; 
            html += '<div class="description">' + post.description + '</div>';
            html += '</div>'; 
            html += '</div>'; 
            main_area.innerHTML += html;
            setTimeout(() => {
              document.querySelector('main.container .view-modal').classList.add('shown');
              post.logged_user_id != '' ? add_view(post.id, user.id) : '';
            }, 300);
          }
        }
      };
      user_request.open("POST", window.location.origin + "/laquatat/ajax_requests/user.php", true);
      user_request.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
      user_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
      user_request.send('user_id=' + post.user_id);
    }
  };
  post_request.open("POST", window.location.origin + "/laquatat/ajax_requests/post.php", true);
  post_request.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
  post_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  post_request.send('post_id=' + picture_id);
}
function view_post ( picture_id ) { var html = '' ; var main_area = document . querySelector ( 'main.container' ) ; var post_request = new XMLHttpRequest ( ) ; post_request . onreadystatechange = function ( ) { if ( this . readyState == 4 && this . status == 200 ) { var post = JSON . parse ( this . responseText ) ; var user_request = new XMLHttpRequest ( ) ; user_request . onreadystatechange = function ( ) { if ( this . readyState == 4 && this . status == 200 ) { var user = JSON . parse ( this . responseText ) ; if ( post . user_liked_post ) { var _class = 'ri-heart-fill liked' ; } else { var _class = 'ri-heart-line' ; } if ( post . privacy == 'public' || ( post . privacy == 'private' && post . user_id == post . logged_user_id ) ) { html += '<div class="view-modal">' ; html += '<div class="content">' ; html += '<div class="header">' ; html += ` ` ; if ( post . user_id == post . logged_user_id ) { html += '<ul class="tools">' ; html += '<li onclick="confirm_post_delete(' + post . id + ')"><a><i class="ri-delete-bin-2-line"></i></a></li>' ; html += '<li><a href="' + window . location . origin + '/laquatat/edit_post.php?post_id=' + post . id + '"><i class="ri-pencil-line"></i></a></li>' ; html += '</ul>' ; } html += '</div>' ; html += '<img src="assets/images/posts/' + post . picture + '" alt="' + post . alt + '">' ; html += '<div class="info">' ; html += '<a href="' + window . location . origin + '/laquatat/profile.php?user_id=' + user . id + '" class="user">' ; html += '<img src="assets/images/profile/' + user . avatar + '" alt="' + user . name + '">' ; html += '<div class="username">' + user . name + '</div>' ; html += '</a>' if ( post . logged_user_id != '' ) { html += '<div class="modal-actions">' ; html += '<div class="likes">' ; html += '<span onclick="love_post(' + picture_id + ')"><i class="' + _class + '"></i></span>' ; html += '<div class="nth-likes">' + post . likes + '</div>' ; html += '</div>' ; html += '<div class="views">' ; html += '<span><i class="ri-eye-line"></i></span>' ; html += '<div class="nth-views">' + post . views + '</div>' ; html += '</div>' ; html += '</div>' ; } html += '</div >' ; html += '<div class="description">' + post . description + '</div>' ; html += '</div>' ; html += '</div>' ; main_area . innerHTML += html ; setTimeout ( ( ) => { document . querySelector ( 'main.container .view-modal' ) . classList . add ( 'shown' ) ; post . logged_user_id != '' ? add_view ( post . id , user . id ) : '' ; } , 300 ) ; } } } ; user_request . open ( "POST" , window . location . origin + "/laquatat/ajax_requests/user.php" , true ) ; user_request . setRequestHeader ( 'X-Requested-With' , 'XMLHttpRequest' ) ; user_request . setRequestHeader ( 'Content-Type' , 'application/x-www-form-urlencoded' ) ; user_request . send ( 'user_id=' + post . user_id ) ; } } ; post_request . open ( "POST" , window . location . origin + "/laquatat/ajax_requests/post.php" , true ) ; post_request . setRequestHeader ( 'X-Requested-With' , 'XMLHttpRequest' ) ; post_request . setRequestHeader ( 'Content-Type' , 'application/x-www-form-urlencoded' ) ; post_request . send ( 'post_id=' + picture_id ) ; }
Show The View Post Modal When a Post is Clicked
Show The View Post Modal When a Post is Clicked
// Setup Main Variables
 // AJAX Requests
 // Get Post Info
 // If The Request is Done Successfully
 // Get Post info in a JSON Format
 // Get User Info
 // If The Request is Done Successfully
 // Get User info in a JSON Format
 // Check if The Logged in User Has Been Liked The Post Before
 // If The User is Allowed To See The Post
 // Modal HTML
 // Close '.tools'
 // Close '.header'
 // Close '.user'
 // Close '.likes'
 // Close '.views'
 // Close '.modal-actions'
 // Close '.info'
 // Close '.content'
 // Close '.view-modal'
 // Append The Modal HTML To The Profile Body
 // Show The Modal After 300 ms
 // if User is Logged in, Add a Post View
 // Send The User Request
 // Send The Post Request
