您需要先安装一个扩展,例如 篡改猴、Greasemonkey 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 Userscripts ,之后才能安装此脚本。
您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。
您需要先安装用户脚本管理器扩展后才能安装此脚本。
入力形式やサンプルを横並びにします。
当前为
您需要先安装一个扩展,例如 篡改猴、Greasemonkey 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 Userscripts ,之后才能安装此脚本。
您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。
您需要先安装用户脚本管理器扩展后才能安装此脚本。
- // ==UserScript==
- // @name AtCoder Efficient Layout
- // @namespace https://atcoder.jp/
- // @version 0.1
- // @description 入力形式やサンプルを横並びにします。
- // @author magurofly
- // @match https://atcoder.jp/contests/*/tasks/*
- // @icon https://www.google.com/s2/favicons?sz=64&domain=atcoder.jp
- // @grant unsafeWindow
- // @license CC0-1.0 Universal
- // ==/UserScript==
- (function() {
- 'use strict';
- const ioStyleSummary = "入出力形式";
- const sampleWidth = 60;
- const sampleWidthUnit = "vw";
- const sampleMargin = "0 1em";
- const sampleSummary = "入出力例";
- const doc = unsafeWindow.document;
- // 入出力形式より後にある hr を全部消す
- for (const hr of doc.querySelectorAll(".io-style ~ hr")) {
- hr.parentElement.removeChild(hr);
- }
- // 入出力形式より後にある .part を取得(入出力例のはず)
- const samples = doc.querySelectorAll(".io-style ~ .part");
- const lazyContainer = parentElement => {
- let row = parentElement.querySelector(".samples-row");
- if (!row) {
- const container = newDetails(sampleSummary);
- container.className = "samples-container";
- parentElement.appendChild(container);
- row = doc.createElement("div");
- row.className = "samples-row";
- container.appendChild(row);
- }
- return row;
- };
- if (samples.length % 2 == 0) {
- // 偶数個なら 2 個ずつまとめて横並びにする
- for (let i = 0; i < samples.length; i += 2) {
- const input = samples[i];
- const output = samples[i + 1];
- const container = lazyContainer(input.parentElement, "samples-container");
- const col = doc.createElement("div");
- col.appendChild(input.parentElement.removeChild(input));
- col.appendChild(output.parentElement.removeChild(output));
- container.appendChild(col);
- }
- } else {
- // 奇数個ならまとめずに横並びにする
- for (let i = 0; i < samples.length; i += 2) {
- const element = samples[i];
- const container = lazyContainer(element.parentElement, "samples-container");
- container.appendChild(element.parentElement.removeChild(element));
- }
- }
- const sampleCount = doc.getElementsByClassName("samples-container")[0].children.length;
- // 入出力形式を details に入れる
- const ioStyle = doc.querySelector(".io-style");
- const ioStyleDetails = newDetails(ioStyleSummary);
- ioStyle.parentElement.insertBefore(ioStyleDetails, ioStyle);
- ioStyleDetails.appendChild(ioStyle.parentElement.removeChild(ioStyle));
- const globalCSS = `
- /* 入出力形式を横に並べる */
- .io-style {
- display: flex;
- justify-content: space-between;
- }
- .io-style > * {
- width: 100%;
- }
- /* サンプルを横に並べる */
- .samples-container {
- width: 100%;
- overflow-x: auto;
- }
- .samples-row {
- display: flex;
- width: ${sampleWidth * sampleCount}${sampleWidthUnit};
- }
- .samples-row > * {
- width: ${sampleWidth}${sampleWidthUnit};
- margin: ${sampleMargin};
- }
- `;
- doc.head.appendChild(document.createElement("style")).textContent = globalCSS;
- function newDetails(summaryText, open = true) {
- const details = doc.createElement("details");
- details.open = open;
- const summary = doc.createElement("summary");
- summary.textContent = summaryText;
- details.appendChild(summary);
- return details;
- }
- })();