[스케치북5 게시판에 적용하는 방법]
1. 먼저 /addons/drag_interaction/tpl/index.html 코드를 보면
$list_area_id = 'board_list';
$document_area_id = 'board_read';
board_list 가 페이지 부분 id 이고,
board_read 가 본문글 부분 id 입니다.
2. 그럼 어떻게 적용하는가
/modules/board/m.skins/sketchbook5/list.html 파일안에 파란색부분을 찾아서 빨간색부분으로 감사줍니다.
<div id="board_read">
<include cond="$oDocument->isExists()" target="_read.html" />
</div>
이렇게 하면 본문글(_read.html)부분이 board_read 라는 id 값으로 설정됩니다.
<!--// 게시판 유형 -->
<!--@if($mi->default_style=='list')-->
<!--@if(!Mobile::isMobileCheckByAgent() || $mi->list_m)-->
<include target="_list_normal.html" />
<!--@else-->
<include target="_list_m.html" />
<!--@end-->
<!--@elseif($mi->default_style=='webzine')-->
<include target="_list_webzine.html" />
- 중략 -
<!--@else-->
<include target="_list_normal.html" />
<!--@end-->
</div>
이 부분은 페이지리스트 부분이 board_list 라는 id 값으로 설정됩니다.
이렇게 까지만 해도 모바일에서 게시판 스킨이 스케치북5 이면 잘 작동합니다.
3. Xetown의 웹지기님이 남긴 팁적용
https://xetown.com/tips/1163417
애드온의 php 파일에 사용되지 않아야할 조건에 || $_COOKIE['donotdragpage'] == 'true' 를 추가해 줍니다.
/addons/drag_interaction/drag_interaction.addon.php
// 중단 조건
if (
!Mobile::isMobileCheckByAgent()
|| $called_position !== 'before_display_content'
|| Context::getResponseMethod() !== 'HTML'
|| Context::get('module_info')->module !== 'board'
|| !Context::get('grant')->access
|| Context::get('act')
|| $_COOKIE['donotdragpage'] == 'true'
) return;
저는 페이지이동 문구를 상단으로 끌어 올렸습니다.
/modules/board/m.skins/sketchbook5/list.html
빨간색부분 추가 하시고 img방에 drag.png파일 추가
<!--// FAQ 검색창 -->
<div cond="$mi->srch_window!='N'" class="bd_faq_srch<!--@if($mi->srch_window==3)--> clear<!--@end-->" style="display:block"|cond="$mi->srch_window==2 || $search_keyword">
<include target="_search.html" />
</div>
</div>
<div style="text-align:center; margin:10px 0; color:orange">
<img src="img/drag.png" />
<p style="display:none;" class="dragoff"> 좌우 스크롤로 페이지 이동이 가능합니다. 끄기 <i class="fa fa-toggle-on dragoff" aria-hidden="true"></i></p>
<p style="display:none;" class="dragon"> 좌우 스크롤로 페이지 이동이 불가능합니다. 켜기 <i class="fa fa-toggle-off dragon" aria-hidden="true"></i></p>
</div>
<!--// 카테고리 -->
<div class="cnb_n_list">
list.html 파일 최하단에 아래 스크립트 추가
jQuery(function($){
if(getCookie('donotdragpage') == 'true'){
$('.dragoff').hide();
$('.dragon').show();
}
else {
$('.dragon').hide();
$('.dragoff').show();
}
$('.dragoff').click(function(){
setCookie('donotdragpage', 'true', new Date(Date.now() + 1000000000000));
$('.dragoff').remove();
$('.dragon').show();
location.reload();
});
$('.dragon').click(function(){
setCookie('donotdragpage', 'true', new Date(Date.now() - 1));
$('.dragon').remove();
$('.dragoff').show();
location.reload();
});
});
</script>
/modules/board/m.skins/sketchbook5/_read.html 상단에 빨간색 부분 추가
<div style="text-align:center; margin:10px 0; color:orange">
<img src="img/drag.png" />
<p style="display:none;" class="dragoff"> 좌우 스크롤로 이전/다음 글 이동이 가능합니다. 끄기 <i class="fa fa-toggle-on dragoff" aria-hidden="true"></i></p>
<p style="display:none;" class="dragon"> 좌우 스크롤로 이전/다음 글 이동이 불가능합니다. 켜기 <i class="fa fa-toggle-off dragon" aria-hidden="true"></i></p>
</div>
<div class="rd<!--@if(!$mi->rd_nav_style)--> rd_nav_style2<!--@end--><!--@if($mi->default_style=='blog')--> rd_blog {$mi->blog_style}<!--@end--> clear" style="padding:{$mi->rd_padding};" data-docSrl="{$oDocument->document_srl}">
이런거 보면 그냥 스케치북을 써야하나 싶네요ㅠ 유료 게시판은 아무도 팁을 올려주지 않네요.