☰

AtCoder Listing Tasks

[問題]タブをクリックすると、各問題のページに移動できるドロップダウンリストを表示します。

נכון ליום 11-06-2023. ראה הגרסה האחרונה.

  1. // ==UserScript==
  2. // @name           AtCoder Listing Tasks
  3. // @namespace      https://github.com/luuguas/AtCoderListingTasks
  4. // @version        1.3
  5. // @description    [問題]タブをクリックすると、各問題のページに移動できるドロップダウンリストを表示します。
  6. // @description:en Click [Tasks] tab to open a drop-down list linked to each task.
  7. // @author         luuguas
  8. // @license        Apache-2.0
  9. // @match          https://atcoder.jp/contests/*
  10. // @exclude        https://atcoder.jp/contests/
  11. // @exclude        https://atcoder.jp/contests/archive
  12. // @grant          none
  13. // ==/UserScript==
  14.  
  15. //AtCoderに標準で読み込まれているjQueryを使用
  16. let $ = window.jQuery;
  17.  
  18. (function() {
  19.     'use strict';
  20.     const CONTEST_URL = 'https://atcoder.jp/contests/';
  21.     const TAG_PREFIX = 'userscript-ACLT';
  22.     const LIST_MAX_HEIGHT = '770%';
  23.     const STYLES = {
  24.         'dropdown': `max-height: ${LIST_MAX_HEIGHT}; overflow: visible auto;`,
  25.         'label': `width: 100%; margin: 0px; padding: 3px 10px; clear: both; font-weight: normal; white-space: nowrap;`,
  26.         'checkbox': `margin: 0px; vertical-align: middle;`,
  27.     };
  28.     const TEXTS = {
  29.         'new_tab': {'ja': ' 新しいタブで開く', 'en': ' Open in a new tab'},
  30.         'all_tasks': {'ja': ' 問題一覧', 'en': ' All Tasks'},
  31.         'loading_failed': {'ja': '(読み込み失敗)', 'en': '(Loading Failed)'},
  32.     };
  33.     
  34.     /* 設定の読み込み・保存をするクラス */
  35.     const SETTING_KEY = 'Setting_AtCoderListingTasks';
  36.     let Setting = function(){
  37.         this.data = {};
  38.         this.default_data = {
  39.             'new_tab': false,
  40.         };
  41.         this.storage = localStorage;
  42.     };
  43.     Setting.prototype = {
  44.         loadSetting: function(){
  45.             let value = this.storage[SETTING_KEY];
  46.             if(value){
  47.                 this.data = JSON.parse(value);
  48.             }
  49.             else{
  50.                 this.storage[SETTING_KEY] = JSON.stringify(this.default_data);
  51.                 this.data = this.default_data;
  52.             }
  53.         },
  54.         getValue: function(key){
  55.             return this.data[key];
  56.         },
  57.         setValue: function(key, value){
  58.             this.data[key] = value;
  59.             this.storage[SETTING_KEY] = JSON.stringify(this.data);
  60.         },
  61.     };
  62.     let setting = new Setting();
  63.     
  64.     /* ページの言語を取得する関数 */
  65.     function getLanguage(){
  66.         lang = 'ja';
  67.         let content_language = $('meta[http-equiv="Content-Language"]');
  68.         if(content_language.length !== 0 && content_language.attr('content') === 'en'){
  69.             lang = 'en';
  70.         }
  71.     }
  72.     let lang = 'ja';
  73.     
  74.     /* [問題]タブに本UserScript用のidを追加する関数(タブがなければfalseを返す) */
  75.     function attachId(){
  76.         let tabs = $('#contest-nav-tabs');
  77.         if(tabs.length === 0){
  78.             return false;
  79.         }
  80.         let tasks_tab = tabs.find('a[href$="tasks"]');
  81.         if(tasks_tab.length === 0){
  82.             return false;
  83.         }
  84.         else{
  85.             tasks_tab.attr('id', `${TAG_PREFIX}-tab`);
  86.             return true;
  87.         }
  88.     }
  89.     
  90.     /* [問題]タブを[提出結果]タブと同様のドロップダウンリストに変える関数 */
  91.     function togglize(){
  92.         let tasks_tab = $(`#${TAG_PREFIX}-tab`);
  93.         tasks_tab.attr({
  94.             'class': 'dropdown-toggle',
  95.             'data-toggle': 'dropdown',
  96.             'href': '#',
  97.             'role': 'button',
  98.             'aria-haspopup': 'true',
  99.             'aria-expanded': 'false',
  100.         });
  101.         tasks_tab.append($('<span>', {class: 'caret'}));
  102.         tasks_tab.parent().append($('<ul>', {class: 'dropdown-menu', style: STYLES['dropdown']}));
  103.     }
  104.     
  105.     /* [[✓]新しいタブで開く]のチェックの有無でaタグの属性を切り替える関数 */
  106.     function changeNewTabAttr(e){
  107.         let a = e.currentTarget;
  108.         if(setting.getValue('new_tab')){
  109.             a.target = '_blank';
  110.             a.rel = 'noopener noreferrer';
  111.         }
  112.         else{
  113.             a.target = '_self';
  114.             a.rel = '';
  115.         }
  116.     }
  117.     
  118.     /* リストを追加する関数 */
  119.     function addList(){
  120.         let contest_name = location.href.split('/')[4];
  121.         //contest_nameにハッシュ(#?)があれば取り除く
  122.         let hash = contest_name.search(/[#\?]/);
  123.         if(hash !== -1){
  124.             contest_name = contest_name.slice(0, hash);
  125.         }
  126.         
  127.         let dropdown_menu = $(`#${TAG_PREFIX}-tab`).parent().children('.dropdown-menu');
  128.  
  129.         /* [問題一覧]の追加 */
  130.         let all_tasks = $('<a>', {href: `${CONTEST_URL}${contest_name}/tasks`});
  131.         all_tasks.append($('<span>', {class: 'glyphicon glyphicon-list'}).attr('aria-hidden', 'true'));
  132.         all_tasks.append(document.createTextNode(TEXTS['all_tasks'][lang]));
  133.         //チェックボックスにチェックが付いていたら新しいタブで開く
  134.         all_tasks.on('click', changeNewTabAttr);
  135.         dropdown_menu.append($('<li>').append(all_tasks));
  136.         
  137.         /* [[✓]新しいタブで開く]の追加 */
  138.         let label = $('<label>', {style: STYLES['label']});
  139.         label.css('color', all_tasks.css('color')); //[問題一覧]から色情報を取得
  140.         let checkbox = $('<input>', {type: 'checkbox', style: STYLES['checkbox']});
  141.         //チェックボックスはチェック状態をストレージと同期
  142.         setting.loadSetting();
  143.         checkbox.prop('checked', setting.getValue('new_tab'));
  144.         checkbox.on('click', function(){
  145.             setting.setValue('new_tab', this.checked);
  146.         });
  147.         label.append(checkbox);
  148.         label.append(document.createTextNode(TEXTS['new_tab'][lang]));
  149.         dropdown_menu.prepend($('<li>').append(label));
  150.         //チェックボックスが押された場合はドロップダウンリストを非表示にしない
  151.         dropdown_menu.on('click', function(e){
  152.             if(e.target === label[0]){
  153.                 e.stopPropagation();
  154.             }
  155.         });
  156.         
  157.         /* 分割線の追加 */
  158.         dropdown_menu.append($('<li>', {class: 'divider'}));
  159.         
  160.         /* 各問題の追加 */
  161.         // https://atcoder.jp/contests/.../tasks のページ情報をリクエスト
  162.         let xhr = new XMLHttpRequest();
  163.         xhr.responseType = 'document';
  164.         xhr.onreadystatechange = function(){
  165.             let dropdown_menu = $(`#${TAG_PREFIX}-tab`).parent().children('.dropdown-menu');
  166.             
  167.             if(xhr.readyState === 4){
  168.                 if(xhr.status === 200){
  169.                     let result = $(xhr.responseXML);
  170.                     let problem_node = result.find('#contest-nav-tabs + .col-sm-12');
  171.                     let problem_list = problem_node.find('tbody tr');
  172.                     
  173.                     //表から問題情報を抽出
  174.                     let list = [];
  175.                     problem_list.each(function(){
  176.                         let td = $(this).children('td');
  177.                         list.push({
  178.                             url: td[0].firstChild.getAttribute('href'),
  179.                             diff: td[0].firstChild.textContent,
  180.                             name: td[1].firstChild.textContent,
  181.                         });
  182.                     });
  183.                     
  184.                     //リストを追加
  185.                     for(let data of list){
  186.                         let a = $('<a>', {href: data.url, text: `${data.diff} - ${data.name}`});
  187.                         //チェックボックスにチェックが付いていたら新しいタブで開く
  188.                         a.on('click', changeNewTabAttr);
  189.                         dropdown_menu.append($('<li>').append(a));
  190.                     }
  191.                     console.log('[AtCoder Listing Tasks] Succeeded!');
  192.                 }
  193.                 else{
  194.                     //エラー情報を追加
  195.                     let a = $('<a>', {href: '#', text: TEXTS['loading_failed'][lang]});
  196.                     a.on('click', function(e){
  197.                         e.preventDefault();
  198.                     });
  199.                     dropdown_menu.append($('<li>').append(a));
  200.                     console.log('[AtCoder Listing Tasks] Failed...');
  201.                 }
  202.             }
  203.         };
  204.         xhr.open('GET', `${CONTEST_URL}${contest_name}/tasks`, true);
  205.         xhr.send(null);
  206.     }
  207.     
  208.     /* スクリプトを実行 */
  209.     let tab_exist = attachId();
  210.     //タブがない場合は終了
  211.     if(!tab_exist){
  212.         console.log('[AtCoder Listing Tasks] [Tasks] Tab isn\'t exist.');
  213.         return;
  214.     }
  215.     getLanguage();
  216.     togglize();
  217.     addList();
  218.     
  219. })();