Merge lp:~wallyworld/lazr-js/activator-flash-node into lp:lazr-js

[Ian Booth]

[r=deryck][bug=735832] Add support to the Activator for a custom animation node to be specified for success, failure or cancellation.

The branch adds support to the Activator for a custom animation node to be specified for success, failure or cancellation.

The default behaviour is to animate the content_box node but this is not always sufficient to get the correct items being flashed. Depending on the HTML inside the content box, it may be necessary to specify a custom node to animate to get the desired effect.

A new Activator config parameter - animationNode - is supported. If undefined, the content box is used.

== Tests ==

A new test_correct_animation_node() test was added.

== Lint ==

jslint: 2 files to lint.
jslint: No problem found in '/home/ian/projects/lazrjs-branches/devel/src-js/lazrjs/activator/activator.js'.

jslint: No problem found in '/home/ian/projects/lazrjs-branches/devel/src-js/lazrjs/activator/tests/activator.js'.

[lp:~wallyworld/lazr-js/activator-flash-node]

207. By Ian Booth on 2011-03-15

Lint

[Deryck Hodge (deryck)]

This looks good, thanks!

I'll just not for future reference that the activator widget breaks from good YUI widget design, by declaring all attributes local on "this". The ATTRS object is unused -- i.e. this.some_node rather than this.get('some_node'). It's fine how you've done your code, following the pattern already there, but good widget design would store this node in ATTRS and take advantage of YUI's widget framework. Most of the other widgets do this correctly in lazr-js.

As I say, the way you've done it here is fine. Just wanted you to know, if you didn't already. I wouldn't ask you to refactor the widget to follow the others, just for this simple change.

Cheers,
deryck

review: Approve (code)

[lp:~wallyworld/lazr-js/activator-flash-node]

208. By Ian Booth on 2011-03-16

Formatting fix

=== modified file 'examples/activator/index.html'
--- examples/activator/index.html	2011-01-14 17:34:54 +0000
+++ examples/activator/index.html	2011-03-16 00:09:14 +0000
@@ -35,6 +35,13 @@
     var activator = new Y.lazr.activator.Activator(
         {contentBox: content_box});
 
+    // Optionally, it's possible to specify a custom node to animate on
+    // success, failure, or cancellation. The default is to use the
+    // content_box but depending on the HTML inside the content box, we may
+    // need to specify a different node to get the required animation.
+    //var activator = new Y.lazr.activator.Activator(
+    //    {contentBox: content_box, animationNode: custom_node});
+
     activator.subscribe('act', function (e) {
         editor.setStyle('visibility', 'visible');
     });
@@ -221,6 +228,15 @@
 
 </ul>
 
+<p>Optionally, these DOM elements can be specified:</p>
+
+<ul>
+  <li><strong>Animation node:</strong>
+    A node that is animated on success, failure, or cancellation. The default
+    is to use the content box node.
+  </li>
+</ul>
+
 <h3>Custom events</h3>
 
 <table>
 
=== modified file 'src-js/lazrjs/activator/activator.js'
--- src-js/lazrjs/activator/activator.js	2010-04-13 13:02:44 +0000
+++ src-js/lazrjs/activator/activator.js	2011-03-16 00:09:14 +0000
@@ -156,7 +156,7 @@
         }
         this._setStatusClass(C_SUCCESS);
         this._renderMessage('Message', message_node);
-        var anim = Y.lazr.anim.green_flash({node: this.get('contentBox')});
+        var anim = Y.lazr.anim.green_flash({node: this.animation_node});
         anim.run();
     },
 
@@ -170,7 +170,7 @@
     renderFailure: function(message_node) {
         this._renderMessage('Error', message_node);
         this._setStatusClass(C_FAILURE);
-        var anim = Y.lazr.anim.red_flash({node: this.get('contentBox')});
+        var anim = Y.lazr.anim.red_flash({node: this.animation_node});
         anim.run();
     },
 
@@ -184,7 +184,7 @@
     renderCancellation: function(message_node) {
         this._renderMessage('Message', message_node);
         this._setStatusClass(C_CANCEL);
-        var anim = Y.lazr.anim.red_flash({node: this.get('contentBox')});
+        var anim = Y.lazr.anim.red_flash({node: this.animation_node});
         anim.run();
     },
 
@@ -231,6 +231,10 @@
             throw new Error("Can't find element with CSS class " +
                 C_ACT + ".");
         }
+        this.animation_node = cfg.animationNode;
+        if (this.animation_node === undefined) {
+            this.animation_node = this.get('contentBox');
+        }
     },
 
     /**
 
=== modified file 'src-js/lazrjs/activator/tests/activator.js'
--- src-js/lazrjs/activator/tests/activator.js	2011-01-14 17:13:05 +0000
+++ src-js/lazrjs/activator/tests/activator.js	2011-03-16 00:09:14 +0000
@@ -46,6 +46,7 @@
         }
         this.workspace.appendChild(Y.Node.create(
             '<div id="example-1">' +
+            '<div id="custom-animation-node"/>' +
             '<span class="yui3-activator-data-box">' +
             '    Original Value' +
             '</span>' +
@@ -67,6 +68,18 @@
         this.workspace.set('innerHTML', '');
     },
 
+    test_correct_animation_node: function() {
+        // Check that the correct animation node is used.
+        // First check the default.
+        Assert.areEqual(this.activator.get('contentBox'),
+                    this.activator.animation_node);
+        // Now check a custom one.
+        var custom_node = Y.one('#custom-animation-node');
+        this.activator = new Y.lazr.activator.Activator(
+            {contentBox: Y.one('#example-1'), animationNode: custom_node});
+s        Assert.areEqual(custom_node, this.activator.animation_node);
+    },
+
     test_unhiding_action_button: function() {
         this.action_button.addClass('yui3-activator-hidden');
         Assert.isTrue(this.action_button.hasClass('yui3-activator-hidden'));