OSDN Git Service

#31540:try sort
authoryasushiito <yas@pen-chan.jp>
Wed, 12 Jun 2013 10:44:02 +0000 (19:44 +0900)
committeryasushiito <yas@pen-chan.jp>
Wed, 12 Jun 2013 10:44:02 +0000 (19:44 +0900)
app/models/panel.rb
app/models/panel_picture.rb
app/views/panels/_body.html.erb
app/views/panels/_form.html.erb
app/views/panels/edit.html.erb
spec/models/panel_spec.rb

index 2167d93..6aaf3c5 100644 (file)
@@ -179,6 +179,14 @@ class Panel < ActiveRecord::Base
     res
   end
   
+  def zorderd_elements
+    res = []
+    self.parts_element.each do |e|
+      res[e.z-1] = e
+    end
+    res
+  end
+  
   def panel_elements
     parts
   end
index ba59920..59f04a9 100644 (file)
@@ -63,7 +63,7 @@ class PanelPicture < ActiveRecord::Base
   
   def opt_img_tag spot = nil, opacity = 20
     o = (spot and spot != self) ? "opacity: #{opacity.to_f/100}; filter:alpha(opacity=#{opacity});" : ''
-    {:src => self.url, :vPicture => self.id, :width => self.width.abs, :height => self.height.abs, :alt => self.caption, :style => "top:#{self.y}px; left:#{self.x}px; z-index:#{self.z}; #{o}"}
+    {:src => self.url, :id => "panel-picture#{self.id}", :vPicture => self.id, :width => self.width.abs, :height => self.height.abs, :alt => self.caption, :style => "top:#{self.y}px; left:#{self.x}px; z-index:#{self.z}; #{o}"}
   end
   
   def tmb_opt_img_tag
index 3e813b5..3a024aa 100644 (file)
@@ -1,12 +1,14 @@
-<div class="pettanr-comic-panel" style="width:<%= panel.width %>px;height:<%= panel.height %>px;border-style: solid;border-width: <%= panel.border %>px;border-color:black; background-color:white;">
+<div id="panel<%= panel.id -%>" class="pettanr-comic-panel" style="width:<%= panel.width %>px;height:<%= panel.height %>px;border-style: solid;border-width: <%= panel.border %>px;border-color:black; background-color:white;">
   <% panel.panel_elements.each do |elm| %>
     <% case elm.class.to_s %>
     <% when 'PanelPicture' %>
-      <%= link_to_unless(elm.link.blank?, tag(:img, elm.opt_img_tag(spot)), elm.link) %>
+      <div id="vpicture<%= elm.id -%>">
+        <%= link_to_unless(elm.link.blank?, tag(:img, elm.opt_img_tag(spot)), elm.link) %>
+      </div>
     <% when 'SpeechBalloon' %>
       <div id="vballoon<%= elm.id -%>" class="pettanr-comic-balloon" style="width:<%= elm.balloon.width -%>px; height:<%= elm.balloon.height -%>px; top:<%= elm.balloon.y -%>px; left:<%= elm.balloon.x -%>px; z-index:<%= elm.z -%>; ">
-        <img src="<%= elm.balloon.system_picture.url -%>" alt="<%= elm.caption -%>">
-        <p style="top:<%= elm.speech.y -%>px; left:<%= elm.speech.x -%>px;width:<%= elm.speech.width -%>px; height:<%= elm.speech.height -%>px;">
+        <img id="balloon<%= elm.id -%>" src="<%= elm.balloon.system_picture.url -%>" alt="<%= elm.caption -%>">
+        <p style="top:<%= elm.speech.y -%>%; left:<%= elm.speech.x -%>%;width:<%= elm.speech.width -%>%; height:<%= elm.speech.height -%>%;">
           <span><%= h elm.speech.content -%></span>
         </p>
       </div>
index 90170af..fb8ce51 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">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 %>
-  </div>
-  <div class="field">
-    <%= f.label :height %><br />
-    <%= f.number_field :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 %>
+      <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 %>
 
-<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>
+        <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>
-  <%= text_field_tag "json" %>
-  <div>
-    <%= submit_tag t('panels.create_from_json') -%>
+  <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>
-<% end %>
+</div>
 
-<h2><%= 't reorder' -%></h2>
-<table id="t-sortable">
-  <tbody >
-  <% @panel.panel_elements.each do |elm| %>
-    <tr classname="<%= elm.class.to_s -%>" oid="<%= elm.id -%>">
+<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' %>
-        <td>
-          <%= link_to(tag(:img, elm.tmb_opt_img_tag), elm) %>
-        </td>
+        jQuery( '#vpicture<%= elm.id -%>' ) . draggable();
+        jQuery( '#panel-picture<%= elm.id -%>' ) . resizable({handles: 'all'});
       <% when 'SpeechBalloon' %>
-        <td>
-          <%= elm.id -%>
-          <%= elm.caption -%>
-        </td>
+        jQuery( '#vballoon<%= elm.id -%>' ) . draggable();
+        jQuery( '#balloon<%= elm.id -%>' ) . resizable({handles: 'all'});
       <% 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') -%>
-  </div>
-<% end %>
-
-<script>
-<!--
-jQuery( function() {
+    <% end %>
     jQuery( '#t-sortable tbody' ) . sortable( {
         update: function( event, ui ) {
           var panel_pictures_attributes = {};
@@ -120,6 +215,44 @@ jQuery( function() {
         }
     } );
     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>
index bc01cd6..f597982 100644 (file)
@@ -1,6 +1,7 @@
 <h1><%= t '.title' -%></h1>
 <p id="notice"><%= notice %></p>
 
-<%= render 'standard', :panel => @panel, :author => @author %>
+<%= render 'panels/body', :panel => @panel, :author => @author, :spot => nil %>
 <%= render 'form' %>
 <%= link_to t('link.destroy'), panel_path(@panel), :method => :delete %>
+<%= render 'panels/licensed_pictures', :licensed_pictures => @panel.licensed_pictures %>
index 17714c3..7542b20 100644 (file)
@@ -836,6 +836,59 @@ describe Panel do
       end\r
     end\r
   end\r
+  \r
+  describe 'z順コマ部品に於いて' do\r
+    before do\r
+      #コマを作成しておく。\r
+      @panel = FactoryGirl.create :panel, :author_id => @author.id\r
+      @pp = FactoryGirl.create :panel_picture, :panel_id => @panel.id, :t => 0, :z => 2, :width => @p.width, :height => @p.height\r
+      @sb = @panel.speech_balloons.create(\r
+        FactoryGirl.attributes_for(:speech_balloon, :panel_id => @panel.id, :speech_balloon_template_id => @sbt.id, :t => 1, :z => 1)\r
+      )\r
+      @gc = @panel.ground_colors.create(\r
+        FactoryGirl.attributes_for(:ground_color, :panel_id => @panel.id, :t => 2, :z => 3)\r
+      )\r
+      @gp = @panel.ground_pictures.create(\r
+        FactoryGirl.attributes_for(:ground_picture, :panel_id => @panel.id, :picture_id => @p.id, :t => 3, :z => 4)\r
+      )\r
+      @panel.reload\r
+    end\r
+    context 'つつがなく終わるとき' do\r
+      it 'コマ部品集合を利用している' do\r
+        Panel.any_instance.stub(:parts_element).with(any_args).and_return([])\r
+        Panel.any_instance.should_receive(:parts_element).with(any_args).exactly(1)\r
+        r = @panel.zorderd_elements\r
+      end\r
+    end\r
+    it 'リストを返している' do\r
+      r = @panel.zorderd_elements\r
+      r.is_a?(Array).should be_true\r
+      r.size.should eq 4\r
+    end\r
+    it 'zでオフセットを0でソートしている' do\r
+      r = @panel.zorderd_elements\r
+      r[0].should eq @sb\r
+      r[1].should eq @pp\r
+      r[2].should eq @gc\r
+      r[3].should eq @gp\r
+    end\r
+    context 'さらに末尾にフキダシを追加したとき' do\r
+      before do\r
+        @sb2 = @panel.speech_balloons.create(\r
+          FactoryGirl.attributes_for(:speech_balloon, :panel_id => @panel.id, :speech_balloon_template_id => @sbt.id, :t => 4, :z => 5)\r
+        )\r
+        @panel.reload\r
+      end\r
+      it 'zでソートしている' do\r
+        r = @panel.zorderd_elements\r
+        r[0].should eq @sb\r
+        r[1].should eq @pp\r
+        r[2].should eq @gc\r
+        r[3].should eq @gp\r
+        r[4].should eq @sb2\r
+      end\r
+    end\r
+  end\r
   describe 'コマ要素に於いて' do\r
     before do\r
       #コマを作成しておく。\r