Skip to content

Commit 622957e

Browse files
mckenzieartsmckenziearts
committed
♿ Modification du scroll infini des articles
1 parent bc691ae commit 622957e

File tree

6 files changed

+127
-69
lines changed

6 files changed

+127
-69
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
"prettier-standard": "^16.4.1"
2525
},
2626
"dependencies": {
27+
"@alpinejs/intersect": "^3.6.1",
2728
"@headlessui/react": "^1.4.2",
2829
"@heroicons/react": "^1.0.5",
2930
"@tailwindcss/aspect-ratio": "^0.2.0",

‎public/css/app.css‎

Lines changed: 42 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -4575,12 +4575,15 @@ select {
45754575
.mb-3 {
45764576
margin-bottom: 0.75rem;
45774577
}
4578-
.-mt-12 {
4579-
margin-top: -3rem;
4580-
}
45814578
.mb-6 {
45824579
margin-bottom: 1.5rem;
45834580
}
4581+
.mb-8 {
4582+
margin-bottom: 2rem;
4583+
}
4584+
.-mt-12 {
4585+
margin-top: -3rem;
4586+
}
45844587
.-mb-px {
45854588
margin-bottom: -1px;
45864589
}
@@ -4599,9 +4602,6 @@ select {
45994602
.-ml-0 {
46004603
margin-left: 0px;
46014604
}
4602-
.mb-8 {
4603-
margin-bottom: 2rem;
4604-
}
46054605
.mr-0 {
46064606
margin-right: 0px;
46074607
}
@@ -4812,6 +4812,12 @@ select {
48124812
.w-48 {
48134813
width: 12rem;
48144814
}
4815+
.w-3\/4 {
4816+
width: 75%;
4817+
}
4818+
.w-5\/6 {
4819+
width: 83.333333%;
4820+
}
48154821
.min-w-0 {
48164822
min-width: 0px;
48174823
}
@@ -4950,6 +4956,22 @@ select {
49504956
-webkit-animation: spin 1s linear infinite;
49514957
animation: spin 1s linear infinite;
49524958
}
4959+
@-webkit-keyframes pulse {
4960+
4961+
50% {
4962+
opacity: .5;
4963+
}
4964+
}
4965+
@keyframes pulse {
4966+
4967+
50% {
4968+
opacity: .5;
4969+
}
4970+
}
4971+
.animate-pulse {
4972+
-webkit-animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
4973+
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
4974+
}
49534975
.cursor-pointer {
49544976
cursor: pointer;
49554977
}
@@ -5496,9 +5518,13 @@ select {
54965518
--tw-bg-opacity: 1;
54975519
background-color: rgba(248, 113, 113, var(--tw-bg-opacity));
54985520
}
5499-
.bg-indigo-600 {
5521+
.bg-blue-500 {
55005522
--tw-bg-opacity: 1;
5501-
background-color: rgba(79, 70, 229, var(--tw-bg-opacity));
5523+
background-color: rgba(59, 130, 246, var(--tw-bg-opacity));
5524+
}
5525+
.bg-yellow-100 {
5526+
--tw-bg-opacity: 1;
5527+
background-color: rgba(254, 243, 199, var(--tw-bg-opacity));
55025528
}
55035529
.bg-skin-link {
55045530
--tw-bg-opacity: 1;
@@ -5615,14 +5641,6 @@ select {
56155641
--tw-bg-opacity: 1;
56165642
background-color: rgba(220, 38, 38, var(--tw-bg-opacity));
56175643
}
5618-
.bg-blue-500 {
5619-
--tw-bg-opacity: 1;
5620-
background-color: rgba(59, 130, 246, var(--tw-bg-opacity));
5621-
}
5622-
.bg-yellow-100 {
5623-
--tw-bg-opacity: 1;
5624-
background-color: rgba(254, 243, 199, var(--tw-bg-opacity));
5625-
}
56265644
.bg-opacity-10 {
56275645
--tw-bg-opacity: 0.1;
56285646
}
@@ -6171,6 +6189,14 @@ select {
61716189
--tw-text-opacity: 1;
61726190
color: rgba(30, 157, 234, var(--tw-text-opacity));
61736191
}
6192+
.text-blue-800 {
6193+
--tw-text-opacity: 1;
6194+
color: rgba(30, 64, 175, var(--tw-text-opacity));
6195+
}
6196+
.text-yellow-800 {
6197+
--tw-text-opacity: 1;
6198+
color: rgba(146, 64, 14, var(--tw-text-opacity));
6199+
}
61746200
.text-red-600 {
61756201
--tw-text-opacity: 1;
61766202
color: rgba(220, 38, 38, var(--tw-text-opacity));
@@ -6179,10 +6205,6 @@ select {
61796205
--tw-text-opacity: 1;
61806206
color: rgba(251, 191, 36, var(--tw-text-opacity));
61816207
}
6182-
.text-yellow-800 {
6183-
--tw-text-opacity: 1;
6184-
color: rgba(146, 64, 14, var(--tw-text-opacity));
6185-
}
61866208
.text-yellow-700 {
61876209
--tw-text-opacity: 1;
61886210
color: rgba(180, 83, 9, var(--tw-text-opacity));
@@ -6287,18 +6309,6 @@ select {
62876309
--tw-text-opacity: 1;
62886310
color: rgba(127, 29, 29, var(--tw-text-opacity));
62896311
}
6290-
.text-blue-800 {
6291-
--tw-text-opacity: 1;
6292-
color: rgba(30, 64, 175, var(--tw-text-opacity));
6293-
}
6294-
.text-gray-900 {
6295-
--tw-text-opacity: 1;
6296-
color: rgba(17, 24, 39, var(--tw-text-opacity));
6297-
}
6298-
.text-gray-600 {
6299-
--tw-text-opacity: 1;
6300-
color: rgba(75, 85, 99, var(--tw-text-opacity));
6301-
}
63026312
.underline {
63036313
text-decoration: underline;
63046314
}
@@ -6769,11 +6779,6 @@ html {
67696779
background-color: rgba(var(--color-body-fill), var(--tw-bg-opacity));
67706780
}
67716781

6772-
.hover\:bg-indigo-700:hover {
6773-
--tw-bg-opacity: 1;
6774-
background-color: rgba(67, 56, 202, var(--tw-bg-opacity));
6775-
}
6776-
67776782
.hover\:bg-gray-800:hover {
67786783
--tw-bg-opacity: 1;
67796784
background-color: rgba(31, 41, 55, var(--tw-bg-opacity));
@@ -7195,11 +7200,6 @@ html {
71957200
--tw-ring-color: rgba(37, 99, 235, var(--tw-ring-opacity));
71967201
}
71977202

7198-
.focus\:ring-indigo-500:focus {
7199-
--tw-ring-opacity: 1;
7200-
--tw-ring-color: rgba(99, 102, 241, var(--tw-ring-opacity));
7201-
}
7202-
72037203
.focus\:ring-primary-600:focus {
72047204
--tw-ring-opacity: 1;
72057205
--tw-ring-color: rgba(22, 163, 74, var(--tw-ring-opacity));

‎public/js/app.js‎

Lines changed: 58 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,53 @@
11
/******/ (() => { // webpackBootstrap
22
/******/ var __webpack_modules__ = ({
33

4+
/***/ "./node_modules/@alpinejs/intersect/dist/module.esm.js":
5+
/*!*************************************************************!*\
6+
!*** ./node_modules/@alpinejs/intersect/dist/module.esm.js ***!
7+
\*************************************************************/
8+
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
9+
10+
"use strict";
11+
__webpack_require__.r(__webpack_exports__);
12+
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
13+
/* harmony export */ "default": () => (/* binding */ module_default)
14+
/* harmony export */ });
15+
// packages/intersect/src/index.js
16+
function src_default(Alpine) {
17+
Alpine.directive("intersect", (el, {value, expression, modifiers}, {evaluateLater, cleanup}) => {
18+
let evaluate = evaluateLater(expression);
19+
let options = {
20+
threshold: getThreshhold(modifiers)
21+
};
22+
let observer = new IntersectionObserver((entries) => {
23+
entries.forEach((entry) => {
24+
if (!entry.isIntersecting && value === "enter" || entry.isIntersecting && value === "leave" || entry.intersectionRatio === 0 && !value)
25+
return;
26+
evaluate();
27+
modifiers.includes("once") && observer.disconnect();
28+
});
29+
}, options);
30+
observer.observe(el);
31+
cleanup(() => {
32+
observer.disconnect();
33+
});
34+
});
35+
}
36+
function getThreshhold(modifiers) {
37+
if (modifiers.includes("full"))
38+
return 0.99;
39+
if (modifiers.includes("half"))
40+
return 0.5;
41+
return 0;
42+
}
43+
44+
// packages/intersect/builds/module.js
45+
var module_default = src_default;
46+
47+
48+
49+
/***/ }),
50+
451
/***/ "./node_modules/alpinejs/dist/module.esm.js":
552
/*!**************************************************!*\
653
!*** ./node_modules/alpinejs/dist/module.esm.js ***!
@@ -3196,13 +3243,15 @@ async function updateReply(id, body) {
31963243
"use strict";
31973244
__webpack_require__.r(__webpack_exports__);
31983245
/* harmony import */ var alpinejs__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! alpinejs */ "./node_modules/alpinejs/dist/module.esm.js");
3199-
/* harmony import */ var _plugins_internationalNumber__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./plugins/internationalNumber */ "./resources/js/plugins/internationalNumber.js");
3200-
/* harmony import */ var _elements__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./elements */ "./resources/js/elements/index.js");
3201-
/* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./helpers */ "./resources/js/helpers.js");
3202-
/* harmony import */ var _editor__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./editor */ "./resources/js/editor.js");
3203-
/* harmony import */ var _editor__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_editor__WEBPACK_IMPORTED_MODULE_4__);
3204-
/* harmony import */ var _scrollspy__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./scrollspy */ "./resources/js/scrollspy.js");
3205-
/* harmony import */ var _scrollspy__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_scrollspy__WEBPACK_IMPORTED_MODULE_5__);
3246+
/* harmony import */ var _alpinejs_intersect__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @alpinejs/intersect */ "./node_modules/@alpinejs/intersect/dist/module.esm.js");
3247+
/* harmony import */ var _plugins_internationalNumber__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./plugins/internationalNumber */ "./resources/js/plugins/internationalNumber.js");
3248+
/* harmony import */ var _elements__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./elements */ "./resources/js/elements/index.js");
3249+
/* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./helpers */ "./resources/js/helpers.js");
3250+
/* harmony import */ var _editor__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./editor */ "./resources/js/editor.js");
3251+
/* harmony import */ var _editor__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_editor__WEBPACK_IMPORTED_MODULE_5__);
3252+
/* harmony import */ var _scrollspy__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./scrollspy */ "./resources/js/scrollspy.js");
3253+
/* harmony import */ var _scrollspy__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_scrollspy__WEBPACK_IMPORTED_MODULE_6__);
3254+
32063255

32073256

32083257

@@ -3211,7 +3260,8 @@ __webpack_require__.r(__webpack_exports__);
32113260
// Add Alpine to window object.
32123261

32133262
window.Alpine = alpinejs__WEBPACK_IMPORTED_MODULE_0__["default"];
3214-
alpinejs__WEBPACK_IMPORTED_MODULE_0__["default"].data('internationalNumber', _plugins_internationalNumber__WEBPACK_IMPORTED_MODULE_1__["default"]);
3263+
alpinejs__WEBPACK_IMPORTED_MODULE_0__["default"].data('internationalNumber', _plugins_internationalNumber__WEBPACK_IMPORTED_MODULE_2__["default"]);
3264+
alpinejs__WEBPACK_IMPORTED_MODULE_0__["default"].plugin(_alpinejs_intersect__WEBPACK_IMPORTED_MODULE_1__["default"]);
32153265
alpinejs__WEBPACK_IMPORTED_MODULE_0__["default"].start();
32163266

32173267
/***/ }),

‎resources/js/app.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import Alpine from 'alpinejs'
2+
import intersect from '@alpinejs/intersect'
23

34
import internationalNumber from './plugins/internationalNumber'
45
import './elements'
@@ -10,5 +11,6 @@ import './scrollspy'
1011
window.Alpine = Alpine;
1112

1213
Alpine.data('internationalNumber', internationalNumber)
14+
Alpine.plugin(intersect)
1315

1416
Alpine.start();

‎resources/views/components/skeleton.blade.php‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<div class="p-4 w-full mx-auto bg-skin-card border border-skin-base shadow-sm rounded-md">
2+
<div class="animate-pulse flex space-x-4">
3+
<div class="flex-1 space-y-4 py-1">
4+
<div class="h-4 bg-skin-card-muted rounded w-3/4"></div>
5+
<div class="space-y-2">
6+
<div class="h-4 bg-skin-card-muted rounded"></div>
7+
<div class="h-4 bg-skin-card-muted rounded w-5/6"></div>
8+
<div class="h-4 bg-skin-card-muted rounded w-5/6"></div>
9+
</div>
10+
</div>
11+
</div>
12+
</div>

‎resources/views/livewire/articles/browse.blade.php‎

Lines changed: 12 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -17,19 +17,8 @@
1717
</div>
1818
</div>
1919
<div
20-
x-data="{
21-
init() {
22-
let observer = new IntersectionObserver((entries) => {
23-
entries.forEach(entry => {
24-
if (entry.isIntersecting) {
25-
@this.call('loadMore')
26-
}
27-
})
28-
}, { root: null })
29-
30-
observer.observe(this.$el)
31-
}
32-
}"
20+
x-data
21+
x-intersect="@this.call('loadMore')"
3322
class="lg:grid lg:grid-cols-8 lg:gap-8 lg:col-span-7"
3423
>
3524
<div class="lg:col-span-6">
@@ -48,14 +37,18 @@ class="lg:grid lg:grid-cols-8 lg:gap-8 lg:col-span-7"
4837
@endforeach
4938
</div>
5039

51-
<div class="mt-4 flex justify-center">
52-
@if($articles->hasMorePages())
53-
<button wire:click.prevent="loadMore" class="flex items-center text-skin-base text-sm leading-5">
40+
@if($articles->hasMorePages())
41+
<div
42+
x-data
43+
x-intersect="@this.call('loadMore')"
44+
class="mt-5 flex justify-center"
45+
>
46+
<p class="flex items-center">
5447
<x-loader class="text-skin-primary" />
5548
Chargement...
56-
</button>
57-
@endif
58-
</div>
49+
</p>
50+
</div>
51+
@endif
5952
</div>
6053

6154
<div class="hidden lg:block lg:col-span-2">

0 commit comments

Comments
 (0)