From 2b39fae3478e2063de436be36b5cd2169f409dd6 Mon Sep 17 00:00:00 2001 From: Flowers Safety Date: Thu, 28 Jul 2016 01:29:55 +0600 Subject: first approach --- juick-www/src/main/static/scripts.js | 207 ++++++++++++++++++----------------- 1 file changed, 107 insertions(+), 100 deletions(-) diff --git a/juick-www/src/main/static/scripts.js b/juick-www/src/main/static/scripts.js index 0785325a..2d50cc92 100644 --- a/juick-www/src/main/static/scripts.js +++ b/juick-www/src/main/static/scripts.js @@ -5,23 +5,21 @@ require('element-closest'); NodeList.prototype.forEach = Array.prototype.forEach; HTMLCollection.prototype.forEach = Array.prototype.forEach; -var ws = null; -var pageTitle; +var ws, + 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) { + + var url = (window.location.protocol === 'https:' ? 'wss' : 'ws') + ":" + + (typeof juickDebug !== 'undefined' ? + '//ws.juick.com/_replies' : ('//ws.juick.com/' + pageMID)), + hash = document.getElementById('body').getAttribute('data-hash'); + + if (hash) { url += '?hash=' + hash; } @@ -38,7 +36,7 @@ function initWS() { }; ws.onclose = function () { console.log('offline'); - ws = null; + ws = false; setTimeout(function () { initWS(); }, 2000); @@ -73,19 +71,15 @@ function wsShutdown() { } 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); + newReply(this); e.preventDefault(); }); li.addEventListener('mouseover', function (e) { - onclickNewReply(this); + newReply(this); e.preventDefault(); }); var msgAvatar = document.createElement('div'); @@ -97,6 +91,7 @@ function wsIncomingReply(msg) { msgAvatarLink.appendChild(msgAvatarImg); msgAvatar.appendChild(msgAvatarLink); li.appendChild(msgAvatar); + var msgCont = document.createElement('div'); msgCont.setAttribute('class', 'msg-cont'); var msgMenu = document.createElement('div'); @@ -145,8 +140,11 @@ function wsIncomingReply(msg) { msgCont.appendChild(msgLinks); msgCont.appendChild(msgComment); li.appendChild(msgCont); + li.querySelector('.msg-txt').textContent = msg.body; - if (p) { + + if (msg.replyto > 0) { + var p = document.getElementById(msg.replyto); li.style.marginLeft = p.style.marginLeft + '20px'; p.parentNode.insertBefore(li, p.nextSibling); } else { @@ -156,8 +154,7 @@ function wsIncomingReply(msg) { updateRepliesCounter(); } -function onclickNewReply(el) { - var li = el; +function newReply(li) { li.classList.remove('reply-new'); li.removeEventListener('click'); li.removeEventListener('mouseover'); @@ -176,7 +173,7 @@ function onclickNextReply() { function updateRepliesCounter() { var replies = document.querySelectorAll('#replies>li.reply-new').length; - if (replies > 0) { + if (replies) { var wsthread = document.querySelector('#wsthread'); wsthread.textContent = replies; wsthread.style.display = 'block'; @@ -203,8 +200,9 @@ function postformListener(formEl, ev) { 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(); + var ta = document.querySelector('#newmessage textarea'); + ta.style.minHeight = '70px'; + ta.focus(); } } @@ -219,9 +217,10 @@ function onsubmitNewMessage() { 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++) { + var replies = document.querySelectorAll('#replies>li'), + flagshow = 0, + i = 0; + for (; i < replies.length; i += 1) { if (flagshow == 1) { if (replies[i].style.display == 'none') { replies[i].style.display = 'block'; @@ -261,31 +260,29 @@ function taWrapper() { 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; + 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'); + att.addEventListener('click', function () { + attachCommentPhoto(this); + }); + 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); + var c = reply.querySelector('div.msg-cont > .msg-comment'), + newNode = c.cloneNode(true), + form = replyForm(mid, rid); form.appendChild(newNode); newNode.appendChild(taWrapper()); var subm = document.createElement('input'); @@ -295,6 +292,7 @@ function showCommentForm(mid, rid) { 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'); @@ -307,8 +305,8 @@ function showCommentForm(mid, rid) { 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'); + var form = replyForm(mid, rid), + footer = document.createElement('footer'); footer.setAttribute('class', 'comm'); footer.appendChild(taWrapper()); var subm = document.createElement('input'); @@ -346,8 +344,8 @@ function attachCommentPhoto(div) { } function attachMessagePhoto(div) { - var f = div.closest('form'); - var finput = f.querySelector('input[type="file"]'); + var f = div.closest('form'), + finput = f.querySelector('input[type="file"]'); if (!finput) { var inp = attachInput(); inp.style.float = 'left'; @@ -367,6 +365,7 @@ function attachMessagePhoto(div) { function unfoldReply() { if ((0 + window.location.hash.substring(1)) > 0) { var el = window.location.hash; + //https://developer.mozilla.org/en/docs/Web/API/Element/matches#Polyfill while (el.matches('[type="hidden"]')) { el = el.previousSibling(); } @@ -376,31 +375,30 @@ function unfoldReply() { } function showMessageLinksDialog(mid, rid) { - var hlink = window.location.protocol + '//juick.com/' + mid; - var mlink = '#' + mid; + var hlink = window.location.protocol + '//juick.com/' + mid, + mlink = '#' + mid; if (rid > 0) { hlink += '#' + rid; mlink += '/' + rid; } - var hlinkenc = encodeURIComponent(hlink); - - var html = '
Ссылка на сообщение:'; - html += '
' + hlink + '
'; - html += 'Номер сообщения:'; - html += '
' + mlink + '
'; - html += 'Поделиться:
'; + var hlinkenc = encodeURIComponent(hlink), + html = '
Ссылка на сообщение:' + + '
' + hlink + '
' + + 'Номер сообщения:' + + '
' + mlink + '
' + + 'Поделиться:
'; openDialog(html); } function showPhotoDialog(fname) { - var width = window.width; - var height = window.height * 0.9; + var width = window.width, + height = window.height * 0.9; if (width < 640) { return true; } else if (width < 1280) { @@ -415,9 +413,7 @@ function showPhotoDialog(fname) { } function openDialog(html) { - var dhtml = '
'; - dhtml += html; - dhtml += '
'; + var dhtml = '
' + html + '
'; document.querySelector('body').insertAdjacentHTML('afterbegin', dhtml); document.querySelector('#dialogb').addEventListener('click', closeDialog); document.querySelector('#dialogc').addEventListener('click', closeDialog); @@ -435,13 +431,14 @@ function openSocialWindow(a) { } function checkUsername() { - var uname = document.querySelector('#username').textContent; + var uname = document.querySelector('#username').textContent, + style = document.querySelector('#username').style; fetch('//api.juick.com/users?uname=' + uname) .then(function () { - document.querySelector('#username').style.background = '#FFCCCC'; + style.background = '#FFCCCC'; }) .catch(function () { - document.querySelector('#username').style.background = '#CCFFCC'; + style.background = '#CCFFCC'; }); } @@ -489,25 +486,23 @@ function likeMessage(e, mid) { /******************************************************************************/ 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) + fetch('//api.juick.com/messages/set_popular?mid=' + mid + + '&popular=' + popular + + '&hash=' + document.getElementById('body').getAttribute('data-hash')) .then(function () { - var a = e.closest('article'); - a.append(resultMessage('OK!')); + e.closest('article').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) + fetch('//api.juick.com/messages/set_privacy?mid=' + mid + + '&hash=' + document.getElementById('body').getAttribute('data-hash')) .then(function () { - var a = e.closest('article'); - a.append(resultMessage('OK!')); + e.closest('article').append(resultMessage('OK!')); }); return false; } - /******************************************************************************/ Element.prototype.selectText = function () { @@ -535,6 +530,7 @@ function ready(fn) { ready(function () { autosize(document.querySelectorAll('textarea')); + var insertButtons = function (e) { var textarea = e.target; textarea.classList.add('narrow'); @@ -543,10 +539,10 @@ ready(function () { 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', ''); @@ -556,19 +552,21 @@ ready(function () { 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) { + var rid; document.querySelectorAll('.msg-comments').forEach(function(e) { - var rid = e.parentNode.parentNode.id; + 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; + rid = e.closest('li').id; e.addEventListener('click', function (e) { showCommentForm(pageMID, rid); e.preventDefault(); @@ -578,45 +576,53 @@ ready(function () { } 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); + showMessageLinksDialog( + e.closest('section').getAttribute('data-mid'), + parseInt(e.closest('li').id)); // 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); + showCommentFooter( + e.target, + e.target.closest('article').getAttribute('data-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); + setPrivacy( + e.target, + e.target.closest('article').getAttribute('data-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); + setPopular( + e.target, + e.target.closest('article').getAttribute('data-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); + setPopular( + e.target, + e.target.closest('article').getAttribute('data-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); + setPopular( + e.target, + e.target.closest('article').getAttribute('data-mid'), + -2); e.preventDefault(); }); }); @@ -642,8 +648,9 @@ ready(function () { 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); + likeMessage( + e.target, + e.target.closest('article').getAttribute('data-mid')); e.preventDefault(); }); }); -- cgit v1.2.3