Changeset 2144

Timestamp:

09/07/10 17:08:36 (17 months ago)

Author:

tboutell

Message:

Fixed #428 (you can no longer reorder in an area while it has an unsaved new slot) and greatly sped up the move arrows. They now work on the client side without waiting for the site to refresh the area.

Refactored the JavaScript? associated with the up and down arrows.

Fixed a previously unnoticed bug: a-new-slot wasn't getting cleared when a slot was saved.

TODO: strip down the response from the server to a yea or a nay.
TODO: actually do something about a nay (like refreshing the area).

Location:

plugins/apostrophePlugin/trunk

Files:

• lib/action/BaseaSlotActions.class.php (modified) (1 diff)
• modules/a/templates/_ajaxUpdateSlot.php (modified) (2 diffs)
• modules/a/templates/_area.php (modified) (2 diffs)
• web/js/a.js (modified) (3 diffs)

plugins/apostrophePlugin/trunk/lib/action/BaseaSlotActions.class.php

@@ -161 +161 @@
         // a newly saved slot with an edit view
         "variant" => $variant,
+        // Having the actual slot makes it possible to check if it's new and
+        // shut off a-new-slot
+        "slot" => $this->slot,
         "validationData" => $this->validationData));
   }

plugins/apostrophePlugin/trunk/modules/a/templates/_ajaxUpdateSlot.php

@@ -9 +9 @@
   $validationData = isset($validationData) ? $sf_data->getRaw('validationData') : null;
   $variant = isset($variant) ? $sf_data->getRaw('variant') : null;
+  $slot = isset($slot) ? $sf_data->getRaw('slot') : null;
 ?>
 <?php // 1.3 and up don't do this automatically (no common filter) ?>
@@ -18 +19 @@
 <?php use_helper('a') ?>
 <?php a_slot_body($name, $type, $permid, $options, $validationData, $editorOpen, true) ?>
+<?php if (!$slot->isNew()): ?>
+  <?php a_js_call('apostrophe.slotNotNew(?, ?, ?)', $pageid, $name, $permid) ?>
+<?php endif ?>
+<?php a_js_call('apostrophe.areaUpdateMoveButtons(?, ?, ?)', url_for('a/moveSlot'), $pageid, $name) ?>
 <?php a_include_js_calls() ?>
 <?php if (isset($variant)): ?>

plugins/apostrophePlugin/trunk/modules/a/templates/_area.php

@@ -86 +86 @@
         <!-- START SLOT -->
         <div class="a-slot <?php echo $slot->getEffectiveVariant($slotOptions) ?> <?php echo $slot->type ?><?php echo ($slot->isNew())? ' a-new-slot':'' ?> clearfix" id="a-slot-<?php echo "$pageid-$name-$permid" ?>">
+          <?php // Make the slot aware of its permid for simpler JS later ?>
+          <?php a_js_call('$(?).data(?, ?)', "#a-slot-$pageid-$name-$permid", 'a-permid', $permid) ?>
                 <?php // Slot Controls ?>
     <?php if ($editable): ?>
                 <ul class="a-ui a-controls a-slot-controls clearfix">           
       <?php if ($infinite): ?>
-          <?php if ($i > 0): ?>
-                                                <li>
-            <?php echo jq_link_to_remote('<span class="icon"></span>'.__('Move', null, 'apostrophe'), array(
-                "url" => "a/moveSlot?" .http_build_query(array(
-                                                                        "id" => $page->id,
-                                                                        "name" => $name,
-                                                                        "up" => 1,
-                                                                        "permid" => $permid)),
-                                                                        "update" => "a-slots-$pageid-$name",
-                                                                        'complete' => 'aUI()'), 
-                                                                        array(
-                                                                                'class' => 'a-btn icon a-arrow-up no-label', 
-                                                                                'title' => __('Move Up', null, 'apostrophe'), 
-                                                )) ?>
-                                                </li>
-          <?php endif ?>
-          <?php if (($i + 1) < count($slots)): ?>
-                                                <li>
-            <?php echo jq_link_to_remote('<span class="icon"></span>'.__('Move', null, 'apostrophe'), array(
-                "url" => "a/moveSlot?" .http_build_query(array(
-                                                                        "id" => $page->id,
-                                                                        "name" => $name,
-                                                                        "permid" => $permid)),
-                                                                        "update" => "a-slots-$pageid-$name",
-                                                                        'complete' => 'aUI()'), 
-                                                                        array(
-                                                                                'class' => 'a-btn icon a-arrow-down no-label', 
-                                                                                'title' => __('Move Down', null, 'apostrophe'), 
-                                                )) ?>
-            </li>
-        <?php endif ?>
+                                <li class="a-move">
+                                  <a href="#" class="a-btn icon a-arrow-up no-label" title="<?php echo a_('Move Up') ?>"><span class="icon"></span><?php echo a_('Move Up') ?></a>
+                                </li>
+                                <li class="a-move">
+                                  <a href="#" class="a-btn icon a-arrow-down no-label" title="<?php echo a_('Move Down') ?>"><span class="icon"></span><?php echo a_('Move Down') ?></a>
+                                </li>
       <?php endif ?>
 
@@ -201 +178 @@
         });
 </script>
+<?php a_js_call('apostrophe.areaUpdateMoveButtons(?, ?, ?)', url_for('a/moveSlot'), $pageid, $name) ?>
 <?php endif ?>

plugins/apostrophePlugin/trunk/web/js/a.js

@@ -26 +26 @@
   }
 
+        // Swap two DOM elements without cloning them
+        // http://blog.pengoworks.com/index.cfm/2008/9/24/A-quick-and-dirty-swap-method-for-jQuery
+        this.swapNodes = function(a, b) {
+    var t = a.parentNode.insertBefore(document.createTextNode(''), a); 
+    b.parentNode.insertBefore(a, b); 
+    t.parentNode.insertBefore(b, t); 
+    t.parentNode.removeChild(t);
+        }       
+        
         this.jsTree = function(options)
         {
@@ -88 +97 @@
           });
         }
+
 
         this.slideshow = function(options)
@@ -463 +473 @@
                 aUI(editBtn.parents('.a-slot').attr('id')); // Refresh the UI scoped to this Slot
         }
+        
+        this.areaUpdateMoveButtons = function(updateAction, id, name)
+        {
+                var area = $('#a-area-' + id + '-' + name);
+                // Be precise - take care not to hoover up controls related to slots in nested areas, if there are any
+                var slots = area.children('.a-slots').children('.a-slot');
+                var newSlots = area.children('.a-slots').children('.a-new-slot');
+                if (newSlots.length)
+                {
+                        // TODO: this is not sensitive enough to nested areas
+                        
+                        // You have to save a new slot before you can do any reordering.
+                        // TODO: with a little more finesse we could support saving it with
+                        // a rank, but think about how messy that might get
+                  slots.find('.a-arrow-up,.a-arrow-down').hide();
+                        return;
+                }
+                // I actually want a visible loop variable here
+                for (n = 0; (n < slots.length); n++)
+                {
+                        var slot = slots[n];
+                        // We use a nested function here because 
+                        // a loop variable does *not* get captured
+                        // in the closure at its current value otherwise
+                        setButtons(slot, n, slots);
+                        function setButtons(slot, n, slots)
+                        {
+                                if (n > 0)
+                                {
+                                        // TODO: this is not sensitive enough to nested areas
+                                        $(slot).find('.a-arrow-up').show().unbind('click').click(function() {
+                                                // It would be nice to confirm success here in some way
+                                                $.get(updateAction, { id: id, name: name, permid: $(slot).data('a-permid'), up: 1 });
+                                                apostrophe.swapNodes(slot, slots[n - 1]);
+                                                apostrophe.areaUpdateMoveButtons(updateAction, id, name);
+                                                return false;
+                                        });
+                                }
+                                else
+                                {
+                                  $(slot).find('.a-arrow-up').hide();
+                                }
+                                if (n < (slots.length - 1))
+                                {
+                                        $(slot).find('.a-arrow-down').show().unbind('click').click(function() {
+                                                // It would be nice to confirm success here in some way
+                                                $.get(updateAction, { id: id, name: name, permid: $(slot).data('a-permid'), up: 0 });
+                                                apostrophe.swapNodes(slot, slots[n + 1]);
+                                                apostrophe.areaUpdateMoveButtons(updateAction, id, name);
+                                                return false;
+                                        });
+                                }
+                                else
+                                {
+                                        $(slot).find('.a-arrow-down').hide();
+                                }
+                        }
+                }
+        }
+        
+        this.slotNotNew = function(pageid, name, permid)
+        {
+                $("#a-slot-" + pageid + "-" + name + "-" + permid).removeClass('a-new-slot');
+        }
 }