☰

AtCoder Listing Tasks

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

Ekde 2023/07/08. Vidu La ĝisdata versio. 

  1. // ==UserScript==
  2. // @name           AtCoder Listing Tasks
  3. // @namespace      https://github.com/luuguas/AtCoderListingTasks
  4. // @version        1.5
  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. // @supportURL     https://github.com/luuguas/AtCoderListingTasks/issues
  10. // @match          https://atcoder.jp/contests/*
  11. // @exclude        https://atcoder.jp/contests/
  12. // @exclude        https://atcoder.jp/contests/?*
  13. // @exclude        https://atcoder.jp/contests/archive*
  14. // @grant          none
  15. // ==/UserScript==
  16.  
  17. (function () {
  18. 'use strict';
  19.  
  20. //AtCoderに標準で読み込まれているjQueryを使用
  21. let $ = window.jQuery;
  22.  
  23. const CONTEST_URL = 'https://atcoder.jp/contests';
  24. const ID_PREFIX = 'userscript-ACLT';
  25. const PRE = 'ACLT';
  26. const CONTEST_REGULAR = ['abc', 'arc', 'agc', 'ahc', 'past', 'joi', 'jag'];
  27. const CONTEST_PERMANENT = ['practice', 'APG4b', 'abs', 'practice2', 'typical90', 'math-and-algorithm', 'tessoku-book'];
  28. const ATONCE_TAB_MAX = 20;
  29.  
  30. const CSS = `
  31. .${PRE}-dropdown {
  32.     max-height: 890%;
  33.     overflow: visible auto;
  34. }
  35. .${PRE}-label {
  36.     width: 100%;
  37.     margin: 0px;
  38.     padding: 3px 10px;
  39.     clear: both;
  40.     font-weight: normal;
  41.     white-space: nowrap;
  42. }
  43. .${PRE}-checkbox {
  44.     margin: 0px !important;
  45.     vertical-align: middle;
  46. }
  47.  
  48. .${PRE}-option {
  49.     margin: 5px 0px 15px 10px;
  50. }
  51. .${PRE}-flex {
  52.     display: flex;
  53.     align-items: center;
  54. }
  55. .${PRE}-select-all {
  56.     height: 30px;
  57. }
  58. .${PRE}-select-specify {
  59.     height: 35px;
  60. }
  61. .${PRE}-radio {
  62.     padding-right: 15px;
  63. }
  64. .${PRE}-disabled {
  65.     opacity: 0.65;
  66. }
  67. .${PRE}-caution {
  68.     margin-left: 15px;
  69.     color: red;
  70. }
  71. .${PRE}-toggle {
  72.     min-width: 55px;
  73. }
  74. .${PRE}-caret {
  75.     margin-left: 5px !important;
  76. }
  77. .${PRE}-list {
  78.     max-height: 800%;
  79.     overflow: visible auto;
  80. }
  81. .${PRE}-target {
  82.     background-color: #e0e0e0;
  83. }
  84. .${PRE}-target:hover {
  85.     background-color: #e0e0e0 !important;
  86. }
  87. .${PRE}-between {
  88.     padding: 0px 5px;
  89. }
  90. `;
  91. const TEXT = {
  92.     newTab: { 'ja': '新しいタブで開く', 'en': 'Open in a new tab' },
  93.     allTasks: { 'ja': '問題一覧', 'en': 'Task Table' },
  94.     loadingFailed: { 'ja': '(読み込み失敗)', 'en': '(Loading Failed)' },
  95.     atOnce: { 'ja': 'まとめて開く', 'en': 'Open at once' },
  96.     modalDiscription: { 'ja': '複数の問題をまとめて開きます。', 'en': 'Open several tasks at once.' },
  97.     cancel: { 'ja': 'キャンセル', 'en': 'Cancel' },
  98.     all: { 'ja': 'すべて', 'en': 'All' },
  99.     specify: { 'ja': '範囲を指定', 'en': 'Specify the range' },
  100.     caution: { 'ja': `※一度に開くことのできるタブは ${ATONCE_TAB_MAX} 個までです。`, 'en': `*Up to ${ATONCE_TAB_MAX} tabs can be open at once.` },
  101.     reverse: { 'ja': '逆順で開く', 'en': 'Open in reverse order' },
  102.     modalInfo: { 'ja': 'が開かれます。(ポップアップがブロックされた場合は許可してください。)', 'en': 'will be opened. (If pop-ups are blocked, please allow them.)' },
  103.     aTab: { 'ja': '個のタブ', 'en': 'tab ' },
  104.     tabs: { 'ja': '個のタブ', 'en': 'tabs ' },
  105. };
  106.  
  107. const DB_NAME = 'UserScript_ACLT_Database';
  108. const DB_VERSION = 1;
  109. const STORE_NAME = { option: 'option', problemList: 'problemList' };
  110. const STORE_INFO = [{ storeName: STORE_NAME.option, keyPath: 'name' }, { storeName: STORE_NAME.problemList, keyPath: 'contestName' }];
  111.  
  112. const REMOVE_INTERVAL = 1 * 60 * 60 * 1000;
  113. const REMOVE_BASE = 10 * 24 * 60 * 60 * 1000;
  114. const ACCESS_INTERVAL = 1 * 60 * 1000;
  115.  
  116. /*IndexedDBを扱うクラス
  117.   https://github.com/luuguas/IndexedDBManager */
  118. let IDBManager = function (databaseName) { this.database = null; this.databaseName = databaseName; };
  119. IDBManager.prototype = {
  120.     openDatabase(storeInfos, version) {
  121.         return new Promise((resolve, reject) => {
  122.             if (this.database !== null) { resolve(null); return; }
  123.             if (typeof window.indexedDB === 'undefined') { reject('IndexedDB is not supported.'); return; }
  124.             let openRequest = window.indexedDB.open(this.databaseName, version);
  125.             openRequest.onupgradeneeded = (event) => {
  126.                 let database = event.target.result;
  127.                 let m = new Map();
  128.                 for (let name of database.objectStoreNames) m.set(name, { status: 1, keyPath: null });
  129.                 for (let info of storeInfos) {
  130.                     if (m.get(info.storeName)) m.set(info.storeName, { status: 2, keyPath: info.keyPath });
  131.                     else m.set(info.storeName, { status: 0, keyPath: info.keyPath });
  132.                 }
  133.                 for (let [name, info] of m) {
  134.                     if (info.status === 0) database.createObjectStore(name, { keyPath: info.keyPath });
  135.                     else if (info.status === 1) database.deleteObjectStore(name);
  136.                 }
  137.                 console.info('Database was created or upgraded.');
  138.             };
  139.             openRequest.onerror = (event) => { this.database = null; reject(`Failed to get database. (${event.target.error})`); };
  140.             openRequest.onsuccess = (event) => { this.database = event.target.result; resolve(null); };
  141.         });
  142.     },
  143.     isOpened() { return this.database !== null; },
  144.     getData(storeName, key) {
  145.         return new Promise((resolve, reject) => {
  146.             if (!this.isOpened()) { reject('Database is not loaded.'); return; }
  147.             let trans = this.database.transaction(storeName, 'readonly');
  148.             let getRequest = trans.objectStore(storeName).get(key);
  149.             getRequest.onerror = (event) => { reject(`Failed to get data. (${event.target.error})`); };
  150.             getRequest.onsuccess = (event) => {
  151.                 if (event.target.result) resolve(event.target.result);
  152.                 else resolve(null);
  153.             };
  154.         });
  155.     },
  156.     getAllMatchedData(storeName, filter) {
  157.         return new Promise((resolve, reject) => {
  158.             if (!this.isOpened()) { reject('Database is not loaded.'); return; }
  159.             let trans = this.database.transaction(storeName, 'readonly');
  160.             let cursorRequest = trans.objectStore(storeName).openCursor();
  161.             let res = [];
  162.             cursorRequest.onerror = (event) => { reject(`Failed to get cursor. (${event.target.error})`); };
  163.             cursorRequest.onsuccess = (event) => {
  164.                 let cursor = event.target.result;
  165.                 if (cursor) {
  166.                     if (filter(cursor.value)) res.push(cursor.value);
  167.                     cursor.continue();
  168.                 }
  169.                 else resolve(res);
  170.             };
  171.         });
  172.     },
  173.     setData(storeName, data) {
  174.         return new Promise((resolve, reject) => {
  175.             if (!this.isOpened()) { reject('Database is not loaded.'); return; }
  176.             let trans = this.database.transaction(storeName, 'readwrite');
  177.             let setRequest = trans.objectStore(storeName).put(data);
  178.             setRequest.onerror = (event) => { reject(`Failed to set data. (${event.target.error})`); };
  179.             setRequest.onsuccess = (event) => { resolve(null); };
  180.         });
  181.     },
  182.     deleteData(storeName, key) {
  183.         return new Promise((resolve, reject) => {
  184.             if (!this.isOpened()) { reject('Database is not loaded.'); return; }
  185.             let trans = this.database.transaction(storeName, 'readwrite');
  186.             let deleteRequest = trans.objectStore(storeName).delete(key);
  187.             deleteRequest.onerror = (event) => { reject(`Failed to delete data. (${event.target.error})`); };
  188.             deleteRequest.onsuccess = (event) => { resolve(null); };
  189.         });
  190.     },
  191. };
  192.  
  193. /* 設定や問題リストの読み込み・保存をするクラス */
  194. let Setting = function () {
  195.     this.problemList = null;
  196.     this.newTab = null;
  197.     this.lastRemove = null;
  198.     this.reverse = null;
  199.     this.atOnceSetting = null;
  200.     this.atOnce = {
  201.         begin: 0,
  202.         end: 0,
  203.     };
  204.     this.lang = null;
  205.     this.contestName = null;
  206.     this.contestCategory = null;
  207.     
  208.     this.db = new IDBManager(DB_NAME);
  209.     this.dbExists = false;
  210. };
  211. Setting.prototype = {
  212.     openDB: async function () {
  213.         try {
  214.             await this.db.openDatabase(STORE_INFO, DB_VERSION);
  215.         }
  216.         catch (err) {
  217.             console.warn('[AtCoder Listing Tasks] ' + err);
  218.         }
  219.         this.dbExists = this.db.isOpened();
  220.     },
  221.     requestList: function (contestName) {
  222.         return new Promise((resolve, reject) => {
  223.             let xhr = new XMLHttpRequest();
  224.             xhr.responseType = 'document';
  225.             xhr.onreadystatechange = function () {
  226.                 if (xhr.readyState === 4) {
  227.                     if (xhr.status === 200) {
  228.                         let result = $(xhr.responseXML);
  229.                         let problem_node = result.find('#contest-nav-tabs + .col-sm-12');
  230.                         let problem_list = problem_node.find('tbody tr');
  231.                         //問題リストを抽出して配列に格納
  232.                         let list = [];
  233.                         problem_list.each((idx, val) => {
  234.                             let td = $(val).children('td');
  235.                             list.push({
  236.                                 url: td[0].firstChild.getAttribute('href'),
  237.                                 diff: td[0].firstChild.textContent,
  238.                                 name: td[1].firstChild.textContent,
  239.                             });
  240.                         });
  241.                         resolve(list);
  242.                     }
  243.                     else {
  244.                         resolve(null);
  245.                     }
  246.                 }
  247.             };
  248.             //https://atcoder.jp/contests/***/tasksのページ情報をリクエスト
  249.             xhr.open('GET', `${CONTEST_URL}/${contestName}/tasks`, true);
  250.             xhr.send(null);
  251.         });
  252.     },
  253.     loadData: async function () {
  254.         if (this.dbExists) {
  255.             //データベースから情報を読み込む
  256.             let resArray = await Promise.all([
  257.                 this.db.getData(STORE_NAME.problemList, this.contestName),
  258.                 this.db.getData(STORE_NAME.option, 'newTab'),
  259.                 this.db.getData(STORE_NAME.option, 'lastRemove'),
  260.                 this.db.getData(STORE_NAME.option, 'atOnce'),
  261.                 this.db.getData(STORE_NAME.option, 'reverse')
  262.             ]);
  263.             let setTasks = [];
  264.             let now = Date.now();
  265.             //設定を格納
  266.             if (resArray[1] !== null) {
  267.                 this.newTab = resArray[1].value;
  268.             }
  269.             else {
  270.                 this.newTab = false;
  271.                 setTasks.push(this.db.setData(STORE_NAME.option, { name: 'newTab', value: this.newTab }));
  272.             }
  273.             if (resArray[2] !== null) {
  274.                 this.lastRemove = resArray[2].value;
  275.             }
  276.             else {
  277.                 this.lastRemove = now;
  278.                 setTasks.push(this.db.setData(STORE_NAME.option, { name: 'lastRemove', value: this.lastRemove }));
  279.             }
  280.             if (resArray[3] !== null) {
  281.                 this.atOnceSetting = resArray[3].value;
  282.             }
  283.             else {
  284.                 this.atOnceSetting = {};
  285.                 setTasks.push(this.db.setData(STORE_NAME.option, { name: 'atOnce', value: {} }));
  286.             }
  287.             if (resArray[4] !== null) {
  288.                 this.reverse = resArray[4].value;
  289.             }
  290.             else {
  291.                 this.reverse = false;
  292.                 setTasks.push(this.db.setData(STORE_NAME.option, { name: 'reverse', value: false }));
  293.             }
  294.             //問題リストを格納
  295.             if (resArray[0] !== null) {
  296.                 this.problemList = resArray[0].list;
  297.                 //lastAccessが現在時刻からACCESS_INTERVAL以上前なら更新する
  298.                 if (now - resArray[0].lastAccess >= ACCESS_INTERVAL) {
  299.                     setTasks.push(this.db.setData(STORE_NAME.problemList, { contestName: this.contestName, list: this.problemList, lastAccess: now }));
  300.                 }
  301.             }
  302.             else {
  303.                 this.problemList = await this.requestList(this.contestName);
  304.                 if (this.problemList !== null) {
  305.                     setTasks.push(this.db.setData(STORE_NAME.problemList, { contestName: this.contestName, list: this.problemList, lastAccess: now }));
  306.                 }
  307.             }
  308.             
  309.             //情報を更新
  310.             await Promise.all(setTasks);
  311.         }
  312.         else {
  313.             this.problemList = await this.requestList(this.contestName);
  314.             this.newTab = false;
  315.             this.lastRemove = null;
  316.             this.atOnceSetting = {};
  317.             this.reverse = false;
  318.         }
  319.     },
  320.     saveData: async function (name, value) {
  321.         if (!this.dbExists) {
  322.             return;
  323.         }
  324.         await this.db.setData(STORE_NAME.option, { name, value });
  325.     },
  326.     removeOldData: async function () {
  327.         if (!this.dbExists) {
  328.             return;
  329.         }
  330.         let now = Date.now();
  331.         if (now - this.lastRemove < REMOVE_INTERVAL) {
  332.             return;
  333.         }
  334.         //最終アクセスが現在時刻より一定以上前の問題リストを削除する
  335.         let oldData = await this.db.getAllMatchedData(STORE_NAME.problemList, (data) => { return now - data.lastAccess >= REMOVE_BASE; });
  336.         if (oldData.length !== 0) {
  337.             let deleteTasks = [];
  338.             for (let data of oldData) {
  339.                 deleteTasks.push(this.db.deleteData(STORE_NAME.problemList, data.contestName));
  340.             }
  341.             await Promise.all(deleteTasks);
  342.         }
  343.         //lastRemoveを更新する
  344.         this.lastRemove = now;
  345.         await this.db.setData(STORE_NAME.option, { name: 'lastRemove', value: this.lastRemove });
  346.     },
  347.     
  348.     getLanguage: function () {
  349.         this.lang = 'ja';
  350.         let content_language = $('meta[http-equiv="Content-Language"]');
  351.         if (content_language.length !== 0 && content_language.attr('content') === 'en') {
  352.             this.lang = 'en';
  353.         }
  354.     },
  355.     getContestName: function () {
  356.         this.contestName = window.location.href.split('/')[4];
  357.         //ハッシュ(#?)があれば取り除く
  358.         let hash = this.contestName.search(/[#\?]/);
  359.         if (hash !== -1) {
  360.             this.contestName = this.contestName.slice(0, hash);
  361.         }
  362.     },
  363.     getContestCategoryAndAtOnce: function () {
  364.         if (this.problemList === null) {
  365.             return;
  366.         }
  367.         //コンテストの種類を取得
  368.         let got = false;
  369.         if (!got) {
  370.             for (let category of CONTEST_REGULAR) {
  371.                 if (this.contestName.startsWith(category)) {
  372.                     this.contestCategory = category + '-' + (this.problemList.length).toString();
  373.                     got = true;
  374.                     break;
  375.                 }
  376.             }
  377.         }
  378.         if (!got) {
  379.             for (let category of CONTEST_PERMANENT) {
  380.                 if (this.contestName.startsWith(category)) {
  381.                     this.contestCategory = category;
  382.                     got = true;
  383.                     break;
  384.                 }
  385.             }
  386.         }
  387.         if (!got) {
  388.             this.contestCategory = 'other';
  389.         }
  390.         
  391.         //atOnceの設定
  392.         if (this.atOnceSetting[this.contestCategory]) {
  393.             this.atOnce = this.atOnceSetting[this.contestCategory];
  394.         }
  395.         else {
  396.             this.atOnce.begin = 0;
  397.             this.atOnce.end = Math.min(ATONCE_TAB_MAX - 1, this.problemList.length - 1);
  398.         }
  399.     },
  400. };
  401.  
  402. /* DOM操作およびスクリプト全体の動作を管理するクラス */
  403. let Launcher = function () {
  404.     this.setting = new Setting();
  405.     this.dropdownList = {
  406.         begin: null,
  407.         end: null,
  408.     };
  409.     this.listChanged = {
  410.         begin: true,
  411.         end: true,
  412.     };
  413.     this.isAll = true;
  414. };
  415. Launcher.prototype = {
  416.     loadSetting: async function () {
  417.         this.setting.getContestName();
  418.         await this.setting.openDB();
  419.         await this.setting.loadData();
  420.         this.setting.getLanguage();
  421.         this.setting.getContestCategoryAndAtOnce();
  422.     },
  423.     attachId: function () {
  424.         let tabs = $('#contest-nav-tabs');
  425.         if (tabs.length === 0) {
  426.             return false;
  427.         }
  428.         let tasks_tab = tabs.find('a[href$="tasks"]');
  429.         if (tasks_tab.length === 0) {
  430.             return false;
  431.         }
  432.         else {
  433.             tasks_tab.attr('id', `${ID_PREFIX}-tab`);
  434.             return true;
  435.         }
  436.     },
  437.     addCss: function () {
  438.         let style = $('<style>', { id: `${ID_PREFIX}-style`, html: CSS });
  439.         $('head').append(style);
  440.     },
  441.     changeToDropdown: function () {
  442.         let tasks_tab = $(`#${ID_PREFIX}-tab`);
  443.         tasks_tab.attr({
  444.             'class': 'dropdown-toggle',
  445.             'data-toggle': 'dropdown',
  446.             'href': '#',
  447.             'role': 'button',
  448.             'aria-haspopup': 'true',
  449.             'aria-expanded': 'false',
  450.         });
  451.         tasks_tab.append($('<span>', { class: 'caret' }));
  452.         tasks_tab.parent().append($('<ul>', { class: `dropdown-menu ${PRE}-dropdown` }));
  453.     },
  454.     addList: function () {
  455.         let dropdown_menu = $(`#${ID_PREFIX}-tab`).parent().children('.dropdown-menu');
  456.         
  457.         /* [問題一覧]の追加 */
  458.         let all_tasks = $('<a>', { href: `${CONTEST_URL}/${this.setting.contestName}/tasks` });
  459.         all_tasks.append($('<span>', { class: 'glyphicon glyphicon-list' }).attr('aria-hidden', 'true'));
  460.         all_tasks.append(document.createTextNode(' ' + TEXT.allTasks[this.setting.lang]));
  461.         //チェックボックスにチェックが付いていたら新しいタブで開く
  462.         all_tasks[0].addEventListener('click', { handleEvent: this.changeNewTabAttr, setting: this.setting });
  463.         dropdown_menu.append($('<li>').append(all_tasks));
  464.         
  465.         /* [まとめて開く]の追加 */
  466.         if (this.setting.problemList !== null) {
  467.             let at_once = $('<a>');
  468.             at_once.append($('<span>', { class: 'glyphicon glyphicon-sort-by-attributes-alt' }).attr('aria-hidden', 'true'));
  469.             at_once.append(document.createTextNode(' ' + TEXT.atOnce[this.setting.lang] + '...'));
  470.             at_once[0].addEventListener('click', (e) => {
  471.                 $(`#${ID_PREFIX}-modal`).modal('show');
  472.             });
  473.             dropdown_menu.append($('<li>').append(at_once));
  474.         }
  475.         
  476.         /* [新しいタブで開く]の追加 */
  477.         let label = $('<label>', { class: `${PRE}-label` });
  478.         label.css('color', all_tasks.css('color')); //[問題一覧]から色情報を取得
  479.         let checkbox = $('<input>', { type: 'checkbox', class: `${PRE}-checkbox` });
  480.         //チェックボックスはチェック状態をストレージと同期
  481.         checkbox.prop('checked', this.setting.newTab);
  482.         checkbox.on('click', (e) => {
  483.             this.setting.newTab = e.currentTarget.checked;
  484.             if (this.setting.dbExists) {
  485.                 this.setting.saveData('newTab', this.setting.newTab);
  486.             }
  487.         });
  488.         label.append(checkbox);
  489.         label.append(document.createTextNode(' ' + TEXT.newTab[this.setting.lang]));
  490.         dropdown_menu.prepend($('<li>').append(label));
  491.         //チェックボックスが押された場合はドロップダウンリストを非表示にしない
  492.         dropdown_menu.on('click', (e) => {
  493.             if (e.target === label[0]) {
  494.                 e.stopPropagation();
  495.             }
  496.         });
  497.         
  498.         /* 分割線の追加 */
  499.         dropdown_menu.append($('<li>', { class: 'divider' }));
  500.         
  501.         /* 各問題の追加 */
  502.         if (this.setting.problemList !== null) {
  503.             //リストを追加
  504.             for (let data of this.setting.problemList) {
  505.                 let a = $('<a>', { href: data.url, text: `${data.diff} - ${data.name}` });
  506.                 //チェックボックスにチェックが付いていたら新しいタブで開く
  507.                 a[0].addEventListener('click', { handleEvent: this.changeNewTabAttr, setting: this.setting });
  508.                 dropdown_menu.append($('<li>').append(a));
  509.             }
  510.         }
  511.         else {
  512.             //エラー情報を追加
  513.             let a = $('<a>', { text: TEXT.loadingFailed[this.setting.lang] });
  514.             dropdown_menu.append($('<li>').append(a));
  515.         }
  516.     },
  517.     changeNewTabAttr: function (e) {
  518.         let a = e.currentTarget;
  519.         if (this.setting.newTab) {
  520.             a.target = '_blank';
  521.             a.rel = 'noopener noreferrer';
  522.         }
  523.         else {
  524.             a.target = '_self';
  525.             a.rel = '';
  526.         }
  527.     },
  528.     
  529.     addModal: function () {
  530.         if (this.setting.problemList === null) {
  531.             return;
  532.         }
  533.         let modal = $('<div>', { id: `${ID_PREFIX}-modal`, class: 'modal fade', tabindex: '-1', role: 'dialog' });
  534.         
  535.         /* header */
  536.         let header = $('<div>', { class: 'modal-header' });
  537.         let x = $('<button>', { type: 'button', class: 'close', 'data-dismiss': 'modal', 'aria-label': 'Close' });
  538.         x.append($('<span>', { 'aria-hidden': true, text: '×' }));
  539.         header.append(x);
  540.         header.append($('<h4>', { class: 'modal-title', text: TEXT.atOnce[this.setting.lang] }));
  541.         
  542.         /* body */
  543.         let body = $('<div>', { class: 'modal-body' });
  544.         body.append($('<p>', { text: TEXT.modalDiscription[this.setting.lang] }));
  545.         let modalInfo = $('<p>');
  546.         
  547.         let option = $('<div>', { class: `${PRE}-option` });
  548.         
  549.         //ラジオボタン
  550.         let all = $('<div>', { class: `${PRE}-flex ${PRE}-select-all` });
  551.         let specify = $('<div>', { class: `${PRE}-flex ${PRE}-select-specify` });
  552.         let label_all = $('<label>', { class: `${PRE}-label-radio` });
  553.         let radio_all = $('<input>', { type: 'radio', name: 'open-type' });
  554.         let label_specify = label_all.clone(true);
  555.         let radio_specify = radio_all.clone(true);
  556.         
  557.         if (this.setting.atOnce.begin === 0 && this.setting.atOnce.end === this.setting.problemList.length - 1) {
  558.             this.isAll = true;
  559.         }
  560.         else {
  561.             this.isAll = false;
  562.         }
  563.         radio_all.prop('checked', this.isAll);
  564.         radio_specify.prop('checked', !this.isAll);
  565.         label_all.append(radio_all, document.createTextNode(TEXT.all[this.setting.lang]));
  566.         label_specify.append(radio_specify, document.createTextNode(TEXT.specify[this.setting.lang] + ':'));
  567.         let caution = $('<span>', { class: `${PRE}-caution` });
  568.         if (this.setting.problemList.length > ATONCE_TAB_MAX) {
  569.             radio_all.prop('disabled', true);
  570.             label_all.addClass(`${PRE}-disabled`);
  571.             caution.text(TEXT.caution[this.setting.lang]);
  572.         }
  573.         all.append($('<div>', { class: `radio ${PRE}-radio` }).append(label_all, caution));
  574.         specify.append($('<div>', { class: `radio ${PRE}-radio` }).append(label_specify));
  575.         
  576.         //[範囲を選択]用のドロップダウン
  577.         let select_begin = $('<div>', { class: `btn-group` });
  578.         let begin_button = $('<button>', { class: `btn btn-default dropdown-toggle ${PRE}-toggle`, 'data-toggle': 'dropdown', 'aria-expanded': 'false', text: 'A', disabled: this.isAll });
  579.         begin_button.append($('<span>', { class: `caret ${PRE}-caret` }));
  580.         let begin_list = $('<ul>', { class: `dropdown-menu ${PRE}-list` });
  581.         $.each(this.setting.problemList, (idx, data) => {
  582.             begin_list.append($('<li>').append($('<a>', { text: `${data.diff} - ${data.name}`, 'data-index': (idx).toString() })));
  583.         });
  584.         select_begin.append(begin_button, begin_list);
  585.         
  586.         let select_end = select_begin.clone(true);
  587.         let end_list = select_end.find('ul');
  588.         let end_button = select_end.find('button');
  589.         let between = $('<span>', { text: '−', class: `${PRE}-between` });
  590.         
  591.         //初期表示の設定
  592.         begin_button.html(`${this.setting.problemList[this.setting.atOnce.begin].diff}<span class="caret ${PRE}-caret"></span>`);
  593.         end_button.html(`${this.setting.problemList[this.setting.atOnce.end].diff}<span class="caret ${PRE}-caret"></span>`);
  594.         this.dropdownList.begin = begin_list.find('a');
  595.         this.dropdownList.end = end_list.find('a');
  596.         this.dropdownList.begin.eq(this.setting.atOnce.begin).addClass(`${PRE}-target`);
  597.         this.dropdownList.end.eq(this.setting.atOnce.end).addClass(`${PRE}-target`);
  598.         this.setModalInfo(modalInfo, this.setting, this.isAll);
  599.         
  600.         //ラジオボタンを切り替えたときの動作
  601.         radio_all.on('change', (e) => {
  602.             this.isAll = true;
  603.             begin_button.prop('disabled', true);
  604.             end_button.prop('disabled', true);
  605.             between.addClass(`${PRE}-disabled`);
  606.             this.setModalInfo(modalInfo, this.setting, this.isAll);
  607.         });
  608.         radio_specify.on('change', (e) => {
  609.             this.isAll = false;
  610.             begin_button.prop('disabled', false);
  611.             end_button.prop('disabled', false);
  612.             between.removeClass(`${PRE}-disabled`);
  613.             this.setModalInfo(modalInfo, this.setting, this.isAll);
  614.         });
  615.         
  616.         //リストを開いたときの動作
  617.         select_begin.on('shown.bs.dropdown', (e) => {
  618.             if (this.listChanged.begin) {
  619.                 begin_list.scrollTop(26 * (this.setting.atOnce.begin - 2));
  620.                 this.listChanged.begin = false;
  621.             }
  622.         });
  623.         select_end.on('shown.bs.dropdown', (e) => {
  624.             if (this.listChanged.end) {
  625.                 end_list.scrollTop(26 * (this.setting.atOnce.end - 2));
  626.                 this.listChanged.end = false;
  627.             }
  628.         });
  629.         
  630.         //リストで選択したときの動作
  631.         begin_list[0].addEventListener('click', { handleEvent: this.changeRange, that: this, begin_button, end_button, modalInfo, isBegin: true });
  632.         end_list[0].addEventListener('click', { handleEvent: this.changeRange, that: this, begin_button, end_button, modalInfo, isBegin: false });
  633.         
  634.         specify.append(select_begin, between, select_end);
  635.         
  636.         //[逆順で開く]チェックボックス
  637.         let reverse = $('<div>', { class: 'checkbox' });
  638.         let label_reverse = $('<label>');
  639.         let check_reverse = $('<input>', { type: 'checkbox', name: 'reverse' });
  640.         check_reverse.prop('checked', this.setting.reverse);
  641.         check_reverse.on('click', (e) => {
  642.             this.setting.reverse = e.currentTarget.checked;
  643.         });
  644.         label_reverse.append(check_reverse, document.createTextNode(TEXT.reverse[this.setting.lang]));
  645.         reverse.append(label_reverse);
  646.         
  647.         //組み立て
  648.         option.append(all, specify, reverse);
  649.         body.append(option);
  650.         body.append(modalInfo);
  651.         
  652.         /* footer */
  653.         let footer = $('<div>', { class: 'modal-footer' });
  654.         let cancel = $('<button>', { type: 'button', class: 'btn btn-default', 'data-dismiss': 'modal', text: TEXT.cancel[this.setting.lang] });
  655.         let open = $('<button>', { type: 'button', class: 'btn btn-primary', text: TEXT.atOnce[this.setting.lang] });
  656.         open.on('click', (e) => {
  657.             //設定を保存
  658.             this.setting.saveData('reverse', this.setting.reverse);
  659.             if (this.setting.contestCategory !== 'other') {
  660.                 this.setting.atOnceSetting[this.setting.contestCategory] = {};
  661.                 if (this.isAll) {
  662.                     this.setting.atOnceSetting[this.setting.contestCategory].begin = 0;
  663.                     this.setting.atOnceSetting[this.setting.contestCategory].end = this.setting.problemList.length - 1;
  664.                 }
  665.                 else {
  666.                     this.setting.atOnceSetting[this.setting.contestCategory] = this.setting.atOnce;
  667.                 }
  668.                 this.setting.saveData('atOnce', this.setting.atOnceSetting);
  669.             }
  670.             
  671.             //タブを開く
  672.             let blank = window.open('about:blank'); //ポップアップブロック用
  673.             let idx = null;
  674.             if (this.isAll) {
  675.                 if (!this.setting.reverse) {
  676.                     idx = 0;
  677.                     while (idx <= this.setting.problemList.length - 1) {
  678.                         window.open(this.setting.problemList[idx].url, '_blank', 'noopener, noreferrer');
  679.                         ++idx;
  680.                     }
  681.                 }
  682.                 else {
  683.                     idx = this.setting.problemList.length - 1;
  684.                     while (idx >= 0) {
  685.                         window.open(this.setting.problemList[idx].url, '_blank', 'noopener, noreferrer');
  686.                         --idx;
  687.                     }
  688.                 }
  689.             }
  690.             else {
  691.                 if (!this.setting.reverse) {
  692.                     idx = this.setting.atOnce.begin;
  693.                     while (idx <= this.setting.atOnce.end) {
  694.                         window.open(this.setting.problemList[idx].url, '_blank', 'noopener, noreferrer');
  695.                         ++idx;
  696.                     }
  697.                 }
  698.                 else {
  699.                     idx = this.setting.atOnce.end;
  700.                     while (idx >= this.setting.atOnce.begin) {
  701.                         window.open(this.setting.problemList[idx].url, '_blank', 'noopener, noreferrer');
  702.                         --idx;
  703.                     }
  704.                 }
  705.             }
  706.             modal.modal('hide');
  707.             blank.close();
  708.         });
  709.         footer.append(cancel, open);
  710.         
  711.         /* モーダルウィンドウを追加 */
  712.         let dialog = $('<div>', { class: 'modal-dialog', role: 'document' });
  713.         let content = $('<div>', { class: 'modal-content' });
  714.         content.append(header, body, footer);
  715.         modal.append(dialog.append(content));
  716.         $('#main-div').before(modal);
  717.     },
  718.     changeRange: function (e) {
  719.         if (e.target.tagName !== 'A') {
  720.             return;
  721.         }
  722.         let atOnce = this.that.setting.atOnce;
  723.         let idx = Number($(e.target).attr('data-index'));
  724.         if (this.isBegin) {
  725.             this.that.changeSelect(this.that, this.begin_button, idx, true);
  726.             if (atOnce.end < atOnce.begin) {
  727.                 this.that.changeSelect(this.that, this.end_button, idx, false);
  728.             }
  729.             else if (atOnce.end >= atOnce.begin + ATONCE_TAB_MAX) {
  730.                 this.that.changeSelect(this.that, this.end_button, idx + ATONCE_TAB_MAX - 1, false);
  731.             }
  732.         }
  733.         else {
  734.             this.that.changeSelect(this.that, this.end_button, idx, false);
  735.             if (atOnce.begin > atOnce.end) {
  736.                 this.that.changeSelect(this.that, this.begin_button, idx, true);
  737.             }
  738.             if (atOnce.begin <= atOnce.end - ATONCE_TAB_MAX) {
  739.                 this.that.changeSelect(this.that, this.begin_button, idx - ATONCE_TAB_MAX + 1, true);
  740.             }
  741.         }
  742.         this.that.setModalInfo(this.modalInfo, this.that.setting, this.that.isAll);
  743.     },
  744.     changeSelect: function (that, button, idx, isBegin) {
  745.         let problemList = that.setting.problemList;
  746.         let atOnce = that.setting.atOnce;
  747.         let dropdownList = that.dropdownList;
  748.         if (isBegin) {
  749.             dropdownList.begin.eq(atOnce.begin).removeClass(`${PRE}-target`);
  750.             atOnce.begin = idx;
  751.             dropdownList.begin.eq(idx).addClass(`${PRE}-target`);
  752.             that.listChanged.begin = true;
  753.         }
  754.         else {
  755.             dropdownList.end.eq(atOnce.end).removeClass(`${PRE}-target`);
  756.             atOnce.end = idx;
  757.             dropdownList.end.eq(idx).addClass(`${PRE}-target`);
  758.             that.listChanged.end = true;
  759.         }
  760.         button.html(`${problemList[idx].diff}<span class="caret ${PRE}-caret"></span>`);
  761.     },
  762.     setModalInfo: function (modalInfo, setting, isAll) {
  763.         let text = '';
  764.         if (isAll) {
  765.             text += (setting.problemList.length).toString();
  766.             text += ' ';
  767.             if (setting.problemList.length === 1) {
  768.                 text += TEXT.aTab[setting.lang];
  769.             }
  770.             else {
  771.                 text += TEXT.tabs[setting.lang];
  772.             }
  773.         }
  774.         else {
  775.             text += (setting.atOnce.end - setting.atOnce.begin + 1).toString();
  776.             text += ' ';
  777.             if (setting.atOnce.end === setting.atOnce.begin) {
  778.                 text += TEXT.aTab[setting.lang];
  779.             }
  780.             else {
  781.                 text += TEXT.tabs[setting.lang];
  782.             }
  783.         }
  784.         text += TEXT.modalInfo[setting.lang];
  785.         modalInfo.text(text);
  786.     },
  787.     
  788.     launch: async function () {
  789.         let tabExists = this.attachId();
  790.         //[問題]タブがない場合は終了
  791.         if (!tabExists) {
  792.             console.log('[AtCoder Listing Tasks] [Tasks] Tab isn\'t exist.');
  793.             return;
  794.         }
  795.         
  796.         await this.loadSetting();
  797.         this.addCss();
  798.         this.changeToDropdown();
  799.         this.addList();
  800.         
  801.         this.addModal();
  802.         
  803.         await this.setting.removeOldData();
  804.         
  805.         if (this.setting.problemList !== null) {
  806.             console.log('[AtCoder Listing Tasks] Succeeded!');
  807.         }
  808.         else {
  809.             console.warn('[AtCoder Listing Tasks] Failed...');
  810.         }
  811.     },
  812. };
  813.  
  814. /* スクリプトを実行 */
  815. let launcher = new Launcher();
  816. launcher.launch();
  817.  
  818. })();