-<div id="tabs">
+<div id="template" >
+</div>
+<div id="tabs" class="panel-editor" panel_id="<%= @panel.tag_panel_id -%>" current="1">
<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 id="tabs-1-tab"><a href="#tabs-1">panel</a></li>
+ <li id="tabs-2-tab"><a href="#tabs-2">elements</a></li>
+ <li id="tabs-3-tab"><a href="#tabs-3">t order</a></li>
+ <li id="tabs-4-tab"><a href="#tabs-4">z order</a></li>
+ <li id="tabs-5-tab"><a href="#tabs-5">new</a></li>
</ul>
<div id="tabs-1">
- <%= form_for(@panel) do |f| %>
+ <%= form_for(@panel, :html => @panel.tag_attributes('form', 'data-form-name' => 'panel')) do |f| %>
<%= render 'system/error_explanation', :obj => @panel %>
<div class="field">
- <%= f.label :caption %><br />
- <%= f.text_field :caption, :id => 'pettanr-panel_' + @panel.id.to_s + '_caption', :tree => 'panels_' + @panel.id.to_s + '_caption' -%>
+ <%= f.label :caption %>
+ <%= f.text_field :caption, @panel.field_tag_attributes(:caption, 'data-model' => 'panel') -%>
</div>
- <div class="field">
- <%= f.label :width %><br />
- <%= 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 class="row_break">
</div>
<div class="field">
- <%= f.label :height %><br />
- <%= 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 %>
+ <%= f.label :width %>
+ <%= f.number_field :width, @panel.field_tag_attributes(:width, :size => 5, 'data-model' => 'panel') %>
</div>
<div class="field">
- <%= f.label :border %><br />
- <%= 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 %>
+ <%= f.label :height %>
+ <%= f.number_field :height, @panel.field_tag_attributes(:height, :size => 5, 'data-model' => 'panel') %>
+ </div>
+ <div class="row_break">
</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}, :tree => 'panels_' + @panel.id.to_s + '_caption' %>
+ <%= f.label :border %>
+ <%= f.number_field :border, @panel.field_tag_attributes(:border, :size => 5, 'data-model' => 'panel') %>
</div>
- <div class="actions">
- <%= f.submit %>
+ <div class="field">
+ <%= f.label :publish %>
+ <%= f.select :publish, t_select_items(manifest.select_items['magic_number']['panel_visible_items']), *@panel.select_tag_attributes(@panel.publish, :publish, 'data-model' => 'panel') %>
</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 class="row_break">
</div>
- <%= text_field_tag "json", '', :id => 'pettanr-panel-json' %>
- <div>
- <%= submit_tag t('panels.create_from_json'), :id => 'pettanr-panel-submit' -%>
+ <% unless @panel.new_record? %>
+ <%= f.hidden_field :id, @panel.field_tag_attributes(:id, 'data-model' => 'panel') %>
+ <% end %>
+ <div class="actions">
+ <%= f.submit 'panels.submit', :class => "submit" %>
</div>
<% end %>
</div>
<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>
+ <%= render 'element_tab', :elm => elm %>
<% 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 %>
+ <% mounted = true %>
+ <% @panel.panel_elements.each do |element| %>
+ <div <%= raw element.tag_attr(:tab_panel) -%>>
+ <div id="elements-tabs-<%= element.t -%>">
+ <% form_manager = Pettanr::Application::manifest.form_managers[element.form_name] %>
+ <% form = form_manager.open element, @operators, mounted %>
+ <%= render 'element_form', :form => form %>
+ <%= hidden_field_tag '_destroy', '', element.field_tag_attributes(:_destroy, 0) %>
</div>
- <% end %>
+ </div>
+ <% end %>
</div>
</div>
<div id="tabs-3">
- <h2><%= 't reorder' -%></h2>
- <table id="t-sortable">
- <tbody >
+ <div class="tsort-box">
+ <ul class="tsort tsort-tabs-nav" <%= raw @panel.tag_attr(:tsort) -%>>
+ <% @panel.panel_elements.each do |elm| %>
+ <li <%= raw elm.tag_attr(:tsort) -%>>
+ <div class="elements-tab">
+ <%= render elm.path_name + '/element_face', :elm => elm %>
+ </div>
+ </li>
+ <% end %>
+ </ul>
+ </div>
+ <div class="scenario" <%= raw @panel.tag_attr(:scenario) -%>>
<% @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 -%>
+ <div <%= raw elm.tag_attr() -%>>
+ <%= render elm.scenario_template, :elm => elm, :no_attr => 0 %>
+ </div>
<% end %>
- <div>
- <%= submit_tag t('panels.create.title') -%>
- </div>
- <% end %>
+ </div>
+ <div class="tsort-row-break">
+ </div>
</div>
<div id="tabs-4">
- <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 -%>
+ <div class="zsort-box">
+ <ul class="zsort zsort-tabs-nav" <%= raw @panel.tag_attr(:zsort) -%>>
+ <% @panel.zorderd_elements.each do |elm| %>
+ <li <%= raw elm.tag_attr(:zsort) -%>>
+ <div class="elements-tab">
+ <%= render elm.class.to_s.tableize + '/element_face', :elm => elm %>
+ </div>
+ </li>
+ <% end %>
+ </ul>
+ </div>
+ </div>
+ <div id="tabs-5">
+ <div id="new-element-tabs">
+ <ul>
+ <% i = 0 %>
+ <% Panel.each_element_classes do |k| %>
+ <li>
+ <a href="#new-element-tabs-<%= i -%>">
+ <div class="new-element-tab">
+ <%= t_m k.to_s %>
+ </div>
+ </a>
+ </li>
+ <% i += 1 %>
+ <% end %>
+ </ul>
+ <% i = 0 %>
+ <% mounted = false %>
+ <% Panel.each_element_classes do |k| %>
+ <div>
+ <div id="new-element-tabs-<%= i -%>">
+ <% case k.to_s %>
+ <% when 'PanelPicture' %>
+ <% when 'SpeechBalloon' %>
+ <div id="new-speech_balloon-tabs">
+ <ul>
+ <% SpeechBalloonTemplate.enable_list().each_with_index do |sbt, index| %>
+ <li>
+ <a href="#new-speech_balloon-tabs-<%= index -%>">
+ <div class="new-speech_balloon-tab">
+ <%= tag(:img, sbt.system_picture.tmb_opt_img_tag) %>
+ <div>
+ <%= h(sbt.caption) %>
+ </div>
+ </div>
+ </a>
+ </li>
+ <% end %>
+ </ul>
+ <% SpeechBalloonTemplate.enable_list().each_with_index do |sbt, index| %>
+ <div id="new-speech_balloon-tabs-<%= index -%>">
+ <% elm = SpeechBalloon.new :panel_id => @panel.id, :speech_balloon_template_id => sbt.id %>
+ <%
+ elm.new_panel = @panel
+ elm.boost
+ elm.supply_default
+ elm.balloon.supply_default
+ elm.speech.supply_default
+ %>
+ <%# render elm.form_template, :elm => elm, :no_attr => 1 %>
+ </div>
+ <% end %>
+ <% when 'GroundPicture' %>
+ <% when 'GroundColor' %>
+ <% element = GroundColor.new :panel_id => @panel.id %>
+ <% element.new_panel = @panel ; element.boost ; element.supply_default %>
+ <% form_manager = Pettanr::Application::manifest.form_managers[element.form_name] %>
+ <% form = form_manager.open element, @operators, mounted %>
+ <%= render 'element_form', :form => form %>
+ <% end %>
+ </div>
+ </div>
+ <% i += 1 %>
<% end %>
- <div>
- <%= submit_tag t('panels.create.title') -%>
- </div>
- <% end %>
+ </div>
</div>
</div>
+<%= form_for(@panel, :html => {:jqform => 'pettanr-panel-form'}) do |f| %>
+ <%= render 'system/error_explanation', :obj => @panel %>
-<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>
-<!--
-var pettanr_current_panel_id = <%= @panel.id -%>;
-
-$( function() {
- $( '#tabs' ) . tabs();
- $( '#elements-tabs' ) . tabs();
-});
-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( $('#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 trace = this.getAttribute('trace');
- $($('#' + trace + '_width')).val($(this).width());
- $($('#' + trace + '_height')).val($(this).height());
- refresh_attribute();
- }
- });
- <% @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>
+ <%= text_field_tag "json", '', :id => 'pettanr-panel-json' %>
+ <div>
+ <%= submit_tag t('panels.create_from_json'), :id => 'pettanr-panel-submit' -%>
+ </div>
+<% end %>
+<div id="writing_formats">
+ <% WritingFormat.enable_list().each do |wf| %>
+ <div id="writing_format-<%= wf.id -%>" writing_format_id="<%= wf.id -%>" writing_format_engine_name="<%= wf.engine_name -%>">
+ </div>
+ <% end %>
+</div>
+<div id="speech_balloon_templates">
+ <% SpeechBalloonTemplate.enable_list().each do |sbt| %>
+ <div id="speech_balloon_template-<%= sbt.id -%>" speech_balloon_template_id="<%= sbt.id -%>" engine_name="<%= sbt.engine_name -%>" settings="<%= sbt.parsed_settings.to_json -%>">
+ </div>
+ <% end %>
+</div>
+<div <%= raw @panel.tag_attr('popup') -%> style="display: none;" >
+</div>
OSDN Git Service
