모든 사용자 아바타의 IMG 태그를 감지하고, 모든 사용자의 IMG 태그를 감싸기 위해 div를 생성합니다
방법을 아시는 분이 있을까요? 사용자 아바타의 img 태그에 div를 삽입한 후, 삽입된 div를 아바타 프레임으로 설정할 수 있습니다.
<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>
이렇게 했는데 코드가 적용되지 않아요
안녕하세요 
정확히 어떤 것을 구현하고 싶으신가요? 예를 들어 CSS 의사 요소(pseudo element)로는 불가능한 것인가요?
의사 클래스 요소를 구현할 수는 있지만, 그는 각 아바타 프레임의 위치를 조정해야 하며, 의사 클래스를 사용하지 않고도 아바타 크기에 맞게 조정할 수 있습니다.
안정적으로 동작하는 것 같습니다 – 이 코드를 어떻게 사용하고 계신지 공유해 주실 수 있을까요?
다만, 같은 페이지 내에서 요소 변경이 발생하기도 합니다. 따라서 요구 사항을 충족할 수 있도록 코드를 일부 수정했습니다:
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 // 자식 노드를 재귀적으로 관찰
});
답변해 주셔서 감사합니다. 우회 방법을 찾았는데요, JavaScript 코드를 사용하여 avatar 클래스가 있는 img 태그를 감지하고, avatar-wrappers 클래스가 있는 div 태그를 생성하여 이를 감싸는 방식입니다. 이렇게 하면 모든 사용자 아바타가 새로 생성된 div로 둘러싸이게 됩니다. 이후 의사 클래스(pseudo-class) 요소를 사용해 사용자 그룹별 CSS를 통해 서로 다른 사용자 그룹의 멤버에게 다른 아바타 프레임(테두리)을 적용합니다. 또한 JavaScript를 통해 사용자의 아바타 너비와 높이를 식별하여 아바타 프레임의 높이와 너비를 자동으로 조정합니다. 이를 통해 웹사이트 전체에 아바타 프레임을 구현할 수 있습니다.
아래에 JavaScript 코드를 공유합니다.
<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>
