t#31656:destroy element

diff --git a/app/assets/images/destroy-highlighted.png b/app/assets/images/destroy-highlighted.png
new file mode 100644 (file)
index 0000000..7c7fe55
Binary files /dev/null and b/app/assets/images/destroy-highlighted.png differ

diff --git a/app/assets/images/destroy.png b/app/assets/images/destroy.png
new file mode 100644 (file)
index 0000000..82393fb
Binary files /dev/null and b/app/assets/images/destroy.png differ

diff --git a/app/assets/javascripts/panels.js.coffee b/app/assets/javascripts/panels.js.coffee
index 2518981..91a54ca 100644 (file)
--- a/app/assets/javascripts/panels.js.coffee
+++ b/app/assets/javascripts/panels.js.coffee
@@ -1,4 +1,15 @@
 $ ->\r
+  confirm_confirm_confirm = () ->\r
+    confirm(  )\r
+\r
+  set_tree_value = (keys, last_attr, value) ->\r
+    key = keys.shift()\r
+    if keys.length <= 0\r
+      last_attr[key] = value\r
+    else\r
+      last_attr[key] = last_attr[key] || {}\r
+      set_tree_value(keys, last_attr[key], value)\r
+\r
   repeat_texts = ['repeat', 'repeat-x', 'repeat-y', 'no-repeat']\r
   \r
   is_editable = (p) ->\r
@@ -6,6 +17,15 @@ $ ->
       return true\r
     else\r
       return false\r
+  is_tree = (o) ->\r
+    if o.attr('tree') \r
+      if o.attr('column') == '_destroy' and o.val().length < 1\r
+        return false\r
+      else\r
+        return true\r
+      return true\r
+    else\r
+      return false\r
   \r
   panel_tag_id = (element) ->\r
     '#panel' + element.attr('panel_id')\r
@@ -16,15 +36,15 @@ $ ->
   refresh_attribute = () ->\r
     attr = {}\r
     $('input').map ->\r
-      if $(@).attr('tree') \r
+      if is_tree($(@)) \r
         keys = $(@).attr('tree').split('-')\r
         set_tree_value(keys, attr, $(this).val())\r
     $('textarea').map  ->\r
-      if $(@).attr('tree') \r
+      if is_tree($(@)) \r
         keys = $(@).attr('tree').split('-')\r
         set_tree_value(keys, attr, $(this).val())\r
     $('select').map ->\r
-      if $(@).attr('tree') \r
+      if is_tree($(@)) \r
         keys = $(@).attr('tree').split('-')\r
         set_tree_value(keys, attr, $(this).val())\r
     $('#pettanr-panel-json').val(JSON.stringify(attr['panels'][pettanr_current_panel_id.toString() ]))\r
@@ -35,6 +55,33 @@ $ ->
   $("#elements-tabs li").removeClass("ui-corner-top")\r
   $("#elements-tabs li").addClass("ui-corner-left")\r
   \r
+  #destroy button\r
+  $('.ui-icon-destroy').map ->\r
+    $(@).button {\r
+      icons: {\r
+        primary: 'ui-icon-close', \r
+        secondary: null\r
+      }, \r
+      text: false\r
+    }\r
+    $(@).click -> \r
+      if confirm('destroy ?')\r
+        trace = element_tag_id($(@))\r
+        $(trace + '_destroy').val('true')\r
+        panel_trace = panel_tag_id($(@))\r
+        update_t(panel_trace + 'tsort')\r
+        update_z(panel_trace + 'zsort')\r
+        # sync\r
+        $(trace + 'element_tab').css('display', 'none')\r
+        $(trace + 'tab_panel').css('display', 'none')\r
+        $(trace + 'zsort').css('display', 'none')\r
+        $(trace + 'tsort').css('display', 'none')\r
+        switch $(@).attr('element_type')\r
+          when 'panel_picture'\r
+            trace = trace + 'div'\r
+        $(trace).css('display', 'none')\r
+        \r
+  \r
   $('#pettanr-panel-submit').focusin ->\r
     refresh_attribute()\r
   \r
@@ -78,8 +125,8 @@ $ ->
         img = '#panel' + $(@).attr('panel_id') + 'panel_picture' + $(@).attr('element_id') + 'img'\r
         left = $(img).parent().position().left + $(@).position().left\r
         top = $(img ).parent().position().top + $(@).position().top\r
-        $(trace + 'x').val(left)\r
-        $(trace + 'y').val(top)\r
+        $(trace + 'x').val(parseInt(left))\r
+        $(trace + 'y').val(parseInt(top))\r
     }\r
   \r
   $('.panel-picture').map ->\r
@@ -141,8 +188,8 @@ $ ->
         trace = '#panel' + $(@).attr('panel_id') + 'speech_balloon' + $(@).attr('element_id') + 'balloon' + $(@).attr('balloon_id')\r
         left = $(@).position().left\r
         top = $(@).position().top\r
-        $(trace + 'x').val(left)\r
-        $(trace + 'y').val(top)\r
+        $(trace + 'x').val(parseInt(left))\r
+        $(trace + 'y').val(parseInt(top))\r
     }\r
 \r
   \r
@@ -263,49 +310,46 @@ $ ->
       v = code & 0xFF\r
       $(@).slider('value', v)\r
   \r
+  update_t = (ultrace) -> \r
+    t = 0\r
+    $(ultrace + ' li').map ->\r
+      trace = element_tag_id($(@))\r
+      if $(trace + '_destroy').val().length < 1\r
+        $(trace + 't').val(t)\r
+        t++\r
+      else\r
+  \r
   $('.tsort').map -> \r
     $(@).sortable {\r
       update: ( event, ui ) ->\r
         trace = panel_tag_id($(@))\r
-        ul = $(@).attr('id')\r
-        t = 0\r
-        $('#' + ul + ' li').map ->\r
-          pid = $(@).attr('panel_id')\r
-          eid = $(@).attr('element_id')\r
-          etp = $(@).attr('element_type')\r
-          tid = '#panel' + pid + etp + eid\r
-          # update input\r
-          trace = tid + 't'\r
-          $(trace).val(t)\r
-          t++\r
+        update_t(trace + 'tsort')\r
     }\r
-  $('#t-sortable tbody').disableSelection()\r
-  \r
-  $('#z-sortable tbody').sortable {\r
+  $('.t-sort li').map -> \r
+    $(@).disableSelection()\r
+  \r
+  update_z = (ultrace) -> \r
+    z = 1\r
+    $(ultrace + ' li').map ->\r
+      trace = element_tag_id($(@))\r
+      # update panel\r
+      if $(trace + '_destroy').val().length < 1\r
+        $(trace + 'z').val(z)\r
+        switch $(@).attr('element_type')\r
+          when 'panel_picture'\r
+            trace = trace + 'div'\r
+        $(trace).css('zIndex', z)\r
+        z++\r
+      else\r
+  \r
+  $('.zsort').map -> \r
+    $(@).sortable {\r
       update: ( event, ui ) ->\r
-        z = 1;\r
-        $('#z-sortable tr').map ->\r
-          pid = $(@).attr('panel_id')\r
-          eid = $(@).attr('element_id')\r
-          etp = $(@).attr('element_type')\r
-          tid = '#panel' + pid + etp + eid\r
-          # update input\r
-          trace = tid + 'z'\r
-          $(trace).val(z)\r
-          # update panel\r
-          switch etp\r
-            when 'panel_picture'\r
-              trace = tid + 'div'\r
-            when 'speech_balloon'\r
-              trace = tid\r
-            when 'ground_picture'\r
-              trace = tid\r
-            when 'ground_color'\r
-              trace = tid\r
-          $(trace).css('zIndex', z)\r
-          z++\r
-  }\r
-  $('#t-sortable tbody').disableSelection()\r
+        trace = panel_tag_id($(@))\r
+        update_z(trace + 'zsort')\r
+    }\r
+  $('.z-sort li').map -> \r
+    $(@).disableSelection()\r
   \r
   $('.panel_picture_width_tool').map ->\r
     $(@).html('<button class="wreverse">Rev</button><button class="wdouble">x2</button><button class="whalf">/2</button>')\r

diff --git a/app/assets/stylesheets/test.css b/app/assets/stylesheets/test.css.scss
similarity index 88%
rename from app/assets/stylesheets/test.css
rename to app/assets/stylesheets/test.css.scss
index e7602e9..68cea16 100644 (file)
--- a/app/assets/stylesheets/test.css
+++ b/app/assets/stylesheets/test.css.scss
@@ -135,6 +135,22 @@ div.md5 {
     font-weight: bold;
     cursor: move;
 }
+.tsort-row-break {
+  clear: both;
+}
+.zsort {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+.zsort 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;
@@ -213,3 +229,13 @@ div.md5 {
        white-space: -hp-pre-wrap;  /* HP Printers */
        word-wrap: break-word;      /* IE 5+ */
 }
+.ui-button .ui-icon.ui-icon-destroy {
+  width: 16px; 
+  height: 16px; cursor: pointer; 
+  background-image: image-url("destroy.png") !important;
+}
+.ui-button.ui-state-hover .ui-icon.ui-icon-destroy {
+  width: 16px; 
+  height: 16px; cursor: pointer; 
+  background-image: image-url("destroy-highlighted.png");
+}

diff --git a/app/models/balloon.rb b/app/models/balloon.rb
index 7ca441c..2947caa 100644 (file)
--- a/app/models/balloon.rb
+++ b/app/models/balloon.rb
@@ -72,7 +72,7 @@ self.system_picture_id = 1
     r = if self.get_speech_balloon == nil or self.get_speech_balloon.new_record?
       0
     else
-      self.get_speech_balloon.panel.id
+      self.get_speech_balloon.id
     end
     r.to_s
   end

diff --git a/app/models/speech.rb b/app/models/speech.rb
index 8184772..3ec0c27 100644 (file)
--- a/app/models/speech.rb
+++ b/app/models/speech.rb
@@ -63,7 +63,7 @@ class Speech < ActiveRecord::Base
     r = if self.get_speech_balloon == nil or self.get_speech_balloon.new_record?
       0
     else
-      self.get_speech_balloon.panel.id
+      self.get_speech_balloon.id
     end
     r.to_s
   end

diff --git a/app/views/balloons/list.html.erb b/app/views/balloons/list.html.erb
index 2486573..826e51f 100644 (file)
--- a/app/views/balloons/list.html.erb
+++ b/app/views/balloons/list.html.erb
@@ -10,7 +10,6 @@
     <th><%= t_m 'Balloon.width' -%></th>
     <th><%= t_m 'Balloon.height' -%></th>
     <th><%= t_m 'Balloon.r' -%></th>
-    <th><%= t_m 'Balloon.caption' -%></th>
     <th><%= t_m 'Balloon.settings' -%></th>
     <th><%= t_m 'Balloon.created_at' -%></th>
     <th><%= t_m 'Balloon.updated_at' -%></th>
@@ -26,7 +25,6 @@
       <td><%= balloon.width %></td>
       <td><%= balloon.height %></td>
       <td><%= balloon.r %></td>
-      <td><%= h(truncate(balloon.caption, :length => 12)) %></td>
       <td><%= h(truncate(balloon.settings, :length => 12)) %></td>
       <td><%= l balloon.created_at %></td>
       <td><%= l balloon.updated_at %></td>

diff --git a/app/views/panels/_form.html.erb b/app/views/panels/_form.html.erb
index 09f3d44..3401695 100644 (file)
--- a/app/views/panels/_form.html.erb
+++ b/app/views/panels/_form.html.erb
@@ -42,36 +42,40 @@
     <div id="elements-tabs">
       <ul>
         <% @panel.panel_elements.each do |elm| %>
-          <li><a href="#elements-tabs-<%= elm.t -%>">
-            <div class="elements-tab">
-              <% case elm.class.to_s %>
-              <% when 'PanelPicture' %>
-                  <%= tag(:img, elm.tmb_opt_img_tag) %>
-                <p class="elements-tab-caption">
-                  <% -%>
-                  <%= h(truncate(elm.caption, :length => 15)) -%>
-                </p>
-              <% when 'SpeechBalloon' %>
-                  <%= tag(:img, elm.speech_balloon_template.system_picture.tmb_opt_img_tag) %>
-                <p class="elements-tab-caption"><%= h(truncate(elm.caption, :length => 15)) -%>
-                  <br><%= h(truncate(elm.speech.content, :length => 15)) -%>
-                </p>
-              <% when 'GroundPicture' %>
-                  <%= tag(:img, elm.tmb_opt_img_tag) -%>
-                <p class="elements-tab-caption"><%= h(truncate(elm.caption, :length => 15)) -%>
-                </p>
-              <% when 'GroundColor' %>
-                <div style="color: #<%= format("%06x", elm.code ^ 0xffffff) -%>; background-color: #<%= format("%06x", elm.code) -%>; width: 48px; height: 48px; ">
-                  <%= format("%06x", elm.code) %>
-                </div>
-                <p class="elements-tab-caption"><%= h(truncate(elm.caption, :length => 15)) -%>
-                </p>
-              <% end %>
-            </div>
-          </a></li>
+          <li id="<%= elm.field_tag_id(:element_tab) -%>">
+            <a href="#elements-tabs-<%= elm.t -%>">
+              <div class="elements-tab">
+                <% case elm.class.to_s %>
+                <% when 'PanelPicture' %>
+                    <%= tag(:img, elm.tmb_opt_img_tag) %>
+                  <p class="elements-tab-caption">
+                    <% -%>
+                    <%= h(truncate(elm.caption, :length => 15)) -%>
+                  </p>
+                <% when 'SpeechBalloon' %>
+                    <%= tag(:img, elm.speech_balloon_template.system_picture.tmb_opt_img_tag) %>
+                  <p class="elements-tab-caption"><%= h(truncate(elm.caption, :length => 15)) -%>
+                    <br><%= h(truncate(elm.speech.content, :length => 15)) -%>
+                  </p>
+                <% when 'GroundPicture' %>
+                    <%= tag(:img, elm.tmb_opt_img_tag) -%>
+                  <p class="elements-tab-caption"><%= h(truncate(elm.caption, :length => 15)) -%>
+                  </p>
+                <% when 'GroundColor' %>
+                  <div style="color: #<%= format("%06x", elm.code ^ 0xffffff) -%>; background-color: #<%= format("%06x", elm.code) -%>; width: 48px; height: 48px; ">
+                    <%= format("%06x", elm.code) %>
+                  </div>
+                  <p class="elements-tab-caption"><%= h(truncate(elm.caption, :length => 15)) -%>
+                  </p>
+                <% end %>
+             </div>
+            </a>
+            <button class="ui-icon-destroy" id="<%= elm.field_tag_id(:_destroy_button) -%>" panel_id="<%= elm.tag_panel_id -%>" element_id="<%= elm.tag_element_id -%>" element_type="<%= elm.tag_element_type -%>"></button>
+          </li>
         <% end %>
       </ul>
-        <% @panel.panel_elements.each do |elm| %>
+      <% @panel.panel_elements.each do |elm| %>
+        <div id="<%= elm.field_tag_id(:tab_panel) -%>" panel_id="<%= elm.tag_panel_id -%>" element_id="<%= elm.tag_element_id -%>" element_type="<%= elm.tag_element_type -%>">
           <div id="elements-tabs-<%= elm.t -%>">
             <% case elm.class.to_s %>
             <% when 'PanelPicture' %>
@@ -96,15 +100,17 @@
             <% when 'GroundColor' %>
               <%= render 'ground_colors/form', :ground_color => elm %>
             <% end %>
+            <%= hidden_field_tag '_destroy', '', :id => elm.field_tag_id(:_destroy), :panel_id => elm.tag_panel_id, :element_id => elm.tag_element_id, :element_type => elm.tag_element_type, :column => :_destroy, :tree => elm.field_tree(:_destroy) %>
           </div>
-        <% end %>
+        </div>
+      <% end %>
     </div>
   </div>
   <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 -%>">
+          <li id="<%= elm.field_tag_id(:tsort) -%>" 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>
@@ -151,37 +157,36 @@
     </div>
   </div>
   <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 class="zsort-box">
+      <ul id="<%= @panel.tag_id -%>zsort" class="zsort" panel_id="<%= @panel.tag_panel_id -%>">
+        <% @panel.zorderd_elements.each do |elm| %>
+          <li id="<%= elm.field_tag_id(:zsort) -%>" 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 -%>
+                <%= elm.caption -%>
+              </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>
   <div id="tabs-5">
     <script>
@@ -205,22 +210,8 @@
     <%= submit_tag t('panels.create_from_json'), :id => 'pettanr-panel-submit' -%>
   </div>
 <% end %>
-
 <script>
 <!--
 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>

diff --git a/app/views/speech_balloons/list.html.erb b/app/views/speech_balloons/list.html.erb
index 59a0a0b..501123a 100644 (file)
--- a/app/views/speech_balloons/list.html.erb
+++ b/app/views/speech_balloons/list.html.erb
@@ -8,6 +8,7 @@
     <th><%= t_m 'SpeechBalloon.classname' -%></th>
     <th><%= t_m 'SpeechBalloon.z' -%></th>
     <th><%= t_m 'SpeechBalloon.t' -%></th>
+    <th><%= t_m 'SpeechBalloon.caption' -%></th>
     <th><%= t_m 'SpeechBalloon.settings' -%></th>
     <th><%= t_m 'SpeechBalloon.created_at' -%></th>
     <th><%= t_m 'SpeechBalloon.updated_at' -%></th>
@@ -21,6 +22,7 @@
       <td><%= h(truncate(speech_balloon.classname, :length => 12)) %></td>
       <td><%= speech_balloon.z %></td>
       <td><%= speech_balloon.t %></td>
+      <td><%= h(truncate(speech_balloon.caption, :length => 12)) %></td>
       <td><%= h(truncate(speech_balloon.settings, :length => 12)) %></td>
       <td><%= l speech_balloon.created_at %></td>
       <td><%= l speech_balloon.updated_at %></td>