sdbs/sermon
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

formatting

Browse source
This commit is contained in:
Tomáš Mládek 2018-10-17 13:37:53 +02:00
parent 1688d04646
commit b19ed3cade
5 changed files with 58 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
api.php
View file

@ -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], '<p><img src="'.$out[0].'" /></p>', $row['text']);
if ($image_search > 0) {
$row['text_processed'] = str_replace($out[0], '<p><img src="' . $out[0] . '" /></p>', $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 . '")');
}
?>

10
helpers.js
View file

@ -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)
}

10
index.php
View file

@ -4,15 +4,15 @@
<meta charset="UTF-8">
<title>sermon</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<link rel="stylesheet" href="main.css">
</head>
<body>
<?php
if(!isset($_COOKIE['outchat_name'])){
echo '
if (!isset($_COOKIE['outchat_name'])) {
echo '
<div class="modal">
<form action="" method="post" class="modal__form">
<input type="text" name="name" placeholder="name" minLength="3" maxLength="20" class="modal__form-input">
@ -20,7 +20,7 @@
</form>
</div>
';
}
}
?>
<div class="chat">
@ -34,6 +34,6 @@
<script src="helpers.js"></script>
<script src="main.js"></script>
</body>
</html>

4
main.css
View file

@ -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;

70
main.js
View file

@ -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&timestamp='+timestamp)
.then(function(data){
fetch('api.php?action=getMessages&timestamp=' + 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)