diff --git a/application/controllers/User.php b/application/controllers/User.php index 20d1f98..bec511d 100644 --- a/application/controllers/User.php +++ b/application/controllers/User.php @@ -31,7 +31,7 @@ $userBlogPosts = $this->UserModel->getUserBlogPosts($userData['ID'], 3, 0); $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"; $isCurrentUserFollowing = false; if (isset($_SESSION['user']['ID'])) @@ -66,7 +66,7 @@ if ($user_exists) { $user_data = $user_data[0]; $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']); $title = $user_data['displayname'] . " - Blog-Kommentare"; $isCurrentUserFollowing = false; @@ -115,7 +115,7 @@ if ($user_exists) { $user_data = $user_data[0]; $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']); $title = $user_data['displayname'] . " - Posts"; $isCurrentUserFollowing = false; @@ -162,7 +162,7 @@ if ($user_exists) { $user_data = $user_data[0]; $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']); $title = $user_data['displayname'] . " - Posts"; $isCurrentUserFollowing = false; @@ -355,7 +355,7 @@ if ($user_exists) { $user_data = $user_data[0]; $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']); $followers = $this->UserModel->getFollowers($user_data['ID']); $title = $user_data['displayname'] . " - Follower"; @@ -391,7 +391,7 @@ if ($user_exists) { $user_data = $user_data[0]; $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']); $following = $this->UserModel->getFollowing($user_data['ID']); $title = $user_data['displayname'] . " - Follower"; @@ -542,7 +542,7 @@ unset($_FILES['header']); } // Social Networks - if (isset($_POST['sociaNetworks'])) { + if (isset($_POST['socialNetworks'])) { } // Profile color @@ -596,11 +596,11 @@ $loginData = $this->LoginModel->getLoginData($_SESSION['user']['username']); if (!empty($loginData)) { $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 ($this->LoginModel->checkPassword($_POST['passwordNew'])) { 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'] .= ""; } else { $_SESSION['profileEditNotification'] .= ""; diff --git a/assets/css/profile_page.css b/assets/css/profile_page.css index 61c0be0..fe2b024 100644 --- a/assets/css/profile_page.css +++ b/assets/css/profile_page.css @@ -94,10 +94,12 @@ #profile-sub-header .profile-picture-container { position: relative; + padding: 0; } #profile-sub-header .profile-picture { position: absolute; + top: 50%; left: 50%; width: 80%; transform: translate(-50%, -60%); @@ -106,13 +108,12 @@ box-shadow: 0 1px 3px 0 rgba(0,0,0,0.25); border-radius: 100%; margin: 0; - transition: all .2s; } #profile-sub-header.fixedTop .profile-picture { left: 100%; width: 50px; - transform: translateX(-110%); + transform: translate(-120%, -50%); border: 0; } @@ -127,7 +128,7 @@ .avatar-upload-overlay { position: absolute; width: 80%; - top: 25px; + top: 35px; left: 50%; transform: translate(-50%, -50%); background-color: rgba(255,255,255,0); @@ -161,12 +162,15 @@ -o-transition: color .2s; transition: color .2s; font-size: 40px; - margin: 42%; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); } .fixedTop .avatar-upload-overlay .fa { font-size: 20px; - margin: 32%; + /*margin: 32%;*/ } .avatar-upload-overlay:hover .fa { diff --git a/assets/js/post-create.js b/assets/js/post-create.js index b053613..4412295 100644 --- a/assets/js/post-create.js +++ b/assets/js/post-create.js @@ -1,41 +1,132 @@ -$('#contentField').on('keyup', function (e) { - 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 (/\ $/.test(html) && $(this).text().length === end) { - end--; - set_range(end, end, this); +// $('#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 (/\ $/.test(html) && $(this).text().length === end) { +// end--; +// set_range(end, end, this); +// return; +// } +// +// let filter = html.replace(//g, "") +// .replace(//g, "") +// .replace(/<\/span>/g, "") +// .replace(/@[A-Za-z0-9._]+/g, (match) => `${match}`) +// .replace(/#[A-Za-z0-9._]+/g, (match) => `${match}`); +// +// 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; - } - let filter = html.replace(//g, "") - .replace(//g, "") - .replace(/<\/span>/g, "") - .replace(/@[A-Za-z0-9._]+/g, function (match) { - return `${match}`; - }) - .replace(/#[A-Za-z0-9._]+/g, function (match) { - return `${match}`; - }); + console.log(e.which); - if (!/ $/.test($(this).html())) { - filter += ' '; - } - $(this).html(filter); - set_range(end, end, this); + setTimeout(() => { + var range = window.getSelection().getRangeAt(0); + var end_node = range.endContainer; + var end = range.endOffset; + if (end_node != this) { + var text_nodes = get_text_nodes_in(this); + for (var i = 0; i < text_nodes.length; ++i) { + if (text_nodes[i] == end_node) { + break; + } + end += text_nodes[i].length; + } + } + var html = $(this).html(); + if (/\ $/.test(html) && $(this).text().length == end) { + end = end - 1; + set_range(end, end, this); + return; + } + + let filter = html.replace(/([^<\/]*)<\/span>/g, '$1') + .replace(/@[A-Za-z0-9._]+/g, (match) => `${match}`) + .replace(/#[A-Za-z0-9_]+/g, (match) => `${match}`); + + // var filter = html.replace(/()?\/([^<\/]*)(<\/b>)?/g, '\/$2'); + // console.log(filter); + // filter = filter.replace(/()?([^<\/]*)\/(<\/b>)?/g, '$2\/'); + // console.log(filter); + // filter = filter.replace(/()?\/([^<\/]*)\/(<\/b>)?/g, '\/$2\/<\/b>'); + // console.log(filter); + + if (!/\ $/.test($(this).html())) { + filter += ' '; + } + + $(this).html(filter); + 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 (/\ $/.test(html) && $(this).text().length === end) { +// end--; +// set_range(end, end, this); +// return; +// } +// +// let filter = html.replace(//g, "") +// .replace(//g, "") +// .replace(/<\/span>/g, "") +// .replace(/@[A-Za-z0-9._]+/g, function (match) { +// return `${match}`; +// }) +// .replace(/#[A-Za-z0-9._]+/g, function (match) { +// return `${match}`; +// }); +// +// if (!/ $/.test($(this).html())) { +// filter += ' '; +// } +// $(this).html(filter); +// set_range(end, end, this); +// }) +// ; $('#contentField').on('mouseup', function (e) { if (!/\ $/.test($(this).html())) { @@ -186,10 +277,11 @@ let uploadingFiles = []; reader.addEventListener('load', () => { thumbnailEl.css('background-image', `url(${reader.result})`); }); - break; + reader.readAsDataURL(file); if (postMedia.length >= 4) $('.postImageUpload').hide(); + break; case 'video': const video = document.createElement('video'); video.src = URL.createObjectURL(file); @@ -234,10 +326,13 @@ let uploadingFiles = []; }); uploadingFiles.splice(uploadingFiles.indexOf(file), 1); - if(uploadingFiles.length === 0) { + if (uploadingFiles.length === 0) { $('#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', () => { $('#postModal #replyTo').val(-1); - if(postMedia.length > 0) { + if (postMedia.length > 0) { postMedia.forEach(media => { $.ajax({ url: '/user/deletePostMedia', @@ -380,12 +475,12 @@ function submitPost(content, replyTo) { ${data.message.join('
')} `); - if(data.buttons) { + if (data.buttons) { const footer = $('
'); body.parent().append(footer); data.buttons.forEach(button => { let btn; - if(button.action) { + if (button.action) { btn = `${button.text}`; } else { btn = ``; diff --git a/assets/js/profile_page.js b/assets/js/profile_page.js index 7b6dd44..b4591ba 100644 --- a/assets/js/profile_page.js +++ b/assets/js/profile_page.js @@ -40,14 +40,64 @@ function matrixToArray(str) { } $(window).scroll(function () { - const scrollTrigger = $('#scroll-trigger'); - if ($(this).scrollTop() + 75 > scrollTrigger.offset().top) { + const offsetTop = $(this).scrollTop() + 80; + + 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; - $('#profile-sub-header').addClass('fixedTop').css('transform', 'translate3d(0,0,0)'); - $('#profile-content').css('transform', 'translate3d(0, ' + $('#profile-sub-header').height() + 'px, 0)'); - } else { + subheader.addClass('fixedTop').css('top', 60 - translateY + 'px'); + $('#profile-content').css('transform', `translateY(${translateY * -1}px)`) + } else if (offsetTop + 10 < scrollTrigger) { parallaxActive = true; - $('#profile-sub-header').removeClass('fixedTop'); + subheader.removeClass('fixedTop'); } });