OSDN Git Service

t#31653:add scenario
[pettanr/pettanr.git] / app / views / panels / _form.html.erb
index 90170af..f99dd66 100644 (file)
-<%= form_for(@panel) do |f| %>
-  <%= render 'system/error_explanation', :obj => @panel %>
+<div id="tabs">
+  <ul>
+    <li><a href="#tabs-1">panel</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>
+    <li><a href="#tabs-5">new</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 %>
+      <div class="field">
+        <%= f.label :caption %><br />
+        <%= f.text_field :caption, :id => @panel.field_tag_id(:caption), :panel_id => @panel.tag_panel_id, :column => :caption, :tree => @panel.field_tree(:caption) -%>
+      </div>
+      <div class="field">
+        <%= f.label :width %><br />
+        <%= f.number_field :width, :id => @panel.field_tag_id(:width), :panel_id => @panel.tag_panel_id, :column => :width, :tree => @panel.field_tree(:width) %>
+      </div>
+      <div class="field">
+        <%= f.label :height %><br />
+        <%= f.number_field :height, :id => @panel.field_tag_id(:height), :panel_id => @panel.tag_panel_id, :column => :height, :tree => @panel.field_tree(:height) %>
+      </div>
+      <div class="field">
+        <%= f.label :border %><br />
+        <%= f.number_field :border, :id => @panel.field_tag_id(:border), :panel_id => @panel.tag_panel_id, :column => :border, :tree => @panel.field_tree(: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}}, {:id => @panel.field_tag_id(:publish), :panel_id => @panel.tag_panel_id, :column => :publish, :tree => @panel.field_tree(:publish)} %>
+      </div>
+      <% unless @panel.new_record?  %>
+        <%= f.hidden_field :id, :id => @panel.field_tag_id(:id), :panel_id => @panel.tag_panel_id, :column => :id, :tree => @panel.field_tree(:id) %>
+      <% end %>
+      <div class="actions">
+        <%= f.submit 'panels.submit', :class => "submit" %>
+      </div>
+    <% end %>
   </div>
-  <div class="field">
-    <%= f.label :height %><br />
-    <%= f.number_field :height %>
+  <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' %>
+              <%= h(truncate(elm.speech.content, :length => 6)) %>
+            <% 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) %>
+              </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' %>
+              <% 
+                speech_balloon = elm
+                speech_balloon_template = speech_balloon.speech_balloon_template
+                balloon = speech_balloon.balloon 
+                speech = speech_balloon.speech 
+                speech_balloon.extend speech_balloon_template.engine_speech_balloon_module
+                balloon.extend speech_balloon_template.engine_balloon_module
+                speech.extend speech_balloon_template.engine_speech_module
+                
+                speech_balloon_extend = speech_balloon.extend_speech_balloon
+                balloon_extend = balloon.extend_balloon
+                speech_extend = speech.extend_speech
+              %>
+              <%= render elm.speech_balloon_template.engine_name + '/speech_balloons/form', :speech_balloon => speech_balloon, :balloon => balloon, :speech => speech, :speech_balloon_extend => speech_balloon_extend, :balloon_extend => balloon_extend, :speech_extend => speech_extend %>
+            <% when 'GroundPicture' %>
+              <%= render 'ground_pictures/form', :ground_picture => elm %>
+            <% when 'GroundColor' %>
+              <%= render 'ground_colors/form', :ground_color => elm %>
+            <% end %>
+          </div>
+        <% end %>
+    </div>
   </div>
-  <div class="field">
-    <%= f.label :border %><br />
-    <%= f.number_field :border %>
+  <div id="tabs-3">
+    <div class="tsort-box">
+      <ul id="<%= @panel.tag_id -%>tsort" class="tsort" panel_id="<%= @panel.tag_panel_id -%>">
+        <% @panel.panel_elements.each do |elm| %>
+          <li panel_id="<%= elm.tag_panel_id -%>" element_id="<%= elm.tag_element_id -%>" element_type="<%= elm.tag_element_type -%>">
+            <% case elm.class.to_s %>
+            <% when 'PanelPicture' %>
+              <span>
+                <%= tag(:img, elm.tmb_opt_img_tag) %>
+              </span>
+            <% when 'SpeechBalloon' %>
+              <span>
+                <%= elm.id -%>
+                <%= h(truncate(elm.speech.content, :length => 12)) -%>
+              </span>
+            <% when 'GroundPicture' %>
+              <span>
+                <%= tag(:img, elm.tmb_opt_img_tag) -%>
+              </span>
+            <% when 'GroundColor' %>
+              <span style="color: #<%= format("%06x", elm.code ^ 0xffffff) -%>; background-color: #<%= format("%06x", elm.code) -%>;">
+                <%= format("%06x", elm.code ^ 0xffffff) %>
+              </span>
+            <% end %>
+            <span>
+              <%= h(truncate(elm.caption, :length => 12)) %>
+            </span>
+          </li>
+        <% end %>
+      </ul>
+    </div>
+    <div id="<%= @panel.tag_id -%>scenario" class="scenario" panel_id="<%= @panel.tag_panel_id -%>">
+      <% @panel.panel_elements.each do |elm| %>
+        <div panel_id="<%= elm.tag_panel_id -%>" element_id="<%= elm.tag_element_id -%>" element_type="<%= elm.tag_element_type -%>">
+          <% case elm.class.to_s %>
+          <% when 'PanelPicture' %>
+            <%= render 'panel_pictures/scenario', :panel_picture => elm %>
+          <% when 'SpeechBalloon' %>
+            <%= render elm.speech_balloon_template.engine_name + '/speech_balloons/scenario', :speech_balloon => elm %>
+          <% when 'GroundPicture' %>
+            <%= render 'ground_pictures/scenario', :ground_picture => elm %>
+          <% when 'GroundColor' %>
+            <%= render 'ground_colors/scenario', :ground_color => elm %>
+          <% end %>
+        </div>
+      <% end %>
+    </div>
+    <div class="tsort-row-break">
+    </div>
   </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 id="tabs-4">
+    <h2><%= 'z reorder' -%></h2>
+    <table id="z-sortable">
+      <tbody >
+      <% @panel.zorderd_elements.each do |elm| %>
+        <tr panel_id="<%= elm.tag_panel_id -%>" element_id="<%= elm.tag_element_id -%>" element_type="<%= elm.tag_element_type -%>">
+          <% 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>
   </div>
-  <div class="actions">
-    <%= f.submit %>
+  <div id="tabs-5">
+    <script>
+    <!--
+      <% SpeechBalloonTemplate.list().each do |sbt| %>
+        var <%= h(sbt.engine_name) %>_settings = <%= raw sbt.parsed_settings.to_json -%>;
+      <% end %>
+    // -->
+    </script>
+    <% SpeechBalloonTemplate.list().each do |sbt| %>
+      <%= stylesheet_link_tag sbt.engine_name + "/application" %>
+      <%= javascript_include_tag sbt.engine_name + "/application" %>
+    <% end %>
   </div>
-<% end %>
-
-<h2><%= t 'panels.create_from_json' -%></h2>
-<%= form_for(@panel) do |f| %>
+</div>
+<%= form_for(@panel, :html => {:jqform => 'pettanr-panel-form'}) do |f| %>
   <%= render 'system/error_explanation', :obj => @panel %>
 
+  <%= text_field_tag "json", '', :id => 'pettanr-panel-json' %>
   <div>
-    <label for="json">json data</label>
-  </div>
-  <%= text_field_tag "json" %>
-  <div>
-    <%= submit_tag t('panels.create_from_json') -%>
-  </div>
-<% end %>
-
-<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>
-          <%= link_to(tag(:img, elm.tmb_opt_img_tag), elm) %>
-        </td>
-      <% when 'SpeechBalloon' %>
-        <td>
-          <%= elm.id -%>
-          <%= elm.caption -%>
-        </td>
-      <% when 'GroundPicture' %>
-        <td>
-          <%= link_to(tag(:img, elm.tmb_opt_img_tag), elm.picture) -%>
-        </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') -%>
+    <%= submit_tag t('panels.create_from_json'), :id => 'pettanr-panel-submit' -%>
   </div>
 <% end %>
 
+<style>
+<!--
+.tsort {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+.tsort li {
+    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;
+}
+.ui-slider .ui-slider-handle {
+       width: 1em;
+  height: 1em;
+}
+.ui-slider-horizontal {
+       height: 0.6em;
+}
+-->
+</style>
 <script>
 <!--
-jQuery( function() {
-    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();
-} );
+var pettanr_current_panel_id = <%= @panel.tag_panel_id -%>;
+
+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);
+  }
+};
 // -->
 </script>