David William Sabers (2024)

`); break; case 'cover-photo': mediaContainer.append(`

`); fullScreenMediaContainer.append(` `); mobileFullScreenMedia.append(`

`); break; case 'image-gallery': mediaContainer.append(`

`); fullScreenMediaContainer.append(` `); mobileFullScreenMedia.append(`

`); mobileDescriptionContainer.append(`

${mediaTitle}

${shortMediaDescription}

`); if (mediaDescription != shortMediaDescription) $("#read-more-btn-mobile").show(); desktopDescriptionContainer.append(`

${mediaTitle}

${shortMediaDescription}

`); if (mediaDescription != shortMediaDescription) $("#read-more-btn").show(); break; case 'videos': mediaContainer.append(`

`); fullScreenMediaContainer.append(`

`); mobileFullScreenMedia.append(`

`); mobileDescriptionContainer.append(`

${mediaTitle}

${shortMediaDescription}

`); if (mediaDescription != shortMediaDescription) $("#read-more-btn-mobile").show(); desktopDescriptionContainer.append(`

${mediaTitle}

${shortMediaDescription}

`); if (mediaDescription != shortMediaDescription) $("#read-more-btn").show(); break; case 'audios': mediaContainer.css('background-color', '#FFF'); mediaContainer.append(`

`); fullScreenMediaContainer.css('background-color', '#FFF'); fullScreenMediaContainer.append(`

`); mobileFullScreenMedia.css('background-color', '#FFF'); mobileFullScreenMedia.append(`

`); mobileDescriptionContainer.append(`

${mediaTitle}

${shortMediaDescription}

`); if (mediaDescription != shortMediaDescription) $("#read-more-btn-mobile").show(); desktopDescriptionContainer.append(`

${mediaTitle}

${shortMediaDescription}

`); if (mediaDescription != shortMediaDescription) $("#read-more-btn").show(); break; } } $(document).on('click', '#read-more-btn-mobile', function () { let description = $(this).data('media-description'); showMoreDescription(`${description}`, true); }); $(document).on('click', '#read-less-btn-mobile', function () { let description = $(this).data('media-short-description'); showLessDescription(`${description}`, true); }); $(document).on('click', '#read-more-btn', function () { let description = $(this).data('media-description'); showMoreDescription(`${description}`); }); $(document).on('click', '#read-less-btn', function () { let description = $(this).data('media-short-description'); showLessDescription(`${description}`); }); function showMoreDescription(fullDescription, isMobile = false) { if(isMobile) { $("#header-description-mobile").text(fullDescription); $("#read-more-btn-mobile").hide(); $("#read-less-btn-mobile").show(); } else { $("#header-description").text(fullDescription); $("#read-more-btn").hide(); $("#read-less-btn").show(); } } function showLessDescription(shortDescription, isMobile = false) { if(isMobile) { $("#header-description-mobile").text(shortDescription); $("#read-more-btn-mobile").show(); $("#read-less-btn-mobile").hide(); } else { $("#header-description").text(shortDescription); $("#read-more-btn").show(); $("#read-less-btn").hide(); } } function getVideoUrl(videoUrl) { const regex = /(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/shorts\/|m\.youtube\.com\/watch\?v=|youtube\.com\/live\/)([a-zA-Z0-9_-]+)/; const match = videoUrl.match(regex); return `https://www.youtube.com/embed/${match[1]}`; } function getCommentsForAttachment(id, type = '') { const commentsSkeletonContainer = $('#attachment-comments-skeleton'); const commentsSkeletonContainerMobile = $('#attachment-comments-skeleton-mobile'); commentsSkeletonContainer.show(); commentsSkeletonContainerMobile.show(); const url = type === 'video' ? `/video/${id}/comments` : `/attachment/${id}/comments`; $.ajax({ url: url, type: 'GET', success: function(response) { renderNumberOfComments(response.comments.length); renderCommentsForAttachment(response.comments); renderCommentsForAttachmentMobile(response.comments); }, error: function(error) { renderErrorPostingComment(); renderErrorPostingCommentMobile(); console.warn(error) } }); } function getCommentsForTimelineEvent(id) { $.ajax({ url: `/timeline_event/${id}/comments`, success: function(response) { renderCommentsForTimelineEvent(response.comments, id); renderCommentsForTimelineEventMobile(response.comments, id) }, error: function(error) { console.log(error); } }); } function renderErrorPostingComment() { const commentsContainerDesktop = $('#list-comments-for-profile'); const commentsSkeletonContainer = $('#attachment-comments-skeleton'); commentsContainerDesktop.empty(); let errorContentHTML = $(`

`); commentsContainerDesktop.append(errorContentHTML); commentsSkeletonContainer.hide(); } function renderErrorPostingCommentMobile() { const commentsContainerMobile = $('#list-comments-for-post-mobile-profile'); const commentsSkeletonContainerMobile = $('#attachment-comments-skeleton-mobile'); commentsContainerMobile.empty(); let errorContentHTML = $(`

`); commentsContainerMobile.append(errorContentHTML); commentsSkeletonContainerMobile.hide(); } function timeAgo(dateString) { const currentDate = new Date(); const providedDate = new Date(dateString); const timeDifference = currentDate - providedDate; const seconds = Math.floor(timeDifference / 1000); const minutes = Math.floor(seconds / 60); const hours = Math.floor(minutes / 60); const days = Math.floor(hours / 24); const weeks = Math.floor(days / 7); if (weeks > 0) { return weeks + 'w'; } else if (days > 0) { return days + 'd'; } else if (hours > 0) { return hours + 'h'; } else if (minutes > 0) { return minutes + 'm'; } else { return 'now'; } } function renderNumberOfComments(numberOfComments) { const numberOfCommentsContainer = $('#number-of-comments'); numberOfCommentsContainer.empty(); numberOfCommentsContainer.append(` ${numberOfComments} ${numberOfComments == 1 ? 'Comment' : 'Comments'} `); } function renderCommentsForAttachment(comments) { const commentsContainerDesktop = $('#list-comments-for-profile'); const commentsSkeletonContainer = $('#attachment-comments-skeleton'); commentsContainerDesktop.empty(); if (comments && comments.length > 0) { comments.forEach(function(comment) { let imageUrl = comment.image_url ?? "/assets/default-profile-picture-gold.svg"; let isProfileOwnerOrAdmin = "false" === "true"; let canDelete; canDelete = false; commentsContainerDesktop.append(`

`); }); } else { let emptyContentHTML = $(`

`); commentsContainerDesktop.html(emptyContentHTML); } commentsSkeletonContainer.hide(); } function renderCommentsForAttachmentMobile(comments) { const commentsContainerMobile = $('#list-comments-for-post-mobile-profile'); const commentsSkeletonContainerMobile = $('#attachment-comments-skeleton-mobile'); commentsContainerMobile.empty(); if (comments && comments.length > 0) { comments.forEach(function(comment) { let imageUrl = comment.image_url ?? "/assets/default-profile-picture-gold.svg"; let isProfileOwnerOrAdmin = "false" === "true"; let canDelete; canDelete = false; commentsContainerMobile.append(`

`); }); } else { let emptyContentHTML = $(`

`); commentsContainerMobile.html(emptyContentHTML); } commentsSkeletonContainerMobile.hide(); } function renderCommentsForTimelineEvent(comments, eventId) { const commentsContainerDesktop = $(`#list-comments-for-event-${eventId}`); const commentsSkeletonContainer = $(`#comments-results-skeleton-for-event-${eventId}`); commentsContainerDesktop.empty(); if (comments && comments.length > 0) { comments.forEach(function(comment) { let imageUrl = comment.image_url ?? "/assets/default-profile-picture-gold.svg"; let isProfileOwnerOrAdmin = "false" === "true"; let canDelete; canDelete = false; commentsContainerDesktop.append(`

`); }); } else { let emptyContentHTML = $(`

`); commentsContainerDesktop.html(emptyContentHTML); } commentsSkeletonContainer.hide(); } function renderCommentsForTimelineEventMobile(comments, id) { const commentsContainerMobile = $(`#list-comments-for-event-mobile-${id}`); const commentsSkeletonContainerMobile = $(`#comments-results-skeleton-mobile-${id}`); commentsContainerMobile.empty(); if (comments && comments.length > 0) { comments.forEach(function(comment) { let imageUrl = comment.image_url ?? "/assets/default-profile-picture-gold.svg"; let isProfileOwnerOrAdmin = "false" === "true"; let canDelete; canDelete = false; commentsContainerMobile.append(`

`); }); } else { let emptyContentHTML = $(`

`); commentsContainerMobile.html(emptyContentHTML); } commentsSkeletonContainerMobile.hide(); } function makeCommentForEvent(eventId) { let isAddingPostToEvent = false; let list; if ($(window).width() < 992) { list = $(`#list-comments-for-event-mobile-${eventId}`); } else { list = $(`#list-comments-for-event-${eventId}`); } const userIdForComments = null ; const sendButton = $(`#comment-button-for-post-${eventId}`); const sendButtonDesktop = $(`#comment-button-desktop-for-post-${eventId}`); if (!isAddingPostToEvent) { let inputValue = $(window).width() < 992 ? $(`#input-for-event-${eventId}`).val() : $(`#input-desktop-for-event-${eventId}`).val(); if (inputValue.trim() === '') { return; } $(window).width() < 992 ? $(`#input-for-event-${eventId}`).val('') : $(`#input-desktop-for-event-${eventId}`).val(''); isAddingPostToEvent = true; sendButton.prop('disabled', true); sendButtonDesktop.prop('disabled', true); $.ajax({ url: `/timeline_event/${eventId}/comments`, method: 'POST', data: { body: inputValue, event_id: eventId, user_id: userIdForComments }, success: function(response) { $(`#input-for-event-${eventId}`).val(''); $(`#input-desktop-for-event-${eventId}`).val(''); isAddingPostToEvent = false; sendButton.prop('disabled', false); sendButtonDesktop.prop('disabled', false); renderCommentsForTimelineEvent(response.comments, eventId); renderCommentsForTimelineEventMobile(response.comments, eventId); }, error: function(error) { console.warn(error); isAddingPostToEvent = false; renderErrorPostingComment(list); sendButton.prop('disabled', false); sendButtonDesktop.prop('disabled', false); } }); } } function addReactionToEvent(reaction, eventId) { let inputValue = $(`#input-for-event-${eventId}`).val(function (params) { return this.value + reaction; }); } function deleteCommentOnTimeline(eventId, commentId) { const url = `/timeline_event/${eventId}/comments/${commentId}`; let list; if ($(window).width() < 992) { list = $(`#list-comments-for-event-mobile-${eventId}`); } else { list = $(`#list-comments-for-event-${eventId}`); } $.ajax({ url: url, type: 'DELETE', beforeSend: function() { list.empty(); $(`#comments-results-skeleton-for-event-${eventId}`).show(); $(`#comments-results-skeleton-mobile-${eventId}`).show(); }, success: function(response) { renderCommentsForTimelineEvent(response.comments, eventId); renderCommentsForTimelineEventMobile(response.comments, eventId); }, error: function(error) { renderErrorPostingComment(); renderErrorPostingCommentMobile(); console.error(error); } }) } var myModal = document.getElementById('profileModal') var myModalMobile = document.getElementById('profileModalMobile') myModal.addEventListener('hidden.bs.modal', function () { const mediaContainer = $('#media-content-container'); const fullScreenMediaContainer = $('#full-screen-profile-photo'); const mobileFullScreenMedia = $('#mobile-full-screen-media'); const commentsContainerMobile = $('#list-comments-for-post-mobile-profile'); const commentsContainerDesktop = $('#list-comments-for-profile'); const typeField = $('#media_type_in_profile_modal'); mediaContainer.empty(); fullScreenMediaContainer.empty(); mobileFullScreenMedia.empty(); commentsContainerMobile.empty(); commentsContainerDesktop.empty(); typeField.val(''); }) myModalMobile.addEventListener('hidden.bs.modal', function () { const mediaContainer = $('#media-content-container'); const fullScreenMediaContainer = $('#full-screen-profile-photo'); const mobileFullScreenMedia = $('#mobile-full-screen-media'); const commentsContainerMobile = $('#list-comments-for-post-mobile-profile'); const commentsContainerDesktop = $('#list-comments-for-profile'); const typeField = $('#media_type_in_profile_modal'); mediaContainer.empty(); fullScreenMediaContainer.empty(); mobileFullScreenMedia.empty(); commentsContainerMobile.empty(); commentsContainerDesktop.empty(); typeField.val(''); }) function getAudioDuration(audioId) { var audio = document.getElementById(`audio-player-card-${audioId}`); durationContainer = $(`#time-container-${audioId}`); var durationInSeconds = audio.duration; var minutes = Math.floor(durationInSeconds / 60); var seconds = Math.floor(durationInSeconds % 60); var formattedDuration = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`; durationContainer.text(formattedDuration); } const coverPhotoContainer = document.querySelector('.cover-photo-image-container'); const coverPhoto = coverPhotoContainer.querySelector('img') $(document).ready(function () { // this line fix the bug where the cover photo is loaded before the load listener if (coverPhoto.complete) { coverPhotoContainer.classList.remove('loading'); } }); coverPhoto.addEventListener('load', () => { coverPhotoContainer.classList.remove('loading'); }); // auth from tributes section function openLoginToCommentModal() { $('#login-to-comment-profile-modal').modal('show'); } // google $(document).ready(function (params) { // Google sign in var submit_button; function handleCredentialResponse(response) { // Simple POST request with a JSON body using fetch const request = { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({credential: response.credential}) }; fetch('/auth/gsi/callback', request) .then(async response => { const isJson = response.headers.get('content-type')?.includes('application/json'); const data = isJson && await response.json(); // check for error response if (!response.ok) { // get error message from body or default to response status const error = (data && data.message) || response.status; return Promise.reject(error); } //redirect location.href = '/auth/gsi/session/' + data.success; }) .catch(error => { element = document.getElementById("gsi_error"), element.innerHTML = `Error: ${error}`; }); } function signInModal() { try { setTimeout(() => { submit_button = document.getElementById("submit_button"); // The button is rendered for the first time in the indicated component with the updated size of submit_button google.accounts.id.renderButton( document.getElementById("gis_button"), { theme: "outline", size: "large", shape: "rectangular", logo_alignment: "lefth", locale: "en_EN", width: submit_button.scrollWidth } // customization attributes ); google.accounts.id.renderButton( document.getElementById("gis_signup_button"), { theme: "outline", size: "large", shape: "rectangular", logo_alignment: "lefth", locale: "en_EN", width: submit_button.scrollWidth } // customization attributes ); }, 500) // google.accounts.id.prompt(); // also display the One Tap dialog } catch (error) { console.error(error) } } function signUpModal() { try { setTimeout(() => { submit_button = document.getElementById("submit_signup_button"); google.accounts.id.renderButton( document.getElementById("gis_signup_button"), { theme: "outline", size: "large", shape: "rectangular", logo_alignment: "lefth", locale: "en_EN", width: submit_button.scrollWidth } // customization attributes ); }, 1000) // google.accounts.id.prompt(); // also display the One Tap dialog } catch (error) { console.error(error) } } // Method used to always listen to the screen resize and perform actions window.addEventListener("resize", function () { if (document.querySelector('#fast-signin-modal').classList.contains('show')) { submit_button = document.getElementById("submit_button"); } if (document.querySelector('#fast-signup-modal').classList.contains('show')) { submit_button = document.getElementById("submit_signup_button"); } // The button is rendered again in the indicated component with the updated size of submit_button google.accounts.id.renderButton( document.getElementById("gis_button"), { theme: "outline", size: "large", shape: "rectangular", logo_alignment: "lefth", locale: "en_EN", width: submit_button.scrollWidth } // customization attributes ); google.accounts.id.renderButton( document.getElementById("gis_signup_button"), { theme: "outline", size: "large", shape: "rectangular", logo_alignment: "lefth", locale: "en_EN", width: submit_button.scrollWidth } // customization attributes ); }); window.addEventListener('load', function () { let openSigninModal = $('#sign-in-from-profile-modal'); let openSignUpModal = $('#sign-up-from-discover-modal'); // Gets the submit_button component google.accounts.id.initialize({ client_id: "332375482718-vol2bvf059cc63vmnva10qs57f5g6k54.apps.googleusercontent.com", callback: handleCredentialResponse, context: "use" }); openSigninModal.click('click', signInModal, { once: true }) openSignUpModal.click('click', signUpModal , { once: true }) }); }); // login $(document).ready(function() { $('#toggle-password').on('click', function(){ // input const passwordFieldInput = document.getElementById("signin-password"); // label const passwordLabel = document.querySelector("#label_show_hide"); if(passwordFieldInput.type === "password"){ passwordFieldInput.type = "text"; passwordLabel.innerHTML = 'Hide' } else{ passwordFieldInput.type = "password"; passwordLabel.innerHTML = 'Show' } }); $("#sign_in_form").validate({ rules: { "email": { required: true, minlength: 2, nowhitespace: true, email: true }, "password": { required: true, minlength: 2, nowhitespace: true, } }, messages: { "email": { required: "This field is required.", minlength: "This field requires at least 2 characters.", nowhitespace: "Blank characters are not allowed.", email: "Please enter a valid email address." }, "password": { required: "This field is required.", minlength: "This field requires at least 2 characters.", nowhitespace: "Blank characters are not allowed." } }, errorPlacement: function(error, element) { error.insertAfter(element.parent()); } }); // Custom method to validate non white spaces on inputs $.validator.addMethod("nowhitespace", function(value, element) { return this.optional(element) || /^\S+$/i.test(value); }); var isLoadingSignIn = false; $("#button_signin_submit").on("click", function() { var isValid = $("#sign_in_form").valid(); if (isValid) { if (!isLoadingSignIn) { isLoadingSignIn = true; // buttonLoadingState variable is used to change button's html var buttonLoadingState = "" + "Signing in"; $(this).html(buttonLoadingState); $("#sign_in_form").submit(); } } }); }); // register $(document).ready(function() { $('#toggle-signup-password').on('click', function(){ // input const passwordFieldInput = document.getElementById("signup-password"); // label const passwordLabel = document.querySelector("#label_show_hide"); if(passwordFieldInput.type === "password"){ passwordFieldInput.type = "text"; passwordLabel.innerHTML = 'Hide' } else{ passwordFieldInput.type = "password"; passwordLabel.innerHTML = 'Show' } }); // Method worked with Jquery to work on all devices with the click event // Pointing to the show/hide of confirm password $('#show-confirm-password').on('click', function(){ // input const confirmPasswordFieldInput = document.getElementById("confirm_password"); // label const confirmPasswordLabel = document.querySelector("#label_show_hide_confirm_Password"); if(confirmPasswordFieldInput.type === "password"){ confirmPasswordFieldInput.type = "text"; confirmPasswordLabel.innerHTML = 'Hide' } else{ confirmPasswordFieldInput.type = "password"; confirmPasswordLabel.innerHTML = 'Show' } }); // Custom method to validate the password requirements $.validator.addMethod("passwordRequirements", function(value, element) { // Define the password requirements var requirements = { lowercase: { pattern: /.*[a-z].*/, message: "one lowercase letter" }, uppercase: { pattern: /.*[A-Z].*/, message: "one uppercase letter" }, number: { pattern: /.*\d.*/, message: "one number" }, specialCharacter: { pattern: /.*[!@#$%^&*()].*/, message: "one special character" } }; // Check each requirement individually var missingRequirements = []; if (!requirements.lowercase.pattern.test(value)) { missingRequirements.push(requirements.lowercase.message); } if (!requirements.uppercase.pattern.test(value)) { missingRequirements.push(requirements.uppercase.message); } if (!requirements.number.pattern.test(value)) { missingRequirements.push(requirements.number.message); } if (!requirements.specialCharacter.pattern.test(value)) { missingRequirements.push(requirements.specialCharacter.message); } // Store the missing requirements as a data attribute on the element $(element).data("missingRequirements", missingRequirements); // Return true if all requirements are met, false otherwise return missingRequirements.length === 0; }, function(params, element) { // Retrieve the missing requirements from the data attribute var missingRequirements = $(element).data("missingRequirements"); // Set the error message based on the missing requirements var errorMessage = "Your password must contain at least: " + missingRequirements.join(", ") + "."; return errorMessage; }); $("#sign_up_form").validate({ rules: { "user[first_name]": { required: true, minlength: 2, nowhitespace: true }, "user[last_name]": { required: true, minlength: 2, nowhitespace: true, }, "user[email]": { required: true, minlength: 2, nowhitespace: true, email: true }, "user[password]": { required: true, minlength: 8, nowhitespace: true, passwordRequirements: true, }, "user[password_confirmation]": { required: true, nowhitespace: true, equalTo: "#signup-password" }, }, messages: { "user[first_name]": { required: "This field is required.", minlength: "This field requires at least 2 characters.", nowhitespace: "Blank characters are not allowed." }, "user[last_name]": { required: "This field is required.", minlength: "This field requires at least 2 characters.", nowhitespace: "Blank characters are not allowed." }, "user[email]": { required: "This field is required.", minlength: "This field requires at least 2 characters.", nowhitespace: "Blank characters are not allowed.", email: "Please enter a valid email address." }, "user[password]": { required: "This field is required.", minlength: "This field requires at least 8 characters.", nowhitespace: "Blank characters are not allowed." }, "user[password_confirmation]": { required: "This field is required.", nowhitespace: "Blank characters are not allowed.", equalTo: "Passwords do not match." }, }, errorPlacement: function(error, element) { if (element.attr("name") === "user[password]" || element.attr("name") === "user[password_confirmation]") { error.insertAfter(element.parent()); }else{ error.insertAfter(element); } } }); // Custom method to validate non white spaces on inputs $.validator.addMethod("nowhitespace", function(value, element) { return this.optional(element) || /^\S+$/i.test(value); }); var isLoadingSignUp = false; $("#button_auth_submit").on("click", function() { var isValid = $("#sign_up_form").valid(); if (isValid) { if (!isLoadingSignUp) { isLoadingSignUp = true; // buttonLoadingState variable is used to change button's html var buttonLoadingState = "" + "Registering"; $(this).html(buttonLoadingState); $("#sign_up_form").submit(); } } }); }); document.addEventListener("DOMContentLoaded", function() { const urlParams = new URLSearchParams(window.location.search); const postId = urlParams.get('post_id'); if (postId) { const tributesForm = document.getElementById('tributes_form'); const observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { if (mutation.type === 'childList' && mutation.addedNodes.length > 0) { const element = document.getElementById(`tribute-post-${postId}`); if (element) { element.scrollIntoView(); observer.disconnect(); } } }); }); observer.observe(tributesForm, { childList: true, subtree: true }); } });