KingOfDog.de/old
Archived
1
0
Fork 0
Code Releases Activity

Improved post creation and user profile page

Browse Source
This commit is contained in:
Marcel 2019-04-13 14:53:15 +02:00
parent 8fd22c9a9a
commit 9c023c939a
4 changed files with 208 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
application/controllers/User.php
View File

@ -31,7 +31,7 @@
$userBlogPosts = $this->UserModel->getUserBlogPosts($userData['ID'], 3, 0); $userBlogPosts = $this->UserModel->getUserBlogPosts($userData['ID'], 3, 0);
$dateCreated = strtotime($userData['dateCreated']); $dateCreated = strtotime($userData['dateCreated']);
$userData['time_existing'] = DateTimeHumanizer::difference(new \DateTime(), new \DateTime("@$dateCreated"), $_SESSION['site_lang']); $userData['time_existing'] = DateTimeHumanizer::difference(new DateTime(), new DateTime("@$dateCreated"), $_SESSION['site_lang']);
$title = $userData['displayname'] . " - Profile"; $title = $userData['displayname'] . " - Profile";
$isCurrentUserFollowing = false; $isCurrentUserFollowing = false;
if (isset($_SESSION['user']['ID'])) if (isset($_SESSION['user']['ID']))
@ -66,7 +66,7 @@
if ($user_exists) { if ($user_exists) {
$user_data = $user_data[0]; $user_data = $user_data[0];
$dateCreated = strtotime($user_data['dateCreated']); $dateCreated = strtotime($user_data['dateCreated']);
$user_data['time_existing'] = DateTimeHumanizer::difference(new \DateTime(), new \DateTime("@$dateCreated"), $_SESSION['site_lang']); $user_data['time_existing'] = DateTimeHumanizer::difference(new DateTime(), new DateTime("@$dateCreated"), $_SESSION['site_lang']);
$user_stats = $this->UserModel->getUserStats($user_data['ID']); $user_stats = $this->UserModel->getUserStats($user_data['ID']);
$title = $user_data['displayname'] . " - Blog-Kommentare"; $title = $user_data['displayname'] . " - Blog-Kommentare";
$isCurrentUserFollowing = false; $isCurrentUserFollowing = false;
@ -115,7 +115,7 @@
if ($user_exists) { if ($user_exists) {
$user_data = $user_data[0]; $user_data = $user_data[0];
$dateCreated = strtotime($user_data['dateCreated']); $dateCreated = strtotime($user_data['dateCreated']);
$user_data['time_existing'] = DateTimeHumanizer::difference(new \DateTime(), new \DateTime("@$dateCreated"), $_SESSION['site_lang']); $user_data['time_existing'] = DateTimeHumanizer::difference(new DateTime(), new DateTime("@$dateCreated"), $_SESSION['site_lang']);
$user_stats = $this->UserModel->getUserStats($user_data['ID']); $user_stats = $this->UserModel->getUserStats($user_data['ID']);
$title = $user_data['displayname'] . " - Posts"; $title = $user_data['displayname'] . " - Posts";
$isCurrentUserFollowing = false; $isCurrentUserFollowing = false;
@ -162,7 +162,7 @@
if ($user_exists) { if ($user_exists) {
$user_data = $user_data[0]; $user_data = $user_data[0];
$dateCreated = strtotime($user_data['dateCreated']); $dateCreated = strtotime($user_data['dateCreated']);
$user_data['time_existing'] = DateTimeHumanizer::difference(new \DateTime(), new \DateTime("@$dateCreated"), $_SESSION['site_lang']); $user_data['time_existing'] = DateTimeHumanizer::difference(new DateTime(), new DateTime("@$dateCreated"), $_SESSION['site_lang']);
$user_stats = $this->UserModel->getUserStats($user_data['ID']); $user_stats = $this->UserModel->getUserStats($user_data['ID']);
$title = $user_data['displayname'] . " - Posts"; $title = $user_data['displayname'] . " - Posts";
$isCurrentUserFollowing = false; $isCurrentUserFollowing = false;
@ -355,7 +355,7 @@
if ($user_exists) { if ($user_exists) {
$user_data = $user_data[0]; $user_data = $user_data[0];
$dateCreated = strtotime($user_data['dateCreated']); $dateCreated = strtotime($user_data['dateCreated']);
$user_data['time_existing'] = DateTimeHumanizer::difference(new \DateTime(), new \DateTime("@$dateCreated"), $_SESSION['site_lang']); $user_data['time_existing'] = DateTimeHumanizer::difference(new DateTime(), new DateTime("@$dateCreated"), $_SESSION['site_lang']);
$user_stats = $this->UserModel->getUserStats($user_data['ID']); $user_stats = $this->UserModel->getUserStats($user_data['ID']);
$followers = $this->UserModel->getFollowers($user_data['ID']); $followers = $this->UserModel->getFollowers($user_data['ID']);
$title = $user_data['displayname'] . " - Follower"; $title = $user_data['displayname'] . " - Follower";
@ -391,7 +391,7 @@
if ($user_exists) { if ($user_exists) {
$user_data = $user_data[0]; $user_data = $user_data[0];
$dateCreated = strtotime($user_data['dateCreated']); $dateCreated = strtotime($user_data['dateCreated']);
$user_data['time_existing'] = DateTimeHumanizer::difference(new \DateTime(), new \DateTime("@$dateCreated"), $_SESSION['site_lang']); $user_data['time_existing'] = DateTimeHumanizer::difference(new DateTime(), new DateTime("@$dateCreated"), $_SESSION['site_lang']);
$user_stats = $this->UserModel->getUserStats($user_data['ID']); $user_stats = $this->UserModel->getUserStats($user_data['ID']);
$following = $this->UserModel->getFollowing($user_data['ID']); $following = $this->UserModel->getFollowing($user_data['ID']);
$title = $user_data['displayname'] . " - Follower"; $title = $user_data['displayname'] . " - Follower";
@ -542,7 +542,7 @@
unset($_FILES['header']); unset($_FILES['header']);
} }
// Social Networks // Social Networks
if (isset($_POST['sociaNetworks'])) { if (isset($_POST['socialNetworks'])) {
} }
// Profile color // Profile color
@ -596,11 +596,11 @@
$loginData = $this->LoginModel->getLoginData($_SESSION['user']['username']); $loginData = $this->LoginModel->getLoginData($_SESSION['user']['username']);
if (!empty($loginData)) { if (!empty($loginData)) {
$loginData = $loginData[0]; $loginData = $loginData[0];
$encryptedPassword = $this->LoginModel->getPasswordHash($_POST['passwordOld'], $loginData['original_name']); $encryptedPassword = $this->LoginModel->getPasswordHash($_POST['passwordOld'], $loginData['originalName']);
if ($encryptedPassword == $loginData['password']) { if ($encryptedPassword == $loginData['password']) {
if ($this->LoginModel->checkPassword($_POST['passwordNew'])) { if ($this->LoginModel->checkPassword($_POST['passwordNew'])) {
if (isset($_POST['passwordNewRepeat']) && $_POST['passwordNew'] == $_POST['passwordNewRepeat']) { if (isset($_POST['passwordNewRepeat']) && $_POST['passwordNew'] == $_POST['passwordNewRepeat']) {
$this->LoginModel->changePassword($_POST['passwordNew'], $loginData['original_name']); $this->LoginModel->changePassword($_POST['passwordNew'], $loginData['originalName']);
$_SESSION['profileEditNotification'] .= "<div class='alert alert-success' role='alert'><b>Dein Passwort wurde geändert!</b> Du kannst dich nun damit einloggen</div>"; $_SESSION['profileEditNotification'] .= "<div class='alert alert-success' role='alert'><b>Dein Passwort wurde geändert!</b> Du kannst dich nun damit einloggen</div>";
} else { } else {
$_SESSION['profileEditNotification'] .= "<div class='alert alert-danger' role='alert'><b>Wiederholtes Passwort falsch!</b> Das Passwort, das du wiederholt hast, stimmt nicht mit dem eigentlichen überein.</div>"; $_SESSION['profileEditNotification'] .= "<div class='alert alert-danger' role='alert'><b>Wiederholtes Passwort falsch!</b> Das Passwort, das du wiederholt hast, stimmt nicht mit dem eigentlichen überein.</div>";

14
assets/css/profile_page.css
View File

@ -94,10 +94,12 @@
#profile-sub-header .profile-picture-container { #profile-sub-header .profile-picture-container {
position: relative; position: relative;
padding: 0;
} }
#profile-sub-header .profile-picture { #profile-sub-header .profile-picture {
position: absolute; position: absolute;
top: 50%;
left: 50%; left: 50%;
width: 80%; width: 80%;
transform: translate(-50%, -60%); transform: translate(-50%, -60%);
@ -106,13 +108,12 @@
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.25); box-shadow: 0 1px 3px 0 rgba(0,0,0,0.25);
border-radius: 100%; border-radius: 100%;
margin: 0; margin: 0;
transition: all .2s;
} }
#profile-sub-header.fixedTop .profile-picture { #profile-sub-header.fixedTop .profile-picture {
left: 100%; left: 100%;
width: 50px; width: 50px;
transform: translateX(-110%); transform: translate(-120%, -50%);
border: 0; border: 0;
} }
@ -127,7 +128,7 @@
.avatar-upload-overlay { .avatar-upload-overlay {
position: absolute; position: absolute;
width: 80%; width: 80%;
top: 25px; top: 35px;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
background-color: rgba(255,255,255,0); background-color: rgba(255,255,255,0);
@ -161,12 +162,15 @@
-o-transition: color .2s; -o-transition: color .2s;
transition: color .2s; transition: color .2s;
font-size: 40px; font-size: 40px;
margin: 42%; position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
} }
.fixedTop .avatar-upload-overlay .fa { .fixedTop .avatar-upload-overlay .fa {
font-size: 20px; font-size: 20px;
margin: 32%; /*margin: 32%;*/
} }
.avatar-upload-overlay:hover .fa { .avatar-upload-overlay:hover .fa {

145
assets/js/post-create.js
View File

@ -1,41 +1,132 @@
$('#contentField').on('keyup', function (e) { // $('#contentField').on('keypress', function (e) {
// console.log(e, $(this).html());
//
// if (e.ctrlKey)
// return;
//
// setTimeout(() => {
// // console.log($(this).html());
// //
// const range = window.getSelection().getRangeAt(0);
// const endNode = range.endContainer;
// let end = range.endOffset;
//
// // console.log(range.startOffset, end);
//
// if (endNode !== this) {
// console.log('test');
// const textNodes = get_text_nodes_in(this);
// console.log(textNodes);
// for (let i = 0; i < textNodes.length; ++i) {
// if (textNodes[i] === endNode)
// break;
// end += textNodes[i].length;
// }
// }
//
// let html = $(this).html();
//
// if (/\&nbsp;$/.test(html) && $(this).text().length === end) {
// end--;
// set_range(end, end, this);
// return;
// }
//
// let filter = html.replace(/<span class="mention">/g, "")
// .replace(/<span class="hashtag">/g, "")
// .replace(/<\/span>/g, "")
// .replace(/@[A-Za-z0-9._]+/g, (match) => `<span class="mention">${match}</span>`)
// .replace(/#[A-Za-z0-9._]+/g, (match) => `<span class="hashtag">${match}</span>`);
//
// console.log(range.startOffset, end);
// $(this).html(filter);
// set_range(end, end, this);
// }, 1);
const keys = ['Home', 'End', 'Insert', 'Delete', 'Enter'];
$('#contentField').on('keypress', function (e) {
console.log(e.key, e.code);
if(e.ctrlKey || e.key.indexOf('Arrow') === 0 || keys.includes(e.key))
return;
console.log(e.which);
setTimeout(() => {
var range = window.getSelection().getRangeAt(0); var range = window.getSelection().getRangeAt(0);
var end_node = range.endContainer; var end_node = range.endContainer;
var end = range.endOffset; var end = range.endOffset;
if (end_node != this) {
if (end_node !== this) { var text_nodes = get_text_nodes_in(this);
const text_nodes = get_text_nodes_in(this); for (var i = 0; i < text_nodes.length; ++i) {
for (let i = 0; i < text_nodes.length; ++i) { if (text_nodes[i] == end_node) {
if (text_nodes[i] === end_node) {
break; break;
} }
end += text_nodes[i].length; end += text_nodes[i].length;
} }
} }
var html = $(this).html();
let html = $(this).html(); if (/\&nbsp;$/.test(html) && $(this).text().length == end) {
if (/\&nbsp;$/.test(html) && $(this).text().length === end) { end = end - 1;
end--;
set_range(end, end, this); set_range(end, end, this);
return; return;
} }
let filter = html.replace(/<span class="mention">/g, "") let filter = html.replace(/<span class="[^"]*">([^<\/]*)<\/span>/g, '$1')
.replace(/<span class="hashtag">/g, "") .replace(/@[A-Za-z0-9._]+/g, (match) => `<span class="mention">${match}</span>`)
.replace(/<\/span>/g, "") .replace(/#[A-Za-z0-9_]+/g, (match) => `<span class="hashtag">${match}</span>`);
.replace(/@[A-Za-z0-9._]+/g, function (match) {
return `<span class="mention">${match}</span>`;
})
.replace(/#[A-Za-z0-9._]+/g, function (match) {
return `<span class="hashtag">${match}</span>`;
});
if (!/&nbsp;$/.test($(this).html())) { // var filter = html.replace(/(<b>)?\/([^<\/]*)(<\/b>)?/g, '\/$2');
// console.log(filter);
// filter = filter.replace(/(<b>)?([^<\/]*)\/(<\/b>)?/g, '$2\/');
// console.log(filter);
// filter = filter.replace(/(<b>)?\/([^<\/]*)\/(<\/b>)?/g, '<b>\/$2\/<\/b>');
// console.log(filter);
if (!/\&nbsp;$/.test($(this).html())) {
filter += '&nbsp;'; filter += '&nbsp;';
} }
$(this).html(filter); $(this).html(filter);
set_range(end, end, this); set_range(end, end, this);
}, 1);
}); });
// var range = window.getSelection().getRangeAt(0);
// var end_node = range.endContainer;
// var end = range.endOffset;
//
// if (end_node !== this) {
// const text_nodes = get_text_nodes_in(this);
// for (let i = 0; i < text_nodes.length; ++i) {
// if (text_nodes[i] === end_node) {
// break;
// }
// end += text_nodes[i].length;
// }
// }
//
// let html = $(this).html();
// if (/\&nbsp;$/.test(html) && $(this).text().length === end) {
// end--;
// set_range(end, end, this);
// return;
// }
//
// let filter = html.replace(/<span class="mention">/g, "")
// .replace(/<span class="hashtag">/g, "")
// .replace(/<\/span>/g, "")
// .replace(/@[A-Za-z0-9._]+/g, function (match) {
// return `<span class="mention">${match}</span>`;
// })
// .replace(/#[A-Za-z0-9._]+/g, function (match) {
// return `<span class="hashtag">${match}</span>`;
// });
//
// if (!/&nbsp;$/.test($(this).html())) {
// filter += '&nbsp;';
// }
// $(this).html(filter);
// set_range(end, end, this);
// })
// ;
$('#contentField').on('mouseup', function (e) { $('#contentField').on('mouseup', function (e) {
if (!/\&nbsp;$/.test($(this).html())) { if (!/\&nbsp;$/.test($(this).html())) {
@ -186,10 +277,11 @@ let uploadingFiles = [];
reader.addEventListener('load', () => { reader.addEventListener('load', () => {
thumbnailEl.css('background-image', `url(${reader.result})`); thumbnailEl.css('background-image', `url(${reader.result})`);
}); });
break; reader.readAsDataURL(file);
if (postMedia.length >= 4) if (postMedia.length >= 4)
$('.postImageUpload').hide(); $('.postImageUpload').hide();
break;
case 'video': case 'video':
const video = document.createElement('video'); const video = document.createElement('video');
video.src = URL.createObjectURL(file); video.src = URL.createObjectURL(file);
@ -234,10 +326,13 @@ let uploadingFiles = [];
}); });
uploadingFiles.splice(uploadingFiles.indexOf(file), 1); uploadingFiles.splice(uploadingFiles.indexOf(file), 1);
if(uploadingFiles.length === 0) { if (uploadingFiles.length === 0) {
$('#postModalPublish').removeClass('disabled').attr('disabled', false); $('#postModalPublish').removeClass('disabled').attr('disabled', false);
} }
}, },
error: () => {
addSnackbar('danger', 'Es ist ein Fehler beim Hochladen aufgetreten')
}
}); });
} }
@ -327,7 +422,7 @@ $('#postModal')
.on('hidden.bs.modal', () => { .on('hidden.bs.modal', () => {
$('#postModal #replyTo').val(-1); $('#postModal #replyTo').val(-1);
if(postMedia.length > 0) { if (postMedia.length > 0) {
postMedia.forEach(media => { postMedia.forEach(media => {
$.ajax({ $.ajax({
url: '/user/deletePostMedia', url: '/user/deletePostMedia',
@ -380,12 +475,12 @@ function submitPost(content, replyTo) {
${data.message.join('<br>')} ${data.message.join('<br>')}
</div> </div>
`); `);
if(data.buttons) { if (data.buttons) {
const footer = $('<div class="modal-footer"></div>'); const footer = $('<div class="modal-footer"></div>');
body.parent().append(footer); body.parent().append(footer);
data.buttons.forEach(button => { data.buttons.forEach(button => {
let btn; let btn;
if(button.action) { if (button.action) {
btn = `<a href="${button.action}" class="btn btn-${button.type}">${button.text}</a>`; btn = `<a href="${button.action}" class="btn btn-${button.type}">${button.text}</a>`;
} else { } else {
btn = `<button role="button" class="btn btn-${button.type}">${button.text}</button>`; btn = `<button role="button" class="btn btn-${button.type}">${button.text}</button>`;

62
assets/js/profile_page.js
View File

@ -40,14 +40,64 @@ function matrixToArray(str) {
} }
$(window).scroll(function () { $(window).scroll(function () {
const scrollTrigger = $('#scroll-trigger'); const offsetTop = $(this).scrollTop() + 80;
if ($(this).scrollTop() + 75 > scrollTrigger.offset().top) {
const subheader = $('#profile-sub-header');
let translate = subheader.css('transform');
let translateY = 0;
if (translate !== 'none') {
translate = matrixToArray(translate);
translateY = parseFloat(translate[translate.length - 1]);
}
const logoContainer = $('.profile-picture-container');
const logo = $('.profile-picture');
const maxDelta = subheader.offset().top - (logoContainer.width() * .8 - 60) / 2;
// const maxDelta = (logoContainer.width() * .8) / 2;
// const delta = offsetTop - logoOffset - translateY;
const delta = offsetTop - 60;
let factor = 1 - delta / maxDelta;
factor = Math.min(Math.max(0, factor), 1);
const maxWidth = logoContainer.width() * .8;
const minWidth = 50;
const width = minWidth + factor * (maxWidth - minWidth);
const maxBorder = 5;
const border = factor * maxBorder;
const maxLeft = 50;
const minLeft = 100;
const left = minLeft + factor * (maxLeft - minLeft);
const minTransformX = -120;
const maxTransformX = -50;
const transformX = minTransformX + factor * (maxTransformX - minTransformX);
const minTransformY = -60;
const maxTransformY = -50;
const transformY = minTransformY + factor * (maxTransformY - minTransformY);
logo.css('width', width + 'px')
.css('border-width', border + 'px')
.css('left', left + '%')
.css('transform', `translate(${transformX}%, ${transformY}%)`);
$('.avatar-upload-overlay').css('width', width + 'px')
.css('height', width + 'px')
.css('left', left + '%')
.css('transform', `translate(${transformX}%, ${transformY}%)`);
const scrollTrigger = $('#scroll-trigger').offset().top;
if (offsetTop > scrollTrigger) {
parallaxActive = false; parallaxActive = false;
$('#profile-sub-header').addClass('fixedTop').css('transform', 'translate3d(0,0,0)'); subheader.addClass('fixedTop').css('top', 60 - translateY + 'px');
$('#profile-content').css('transform', 'translate3d(0, ' + $('#profile-sub-header').height() + 'px, 0)'); $('#profile-content').css('transform', `translateY(${translateY * -1}px)`)
} else { } else if (offsetTop + 10 < scrollTrigger) {
parallaxActive = true; parallaxActive = true;
$('#profile-sub-header').removeClass('fixedTop'); subheader.removeClass('fixedTop');
} }
}); });