diff --git a/api.php b/api.php index dd9207f..c6990b3 100644 --- a/api.php +++ b/api.php @@ -4,20 +4,20 @@ $database = new SQLite3('outchat.db'); $action = $_GET['action']; -if($action === 'getMessages'){ +if ($action === 'getMessages') { $timestamp = $database->escapeString(htmlspecialchars($_GET['timestamp'])); $timestamp = ($timestamp == 0) ? strtotime('-6 hours') : $timestamp; - $results = $database->query('SELECT * FROM messages WHERE timestamp > '.$timestamp); + $results = $database->query('SELECT * FROM messages WHERE timestamp > ' . $timestamp); $messageArray = []; - while($row = $results->fetchArray(SQLITE3_ASSOC)) { + while ($row = $results->fetchArray(SQLITE3_ASSOC)) { $row['datetime'] = date('d/m H:i', $row['timestamp']); $image_search = preg_match('/(http|https):\/\/[^ ]+(\.gif|\.jpg|\.jpeg|\.png)/', $row['text'], $out); - if($image_search > 0){ - $row['text_processed'] = str_replace($out[0], '

', $row['text']); + if ($image_search > 0) { + $row['text_processed'] = str_replace($out[0], '

', $row['text']); } else { $row['text_processed'] = $row['text']; } @@ -27,17 +27,17 @@ if($action === 'getMessages'){ echo json_encode($messageArray); } -if($action === 'createMessage'){ +if ($action === 'createMessage') { $timestamp = time(); $name = $database->escapeString(htmlspecialchars($_POST['name'])); $text = $database->escapeString(htmlspecialchars($_POST['text'])); -/* - $payload = file_get_contents('php://input'); - $data = json_decode($payload); - var_dump($data); - */ + /* + $payload = file_get_contents('php://input'); + $data = json_decode($payload); + var_dump($data); + */ - $database->query('INSERT INTO messages (name, text, timestamp) VALUES ("'.$name.'", "'.$text.'", "'.$timestamp.'")'); + $database->query('INSERT INTO messages (name, text, timestamp) VALUES ("' . $name . '", "' . $text . '", "' . $timestamp . '")'); } ?> \ No newline at end of file diff --git a/helpers.js b/helpers.js index 1252691..9e7faee 100644 --- a/helpers.js +++ b/helpers.js @@ -7,12 +7,12 @@ function htmlToElements(html) { function hashCode(str) { // java String#hashCode var hash = 0; for (var i = 0; i < str.length; i++) { - hash = str.charCodeAt(i) + ((hash << 5) - hash); + hash = str.charCodeAt(i) + ((hash << 5) - hash); } return hash; -} +} -function intToRGB(i){ +function intToRGB(i) { const c = (i & 0x00FFFFFF) .toString(16) .toUpperCase(); @@ -26,7 +26,7 @@ function getCookie(name) { if (parts.length == 2) return parts.pop().split(";").shift(); } -function nl2br(str, is_xhtml){ +function nl2br(str, is_xhtml) { if (typeof str === 'undefined' || str === null) { return ''; } @@ -34,6 +34,6 @@ function nl2br(str, is_xhtml){ return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1' + breakTag + '$2'); } -function scrollWindowDown(){ +function scrollWindowDown() { window.scrollTo(0, document.body.scrollHeight) } \ No newline at end of file diff --git a/index.php b/index.php index e95ed26..0f5776a 100644 --- a/index.php +++ b/index.php @@ -4,15 +4,15 @@ sermon - +
@@ -20,7 +20,7 @@
'; - } +} ?>
@@ -34,6 +34,6 @@ - + diff --git a/main.css b/main.css index e0a1182..5fb9a77 100644 --- a/main.css +++ b/main.css @@ -112,7 +112,7 @@ body { } .modal__form-input { - padding: 0 90px 0 30px; + padding: 0 90px 0 30px; width: 100%; height: 100%; border: 0; @@ -134,8 +134,6 @@ body { background: none; } - - @media (max-width: 640px) { .chat { padding: 10px 10px 50px 10px; diff --git a/main.js b/main.js index d9cbfea..5067df2 100644 --- a/main.js +++ b/main.js @@ -1,26 +1,26 @@ // modal form handle -if(document.querySelector('.modal__form-submit')){ - document.querySelector('.modal__form-submit').addEventListener('click', function(e){ +if (document.querySelector('.modal__form-submit')) { + document.querySelector('.modal__form-submit').addEventListener('click', function (e) { e.preventDefault() const value = document.querySelector('.modal__form-input').value - if(value.length >= 3){ + if (value.length >= 3) { var date = new Date(Date.now()) - date = date.setTime(date.getTime() + (90*24*60*60*1000)) + date = date.setTime(date.getTime() + (90 * 24 * 60 * 60 * 1000)) date = new Date(date) const expires = '; expires=' + date.toUTCString() - document.cookie = 'outchat_name=' + (value || '') + expires + '; path=/' + document.cookie = 'outchat_name=' + (value || '') + expires + '; path=/' window.location.href = '' } }) } -document.querySelector('.form__input-message').addEventListener('keydown', function(e){ - if(e.ctrlKey && e.keyCode == 13){ +document.querySelector('.form__input-message').addEventListener('keydown', function (e) { + if (e.ctrlKey && e.keyCode == 13) { document.querySelector('.form__input-submit').click() } }) -document.querySelector('.form__input-submit').addEventListener('click', function(e){ +document.querySelector('.form__input-submit').addEventListener('click', function (e) { e.preventDefault() const name = getCookie('outchat_name') @@ -31,52 +31,52 @@ document.querySelector('.form__input-submit').addEventListener('click', function formData.append(name, text) fetch('api.php?action=createMessage', { - method: 'post', - headers: { - "Content-Type": "application/x-www-form-urlencoded" - }, - body: 'name='+name+'&text='+text - }) - .then(function(data){ + method: 'post', + headers: { + "Content-Type": "application/x-www-form-urlencoded" + }, + body: 'name=' + name + '&text=' + text + }) + .then(function (data) { getMessages() }) - .catch(function(error){ + .catch(function (error) { console.log(error) }) }) -function getMessages(){ +function getMessages() { const timestamp = (document.querySelector('.chat').lastElementChild) ? document.querySelector('.chat').lastElementChild.getAttribute('data-timestamp') : 0 - fetch('api.php?action=getMessages×tamp='+timestamp) - .then(function(data){ + fetch('api.php?action=getMessages×tamp=' + timestamp) + .then(function (data) { return data.json() }) - .then(function(data){ - if(data.length > 0){ - if((window.scrollY + window.innerHeight) == document.body.scrollHeight){ - setTimeout(function(){ + .then(function (data) { + if (data.length > 0) { + if ((window.scrollY + window.innerHeight) == document.body.scrollHeight) { + setTimeout(function () { scrollWindowDown() }, 100) } - for(message of data){ + for (message of data) { createMessageNode(message.name, message.text_processed, message.timestamp, message.datetime) } } }) - .catch(function(error){ + .catch(function (error) { console.log(error) }) } -function createMessageNode(name, text, timestamp, datetime){ - const elementMain = document.createElement('div', { class: 'message' }) - const elementText = document.createElement('div', { class: 'message__text'}) - const elementInfo = document.createElement('div', { class: 'message__info'}) - const elementName = document.createElement('div', { id: 'message__info-name'}) - const elementDatetime = document.createElement('div', { id: 'message__info-datetime'}) +function createMessageNode(name, text, timestamp, datetime) { + const elementMain = document.createElement('div', {class: 'message'}) + const elementText = document.createElement('div', {class: 'message__text'}) + const elementInfo = document.createElement('div', {class: 'message__info'}) + const elementName = document.createElement('div', {id: 'message__info-name'}) + const elementDatetime = document.createElement('div', {id: 'message__info-datetime'}) const contentName = document.createTextNode(name) - const contentDatetime = document.createTextNode('['+datetime+']') + const contentDatetime = document.createTextNode('[' + datetime + ']') //const contentText = document.createTextNode(text) // element creation @@ -87,7 +87,7 @@ function createMessageNode(name, text, timestamp, datetime){ elementName.classList.add('message__info-name') // "hash" name color - elementName.style.color = "#"+intToRGB(hashCode(name)) + elementName.style.color = "#" + intToRGB(hashCode(name)) // append everything to chat elementName.appendChild(contentName) @@ -100,13 +100,13 @@ function createMessageNode(name, text, timestamp, datetime){ elementMain.appendChild(elementInfo) elementMain.appendChild(elementText) elementMain.setAttribute('data-timestamp', timestamp) - + document.querySelector('.chat').appendChild(elementMain) return true } getMessages() -setInterval(function(){ +setInterval(function () { getMessages() }, 2000)