Aller au contenu

Code source wiki de RatingWidget

Version 1.1 par Pascale STEIMETZ-LE CACHEUX le 2026/03/24 11:45
Masquer les derniers auteurs
Pascale STEIMETZ-LE CACHEUX 1.1 1 {{html clean="false"}}
2 <style>
3 .flora-rating-wrap {
4 margin-top: 16px;
5 padding-top: 10px;
6 border-top: 1px solid #D9DFEE;
7 display: flex;
8 align-items: center;
9 gap: 14px;
10 flex-wrap: wrap;
11 font-size: 14px;
12 }
13
14 .flora-rating-label {
15 font-weight: 600;
16 color: #2A2B69;
17 }
18
19 #flora-rating-widget {
20 display: inline-flex;
21 gap: 4px;
22 }
23
24 #flora-rating-widget .flora-star {
25 background: none;
26 border: none;
27 padding: 0;
28 margin: 0;
29 font-size: 24px;
30 line-height: 1;
31 cursor: pointer;
32 color: #d4af37;
33 }
34
35 #flora-rating-widget .flora-star:hover,
36 #flora-rating-widget .flora-star.hovered {
37 color: #f2c94c;
38 }
39
40 .flora-rating-result {
41 color: #2F2F2F;
42 }
43
44 #flora-rating-message {
45 font-size: 13px;
46 color: #2F2F2F;
47 }
48 </style>
49 {{/html}}
50
51 {{groovy}}
52 def doc = xcontext.getDoc().getFullName()
53
54 def store = xwiki.getDocument("Flora.RatingStore3")
55 def objects = store.getObjects("Flora.RatingVoteClass3")
56
57 def notes = []
58
59 if (objects != null) {
60 for (o in objects) {
61 if (o != null && o.getValue("document") == doc) {
62 notes.add(o.getValue("note"))
63 }
64 }
65 }
66
67 def moyenne = 0
68 if (notes.size() > 0) {
69 moyenne = notes.sum() / notes.size()
70 }
71
72 print('<div class="flora-rating-wrap">')
73 print('<span class="flora-rating-label">Noter cette page</span>')
74
75 print('<div id="flora-rating-widget" aria-label="Noter cette page">')
76 for (int i = 1; i <= 5; i++) {
77 print('<button type="button" class="flora-star" data-note="' + i + '" aria-label="' + i + ' étoiles">★</button>')
78 }
79 print('</div>')
80
81 print('<span class="flora-rating-result">')
82 for (int i = 1; i <= 5; i++) {
83 if (i <= Math.round(moyenne)) {
84 print('★')
85 } else {
86 print('☆')
87 }
88 }
89 print(' (' + notes.size() + ' votes)</span>')
90
91 print('<span id="flora-rating-message"></span>')
92 print('</div>')
93 {{/groovy}}
94
95 {{html clean="false"}}
96 <script>
97 (function () {
98 const widget = document.getElementById('flora-rating-widget');
99 if (!widget) return;
100
101 const stars = Array.from(widget.querySelectorAll('.flora-star'));
102 const message = document.getElementById('flora-rating-message');
103
104 function floraGetCookieId() {
105 let id = localStorage.getItem('flora_rating_cookie');
106 if (!id) {
107 id = 'browser-' + Math.random().toString(36).slice(2);
108 localStorage.setItem('flora_rating_cookie', id);
109 }
110 return id;
111 }
112
113 function paintStars(count) {
114 stars.forEach((star, index) => {
115 star.classList.toggle('hovered', index < count);
116 });
117 }
118
119 stars.forEach((star) => {
120 star.addEventListener('mouseenter', function () {
121 paintStars(parseInt(this.dataset.note, 10));
122 });
123
124 star.addEventListener('click', function () {
125 const note = parseInt(this.dataset.note, 10);
126 const cookieId = floraGetCookieId();
127 const doc = document.body.getAttribute('data-xwiki-document') || '';
128 const url = '/bin/view/Flora/RatingService3?xpage=plain'
129 + '&note=' + encodeURIComponent(note)
130 + '&doc=' + encodeURIComponent(doc)
131 + '&cookieId=' + encodeURIComponent(cookieId);
132
133 fetch(url)
134 .then(r => r.text())
135 .then(() => window.location.reload())
136 .catch(() => {
137 if (message) message.innerText = 'Erreur lors de l’enregistrement.';
138 });
139 });
140 });
141
142 widget.addEventListener('mouseleave', function () {
143 paintStars(0);
144 });
145 })();
146 </script>
147 {{/html}}