☰

AtCoder Listing Tasks

Click on the "Tasks" tab to open a drop-down list that takes you to the page for each problem in the contest.

As of 2023-07-30. See the latest version.

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