각주를 넣자!

 

하늘희님¹⁾과 구름이님²⁾을 비롯해 여러분들의 격려 덕에 마음 굳게 먹고,

어제 저녁 내내 씨름한 결과,

iframe_obj³⁾ 라는 걸 발견,

본문 내의 원하는 위치에,

컴포넌트 입력 내용을 에디터에 반영할 수 있게 됐습니다.⁴⁾

 

참고할 만한 그림은 넣지 않겠다⁵⁾

 

이런 식으로 나와요.

 

입력창은 이렇게 생겼구요.⁶⁾

 

추가 버튼을 누르면 이런 결과로 반영됩니다.

 

앞으로의 과제

 

아직 넘어야 할 산이 많습니다.⁷⁾

개인적 정리 차원에서 짚어보면,

 

기술적 사항

1. [해결] 컴포넌트 입력창에 입력하면 에디터 커서 위치에는 각주마커를, 에디터 본문 하단에는 각주내용을 삽입
   => iframe_obj = opener.editorGetIFrame(opener.editorPrevSrl) 를 이용해 에디터 내의 요소들을 선택자로 포착할 수 있었음
2. [해결] 각주를 본문 중간(예. 3~4번 사이)에 입력하면 3-5-4 같은 식으로 입력됨
   => 각주 re-ordering 함수를 통해서 가능
3. [해결] 각주 수정 기능도 고려해야 하고, 수정 입력한 후에도 각주 번호 체계가 흐트러지지 않게 해야 함
   => sup 태그에 editor_componet 속성 부여 ... 각주 내용을 컴포넌트로 다시 가져오는 게 관건이었으나 무사히 해결함
4. [해결] 각주 마커를 삭제했을 때, 각주 내용도 연동해서 삭제되어야 함
   => DOMNodeRemoved 이벤트 사용?
5. [해결] 각주 잘라내기/복사하기 + 붙여넣기도 구현할 수 있을까?!
   => 이 역시 애드온으로 봉합. 각각 copy, cut, paste 이벤트로 어렵게 성공.
6. [해결] 에디터에서 소스 보기를 했다가 다시 에디터로 돌아올 때 이벤트 전체가 무효화됨
   => DOMNodeInserted 이벤트로 target에 iframe이 있을 경우 이벤트 함수를 다시 불러옴
7. [해결] 각주 마커를 순차적으로 마우스엔터했을 때 index() 메소드를 통한 각주 마커 순번 인식이 잘못 매칭되는 경우가 있음
   => 순번 식별을 href의 순번에 따라 진행함
8. [작업중] 크로싱 브라우저
   => 현재 크롬, IE에서 성공적
   … 크롬에서 블록 지정 후 삭제시 각주 내용 목록이 연동 동작하지 않음ㅠ
9. [작업중] MS Edge 호환성 테스트
   … https://www.xetown.com/rxe_file/722912#comment_723826 (간장게장님 제보)
   => Edge에서도 각주 입력 및 수정 성공 (reorderFootNote 함수에서 re_li를 스트링이 아닌 경우 인식을 못하는 문제가 있었음)
   … 복잘붙의 경우 간혹 에러가 남
   => [0].outerHTML은 높은 확률로 에러가 나기 때문에 .clone().wrapAll('<ul />').parent().html()로 대체함
   … 그럼에도 붙여넣기 연속 동작에서 높은 확률로 undefined 값이 출력됨. 엣지엣지ㅡㅡ+
   … 그럼에도 붙여넣기 연속 동작에서 2회 붙여놓기 동작이 발생
   => 엣지는 이쯤에서 접어야 할 듯. 대신 유저에이전트가 엣지일 경우 애드온 작동을 중지하는 옵션을 둬도 괜찮겠음(사실 괜찮기보다는 귀찮아서 더는 못해먹겠다)
10. [해결] 새 글 작성시, 각주 복잘붙삭이 안 되는 것 같음ㅠ
    => var editor_sequence = $('div[id^="ckeditor_instance_"]').data('editor-sequence'); 로 해결
11. [해결] 각주 내용을 텍스트로만 입력할 수 있음
    => 컴포넌트에 에디터 임포트는 성공. 옵션 조정도 성공
12. [해결] 삭제시 각주 마커와 내용이 모두 사라지게 되면 각주 내용 섹션도 삭제 + 더불어 모두 삭제된 후 각주 마커 붙여넣기가 되는 경우에는 각주 내용 섹션도 되살리기
    => 삭제는 삭제 이벤트에서, 붙이기는 붙이기 이벤트에서
13. [해결] 각주 입력 및 붙여넣기 후 1) 커서 위치를 마커 바깥으로 이동 및 2) 공백 문자 첨가로 이후 문서 편집이 sup 태그에 영향을 안받게끔 하기
    => 각주 생성 이후 마커 끝에 &nbsp;도 함께 입력
14. [해결] 댓글단에서 컴포넌트 작동 금지 (웹지기님)
    … 가급적 안 보이게. 어쩔 수 없이 보인다면 클릭 안 되게, 어쩔 수 없이 클릭된다면 팝업창 안 열리게, 어쩔 수 없이 열린다면 경고문 후 바로 닫히게ㅠ
    … 뾰족한 수가 없으므로 그냥 같이 가져 감ㅋ 단, 본문의 각주 id와 겹치지 않도록 유의해야 함. 근데 이것도 난제ㅠ
    … 차라리 prefix와 일련번호 사이에 임의의 세션 번호를 부여하는 게 좋겠다는 생각이 들었음
    => 애드온으로 에디터의 data-editor-primary-key-name이 comment_srl일 경우 각주 아이콘 삭제함 (에디터 스킨에서도 제어는 할 수 있는데, 가급적 제공 자료를 통해 기능이 이뤄지도록 지향함)
15. [해결] 자동링크 애드온에 대비한 링크 타겟 클릭시 타겟 속성 동적 삭제 (웹지기님)
    => 클릭 이벤트로 간단히 removeAttr
16. [해결] 게시판 스킨 또는 커스터마이징으로 인한 각주 요소들의 여백 문제 (간장게장님)
    => 각주 마커와 내용에 딸린 하위 요소들의 여백 값들 리셋
17. [해결] 붙여넣기 이벤트에서 각주 섹션까지 붙는 문제 해결 (토순이와아빠)
    => paste 이벤트에서 클립보드가 null 값이거나 내용이 비어 있으면 이벤트 효과를 무효화함
18. [해결] 컴포넌트 설정에서 해시 이동 속도가 안 먹는 버그 (웹지기님)
    => 설정 변수를 $component_info->extra_vars->velocity->value로 받아 옴
19. 지금은 ckEditor로 하고 있는데, xpresseditor나 FROALA와의 호환성도 생각해야 할 듯
    … 코어에서 제공하는 메소드? 변수?를 기준으로 하고 있으니까 그럭저럭 잘 되지 않을까 낙관하고 있음ㅋ (물론 실제로는 절대 그럴 리 없음)

 

이용자 편의 사항

1. [해결] 각주 내용 섹션에서 번호 클릭하면 각주 마커로 이동 링크 장착 (오징님)
   ... 디자인을 신경 쓸 필요가 있겠음
   ... 폰트어썸 아이콘에 absolute 포지션으로 활용 ... 역시 난 디자인을 못해ㅠ
   => 리스트 스타일 조정으로 리-디자인
2. [해결] 해시 링크 이동시 상단 툴바 높이 옵션 적용 (오징님)
   => animate 메소드로 scrollTop 사용
3. [해결] 각주 해시 링크 이동시 이동 속도 설정 추가
   => 목차 애드온에서 가져옴ㅋ
4. [해결] 각주 해시 링크 이동시 타겟에 하이라이트 효과
5. [해결] 각주 창 팝업 후 커서 자동 포커스 (socialskyo님)
   => CK에디터 함수에서 startupFocus : true 추가
6. [해결] 각주 내용 섹션 아래로 커서 이동 가능하게끔 맨 아래에 <p>태그 추가 (socialskyo님)
   => 위 아래로 <p>&nbsp;</p> 추가
7. [해결] 각주 마커 마우스오버시 말풍선, 마우스클릭시 각주내용으로 이동 (웹지기님)
   ... 1) 툴팁이 윈도우 상단에 걸리거나 2) 스크린 가로 사이즈가 작아서 툴팁이 바깥으로 삐져 나갈 때
   => 첫 번째 경우 : 마커의 오프셋-탑 위치 - (툴팁의 높이 + 마커와 툴팁 사이의 거리) <= 도큐멘트 스크롤탑
   ... 두 번째 경우가 남았다!
   => (마커의 오프셋-레프트 위치 + 툴팁의 넓이 + 마커와 툴팁 사이의 좌우 간격 > 도큐멘트 넓이) 일 경우 ... 그 차이만큼 툴팁의 레프트 값 변경
   => 그리고 풍선말의 꼬다리... 툴팁의 pseudo가 아니라 별도의 dom 요소로 설정함. 어우, 이거 겁나 빡셌음. 다시는 툴팁 작업 하나 봐라!
8. [해결] 각주 내용 섹션의 제목 내용과 제목 태그를 사용자가 지정 (웹지기님)
   => 스타일도 추가
9. [해결] 본문의 각주 마커와 각주 리스트의 일련 번호 형식 통일 (웹지기님)
   => transHTML 통해 괄호를 삭제하려 했으나, 마우스이벤트 포착을 위해 그냥 내버려둠ㅋ
10. [해결] 모바일 인터페이스 구성 ... 각주 마커 클릭 이벤트로 하단 fixed 요소로 각주내용 디스플레이
    ... ap_footnote.js 파일의 재구성이 필요할 듯. append와 html 문제. getPreviewContent 함수의 동작 방식 재고해야 함.
    => 모바일 뷰 옵션 설정 및 getPreviewContent 함수 동작 개선
11. [해결] 팝업 창 세로 사이즈 자동 감지 및 출력 (Lemony님)
    => setTimeout을 501로 주고 window.resizeTo 함수 사용
12. [해결] 말풍선 미리보기에서 말줄임표 (웹지기님)
    => 브라우저 호환성 위해 jQuery로 해결
13. [해결] 모바일 뷰에서 각주 내용 요소 투명도 삭제 (웹지기님)
    => #fff 처리
14. [해결] 모바일 뷰에서 gif 안 보여주는 문제 (웹지기님)
    => html 메소드 처리 + ap_parser 예외 처리
    ... 풍선말에서 여전히 gif 안 보이는 문제 (웹지기님)
    => PC뷰 풍선말에서도 ap_parser 예외 처리
15. [해결] 모바일 뷰에서 본문 터치로 내용 닫기 (웹지기님)
    => 본문 터치 대신 클로즈 버튼을 크게 하고, 섹션 하단의 z-index 값과 bottom 값을 사용자 설정 가능하게 함
16. [해결] 모바일에서의 각주 작성 https://www.xetown.com/board/460373 (웹지기님)
    => 모바일 체크 true값 반환시 팝업창 리사이즈
17. [해결] 모바일 뷰에서 레이아웃 하단 고정 툴바 겹침 문제
    => 각주 섹션에 bottom 값 설정 옵션 추가
18. [해결] XE에서 '모바일에서 최적화된 화면으로 보기' 옵션 (웹지기님)
    => popup.js를 통해 관련 요소 hide 처리
19. [해결] 각주 섹션을 div태그로 설정하면서 파싱 모듈이 링크 프리뷰를 중복 출력하는 문제 (웹지기님)
    => 별도 팁 제공 https://www.xetown.com/rxe_third/750890 (현재 람보님 깃허브에 이슈를 올렸음)
20. [해결] 모바일 뷰에서 각주 내용 안에 있는 링크가 동작하지 않는 문제 (웹지기님)
    => text 메소드 대신 html 메소드 사용
21. [해결] 각주 내용의 이미지를 풍선말 등에서 별도 출력하면서 각주 내용의 구성이 깨지는 문제 (웹지기님)
    => 파싱 모듈 예외 처리하고 html 메소드 사용
22. XE removeHackTag 함수 수정 매뉴얼 제공