Skip to content

Commit

Permalink
countup
Browse files Browse the repository at this point in the history
  • Loading branch information
Goulven.Furet authored and Goulven.Furet committed Oct 19, 2023
1 parent ec544b0 commit e1f17f0
Show file tree
Hide file tree
Showing 4 changed files with 109 additions and 11 deletions.
3 changes: 2 additions & 1 deletion ui/src/main/resources/static/assets/js/pixel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ d.addEventListener("DOMContentLoaded", function (event) {

setTimeout(function () {
preloader.classList.add('show');
$( "#body").trigger( "tplLoaded");
}, 1500);
}

Expand Down Expand Up @@ -476,4 +477,4 @@ d.addEventListener("DOMContentLoaded", function (event) {
}).mount();
}

});
});
4 changes: 2 additions & 2 deletions ui/src/main/resources/templates/inc/product-compensation.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@

<div class="d-flex p-3">
<div class="icon icon-primary">
<p class="icon-box-text text-center" style="font-size: 3em;">
<th:block th:text="${#numbers.formatDecimal(product.bestPrice().compensation, 1, 2)}"></th:block>
<p class="icon-box-text text-center" style="font-size: 3em;">
<span id="countup-reversment" th:data-max="${product.bestPrice().compensation}"></span>
<span class="align-baseline font-medium" th:text="#{'symbol.'+${product.bestPrice().currency}}"></span>
</p>
</div>
Expand Down
83 changes: 77 additions & 6 deletions ui/src/main/resources/templates/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,8 +80,8 @@
<form method="post" id="searchForm" action="/recherche">
<div class="d-flex flex-wrap mt-lg-2">
<div class="input-group input-group-lg">
<input type="text" id="searchInput" class="form-control" th:placeholder="'Chercher dans ' + ${#numbers.formatDecimal(totalItems, 0, 'COMMA', 0, 'POINT')} + ' produits'" aria-label="Search" aria-describedby="basic-addon1" name="query">
<button onclick="document.getElementById('searchForm').submit()" class="btn btn-primary" type="button"><span class="icon icon-xs me-1"><span class="fas fa-search"></span></span> Chercher</button>
<input type="text" id="searchInput" class="form-control" th:placeholder="'Nudger dans ' + ${#numbers.formatDecimal(totalItems, 0, 'COMMA', 0, 'POINT')} + ' produits'" aria-label="Search" aria-describedby="basic-addon1" name="query">
<button onclick="document.getElementById('searchForm').submit()" class="btn btn-primary" type="button"><span class="icon icon-xs me-1"><span class="fas fa-search"></span></span> Nudger</button>
</div>
</div>
</form>
Expand Down Expand Up @@ -205,24 +205,24 @@ <h2 class="h4 m-0">Data responsable</h2>
<!--/* Numbers */-->
<section class="section bg-gray-200">

<div class="container container-semi-fluid">
<div id="statistics" class="container container-semi-fluid">

<div class="row justify-content-center mb-5 mb-lg-6">
<div class="col-4 text-center mb-4">
<div
class="icon icon-shape icon-lg bg-white shadow-lg border-light rounded-circle mb-4">
<span class="fas fa-puzzle-piece text-tertiary"></span>
</div>
<h3 class="fw-bolder">150€</h3>
<h3 id="amount-reversment" class="fw-bolder statvalue" th:attr="numx = 1500">1</h3>
<p class="text-gray">Montant du coup de pouce à date de Nudger pour la planète</p>
</div>
<div class="col-4 text-center mb-4">
<div
class="icon icon-shape icon-lg bg-white shadow-lg border-light rounded-circle mb-4">
<span class="fas fa-pager text-tertiary"></span>
</div>
<h3 class="fw-bolder">15M+ Offres commerciales</h3>
<p class="text-gray">Un des comparateurs les plus fournis</p>
<h3 class="fw-bolder" th:attr="numx = 1500000"></h3>
<p class="text-gray">Nombre d'offres commerciales. Un des comparateurs les plus fournis de la place.</p>
</div>
<div class="col-4 text-center">
<div
Expand Down Expand Up @@ -389,6 +389,14 @@ <h2 class="h4 mb-2">Open-source et Open-data</h2>
<script src="../../vendor/headroom.js/dist/headroom.min.js"></script>
<script src="../../vendor/smooth-scroll/dist/smooth-scroll.polyfills.min.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js" integrity="sha512-CEiA+78TpP9KAIPzqBvxUv8hy41jyI3f2uHi7DGp/Y/Ka973qgSdybNegWFciqh6GrN2UePx2KkflnQUbUhNIA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>


<script src="../../vendor/countup.js/dist/countUp.umd.js"></script>



<!-- Vendor JS -->

<!--
Expand Down Expand Up @@ -420,6 +428,69 @@ <h2 class="h4 mb-2">Open-source et Open-data</h2>
} );




var options = {  
useEasing: true,
  useGrouping: true,
  separator: ',',
  decimal: '.',
  prefix: '',
  suffix: ''
};

var counts = [];

$('.statvalue').each(function() {
var num = $(this).attr('numx'); //end count
var nuen = $(this).text();
if (nuen === "") {
nuen = 0;
}

counts.push(new countUp.CountUp(this, nuen, num, 0, 3, options));
});

var waypoint1 = new Waypoint({
element: document.getElementById("statistics"),
handler: function(direction) {
if (direction == "up") {
for (var i = 0; i < counts.length; i++) {
counts[i].reset();
}
} else {
for (var i = 0; i < counts.length; i++) {
counts[i].start();
}
}
},
offset: "50%"
});





/*
// CountUp
var options = {
  useEasing : true,
  useGrouping : true,
  separator : ',',
  decimal : '.',
  prefix : '',
  suffix : ''
};
var reversment = new countUp.CountUp("amount-reversment", 7741, options);
reversment.start();
*/

</script>

</body>
Expand Down
30 changes: 28 additions & 2 deletions ui/src/main/resources/templates/product.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -182,7 +182,7 @@
<script src="../../vendor/jarallax/dist/jarallax.min.js"></script>
<script src="../../vendor/chartist/dist/chartist.min.js"></script>
<script src="../../vendor/chartist-plugin-tooltips/dist/chartist-plugin-tooltip.min.js"></script>
<script src="../../vendor/countup.js/dist/countUp.umd.js"></script>
<script src="../../vendor/vanillajs-datepicker/dist/js/datepicker.min.js"></script>
<script async defer src="https://buttons.github.io/buttons.js"></script>
<script src="../../vendor/@glidejs/glide/dist/glide.min.js"></script>
Expand All @@ -198,7 +198,7 @@

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>


<script src="../../vendor/countup.js/dist/countUp.umd.js"></script>
<!-- pixel JS -->
<script src="../../assets/js/pixel.js"></script>
<!-- custom sources -->
Expand Down Expand Up @@ -232,6 +232,32 @@
});
}


// Countup on reversement

// CountUp

var options = {
duration: 3,
  useEasing : false,
  useGrouping : false,
  separator : ',',
  decimal : '.',
decimalPlaces: 2,
  prefix : '',
  suffix : ''
};


var reversment = new countUp.CountUp("countup-reversment", $("#countup-reversment").attr("data-max"), options);
setTimeout(reversment.start(), 5000);







} );
</script>

Expand Down

0 comments on commit e1f17f0

Please sign in to comment.