Modifications pour le document RatingWidget

Résumé

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

Détails

Propriétés de la Page

Auteur du document

...	...	@@ -1,1 +1,1 @@
1		-XWiki.XWikiGuest
	1	+XWiki.PSZ

Contenu

...	...	@@ -1,36 +34,3 @@
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
34	34	{{html clean="false"}}
35	35	<style>
36	36	.flora-rating-wrap {
...	...	@@ -43,44 +43,138 @@
43	43	flex-wrap: wrap;
44	44	font-size: 14px;
45	45	}
	13	+
46	46	.flora-rating-label {
47	47	font-weight: 600;
48	48	color: #2A2B69;
49	49	}
50		-.flora-stars {
	18	+
	19	+#flora-rating-widget {
51	51	display: inline-flex;
52	52	gap: 4px;
53	53	}
54		-.flora-stars button {
	23	+
	24	+#flora-rating-widget .flora-star {
55	55	background: none;
56	56	border: none;
57		- font-size: 22px;
58		- cursor: pointer;
59		- color: #d4af37;
60	60	padding: 0;
61	61	margin: 0;
	29	+ font-size: 24px;
	30	+ line-height: 1;
	31	+ cursor: pointer;
	32	+ color: #d4af37;
62	62	}
63		-.flora-stars button:hover,
64		-.flora-stars button.hovered {
	34	+
	35	+#flora-rating-widget .flora-star:hover,
	36	+#flora-rating-widget .flora-star.hovered {
65	65	color: #f2c94c;
66	66	}
	39	+
67	67	.flora-rating-result {
68	68	color: #2F2F2F;
69	69	}
	43	+
	44	+#flora-rating-message {
	45	+ font-size: 13px;
	46	+ color: #2F2F2F;
	47	+}
70	70	</style>
	49	+{{/html}}
71	71
72		-<div class="flora-rating-wrap" data-doc="$escapetool.xml($currentDoc)">
73		- <span class="flora-rating-label">Noter cette page</span>
	51	+{{groovy}}
	52	+def doc = xcontext.getDoc().getFullName()
74	74
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>
	54	+def store = xwiki.getDocument("Flora.RatingStore3")
	55	+def objects = store.getObjects("Flora.RatingVoteClass3")
82	82
83		- <span class="flora-rating-result">$stars ($count votes)</span>
84		-</div>
	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>
85	85	{{/html}}
86		-{{/velocity}}