X-Git-Url: http://git.osdn.net/view?a=blobdiff_plain;f=app%2Fviews%2Fpanels%2F_form.html.erb;h=fb8ce514eea31cb1c3b7006d427ec53f8449e3fc;hb=bf89ae0a5c0f77ce2e9782b28023ff8ac521c501;hp=08f12962fbc8976af88f32b1f952f6cab51c6d23;hpb=418be292310a1adaa5113d2eeaf668aa97fce0b1;p=pettanr%2Fpettanr.git

diff --git a/app/views/panels/_form.html.erb b/app/views/panels/_form.html.erb
index 08f12962..fb8ce514 100644
--- a/app/views/panels/_form.html.erb
+++ b/app/views/panels/_form.html.erb
@@ -1,10 +1,258 @@
-<%= form_tag( {:controller => 'panels',:action => "create"}) do %>
-  <%= render 'system/error_explanation', :obj => @panel %>
-  <div>
-    <label for="json">json data</label>
+<div id="tabs">
+  <ul>
+    <li><a href="#tabs-1">panel</a></li>
+    <li><a href="#tabs-2">t order</a></li>
+    <li><a href="#tabs-3">z order</a></li>
+  </ul>
+  <div id="tabs-1">
+    <%= form_for(@panel) do |f| %>
+      <%= render 'system/error_explanation', :obj => @panel %>
+
+      <div class="field">
+        <%= f.label :caption %><br />
+        <%= f.text_field :caption %>
+      </div>
+      <div class="field">
+        <%= f.label :width %><br />
+        <%= f.number_field :width, :id => 'panel-width' %>
+      </div>
+      <div class="field">
+        <%= f.label :height %><br />
+        <%= f.number_field :height, :id => 'panel-height' %>
+      </div>
+      <div class="field">
+        <%= f.label :border %><br />
+        <%= f.number_field :border %>
+      </div>
+      <div class="field">
+        <%= f.label :publish %><br />
+        <%= f.collection_select :publish, t_select_items(MagicNumber['panel_visible_items']), :last, :first, :html => {:selected => @panel.publish} %>
+      </div>
+      <div class="actions">
+        <%= f.submit %>
+      </div>
+    <% end %>
+    <h2><%= t 'panels.create_from_json' -%></h2>
+    <%= form_for(@panel) do |f| %>
+      <%= render 'system/error_explanation', :obj => @panel %>
+
+      <div>
+        <label for="json">json data</label>
+      </div>
+      <%= text_field_tag "json" %>
+      <div>
+        <%= submit_tag t('panels.create_from_json') -%>
+      </div>
+    <% end %>
   </div>
-  <%= text_field_tag "json" %>
-  <div>
-    <%= submit_tag t('panels.create_from_json') -%>
+  <div id="tabs-2">
+    <h2><%= 't reorder' -%></h2>
+    <table id="t-sortable">
+      <tbody >
+      <% @panel.panel_elements.each do |elm| %>
+        <tr classname="<%= elm.class.to_s -%>" oid="<%= elm.id -%>">
+          <% case elm.class.to_s %>
+          <% when 'PanelPicture' %>
+            <td>
+              <%= tag(:img, elm.tmb_opt_img_tag) %>
+            </td>
+          <% when 'SpeechBalloon' %>
+            <td>
+              <%= elm.id -%>
+              <%= elm.caption -%>
+            </td>
+          <% when 'GroundPicture' %>
+            <td>
+              <%= tag(:img, elm.tmb_opt_img_tag) -%>
+            </td>
+          <% when 'GroundColor' %>
+            <td style="color: #<%= format("%06x", elm.code ^ 0xffffff) -%>; background-color: #<%= format("%06x", elm.code) -%>;">
+              <%= format("%06x", elm.code ^ 0xffffff) %>
+            </td>
+          <% end %>
+          <td>
+            <%= h(truncate(elm.caption, :length => 12)) %>
+          </td>
+        </tr>
+      <% end %>
+      </tbody>
+    </table>
+    <%= form_for(@panel) do |f| %>
+      <%= hidden_field_tag "json", nil, :id => 't-reorder' %>
+      <% unless @panel.new_record? -%>
+        <%= content_tag :div, '', :id => "panel-id-elm", :oid => @panel.id -%>
+      <% end %>
+      <div>
+        <%= submit_tag t('panels.create.title') -%>
+      </div>
+    <% end %>
   </div>
-<% end -%>
+  <div id="tabs-3">
+    <h2><%= 'z reorder' -%></h2>
+    <table id="z-sortable">
+      <tbody >
+      <% @panel.zorderd_elements.each do |elm| %>
+        <tr classname="<%= elm.class.to_s -%>" oid="<%= elm.id -%>">
+          <% case elm.class.to_s %>
+          <% when 'PanelPicture' %>
+            <td>
+              <%= tag(:img, elm.tmb_opt_img_tag) %>
+            </td>
+          <% when 'SpeechBalloon' %>
+            <td>
+              <%= elm.id -%>
+              <%= elm.caption -%>
+            </td>
+          <% when 'GroundPicture' %>
+            <td>
+              <%= tag(:img, elm.tmb_opt_img_tag) -%>
+            </td>
+          <% when 'GroundColor' %>
+            <td style="color: #<%= format("%06x", elm.code ^ 0xffffff) -%>; background-color: #<%= format("%06x", elm.code) -%>;">
+              <%= format("%06x", elm.code ^ 0xffffff) %>
+            </td>
+          <% end %>
+          <td>
+            <%= h(truncate(elm.caption, :length => 12)) %>
+          </td>
+        </tr>
+      <% end %>
+      </tbody>
+    </table>
+    <%= form_for(@panel) do |f| %>
+      <%= hidden_field_tag "json", nil, :id => 'z-reorder' %>
+      <% unless @panel.new_record? -%>
+        <%= content_tag :div, '', :id => "panel-id-zorderd", :oid => @panel.id -%>
+      <% end %>
+      <div>
+        <%= submit_tag t('panels.create.title') -%>
+      </div>
+    <% end %>
+  </div>
+</div>
+
+<style>
+<!--
+#t-sortable tr {
+    margin: 0 3px 3px 3px;
+    padding: 0.3em;
+    padding-left: 1em;
+    font-size: 15px;
+    font-weight: bold;
+    cursor: move;
+}
+#z-sortable tr {
+    margin: 0 3px 3px 3px;
+    padding: 0.3em;
+    padding-left: 1em;
+    font-size: 15px;
+    font-weight: bold;
+    cursor: move;
+}
+-->
+</style><script>
+<!--
+$( function() {
+    $( '#tabs' ) . tabs();
+});
+var panel_attributes = {};
+jQuery( function() {
+    jQuery( '#panel<%= @panel.id -%>' ) . resizable({
+      stop: function( event, ui ) {
+        var p = $('#panel<%= @panel.id -%>');
+          $("#panel-width").val(p.width());
+        
+        confirm( p.width() );
+        panel_attributes['width'] = this.getAttribute('width');
+      }
+    });
+    <% @panel.panel_elements.each do |elm| %>
+      <% case elm.class.to_s %>
+      <% when 'PanelPicture' %>
+        jQuery( '#vpicture<%= elm.id -%>' ) . draggable();
+        jQuery( '#panel-picture<%= elm.id -%>' ) . resizable({handles: 'all'});
+      <% when 'SpeechBalloon' %>
+        jQuery( '#vballoon<%= elm.id -%>' ) . draggable();
+        jQuery( '#balloon<%= elm.id -%>' ) . resizable({handles: 'all'});
+      <% when 'GroundPicture' %>
+      <% when 'GroundColor' %>
+      <% end %>
+    <% end %>
+    jQuery( '#t-sortable tbody' ) . sortable( {
+        update: function( event, ui ) {
+          var panel_pictures_attributes = {};
+          var speech_balloons_attributes = {};
+          var ground_colors_attributes = {};
+          var ground_pictures_attributes = {};
+          var i = 0;
+          jQuery( '#t-sortable tr' ) . map( function() {
+            switch ( this.getAttribute("classname") ){
+            case 'PanelPicture':
+              panel_pictures_attributes[this.getAttribute("oid")] = {id: this.getAttribute("oid"), t: i};
+              break;
+            case 'SpeechBalloon':
+              speech_balloons_attributes[this.getAttribute("oid")] = {id: this.getAttribute("oid"), t: i};
+              break;
+            case 'GroundPicture':
+              ground_pictures_attributes[this.getAttribute("oid")] = {id: this.getAttribute("oid"), t: i};
+              break;
+            case 'GroundColor':
+              ground_colors_attributes[this.getAttribute("oid")] = {id: this.getAttribute("oid"), t: i};
+              break;
+            }
+            i++;
+          } );
+          var panel = {
+            panel_pictures_attributes: panel_pictures_attributes, 
+            speech_balloons_attributes: speech_balloons_attributes,
+            ground_pictures_attributes: ground_pictures_attributes,
+            ground_colors_attributes: ground_colors_attributes
+          };
+          if ( $("#panel-id-elm") ) 
+            panel['id'] = $( "#panel-id-elm").attr("oid") ;
+          $("#t-reorder").val(JSON.stringify(panel));
+          
+        }
+    } );
+    jQuery( '#t-sortable tbody' ) . disableSelection();
+    
+    jQuery( '#z-sortable tbody' ) . sortable( {
+        update: function( event, ui ) {
+          var panel_pictures_attributes = {};
+          var speech_balloons_attributes = {};
+          var ground_colors_attributes = {};
+          var ground_pictures_attributes = {};
+          var i = 1;
+          jQuery( '#z-sortable tr' ) . map( function() {
+            switch ( this.getAttribute("classname") ){
+            case 'PanelPicture':
+              panel_pictures_attributes[this.getAttribute("oid")] = {id: this.getAttribute("oid"), z: i};
+              break;
+            case 'SpeechBalloon':
+              speech_balloons_attributes[this.getAttribute("oid")] = {id: this.getAttribute("oid"), z: i};
+              break;
+            case 'GroundPicture':
+              ground_pictures_attributes[this.getAttribute("oid")] = {id: this.getAttribute("oid"), z: i};
+              break;
+            case 'GroundColor':
+              ground_colors_attributes[this.getAttribute("oid")] = {id: this.getAttribute("oid"), z: i};
+              break;
+            }
+            i++;
+          } );
+          var panel = {
+            panel_pictures_attributes: panel_pictures_attributes, 
+            speech_balloons_attributes: speech_balloons_attributes,
+            ground_pictures_attributes: ground_pictures_attributes,
+            ground_colors_attributes: ground_colors_attributes
+          };
+          if ( $("#panel-id-zorderd") ) 
+            panel['id'] = $( "#panel-id-zorderd").attr("oid") ;
+          $("#z-reorder").val(JSON.stringify(panel));
+          
+        }
+    } );
+    jQuery( '#t-sortable tbody' ) . disableSelection();
+} );
+// -->
+</script>