FANDOM


Ambox octogon stop

INCOMPLETE

This project is not complete and has not been in active development since 2012-12-21. What is working is no longer maintained and any current or future bugs are unlikely to be fixed. It is not recommended that you try to use this script in its current state.

If you are the script's author(s), you are free to remove this notice when development resumes.

AJAX Test


UI Test

NOTE: The values in the examples below are purely random. Refresh the page to see new values!

The widget comes in two varieties:

  1. Rateable
  2. Rated

Rateable

Elements with the CSS class rateable will be turned into rateable widgets. Their contents will be removed and four new elements will be added to each of them:

div.rateable-avg will be populated with the average rating
div.rateable-rating will be populated with the current user's rating
div.rateable-votes will be populated with the total number of votes
div.rateable-widget is the slider the user can iteract with

None of these elements or their classes should be removed or altered - unless you want to remove the Rateable entirely. Adding new elements, new attributes or new classes is safe however. The four CSS classes of the Rateable exist purely for scripting purposes. There are no CSS rules assigned to them. Feel free to define them however you like.

Example 1

By default the rateable widget uses a star of 15x15 pixels and a five star scale with increments of 0.5:

 

source:

<div class="rateable"> </div>

Example 2

The size of the star symbol and the number of stars can be overriden. Here the code uses a ten star scale with increments of 1:

 

source:

<div class="rateable" data-starsize="20" data-numstars="10"> </div>

Example 3

By default the widget is completely unstyled. This is the same widget with a bit of CSS magic:

 

source:

<div class="rateable preset1" data-starsize="20"> </div>

CSS for the demo above (click "Expand")

.rateable.preset1, .rateable.preset1 * {
    font-family: "Berkshire Swash",sans-serif;
    font-size: 0.95em;
    margin: 0 auto;
}
.rateable.preset1 {
    background: url(//images3.wikia.nocookie.net/dev/images/thumb/b/ba/Star.svg/50px-Star.svg.png) no-repeat scroll 0px 10px transparent;
    display: block;
    height: 60px;
    position: relative;
    width: 160px;
}
.rateable.preset1 .rateable-avg, .rateable.preset1 .rateable-rating, .rateable.preset1 .rateable-votes {
    display: block;
    position: absolute;
}
.rateable.preset1 .rateable-avg {
    color: black;
    font-size: 1.4em;
    left: 5px;
    text-align: center;
    top: 24px;
    width: 40px;
}
.rateable.preset1 .rateable-widget {
    display: block;
    left: 55px;
    margin: 0px;
    position: absolute;
    top: 21px;
}
.rateable.preset1 .rateable-votes {
    bottom: -6px;
    font-size: 1.2em;
    left: 52px;
}
.rateable.preset1 .rateable-votes:after {
    content: "votes";
    font-size: 0.8em;
    margin-left: 0.3em;
    position: relative;
    top: -0.25em;
}
.rateable.preset1 .rateable-rating {
    font-size: 1.4em;
    left: 115px;
    top: -6px;
}
.rateable.preset1 .rateable-rating:before {
    content: "your rating:";
    left: -70px;
    font-size: 0.75em;
    position: absolute;
    top: 4px;
    width: 70px;
}

Rated

The Rated widget is a redux of the Rateable widget. It doesn't have any data containers - only the slider. And the slider cannot be interacted with. The value can only be set via JavaScript and cannot be submitted.

Example 4

 

source:

<div class="rated"> </div>

Example 5

It's possible to specify an alternate symbol for both Rateable and Rated widgets:

source:

<div class="rated" data-starsize="50"
    data-src="//images4.wikia.nocookie.net/pecoes/images/thumb/0/02/Cube.svg">
</div>

Data Attributes

These attributes can be set for both Rateable and Rated widgets.

NOTE: These values can be set via wikitext only! Not via JavaScript!

data-starsize width and height of the star symbols in pixels — default (and minimum): 15
data-numstars the number of stars in the widget — currently supported values: 5 and 10 — default: 5
data-src the SVG from which the stars should be generated — defaults to the star you see above
data-altsrc the SVG that should be used as a background for the actual stars; if data-src is specified, but data-altsrc is not, data-src with an opacity of 10% will be used

Source

JavaScript for the demos above:

$('.rateable')
.each(function () {
    $(this)
    .rateable({
        votes: Math.floor(Math.random() * 999) + 1,
        avg:   Math.random() * 10,
        change: function (rating) {
            console.log('current value: ' + rating);
        },
        submit: function (rating) {
            console.log('final value: ' + rating);
        }
    });
});
 
$('.rated')
.each(function () {
    $(this).rated(Math.max(1, Math.round(Math.random() * 10)));
});

API

$.fn.rateable

adds a rateable UI to the selected object
jQuery.rateable()
returns:
jQuery object
identical to calling .rateable with an empty options object (see below)
jQuery.rateable(options)
parameter:
options plain object
possible fields:
fieldtypemeaningrangedefault
ratingintegeruser's rating0 ≤ rating ≤ 100
avgfloataverage rating 0 ≤ avg ≤ 100
votesintegertotal number of ratings0 < votes0
lockedbooleanif true the user can no longer set the rating — by clicking on the widget the user will set this value to true himselffalse
changefunctionto be called when the user hovers over the rating-widget; the function receives the rating as a parameter; the this object of the function will be the object on which .rateable was called
submitfunctionto be called when the user clicks on the rating-widget and locks his rating in; the function receives the rating as a parameter; the this object of the function will be the object on which .rateable was called
(all fields are optional)
returns:
jQuery object
This function serves two purposes:
  1. It creates a rateable widget and three data containers on the selected element with the specified options.
  2. If called on an element that already has a Rateable object it will set the specified options on that object.

You could use this to initialize the object before the data has arrived and fill it with values as soon as they're available:

$('.rateable')
.rateable({
    submit: submit
})
.css('visibility', 'hidden')
requestData()
.done(function (data) {
    $('.rateable')
    .rateable({
        votes: data.votes,
        avg: data.avg
    })
    .css('visibility', 'visible');
});


$.fn.rated

adds an immutable rateable UI to the selected object
jQuery.rated(rating)
parameter:
rating integer
rating that should be shown
returns:
jQuery object
Creates a rateable widget on the selected element with the specified rating. The rateable widget is locked and its value cannot be changed

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.