サイドバー折り畳み２：タイトルボタンとタイトルリンクの競合回避

先日、サイドバーのリストタイトルをサイドバー折り畳み２のボタンにしてみたのですが、あのままだとちょっとまずいかな、というところがありました。

facetさんからもご指摘がありましたように、『バックナンバー』についてはリストタイトル部がリンクになっていますが、この部分をクリックすると……本来のリンクイベントの他に折り畳みのイベントまで走ってしまう、という競合の問題がでてしまいます。

これをなんとか解消出来ないか、ということで、いまのところ

1. リストタイトルのリンク部を別のところに追い出す(facetさん方式)。
2. リストタイトルのリンク上にマウスがある場合だけ折り畳みを無効にする(風柳方式)。

とう方法が考案されています。

1.の方は、そもそもリストタイトルからリンクを追い出してしまうので、(リンクのない)通常のリストタイトルボタンと同様に使えるメリットがある一方、追出し先の表示を考えないといけないのと、リストタイトルにリンクがあることを前提としたテンプレートとの相性が悪くなる。
2.の方は、見た目的にはこれまでと変わらないメリットがあるが、リンク部以外にクリックするところがないようなテンプレートの場合、折り畳みの切替機能が実質無効となってしまう。
……ということで、それぞれ一長一短があります。

それで、とりあえず、facetさんのテスト版スクリプト(02c11)をベースに、設置する環境により2方式のどちらかを選択出来るよう、当方でパッチをあててみました。

facetさんの記事にある設置用スクリプトのうち、

<script type="text/javascript" src="http://facet.cocolog-nifty.com/divers/foldSidebar02c.js"> </script>

の箇所を

<script type="text/javascript" src="http://furyu.tea-nifty.com/script/foldSidebar02c11_furyu-patched.js"> </script>

に修正し、新たに、

foldBroadly = true; //

のあたりに、

foldBroadly = true; // ***** ここから ***** switchStyle = "display:none" ; useTitleButton = true ; // リストタイトルのボタン化有効(true)/無効(false) hangTitleLink = true ; // リストタイトルリンクの追出し有効(true)/無効(false) var hangTitlePosition = { 'カテゴリー' : "top" , 'バックナンバー' : "list-bottom" , '[ リストタイトル ]': "[ ぶら下げ位置(none/top/bottom/list-top/list-bottom) ]" } ; var hangText = { 'カテゴリー' : "インデックスを開く" , 'バックナンバー' : "バックナンバーページへ", '[ リストタイトル ]': "[ ぶら下げ時のタイトル ]" } ; // ***** ここまで ***** //

のような記述を追加することで、とりあえず試してみることは出来ます(今まで通り切替ボタン(+/-)も表示したままにしたい場合はswitchStyle = "display:none"は不要。)。

上で書いた方式 1.を使用する場合には、hangTitleLink を true に、方式2.を使用する場合は false にします。

リストタイトルを追い出す場合(方式1:hangTitleLink=ture)、追い出したリンクをどのように表示するかは、hangTitlePosition と hangText、及び、表示用 CSS の設定により行います。

hangTitlePositionには、リンクの設定されたリストタイトル毎に(といっても現在は実質"バックナンバー"だけですが)、表示位置を指定します。

none	非表示
top	一覧の上に表示
bottom	一覧の下に表示
list-top	一覧内の一番上に表示
list-bottom	一覧内の一番下に表示

hangTextは、リンクの設定されたリストタイトル毎に、表示用の文言を設定します。
なお、ここで設定した文言は、方式2(hangTitleLink=false)でリンクをポイントしたときにも使われます。

CSSは、次のような感じで、".sidebar div.module-body div.hang-link-(hangTitlePositionで設定できる種別)"毎に設定します。

<style type="text/css"> <!-- .sidebar div.module-body div.hang-link-top { width:100%; font-size: 12px; background-color:silver; line-height:100%; margin:0px 0px 0px 0px; padding:2px 0px 0px 0px; } .sidebar div.module-body div.hang-link-bottom { width:100%; font-size: 12px; line-height:100%; margin:0px 0px 16px 0px; padding:2px 0px 0px 0px; } .sidebar div.module-body div.hang-link-list-top { width:100%; font-size: 12px; line-height:100%; margin:8px 0px 4px 0px; padding:2px 0px 0px 0px; } .sidebar div.module-body div.hang-link-list-bottom { width:100%; font-size: 12px; line-height:100%; margin:8px 0px 0px 0px; padding:2px 0px 0px 0px; } --> </style>

なお、リンクが『バックナンバー』だけではちょっと寂しいので(笑)、現在の当サイトでは JavaScript を使って『カテゴリー』にも無理やりリンクを設定し、それを上記のスクリプトで追い出す、という、なんだか訳がわからないことをやっていたりします(^^;。
ちなみに、そのスクリプトはこんな感じ(折り畳みより前に設定)。

<script type="text/javascript"> <!-- function addLinktoCategory() { var div = document.getElementById("archive-category") ; if ( !div ) return ; var h2s = div.getElementsByTagName('h2') ; if ( !h2s ) return ; var h2 = h2s[0] ; if ( h2.getElementsByTagName('a').length ) return ; var link = document.createElement('a') ; link.href = "./archives.html" ; link.innerHTML = h2.innerHTML ; h2.innerHTML = "" ; h2.appendChild( link ) ; } addLinktoCategory() ; //--> </script>

自己満足というかなんというか、『手段のためには目的を選ばない』なぁ、我ながら(苦笑)。

2006.03.19

追い出し設定をしていない(hangTitlePositionに未登録の)リストタイトルに関しては、自動的に方式2.(リンクはそのままにして切り替え対象外領域とする)が適用されるように修正。

2006.03.19

カテゴリーにリンクを追加するスクリプト内で、既存Aタグがあるかをチェックするために何故か

if ( h2.getAttribute('a') ) return ;

としていたのを、

if ( h2.getElementsByTagName('a').length ) return ;

に修正。

ま、眠かったからね(-_-;)……もっとスマートな方法あるのかな(･_･?)･。