docbrown/app/assets/javascripts/initializers/initializeBaseUserData.js
ludwiczakpawel 096cf18b10
Article layout (#14753)
* style updates

* author and tools

* overflow hidden for avatars because geeeez

* font smoothing

* reverting little change

* specs

* preview

* css fix

* avatar fix'

* No longer eager load user profile when showing articles.

articles show view no longer needs user profile, as it no longer
renders the user profile preview.

* tags

* tags

* tags reverts

* typo

* dropping initializer for user cards previews on article page

* spec

* remove spec

* revert

* Update app/decorators/article_decorator.rb

Co-authored-by: Michael Kohl <me@citizen428.net>

* Update spec/requests/stories_show_spec.rb

Co-authored-by: Michael Kohl <me@citizen428.net>

* yoloing outline change on buttons because i couldn't see any visual difference

Co-authored-by: Dan Uber <dan@forem.com>
Co-authored-by: Michael Kohl <me@citizen428.net>
2021-09-30 19:08:06 +02:00

119 lines
4 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 &&
articleContainer.dataset.buttonsInitialized !== 'true'
) {
let actions = [];
const published = JSON.parse(articleContainer.dataset.published);
if (parseInt(articleContainer.dataset.authorId, 10) === user.id) {
actions.push(
`<a class="crayons-btn crayons-btn--s crayons-btn--ghost px-2" 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 (published === true) {
actions.push(
`<a class="crayons-btn crayons-btn--s crayons-btn--ghost px-2" href="${articleContainer.dataset.path}/manage" rel="nofollow">Manage</a>`,
);
}
actions.push(
`<a class="crayons-btn crayons-btn--s crayons-btn--ghost px-2" href="${articleContainer.dataset.path}/stats" rel="nofollow">Stats</a>`,
);
}
const { articleId, pinnedArticleId } = articleContainer.dataset;
// we hide the buttons for draft articles, for non admins and
// if there's already a pinned post different from the current one
if (user.admin) {
actions.push(
`<a class="crayons-btn crayons-btn--s crayons-btn--ghost px-2" href="/admin/content_manager/articles/${articleId}" data-no-instant>Admin</a>`,
);
}
document.getElementById('action-space').innerHTML = actions.join('');
articleContainer.dataset.buttonsInitialized = 'true';
}
}
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);
}