var autosize = require('autosize'); require('whatwg-fetch'); require('element-closest'); NodeList.prototype.forEach = Array.prototype.forEach; HTMLCollection.prototype.forEach = Array.prototype.forEach; var ws = null; var pageTitle; function initWS() { var content = document.getElementById('content'); if (!content) { return } var pageMID = content.getAttribute('data-mid'); if (!pageMID) { return } var url; var protocolPrefix = (window.location.protocol === 'https:') ? 'wss:' : 'ws:'; if (typeof (juickDebug) != 'undefined') { url = protocolPrefix + '//ws.juick.com/_replies'; } else { url = protocolPrefix + '//ws.juick.com/' + pageMID; } var hash = document.getElementById('body').getAttribute('data-hash'); if (typeof (hash) != 'undefined' && hash) { url += '?hash=' + hash; } ws = new WebSocket(url); ws.onopen = function () { console.log('online'); if (!document.querySelector('#wsthread')) { var d = document.createElement('div'); d.id = 'wsthread'; d.addEventListener('click', onclickNextReply); document.querySelector('body').appendChild(d); pageTitle = document.title; } }; ws.onclose = function () { console.log('offline'); ws = null; setTimeout(function () { initWS(); }, 2000); }; ws.onmessage = function (msg) { if (msg.data == ' ') { ws.send(' '); } else { try { var jsonMsg = JSON.parse(msg.data); console.log('data: ' + msg.data); wsIncomingReply(jsonMsg); } catch (err) { console.log(err); } } }; setInterval(wsSendKeepAlive, 90000); } function wsSendKeepAlive() { if (ws) { ws.send(' '); } } function wsShutdown() { if (ws) { ws.onclose = function () { }; ws.close(); } } function wsIncomingReply(msg) { var p; if (msg.replyto > 0) { p = document.getElementById(msg.replyto); } var li = document.createElement('li'); li.setAttribute('class', 'msg reply-new'); li.setAttribute('id', msg.rid); li.addEventListener('click', function (e) { onclickNewReply(this); e.preventDefault(); }); li.addEventListener('mouseover', function (e) { onclickNewReply(this); e.preventDefault(); }); var msgAvatar = document.createElement('div'); msgAvatar.setAttribute('class', 'msg-avatar'); var msgAvatarLink = document.createElement('a'); msgAvatarLink.setAttribute('href', '/' + msg.user.uname + '/'); var msgAvatarImg = document.createElement('img'); msgAvatarImg.setAttribute('src', '//i.juick.com/a/' + msg.user.uid + '.png'); msgAvatarLink.appendChild(msgAvatarImg); msgAvatar.appendChild(msgAvatarLink); li.appendChild(msgAvatar); var msgCont = document.createElement('div'); msgCont.setAttribute('class', 'msg-cont'); var msgMenu = document.createElement('div'); msgMenu.setAttribute('class', 'msg-menu'); msgCont.appendChild(msgMenu); var msgMenuLink = document.createElement('a'); msgMenuLink.setAttribute('href', '#'); msgMenuLink.addEventListener('click', function (e) { showMessageLinksDialog(msg.mid, msg.rid); e.preventDefault(); }); msgMenu.appendChild(msgMenuLink); var msgHeader = document.createElement('div'); msgHeader.setAttribute('class', 'msg-header'); var msgHeaderLink = document.createElement('a'); msgHeaderLink.setAttribute('href', '/' + msg.user.uname + '/'); msgHeaderLink.textContent = '@' + msg.user.uname; msgHeader.appendChild(msgHeaderLink); msgHeader.textContent = msgHeaderLink.textContent + ':'; var msgTimestamp = document.createElement('div'); msgTimestamp.setAttribute('class', 'msg-ts'); var msgTimestampLink = document.createElement('a'); msgTimestampLink.setAttribute('href', '/' + msg.mid + '#' + msg.rid); msgTimestampLink.setAttribute('title', msg.timestamp + ' GMT'); msgTimestampLink.textContent = msg.timestamp; msgTimestamp.appendChild(msgTimestampLink); var msgTxt = document.createElement('div'); msgTxt.setAttribute('class', 'msg-txt'); var msgLinks = document.createElement('div'); msgLinks.setAttribute('class', 'msg-links'); var msgLinksLink = document.createElement('a'); msgLinksLink.setAttribute('href', '#'); msgLinksLink.textContent = 'Ответить'; msgLinksLink.addEventListener('click', function (e) { showCommentForm(msg.mid, msg.rid); e.preventDefault(); }); msgLinks.appendChild(msgLinksLink); var msgComment = document.createElement('div'); msgComment.setAttribute('class', 'msg-comment'); msgComment.style.display = 'none'; msgCont.appendChild(msgMenu); msgCont.appendChild(msgHeader); msgCont.appendChild(msgTimestamp); msgCont.appendChild(msgTxt); msgCont.appendChild(msgLinks); msgCont.appendChild(msgComment); li.appendChild(msgCont); li.querySelector('.msg-txt').textContent = msg.body; if (p) { li.style.marginLeft = p.style.marginLeft + '20px'; p.parentNode.insertBefore(li, p.nextSibling); } else { document.querySelector('#replies').appendChild(li); } updateRepliesCounter(); } function onclickNewReply(el) { var li = el; li.classList.remove('reply-new'); li.removeEventListener('click'); li.removeEventListener('mouseover'); updateRepliesCounter(); } function onclickNextReply() { var li = document.querySelector('#replies>li.reply-new:first'); if (li.length) { li.classList.remove('reply-new'); li.removeEventListener('click'); li.childNodes[0].scrollIntoView(); updateRepliesCounter(); } } function updateRepliesCounter() { var replies = document.querySelectorAll('#replies>li.reply-new').length; if (replies > 0) { var wsthread = document.querySelector('#wsthread'); wsthread.textContent = replies; wsthread.style.display = 'block'; document.title = '[' + replies + '] ' + pageTitle; } else { document.querySelector('#wsthread').style.display = 'none'; document.title = pageTitle; } } /******************************************************************************/ /******************************************************************************/ /******************************************************************************/ function postformListener(formEl, ev) { var form = formEl.closest('form'); if (ev.ctrlKey && (ev.keyCode == 10 || ev.keyCode == 13)) { if (!form.onsubmit || form.onsubmit()) { form.submit(); } } } function unfoldPostForm() { if (window.location.pathname === '/' && window.location.hash === '#post') { document.querySelector('#newmessage>div').style.display = 'block'; document.querySelector('#newmessage textarea').style.minHeight = '70px'; document.querySelector('#newmessage textarea').focus(); } } function onsubmitNewMessage() { if (document.querySelector('#newmessage textarea').value.length == 0) { openDialog('

Пожалуйста, введите текст сообщения

'); return false; } return true; } function showMoreReplies(el, id) { el.closest('li').querySelector('.msg-comments').style.display = 'none'; var replies = document.querySelectorAll('#replies>li'); var flagshow = 0; for (var i = 0; i < replies.length; i++) { if (flagshow == 1) { if (replies[i].style.display == 'none') { replies[i].style.display = 'block'; } else { break; } } if (replies[i].id == id) { flagshow = 1; } } return false; } function replyForm(mid, rid) { var form = document.createElement('form'); form.setAttribute('action', '/comment'); form.setAttribute('method', 'POST'); form.setAttribute('enctype', 'multipart/form-data'); var input = document.createElement('input'); input.setAttribute('type', 'hidden'); input.setAttribute('name', 'mid'); input.setAttribute('value', mid); form.appendChild(input); if (rid) { var inputRid = document.createElement('input'); inputRid.setAttribute('type', 'hidden'); inputRid.setAttribute('name', 'rid'); inputRid.setAttribute('value', rid); form.appendChild(inputRid); } return form; } function taWrapper() { var txtarea = document.createElement('textarea'); txtarea.setAttribute('name', 'body'); txtarea.setAttribute('rows', 1); txtarea.setAttribute('class', 'reply narrow'); txtarea.setAttribute('placeholder', 'Написать комментарий...'); var txtKeypress = function (e) { postformListener(e.target, e); }; txtarea.addEventListener('keypress', txtKeypress); var wrapper = document.createElement('div'); wrapper.setAttribute('class', 'ta-wrapper'); wrapper.appendChild(txtarea); var att = document.createElement('div'); att.setAttribute('class', 'attach-photo'); var attClick = function () { attachCommentPhoto(this); }; att.addEventListener('click', attClick); wrapper.appendChild(att); return wrapper; } function showCommentForm(mid, rid) { var reply = document.getElementById(rid); if (reply && !reply.querySelector('textarea')) { var c = reply.querySelector('div.msg-cont > .msg-comment'); var newNode = c.cloneNode(true); var form = replyForm(mid, rid); form.appendChild(newNode); newNode.appendChild(taWrapper()); var subm = document.createElement('input'); subm.setAttribute('type', 'submit'); subm.setAttribute('value', 'OK'); newNode.appendChild(subm); c.parentNode.insertBefore(form, c); c.remove(); } var commentBlock = reply.querySelector('div.msg-cont > form > div.msg-comment'); commentBlock.style.display = 'block'; var commentText = commentBlock.querySelector('textarea'); if (commentText) { autosize(commentText); commentText.focus(); } } function showCommentFooter(e, mid, rid) { var a = e.closest('article'); if (!a.querySelector('footer.comm')) { var form = replyForm(mid, rid); var footer = document.createElement('footer'); footer.setAttribute('class', 'comm'); footer.appendChild(taWrapper()); var subm = document.createElement('input'); subm.setAttribute('type', 'submit'); subm.setAttribute('value', 'OK'); footer.appendChild(subm); form.appendChild(footer); a.appendChild(form); autosize(a.querySelector('textarea')); } a.querySelector('textarea').focus(); } function attachInput() { var inp = document.createElement('input'); inp.setAttribute('type', 'file'); inp.setAttribute('name', 'attach'); inp.setAttribute('accept', 'image/jpeg,image/png'); inp.style.visibility = 'hidden'; return inp; } function attachCommentPhoto(div) { if (div.children.length === 0) { var inp = attachInput(); inp.addEventListener('change', function () { inp.parentNode.classList.add('attach-photo-active'); }); inp.click(); div.appendChild(inp); } else { div.innerHTML = null; div.classList.add('attach-photo'); } } function attachMessagePhoto(div) { var f = div.closest('form'); var finput = f.querySelector('input[type="file"]'); if (!finput) { var inp = attachInput(); inp.style.float = 'left'; inp.style.width = 0; inp.style.height = 0; inp.addEventListener('change', function () { div.textContent = 'загрузить (✓)'; }); f.appendChild(inp); inp.click(); } else { finput.remove(); div.textContent = 'загрузить'; } } function unfoldReply() { if ((0 + window.location.hash.substring(1)) > 0) { var el = window.location.hash; while (el.matches('[type="hidden"]')) { el = el.previousSibling(); } showMoreReplies(el.getAttribute('id')); window.location.replace(window.location.hash); } } function showMessageLinksDialog(mid, rid) { var hlink = window.location.protocol + '//juick.com/' + mid; var mlink = '#' + mid; if (rid > 0) { hlink += '#' + rid; mlink += '/' + rid; } var hlinkenc = encodeURIComponent(hlink); var html = '
Ссылка на сообщение:'; html += '
' + hlink + '
'; html += 'Номер сообщения:'; html += '
' + mlink + '
'; html += 'Поделиться:
'; openDialog(html); } function showPhotoDialog(fname) { var width = window.width; var height = window.height * 0.9; if (width < 640) { return true; } else if (width < 1280) { openDialog(''); document.querySelector('#dialogw img').style.maxHeight = height + 'px'; return false; } else { openDialog(''); document.querySelector('#dialogw img').style.maxHeight = height + 'px'; return false; } } function openDialog(html) { var dhtml = '
'; dhtml += html; dhtml += '
'; document.querySelector('body').insertAdjacentHTML('afterbegin', dhtml); document.querySelector('#dialogb').addEventListener('click', closeDialog); document.querySelector('#dialogc').addEventListener('click', closeDialog); } function closeDialog() { document.querySelector('#dialogb').remove(); document.querySelector('#dialogt').remove(); } function openSocialWindow(a) { var w = window.open(a.href, 'juickshare', 'width=640,height=400'); if (window.focus) w.focus(); return false; } function checkUsername() { var uname = document.querySelector('#username').textContent; fetch('//api.juick.com/users?uname=' + uname) .then(function () { document.querySelector('#username').style.background = '#FFCCCC'; }) .catch(function () { document.querySelector('#username').style.background = '#CCFFCC'; }); } /******************************************************************************/ function openDialogLogin() { var html = '

Пожалуйста, представьтесь:' + 'Facebook ' + 'ВКонтакте

' + '

Уже зарегистрированы?

' + '
' + '
' + '
' + '' + '
'; openDialog(html); return false; } /******************************************************************************/ function resultMessage(str) { var result = document.createElement('p'); result.textContent = str; return result; } function likeMessage(e, mid) { if (confirm('Are you sure?')) { fetch('//juick.com/like?mid=' + mid, { method: 'POST' }) .then(function (response) { if (response.ok) { e.closest('article').appendChild(resultMessage('OK!')); } }) .catch(function () { e.closest('article').appendChild(resultMessage('Ошибка')); }); } return false; } /******************************************************************************/ function setPopular(e, mid, popular) { var hash = document.getElementById('body').getAttribute('data-hash'); fetch('//api.juick.com/messages/set_popular?mid=' + mid + '&popular=' + popular + '&hash=' + hash) .then(function () { var a = e.closest('article'); a.append(resultMessage('OK!')); }); return false; } function setPrivacy(e, mid) { var hash = document.getElementById('body').getAttribute('data-hash'); fetch('//api.juick.com/messages/set_privacy?mid=' + mid + '&hash=' + hash) .then(function () { var a = e.closest('article'); a.append(resultMessage('OK!')); }); return false; } /******************************************************************************/ Element.prototype.selectText = function () { var d = document; if (d.body.createTextRange) { var range = d.body.createTextRange(); range.moveToElementText(this); range.select(); } else if (window.getSelection) { var selection = window.getSelection(); var rangeSel = d.createRange(); rangeSel.selectNodeContents(this); selection.removeAllRanges(); selection.addRange(rangeSel); } }; function ready(fn) { if (document.readyState != 'loading') { fn(); } else { document.addEventListener('DOMContentLoaded', fn); } } ready(function () { autosize(document.querySelectorAll('textarea')); var insertButtons = function (e) { var textarea = e.target; textarea.classList.add('narrow'); textarea.insertAdjacentHTML('afterend', '
'); textarea.parentNode.insertAdjacentHTML('afterend', ''); textarea.removeEventListener('click', insertButtons); e.preventDefault(); }; document.querySelectorAll('textarea.reply').forEach(function(e) { e.addEventListener('click', insertButtons); }); var insertPMButtons = function (e) { e.target.classList.add('narrowpm'); e.target.parentNode.insertAdjacentHTML('afterend', ''); e.target.removeEventListener('click', insertPMButtons); e.preventDefault(); }; document.querySelectorAll('textarea.replypm').forEach(function(e) { e.addEventListener('click', insertPMButtons); }); var content = document.getElementById('content'); if (content) { var pageMID = content.getAttribute('data-mid'); if (pageMID > 0) { document.querySelectorAll('.msg-comments').forEach(function(e) { var rid = e.parentNode.parentNode.id; e.addEventListener('click', function (e) { showMoreReplies(e.target, rid); e.preventDefault(); }); }); document.querySelectorAll('.a-thread-comment').forEach(function(e) { var rid = e.closest('li').id; e.addEventListener('click', function (e) { showCommentForm(pageMID, rid); e.preventDefault(); }); }); } } document.querySelectorAll('.msg-menu a').forEach(function(e) { var mid = e.closest('section').getAttribute('data-mid'); var rid = parseInt(e.closest('li').id); e.addEventListener('click', function(e) { showMessageLinksDialog(mid, rid); e.preventDefault(); }); }); document.querySelectorAll('.l .a-comment').forEach(function(e) { e.addEventListener('click', function (e) { var mid = e.target.closest('article').getAttribute('data-mid'); showCommentFooter(e.target, mid); e.preventDefault(); }); }); document.querySelectorAll('.l .a-privacy').forEach(function(e) { e.addEventListener('click', function (e) { var mid = e.target.closest('article').getAttribute('data-mid'); setPrivacy(e.target, mid); e.preventDefault(); }); }); document.querySelectorAll('.l .a-popular-plus').forEach(function(e) { e.addEventListener('click', function (e) { var mid = e.target.closest('article').getAttribute('data-mid'); setPopular(e.target, mid, 2); e.preventDefault(); }); }); document.querySelectorAll('.l .a-popular-minus').forEach(function(e) { e.addEventListener('click', function (e) { var mid = e.target.closest('article').getAttribute('data-mid'); setPopular(e.target, mid, -1); e.preventDefault(); }); }); document.querySelectorAll('.l .a-popular-delete').forEach(function(e) { e.addEventListener('click', function (e) { var mid = e.target.closest('article').getAttribute('data-mid'); setPopular(e.target, mid, -2); e.preventDefault(); }); }); document.querySelectorAll('.ir a').forEach(function(e) { e.addEventListener('click', function (e) { var fname = e.target.parentNode.getAttribute('data-fname'); showPhotoDialog(fname); e.preventDefault(); }); }); document.querySelectorAll('.social a').forEach(function(e) { e.addEventListener('click', function (e) { openSocialWindow(e.target); e.preventDefault(); }); }); var username = document.getElementById('username'); if (username) { username.addEventListener('blur', function () { checkUsername(); }); } document.querySelectorAll('.l .a-like').forEach(function(e) { e.addEventListener('click', function (e) { var mid = e.target.closest('article').getAttribute('data-mid'); likeMessage(e.target, mid); e.preventDefault(); }); }); document.querySelectorAll('.a-login').forEach(function(el) { el.addEventListener('click', function(e) { openDialogLogin(); e.preventDefault(); }); }); var unfoldall = document.getElementById('unfoldall'); if (unfoldall) { unfoldall.addEventListener('click', function(e) { document.querySelectorAll('#replies>li').forEach(function(e) { e.style.display = 'block'; }); document.querySelectorAll('#replies .msg-comments').forEach(function(e) { e.style.display = 'none'; }); e.preventDefault(); }); } var newMessageBlock = document.getElementById('newmessage'); if (newMessageBlock) { var form = newMessageBlock.parentNode; form.addEventListener('submit', onsubmitNewMessage); newMessageBlock.querySelector('textarea').addEventListener('click', function(e) { var parent = e.target.parentNode; parent.querySelector('div').style.display = 'block'; e.target.style.minHeight = '70px'; e.target.addEventListener('keypress', function(e) { postformListener(e.target, e); }); parent.querySelector('a').addEventListener('click', function(e) { attachMessagePhoto(e.target); }); }); } unfoldPostForm(); unfoldReply(); initWS(); window.addEventListener('hashchange', unfoldPostForm); window.addEventListener('hashchange', unfoldReply); window.addEventListener('pagehide', wsShutdown); });