게시판 즐겨찾기
편집
드래그 앤 드롭으로
즐겨찾기 아이콘 위치 수정이 가능합니다.
영자님을 위한 재능기부 - jQuery를 활용한 오유 단축키 소스 공개
게시물ID : freeboard_878488짧은주소 복사하기
작성자 : 52c
추천 : 7
조회수 : 566회
댓글수 : 2개
등록시간 : 2015/05/30 00:16:54
관련 내용을 올렸었는데, ( http://todayhumor.com/?freeboard_878435
아무래도 소스를 공개해 드리는 게 좋을 것 같아서 요로코롬 올려 드립니다.

제가 만든 크롬 확장 프로그램, "오유 왼손 단축키" 소스를 공개합니다. 
바보님이 만드신 것과 동일하게 W,S,A,D를 사용하고요.. 
다음의 로직으로 구현되었습니다.

이전/다음 글 : 화면에 표시된 글 목록 중에서 현재 보고 있는 글의 이전/다음 글 링크를 클릭하는 형태입니다. (목록 화면에서는 맨 상위 글로 이동)
이전/다음 페이지 : URL의 파라미터를 분석하여, page 파라미터를 수정하여 이동합니다.

바보님은 jQuery를 사용하지 않는 라이브러리를 따로 쓰셨던데, 
저는 그냥 jQuery를 활용해 corss browsing 문제를 해결했습니다. 

바보님 뿐 아니라, JavaScript 초보자 분들에게도 도움이 많이 되었으면 좋겠습니다. ^^;;

소스-----------------------------------------------

//글 이동시 보여 줄 패널 
var announceDiv = $('<div id="ou_shortcut_announce">').css({
position:'absolute',
top:'0', left:'0', right:'0', bottom:'0', 
background:'rgba(15,15,15,0.8)',
zIndex:1000
}).hide().appendTo('body');

//패널 내용 (이전 글로 이동합니다, 다음 글로 이동합니다..)
var announceTextDiv = $('<div id="ou_shortcut_announce_text">').css({
position:'absolute',
top:'0px',
left:'0px',
width:'300px',
height:'120px',
textAlign:'center',
fontWeight:'bold',
lineHeight:'120px',
borderRadius:'8px',
background:'rgb(225,225,225',
boxShadow:'5px 5px 50px rgba(0,0,0,0.8)'
}).appendTo(announceDiv);

//패널을 표시함
function ouShortcutShowAnnounce(msg, autoHide) {
//console.log(Math.max(0, (($(window).height() - $('#ou_shortcut_announce').outerHeight()) / 2) + $(window).scrollTop()) + "px");
announceTextDiv.text(msg)
.css({
'top': Math.max(0, (($(window).height() - announceTextDiv.outerHeight()) / 2) + $(window).scrollTop()) + "px",
'left': Math.max(0, (($(window).width() - announceTextDiv.outerWidth()) / 2) + $(window).scrollLeft()) + "px"
});
announceDiv.height($(document).height()).show({
duration:0,
always: function() {
if(!! autoHide) {
$(this).delay(1000).fadeOut();
}
}
});
}

//URL 파라미터를 Object로 변환
var strParams = location.search.substring(1);
var objParam = strParams ? JSON.parse('{"' + strParams.replace(/&/g, '","').replace(/=/g,'":"') + '"}', function(key, value) { return key===""?value:decodeURIComponent(value) }):{};

//게시물 목록
var contList = $('table.table_list > tbody > tr.view');
var contOffset = contList.eq(0).index(); //공지사항은 빼야 함..

//게시물 목록 중 현재 보고 있는 글에 해당하는 녀석.
var viewPos = $('table.table_list > tbody > tr.view_now').index();
var currentPos = viewPos < 0 ? -1 : viewPos - contOffset; //공지사항은 빼야 함..

//파라미터에서 현재 페이지 가져 옴.
var currentPage = objParam.page ? Number(objParam.page) : 1;

//목록 URL 생성
var listParam = {};
['table','kind','member_kind','mn'].forEach(function(key) {
if(!! objParam[key]) listParam[key] = objParam[key];
});

var currentUrl = window.location.pathname;
var currentFileName = currentUrl.substring(currentUrl.lastIndexOf('/')+1);

if(currentFileName == 'write.php') { //글쓰기 화면에서는 Alt+S 를 누르면 "확인" 버튼을 클릭함
var onKeyDown = function(e) {
//console.log(e.altKey, e.which);
if(e.altKey && e.which == 83) {
e.preventDefault();
$('input[name=confirm_btn]').click();
return false;
}
};

var onKeyPress = function(e) { //OSX Yosemitte 에서는 Alt+S 를 누르면 추가 이벤트가 발생하는 버그가 있어서..
if(e.altKey && e.which == 223) {
return false;
}
};

$(document).keydown(onKeyDown).keypress(onKeyPress);
$('iframe').contents().keydown(onKeyDown).keypress(onKeyPress);

} else { 

$(document).keypress(function(e) {
if(e.altKey && e.which == 223) return false;
});
$(document).keydown(function(e) {
//댓글을 쓰고 Alt+S 누르면 확인 버튼 누름.
if($(e.target).is('input, textarea')) { 
if($(e.target).is('#memoText') && e.altKey && e.which == 83) {
$('#memo_insert_submit_image').click();
return false;
}

return;
}

//단축키 지정 
switch(e.which) {
case 65 : //'A' : 윗글로 이동
if(currentPos > 0) {
ouShortcutShowAnnounce('윗글로 이동');
                    window.location.href = contList.eq(currentPos - 1).find('td.subject > a').attr('href');
} else {
ouShortcutShowAnnounce('윗글이 없습니다', true);
}

break;
case 68 : //'D' : 아랫글로 이동
if(currentPos < contList.length - 1) {
ouShortcutShowAnnounce('아랫글로 이동');
                    window.location.href = contList.eq(currentPos + 1).find('td.subject > a').attr('href');
} else {
ouShortcutShowAnnounce('아랫글이 없습니다', true);
}
break;

case 87 : //'W' : 이전 페이지로 이동 
if(currentPage > 1) {
ouShortcutShowAnnounce('이전 페이지로 이동');
listParam.page = currentPage - 1;
window.location.href = 'list.php?' + $.param(listParam);
} else {
ouShortcutShowAnnounce('첫페이지입니다', true);
}
break;

case 83 : //'S' : 다음 페이지로 이동
ouShortcutShowAnnounce('다음 페이지로 이동');
listParam.page = currentPage + 1;
window.location.href = 'list.php?' + $.param(listParam);
break;
default:
break;
}
});
}
출처 https://chrome.google.com/webstore/detail/%EC%98%A4%EC%9C%A0-%EC%99%BC%EC%86%90-%EB%8B%A8%EC%B6%95%ED%82%A4/omdikfnbkndgffbojgbcgiimgabiodff?hl=ko
꼬릿말 보기
전체 추천리스트 보기
새로운 댓글이 없습니다.
새로운 댓글 확인하기
글쓰기
◀뒤로가기
PC버전
맨위로▲
공지 운영 자료창고 청소년보호