[IMP] reconciliation demo

* multi-step process
* unreconcile button/step
* stepped animation

_static/accounting.css

@@ -100,43 +100,45 @@ li > p {
     }
 }
 
-#reconciliation #example button {
+#reconciliation #example div.buttons {
-    display: block;
+    display: flex;
-    margin: 0 auto;
+    justify-content: center;
 }
-/* When .reconcile-accounts is added to section, hide .invoice2 then .invoice1
+#reconciliation #example div.buttons button {
-   rows */
+    margin: 0 0.5em;
-@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;
-    }
 }
-@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 {
+.reconcile1 .invoice1, .reconcile1 .invoice1 td {
-    animation: invoice1 5s ease-in forwards;
+    animation: reconcile 5s ease-in forwards;
 }
-.reconcile-accounts .invoice2, .reconcile-accounts .invoice2 td {
+.reconcile2 .invoice2, .reconcile2 .invoice2 td {
-    animation: invoice2 2.5s ease-in forwards;
+    animation: reconcile 5s ease-in forwards;
+}
+
+.invoice1.reconciled, .invoice2.reconciled {
+    display: none;
 }
 
 blockquote.highlights {

_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">')
+        var $buttons = $('<div class="buttons">').on('click', 'button', function () {
-            .text("Reconcile")
+            this.disabled = true;
-            .appendTo($rec);
+            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
+        // will be called multiple times (each tr + each td), only take trs in
-        // since the behavior is constant
+        // account
         $rec.on('animationend webkitAnimationEnd MSAnimationEnd', function (e) {
-            switch (e.originalEvent.animationName) {
+            switch (e.originalEvent.target) {
-            case 'invoice1':
+            case $1[0]:
-                $1.hide();
+                $1.addClass('reconciled');
                 break;
-            case 'invoice2':
+            case $2[0]:
-                $2.hide();
+                $2.addClass('reconciled');
                 break;
             }
+            update_btn();
         });
+        update_btn();
 
-        $btn.click(function () {
+        function update_btn() {
-            $rec.addClass('reconcile-accounts');
+            var $reconcile = $('<button class="btn btn-success" type="button">')
-            $btn.prop('disabled', true);
+                .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;
+            }
+        }
     });
 })();