docbrown/app/assets/javascripts/initializers/initializeBaseUserData.js
ludwiczakpawel 73e560f7a2
Updating navigation (especially mobile) (#10424)
* .

* .

* .

* .

* .

* specs

* specs

* .

* .

* merge

* moving cheese around

* layout

* .

* merge

* Fixed invalid selector for search.

* Fixed issue with URL not updating after a search.

* do things better

* kinda merge

* whoops

* whoops

* .

* .

* im a backend developer

* tooltips 1.0.1

* tooltips 1.0.1

* fix

* specs

* .

* reduce the spacing

* schema drop

* reverts

* revert

* reverts

* revert

* drop unused nav

* drop unused nav

* drop unused nav

* drop unused nav

* typos

* paths fixes

* speeding up JS

* js

* search

* Reworked initializeTopBarIcons.js

* Reworked initializeNavigation.js

* Small refactor and updated exported function API docs.

* Fixed a bug I created when refactoring the top navigation icons.

* sidebar nav links

* spec

* Fixed issues with logged out experience for top nav icons.

* Small refactor of top nav icons.

* Small refactor and added some API docs.

* Added @testing-library/dom

* Added tests for top navigation utilities.

* spec

* spec

Co-authored-by: Nick Taylor <nick@dev.to>
2020-12-08 15:59:21 +01:00

99 lines
3.5 KiB
JavaScript

/* global filterXSS */
function initializeProfileImage(user) {
if (!document.getElementById('comment-primary-user-profile--avatar')) return;
document.getElementById('comment-primary-user-profile--avatar').src =
user.profile_image_90;
}
function addRelevantButtonsToArticle(user) {
var articleContainer = document.getElementById('article-show-container');
if (articleContainer) {
if (parseInt(articleContainer.dataset.authorId, 10) === user.id) {
let actions = [
`<a class="crayons-btn crayons-btn--s crayons-btn--secondary" href="${articleContainer.dataset.path}/edit" rel="nofollow">Edit</a>`,
];
let clickToEditButton = document.getElementById('author-click-to-edit');
if (clickToEditButton) {
clickToEditButton.style.display = 'inline-block';
}
if (JSON.parse(articleContainer.dataset.published) === true) {
actions.push(
`<a class="crayons-btn crayons-btn--s crayons-btn--secondary ml-1" href="${articleContainer.dataset.path}/manage" rel="nofollow">Manage</a>`,
);
}
if (user.pro) {
actions.push(
`<a class="crayons-btn crayons-btn--s crayons-btn--secondary ml-1" href="${articleContainer.dataset.path}/stats" rel="nofollow">Stats</a>`,
);
}
document.getElementById('action-space').innerHTML = actions.join('');
}
}
}
function addRelevantButtonsToComments(user) {
if (document.getElementById('comments-container')) {
// buttons are actually <span>'s
var settingsButts = document.getElementsByClassName('comment-actions');
for (let i = 0; i < settingsButts.length; i += 1) {
let butt = settingsButts[i];
const { action, commentableUserId, userId } = butt.dataset;
if (parseInt(userId, 10) === user.id && action === 'settings-button') {
butt.innerHTML =
'<a href="' +
butt.dataset.path +
'" rel="nofollow" class="crayons-link crayons-link--block" data-no-instant>Settings</a>';
butt.classList.remove('hidden');
butt.classList.add('block');
}
if (
action === 'hide-button' &&
parseInt(commentableUserId, 10) === user.id
) {
butt.classList.remove('hidden');
butt.classList.add('block');
}
}
if (user.trusted) {
var modButts = document.getElementsByClassName('mod-actions');
for (let i = 0; i < modButts.length; i += 1) {
let butt = modButts[i];
if (butt.classList.contains('mod-actions-comment-button')) {
butt.innerHTML =
'<a href="' +
butt.dataset.path +
'" rel="nofollow" class="crayons-link crayons-link--block">Moderate</a>';
}
butt.className = 'mod-actions';
butt.classList.remove('hidden');
butt.classList.add('block');
}
}
}
}
function setCurrentUserToNavBar(user) {
const userNavLink = document.getElementById('first-nav-link');
userNavLink.href = `/${user.username}`;
userNavLink.getElementsByTagName('span')[0].textContent = user.name;
userNavLink.getElementsByTagName(
'small',
)[0].textContent = `@${user.username}`;
document.getElementById('nav-profile-image').src = user.profile_image_90;
if (user.admin) {
document
.getElementsByClassName('js-header-menu-admin-link')[0]
.classList.remove('hidden');
}
}
function initializeBaseUserData() {
const user = userData();
setCurrentUserToNavBar(user);
initializeProfileImage(user);
addRelevantButtonsToArticle(user);
addRelevantButtonsToComments(user);
}