Support :popup position, using jquery-ui dialog

It can be replaced with other library overriding ActiveScaffold.open_popup and ActiveScaffold.close_popup JS functions

CHANGELOG.rdoc

@@ -5,6 +5,7 @@
 - Support :table position for member action links, replacing the whole table
 - Support changing the view partial used to render a record, default to 'list_record', better support refreshing a record when list view is replaced with other way to render records
 - Support separators in action links
+- Support :popup position, using jquery-ui dialog, but can be replaced with other library overriding ActiveScaffold.open_popup and ActiveScaffold.close_popup JS functions
 
 = 3.7.10
 - Move code from on_create.js.erb to partials, so it's easier to change parts, e.g. how new record is rendered

app/assets/javascripts/jquery/active_scaffold.js

@@ -1219,8 +1219,21 @@
           $footer.removeClass('floating');
           if ($form.visible(true) && !$footer.visible(true)) $footer.addClass('floating');
         });
-      }
+      },
+
+      open_popup: function(content, link) {
+        var element = jQuery(content).dialog({
+          modal: true,
+          close: function() { link.close(); },
+          width: ActiveScaffold.config.popup_width || '80%'
+        });
+        link.set_adapter(element);
+      },
 
+      close_popup: function(link, callback) {
+        link.adapter.dialog('close');
+        if (callback) callback();
+      }
     }
 
 
@@ -1320,16 +1333,18 @@
       },
 
       close: function() {
-        if (this.adapter) {
-          var link = this;
-          ActiveScaffold.remove(this.adapter, function() {
-            link.enable();
-            if (link.hide_target) link.target.show();
-            if (link.hide_content) link.content.show();
-            if (ActiveScaffold.config.scroll_on_close) {
-              ActiveScaffold.scroll_to(link.target.attr('id'), ActiveScaffold.config.scroll_on_close === 'checkInViewport');
-            }
-          });
+        var link = this, callback = function() {
+          link.enable();
+          if (link.hide_target) link.target.show();
+          if (link.hide_content) link.content.show();
+          if (ActiveScaffold.config.scroll_on_close) {
+            ActiveScaffold.scroll_to(link.target.attr('id'), ActiveScaffold.config.scroll_on_close === 'checkInViewport');
+          }
+        };
+        if (this.position === 'popup') {
+          ActiveScaffold.close_popup(this, callback);
+        } else if (this.adapter) {
+          ActiveScaffold.remove(this.adapter, callback);
         }
       },
 
@@ -1390,7 +1405,7 @@
         if (refresh) l.refresh_url = this.target.closest('.records').data('refresh-record').replace('--ID--', refresh);
 
         if (l.position) {
-          l.url = l.url.append_params({adapter: '_list_inline_adapter'});
+          l.url = l.url.append_params({adapter: l.position == 'popup' ? '_popup_adapter' : '_list_inline_adapter'});
           l.tag.attr('href', l.url);
         }
         l.set = this;
@@ -1416,6 +1431,8 @@
           this.hide_target = true;
         } else if (this.position === 'table') {
           this.hide_content = true;
+        } else if (this.position === 'popup') {
+          return ActiveScaffold.open_popup(content, this);
         }
 
         var colspan = this.target.children().length;
@@ -1426,8 +1443,7 @@
         if (this.position === 'after') {
           this.target.after(content);
           this.set_adapter(this.target.next());
-        }
-        else if (this.position === 'before') {
+        } else if (this.position === 'before') {
           this.target.before(content);
           this.set_adapter(this.target.prev());
         } else if (this.position === 'table') {
@@ -1501,13 +1517,14 @@
         if (this.position == 'replace') {
           this.position = 'top';
           this.hide_content = true;
+        } else if (this.position == 'popup') {
+          return ActiveScaffold.open_popup(content, this);
         }
 
         if (this.position == 'top') {
           this.target.prepend(content);
           this.set_adapter(this.target.children().first());
-        }
-        else {
+        } else {
           throw 'Unknown position "' + this.position + '"'
         }
         ActiveScaffold.highlight(this.adapter.find('td').first().children().not('script'));

app/views/active_scaffold_overrides/_popup_adapter.html.erb

@@ -0,0 +1,9 @@
+<%# nested_id, allows us to remove a nested scaffold programmatically %>
+<div class="active-scaffold" id="<%= nested_id = element_row_id action: :nested %>">
+<% if successful? %>
+    <div class="<%= "#{params[:action]}-view" if params[:action] %> <%= "#{nested? ? nested.name : id_from_controller(params[:controller])}-view" %> view">
+      <%= payload -%>
+    </div>
+<% end %>
+    <%= javascript_tag("setTimeout(function() { var action_link = ActiveScaffold.ActionLink.get('#{nested_id}'); if (action_link) { action_link.update_flash_messages('#{escape_javascript(render('messages').strip)}');#{' action_link.close(); ActiveScaffold.scroll_to(action_link.scaffold(), ActiveScaffold.config.scroll_on_close == "checkInViewport");' unless successful?} } }, 10);") %>
+</div>

lib/active_scaffold/data_structures/action_link.rb

@@ -182,13 +182,15 @@ def page?
     # where the result of this action should insert in the display.
     # for :type => :collection, supported values are:
     #   :top
-    #   :replace (for updating the entire table)
+    #   :replace (to hide the entire table)
+    #   :popup (popup with JS library)
     #   false (no attempt at positioning)
     # for :type => :member, supported values are:
     #   :before
-    #   :replace
+    #   :replace (to hide the record row)
     #   :after
-    #   :table
+    #   :table (to hide the entire table)
+    #   :popup (popup with JS library)
     #   false (no attempt at positioning)
     attr_writer :position
     def position