Nemcio/NodeBB
1
0
Fork 0
mirror of https://github.com/NodeBB/NodeBB.git synced 2025-12-21 07:50:37 +01:00
Code Issues Packages Projects Releases Wiki Activity

refactor: add placeholders on demand

Browse Source 
remove emptylines/whitespace from tpls
This commit is contained in:
Barış Soner Uşaklı
2024-06-16 22:56:21 -04:00
parent 461e95d8d6
commit 8f486b1b99
7 changed files with 61 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
public/src/modules/helpers.common.js
View File

@@ -25,12 +25,14 @@ module.exports = function (utils, Benchpress, relative_path) {
userAgentIcons,
buildAvatar,
increment,
generateWroteReplied,
generateRepliedTo,
generateWrote,
isoTimeToLocaleString,
shouldHideReplyContainer,
humanReadableNumber,
formattedNumber,
generatePlaceholderWave,
register,
__escape: identity,
};
@@ -295,34 +297,24 @@ module.exports = function (utils, Benchpress, relative_path) {
if (!userObj) {
userObj = this;
}
classNames = classNames || '';
const attributes = new Map([
['alt', userObj.username],
['title', userObj.username],
['data-uid', userObj.uid],
['loading', 'lazy'],
['aria-label', `[[aria:user-avatar-for, ${userObj.username}]]`],
['class', `avatar ${classNames}${rounded ? ' avatar-rounded' : ''}`],
]);
const styles = [`--avatar-size: ${size};`];
const attr2String = attributes => Array.from(attributes).reduce((output, [prop, value]) => {
output += ` ${prop}="${value}"`;
return output;
}, '');
classNames = classNames || '';
attributes.set('class', `avatar ${classNames}${rounded ? ' avatar-rounded' : ''}`);
let output = '';
if (userObj.picture) {
attributes.set('component', component || 'avatar/picture');
output += '<img ' + attr2String(attributes) + ' src="' + userObj.picture + '" style="' + styles.join(' ') + '" onError="this.remove();" itemprop="image" />';
output += `<img${attr2String(attributes)} alt="${userObj.username}" loading="lazy" component="${component || 'avatar/picture'}" src="${userObj.picture}" style="${styles.join(' ')}" onError="this.remove()" itemprop="image" />`;
}
attributes.set('component', component || 'avatar/icon');
styles.push('background-color: ' + userObj['icon:bgColor'] + ';');
output += '<span ' + attr2String(attributes) + ' style="' + styles.join(' ') + '">' + userObj['icon:text'] + '</span>';
output += `<span${attr2String(attributes)} component="${component || 'avatar/icon'}" style="${styles.join(' ')} background-color: ${userObj['icon:bgColor']}">${userObj['icon:text']}</span>`;
return output;
}
@@ -330,6 +322,13 @@ module.exports = function (utils, Benchpress, relative_path) {
return String(value + parseInt(inc, 10));
}
function generateWroteReplied(post, timeagoCutoff) {
if (post.toPid) {
return generateRepliedTo(post, timeagoCutoff);
}
return generateWrote(post, timeagoCutoff);
}
function generateRepliedTo(post, timeagoCutoff) {
const displayname = post.parent && post.parent.displayname ?
post.parent.displayname : '[[global:guest]]';
@@ -367,6 +366,21 @@ module.exports = function (utils, Benchpress, relative_path) {
return utils.addCommas(number);
}
function generatePlaceholderWave(items) {
const html = items.map((i) => {
if (i === 'divider') {
return '<li class="dropdown-divider"></li>';
}
return `
<li class="dropdown-item placeholder-wave">
<div class="placeholder" style="width: 20px;"></div>
<div class="placeholder col-${i}"></div>
</li>`;
});
return html;
}
function register() {
Object.keys(helpers).forEach(function (helperName) {
Benchpress.registerHelper(helperName, helpers[helperName]);