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
<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 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" %)
>>>> (((
>>>> ; <label
>>>> for="TestStarRating.TestStarRatingClass_0_Rating">$escapetool.xml($doc.displayPrettyName('Rating',
>>>> false, false))</label>
>>>> : $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 to do anything in the sheet except
> calling $doc.display('propertyThatHasACustomDisplayer') . There are a
> couple of Velocity variables available to the code of the custom
> displayer. $type is one of them. Check the code of existing custom
> displayers for the rest (if you don't see any #set for a variable then
> it means it's predefined).
>
>> Or do I need to replace in the sheet $doc.display(‘rating’) with something
>> else.
>> In the sheet I know I can get the ‘old’ value (if any) and display it since
>> I have the context of $doc
>> In the Class i’m not knowing to what context variable I should refer to
>> present the old value?
>>
>> Does my question/struggle make sense?
>>>>
>>>> I have the feeling that a velocity script in the custom display does not
>>>> have notion of $doc? Or can I use this context variable?
>>>>
>>>> The important change I want to achieve is change the ‘radio button’
>>>> behavior’ in a star-rating behavior.
>>>> Important is that this should stay visible in Read-mode as the numeric
>>>> result 3 is less informative as seeing three stars.
>>>>
>>>> I’m inspired by this code:
>>>> http://codepen.io/lsirivong/pen/ekBxI
>>>>
>>>> It uses CSS to style radiobuttons as star rating (and a small javascript)
>>>> But it requires radiobuttons to stay visible in view mode…
>>>>
>>>>
>>>> Op 10 jun. 2014, om 14:33 heeft Marius Dumitru Florea
>>>> <mariusdumitru.flo...@xwiki.com> het volgende geschreven:
>>>>
>>>>> I don't think there is a documentation unfortunately, but there are 3
>>>>> examples on
>>>>> http://extensions.xwiki.org/xwiki/bin/view/Main/WebHome#|t=extensions&p=1&l=30&s=doc.creationDate&d=desc&name=custom+display
>>>>> .
>>>>>
>>>>> Hope this helps,
>>>>> Marius
>>>>>
>>>>> On Thu, Jun 5, 2014 at 11:06 AM, Gerritjan Koekkoek
>>>>> <gerritjankoekk...@gmail.com> wrote:
>>>>>> Hi
>>>>>>
>>>>>> We are trying to develop questionnaires within xwiki.
>>>>>> In order to get clear answers from people we prefer static lists above
>>>>>> text
>>>>>> fields which would be more difficult to analyze.
>>>>>>
>>>>>> As a approach we start with appWithinMinutes and add attributes of type
>>>>>> static list
>>>>>>
>>>>>> Use case 1:
>>>>>> When we want the user to select one of a limited set of options we
>>>>>> typical
>>>>>> use radio button as input control.
>>>>>>
>>>>>> In edit mode this works fine.
>>>>>> But in collaborative mode this does not work very well for us.
>>>>>> What we mean by collaborative mode?
>>>>>> We have patients discussing the questionnaire with the expert.
>>>>>> Over the internet they both look at the page which holds the
>>>>>> questionnaire
>>>>>> already completed by the patient...
>>>>>> But since default XWiki is showing only the value selected discussions
>>>>>> about why the patient chose the one option above the other are too
>>>>>> difficult.
>>>>>> We would like the radiobuttons view in edit mode, but disabled for
>>>>>> modification; especially since in view mode changing the elected
>>>>>> option...
>>>>>>
>>>>>> Would it be possible to modify the class and add something in the "Custom
>>>>>> Display"?
>>>>>> Is there a useful document on how the custom display option for classes
>>>>>> works?
>>>>>>
>>>>>> Use case 2:
>>>>>> Some questions are of the type "How much would you agree"
>>>>>> Then the user can select between totally disagree, somewhat disagree,
>>>>>> neutral, somewhat agree totally agree.
>>>>>> We have now selected a static list with 5 options labeled as above...
>>>>>> But on the internet we often see sliders that can be put in 5 positions
>>>>>> (from left to right or from top to bottom)
>>>>>>
>>>>>> Would it be possible to use such sliders via Custom Display. As a base
>>>>>> attribute we would then probably switch from static list to a numeric
>>>>>> field
>>>>>> holding the value of the slider.
>>>>>> Same as in use case 1; can we also show the slider disabled in
>>>>>> 'collaborative mode'
>>>>>>
>>>>>> Many thanks for suggestions or links to documents that describe the
>>>>>> 'custom
>>>>>> display'
>>>>>>
>>>>>> Gerritjan
>>>>>> _______________________________________________
>>>>>> users mailing list
>>>>>> users@xwiki.org
>>>>>> http://lists.xwiki.org/mailman/listinfo/users
>>>>> _______________________________________________
>>>>> users mailing list
>>>>> users@xwiki.org
>>>>> http://lists.xwiki.org/mailman/listinfo/users
>>>>
>>>> _______________________________________________
>>>> users mailing list
>>>> users@xwiki.org
>>>> http://lists.xwiki.org/mailman/listinfo/users
>>> _______________________________________________
>>> users mailing list
>>> users@xwiki.org
>>> http://lists.xwiki.org/mailman/listinfo/users
>>
>> _______________________________________________
>> users mailing list
>> users@xwiki.org
>> http://lists.xwiki.org/mailman/listinfo/users
> _______________________________________________
> users mailing list
> users@xwiki.org
> http://lists.xwiki.org/mailman/listinfo/users
_______________________________________________
users mailing list
users@xwiki.org
http://lists.xwiki.org/mailman/listinfo/users
