Hi,
Thanks a lot Marius, i’ve made a lot of progress…
I now have a ‘Star rating’ based on a numeric field, type integer, min-value 1
max value of 5
In the custom display I have the following code:
{{velocity}}
#set($discard = $xwiki.ssx.use(tryControls.rangeValueSheet))
{{html clean=false}}
fieldset
legendScore/legend
span class=rating
#if($type == 'edit')
#set($discard = $xwiki.jsfx.use(tryControls.rangeValueSheet))
#if($value == 5)
input type=radio id=rating-5 name=rating value=5
checked=checked /
#else
input type=radio id=rating-5 name=rating value=5 /
#end
label for=rating-55/label
#if($value == 4)
input type=radio id=rating-4 name=rating value=4
checked=checked /
#else
input type=radio id=rating-4 name=rating value=4 /
#end
label for=rating-44/label
#if($value == 3)
input type=radio id=rating-3 name=rating value=3
checked=checked/
#else
input type=radio id=rating-3 name=rating value=3 /
#end
label for=rating-33/label
#if($value == 2)
input type=radio id=rating-2 name=rating value=2
checked=checked/
#else
input type=radio id=rating-2 name=rating value=2 /
#end
label for=rating-22/label
#if($value == 1)
input type=radio id=rating-1 name=rating value=1
checked=checked/
#else
input type=radio id=rating-1 name=rating value=1 /
#end
label for=rating-11/label
#else
#if($value == 5)
input type=radio id=rating-5 name=rating value=5 disabled
checked=checked /
#else
input type=radio id=rating-5 name=rating value=5 disabled/
#end
label for=rating-55/label
#if($value == 4)
input type=radio id=rating-4 name=rating value=4 disabled
checked=checked /
#else
input type=radio id=rating-4 name=rating value=4 disabled/
#end
label for=rating-44/label
#if($value == 3)
input type=radio id=rating-3 name=rating value=3 disabled
checked=checked/
#else
input type=radio id=rating-3 name=rating value=3 disabled/
#end
label for=rating-33/label
#if($value == 2)
input type=radio id=rating-2 name=rating value=2 disabled
checked=checked/
#else
input type=radio id=rating-2 name=rating value=2 disabled/
#end
label for=rating-22/label
#if($value == 1)
input type=radio id=rating-1 name=rating value=1 disabled
checked=checked/
#else
input type=radio id=rating-1 name=rating value=1 disabled/
#end
label for=rating-11/label
#end
/span
/fieldset
{{/html}}
{{/velocity}}
I feel the code can be ‘shortened’ significantly? Suggestions on how?
As you could see numeric value is displayed by radio button’s So if $value = 3
the third button is Checked.
To make it look like a star rating I added a CSS extension sheet: (from
http://lea.verou.me/2011/08/accessible-star-rating-widget-with-pure-css/)
.rating {
float:left;
}
/* :not(:checked) is a filter, so that browsers that don’t support :checked
don’t
follow these rules. Every browser that supports :checked also supports
:not(), so
it doesn’t make the test unnecessarily selective */
.rating:not(:checked) input {
position:absolute;
top:-px;
clip:rect(0,0,0,0);
}
.rating:not(:checked) label {
float:right;
width:1em;
padding:0 .1em;
overflow:hidden;
white-space:nowrap;
cursor:pointer;
font-size:200%;
line-height:1.2;
color:#ddd;
text-shadow:1px 1px #bbb, 2px 2px #666, .1em .1em .2em rgba(0,0,0,.5);
}
.rating:not(:checked) label:before {
content: '★ ';
}
.rating input:checked ~ label {
color: #f70;
text-shadow:1px 1px #c60, 2px 2px #940, .1em .1em .2em rgba(0,0,0,.5);
}
.rating:not(:checked) label:hover,
.rating:not(:checked) label:hover ~ label {
color: gold;
text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em
rgba(0,0,0,.5);
}
.rating input:checked + label:hover,
.rating input:checked + label:hover ~ label,
.rating input:checked ~ label:hover,
.rating input:checked ~ label:hover ~ label,
.rating label:hover ~ input:checked ~ label {
color: #ea0;
text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em
rgba(0,0,0,.5);
}
.rating label:active {
position:relative;
top:2px;
left:2px;
}
But my remaining problem is to SAVE the selected number? I have a record with a
value of 4, so a 4-star rating is selected and displayed perfectly.
If I select INLINE EDIT i’m able to SELECT 2 STARS (or any other), but as soon
as I SAVE the 4 star rating is still there.
How is this best done?
Op 19 jun. 2014, om 09:24 heeft Marius Dumitru Florea
mariusdumitru.flo...@xwiki.com het volgende geschreven:
On Tue, Jun 17, 2014 at 2:00 PM, Gerritjan Koekkoek
gerritjankoekk...@gmail.com wrote:
Hi
Op 17 jun. 2014, om 07:59 heeft Marius Dumitru Florea
mariusdumitru.flo...@xwiki.com het volgende geschreven:
On Mon, Jun 16, 2014 at 4:53 PM, Gerritjan Koekkoek
gerritjankoekk...@gmail.com wrote:
Hi,
Yes, this surely helps but i
