Re: [xwiki-users] Custom display

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> <legend>Score</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-5">5</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-4">4</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-3">3</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-2">2</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-1">1</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-5">5</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-4">4</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-3">3</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-2">2</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-1">1</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:-9999px; 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 &lt;mariusdumitru.florea(a)xwiki.com&gt; het volgende geschreven: _______________________________________________ users mailing list users(a)xwiki.org http://lists.xwiki.org/mailman/listinfo/users