#author("2021-07-06T18:56:48+09:00","","") ** accordion.inc.php [#yfb9b0c7] |RIGHT:100|LEFT:360|c |~サマリ|見出し版の折りたたみプラグイン| |~リビジョン|1.3| |~対応バージョン|1.5.x| |~投稿者|[[K]]| |~投稿日|&new{2020-12-05 (土) 15:06:10};| **概要 [#h746ca22] WIKIWIKIにあるような見出し版折りたたみ(アコーディオン)プラグイン [[自作プラグイン/region.inc.php]]を基にして作りました。 **導入する前に [#ffb55e85] pukiwiki.ini.phpを編集する必要があります。 以下の定数を変更してください。 define('PKWKEXP_DISABLE_MULTILINE_PLUGIN_HACK', 1); ↓ define('PKWKEXP_DISABLE_MULTILINE_PLUGIN_HACK', 0); **記載方法 [#f3469999] #accordion(見出し,*,close){{ ここに本文を記載する。h2タグで閉じた状態で表示されます。 }} #accordion(見出し,**,open){{ ここに本文を記載する。h3タグで開いた状態で表示されます。 }} #accordion(見出し,***,close){{ ここに本文を記載する。h4タグで閉じた状態で表示されます。 }} #accordion(見出し,****,open){{ ここに本文を記載する。h5タグで開いた状態で表示されます。 }} **ダウンロード [#jc7bdd76] 正規作者版(2021/7/6): -https://github.com/PTOM76/PukiWiki-Plugins/releases/download/acd-1.4/accordion.inc.php #br 七海改修版(2021/7/6:正規版のid重複をclassに変更 *を文字比較に変更 tableタグをdivに変更): -https://nanami.cute.bz/download/accordion.inc.zip #br 上記のURLからダウンロードしてPukiWikiのplugin/に入れてください。 **コード [#yd2c7cc8] 以下のコードをコピーしてaccordion.inc.phpという名前で保存し、PukiWikiのplugin/へ入れてください。 -accordion.inc.php <?php // $Id: accordion.inc.php,v 1.4 2021/07/06 00:00:00 K Exp $ /** * @link http://pkom.ml/?%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3/accordion.inc.php * @author K * @license http://www.gnu.org/licenses/gpl.ja.html GPL */ // region.inc.php(author:xxxxx) https://pukiwiki.osdn.jp/?%E8%87%AA%E4%BD%9C%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3/region.inc.php //-Accordionプラグインの定義 // 見出し(true) or 開くボタン(false) で開閉 define('PLUGIN_ACCORDION_CLICK_HEADER', true); // falseで<head>に、trueで<body>にスタイルの要素を生成します define('PLUGIN_ACCORDION_COMPATIBILITY_STYLE', false); // スタイルシートの定義 define('PLUGIN_ACCORDION_STYLE', <<<EOD #acd_btn { cursor:pointer; } #acd_btn span { cursor:pointer; font-family: "MS Pゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro", Osaka, arial, verdana, sans-serif; padding:1px 4px; border:gray 1px solid; color:gray; } EOD); function plugin_accordion_convert() { static $builder = 0; if ($builder == 0) $builder = new AccordionPlugin(); $builder -> setDefaultSettings(); if (func_num_args() >= 3){ $args = func_get_args(); $builder -> setDescription( array_shift($args) ); $builder -> setHeading( array_shift($args) ); foreach( $args as $value ){ if( preg_match("/^open/i", $value) ) { $builder -> setOpened(); continue; } if( preg_match("/^close/i", $value) ) { $builder -> setClosed(); continue; } } } $args = func_get_args(); $contents = $args[func_num_args()-1]; $contents = preg_replace("/\r\n|\r/", "\n", $contents); $contents = explode("\n", $contents); return $builder -> build() .convert_html($contents) .'</td></tr></table>'; } class AccordionPlugin { private $description; private $heading; private $isOpened; private $scriptVarName; private $callCount; public function __construct() { $this -> callCount = 0; $this -> setDefaultSettings(); } public function setDefaultSettings() { $this -> description = "..."; $this -> heading = "h2"; $this -> isOpened = false; } public function setClosed() { $this -> isOpened = false; } public function setOpened() { $this -> isOpened = true; } public function setDescription($description) { $this -> description = convert_html($description); $this -> description = preg_replace( "/^<p>/i", "", $this -> description); $this -> description = preg_replace( "/<\/p>$/i", "", $this -> description); } public function setHeading($heading) { if (($heading == "1" ) || ( $heading == "*")) $this -> heading = "h2"; if (($heading == "2" ) || ( $heading == "**")) $this -> heading = "h3"; if (($heading == "3" ) || ( $heading == "***")) $this -> heading = "h4"; if (($heading == "4" ) || ( $heading == "****")) $this -> heading = "h5"; } public function build() { $this -> callCount++; $html = array(); if ($this -> callCount <= 1){ $style = "<style>\n" . PLUGIN_ACCORDION_STYLE . "\n</style>\n"; if (PLUGIN_ACCORDION_COMPATIBILITY_STYLE) { array_push($html, $style); } else { global $head_tags; $head_tags[] .= $style; } } array_push( $html, $this -> buildButtonHtml() ); array_push( $html, $this -> buildContentHtml() ); return join($html); } private function buildButtonHtml() { $button = ($this -> isOpened) ? "-" : "+"; $onClick = <<<EOD onclick=" if(document.getElementById('acd_content{$this -> callCount}').style.display!='inline'){ document.getElementById('acd_content{$this -> callCount}').style.display='inline'; document.getElementById('acd_button{$this -> callCount}').innerHTML='-'; }else{ document.getElementById('acd_content{$this -> callCount}').style.display='none'; document.getElementById('acd_button{$this -> callCount}').innerHTML='+'; } " EOD; $onHeaderClick = ""; $onSpanClick = ""; if (PLUGIN_ACCORDION_CLICK_HEADER) { $onHeaderClick = $onClick; } else { $onSpanClick = $onClick; EOD; } return <<<EOD <{$this -> heading} id="acd_btn" $onHeaderClick> <span id=acd_button{$this -> callCount} $onSpanClick>$button</span> {$this -> description} </{$this -> heading}> <table><tr> EOD; } private function buildContentHtml() { $contentStyle = ($this -> isOpened) ? "display:inline;" : "display:none;"; return <<<EOD <td id=acd_content{$this -> callCount} style="{$contentStyle}"> EOD; } } **ライセンス [#d3402fb8] -GPLv3 **コメント [#tf9f2eb1] - display:blockとdisplay:inlineの箇所をどちらかに統一した方が良い。 -- [[七海]] &new{2021-07-05 (月) 05:47:20}; - +-のところと、*のとこが文字比較になってなかったので修正しました。すみません。 -- [[七海]] &new{2021-07-05 (月) 22:38:54}; - こちらでも挙動がおかしい問題を修正しました。 -- [[K]] &new{2021-07-06 (火) 15:27:05}; #comment