 |
요약 | 드래그 가능한 인터랙티브 이미지 비교 슬라이더를 만들 수 있는 버튼을 컴포저에 추가합니다. |
 |
저장소 | GitHub - josephclaytonhansen/discourse-image-comparison-slider · GitHub |
 |
설치 가이드 | 테마 또는 테마 컴포넌트 설치 방법 |
 |
디스코urs 테마가 처음이신가요? | 디스코urs 테마 사용 입문가이드 |
이 테마 컴포넌트 설치
이 컴포넌트는 컴포저에 드래그 가능한 이미지 비교 슬라이더를 만들 수 있는 버튼을 추가합니다. 방향이나 버튼 아이콘과 같은 슬라이더 설정은 관리자 설정에서 사용자 지정할 수 있습니다.
디스코urs 개발에 처음 도전해 보는 것이므로 실수가 있을 수 있으니 양해 부탁드립니다.
WIP은 무엇인가요? (지금 20자인가요?)
WIP은 작업 진행 중(work in progress)을 의미합니다.
정말 멋지네요! 이 기여에 감사드립니다 
어떤 종류의 업데이트를 생각하고 계신가요?
주요 과제는 코드를 정리하고 Discourse의 스타일에 더 맞게 만드는 것입니다. 현재는 테마 컴포넌트를 만드는 법을 배우는 중이라 약간 거칠게 작성되어 있습니다. 
또한 컴포저에서 슬라이더 방향을 변경할 수 있는 기능을 추가할 계획입니다. 현재 방향은 관리자 설정에서 지정된 값이 적용되는데, 사용자가 직접 제어할 수 있도록 하려고 합니다. (수정: 이 기능이 추가되었습니다!)
슬라이더 핸들/분할선 스타일에 대한 제어 기능도 추가하고 싶지만, 안타깝게도 실제로는 불가능합니다. 슬라이더를 처리하는 JavaScript가 CSS 변경 전에 슬라이더를 빌드하며, CSS가 변경되어도 슬라이더를 다시 빌드하지 않기 때문입니다.
멋지네요! 
기여해 주셔서 감사합니다 
사용자가 세로 또는 가로 슬라이더를 선택할 수 있도록 기능을 추가했습니다. data-direction-horizontal 또는 data-direction-vertical 속성을 사용합니다. 사용자가 방향을 지정하지 않으면 관리자 설정에서 기본값으로 선택된 설정이 사용됩니다.
이거 진짜 좋네요. 잘하셨어요.
이 문제가 무엇 때문에 발생하는지 단정 짓기는 어렵네요. 제 환경에서는 재현이 되지 않거든요 
에러 목록 중에서는 첫 번째 에러만 이 컴포넌트에서 발생한 것일 수 있어요. tooltipContainer나 ResizeObserver 루프를 사용하지 않고 있어서요. 하지만 역시 확신은 없네요. 최신 버전으로 업데이트를 하셨나요? 어제 이 문제를 수정할 수 있는 몇 가지 변경 사항을 적용했습니다.
조셉, 감사합니다. 최신 버전을 사용 중입니다. 이상하게도 이 메시지가 다시 표시되지 않고 문제도 보이지 않아서, 일시적인 오류였을까요?
또 다른 문제는 아이콘이 변경되지 않는다는 것입니다. 물론 SVG 아이콘 하위 집합에 추가했습니다. 이미 제 사이트에서 정상 작동하는 다른 아이콘도 시도해 보았지만, 번개 아이콘에서 변경되지 않습니다. arrows-alt-h로 변경하려고 하고 있습니다.
제 실수입니다. 방금 해당 문제를 수정하는 변경 사항을 커밋했습니다. 문제를 발견해 주셔서 감사합니다!
정말 멋지네요. 몇 가지 문제가 있습니다:
저희 포럼에서는 en_GB 로케일로 변경했는데, 마우스를 올리면 다음과 같은 표시가 나옵니다:
이 플러그인은 모든 커서 마우스 다운 이벤트를 가로채서 페이지의 텍스트를 복사/붙여넣기/인용하는 등 선택하는 것을 막습니다. meta.discourse에서는 문제가 없었습니다. 제 설정/테마(갤러리나 gif 같은 몇 가지 추가 컴포넌트가 있는 Sam의 심플 테마)에 대해 더 자세한 정보를 제공해 드릴 수 있습니다. 문제가 사라졌네요… 기술이 참 좋습니다.
이 기능을 사용하는 방법에 대한 안내 글을 작성했는데, 몇몇 사람들이 아무것도 보이지 않는다고 했습니다. (실제 버그 리포트가 없어서 매우 도움이 되지 않는 피드백이었습니다.)
음… 이상하네, Firefox에서 테스트했을 때 아무 문제가 없었거든. 이 문제를 재현해 볼 수 있을지 확인해 봐야겠어. 랜덤 버그는 정말 싫다 
내가 사용하는 라이브러리의 GitHub 저장소에서 Firefox 관련 이슈(오픈/클로즈)가 하나도 없어서 버그 수정이 더 어려워졌어.
로케일(언어 설정) 관련해서, 로케일 파일을 제공하는 프로세스가 어떻게 되는지 정확히 모르겠어. 내가 영국 영어를 하니까 en.GB는 추가할 수 있겠지만, 내 전문성은 거기까지야. 다른 테마 컴포넌트 제작자 중에 로케일 파일 번역이 어떻게 이루어져야 하는지 아는 사람이 있을까? 그냥 텍스트를 Google Translate에 돌리면 되는 건가? 
제가 볼 때, 당신의 것과 정상적으로 동작하는 컴포넌트(giphy)의 유일한 차이는 들여쓰기입니다…
아마도 모든 yml 내용이 동일한 들여쓰기 레벨에 있어서 파서가 뭔가 문제를 일으키는 것 같습니다.
결국… 저는 아마추어이고 제가 뭘 하고 있는지 전혀 모르겠습니다.
기분 충분히 이해해요 제가 한번 알아볼게요. VS Studio의 YML 파서를 사용 중인데, 100% 표준에 맞지 않을 수도 있거든요. 메모장에서 직접 수동으로 들여쓰기를 해볼게요.
@Frully Firefox 문제를 수정했습니다. 이제 모든 브라우저에서 정상적으로 작동해야 합니다 (Chrome, Firefox, Safari 및 모바일 버전을 테스트했으며 문제가 없었습니다). 이 부분을 업데이트하시면 Firefox 사용자에게도 정상적으로 작동할 것입니다.
안녕하세요
이 테마 컴포넌트가 정말 좋습니다. 감사합니다. 방금 설치했습니다
버튼 텍스트와 플레이스홀더 텍스트에 문제가 있습니다.
저도 이 테마 컴포넌트를 가지고 있습니다.
설치 후 다음과 같은 문제가 발생했습니다:
이상하지 않나요?
Stéphane
그 문제에 대해 생각해 본 적이 없네요. 지적해 주셔서 감사합니다 @Stephane_Roy!
문제는 두 테마 구성 요소가 동일한 번역 변수를 사용하고 있다는 것입니다. 다른 TC(테마 구성 요소)에서도 동일한 문제가 발생할 수 있습니다. 수정 방법은 아래 위치에 있는 button_text와 add_images_prompt의 이름을 변경하는 것입니다. Masonry Image Gallery도 함께 업데이트할 예정입니다.
translations.button_text = settings.button_text;
translations.composer.add_images_prompt =
settings.add_images_prompt;
api.onToolbarCreate(function(toolbar){
toolbar.addButton({
trimLeading: true,
id: “image-comparison-slider”,
group: “insertions”,
icon: settings.button_icon,
title: “button_text”,
perform: e => e.applySurround(
[“<div data-image-comparison-slider data-direction-”,settings.default_direction,“>\n\n”].join(‘’),
“\n\n”,
“add_images_prompt”,
{ multiline: false }
)
});
