t#31558:

[pettanr/pettanr.git] / app / views / panels / _form.html.erb

diff --git a/app/views/panels/_form.html.erb b/app/views/panels/_form.html.erb
index fb8ce51..934cbc4 100644 (file)
--- a/app/views/panels/_form.html.erb
+++ b/app/views/panels/_form.html.erb
@@ -1,8 +1,9 @@
 <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>
+    <li><a href="#tabs-2">elements</a></li>
+    <li><a href="#tabs-3">t order</a></li>
+    <li><a href="#tabs-4">z order</a></li>
   </ul>
   <div id="tabs-1">
     <%= form_for(@panel) do |f| %>
@@ -10,23 +11,23 @@
 
       <div class="field">
         <%= f.label :caption %><br />
-        <%= f.text_field :caption %>
+        <%= f.text_field :caption, :id => 'pettanr-panel_' + @panel.id.to_s + '_caption', :tree => 'panels_' + @panel.id.to_s + '_caption' -%>
       </div>
       <div class="field">
         <%= f.label :width %><br />
-        <%= f.number_field :width, :id => 'panel-width' %>
+        <%= f.number_field :width, :id => 'pettanr-panel_' + @panel.id.to_s + '_width', :tree => 'panels_' + @panel.id.to_s + '_width', :trace => 'panel' + @panel.id.to_s %>
       </div>
       <div class="field">
         <%= f.label :height %><br />
-        <%= f.number_field :height, :id => 'panel-height' %>
+        <%= f.number_field :height, :id => 'pettanr-panel_' + @panel.id.to_s + '_height', :tree => 'panels_' + @panel.id.to_s + '_height', :trace => 'panel' + @panel.id.to_s %>
       </div>
       <div class="field">
         <%= f.label :border %><br />
-        <%= f.number_field :border %>
+        <%= f.number_field :border, :id => 'pettanr-panel_' + @panel.id.to_s + '_border', :tree => 'panels_' + @panel.id.to_s + '_border', :trace => 'panel' + @panel.id.to_s %>
       </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} %>
+        <%= f.collection_select :publish, t_select_items(MagicNumber['panel_visible_items']), :last, :first, :html => {:selected => @panel.publish}, :tree => 'panels_' + @panel.id.to_s + '_caption' %>
       </div>
       <div class="actions">
         <%= f.submit %>
@@ -39,13 +40,51 @@
       <div>
         <label for="json">json data</label>
       </div>
-      <%= text_field_tag "json" %>
+      <%= text_field_tag "json", '', :id => 'pettanr-panel-json' %>
       <div>
-        <%= submit_tag t('panels.create_from_json') -%>
+        <%= submit_tag t('panels.create_from_json'), :id => 'pettanr-panel-submit' -%>
       </div>
     <% end %>
   </div>
   <div id="tabs-2">
+    <div id="elements-tabs">
+      <ul>
+        <% @panel.panel_elements.each do |elm| %>
+          <li><a href="#elements-tabs-<%= elm.t -%>">
+            <% case elm.class.to_s %>
+            <% when 'PanelPicture' %>
+              <%= tag(:img, elm.tmb_opt_img_tag) %>
+            <% when 'SpeechBalloon' %>
+              <%= elm.id -%>
+            <% when 'GroundPicture' %>
+              <%= tag(:img, elm.tmb_opt_img_tag) -%>
+            <% when 'GroundColor' %>
+              <div style="color: #<%= format("%06x", elm.code ^ 0xffffff) -%>; background-color: #<%= format("%06x", elm.code) -%>;">
+                <%= format("%06x", elm.code ^ 0xffffff) %>
+              </div>
+            <% end %>
+          </a></li>
+        <% end %>
+      </ul>
+        <% @panel.panel_elements.each do |elm| %>
+          <div id="elements-tabs-<%= elm.t -%>">
+            <% case elm.class.to_s %>
+            <% when 'PanelPicture' %>
+              <%= render 'panel_pictures/form', :panel_picture => elm %>
+            <% when 'SpeechBalloon' %>
+              <%= elm.id -%>
+            <% when 'GroundPicture' %>
+              <%= tag(:img, elm.tmb_opt_img_tag) -%>
+            <% when 'GroundColor' %>
+              <div style="color: #<%= format("%06x", elm.code ^ 0xffffff) -%>; background-color: #<%= format("%06x", elm.code) -%>;">
+                <%= format("%06x", elm.code ^ 0xffffff) %>
+              </div>
+            <% end %>
+          </div>
+        <% end %>
+    </div>
+  </div>
+  <div id="tabs-3">
     <h2><%= 't reorder' -%></h2>
     <table id="t-sortable">
       <tbody >
@@ -87,7 +126,7 @@
       </div>
     <% end %>
   </div>
-  <div id="tabs-3">
+  <div id="tabs-4">
     <h2><%= 'z reorder' -%></h2>
     <table id="z-sortable">
       <tbody >
@@ -150,20 +189,58 @@
     cursor: move;
 }
 -->
-</style><script>
+</style>
+<script>
 <!--
+var pettanr_current_panel_id = <%= @panel.id -%>;
+
 $( function() {
     $( '#tabs' ) . tabs();
+    $( '#elements-tabs' ) . tabs();
 });
-var panel_attributes = {};
+function confirm_confirm_confirm() {
+  confirm(  );
+};
+function set_tree_value(keys, last_attr, value) {
+  var key = keys.shift();
+  if (keys.length <= 0) {
+    last_attr[key] = value;
+  } else {
+    last_attr[key] = last_attr[key] || {};
+    set_tree_value(keys, last_attr[key], value);
+  }
+};
+function refresh_attribute() {
+  var attr = {};
+  jQuery( 'input' ) . map( function() {
+    if ($(this).attr('tree')) {
+      var keys = $(this).attr('tree').split('_');
+      set_tree_value(keys, attr, $(this).val());
+      $('#pettanr-panel-json').val(JSON.stringify(attr['panels'][pettanr_current_panel_id.toString() ]));
+    }
+  } );
+};
 jQuery( function() {
-    jQuery( '#panel<%= @panel.id -%>' ) . resizable({
+    jQuery( $('#pettanr-panel_' + pettanr_current_panel_id.toString() + '_width') ) . focusout(function(){
+      $('#' + $(this).attr('trace')).width(parseInt( $(this).val()));
+    });
+    jQuery( $('#pettanr-panel_' + pettanr_current_panel_id.toString() + '_height') ) . focusout(function(){
+      $('#' + $(this).attr('trace')).height(parseInt( $(this).val()));
+    });
+    jQuery( $('#pettanr-panel_' + pettanr_current_panel_id.toString() + '_border') ) . focusout(function(){
+      $('#' + $(this).attr('trace')).css('border-width', parseInt($(this).val()).toString() +  'px');
+    });
+} );
+jQuery( function() {
+    jQuery( '#pettanr-panel-submit' ) . focusin(function(){
+      refresh_attribute();
+    });
+    jQuery( '#panel' + pettanr_current_panel_id.toString() ) . resizable({
       stop: function( event, ui ) {
-        var p = $('#panel<%= @panel.id -%>');
-          $("#panel-width").val(p.width());
-        
-        confirm( p.width() );
-        panel_attributes['width'] = this.getAttribute('width');
+        var trace = this.getAttribute('trace');
+        $($('#' + trace + '_width')).val($(this).width());
+        $($('#' + trace + '_height')).val($(this).height());
+  refresh_attribute();
       }
     });
     <% @panel.panel_elements.each do |elm| %>