From 7d07f43e5346db8a651c8af82391e0d823b6256f Mon Sep 17 00:00:00 2001 From: Robert Goldmann <deadlocker@gmx.de> Date: Mon, 21 Jan 2019 19:43:07 +0100 Subject: [PATCH] #391 - added fade animations --- .../resources/static/js/globalDatePicker.js | 35 +++++++++++-------- .../{datePicker.ftl => globalDatePicker.ftl} | 0 .../resources/templates/reports/reports.ftl | 2 +- .../templates/transactions/newTransaction.ftl | 2 +- .../templates/transactions/transactions.ftl | 2 +- 5 files changed, 23 insertions(+), 18 deletions(-) rename src/main/resources/templates/helpers/{datePicker.ftl => globalDatePicker.ftl} (100%) diff --git a/src/main/resources/static/js/globalDatePicker.js b/src/main/resources/static/js/globalDatePicker.js index 636083b4b..31084a321 100644 --- a/src/main/resources/static/js/globalDatePicker.js +++ b/src/main/resources/static/js/globalDatePicker.js @@ -27,30 +27,35 @@ var year; function cleanup() { year = undefined; - $("#global-datepicker-select-year").show(); $("#global-datepicker-select-month").hide(); + $("#global-datepicker-select-year").show(); } function updateYearGrid(modifier, currentYear) { - var items = $("#global-datepicker-select-year .global-datepicker-item"); - var firstYear = parseInt(items[0].innerText); - var newFirstYear = firstYear + modifier; - - for (var i = 0; i < items.length; i++) { - items[i].innerText = newFirstYear + i; - if (items[i].innerText === currentYear) { - items[i].classList.add("global-datepicker-selected"); - } - else { - items[i].classList.remove("global-datepicker-selected"); + $("#global-datepicker-select-year").fadeOut(200, function () { + var items = $("#global-datepicker-select-year .global-datepicker-item"); + var firstYear = parseInt(items[0].innerText); + var newFirstYear = firstYear + modifier; + + for (var i = 0; i < items.length; i++) { + items[i].innerText = newFirstYear + i; + if (items[i].innerText === currentYear) { + items[i].classList.add("global-datepicker-selected"); + } + else { + items[i].classList.remove("global-datepicker-selected"); + } } - } + + $("#global-datepicker-select-year").fadeIn(200); + }); } function selectYear(selectedYear) { year = selectedYear; - $("#global-datepicker-select-year").hide(); - $("#global-datepicker-select-month").show(); + $("#global-datepicker-select-year").fadeOut(200, function () { + $("#global-datepicker-select-month").fadeIn(200); + }); } function selectMonth(selectedMonth) { diff --git a/src/main/resources/templates/helpers/datePicker.ftl b/src/main/resources/templates/helpers/globalDatePicker.ftl similarity index 100% rename from src/main/resources/templates/helpers/datePicker.ftl rename to src/main/resources/templates/helpers/globalDatePicker.ftl diff --git a/src/main/resources/templates/reports/reports.ftl b/src/main/resources/templates/reports/reports.ftl index a62982fd2..323484c4e 100644 --- a/src/main/resources/templates/reports/reports.ftl +++ b/src/main/resources/templates/reports/reports.ftl @@ -12,7 +12,7 @@ <main> <div class="card main-card background-color"> - <#import "../helpers/datePicker.ftl" as datePicker> + <#import "../helpers/globalDatePicker.ftl" as datePicker> <@datePicker.datePicker currentDate springMacroRequestContext.getRequestUri()/> <br> diff --git a/src/main/resources/templates/transactions/newTransaction.ftl b/src/main/resources/templates/transactions/newTransaction.ftl index 2b8a49b75..d1561fbc1 100644 --- a/src/main/resources/templates/transactions/newTransaction.ftl +++ b/src/main/resources/templates/transactions/newTransaction.ftl @@ -344,7 +344,7 @@ </main> <!-- Pass localization to JS --> - <#import "../helpers/datePicker.ftl" as datePicker> + <#import "../helpers/globalDatePicker.ftl" as datePicker> <@datePicker.datePickerLocalization/> <script> startDate = "${startDate}".split("."); diff --git a/src/main/resources/templates/transactions/transactions.ftl b/src/main/resources/templates/transactions/transactions.ftl index 828adaa66..cb98175de 100644 --- a/src/main/resources/templates/transactions/transactions.ftl +++ b/src/main/resources/templates/transactions/transactions.ftl @@ -12,7 +12,7 @@ <main> <div class="card main-card background-color"> - <#import "../helpers/datePicker.ftl" as datePicker> + <#import "../helpers/globalDatePicker.ftl" as datePicker> <@datePicker.datePicker currentDate springMacroRequestContext.getRequestUri()/> <div class="container"> <div class="row"> -- GitLab