-<%= form_tag( {:controller => 'panels',:action => "create"}) do %>
- <% if @panel.errors.any? %>
- <div id="error_explanation">
- <h2><%= pluralize(@panel.errors.count, "error") %> prohibited this panel from being saved:</h2>
+<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 %>
- <ul>
- <% @panel.errors.full_messages.each do |msg| %>
- <li><%= msg %></li>
- <% end %>
- </ul>
- </div>
- <% end %>
- <label for="json">json data</label> <%= text_field_tag "json" %>
- <%= submit_tag 'upload' -%>
-<% end -%>
+ <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>
+ <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>
+ <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>
OSDN Git Service
