app/src/modules/notification.html
<DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>devRant</title>
<link rel="stylesheet" href="../res/css/ionicons.min.css">
<style>
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v13/UyBMtLsHKBKXelqf4x7VRQ.woff2) format('woff2');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v13/1YwB1sO8YE1Lyjf12WNiUA.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
/* cyrillic-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/ek4gzZ-GeXAPcSbHtCeQI_esZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/mErvLBYg_cXG3rLvUsKT_fesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/-2n2p-_Y08sg57CNWQfKNvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/u0TOpm082MNkS5K0Q4rhqvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/NdF9MtnOpLzo-noMoG0miPesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/Fcx7Wwv8OzT71A3E1XOAjvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
body,
html {
background: transparent;
font: menu;
overflow: hidden;
margin: 0px;
}
#top {
display: flex;
}
#notifimage {
height: 72px;
width: 72px;
margin: 10px;
border: none;
border-radius: 100%;
}
#info {
flex: 1;
padding-left: 12px;
}
#header {
margin-bottom: 6px;
margin-top: 14px;
font-family: 'Lato', sans-serif;
-webkit-app-region: drag;
}
#desc {
margin: 0px;
width: 335px;
font-family: 'Roboto', sans-serif;
}
#text_area {
margin: 10px;
height: 68px;
}
button {
height: 54px;
width: 54px;
margin: 6px 0px;
border: none;
background: transparent;
transform: translateY(-43%);
}
button:focus {
outline: none;
}
button i {
font-size: 32px;
}
button i::before {
-webkit-text-stroke: 1px #777;
color: #fff;
}
textarea {
width: 362px;
max-width: 362px;
padding: 8px;
resize: none;
margin: 6px 0px;
font-family: 'Roboto', sans-serif;
}
textarea:focus {
outline: none;
border: 1px solid #666;
}
#close {
width: 18px;
height: 18px;
position: absolute;
right: 1px;
top: 4px;
color: #666;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
border-radius: 100%;
transition: all 0.2s;
}
#close:hover {
background-color: gray;
color: #fff;
}
</style>
</head>
<body>
<div id="app">
<div id="close">
<i class="ion-close-round"></i>
</div>
<div id="top">
<img src="../res/images/invis.png" id="notifimage" />
<div id="info">
<h4 id="header">USER</h4>
<p id="desc">MESSAGE</p>
</div>
</div>
<div id="text_area">
<textarea id="ta" resizable="false" placeholder="Reply"></textarea>
<button onclick="sendReply()"><i class="ion-android-send"></i></button>
</div>
</div>
<script type="text/javascript">
const {
ipcRenderer,
screen,
remote
} = require('electron');
const rantscript = require('rantscript');
document.addEventListener("keydown", function (e) {
if (e.which === 123) {
remote.getCurrentWindow().toggleDevTools();
} else if (e.which === 116) {
location.reload();
}
});
const path = require('path');
const main = remote.require(path.join(__dirname, '/notify.js'));
// This is lazy but it works ;)
let currentReply = 0;
let currentName = "";
let notifs = [];
console.log(main)
function sendReply() {
let replyText = document.getElementById('ta').value;
console.log(replyText)
if (replyText.length > 0) {
document.getElementById('ta').value = "";
console.log('notif > send')
main.ui().hide();
main.send(currentReply, `@${currentName} ${replyText}`);
}
}
function calcPos() {
main.ui().setSize(444, document.getElementById('app').scrollHeight - 13);
setTimeout(()=>{
var np = screen.getDisplayNearestPoint(screen.getCursorScreenPoint());
var ap = screen.getCursorScreenPoint();
main.log(np)
main.log(np.bounds.x + np.bounds.width - window.innerWidth - 12)
if (ap.y > np.workArea.height / 2) {
main.ui().setPosition(
np.workArea.x + np.workArea.width - window.innerWidth - 12,
np.workArea.y + np.workArea.height - window.innerHeight - 12
)
} else {
main.ui().setPosition(
np.workArea.x + np.workArea.width - window.innerWidth - 12,
np.workArea.y + 12
)
}
}, 100)
}
window.onbeforeunload = (e) => {
main.ui().hide();
e.returnValue = false;
}
calcPos()
function sendNotif(n, i) {
main.log('sendNotif');
let notifNum = notifs.length;
notifs.push(new Notification('devRantron', {
body: n.body + ' Click here to reply.',
icon: i,
}));
calcPos();
notifs[notifNum].onclick = (e) => {
calcPos();
main.ui().show();
};
}
document.getElementById('close').onclick = () => {
main.ui().hide();
}
function getClosest(num, arr) {
let curr = arr[0];
for (val of arr) {
if (Math.abs(num - val.created_time) < Math.abs(num - curr.created_time)) {
curr = val;
}
}
return curr;
}
notifimage.onclick = calcPos
ipcRenderer.on('notifData', function (serder, n) {
main.log('notifData');
console.log(n)
currentReply = n.id;
rantscript
.rant(n.id)
.then((res) => {
console.log(res)
main.log('gotComents');
let comment = getClosest(n.content.created_time, res.comments);
main.log(`comment: ${comment}`);
document.getElementById('header').innerHTML = comment.user_username;
currentName = comment.user_username;
document.getElementById('desc').innerHTML = comment.body;
if (comment.user_avatar.i != undefined) {
document.getElementById('notifimage').src = 'https://avatars.devrant.io/' + comment.user_avatar.i;
} else {
document.getElementById('notifimage').src = '../res/images/invis.png';
}
document.getElementById('notifimage').style.background = '#' + comment.user_avatar.b;
sendNotif(n, document.getElementById('notifimage').src);
})
});
</script>
</body>
</html>