각주 컴포넌트(와 편집 애드온) 0.4로 업데이트했습니다.

https://xetown.com/rxe_file/722912

 

이번 버전에선 모바일 뷰 전용 인터페이스를 도입했고,

이전 버전에서 해결되지 않던 버그를 수정했습니다.

(댓글 에디터에서 컴포넌트 아이콘 노출 문제, 붙여넣기 이벤트에서 불필요한 동작 문제)

 

모바일 뷰 스샷을 첨부해봅니다 :)

 

 

  1. 일반적인 모바일 화면입니다.
    1.png
    여기서 각주 마커를 클릭하면? 3)을 클릭했다고 쳐봅시다.

     
  2. 아래 그림과 같이 화면 하단에 고정된 요소로 각주 내용이 불러와집니다.
    그리고 (화면 상단에 충분한 공간이 있다면) 내용 바로 위로 각주 마커가 붙도록 자동 스크롤 이동하게 되지요ㅎㅎ
    2.png
    각주 내용 우측 상단의 X표시를 클릭하면 내용은 닫히게 되겠죠?

     

  3. 모바일 뷰는 각주 컴포넌트 설정에서 하실 수 있습니다.
    3.png
    모바일 뷰를 '사용 안 함'으로 하면 모바일에서도 PC에서와 같은 동작을 하게 됩니다.
    더불어, 각주 섹션 옵션에서는 모바일 뷰 '사용함' 선택시, 본문 하단에 각주 내용 리스트 출력 여부를 결정할 수 있습니다.

     

  4. 컴포넌트 설정을 하면 아래처럼 스크립트 변수로 넘어가게 되죠 ㅎ
    4.png
    모바일 뷰를 사용하고, 섹션을 감춘다는 설정이 잘 됐죠?

     

  5. 실제로 아래와 같이 섹션이 출력되지 않는 걸 확인할 수 있습니다.
    5.png

     

  6. 물론, 섹션 보이기를 설정한다면 아래처럼 각주 내용 리스트를 출력할 수도 있습니다.
    6.png

     

이상입니다.

일단 이것으로 애초 각주 컴포넌트 제작을 구상했을 때의 그림을 어느 정도 그려낸 것 같아요.

아직 제 능력으론 해결하기 어려운 몇몇 버그가 남아 있기는 하지만, 시간 날 때 연구를 해봐야죠, 뭐ㅎㅎ

 

이제부터 당분간은 지난번에 언급했던 템플릿 컴포넌트 제작을 본격화해볼 생각입니다.

https://xetown.com/board/731957

메일링 서비스, 규격화된 문서 작성, 위젯 및 문서 페이지에서 내용 직접 추가 등등 여러모로 활용해볼 만한 시도라서 살짝 들뜬 마음입니다ㅎㅎ

 

...

 

덧.

정회원된 기념으로 커피 한 잔(후원) 배너를 걸어보려고 하는데, 페이팔 기부는 쉽지가 않네요.

페이팔 기부 URL을 입력하라고 해서, 한참 헤매다가 https://www.paypal.me/Cydemo 라는 url을 받아서 입력해놓긴 했는데 이게 제대로 작동하는 링크인지 잘 모르겠네요;;;

여러모로 여유되시는 분 있다면 제대로 동작하는지 한 번 시험을....으흐흐흐 (근데 정말 몰라요ㅠ)

 

윤삼

profile
아무래도 중급 초반 수준의 코딩 오타쿠인 것 같습니다.
  • profile

    업데이트 감사합니다.
    모바일에서 새로 바뀌 각주내용 보여주는 곳에 투명도가 생겨서 시인성이 좀 떨어져 투명도가 없었으면 좋겠습니다.

    모바일에서 각주 내용 닫기 버튼이 다른 곳과 겹쳐 사용 어려운 경우가 생기는데요. 각주 내용 이외 본문 영역을 터치 하면 닫게 해주면 좋을 것 같습니다.


    혹시 모바일에서 각주 작성을 완전 배제한 것이 라니라면..
    https://xetown.com/board/460373
    이런식으로 혹은 다른 방법으로 모바일에서 각주 작성이 가능하게 될까요 ??


    마지막 질문 입니다.
    https://xetown.com/qna/494977
    위 댓글의 답변으로 이모티콘 버튼을 댓글에서 밖으로 빼내서 사용중입니다. 여기에 각주컴퍼넌트 버튼만 제외할 수 있을까요 ?

    <!--@if($module_type === 'comment')-->
    <div style="position:absolute;top:-25px;left:80px;">
    <!--@foreach($component_list as $component_name => $component)-->
    <a href="javascript:void(0)" onclick="window.openComponent('{$component_name}', {$editor_sequence});"><img src="/modules/editor/components/{$component_name}/component_icon.gif" title="{$component->title}" style="width:20px;height:20px;" /></a>
    <!--@endforeach-->
    </div>
    <!--@endif-->

  • profile profile
    네, 제안 감사합니다~
    (나중에 알아보기 쉽게 정리)

    1. 투명도 삭제 (야심찮게 넣어봤는데 빼야죠ㅋㅋ)
    2. 본문 터치로 각주 내용 닫기
    3. 모바일 각주 작성 (전혀 생각하지 않았던 부분인데, 고민해보겠습니다)

    각주 컴포넌트 제외하시려면,

    a태그 위줄에
    <!--@if($component_name !== 'ap_footnote')-->

    </a> 다음 줄에
    <!--@endif-->

    하시면 될 것 같습니다. ... 되겠죠..?
  • profile profile
    감사합니다. 알려주신대로 하니 잘 되네요.
    모바일보기는 저희는 사용 안하는 것으로 해야 할 것 같아요. PC와 같은 방식도 불편하지 않고 앱에서 노출된 버튼이 내용을 가려서 PC방식을 사용해야 할 것 같습니다.
  • profile profile
    잘 되신다니 다행입니다.
    어쨌든 모바일 뷰 피드백 주신 부분은 개선하는 데 꼭 참고하도록 하겠습니다!
  • profile
    저희는 말풍선 또는 모바일에서 이미지를 보여주지 못하는 것 같습니다.
    https://pomelove.com/xe/notice/169#user_content_fn_cnt-7

    그랙서 모바일에서 각주섹션 감추기를 할 경우 이미지를 못보여주게 되는데요.....
  • profile profile
    아, gif를 불러오지 못하게 해서 그래요. 그 부분도 개선하도록 하겠습니다~
  • profile profile
    0.4.1로 업데이트하면서 모바일에서 각주 작성이 가능하도록 팝업창을 최적화해봤습니다.
    피드백 주셨던 부분 토대로 기능 개선도 했구요.
    라이믹스에서만 테스트를 하긴 했는데 XE에서도 잘 되지 않을까 싶어요.
  • profile profile
    업데이트 감사합니다.
    모바일에서 모바일에 최적화된 화면으로보기 이 부분 없애주시는게 좋을 것 같습니다. 이게 위에 추가,닫기 버튼을 가리고 사실 모바일최적화보기 눌러도 변화는 없거든요.

    gif 이미지 안보이는거는 아직 처리 전 인 것 같구요.

    모바일최적화 부분은 찾아서 지워서 사용하겠습니다.
  • profile profile
    css에 추가했는데 팝업에서는 css를 참조하지 않는 듯 하네요.
    그냥 popup.html 에 직접 넣었습니다.
    <style>
    div.xe_mobile {display:none !important;}
    </style>
  • profile profile
    라이믹스에서 테스트 하다보니 그 부분을 놓쳤군요ㅠ
    그러고 보니 라이믹스에선 모바일 최적화 옵션이 안 뜨는데 이것도 신기하네요ㄷㄷ
    (생각해보니 제가 레이아웃이나 게시판 스킨에서 모바일뷰를 따로 쓰지 않아서 그런 걸 수도 있겠습니다ㅎㅎ)
    div.xe_mobile이 setTimeout으로 삽입되는 것일 수도 있어 조심스럽긴 하지만, 요소명까지 일러주셨으니 잡아보도록 하겠습니다.

    그리고 gif는 임베드파싱 모듈을 예외 처리하는 과정에서 코드가 좀 꼬여보렸네요.
    풍선말에서는 여전히 gif가 안 뜰 겁니다.
    모바일 뷰에서는 html을 그냥 가져다 쓰고 임베드파싱 모듈을 예외처리 해서 gif가 뜰 거구요.
    이미지와 text를 따로 불러오는 게 번거롭다보니 그렇게 됐네요.
    암튼 이 부분도 수정해볼게요~