app/views/panels/_form.html.erb

   1 <div id="tabs">
   2   <ul>
   3     <li><a href="#tabs-1">panel</a></li>
   4     <li><a href="#tabs-2">t order</a></li>
   5     <li><a href="#tabs-3">z order</a></li>
   6   </ul>
   7   <div id="tabs-1">
   8     <%= form_for(@panel) do |f| %>
   9       <%= render 'system/error_explanation', :obj => @panel %>
  10
  11       <div class="field">
  12         <%= f.label :caption %><br />
  13         <%= f.text_field :caption %>
  14       </div>
  15       <div class="field">
  16         <%= f.label :width %><br />
  17         <%= f.number_field :width, :id => 'panel-width' %>
  18       </div>
  19       <div class="field">
  20         <%= f.label :height %><br />
  21         <%= f.number_field :height, :id => 'panel-height' %>
  22       </div>
  23       <div class="field">
  24         <%= f.label :border %><br />
  25         <%= f.number_field :border %>
  26       </div>
  27       <div class="field">
  28         <%= f.label :publish %><br />
  29         <%= f.collection_select :publish, t_select_items(MagicNumber['panel_visible_items']), :last, :first, :html => {:selected => @panel.publish} %>
  30       </div>
  31       <div class="actions">
  32         <%= f.submit %>
  33       </div>
  34     <% end %>
  35     <h2><%= t 'panels.create_from_json' -%></h2>
  36     <%= form_for(@panel) do |f| %>
  37       <%= render 'system/error_explanation', :obj => @panel %>
  38
  39       <div>
  40         <label for="json">json data</label>
  41       </div>
  42       <%= text_field_tag "json" %>
  43       <div>
  44         <%= submit_tag t('panels.create_from_json') -%>
  45       </div>
  46     <% end %>
  47   </div>
  48   <div id="tabs-2">
  49     <h2><%= 't reorder' -%></h2>
  50     <table id="t-sortable">
  51       <tbody >
  52       <% @panel.panel_elements.each do |elm| %>
  53         <tr classname="<%= elm.class.to_s -%>" oid="<%= elm.id -%>">
  54           <% case elm.class.to_s %>
  55           <% when 'PanelPicture' %>
  56             <td>
  57               <%= tag(:img, elm.tmb_opt_img_tag) %>
  58             </td>
  59           <% when 'SpeechBalloon' %>
  60             <td>
  61               <%= elm.id -%>
  62               <%= elm.caption -%>
  63             </td>
  64           <% when 'GroundPicture' %>
  65             <td>
  66               <%= tag(:img, elm.tmb_opt_img_tag) -%>
  67             </td>
  68           <% when 'GroundColor' %>
  69             <td style="color: #<%= format("%06x", elm.code ^ 0xffffff) -%>; background-color: #<%= format("%06x", elm.code) -%>;">
  70               <%= format("%06x", elm.code ^ 0xffffff) %>
  71             </td>
  72           <% end %>
  73           <td>
  74             <%= h(truncate(elm.caption, :length => 12)) %>
  75           </td>
  76         </tr>
  77       <% end %>
  78       </tbody>
  79     </table>
  80     <%= form_for(@panel) do |f| %>
  81       <%= hidden_field_tag "json", nil, :id => 't-reorder' %>
  82       <% unless @panel.new_record? -%>
  83         <%= content_tag :div, '', :id => "panel-id-elm", :oid => @panel.id -%>
  84       <% end %>
  85       <div>
  86         <%= submit_tag t('panels.create.title') -%>
  87       </div>
  88     <% end %>
  89   </div>
  90   <div id="tabs-3">
  91     <h2><%= 'z reorder' -%></h2>
  92     <table id="z-sortable">
  93       <tbody >
  94       <% @panel.zorderd_elements.each do |elm| %>
  95         <tr classname="<%= elm.class.to_s -%>" oid="<%= elm.id -%>">
  96           <% case elm.class.to_s %>
  97           <% when 'PanelPicture' %>
  98             <td>
  99               <%= tag(:img, elm.tmb_opt_img_tag) %>
 100             </td>
 101           <% when 'SpeechBalloon' %>
 102             <td>
 103               <%= elm.id -%>
 104               <%= elm.caption -%>
 105             </td>
 106           <% when 'GroundPicture' %>
 107             <td>
 108               <%= tag(:img, elm.tmb_opt_img_tag) -%>
 109             </td>
 110           <% when 'GroundColor' %>
 111             <td style="color: #<%= format("%06x", elm.code ^ 0xffffff) -%>; background-color: #<%= format("%06x", elm.code) -%>;">
 112               <%= format("%06x", elm.code ^ 0xffffff) %>
 113             </td>
 114           <% end %>
 115           <td>
 116             <%= h(truncate(elm.caption, :length => 12)) %>
 117           </td>
 118         </tr>
 119       <% end %>
 120       </tbody>
 121     </table>
 122     <%= form_for(@panel) do |f| %>
 123       <%= hidden_field_tag "json", nil, :id => 'z-reorder' %>
 124       <% unless @panel.new_record? -%>
 125         <%= content_tag :div, '', :id => "panel-id-zorderd", :oid => @panel.id -%>
 126       <% end %>
 127       <div>
 128         <%= submit_tag t('panels.create.title') -%>
 129       </div>
 130     <% end %>
 131   </div>
 132 </div>
 133
 134 <style>
 135 <!--
 136 #t-sortable tr {
 137     margin: 0 3px 3px 3px;
 138     padding: 0.3em;
 139     padding-left: 1em;
 140     font-size: 15px;
 141     font-weight: bold;
 142     cursor: move;
 143 }
 144 #z-sortable tr {
 145     margin: 0 3px 3px 3px;
 146     padding: 0.3em;
 147     padding-left: 1em;
 148     font-size: 15px;
 149     font-weight: bold;
 150     cursor: move;
 151 }
 152 -->
 153 </style><script>
 154 <!--
 155 $( function() {
 156     $( '#tabs' ) . tabs();
 157 });
 158 var panel_attributes = {};
 159 jQuery( function() {
 160     jQuery( '#panel<%= @panel.id -%>' ) . resizable({
 161       stop: function( event, ui ) {
 162         var p = $('#panel<%= @panel.id -%>');
 163           $("#panel-width").val(p.width());
 164
 165         confirm( p.width() );
 166         panel_attributes['width'] = this.getAttribute('width');
 167       }
 168     });
 169     <% @panel.panel_elements.each do |elm| %>
 170       <% case elm.class.to_s %>
 171       <% when 'PanelPicture' %>
 172         jQuery( '#vpicture<%= elm.id -%>' ) . draggable();
 173         jQuery( '#panel-picture<%= elm.id -%>' ) . resizable({handles: 'all'});
 174       <% when 'SpeechBalloon' %>
 175         jQuery( '#vballoon<%= elm.id -%>' ) . draggable();
 176         jQuery( '#balloon<%= elm.id -%>' ) . resizable({handles: 'all'});
 177       <% when 'GroundPicture' %>
 178       <% when 'GroundColor' %>
 179       <% end %>
 180     <% end %>
 181     jQuery( '#t-sortable tbody' ) . sortable( {
 182         update: function( event, ui ) {
 183           var panel_pictures_attributes = {};
 184           var speech_balloons_attributes = {};
 185           var ground_colors_attributes = {};
 186           var ground_pictures_attributes = {};
 187           var i = 0;
 188           jQuery( '#t-sortable tr' ) . map( function() {
 189             switch ( this.getAttribute("classname") ){
 190             case 'PanelPicture':
 191               panel_pictures_attributes[this.getAttribute("oid")] = {id: this.getAttribute("oid"), t: i};
 192               break;
 193             case 'SpeechBalloon':
 194               speech_balloons_attributes[this.getAttribute("oid")] = {id: this.getAttribute("oid"), t: i};
 195               break;
 196             case 'GroundPicture':
 197               ground_pictures_attributes[this.getAttribute("oid")] = {id: this.getAttribute("oid"), t: i};
 198               break;
 199             case 'GroundColor':
 200               ground_colors_attributes[this.getAttribute("oid")] = {id: this.getAttribute("oid"), t: i};
 201               break;
 202             }
 203             i++;
 204           } );
 205           var panel = {
 206             panel_pictures_attributes: panel_pictures_attributes,
 207             speech_balloons_attributes: speech_balloons_attributes,
 208             ground_pictures_attributes: ground_pictures_attributes,
 209             ground_colors_attributes: ground_colors_attributes
 210           };
 211           if ( $("#panel-id-elm") )
 212             panel['id'] = $( "#panel-id-elm").attr("oid") ;
 213           $("#t-reorder").val(JSON.stringify(panel));
 214
 215         }
 216     } );
 217     jQuery( '#t-sortable tbody' ) . disableSelection();
 218
 219     jQuery( '#z-sortable tbody' ) . sortable( {
 220         update: function( event, ui ) {
 221           var panel_pictures_attributes = {};
 222           var speech_balloons_attributes = {};
 223           var ground_colors_attributes = {};
 224           var ground_pictures_attributes = {};
 225           var i = 1;
 226           jQuery( '#z-sortable tr' ) . map( function() {
 227             switch ( this.getAttribute("classname") ){
 228             case 'PanelPicture':
 229               panel_pictures_attributes[this.getAttribute("oid")] = {id: this.getAttribute("oid"), z: i};
 230               break;
 231             case 'SpeechBalloon':
 232               speech_balloons_attributes[this.getAttribute("oid")] = {id: this.getAttribute("oid"), z: i};
 233               break;
 234             case 'GroundPicture':
 235               ground_pictures_attributes[this.getAttribute("oid")] = {id: this.getAttribute("oid"), z: i};
 236               break;
 237             case 'GroundColor':
 238               ground_colors_attributes[this.getAttribute("oid")] = {id: this.getAttribute("oid"), z: i};
 239               break;
 240             }
 241             i++;
 242           } );
 243           var panel = {
 244             panel_pictures_attributes: panel_pictures_attributes,
 245             speech_balloons_attributes: speech_balloons_attributes,
 246             ground_pictures_attributes: ground_pictures_attributes,
 247             ground_colors_attributes: ground_colors_attributes
 248           };
 249           if ( $("#panel-id-zorderd") )
 250             panel['id'] = $( "#panel-id-zorderd").attr("oid") ;
 251           $("#z-reorder").val(JSON.stringify(panel));
 252
 253         }
 254     } );
 255     jQuery( '#t-sortable tbody' ) . disableSelection();
 256 } );
 257 // -->
 258 </script>