As I continued to make my amusement park
After the first post about his version of the study of JavaScript, combining business with pleasure, 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 barely noticeable, at first glance, but an important function - sending a personal message to the author of the comment. It was immediately decided to fix this:
')
A link is created with a message icon for each comment, and the click handler sends us to the personal message sending page to the user, in whose comments we clicked.
Since the last days there is a clear trend for a different kind of WI, it was decided to do this with the obligatory display of karma and rating, as well as preservation of the usual structure of the user unit. Also, the userbar should be transparent in order not to make it too difficult to navigate through the announcement pages (feed, posts, etc.). If the second was decided by styles, then the first was a bit more complicated. Having read about the rules for processing requests, I learned an important thing - only asynchronous requests. I will make a small remark - usually I try to apply each newly studied material on a “patient”, that is, in the context of my tasks. I advise you to do the same as I do for beginners, since the examples are not remembered because of their one-sidedness.
First you need to create a userbar:
I define variables and conditions for different user states (logged in and logged out). A small trick with userpanel.innerHTML = null after transferring the contents of the userpanel variable to another userpanelTop variable created (which is a userser) and before including the userpanelTop in the userpanel allows you to avoid additional DOM walk.
This is the function of parsing an xml page with user data:
The important point is that in order to parse correctly, I had to override the MIME type with overrideMimeType ('text / xml').
I forgot to mention the main thing - in the framework of the script I try to observe the general style and implement the 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 the script, only necessary and not out of the box.
Script on githaba
Chrome market extension
And this time, it was not without some blur in the text, for which I ask you to forgive me. In view of the modest experience, somewhere I could be wrong and, probably, cause fair resentment. For such a reasoned indignation 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.
The first version of the script did not have one barely noticeable, at first glance, but an important function - sending a personal message to the author of the comment. It was immediately decided to fix this:
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 the click handler sends us to the personal message sending page to the user, in whose comments we clicked.
It looks like this
Since the last days there is a clear trend for a different kind of WI, it was decided to do this with the obligatory display of karma and rating, as well as preservation of the usual structure of the user unit. Also, the userbar should be transparent in order not to make it too difficult to navigate through the announcement pages (feed, posts, etc.). If the second was decided by styles, then the first was a bit more complicated. Having read about the rules for processing requests, I learned an important thing - only asynchronous requests. I will make a small remark - usually I try to apply each newly studied material on a “patient”, that is, in the context of my tasks. I advise you to do the same as I do for beginners, since the 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 small trick with userpanel.innerHTML = null after transferring the contents of the userpanel variable to another userpanelTop variable created (which is a userser) and before including the userpanelTop in the userpanel allows you to avoid additional DOM walk.
This is the function of parsing an xml page with user data:
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(); } The important point is that in order to parse correctly, I had to override the MIME type with overrideMimeType ('text / xml').
I forgot to mention the main thing - in the framework of the script I try to observe the general style and implement the 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 the script, only necessary and not out of the box.
Userbar in all its glory
Script on githaba
Chrome market extension
And this time, it was not without some blur in the text, for which I ask you to forgive me. In view of the modest experience, somewhere I could be wrong and, probably, cause fair resentment. For such a reasoned indignation 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.
Source: https://habr.com/ru/post/190874/
All Articles