svn commit: r694690 - /ofbiz/trunk/applications/ecommerce/webapp/ecommerce/images/checkoutProcess.js

[mor-2]

Author: mor
Date: Fri Sep 12 07:38:12 2008
New Revision: 694690

URL: http://svn.apache.org/viewvc?rev=694690&view=rev
Log:
Reduced the flickering effect on show/hide of panels on one page checkout.
Process used is to set zero duration for showing/hiding panel and
1) Hide Editable panel,
2) Show Summary panel for # 1,
3) Show next editable panel.

Contribution from Brajesh Patel.


Modified:
    ofbiz/trunk/applications/ecommerce/webapp/ecommerce/images/checkoutProcess.js

Modified: ofbiz/trunk/applications/ecommerce/webapp/ecommerce/images/checkoutProcess.js
URL: http://svn.apache.org/viewvc/ofbiz/trunk/applications/ecommerce/webapp/ecommerce/images/checkoutProcess.js?rev=694690&r1=694689&r2=694690&view=diff
==============================================================================
--- ofbiz/trunk/applications/ecommerce/webapp/ecommerce/images/checkoutProcess.js (original)
+++ ofbiz/trunk/applications/ecommerce/webapp/ecommerce/images/checkoutProcess.js Fri Sep 12 07:38:12 2008
@@ -29,23 +29,23 @@
     var validateBill = new Validation('billingForm', {immediate: true, onSubmit: false});    
     Event.observe($('editShipping'), 'click', function() {
         if (validateCart.validate()) {
-            Effect.Fade('editShipping', {duration: 0.1});
-            Effect.Appear('processingShipping', {duration: 0.1});
+            Effect.Fade('editShipping', {duration: 0.0});
+            // Effect.Appear('processingShipping', {duration: 0.0});
             displayShippingPanel();
             isCartStepValidate = true;
         }
     });
 
     Event.observe($('openCartPanel'), 'click', function() {
-        displayCartPanel();
+        displayEditCartPanel();
     });
 
     // Shipping
     Event.observe($('editShippingOptions'), 'click', function() {
         if (isCartStepValidate) {
             if (validateShip.validate()) {
-                Effect.Fade('editShippingOptions', {duration: 0.1});
-                Effect.Appear('processingShippingOptions', {duration: 0.1});
+                Effect.Fade('editShippingOptions', {duration: 0.0});
+                Effect.Appear('processingShippingOptions', {duration: 0.0});
                 processShippingAddress();
                 displayShippingOptionPanel();
                 isShipStepValidate = true;
@@ -56,7 +56,7 @@
     Event.observe($('openShippingPanel'), 'click', function() {
         if (isCartStepValidate) {
             if (isShipStepValidate) {
-                displayShippingPanel();
+                displayEditShippingPanel();
             }
         }
     });
@@ -65,8 +65,8 @@
     Event.observe($('editBilling'), 'click', function() {
         if (isCartStepValidate && isShipStepValidate) {
             if (validateShipOption.validate()) {
-                Effect.Fade('editBilling', {duration: 0.1});
-                Effect.Appear('processingBilling', {duration: 0.1});
+                Effect.Fade('editBilling', {duration: 0.0});
+                Effect.Appear('processingBilling', {duration: 0.0});
                 setShippingOption();
                 displayBillingPanel();
                 isShipOptionStepValidate = true;
@@ -76,22 +76,22 @@
 
     Event.observe($('openShippingOptionPanel'), 'click', function() {
         if (isCartStepValidate && isShipStepValidate && isShipOptionStepValidate) {
-            displayShippingOptionPanel();
+            displayEditShippingOptionPanel();
         }
     });
 
     // Billing
     Event.observe($('openBillingPanel'), 'click', function() {
         if (isBillStepValidate) {
-            displayBillingPanel();
+            displayEditBillingPanel();
         }  
     });
 
     Event.observe($('openOrderSubmitPanel'), 'click', function() {
         if (isCartStepValidate && isShipStepValidate && isShipOptionStepValidate) {
             if (validateBill.validate()) {
-                Effect.Fade('openOrderSubmitPanel', {duration: 0.1});
-                Effect.Appear('processingOrderSubmitPanel', {duration: 0.1});
+                Effect.Fade('openOrderSubmitPanel', {duration: 0.0});
+                Effect.Appear('processingOrderSubmitPanel', {duration: 0.0});
                 processBillingAndPayment();
                 displayOrderSubmitPanel();
                 isBillStepValidate = true;
@@ -134,112 +134,180 @@
 
 // Cart
 function displayShippingPanel() {
+
+    Effect.BlindUp('editCartPanel', {duration: 0.0});
+    Effect.BlindDown('cartSummaryPanel');
+    if($('shippingSummaryPanel').visible()) {
+        Effect.BlindUp('shippingSummaryPanel', {duration: 0.0});
+    }
+    Effect.BlindDown('editShippingPanel', {duration: 0.0});
+    Effect.Appear('editShippingOptions');
+}
+
+function displayEditShippingPanel() {
+
     if (!$('editShippingPanel').visible()) {
-        Effect.BlindDown('editShippingPanel', {duration: 0.5});
-        Effect.Fade('editCartPanel', {duration: 0.3});
-        Effect.BlindUp('editShippingOptionPanel', {duration: 0.5});
-        Effect.BlindUp('editBillingPanel', {duration: 0.5});
-        Effect.BlindUp('orderSubmitPanel', {duration: 0.5});
-
-        Effect.Fade('shippingSummaryPanel', {duration: 0.5});
-        Effect.Appear('cartSummaryPanel', {duration: 0.3});
-        Effect.Appear('shippingOptionSummaryPanel', {duration: 0.5});
-        Effect.Appear('billingSummaryPanel', {duration: 0.5});
-        Effect.Appear('editShippingOptions', {duration: 0.3});
-        Effect.Fade('editShipping', {duration: 0.5});
-        Effect.Fade('editBilling', {duration: 0.5});
-        Effect.Fade('openOrderSubmitPanel', {duration: 0.3});
-        Effect.Fade('processingShipping', {duration: 0.9});
-        //Effect.Appear('orderSubmitPanel', {duration: 0.5});
-    }
-}
-function displayCartPanel() {
-    if (!$('editCartPanel').visible()) {
-        Effect.BlindDown('editCartPanel', {duration: 0.5});
-        Effect.Fade('editShippingPanel', {duration: 0.3});
-        Effect.Fade('editShippingOptionPanel', {duration: 0.5});
-        Effect.BlindUp('editBillingPanel', {duration: 0.5});
-        Effect.BlindUp('orderSubmitPanel', {duration: 0.5});
-
-        Effect.Fade('cartSummaryPanel', {duration: 0.3});
-        Effect.Appear('shippingSummaryPanel', {duration: 0.5});
-        Effect.Appear('shippingOptionSummaryPanel', {duration: 0.5});
-        Effect.Appear('billingSummaryPanel', {duration: 0.5});
-        Effect.Appear('editShipping', {duration: 0.1});
-        Effect.Fade('editShippingOptions', {duration: 0.3});///
-        Effect.Fade('editBilling', {duration: 0.3});
-        Effect.Fade('openOrderSubmitPanel', {duration: 0.3});
-        //Effect.Appear('orderSubmitPanel', {duration: 0.5});
+     if ($('shippingSummaryPanel').visible()) {
+            Effect.BlindUp('shippingSummaryPanel', {duration: 0.0});
+     }
+            Effect.BlindDown('cartSummaryPanel', {duration: 0.0});
+            Effect.BlindDown('editShippingPanel');
+            Effect.Fade('processingShipping', {duration: 0.0});
+            Effect.Appear('editShippingOptions');
+    }
+    if($('editCartPanel').visible()) {
+        Effect.BlindUp('editCartPanel', {duration: 0.0});
+        Effect.Fade('editShipping');
+    }
+    if ($('editShippingOptionPanel').visible()) {
+        Effect.BlindUp('editShippingOptionPanel', {duration: 0.0});
+        Effect.BlindDown('shippingOptionSummaryPanel', {duration: 0.0});
+        Effect.Fade('editBilling')
+    }
+    if ($('editBillingPanel').visible()) {
+        Effect.BlindUp('editBillingPanel', {duration: 0.0});
+        Effect.BlindDown('billingSummaryPanel', {duration: 0.0});
+        Effect.Fade('openOrderSubmitPanel');
+    }
+    if ($('orderSubmitPanel').visible()) {
+        Effect.BlindUp('orderSubmitPanel', {duration: 0.0});
+    }
+}
+
+function displayEditCartPanel() {
+
+    if ($('orderSubmitPanel').visible()) {
+        Effect.BlindUp('orderSubmitPanel', {duration: 0.0});
+    }
+    if ($('editBillingPanel')) {
+        Effect.BlindUp('editBillingPanel', {duration: 0.0});
+        Effect.BlindDown('billingSummaryPanel', {duration: 0.0});
+        Effect.Fade('openOrderSubmitPanel');
+    }
+    if ($('editShippingPanel').visible()) {
+        Effect.BlindUp('editShippingPanel', {duration: 0.0});
+        Effect.BlindDown('shippingSummaryPanel', {duration: 0.0});
+        Effect.Fade('editShippingOptions', {duration: 0.0});
+    }
+    if ($('editShippingOptionPanel').visible()) {  
+        Effect.BlindUp('editShippingOptionPanel', {duration: 0.0});
+        Effect.BlindDown('shippingOptionSummaryPanel', {duration: 0.0});
+        Effect.Fade('editBilling', {duration: 0.0});
+    }
+    if (!$('editCartPanel').visible() ) {
+        Effect.BlindUp('cartSummaryPanel', {duration: 0.0});
+        Effect.BlindDown('editCartPanel');
+        Effect.Appear('editShipping');
     }
 }
 
 // Shipping
 function displayShippingOptionPanel() {
-    if (!$('editShippingOptionPanel').visible() && isShipStepValidate) {
-        Effect.BlindDown('editShippingOptionPanel', {duration: 0.5});
-        Effect.BlindDown('shippingCompleted', {duration: 0.5});
-        Effect.BlindUp('editCartPanel', {duration: 0.5});
-        Effect.BlindUp('editShippingPanel', {duration: 0.5});
-        Effect.BlindUp('editBillingPanel', {duration: 0.5});
-        Effect.BlindUp('orderSubmitPanel', {duration: 0.5});
-
-        Effect.Fade('shippingOptionSummaryPanel', {duration: 0.5});
-        Effect.Appear('cartSummaryPanel', {duration: 0.5});
-        Effect.Appear('shippingSummaryPanel', {duration: 0.5});
-        Effect.Appear('billingSummaryPanel', {duration: 0.5});
-        Effect.Appear('editBilling', {duration: 0.3});
-        Effect.Fade('editShipping', {duration: 0.3});
-        Effect.Fade('processingShippingOptions', {duration: 0.9});
-        Effect.Fade('openOrderSubmitPanel', {duration: 0.3});
-        Effect.Fade('editShippingOptions', {duration: 0.3});
-        //Effect.Appear('orderSubmitPanel', {duration: 0.5});
+    if ($('shippingOptionSummaryPanel').visible()) {
+        Effect.BlindUp('shippingOptionSummaryPanel', {duration: 0.0});
     }
+    Effect.BlindUp('editShippingPanel', {duration: 0.0});
+    Effect.BlindDown('shippingSummaryPanel', {duration: 0.0});
     setDataInShippingCompleted();
+    Effect.BlindDown('shippingCompleted', {duration: 0.0});
+    Effect.BlindDown('editShippingOptionPanel', {duration: 0.0});
+    Effect.Fade('processingShippingOptions', {duration: 0.0});
+    Effect.Appear('editBilling', {duration: 0.0});
+}
+
+function displayEditShippingOptionPanel() {
+
+    if ($('editCartPanel').visible()) {
+        Effect.BlindUp('editCartPanel', {duration: 0.0});
+        Effect.BlindDown('cartSummaryPanel', {duration: 0.0});
+        Effect.Fade('editShipping', {duration: 0.0});
+    }
+    if ($('editShippingPanel').visible()) {
+        Effect.BlindUp('editShippingPanel', {duration: 0.0});
+        setDataInShippingCompleted();
+        Effect.BlindDown('shippingCompleted', {duration: 0.0});
+        Effect.BlindDown('shippingSummaryPanel', {duration: 0.0});
+        Effect.Fade('editShippingOptions', {duration: 0.0});
+    }
+    if ($('editBillingPanel')) {
+        Effect.BlindDown('billingSummaryPanel');
+        Effect.BlindUp('editBillingPanel', {duration: 0.0});
+        Effect.Fade('openOrderSubmitPanel', {duration: 0.0});
+    }
+    if ($('orderSubmitPanel').visible()) {
+        Effect.BlindUp('orderSubmitPanel');
+    }
+    if (!$('editShippingOptionPanel').visible() && isShipStepValidate) {
+        if ($('shippingOptionSummaryPanel').visible()) {
+            Effect.BlindUp('shippingOptionSummaryPanel', {duration: 0.0});
+        }
+        Effect.BlindDown('editShippingOptionPanel');
+        Effect.Appear('editBilling');
+        Effect.Fade('processingShippingOptions');
+    }
 }
 
 // Billing
 function displayBillingPanel() {
+    if ($('billingSummaryPanel').visible()) {
+        Effect.BlindUp('billingSummaryPanel', {duration: 0.0});
+    }
+    Effect.BlindUp('editShippingOptionPanel', {duration: 0.0});
+    Effect.BlindDown('shippingOptionSummaryPanel', {duration: 0.0});
+    setDataInShippingOptionCompleted();
+    Effect.BlindDown('shippingOptionCompleted', {duration: 0.0});
+    Effect.BlindDown('editBillingPanel', {duration: 0.0});
+    
+    Effect.Appear('openOrderSubmitPanel', {duration: 0.0});
+    Effect.Fade('processingBilling', {duration: 0.0});
+}
+
+function displayEditBillingPanel() {
+
     if (!$('editBillingPanel').visible() && isShipOptionStepValidate) {
-        Effect.BlindDown('editBillingPanel', {duration: 0.5});
-        Effect.BlindDown('shippingOptionCompleted', {duration: 0.5});
-        Effect.BlindUp('editCartPanel', {duration: 0.5});
-        Effect.BlindUp('editShippingPanel', {duration: 0.5});
-        Effect.BlindUp('editShippingOptionPanel', {duration: 0.5});
-        Effect.BlindUp('orderSubmitPanel', {duration: 0.5});
-
-        Effect.Fade('billingSummaryPanel', {duration: 0.5});
-        Effect.Appear('cartSummaryPanel', {duration: 0.5});
-        Effect.Appear('shippingSummaryPanel', {duration: 0.5});
-        Effect.Appear('shippingOptionSummaryPanel', {duration: 0.5});
-        Effect.Appear('openOrderSubmitPanel', {duration: 0.3});
-        Effect.Fade('editShipping', {duration: 0.3});
-        Effect.Fade('processingBilling', {duration: 1.9});
-        Effect.Fade('editShippingOptions', {duration: 0.3});
-        Effect.Fade('editBilling', {duration: 0.3});
-        //Effect.Appear('orderSubmitPanel', {duration: 0.5});
+        Effect.BlindUp('billingSummaryPanel', {duration: 0.0});
+        Effect.BlindDown('editBillingPanel');
+        Effect.Appear('openOrderSubmitPanel');
+        Effect.Fade('processingOrderSubmitPanel');
+    }
+    if ($('editCartPanel').visible()) {
+        Effect.BlindUp('editCartPanel', {duration: 0.0});
+        Effect.BlindDown('cartSummaryPanel', {duration: 0.0});
+        Effect.Fade('editShipping');
+    }
+    if ($('editShippingPanel').visible()) {
+        Effect.BlindUp('editShippingPanel', {duration: 0.0});
+        Effect.BlindDown('shippingCompleted');
+        Effect.BlindDown('shippingSummaryPanel', {duration: 0.0});
+        Effect.Fade('editShippingOptions');
     }
     setDataInShippingOptionCompleted();
+    if ($('editShippingOptionPanel').visible()) {
+        Effect.BlindUp('editShippingOptionPanel', {duration: 0.0});
+        Effect.BlindUp('orderSubmitPanel', {duration: 0.0});
+        Effect.BlindDown('shippingOptionCompleted');
+        Effect.BlindDown('shippingOptionSummaryPanel', {duration: 0.0});
+        Effect.Fade('editBilling');
+    }
+    if ($('orderSubmitPanel')) {
+        Effect.BlindUp('orderSubmitPanel', {duration: 0.0});
+    }
 }
 
 // Order Submit
 function displayOrderSubmitPanel() {
+
     if (!$('orderSubmitPanel').visible() && isBillStepValidate) {
-        Effect.BlindDown('orderSubmitPanel', {duration: 0.5});
-        Effect.BlindDown('billingCompleted', {duration: 0.5});
-        Effect.BlindUp('editCartPanel', {duration: 0.5});
-        Effect.BlindUp('editShippingPanel', {duration: 0.5});
-        Effect.BlindUp('editShippingOptionPanel', {duration: 0.5});
-        Effect.BlindUp('editBillingPanel', {duration: 0.5});
-
-        Effect.Appear('cartSummaryPanel', {duration: 0.5});
-        Effect.Appear('shippingSummaryPanel', {duration: 0.5});
-        Effect.Appear('shippingOptionSummaryPanel', {duration: 0.5});
-        Effect.Appear('billingSummaryPanel', {duration: 0.5});
-        Effect.Fade('processingOrderButton', {duration: 0.5});
-        Effect.Appear('processOrderButton', {duration: 0.5});
-        Effect.Fade('processingOrderSubmitPanel', {duration: 0.9});
+        Effect.BlindUp('editBillingPanel', {duration: 0.0});
+        Effect.BlindDown('billingSummaryPanel', {duration: 0.0});
+        setDataInBillingCompleted();
+        Effect.BlindDown('billingCompleted', {duration: 0.0});
+        Effect.BlindDown('orderSubmitPanel', {duration: 0.0});
+        Effect.Fade('processingBilling', {duration: 0.0});
+        Effect.Fade('processingOrderButton', {duration: 0.0});
+        Effect.Appear('processOrderButton', {duration: 0.0});
+        Effect.Fade('processingOrderSubmitPanel', {duration: 0.0});
     }
-    setDataInBillingCompleted();
 }
 
 function processShippingAddress() {
@@ -259,8 +327,8 @@
                 Effect.Appear('shippingFormServerError');
                 $('shippingFormServerError').update(serverError);
                 isShipStepValidate = false;
-                Effect.Appear('editShippingOptions');
-                Effect.Fade('processingShippingOptions');
+                Effect.Appear('editShippingOptions', {duration: 0.0});
+                Effect.Fade('processingShippingOptions', {duration: 0.0});
             } else {
                 Effect.Fade('shippingFormServerError');
                 isShipStepValidate = true;
@@ -337,8 +405,8 @@
                 Effect.Appear('shippingOptionFormServerError');
                 $('shippingOptionFormServerError').update(serverError);
                 isShipOptionStepValidate = false;
-                Effect.Appear('editBilling');
-                Effect.Fade('processingBilling');
+                Effect.Appear('editBilling', {duration: 0.0});
+                Effect.Fade('processingBilling', {duration: 0.0});
             } else {
                 Effect.Fade('shippingOptionFormServerError');
                 isShipOptionStepValidate = true;
@@ -388,8 +456,8 @@
                 Effect.Appear('billingFormServerError');
                 $('billingFormServerError').update(serverError);
                 isBillStepValidate = false;
-                Effect.Appear('openOrderSubmitPanel');
-                Effect.Fade('processingOrderSubmitPanel');                
+                Effect.Appear('openOrderSubmitPanel', {duration: 0.0});
+                Effect.Fade('processingOrderSubmitPanel', {duration: 0.0});                
             } else {
                 Effect.Fade('billingFormServerError');
                 isBillStepValidate = true;