Modifications pour le document RatingWidget

Résumé

• Propriétés de la Page (1 modifications, 0 ajouts, 0 suppressions)

Détails

Propriétés de la Page

Contenu

...	...	@@ -1,3 +1,43 @@
	1	+{{velocity}}
	2	+#if(!$ratingTarget)
	3	+ #set($ratingTarget = $doc.fullName)
	4	+#end
	5	+{{/velocity}}
	6	+
	7	+{{groovy}}
	8	+def currentDoc = "$ratingTarget"
	9	+
	10	+def store = xwiki.getDocument("Flora.RatingStore3")
	11	+def objects = store.getObjects("Flora.RatingVoteClass3")
	12	+
	13	+def total = 0
	14	+def count = 0
	15	+
	16	+if (objects != null) {
	17	+ for (o in objects) {
	18	+ if (o != null) {
	19	+ def docValue = o.getValue("document")
	20	+ def noteValue = o.getValue("note")
	21	+
	22	+ if (docValue != null && docValue.toString() == currentDoc && noteValue != null) {
	23	+ total += Integer.parseInt(noteValue.toString())
	24	+ count += 1
	25	+ }
	26	+ }
	27	+ }
	28	+}
	29	+
	30	+def avg = count > 0 ? total / count : 0
	31	+def stars = ""
	32	+for (int i = 1; i <= 5; i++) {
	33	+ stars += (i <= Math.round(avg)) ? "★" : "☆"
	34	+}
	35	+
	36	+xcontext.put("floraRatingDoc", currentDoc)
	37	+xcontext.put("floraRatingStars", stars)
	38	+xcontext.put("floraRatingCount", count)
	39	+{{/groovy}}
	40	+
1	1	{{html clean="false"}}
2	2	<style>
3	3	.flora-rating-wrap {
...	...	@@ -10,138 +10,43 @@
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 {
	57	+.flora-stars {
20	20	display: inline-flex;
21	21	gap: 4px;
22	22	}
23		-
24		-#flora-rating-widget .flora-star {
	61	+.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;
	64	+ font-size: 22px;
31	31	cursor: pointer;
32	32	color: #d4af37;
	67	+ padding: 0;
	68	+ margin: 0;
33	33	}
34		-
35		-#flora-rating-widget .flora-star:hover,
36		-#flora-rating-widget .flora-star.hovered {
	70	+.flora-stars button:hover,
	71	+.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()
	79	+<div class="flora-rating-wrap" data-doc="$escapetool.xml($floraRatingDoc)">
	80	+ <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")
	82	+ <div class="flora-stars">
	83	+ <button class="flora-star" data-note="1" type="button">★</button>
	84	+ <button class="flora-star" data-note="2" type="button">★</button>
	85	+ <button class="flora-star" data-note="3" type="button">★</button>
	86	+ <button class="flora-star" data-note="4" type="button">★</button>
	87	+ <button class="flora-star" data-note="5" type="button">★</button>
	88	+ </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>
	90	+ <span class="flora-rating-result">$floraRatingStars ($floraRatingCount votes)</span>
	91	+</div>
147	147	{{/html}}