방향키로 웹툰, 웹소설의 이전/다음화 넘기기 WebtoonKeyDownHelper

웹툰, 웹소설을 볼 때 주로 스마트폰 어플을 이용해서 보지만, 큰 화면으로 보기 위해서 PC의 웹브라우저를 이용하는 경우가 종종 있다. 그런데 일부 사이트들이 이전화, 다음화로 넘길 때 키보드의 좌우 방향키를 이용한 전환을 지원하지 않아서 불편했다. 그래서 좌우 방향키를 이용해 이전/다음화를 넘길 수 있는 기능을 Userscript 를 이용하여 만들었다.

꼭 소설, 웹툰 사이트만이 아니라 몇몇 사이트에서 이전, 다음 글로 넘길 때도 활용하고 있다.

이전, 다음 버튼을 찾아내기 위한 조건은 다양하다.

이전화, 다음화로 넘어가는 버튼 링크에 해당하는 a 태그의 attribute에 '이전', '다음' 이라는 단어가 포함된 title 이 달려있거나

a 태그 내의 span 안에 '이전', '다음'과 같은 단어가 포함되어 있거나... 등 이었다.

일단 내가 가는 사이트들만 분석해보고 조건을 넣은거고,

예상가능한 경우는 아주 많이 있지만 작성해두지 않아서 당연히 모든 사이트에서 동작하지 않는다.

사이트를 추가하고 싶다면 @include 에 원하는 사이트 주소를 추가하고

// add new conditions here 아래에 조건을 추가하면 된다.

// ==UserScript==
// @name        WebtoonKeyDownHelper
// @namespace   WebtoonKeyDownHelper
// @author      Nomomo
// @description It supports new function to turn webtoon's page with the keyboard direction key.
// @version     0.0.1
// @include     *.*toon*.*
// @include     *novel*.*
// @grant       none
// @require     https://greasemonkey.github.io/gm4-polyfill/gm4-polyfill.js
// @require     http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
// @run-at      document-start
// ==/UserScript==
/*jshint multistr: true */

console.log("RUNNING WebtoonKeyDownHelper");
const PREV = -1;
const NEXT = 1;

function findButton(TYPE){
  var res = undefined;
  
  $("a").each(function() {
    var temp = checkCondition(TYPE,$(this));
    
    if(temp !== undefined){
      res = temp;
      return false;
    }
  });
  
  return res;
}

function checkCondition(TYPE, target){
  if(target.length === 0) return undefined;
  
  // add new conditions here
  // c1 : title
  var title = target.attr("title");
  // c2 : title >> span
  var span = target.find("span.text").html();
  
  if(TYPE === NEXT){
    if(indexOfCompare(title,"다음")){
      return target.attr("href");
    }
    
    if(indexOfCompare(span,"다음")){
      return target.attr("href");
    }
    
  }
  else if(TYPE === PREV){
     if(indexOfCompare(title,"이전")){
      return target.attr("href");
    }
    
    if(indexOfCompare(span,"이전")){
      return target.attr("href");
    }
  }
  
  return undefined;
}

$(document).keydown(function(e) {
  var href = "";
    switch(e.which) {
        case 37: // left
        href = findButton(PREV);
        if(href !== undefined) location.href = href;
        break;

        //case 38: // up
        //break;

        case 39: // right
        href = findButton(NEXT);
        if(href !== undefined) location.href = href;
        break;

        //case 40: // down
        //break;

        default: return;
    }
    if(href !== undefined) console.log("MOVE TO : " + href);
    e.preventDefault(); // prevent the default action (scroll)
});

function indexOfCompare(obj,text){
  if(obj === undefined){
    return false;
  }
  
  if(obj.indexOf(text) !== -1){
    return true;          
  }

  return false;
}