Enable 'flip' transition between image/info panels.

nelstrom · May 22, 2011 · 93e4876 · 93e4876
1 parent 047416b
commit 93e4876
Showing 1 changed file with 23 additions and 6 deletions.
diff --git a/public/app/views/InfoBar.js b/public/app/views/InfoBar.js
@@ -1,22 +1,36 @@
 App.views.InfoBar = Ext.extend(Ext.Panel, {
     initComponent: function(){
-        var infoBarPanel = this;
+        var infoBarPanel = this,
+			activeCardIndex = 0;
 
         Ext.apply(this, {
 
             layout: 'card',
+			cardSwitchAnimation: 'flip',
 
 			dockedItems: [
 				{
 					xtype: 'toolbar',
-					title: this.title
+					title: this.title,
+					items: [
+						{ xtype: 'spacer' },
+						{
+							text: 'info',
+							handler: function() {
+								if (activeCardIndex == 0) {
+									activeCardIndex = 1;
+								} else {
+									activeCardIndex = 0;
+								}
+								infoBarPanel.setActiveItem(activeCardIndex);
+							}
+						}
+					]
 				}
 			],
             items: [
                 {
-                    cls: 'canvas ' + this.slug,
-                },
-                {
+					style: { backgroundColor: '#aaa' },
 					tpl: [
 						"<h2>{title}</h2>",
 						"<p>by {artist}</p>",
@@ -26,7 +40,10 @@ App.views.InfoBar = Ext.extend(Ext.Panel, {
 						"</dl>"
 					],
 					show: function() { this.update(infoBarPanel); }
-                }
+                },
+                {
+                    cls: 'canvas ' + this.slug,
+                },
             ]
         });