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}}
Score
#if($type == 'edit')
#set($discard = $xwiki.jsfx.use("tryControls.rangeValueSheet"))
#if($value == 5)
#else
#end
5
#if($value == 4)
#else
#end
4
#if($value == 3)
#else
#end
3
#if($value == 2)
#else
#end
2
#if($value == 1)
#else
#end
1
#else
#if($value == 5)
#else
#end
5
#if($value == 4)
#else
#end
4
#if($value == 3)
#else
#end
3
#if($value == 2)
#else
#end
2
#if($value == 1)
#else
#end
1
#end
{{/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
het volgende geschreven:
> On Tue, Jun 17, 2014 at 2:00 PM, Gerritjan Koekkoek
> wrote:
>> Hi
>> Op 17 jun. 2014, om 07:59 heeft Marius Dumitru Florea
>> het volgende geschreven:
>>
>>> On Mon, Jun 16, 2014 at 4:53 PM, Gerritjan Koekkoek
>>> wrote:
Hi,
Yes, this surely helps but i fail to get it work as I hope it can.
I have generated a app with App Within Minutes.
In the sheet there is a construct like this:
{{velocity}}
{{html wiki="true"}}
#set ($discard = $doc.use('TestStarRating.TestStarRatingClass'))
#set ($discard = $services.localization.use('document',
'TestStarRating.TestStarRatingTranslations'))
(% class="xform" %)
(((
; >>> for="TestStarRating.TestStarRatingClass_0_Rating">$escapetool.xml($doc.displayPrettyName('Rating',
false, false))
: $doc.display('Rating')
)))
{{/html}}
{{/velocity}}
:$doc.display(‘Rating’) is ‘smart’ as it knows when in ‘View’ and ‘Edit’
mode.
If I would go to the class and modify Custom Display
>>>
How can I keep the ‘smartness’ of $doc.display?
>>>
>>> Have you really looked at the code of the existing custom displayers
>>> found on extensions.xwiki.org ? i.e. did you download the source XAR
>>> and imported it in your wiki to check the code? It doesn't seem so,
>>> because you would have seen something like:
>>>
>>> #if ($type == 'edit’)
>> Yes, have looked at it and this is what puzzles me…
>> In the generated sheet code from app-within minutes there is no notion of
>> this…
>> I think basically my question is:
>
>> If I keep $doc.display(‘rating’) in the sheet
>> And build a IF then else for different behavior in View and Edit mode…will
>> this work?
>
> If it works for the custom displayers published on
> extensions.xwiki.org then it should work for you too. Have you tried
> to use one of them? You don't have
