Work in progress: AJAXy interface for grabbing feed subscription helper detail forms.

Currently they all show the regular subform. :)

plugins/SubMirror/SubMirrorPlugin.php

@@ -35,6 +35,9 @@ class SubMirrorPlugin extends Plugin
     {
         $m->connect('settings/mirror',
                     array('action' => 'mirrorsettings'));
+        $m->connect('settings/mirror/add/:provider',
+                    array('action' => 'mirrorsettings'),
+                    array('provider' => '[A-Za-z0-9_-]+'));
         $m->connect('settings/mirror/add',
                     array('action' => 'addmirror'));
         $m->connect('settings/mirror/edit',

plugins/SubMirror/actions/mirrorsettings.php

@@ -65,18 +65,30 @@ class MirrorSettingsAction extends AccountSettingsAction
     function showContent()
     {
         $user = common_current_user();
+        $provider = $this->trimmed('provider');
+        if ($provider) {
+            $this->showAddFeedForm($provider);
+        } else {
+            $this->elementStart('div', array('id' => 'add-mirror'));
+            $this->showAddWizard();
+            $this->elementEnd('div');
 
-        $this->showAddFeedForm();
+            $mirror = new SubMirror();
-
+            $mirror->subscriber = $user->id;
-        $mirror = new SubMirror();
+            if ($mirror->find()) {
-        $mirror->subscriber = $user->id;
+                while ($mirror->fetch()) {
-        if ($mirror->find()) {
+                    $this->showFeedForm($mirror);
-            while ($mirror->fetch()) {
+                }
-                $this->showFeedForm($mirror);
             }
         }
     }
 
+    function showAddWizard()
+    {
+        $form = new AddMirrorWizard($this);
+        $form->show();
+    }
+
     function showFeedForm($mirror)
     {
         $profile = Profile::staticGet('id', $mirror->subscribed);
@@ -88,12 +100,34 @@ class MirrorSettingsAction extends AccountSettingsAction
 
     function showAddFeedForm()
     {
-        $form = new AddMirrorWizard($this);
-        $form->show();
         $form = new AddMirrorForm($this);
         $form->show();
     }
 
+    /**
+     *
+     * @param array $args
+     *
+     * @todo move the ajax display handling to common code
+     */
+    function handle($args)
+    {
+        if ($this->boolean('ajax')) {
+            header('Content-Type: text/html;charset=utf-8');
+            $this->elementStart('html');
+            $this->elementStart('head');
+            $this->element('title', null, _('Provider add'));
+            $this->elementEnd('head');
+            $this->elementStart('body');
+
+            $this->showAddFeedForm();
+
+            $this->elementEnd('body');
+            $this->elementEnd('html');
+        } else {
+            return parent::handle($args);
+        }
+    }
     /**
      * Handle a POST request
      *
@@ -110,4 +144,16 @@ class MirrorSettingsAction extends AccountSettingsAction
         $nav = new SubGroupNav($this, common_current_user());
         $nav->show();
     }
+
+    function showScripts()
+    {
+        parent::showScripts();
+        $this->script('plugins/SubMirror/js/mirrorsettings.js');
+    }
+
+    function showStylesheets()
+    {
+        parent::showStylesheets();
+        $this->cssLink('plugins/SubMirror/css/mirrorsettings.css');
+    }
 }

plugins/SubMirror/css/mirrorsettings.css

@@ -0,0 +1,17 @@
+/* undo insane stuff from core styles */
+#add-mirror-wizard img {
+    display: inline;
+}
+
+/* we need #something to override most of the #content crap */
+
+#add-mirror-wizard .provider-list table {
+    width: 100%;
+}
+
+#add-mirror-wizard .provider-heading img {
+    vertical-align: middle;
+}
+#add-mirror-wizard .provider-heading {
+    cursor: pointer;
+}

plugins/SubMirror/js/mirrorsettings.js

@@ -0,0 +1,45 @@
+$(function() {
+    /**
+     * Append 'ajax=1' parameter onto URL.
+     */
+    function ajaxize(url) {
+        if (url.indexOf('?') == '-1') {
+            return url + '?ajax=1';
+        } else {
+            return url + '&ajax=1';
+        }
+    }
+
+    var addMirror = $('#add-mirror');
+    var wizard = $('#add-mirror-wizard');
+    if (wizard.length > 0) {
+        var list = wizard.find('.provider-list');
+        var providers = list.find('.provider-heading');
+        providers.click(function(event) {
+            console.log(this);
+            var targetUrl = $(this).find('a').attr('href');
+            if (targetUrl) {
+                // Make sure we don't accidentally follow the direct link
+                event.preventDefault();
+
+                var node = this;
+                function showNew() {
+                    var detail = $('<div class="provider-detail" style="display: none"></div>').insertAfter(node);
+                    detail.load(ajaxize(targetUrl), function(responseText, testStatus, xhr) {
+                        detail.slideDown();
+                    });
+                }
+
+                var old = addMirror.find('.provider-detail');
+                if (old.length) {
+                    old.slideUp(function() {
+                        old.remove();
+                        showNew();
+                    });
+                } else {
+                    showNew();
+                }
+            }
+        });
+    }
+});

plugins/SubMirror/lib/addmirrorwizard.php

@@ -87,22 +87,26 @@ class AddMirrorWizard extends Form
     {
         $out = $this->out;
 
-        $out->elementStart('table', array('width' => '100%'));
+        $out->elementStart('div', 'provider-list');
+        $out->element('h2', null, _m('Select a feed provider'));
+        $out->elementStart('table');
         foreach ($providers as $provider) {
             $icon = common_path('plugins/SubMirror/images/providers/' . $provider['id'] . '.png');
-            $out->elementStart('tr');
+            $targetUrl = common_local_url('mirrorsettings', array('provider' => $provider['id']));
 
-            $out->elementStart('td', array('style' => 'text-align: right; vertical-align: middle'));
+            $out->elementStart('tr', array('class' => 'provider'));
+            $out->elementStart('td');
+
+            $out->elementStart('div', 'provider-heading');
             $out->element('img', array('src' => $icon));
-            $out->elementEnd('td');
+            $out->element('a', array('href' => $targetUrl), $provider['name']);
+            $out->elementEnd('div');
 
-            $out->elementStart('td', array('style' => 'text-align: left; vertical-align: middle'));
-            $out->text($provider['name']);
             $out->elementEnd('td');
-
             $out->elementEnd('tr');
         }
         $out->elementEnd('table');
+        $out->elementEnd('div');
     }
 
     /**