// ==UserScript==
// @name 다모앙 이모티콘 뷰 기능 확장
// @version 1.0
// @description 이모티콘 미리보기 크기 조절, GIF 자동재생 및 이모티콘 크기 설정 기능 추가. 자동 재생 체크박스가 저장된 값 반영.
// @author LiNE
// @match *://damoang.net/*
// @grant none
// ==/UserScript==

(function() {
'use strict';

// 기본값 설정
const defaultScale = 100;
const defaultAutoPlay = true;
const defaultEmojiSize = 100; // 기본 이모티콘 크기
let currentId = null;

// 로컬 스토리지에서 설정된 값 불러오기
let savedScale = localStorage.getItem('emoScale') || defaultScale;
let savedAutoPlay = localStorage.getItem('emoAutoPlay') === 'true' || defaultAutoPlay;
let savedEmojiSize = localStorage.getItem('emoSize') || defaultEmojiSize; // 이모티콘 크기 값

// CSS 스타일 추가 (스크롤과 함께 이동하는 설정 UI)
const style = document.createElement('style');
style.innerHTML = `
.settings-container {
display: flex;
align-items: center;
gap: 10px;
background-color: white;
border: 1px solid #ccc;
padding: 10px;
border-radius: 5px;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
margin-bottom: 10px;
}

.settings-container label {
font-size: 14px;
font-weight: bold;
}

.toggle-switch {
position: relative;
display: inline-block;
width: 40px;
height: 20px;
}

.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}

.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
border-radius: 34px;
}

.slider:before {
position: absolute;
content: "";
height: 14px;
width: 14px;
left: 3px;
bottom: 3px;
background-color: white;
transition: .4s;
border-radius: 50%;
}

input:checked + .slider {
background-color: #2196F3;
}

input:checked + .slider:before {
transform: translateX(18px);
}
`;
document.head.appendChild(style);

// #emo_icon 요소 앞에 새로운 DIV를 추가하여 설정 UI를 포함
const emoIcon = document.querySelector('#emo_icon');
if (emoIcon) {
// 새로운 DIV 생성
const settingsDiv = document.createElement('div');
settingsDiv.className = 'settings-container';

// 크기 설정 라벨 추가
const scaleLabel = document.createElement('label');
scaleLabel.innerText = '크기 설정:';

// 리스트 박스 생성
const scaleSelect = document.createElement('select');
scaleSelect.id = 'scaleSelect';
scaleSelect.innerHTML = `
70% 80% 90%
100% 110% 120%
130% 140% 150%
160% 170% 180%
190% 200%
`;

// 저장된 크기에 맞게 초기값 설정
scaleSelect.value = savedScale;

// 자동 재생 토글 스위치 생성
const toggleContainer = document.createElement('label');
toggleContainer.className = 'toggle-switch';

const autoPlayCheckbox = document.createElement('input');
autoPlayCheckbox.type = 'checkbox';
autoPlayCheckbox.id = 'autoPlayCheckbox';
autoPlayCheckbox.checked = savedAutoPlay; // 저장된 값에 따라 초기 체크 상태 설정

const slider = document.createElement('span');
slider.className = 'slider';

toggleContainer.appendChild(autoPlayCheckbox);
toggleContainer.appendChild(slider);

const toggleLabel = document.createElement('label');
toggleLabel.innerText = '자동 재생';

// 이모티콘 크기 설정 라벨 추가
const emojiSizeLabel = document.createElement('label');
emojiSizeLabel.innerText = '기본 이모티콘 크기:';

// 이모티콘 크기 텍스트 입력 필드 추가
const emojiSizeInput = document.createElement('input');
emojiSizeInput.type = 'number';
emojiSizeInput.id = 'emojiSizeInput';
emojiSizeInput.value = savedEmojiSize; // 저장된 이모티콘 크기를 불러오기
emojiSizeInput.style.width = '60px';

// 설정 UI를 새로운 DIV에 추가
settingsDiv.appendChild(scaleLabel);
settingsDiv.appendChild(scaleSelect);
settingsDiv.appendChild(toggleLabel);
settingsDiv.appendChild(toggleContainer);
settingsDiv.appendChild(emojiSizeLabel);
settingsDiv.appendChild(emojiSizeInput);

// #emo_icon 상단에 새로운 DIV 추가
emoIcon.parentNode.insertBefore(settingsDiv, emoIcon);

// 값 변경 시 저장
scaleSelect.addEventListener('change', function() {
localStorage.setItem('emoScale', scaleSelect.value);
applySettings(); // 설정 적용
});

autoPlayCheckbox.addEventListener('change', function() {
localStorage.setItem('emoAutoPlay', autoPlayCheckbox.checked);
applySettings(); // 설정 적용
});

emojiSizeInput.addEventListener('input', function() {
localStorage.setItem('emoSize', emojiSizeInput.value); // 이모티콘 크기 값 저장
});
}

// 설정 적용 함수
function applySettings() {
const scaleFactor = parseInt(localStorage.getItem('emoScale')) || defaultScale;
const autoPlay = localStorage.getItem('emoAutoPlay') === 'true';
const emojiSize = parseInt(localStorage.getItem('emoSize')) || defaultEmojiSize;

// 이미지 크기 조정 및 자동 재생 적용
const images = document.querySelectorAll('#emo_icon .emo-img');
images.forEach((img) => {
// 이미지의 원본 크기를 한 번만 저장 (이미 저장된 경우 덮어쓰지 않음)
if (!img.getAttribute('data-original-width')) {
const computedStyle = window.getComputedStyle(img);
img.setAttribute('data-original-width', computedStyle.width);
img.setAttribute('data-original-height', computedStyle.height);
}

// 원본 크기를 불러옴
const originalWidth = parseFloat(img.getAttribute('data-original-width'));
const originalHeight = parseFloat(img.getAttribute('data-original-height'));

// 퍼센트 값에 따라 크기 조정
img.style.width = `${(originalWidth * scaleFactor) / 100}px`;
img.style.height = `${(originalHeight * scaleFactor) / 100}px`;

// 자동 재생 설정
if (autoPlay && img.getAttribute('url')) {
img.src = img.getAttribute('url');
} else if (!autoPlay && img.getAttribute('thumb')) {
img.src = img.getAttribute('thumb');
}

// 터치 동작을 반영한 onmouseenter, onmouseleave 동작 수정
img.onmouseenter = function() { setFocus(this.id); };
img.onmouseleave = function() { unFocus(this.id); };
img.ontouchend = function() {
this.isTouched = !this.isTouched;
if (this.isTouched) { setFocus(this.id); }
else { unFocus(this.id); }
};

img.onclick = function() {
const emojiUrl = img.getAttribute('url'); // 전체 URL
const fileName = emojiUrl.split('/').pop(); // 파일명 추출
const emojiSize = localStorage.getItem('emoSize') || defaultEmojiSize;
clip_insert(`${fileName}:${emojiSize}`); // 파일명과 크기 전달
}
});
}

// setFocus 및 unFocus 함수
function setFocus(id) {
if (currentId) unFocus(currentId);
if (id) {
var newEle = document.getElementById(id);
if (newEle) {
currentId = id;
newEle.classList.add('border-primary', 'border-2'); // 마우스 오버 시 보더 추가
const autoPlay = localStorage.getItem('emoAutoPlay') === 'true';
if (!autoPlay) {
newEle.timer = setTimeout(function () {
newEle.src = newEle.getAttribute('url');
}, 250);
}
}
}
}

function unFocus(id) {
var oldEle = document.getElementById(id);
if (oldEle) {
clearTimeout(oldEle.timer);
oldEle.isTouched = false;
oldEle.classList.remove('border-primary', 'border-2'); // 마우스가 떠날 때 보더 제거
const autoPlay = localStorage.getItem('emoAutoPlay') === 'true';
if (!autoPlay) {
oldEle.src = oldEle.getAttribute('thumb');
}
}
}

// 페이지가 로드될 때 설정 적용
window.addEventListener('load', function() {
// 저장된 값으로 체크박스 상태 초기화
const autoPlay = localStorage.getItem('emoAutoPlay') === 'true';
document.querySelector('#autoPlayCheckbox').checked = autoPlay;
applySettings();
});

// 페이지가 변경될 때마다 설정 재적용 (SPA 대응)
const observer = new MutationObserver(applySettings);
observer.observe(document.body, { childList: true, subtree: true });
})();

이렇게 말고, 다른 방법은 없을까요?
저도 이모티콘이 너무 작아서 거의 안보이거든요.... 그래서 모니터에 눈을 붙여야 겨우 보이네요.
너무 불편해요. ㅠㅠ

댓글 정말 감사합니다.

그대로 따라했습니다.
그런데...

[https://damoang.net/data/editor/2409/comment_1537082102_Qw2s0c3p_42cb628045d52c464b3e263ffee5f5add63b8425.jpg]

역시나 안되네요. 전, 소프트웨어랑은 과거에 무슨 악덕 사이였는지, 절대로 친해지지 않네요.
하다못해 F/W도 그렇게 해봐도 안되더라구요.
S/W 저주에 걸렸나봐요. ㅠㅠ

[https://damoang.net/data/editor/2409/comment_1537082102_RA7bjHuK_919773328c8ca58724cecfc07dde74e332d30da1.jpg]