As I continued to make my amusement park

After the first post about my version of learning JavaScript, combining business with pleasure, I decided to make important additions and, at the same time, make a breakthrough in learning.


The first version of the script did not have one function that was hardly noticeable at first glance, but an important one - sending a personal message to the comment author. It was immediately decided to fix it:

function clickPm(event) { 
        event.preventDefault();
        var username = event.target.parentElement.parentElement.parentElement.querySelector('a.username').innerText;
        window.location.pathname = '/conversations/' + username;
}
var infobars = document.querySelectorAll('.to_chidren'); //в стилях Хабра замечены и другие классы с опечатками, so strange
for (i = 0; i < infobars.length; i++) {
    var pmLink = createBtn('pmlink', '', ' reply_link', 'container', clickPm);
    infobars[i].appendChild(pmLink);
    }

A link is created with a message icon for each comment, and a click handler sends us to the page for sending a personal message to the user in whose comments we clicked.



Since the last days there is clearly a trend for various kinds of userbars, it was decided to make one with the obligatory display of karma and rating, as well as maintaining the familiar structure of the user block. Also, the userbar should be transparent so as not to make it too difficult to navigate through the pages of announcements (feed, posts, and so on). If the second was decided by styles, the first was a bit more complicated. After reading about the rules for processing requests, I learned an important thing - only asynchronous requests. I’ll make a short remark - usually I try to use each newly studied material on a “patient”, that is, in the context of my tasks. I advise you to do the same for beginners, as examples are not remembered because of their one-sidedness.
First you need to create a userbar:

    var userpanel = document.querySelectorAll('.userpanel')[0];
    var userpanelTop = document.querySelectorAll('.userpanel > .top')[0];
    var userpanelBottom = document.querySelectorAll('.userpanel > .bottom')[0];
    var karmaDescription = document.querySelectorAll('.charge')[0];
    if (userpanelBottom != null) {
        userpanelTop.innerHTML += userpanelBottom.innerHTML;
        userpanel.removeChild(userpanelBottom);
        userpanel.removeChild(karmaDescription);
        karmaCounter();
    };
    if (userpanelTop == null) {
	    var top = document.createElement('div');
	    top.className = 'top';
	    top.innerHTML = userpanel.innerHTML;
	    userpanel.innerHTML = null;
	    userpanel.appendChild(top);
    };

I define variables and conditions for different user states (logged in and logged out). A little trick with userpanel.innerHTML = null after passing the contents of the userpanel variable to another userpanelTop variable created (which is the userbar container) and before userpanelTop is included in the userpanel, it allows you to avoid additional DOM walks.

This is how the function of parsing an xml page with user data looks like:

function karmaCounter() {
    var xmlhttp=new XMLHttpRequest();
    xmlhttp.overrideMimeType('text/xml');
    var userBlock = document.querySelectorAll('.top > .username')[0].innerText;
    var userpanelTop = document.querySelectorAll('.userpanel > .top')[0];
    var karmaCharge = document.createElement('a');
    karmaCharge.className = 'count karma';
    xmlhttp.onreadystatechange=function() {
      if (xmlhttp.readyState==4 && xmlhttp.status==200) {  
        var counter = xmlhttp.responseXML.querySelectorAll('karma')[0].firstChild;
        var rating = xmlhttp.responseXML.querySelectorAll('rating')[0].firstChild;
        karmaCharge.innerText = 'карма ';
        karmaCharge.appendChild(counter);
        karmaCharge.innerText += ', рейтинг ';
        karmaCharge.appendChild(rating);
        userpanelTop.insertBefore(karmaCharge, userpanelTop.firstChild.nextSibling.nextSibling);
      }
    }
    xmlhttp.open("GET", '/api/profile/' + userBlock ,true);
    xmlhttp.send();
}

An important point - for correct parsing, I had to redefine the MIME type using overrideMimeType ('text / xml').

I forgot to mention the main thing - as part of the script, I try to observe the general style and perform new functionality so that it looks organically in the pleasant minimalism of Habr. There is no purpose to invent a lot of things and try to implement it in a script, only necessary and not out of the box.



Script on github

Extension in the Chrome market

And this time, there was a bit of fuzziness in the text, for which I apologize. Due to modest experience, somewhere I could be wrong and probably cause a fair outrage. For such a reasoned outrage in the form of comments, this post was created, because I can learn useful lessons.
Thanks to everyone who accepted the invitation to visit my amusement park.