TestPage

Test Page for messing about with Wikia features.

Template:Mbox
Template:Infobox JavaScript

## 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-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-numstars
 data-src
 data-altsrc

### 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)));
});

```