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,7 @@
	1	+{{velocity}}
	2	+#set($currentDoc = $doc.fullName)
	3	+{{/velocity}}
	4	+
1	1	{{html clean="false"}}
2	2	<style>
3	3	.flora-rating-wrap {
...	...	@@ -16,12 +16,12 @@
16	16	color: #2A2B69;
17	17	}
18	18
19		-#flora-rating-widget {
	23	+.flora-rating-actions {
20	20	display: inline-flex;
21	21	gap: 4px;
22	22	}
23	23
24		-#flora-rating-widget .flora-star {
	28	+.flora-rating-actions button {
25	25	background: none;
26	26	border: none;
27	27	padding: 0;
...	...	@@ -32,8 +32,8 @@
32	32	color: #d4af37;
33	33	}
34	34
35		-#flora-rating-widget .flora-star:hover,
36		-#flora-rating-widget .flora-star.hovered {
	39	+.flora-rating-actions button:hover,
	40	+.flora-rating-actions button.hovered {
37	37	color: #f2c94c;
38	38	}
39	39
...	...	@@ -41,65 +41,34 @@
41	41	color: #2F2F2F;
42	42	}
43	43
44		-#flora-rating-message {
	48	+.flora-rating-message {
45	45	font-size: 13px;
46	46	color: #2F2F2F;
47	47	}
48	48	</style>
49		-{{/html}}
50	50
51		-{{groovy}}
52		-def doc = xcontext.getDoc().getFullName()
	54	+<div class="flora-rating-wrap">
	55	+ <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")
	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>
	63	+ </div>
56	56
57		-def notes = []
	65	+ <span class="flora-rating-message"></span>
	66	+</div>
58	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	96	<script>
97	97	(function () {
98		- const widget = document.getElementById('flora-rating-widget');
99		- if (!widget) return;
	70	+ const actions = document.querySelector('.flora-rating-actions');
	71	+ if (!actions) return;
100	100
101		- const stars = Array.from(widget.querySelectorAll('.flora-star'));
102		- const message = document.getElementById('flora-rating-message');
	73	+ const stars = Array.from(actions.querySelectorAll('button'));
	74	+ const message = document.querySelector('.flora-rating-message');
	75	+ const doc = actions.getAttribute('data-doc');
103	103
104	104	function floraGetCookieId() {
105	105	let id = localStorage.getItem('flora_rating_cookie');
...	...	@@ -124,7 +124,6 @@
124	124	star.addEventListener('click', function () {
125	125	const note = parseInt(this.dataset.note, 10);
126	126	const cookieId = floraGetCookieId();
127		- const doc = document.body.getAttribute('data-xwiki-document') || '';
128	128	const url = '/bin/view/Flora/RatingService3?xpage=plain'
129	129	+ '&note=' + encodeURIComponent(note)
130	130	+ '&doc=' + encodeURIComponent(doc)
...	...	@@ -134,14 +134,48 @@
134	134	.then(r => r.text())
135	135	.then(() => window.location.reload())
136	136	.catch(() => {
137		- if (message) message.innerText = 'Erreur lors de l’enregistrement.';
	109	+ if (message) {
	110	+ message.innerText = 'Erreur lors de l’enregistrement.';
	111	+ }
138	138	});
139	139	});
140	140	});
141	141
142		- widget.addEventListener('mouseleave', function () {
	116	+ actions.addEventListener('mouseleave', function () {
143	143	paintStars(0);
144	144	});
145	145	})();
146	146	</script>
147	147	{{/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}}