MOXBOX ウィジェット

Takami Torao Bootstrap 5.0 jQuery 3.6 MathJax 2
  • このエントリーをはてなブックマークに追加

概要

この MOXBOX で JavaScript や CSS (あるいはサーバサイドの XSLT や REST API など) で実装されたウィジェットおよびツールが正しく機能することを確認するためのページである。このサイトの作者以外には特に有用なものではないが、何かの参考にはなるかも知れない。

Table of Contents

  1. 概要
  2. Foldable Prompts

Foldable Prompts

目的: コマンドプロンプトでの一連の作業を記述するために使用する。ここで冗長な出力はデフォルトでは非表示にできる。ただし、Accordion のように完全に非表示にするだけではなく、指定した先頭行/末尾行をデフォルトで表示する「半開き」表示ができる。左にシェブロンマークのある行でアクションすると出力部の開閉ができる。

記述: 一連のプロンプト記述を <dl> とし、個々のプロンプト入力および出力のペアをそれぞれ <dt><dd> で記述する。<dt>, <dd> は直下に単一の <pre> を配置する必要がある。

<dd> の初期状態の開閉はクラスに collapsed (閉じた状態) か abridged (縮約状態) を指定する。abridged を指定した場合、data-mox-heads または data-mox-tails 属性を併用する必要がある。

<dl class="foldable-prompts">
  <dt><pre>$ curl -s -D - -o /dev/null https://hazm.at/index.html</pre></dt>
  <dd><pre>HTTP/1.1 200 OK
Date: Thu, 16 Feb 2023 18:39:44 GMT
Server: HazMat Server/1.2.7 Finagle/22.1.0_20220113-213812
Content-Type: text/html
Last-Modified: Fri, 17 Jul 2020 02:40:06 GMT
Content-Length: 7059
Vary: Accept-Encoding</pre></dd>
</dl>
$ curl -s -D - -o /dev/null https://hazm.at/index.html
HTTP/1.1 200 OK
Date: Thu, 16 Feb 2023 18:39:44 GMT
Server: HazMat Server/1.2.7 Finagle/22.1.0_20220113-213812
Content-Type: text/html
Last-Modified: Fri, 17 Jul 2020 02:40:06 GMT
Content-Length: 7059
Vary: Accept-Encoding

<dt> または <dd>collapsed クラスを指定するとデフォルトで閉じた状態で表示される。

<dl class="foldable-prompts">
  <dt><pre>$ curl -s -D - -o /dev/null https://hazm.at/index.html</pre></dt>
  <dd class="collapsed"><pre>HTTP/1.1 200 OK
Date: Thu, 16 Feb 2023 18:39:44 GMT
Server: HazMat Server/1.2.7 Finagle/22.1.0_20220113-213812
Content-Type: text/html
Last-Modified: Fri, 17 Jul 2020 02:40:06 GMT
Content-Length: 7059
Vary: Accept-Encoding</pre></dd>
</dl>
$ curl -s -D - -o /dev/null https://hazm.at/index.html

data-mox-heads, data-mox-tails, data-mox-ellipsis を指定して完全に閉じていない半開きを使用することができる。data-mox-ellipsis には HTML を指定できる。<pre> 直後の空行や </pre> 直前の空行も 1 行として扱われることに注意。

<dl class="foldable-prompts">
  <dt><pre>$ curl -s -D - -o /dev/null https://hazm.at/index.html</pre></dt>
  <dd class="abridged" data-mox-heads="2" data-mox-tails="1" data-mox-ellipsis="⌛"><pre>HTTP/1.1 200 OK
Date: Thu, 16 Feb 2023 18:39:44 GMT
Server: HazMat Server/1.2.7 Finagle/22.1.0_20220113-213812
Content-Type: text/html
Last-Modified: Fri, 17 Jul 2020 02:40:06 GMT
Content-Length: 7059
Vary: Accept-Encoding</pre></dd>
</dl>
$ curl -s -D - -o /dev/null https://hazm.at/index.html
HTTP/1.1 200 OK
Date: Thu, 16 Feb 2023 18:39:44 GMT
Server: HazMat Server/1.2.7 Finagle/22.1.0_20220113-213812
Content-Type: text/html
Last-Modified: Fri, 17 Jul 2020 02:40:06 GMT
Content-Length: 7059
Vary: Accept-Encoding

以下は様々な状況でのテスト。

$ cat main.rs
fn main() {
    let mut values = vec![1, 2, 3, 4];

    for value in &values {
        println!("value = {}", value);
    }

    if values.len() > 5 {
        println!("List is longer than five items");
    }

    // Pattern matching
    match values.len() {
        0 => println!("Empty"),
        1 => println!("One value"),
        2..=10 => println!("Between two and ten values"),
        11 => println!("Eleven values"),
        _ => println!("Many values"),
    };

    // while loop with predicate and pattern matching using let
    while let Some(value) = values.pop() {
        println!("value = {value}"); // using curly braces to format a local variable
    }
}
$ cat main.rs; data-mox-heads="2" data-mox-tails="2"
fn main() {
    let mut values = vec![1, 2, 3, 4];

    for value in &values {
        println!("value = {}", value);
    }

    if values.len() > 5 {
        println!("List is longer than five items");
    }

    // Pattern matching
    match values.len() {
        0 => println!("Empty"),
        1 => println!("One value"),
        2..=10 => println!("Between two and ten values"),
        11 => println!("Eleven values"),
        _ => println!("Many values"),
    };

    // while loop with predicate and pattern matching using let
    while let Some(value) = values.pop() {
        println!("value = {value}"); // using curly braces to format a local variable
    }
}
$ cat main.rs; data-mox-tails="2"
fn main() {
    let mut values = vec![1, 2, 3, 4];

    for value in &values {
        println!("value = {}", value);
    }

    if values.len() > 5 {
        println!("List is longer than five items");
    }

    // Pattern matching
    match values.len() {
        0 => println!("Empty"),
        1 => println!("One value"),
        2..=10 => println!("Between two and ten values"),
        11 => println!("Eleven values"),
        _ => println!("Many values"),
    };

    // while loop with predicate and pattern matching using let
    while let Some(value) = values.pop() {
        println!("value = {value}"); // using curly braces to format a local variable
    }
}
$ cat main.rs; data-mox-heads="2"
fn main() {
    let mut values = vec![1, 2, 3, 4];

    for value in &values {
        println!("value = {}", value);
    }

    if values.len() > 5 {
        println!("List is longer than five items");
    }

    // Pattern matching
    match values.len() {
        0 => println!("Empty"),
        1 => println!("One value"),
        2..=10 => println!("Between two and ten values"),
        11 => println!("Eleven values"),
        _ => println!("Many values"),
    };

    // while loop with predicate and pattern matching using let
    while let Some(value) = values.pop() {
        println!("value = {value}"); // using curly braces to format a local variable
    }
}
$ cat main.rs; data-mox-heads="0" data-mox-tails="0"
fn main() {
    let mut values = vec![1, 2, 3, 4];

    for value in &values {
        println!("value = {}", value);
    }

    if values.len() > 5 {
        println!("List is longer than five items");
    }

    // Pattern matching
    match values.len() {
        0 => println!("Empty"),
        1 => println!("One value"),
        2..=10 => println!("Between two and ten values"),
        11 => println!("Eleven values"),
        _ => println!("Many values"),
    };

    // while loop with predicate and pattern matching using let
    while let Some(value) = values.pop() {
        println!("value = {value}"); // using curly braces to format a local variable
    }
}
$ cat main.rs; data-mox-heads="6" data-mox-tails="3" data-mox-ellipsis="&lt;b&gt;    /* ... */&lt;/b&gt;"
fn main() {
    let mut values = vec![1, 2, 3, 4];

    for value in &values {
        println!("value = {}", value);
    }

    if values.len() > 5 {
        println!("List is longer than five items");
    }

    // Pattern matching
    match values.len() {
        0 => println!("Empty"),
        1 => println!("One value"),
        2..=10 => println!("Between two and ten values"),
        11 => println!("Eleven values"),
        _ => println!("Many values"),
    };

    // while loop with predicate and pattern matching using let
    while let Some(value) = values.pop() {
        println!("value = {value}"); // using curly braces to format a local variable
    }
}
$ cat main.rs; data-mox-heads="24"
fn main() {
    let mut values = vec![1, 2, 3, 4];

    for value in &values {
        println!("value = {}", value);
    }

    if values.len() > 5 {
        println!("List is longer than five items");
    }

    // Pattern matching
    match values.len() {
        0 => println!("Empty"),
        1 => println!("One value"),
        2..=10 => println!("Between two and ten values"),
        11 => println!("Eleven values"),
        _ => println!("Many values"),
    };

    // while loop with predicate and pattern matching using let
    while let Some(value) = values.pop() {
        println!("value = {value}"); // using curly braces to format a local variable
    }
}
$ cat main.rs; data-mox-tails="24"
fn main() {
    let mut values = vec![1, 2, 3, 4];

    for value in &values {
        println!("value = {}", value);
    }

    if values.len() > 5 {
        println!("List is longer than five items");
    }

    // Pattern matching
    match values.len() {
        0 => println!("Empty"),
        1 => println!("One value"),
        2..=10 => println!("Between two and ten values"),
        11 => println!("Eleven values"),
        _ => println!("Many values"),
    };

    // while loop with predicate and pattern matching using let
    while let Some(value) = values.pop() {
        println!("value = {value}"); // using curly braces to format a local variable
    }
}
$ cat main.rs; data-mox-heads="25"
fn main() {
    let mut values = vec![1, 2, 3, 4];

    for value in &values {
        println!("value = {}", value);
    }

    if values.len() > 5 {
        println!("List is longer than five items");
    }

    // Pattern matching
    match values.len() {
        0 => println!("Empty"),
        1 => println!("One value"),
        2..=10 => println!("Between two and ten values"),
        11 => println!("Eleven values"),
        _ => println!("Many values"),
    };

    // while loop with predicate and pattern matching using let
    while let Some(value) = values.pop() {
        println!("value = {value}"); // using curly braces to format a local variable
    }
}
$ cat main.rs; data-mox-tails="25"
fn main() {
    let mut values = vec![1, 2, 3, 4];

    for value in &values {
        println!("value = {}", value);
    }

    if values.len() > 5 {
        println!("List is longer than five items");
    }

    // Pattern matching
    match values.len() {
        0 => println!("Empty"),
        1 => println!("One value"),
        2..=10 => println!("Between two and ten values"),
        11 => println!("Eleven values"),
        _ => println!("Many values"),
    };

    // while loop with predicate and pattern matching using let
    while let Some(value) = values.pop() {
        println!("value = {value}"); // using curly braces to format a local variable
    }
}
$ cat main.rs; data-mox-heads="65535"
fn main() {
    let mut values = vec![1, 2, 3, 4];

    for value in &values {
        println!("value = {}", value);
    }

    if values.len() > 5 {
        println!("List is longer than five items");
    }

    // Pattern matching
    match values.len() {
        0 => println!("Empty"),
        1 => println!("One value"),
        2..=10 => println!("Between two and ten values"),
        11 => println!("Eleven values"),
        _ => println!("Many values"),
    };

    // while loop with predicate and pattern matching using let
    while let Some(value) = values.pop() {
        println!("value = {value}"); // using curly braces to format a local variable
    }
}