NextERP/documentation
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] reconciliation demo

Browse Source 
* multi-step process
* unreconcile button/step
* stepped animation
This commit is contained in:
Xavier Morel 2015-03-13 12:26:23 +01:00
parent 9e1f872362
commit 72389fd705
2 changed files with 69 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
_static/accounting.css
View File

@ -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 {

58
_static/reconciliation.js
View File

@ -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;
}
}
});
})();