← Back to team overview

launchpad-reviewers team mailing list archive

[Merge] lp:~huwshimi/maas/morphing into lp:maas

 

Huw Wilkins has proposed merging lp:~huwshimi/maas/morphing into lp:maas.

Requested reviews:
  Launchpad code reviewers (launchpad-reviewers)

For more details, see:
https://code.launchpad.net/~huwshimi/maas/morphing/+merge/97819

This branch adds a simple widget that can fade between and resize two elements.
-- 
https://code.launchpad.net/~huwshimi/maas/morphing/+merge/97819
Your team Launchpad code reviewers is requested to review the proposed merge of lp:~huwshimi/maas/morphing into lp:maas.
=== added file 'src/maasserver/static/js/morph.js'
--- src/maasserver/static/js/morph.js	1970-01-01 00:00:00 +0000
+++ src/maasserver/static/js/morph.js	2012-03-16 09:35:21 +0000
@@ -0,0 +1,66 @@
+/* Copyright 2012 Canonical Ltd.  This software is licensed under the
+ * GNU Affero General Public License version 3 (see the file LICENSE).
+ *
+ * Widget to add a Node.
+ *
+ * @module Y.mass.morph
+ */
+
+YUI.add('maas.morph', function(Y) {
+
+Y.log('loading mass.morph');
+
+var module = Y.namespace('maas.morph');
+
+var MorphWidget = function(config) {
+    MorphWidget.superclass.constructor.apply(this, arguments);
+};
+
+MorphWidget.NAME = 'morph';
+
+MorphWidget.ATTRS = {
+    /**
+     * The DOM node to be morphed from.
+     *
+     * @attribute targetNode
+     * @type string
+     */
+    targetNode: {
+        value: null,
+        setter: function(val) {
+            return Y.one(val);
+        }
+    }
+};
+
+Y.extend(MorphWidget, Y.Widget, {
+    morph: function() {
+        var srcNode = this.get('srcNode');
+        var targetNode = this.get('targetNode');
+        
+        target_height = targetNode.getComputedStyle('height');
+        targetNode.addClass('hidden');
+        srcNode.setStyle('opacity', 0);
+        srcNode.removeClass('hidden');
+        src_height = srcNode.getComputedStyle('height').replace('px', '');
+        srcNode.setStyle('height', target_height);
+        var fade_in = new Y.Anim({
+            node: srcNode,
+            to: {opacity: 1},
+            duration: 1,
+            easing: 'easeIn'
+            });
+        var resize = new Y.Anim({
+            node: srcNode,
+            to: {height: src_height},
+            duration: 0.5,
+            easing: 'easeOut'
+            });
+        fade_in.run();
+        resize.run();
+    }
+});
+
+module.MorphWidget = MorphWidget
+
+}, '0.1', {'requires': ['widget', 'node', 'anim']});

=== added file 'src/maasserver/static/js/tests/test_morph.html'
--- src/maasserver/static/js/tests/test_morph.html	1970-01-01 00:00:00 +0000
+++ src/maasserver/static/js/tests/test_morph.html	2012-03-16 09:35:21 +0000
@@ -0,0 +1,26 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
+<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en">
+  <head>
+    <title>Test maas.morph</title>
+
+    <!-- YUI and test setup -->
+    <script type="text/javascript" src="../testing/yui_test_conf.js"></script>
+    <script type="text/javascript" src="../../jslibs/yui/tests/build/yui/yui.js"></script>
+    <script type="text/javascript" src="../testing/testrunner.js"></script>
+    <script type="text/javascript" src="../testing/testing.js"></script>
+    <!-- The module under test -->
+    <script type="text/javascript" src="../morph.js"></script>
+    <!-- The test suite -->
+    <script type="text/javascript" src="test_morph.js"></script>
+  </head>
+  <body>
+  <div id="panel-one">
+    Panel One
+  </div>
+  <div id="panel-two" class="hidden">
+    Panel Two
+  </div>
+
+  <span id="suite">maas.morph.tests</span>
+  </body>
+</html>

=== added file 'src/maasserver/static/js/tests/test_morph.js'
--- src/maasserver/static/js/tests/test_morph.js	1970-01-01 00:00:00 +0000
+++ src/maasserver/static/js/tests/test_morph.js	2012-03-16 09:35:21 +0000
@@ -0,0 +1,42 @@
+/* Copyright 2012 Canonical Ltd.  This software is licensed under the
+ * GNU Affero General Public License version 3 (see the file LICENSE).
+ */
+
+YUI({ useBrowserConsole: true }).add('maas.morph.tests', function(Y) {
+
+Y.log('loading maas.morph.tests');
+var namespace = Y.namespace('maas.morph.tests');
+
+var module = Y.maas.morph;
+var suite = new Y.Test.Suite("maas.morph Tests");
+
+suite.add(new Y.maas.testing.TestCase({
+    name: 'test-morphing',
+
+    testMorphing: function() {
+        var cfg = {
+            srcNode: '#panel-two',
+            targetNode: '#panel-one'
+        }
+        morpher = new module.MorphWidget(cfg);
+        Y.Assert.isFalse(
+            Y.one('#panel-one').hasClass('hidden'),
+            'The target panel should initially be visible');
+        Y.Assert.isTrue(
+            Y.one('#panel-two').hasClass('hidden'),
+            'The source panel should initially be hidden');
+        morpher.morph();
+        Y.Assert.isTrue(
+            Y.one('#panel-one').hasClass('hidden'),
+            'The target panel should now be hidden');
+        Y.Assert.isFalse(
+            Y.one('#panel-two').hasClass('hidden'),
+            'The source panel should now be visible');
+    }
+}));
+
+namespace.suite = suite;
+
+}, '0.1', {'requires': [
+    'node-event-simulate', 'test', 'maas.testing', 'maas.morph']}
+);

=== modified file 'src/maasserver/templates/maasserver/js-conf.html'
--- src/maasserver/templates/maasserver/js-conf.html	2012-03-15 13:58:32 +0000
+++ src/maasserver/templates/maasserver/js-conf.html	2012-03-16 09:35:21 +0000
@@ -22,6 +22,7 @@
 <script type="text/javascript"
   src="{{ STATIC_URL }}jslibs/yui/{{ YUI_VERSION }}/build/yui-base/yui-base-min.js">
 </script>
+<script type="text/javascript" src="{{ STATIC_URL }}js/morph.js"></script>
 <script type="text/javascript" src="{{ STATIC_URL }}js/user_panel.js"></script>
 <script type="text/javascript" src="{{ STATIC_URL }}js/node_add.js"></script>
 <script type="text/javascript" src="{{ STATIC_URL }}js/node.js"></script>
@@ -29,4 +30,3 @@
 <script type="text/javascript" src="{{ STATIC_URL }}js/utils.js"></script>
 <script type="text/javascript" src="{{ STATIC_URL }}js/node_views.js"></script>
 <script type="text/javascript" src="{{ STATIC_URL }}js/longpoll.js"></script>
-