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