fix the handling for textilized (generated content) blocks

app/assets/javascripts/my_project_page/my_project_page.js

@@ -18,7 +18,8 @@
 // See doc/COPYRIGHT.md for more details.
 //++
 
-/*globals jQuery, I18n*/
+/* globals jQuery, $$, $, Sortable, Effect, Form */
+/* jshint camelcase: false */
 
 (function($) {
   // $ is prototype
@@ -26,12 +27,12 @@
 
   function recreateSortables() {
     var lists = $$('.list-position'),
-        containedPositions = function() {
+        containedPositions = (function() {
           var positions = _.map(lists, function(list) {
-            return list.readAttribute('id')
+            return list.readAttribute('id');
           });
           return _.uniq(positions);
-        }(),
+        }()),
         destroy = function destroy(list) {
           var id = list.readAttribute('id');
           Sortable.destroy(id);
@@ -44,7 +45,7 @@
             dropOnEmpty: true,
             handle: 'handle',
             onUpdate: function updatePosition() {
-              new Ajax. Request(url, {
+              new Ajax.Request(url, {
                 asynchronous: true,
                 evalScripts: true,
                 parameters: Sortable.serialize(id)
@@ -61,41 +62,41 @@
   }
 
   function updateSelect() {
-      s = $('block-select')
-      for (var i = 0; i < s.options.length; i++) {
-          if ($('block_' + s.options[i].value)) {
-              s.options[i].disabled = true;
-          } else {
-              s.options[i].disabled = false;
-          }
+    var s = $('block-select');
+    for (var i = 0; i < s.options.length; i++) {
+      if ($('block_' + s.options[i].value)) {
+        s.options[i].disabled = true;
+      } else {
+        s.options[i].disabled = false;
       }
-      s.options[0].selected = true;
+    }
+    s.options[0].selected = true;
   }
 
   function afterAddBlock(response) {
-      recreateSortables();
-      updateSelect();
-      editTextilizable(extractBlockName(response));
-      new Effect.ScrollTo('list-hidden');
+    recreateSortables();
+    updateSelect();
+    editTextilizable(extractBlockName(response));
+    new Effect.ScrollTo('list-hidden');
   }
 
   function extractBlockName(response) {
-      return response.responseText.match(/id="block_(.*?)"/)[1];
+    return response.responseText.match(/id="block_(.*?)"/)[1];
   }
 
   function resetTextilizable(name) {
-      $("textile_" + name).setValue(window["page_layout-textile" + name] + "");
-      toggleTextilizableVisibility(name);
-      return false;
+    $('textile_' + name).setValue(window['page_layout-textile' + name] + '');
+    toggleTextilizableVisibility(name);
+    return false;
   }
 
   function editTextilizable(name) {
-      var textile_name = $("textile_" + name);
-      if (textile_name != null) {
-        window["page_layout-textile" + name] = textile_name.getValue();
-        toggleTextilizableVisibility(name);
-      }
-      return false;
+    var textile_name = $('textile_' + name);
+    if (textile_name !== null) {
+      window['page_layout-textile' + name] = textile_name.getValue();
+      toggleTextilizableVisibility(name);
+    }
+    return false;
   }
 
   function toggleTextilizableVisibility(name) {
@@ -129,23 +130,52 @@
         trigger: '.all',
         indicator_class: 'ajax-indicator',
         load_target: '#users_per_role',
-        loading_text: I18n.t("js.ajax.loading"),
+        loading_text: I18n.t('js.ajax.loading'),
         loading_class: 'box loading'
       });
 
       // this was previously bound in the template directly
       $('#block-select').on('change', addBlock);
 
-      //initialize the fun!
+      // we need to rebind some of the links constantly, as the content is generated
+      // on the page
+      function updateBlockLinks() {
+        function getBlockName(element) {
+          var blockName = element.data('block-name');
+          if (!blockName) {
+            throw new Error('no block name found for element');
+          }
+          return blockName;
+        }
+
+        // bind textilizable block links
+        $('a.reset-textilizable').on('click', function(e) {
+          e.preventDefault();
+          resetTextilizable(getBlockName($(this)));
+        });
+
+        $('a.edit-textilizable').on('click', function(e) {
+          e.preventDefault();
+          editTextilizable(getBlockName($(this)));
+        });
+      }
+
+      // initialize the fun! (prototype)
       recreateSortables();
       updateSelect();
 
+      // moar fun
+      updateBlockLinks();
+
+      //these are generated blocks, so we have to watch the links inside them
+
       // TODO: this is exceptionally _not_ fun
       // this attaches the update method to the window in order for it
-      // being callable after removal
+      // being callable after removal of a block
       window.myPage = window.myPage || {
-        updateSelect: updateSelect
+        updateSelect: updateSelect,
+        updateBlockLinks: updateBlockLinks
       };
     });
-  }(jQuery))
+  }(jQuery));
 }($));

app/assets/stylesheets/my_project_page/my_projects_overview.sass

@@ -29,5 +29,6 @@ div.overview
     min-height: 32px
     // TODO: this fixes an issue which currently breaks the layout
     // It has to be removed once it is fixed upstream
+    // @see https://github.com/zurb/foundation-apps/issues/575
     &.left, &.right
       @extend .medium-6

app/controllers/my_projects_overviews_controller.rb

@@ -113,7 +113,6 @@ class MyProjectsOverviewsController < ApplicationController
         overview.update_attribute(group, group_items)
       end
     end
-    render :nothing => true
   end
 
   def param_to_block(param)

app/helpers/my_projects_overviews_helper.rb

@@ -38,7 +38,7 @@ module MyProjectsOverviewsHelper
     if MyProjectsOverviewsHelper.const_defined? constant_name
       return MyProjectsOverviewsHelper.const_get constant_name
     end
-    raise NoMethodError
+    raise NoMethodError.new("tried to call method #{name}, but was not found!")
   end
 
   def grid_field(name)
@@ -59,10 +59,11 @@ module MyProjectsOverviewsHelper
   end
 
   def construct(block)
+    if block.is_a? Array
+      return render_textilized block
+    end
     if block_available? block
-      render partial: 'block', locals: { block_name: block }
-    elsif block.respond_to? :to_ary
-      render partial: 'block_textilizable', locals: { block_name: block }
+      return render_normal block
     end
   end
 
@@ -71,4 +72,16 @@ module MyProjectsOverviewsHelper
             action: 'order_blocks',
             group: name
   end
+
+  def render_textilized(block)
+    render partial: 'block_textilizable', locals: {
+      block_name: block.first,
+      block_title: block[1],
+      textile: block.last
+    }
+  end
+
+  def render_normal(block)
+    render partial: 'block', locals: { block_name: block }
+  end
 end

app/views/my_projects_overviews/_block_textilizable.html.erb

@@ -24,8 +24,8 @@ See doc/COPYRIGHT.md for more details.
     <% content_for block_name do %>
       <div id="<%= block_name %>-form-div" style="display: none;" ng-non-bindable>
         <div class="box-actions">
-          <a href="#" onclick="return resetTextilizable('<%= block_name %>');"
-             class="icon icon-cancel"><%= l(:button_cancel) %></a>
+          <a href="#" data-block-name="<%= block_name %>"
+             class="icon icon-cancel reset-textilizable"><%= l(:button_cancel) %></a>
         </div>
         <div style="clear: right;"></div>
         <%= form_for :overview,
@@ -49,14 +49,13 @@ See doc/COPYRIGHT.md for more details.
       </div>
       <div id="<%= block_name %>-preview-div" class="wiki">
         <div class="box-actions">
-          <a href="#" onclick="return editTextilizable('<%= block_name %>');"
-             class="icon icon-edit"><%= l(:button_edit) %></a>
+          <a href="#" class="icon icon-edit edit-textilizable" data-block-name="<%= block_name %>"><%= l(:button_edit) %></a>
 
           <%= link_to_remote l(:button_delete), {
                 :confirm => l(:label_confirm_delete),
                 :url => { :action => "remove_block", :block => block_name },
-                :complete => "removeBlock('block_#{block_name.dasherize}')" },
-              :class => "icon icon-delete"
+                :class => "icon icon-delete"
+              }
               %>
         </div>
       </div>

app/views/my_projects_overviews/order_blocks.js.erb

@@ -0,0 +1,2 @@
+// rebind some of the links if the block is textilizable
+myPage.updateBlockLinks();

app/views/my_projects_overviews/remove_block.js.erb

@@ -1,5 +1,5 @@
 (function($) {
-  var block = $('#block_' + '<%= @block.dasherize %>');
+  var block = $('#block_' + '<%= @block.is_a?(Array) ? @block.first.dasherize : @block.dasherize %>');
   block.fadeOut('fast', function() {
     block.remove();
     myPage.updateSelect();