mbg1346 - "드래그하여 페이지/문서 이동 애드온" 적용팁

첨부파일

등록일

파일크기

다운 수

Extra Form
원작자	80san
출처	https://xetown.com/point_contents/1161730
적용여부	적용

원작자

80san

출처

https://xetown.com/point_contents/1161730

적용여부

적용

드래그하여 페이지/문서 이동 애드온

[스케치북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 값으로 설정됩니다.

<div id="board_list">
<!--// 게시판 유형 -->
<!--@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

<?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">

이미지 002.jpg

list.html 파일 최하단에 아래 스크립트 추가

<script>
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}">

이미지 001.jpg

"드래그하여 페이지/문서 이동 애드온" 적용팁

단축키

Articles