Modifications pour le document RatingWidget

Modifié par Pascale STEIMETZ-LE CACHEUX le 2026/03/25 16:54

Depuis la version 1.1
modifié par Pascale STEIMETZ-LE CACHEUX
sur 2026/03/24 11:45
Commentaire de modification : Il n'y a aucun commentaire pour cette version
À la version 8.3
modifié par Pascale STEIMETZ-LE CACHEUX
sur 2026/03/24 19:04
Commentaire de modification : allow view droit pour XWiki.XWikiAdminGroup

Résumé

Détails

Propriétés de la Page
Contenu
... ... @@ -1,3 +1,36 @@
1 +{{velocity}}
2 +#set($currentDoc = $doc.fullName)
3 +
4 +#set($storeDoc = $xwiki.getDocument("Flora.RatingStore3"))
5 +#set($objects = $storeDoc.getObjects("Flora.RatingVoteClass3"))
6 +
7 +#set($total = 0)
8 +#set($count = 0)
9 +
10 +#foreach($obj in $objects)
11 + #if($obj && $obj.getValue("document") == $currentDoc)
12 + #set($note = $obj.getValue("note"))
13 + #if($note)
14 + #set($total = $total + $note)
15 + #set($count = $count + 1)
16 + #end
17 + #end
18 +#end
19 +
20 +#if($count > 0)
21 + #set($avg = $total / $count)
22 +#else
23 + #set($avg = 0)
24 +#end
25 +
26 +#set($stars = "")
27 +#foreach($i in [1..5])
28 + #if($i <= $avg.round())
29 + #set($stars = "${stars}★")
30 + #else
31 + #set($stars = "${stars}☆")
32 + #end
33 +#end
1 1  {{html clean="false"}}
2 2  <style>
3 3  .flora-rating-wrap {
... ... @@ -10,138 +10,44 @@
10 10   flex-wrap: wrap;
11 11   font-size: 14px;
12 12  }
13 -
14 14  .flora-rating-label {
15 15   font-weight: 600;
16 16   color: #2A2B69;
17 17  }
18 -
19 -#flora-rating-widget {
50 +.flora-stars {
20 20   display: inline-flex;
21 21   gap: 4px;
22 22  }
23 -
24 -#flora-rating-widget .flora-star {
54 +.flora-stars button {
25 25   background: none;
26 26   border: none;
27 - padding: 0;
28 - margin: 0;
29 - font-size: 24px;
30 - line-height: 1;
57 + font-size: 22px;
31 31   cursor: pointer;
32 32   color: #d4af37;
60 + padding: 0;
61 + margin: 0;
33 33  }
34 -
35 -#flora-rating-widget .flora-star:hover,
36 -#flora-rating-widget .flora-star.hovered {
63 +.flora-stars button:hover,
64 +.flora-stars button.hovered {
37 37   color: #f2c94c;
38 38  }
39 -
40 40  .flora-rating-result {
41 41   color: #2F2F2F;
42 42  }
43 -
44 -#flora-rating-message {
45 - font-size: 13px;
46 - color: #2F2F2F;
47 -}
48 48  </style>
49 -{{/html}}
50 50  
51 -{{groovy}}
52 -def doc = xcontext.getDoc().getFullName()
72 +<div class="flora-rating-wrap" data-doc="$escapetool.xml($currentDoc)">
73 + <span class="flora-rating-label">Noter cette page</span>
53 53  
54 -def store = xwiki.getDocument("Flora.RatingStore3")
55 -def objects = store.getObjects("Flora.RatingVoteClass3")
75 + <div class="flora-stars">
76 + <button class="flora-star" data-note="1" type="button">★</button>
77 + <button class="flora-star" data-note="2" type="button">★</button>
78 + <button class="flora-star" data-note="3" type="button">★</button>
79 + <button class="flora-star" data-note="4" type="button">★</button>
80 + <button class="flora-star" data-note="5" type="button">★</button>
81 + </div>
56 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>
83 + <span class="flora-rating-result">$stars ($count votes)</span>
84 +</div>
147 147  {{/html}}
86 +{{/velocity}}
XWiki.XWikiRights[0]
Autoriser / Interdire
... ... @@ -1,0 +1,1 @@
1 +Autoriser
Groupes
... ... @@ -1,0 +1,1 @@
1 +XWiki.XWikiAllGroup
Niveaux
... ... @@ -1,0 +1,1 @@
1 +view
XWiki.XWikiRights[1]
Autoriser / Interdire
... ... @@ -1,0 +1,1 @@
1 +Autoriser
Groupes
... ... @@ -1,0 +1,1 @@
1 +XWiki.XWikiAdminGroup
Niveaux
... ... @@ -1,0 +1,1 @@
1 +view