「jMaki on Rails」の導入方法とRevolverコンポーネントのカスタマイズ

jMakiで強化するRuby on Rails

Revolverのカスタマイズ～その1～

　インストールが完了したので、次にRevolverのカスタマイズを行います。中央の画像を切り替えた時に、その野球選手の画像に関するプロフィールやコメントなどの情報を、下側に表示できるようにします。

　画像を回転させた時の処理をカスタマイズするために、「RAILS_ROOT\public\resources\extras\jmaki\revolver\component.js」ファイルのdoAnimationファンクションを修正します。

　if (found == true) {句の最後の部分に、下記のコードを追加します。

追加コード

if (items[selected].action != null) {
  new Ajax.Updater(
    items[selected].update,
    items[selected].action + "?name=" + items[selected].name,
    {asynchronous:true, evalScripts:true,
     parameters:Form.serialize(items[selected].submit)});
}

　コードを追加したdoAnimationファンクションは次のようになります。

doAnimationファンクションのコード

 function doAnimation(forward) {

  if (!animate && !processing) return;
  var found = false;

  for (var _l = 0; _l < items.length; _l++) {
      var _degree = 0;
      if (degree + items[_l].degree > 360) _degree 
            = (360 - (degree + items[_l].degree)) * -1;
      else _degree =  degree + items[_l].degree;
      if (forward && degree >= 360) {
          degree = 0;
        } else if (!forward &&  degree < 0) {
          degree = 360;
        }

      if (_degree > 360 - range ||
          _degree < range) {
          items[_l].selected = true;
          if (selected != _l){
              selected = _l;
              found = true;
              processing = false;
              break;
            }
      }
      var pt = getElipticalPoint(_degree);         
      items[_l].image.style.top = pt.y  + offset.y +  "px";

      items[_l].image.style.left 
            = pt.x - (items[_l].image.width / 2) + offset.x + "px";
      processImage(_l, _degree);
      items[_l].link.href = '#';
      items[_l].link.target = "_self";
                   
    }
    if (found == true) {
        reposition();

        // center the selected div
       items[selected].image.style.left 
            = (container.clientWidth / 2)
            - (items[selected].image.width / 2) + offset.x + "px";
        items[selected].image.style.zIndex = 400;
        var target = "";
        if (items[selected].target) target 
            = " target='" + items[selected].target + "'";
          titleDiv.innerHTML 
            = "<a href='" + items[selected].href + "' 
            class='revolverTitleLink jmakiFont'" + target 
               + ">"+ items[selected].title + "</a>";
        items[selected].link.href = items[selected].href;
        if (items[selected].target)items[selected].link.target 
            = items[selected].target;
        if (items.length == 1) selected = -1;

        if (items[selected].action != null) {
          new Ajax.Updater(
            items[selected].update,
            items[selected].action + "?name=" 
               + items[selected].name,
            {asynchronous:true, evalScripts:true,
             parameters:Form.serialize(items[selected].submit)});
        }

    } else {
      if (forward) degree = degree + increment;
      else degree = degree - increment;
      if (animate && processing)setTimeout(
            function(){doAnimation(forward)}, delay);
    }
 }

　画像の回転時にAjax.Updaterで、画像に関するプロフィールやコメントなどの情報を切り替えます。items[selected].updateで更新対象を指定し、items[selected].action + "?name=" + items[selected].nameで呼び出すアクションを指定しています。また、parameters:Form.serialize(items[selected].submit)でアクションへの送信情報を指定しています。

　また、下記のコードでupdate、action、submit、nameの情報を設定します。

index.rhtml

<%= javascript_include_tag :defaults -%>
<%= javascript_include_tag "jmaki" -%>
<%= jmaki_setup -%>

<%
  bullets = Array.new
  for mst_baseball_player in @mst_baseball_players
    if mst_baseball_player.send('main_image_path')
      bullet = Hash.new
      bullet["imgSrc"] = 
        mst_baseball_player.send('main_image_path')
      bullet["href"] = 
        mst_baseball_player.send('main_image_path')
      bullet["title"] = mst_baseball_player.send('player_name');

      bullet["update"] = "receive_division";
      bullet["action"] = "jmaki_sample/bullet_action"
      bullet["submit"] = "send_division"
      bullet["name"]   = mst_baseball_player.send('id');

      bullets << bullet
    end
  end
%>

<table class="confirm">
  <tr>
    <td>
      <%= jmaki_widget 'extras.jmaki.revolver', :value=>bullets -%>
    </td>
  </tr>
</table>

<div id="send_division"></div>
<div id="receive_division">receive_division</div>