first approach

1 files 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 = '<div class="dialogshare">Ссылка на сообщение:';
-    html += '<div onclick="this.selectText()" class="dialogl">' + hlink + '</div>';
-    html += 'Номер сообщения:';
-    html += '<div onclick="this.selectText()" class="dialogl">' + mlink + '</div>';
-    html += 'Поделиться:<ul>';
-    html += '<li><a href="https://www.facebook.com/sharer/sharer.php?u=' + hlinkenc + '" onclick="return openSocialWindow(this)"></a></li>';
-    html += '<li><a href="https://twitter.com/intent/tweet?url=' + hlinkenc + '" onclick="return openSocialWindow(this)" style="background-position: -32px 0;"></a></li>';
-    html += '<li><a href="https://vk.com/share.php?url=' + hlinkenc + '" onclick="return openSocialWindow(this)" style="background-position: -64px 0;"></a></li>';
-    html += '<li><a href="https://plus.google.com/share?url=' + hlinkenc + '" onclick="return openSocialWindow(this)" style="background-position: -96px 0;"></a></li>';
-    html += '</ul></div>';
+    var hlinkenc = encodeURIComponent(hlink),
+        html = '<div class="dialogshare">Ссылка на сообщение:'
+    + '<div onclick="this.selectText()" class="dialogl">' + hlink + '</div>'
+    + 'Номер сообщения:'
+    + '<div onclick="this.selectText()" class="dialogl">' + mlink + '</div>'
+    + 'Поделиться:<ul>'
+    + '<li><a href="https://www.facebook.com/sharer/sharer.php?u=' + hlinkenc + '" onclick="return openSocialWindow(this)"></a></li>'
+    + '<li><a href="https://twitter.com/intent/tweet?url=' + hlinkenc + '" onclick="return openSocialWindow(this)" style="background-position: -32px 0;"></a></li>'
+    + '<li><a href="https://vk.com/share.php?url=' + hlinkenc + '" onclick="return openSocialWindow(this)" style="background-position: -64px 0;"></a></li>'
+    + '<li><a href="https://plus.google.com/share?url=' + hlinkenc + '" onclick="return openSocialWindow(this)" style="background-position: -96px 0;"></a></li>'
+    + '</ul></div>';
 
     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 = '<table id="dialogt"><tr><td><div id="dialogb"></div><div id="dialogw"><div id="dialogc"></div>';
-    dhtml += html;
-    dhtml += '</div></td></tr></table>';
+    var dhtml = '<table id="dialogt"><tr><td><div id="dialogb"></div><div id="dialogw"><div id="dialogc"></div>' + html + '</div></td></tr></table>';
     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', '<input type="submit" value="OK"/>');
@@ -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();
         });
     });