自作プラグイン/switch の変更点

追加された行はこの色です。
削除された行はこの色です。
自作プラグイン/switch へ行く。
自作プラグイン/switch の差分を削除
#author("2024-09-09T22:46:53+09:00","default:kanateko","kanateko")
#author("2025-02-08T14:02:46+09:00;2024-09-09T22:46:53+09:00","default:kanateko","kanateko")
&tag(プラグイン,自作,追加);

#ref(switch.webp,center,wrap,500x)

#contentsx

*操作によって表示内容を切り替えるプラグイン [#summary]

#infobox(plugin){{
name = switch
ver = 1.0.1
pukiwiki = 1.5.4
update = 2024-09-09
}}

inputのrangeやselectで選択した値に応じ、同じグループに属する他の要素の表示を切り替える。同一ページ内に複数のグループを設置して別々に操作することが可能。

[[selectプラグイン>../select]]の拡張版であり、変則的な[[tabプラグイン>../tab]]とも言える。

#box(label,label-style=full,box-color=blue,title=このプラグインでできること){{
-ユーザーが選択した値に応じ、同じグループに属する他の要素の表示を切り替える。
--操作にはinputのrangeかselectが使える。
--複数グループを同一ページ内に配置可能。
--インライン型で文中やテーブル内に配置したり、ブロック型で段落丸ごと表示を切り替えたりできる。
---ブロック型ではマルチラインプラグインの入れ子も可能。
}}

#clear

*ダウンロード [#download]
最新: [[GitHub>https://github.com/kanateko/pukiwiki-plugin]]

|~日付|~バージョン|~備考|h
|CENTER:120|CENTER:60|590|c
|2024-09-09|1.0.1|#ul(マルチライン内のテーブルが正しく変換されない問題を修正)|
|2024-08-25|1.0.0|#ul(初版作成)|

*セットアップ [#setup]
+ダウンロードした「plugin-switch」の中身 (skinフォルダとpluginフォルダ) をPukiWikiのディレクトリに放り込む。
+pukiwiki.ini.phpを編集してマルチラインプラグインを許可する。

#prism(diff-php diff-highlight){{
- define('PKWKEXP_DISABLE_MULTILINE_PLUGIN_HACK', 1); // 1 = Disabled
+ define('PKWKEXP_DISABLE_MULTILINE_PLUGIN_HACK', 0); // 1 = Disabled
}}

*プラグイン設定 [#setting]
#style(word-break:break-all;,class=table_compact){{{
#tableif(^(int|\d+)$=COLOR(#62bf4b),^string|'$|DIR \.=COLOR(#cb643d),^(bool|true|false)$=COLOR(#463dcb),^(array|\[.+\])$=COLOR(#ec91ed)){{
|~グローバル&br;(PLUGIN_SWITCH_~)|~型|~初期値|~説明|h
|BOLD:BGCOLOR(--table-header-td-color):180|CENTER:80|220||c
|CSS|string|SKIN_DIR . 'css/switch.min.css'|CSSのパス|
|JS|string|SKIN_DIR . 'js/switch.min.js'|JSのパス|
|>|>|>|BGCOLOR(--color-key):COLOR(white):~PluginSwitchBaseクラス (インライン)|
|DEFAULT_CLASS|string|'plugin-switch'|デフォルトのクラス名|
|DEFAULT_GROUP|string|'default'|デフォルトのグループ名|
|DEFAULT_HTML_TAG|string|'span'|表示タイプdefaultで使用するHTMLタグ|
|DEFAULT_SEPARATOR|string|':'|デフォルトのセパレータ (表示要素の切り分け)|
|DEFAULT_TYPE|string|'default'|デフォルトの表示タイプ|
|DEFAULT_RANGE_ATTRS|array|[1, 10, 1]|デフォルトのrangeスライダーの属性 (min, max, step)|
|>|>|>|BGCOLOR(--color-key):COLOR(white):~PluginSwitchMLクラス (ブロック)|
|DEFAULT_HTML_TAG|string|'div'|表示タイプdefaultで使用するHTMLタグ|
|DEFAULT_SEPARATOR|string|'#-'|デフォルトのセパレータ (表示要素の切り分け)|
}}
}}}

*使用方法 [#usage]
 &switch([オプション]){ 表示要素1 : 表示要素2 : 表示要素3 : ... };
 
 #switch([オプション]){{
 表示要素1
 #-
 表示要素2
 #-
 表示要素3
 #-
 ︙
 }}

基本的な使い方は上のようになるが、表示形式にrangeを指定した場合のみ表示要素の書き方が異なる。

 &switch(range){ [min] : [max] : [step] };
 
 例：&switch(range){ 1 : 5 : 1 }; // 1から5まで1ずつ進む

**オプション [#option]
#box(label,title=共通){{
:group =|グループ名。指定しない場合はデフォルトのグループ名が適用される。また、全てのオプションに当てはなまらない引数もグループ名として認識される。
:type =|表示形式。defaultで通常表示 (span/div) 、rangeでスライダー、selectでプルダウンになる。指定しない場合はデフォルト設定が適用される。rangeとselectは"type="なしでも指定できる。
:start = |初期状態で表示する要素の番号。1から始まる。指定する場合はグループ名の指定よりも後で指定し、また同グループで最初のプラグイン内で指定する必要がある。
:eparator =|表示要素を切り分けるためのセパレータを変更する。表示要素内に":" (コロン) を使いたい時用。
:separator =|表示要素を切り分けるためのセパレータを変更する。表示要素内に":" (コロン) を使いたい時用。
:label =|rangeとselectの左にラベルを表示する。deufaultでは無視される。
:class =|追加のクラス名を指定する。現状ラベルやrangeの数字表示には適用されない。
}}

#box(label,title=rangeで有効){{
:slider-width =|スライダーの幅 (長さ) を数字で指定する。単位がない場合はpx扱い。
}}

#box(label,title=selectで有効){{
:transparent|プルダウンの枠や背景を透明にする。
:rtl|プルダウン内のテキスト表示を右から開始させる。どうしてもテキスト (主に数字) を右寄せにしたい時用。
:disable|プルダウンを操作不能にする。
}}


*使用例 [#example]
#tab{{{{
#:表示
&switch(test,range,start=2,label=スライダー){1:3};
&switch(test,select,separator=|,label=プルダウン){選択肢1|選択肢2|選択肢3};
&switch(test){''インライン表示1'':&color(red){インライン表示2};:インライン表示3};

ブロック表示
#switch(test){{{
#flex(gap=12,left){{
&ref(../swiper/1.webp,360x);
#-
&ref(../swiper/1.webp,360x);
}}
#-
&ref(../swiper/2.webp,360x);
#-
&ref(../swiper/3.webp,360x);
}}}

#:ソース
 &switch(test,range,start=2,label=スライダー){1:3};
 &switch(test,select,separator=|,label=プルダウン){選択肢1|選択肢2|選択肢3};
 &switch(test){''インライン表示1'':&color(red){インライン表示2};:インライン表示3};
 
 ブロック表示
 #switch(test){{{
 #flex(gap=12,left){{
 &ref(../swiper/1.webp,360x);
 #-
 &ref(../swiper/1.webp,360x);
 }}
 #-
 &ref(../swiper/2.webp,360x);
 #-
 &ref(../swiper/3.webp,360x);
 }}}

}}}}

*備考 [#notes]
-select用のオプションはselectプラグインとの互換用で実際あまり使う機会はないと思われる。互換とは言っても表示要素を書く位置が違うので結局そまま置き換えることはできないが。
-デフォルトのセパレータをselectプラグインから変えたのは、"|"だとテーブル内で記述できなかったため。
-グループ内で表示要素の数が合っていなくても特にエラーは出ないが、基本的に推奨はしない。

*コメント [#comment]
#pcomment(reply)