#author("2021-07-07T03:20:26+09:00","","") #author("2021-07-07T03:20:43+09:00","","") ** accordion.inc.php [#yfb9b0c7] |RIGHT:100|LEFT:360|c |~サマリ|見出し版の折りたたみプラグイン| |~リビジョン|1.5| |~対応バージョン|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 v1.5): -https://github.com/PTOM76/PukiWiki-Plugins/releases/download/Accordion-1.5/accordion.inc.php #br 上記のURLからダウンロードしてPukiWikiのplugin/に入れてください。 **コード [#yd2c7cc8] 以下のコードをコピーしてaccordion.inc.phpという名前で保存し、PukiWikiのplugin/へ入れてください。 -accordion.inc.php <?php // $Id: accordion.inc.php,v 1.5 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 // 七海改修版参考 https://nanami.cute.bz/download/accordion.inc.zip //-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); // false→table,display:inline // true→div,display:block define('PLUGIN_ACCORDION_DISPLAY', true); 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) .(PLUGIN_ACCORDION_DISPLAY ? '</div>' : '</td></tr></table>'); } class AccordionPlugin { private $description; private $heading; private $isOpened; private $scriptVarName; private $callCount; private $display; public function __construct() { $this -> callCount = 0; $this -> setDefaultSettings(); } public function setDefaultSettings() { $this -> description = "..."; $this -> heading = "h2"; $this -> isOpened = false; $this -> display = PLUGIN_ACCORDION_DISPLAY ? $display = "block" : $display = "inline"; } 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" || !(strcmp($heading,"*"))) $this -> heading = "h2"; if ($heading == "2" || !(strcmp($heading,"**"))) $this -> heading = "h3"; if ($heading == "3" || !(strcmp($heading,"***"))) $this -> heading = "h4"; if ($heading == "4" || !(strcmp($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!='{$this -> display}'){ document.getElementById('acd_content{$this -> callCount}').style.display='{$this -> display}'; 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; } $startTag = PLUGIN_ACCORDION_DISPLAY ? "" : "<table><tr>"; return <<<EOD <{$this -> heading} class="acd_btn" $onHeaderClick> <span id=acd_button{$this -> callCount} $onSpanClick>$button</span> {$this -> description} </{$this -> heading}> {$startTag} EOD; } private function buildContentHtml() { $startTag = PLUGIN_ACCORDION_DISPLAY ? "div" : "td"; $contentStyle = ($this -> isOpened) ? "display:{$this -> display};" : "display:none;"; return <<<EOD <{$startTag} 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}; - tableだとなぜか幅を取るため、デフォルトでdiv、blockにしておきました。 -- [[K]] &new{2021-07-06 (火) 21:34:29}; #comment