From 107dc370b3b572c66654fe63fa839ffc2e89e82e Mon Sep 17 00:00:00 2001
From: Robert Goldmann <deadlocker@gmx.de>
Date: Mon, 13 May 2019 20:58:41 +0200
Subject: [PATCH] #274 - scroll to highlighted transaction
---
src/main/resources/static/js/transactions.js | 21 +++++++++++++++++++
.../templates/transactions/transactions.ftl | 4 ++--
2 files changed, 23 insertions(+), 2 deletions(-)
diff --git a/src/main/resources/static/js/transactions.js b/src/main/resources/static/js/transactions.js
index 21a2a6413..090a50dd1 100644
--- a/src/main/resources/static/js/transactions.js
+++ b/src/main/resources/static/js/transactions.js
@@ -181,8 +181,29 @@ $( document ).ready(function() {
direction: 'bottom',
hoverEnabled: false
});
+
+ // scroll to highlighted transaction
+ var highlightedSmall = document.getElementById("highlighted-small");
+ var highlightedLarge = document.getElementById("highlighted-large");
+ if(highlightedSmall !== undefined && !isHidden(highlightedSmall))
+ {
+ $('html, body').animate({
+ scrollTop: $(highlightedSmall).offset().top
+ }, 500);
+ }
+ else if(highlightedLarge !== undefined && !isHidden(highlightedLarge))
+ {
+ $('html, body').animate({
+ scrollTop: $(highlightedLarge).offset().top
+ }, 500);
+ }
});
+function isHidden(el) {
+ var style = window.getComputedStyle(el);
+ return (style.display === 'none' || style.display === 'none !important')
+}
+
var transactionRepeatingModifierID = "#transaction-repeating-modifier";
var transactionRepeatingEndAfterXTimesInputID = "#transaction-repeating-end-after-x-times-input";
diff --git a/src/main/resources/templates/transactions/transactions.ftl b/src/main/resources/templates/transactions/transactions.ftl
index 85eb1e6ec..5b0a67760 100644
--- a/src/main/resources/templates/transactions/transactions.ftl
+++ b/src/main/resources/templates/transactions/transactions.ftl
@@ -52,7 +52,7 @@
<#list transactions as transaction>
<#assign shouldHighlight = highlightID?? && transaction.getID()?? && transaction.getID()==highlightID/>
- <div class="hide-on-large-only transaction-row-top <#if shouldHighlight>budgetmaster-blue-light</#if>">
+ <div class="hide-on-large-only transaction-row-top <#if shouldHighlight>budgetmaster-blue-light" id="highlighted-small"<#else>"</#if>>
<div class="row valign-wrapper transaction-row-bottom">
<div class="col s3 center-align bold transaction-text">
${dateService.getDateStringWithoutYear(transaction.date)}
@@ -66,7 +66,7 @@
<@transactionsMacros.transactionAmount transaction account "s4"/>
</div>
</div>
- <div class="hide-on-med-and-down transaction-row-top transaction-row-bottom <#if shouldHighlight>budgetmaster-blue-light</#if>">
+ <div class="hide-on-med-and-down transaction-row-top transaction-row-bottom <#if shouldHighlight>budgetmaster-blue-light" id="highlighted-large"<#else>"</#if>>
<div class="row valign-wrapper no-margin-bottom">
<div class="col l1 xl1 bold transaction-text transaction-line-height">
${dateService.getDateStringWithoutYear(transaction.date)}
--
GitLab