Drupal でメッセージを隠せるようにする
Drupal 5.x は昔と比べて見目麗しくなったので,最近ちょこちょこ遊んでいます。
ページの追加とか管理作業とかすると上部にメッセージボックスがでるんですが,これをクリックすると消えるようにしたいと思いました。activeCollab*1 だとそういう挙動なんで真似しようと思ったわけです。
Message Effects というモジュールもあるんですが,Drupal はデフォルトで jQuery を読み込むので,JavaScript を書くだけで,できそう。
if (Drupal.jsEnabled) { var MakeMessagesHidable = function (boxes) { boxes = $(boxes); boxes.click(function () { var me = $(this); me.animate( { opacity: 0.0 }, 500, null, function () { me.animate({ height: 'hide' }, 300); } ); }) .css('cursor', 'pointer') ; /* color animation will be available with jQuery Interface */ if (jQuery.fxe) boxes.each(function () { var me = $(this); var old_bgcol = me.css('backgroundColor'); me.css('backgroundColor', '#ffffbb') .animate({ 'backgroundColor': old_bgcol }, 1000) ; }) ; }; $(function () { MakeMessagesHidable('div.messages'); }); }
jQuery Interface モジュールがインストールされてて,どこかで jquery_interface_add()
されてる場合は,ハイライトするようにもなってます。jQuery Interface がないと color の jQuery.animate()
がうまくいかなかったんで。jQuery.Highlight()
でやらずに自力で animate()
してるのはその試行錯誤の名残りです。でもま,ミニマム指向でよしとする。
あと,単純に slideUp()
や hide('slow')
とかしてないのは挙動が気にくわなかったためです。
*1:めっきり触っていません。文句の言える筋合いではないですが,正直なんだかなぁという展開になっちゃいましたし。追記: http://projectpier.org/ にオープンソースなフォークがあるんですね。知りませんでした。