From 72389fd705904e86eb1d04c999dad59077c76cc6 Mon Sep 17 00:00:00 2001
From: Xavier Morel <xmo@odoo.com>
Date: Fri, 13 Mar 2015 12:26:23 +0100
Subject: [PATCH] [IMP] reconciliation demo

* multi-step process
* unreconcile button/step
* stepped animation
---
 _static/accounting.css    | 48 ++++++++++++++++----------------
 _static/reconciliation.js | 58 +++++++++++++++++++++++++++++----------
 2 files changed, 69 insertions(+), 37 deletions(-)

diff --git a/_static/accounting.css b/_static/accounting.css
index af96291d4..6dc8780c6 100644
--- a/_static/accounting.css
+++ b/_static/accounting.css
@@ -100,43 +100,45 @@ li > p {
     }
 }
 
-#reconciliation #example button {
-    display: block;
-    margin: 0 auto;
+#reconciliation #example div.buttons {
+    display: flex;
+    justify-content: center;
 }
-/* When .reconcile-accounts is added to section, hide .invoice2 then .invoice1
-   rows */
-@keyframes invoice1 {
-    50% {
-        font-size: 100%;
-        /* should have no effect on tr */
-        /* don't touch horizontal padding to avoid moving content too much */
-        padding-top: 5px;
-        padding-bottom: 5px;
-    }
-    100% {
-        font-size: 0%;
-        padding-top: 0;
-        padding-bottom: 0;
-    }
+#reconciliation #example div.buttons button {
+    margin: 0 0.5em;
 }
-@keyframes invoice2 {
+
+@keyframes reconcile {
     0% {
         font-size: 100%;
         padding-top: 5px;
         padding-bottom: 5px;
+        background-color: rgba(2, 0, 31, 0);
+    }
+    60% {
+        background-color: rgba(2, 0, 31, 1);
+    }
+    80% {
+        font-size: 100%;
+        padding-top: 5px;
+        padding-bottom: 5px;
     }
     100% {
         font-size: 0%;
         padding-top: 0;
         padding-bottom: 0;
+        display: none;
     }
 }
-.reconcile-accounts .invoice1, .reconcile-accounts .invoice1 td {
-    animation: invoice1 5s ease-in forwards;
+.reconcile1 .invoice1, .reconcile1 .invoice1 td {
+    animation: reconcile 5s ease-in forwards;
 }
-.reconcile-accounts .invoice2, .reconcile-accounts .invoice2 td {
-    animation: invoice2 2.5s ease-in forwards;
+.reconcile2 .invoice2, .reconcile2 .invoice2 td {
+    animation: reconcile 5s ease-in forwards;
+}
+
+.invoice1.reconciled, .invoice2.reconciled {
+    display: none;
 }
 
 blockquote.highlights {
diff --git a/_static/reconciliation.js b/_static/reconciliation.js
index 31c2880d3..ef143f3bc 100644
--- a/_static/reconciliation.js
+++ b/_static/reconciliation.js
@@ -1,9 +1,27 @@
 (function () {
     document.addEventListener('DOMContentLoaded', function () {
+        var state = 0;
+        var operations = [
+            function reconcile2() {
+                $rec.addClass('reconcile2');
+                return 1;
+            },
+            function reconcile1() {
+                $rec.addClass('reconcile1');
+                return 2;
+            },
+            function unreconcile() {
+                $rec.removeClass('reconcile1 reconcile2');
+                $1.add($2).removeClass('reconciled');
+                setTimeout(update_btn, 0);
+                return 0;
+            }
+        ];
         var $rec = $('#reconciliation #example');
-        var $btn = $('<button class="btn btn-success" type="button">')
-            .text("Reconcile")
-            .appendTo($rec);
+        var $buttons = $('<div class="buttons">').on('click', 'button', function () {
+            this.disabled = true;
+            state = operations[state]();
+        }).appendTo($rec);
 
         var $1 = $rec.find('td:contains("Invoice 1"), td:contains("Payment 1")')
             .parent()
@@ -12,23 +30,35 @@
             .parent()
             .addClass('invoice2');
 
-        // will be called multiple times (each tr + each td), doesn't matter
-        // since the behavior is constant
+        // will be called multiple times (each tr + each td), only take trs in
+        // account
         $rec.on('animationend webkitAnimationEnd MSAnimationEnd', function (e) {
-            switch (e.originalEvent.animationName) {
-            case 'invoice1':
-                $1.hide();
+            switch (e.originalEvent.target) {
+            case $1[0]:
+                $1.addClass('reconciled');
                 break;
-            case 'invoice2':
-                $2.hide();
+            case $2[0]:
+                $2.addClass('reconciled');
                 break;
             }
+            update_btn();
         });
+        update_btn();
 
-        $btn.click(function () {
-            $rec.addClass('reconcile-accounts');
-            $btn.prop('disabled', true);
-        });
+        function update_btn() {
+            var $reconcile = $('<button class="btn btn-success" type="button">')
+                .text("Reconcile")
+                .appendTo($buttons.empty())
+            switch (state) {
+            case 0: case 1: break;
+            case 2:
+                $reconcile.prop('disabled', true);
+                $('<button class="btn btn-primary" type="button">')
+                    .text("Unreconcile")
+                    .appendTo($buttons);
+                break;
+            }
+        }
     });
 })();