Detects the IMG tags of all user avatars and creates a div to wrap the IMG tags of all users
Does anyone know how? I insert the div to the img tag of the user’s avatar, and then I can set the inserted div as the avatar frame
<script type="text/discourse-plugin" version="0.8">
api.onPageChange(() => {
// 查找所有具有 avatar 类的 img 元素
const avatarImages = document.querySelectorAll('img.avatar');
avatarImages.forEach(img => {
// 创建一个新的 div 元素，并设置其类名为 by9700
const wrapper = document.createElement('div');
wrapper.className = 'by9700';
// 将 img 元素移入到新的 div 中
img.parentNode.insertBefore(wrapper, img);
wrapper.appendChild(img);
});
});
</script>
It’s like this, but the code doesn’t take effect
Hello 
What you want to achieve exactly? Is this something that not possible with for example CSS pseudo element?
2 Likes
Pseudo-class elements can be implemented but he needs to adjust the position of each avatar frame, and he can adapt to the avatar size without using pseudo-classes
I guess it works – Can you share how you use this code?
However, we also have element changes in the same page. Therefore, I made some modifications to your code, which should meet the requirements:
const throttle = require("@ember/runloop").throttle;
const context = {
wrapImg() {
const avatarImages = document.querySelectorAll('img.avatar:not(.wrapped)');
avatarImages.forEach(img => {
// 创建一个新的 div 元素，并设置其类名为 by9700
const wrapper = document.createElement('div');
wrapper.className = 'by9700';
// 将 img 元素移入到新的 div 中
img.parentNode.insertBefore(wrapper, img);
wrapper.appendChild(img);
// 对 img 做标记
img.classList.add("wrapped");
});
}
};
new MutationObserver(() => {
throttle(context, context.wrapImg, 100);
}).observe(document.body, {
childList: true, // 观察目标子节点的变化，是否有添加或者删除
attributes: false, // 不观察属性变动
subtree: true // 递归观察子节点
});
1 Like
Thank you very much for your reply, I’ve found a workaround, use JavaScript code to detect an img tag with an avatar class and create a div tag with an avatar-wrappers class to wrap it, so that all the user’s avatars are surrounded by a newly created div, and then use pseudo-class elements to add different avatar frames for members of different user groups via user group css. Then automatically adjust the height and width of the avatar frame by identifying the width and height of the user’s avatar through JavaScript. This implements the website global avatar frame.
I’ve shared the JavaScript code below
<script type="text/javascript">
(function() {
function wrapAvatars() {
// 获取所有具有 avatar 类的 img 标签
var avatars = document.querySelectorAll('img.avatar');
// 遍历每个 img.avatar
avatars.forEach(function(avatar) {
// 检查 img 是否已经被包装过
if (!avatar.parentNode.classList.contains('avatar-wrappers')) {
// 创建一个新的 div 元素
var wrapper = document.createElement('div');
// 添加一个自定义类给新创建的 div 元素
wrapper.className = 'avatar-wrappers';
// 将 img.avatar 包装在新的 div 中
avatar.parentNode.insertBefore(wrapper, avatar);
wrapper.appendChild(avatar);
}
});
}
// 监听页面初次加载
document.addEventListener('DOMContentLoaded', function() {
wrapAvatars();
// 使用 MutationObserver 监听 DOM 变化
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.addedNodes.length) {
wrapAvatars();
}
});
});
// 配置观察器选项
var config = { childList: true, subtree: true };
// 开始观察文档的根元素
observer.observe(document.body, config);
});
})();
</script>
<script type="text/javascript">
(function() {
function adjustWrapperSizes() {
// 获取所有带有 avatar-wrapper 类的 div 标签
var wrappers = document.querySelectorAll('div.avatar-wrapper');
// 设置要增加的宽高值
var widthIncrease = 9; // 例如，增加 20px
var heightIncrease = 9; // 例如，增加 20px
// 遍历每个 div.avatar-wrapper
wrappers.forEach(function(wrapper) {
// 获取当前 div 的子 img 元素
var img = wrapper.querySelector('img');
if (img) {
// 获取 img 的实际宽度和高度
var imgWidth = img.offsetWidth;
var imgHeight = img.offsetHeight;
// 计算新的宽度和高度
var newWidth = imgWidth + widthIncrease;
var newHeight = imgHeight + heightIncrease;
// 设置 div 的宽度和高度
wrapper.style.width = newWidth + 'px';
wrapper.style.height = newHeight + 'px';
}
});
}
// 确保在 DOM 内容初次加载时执行
document.addEventListener('DOMContentLoaded', function() {
adjustWrapperSizes();
// 使用 MutationObserver 监听 DOM 变化
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.addedNodes.length) {
adjustWrapperSizes();
}
});
});
// 配置观察器选项
var config = { childList: true, subtree: true };
// 开始观察文档的根元素
observer.observe(document.body, config);
});
})();
</script>
1 Like