Initial commit
After Width: | Height: | Size: 995 B |
BIN
app/static/global/plugins/rateit/example/content/antenna-red.png
Normal file
After Width: | Height: | Size: 992 B |
After Width: | Height: | Size: 992 B |
16
app/static/global/plugins/rateit/example/content/antenna.css
Normal file
@ -0,0 +1,16 @@
|
||||
div.antenna div.rateit-range
|
||||
{
|
||||
background: url(antenna-black.png) no-repeat;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
div.antenna div.rateit-hover
|
||||
{
|
||||
background: url(antenna-yellow.png) no-repeat;
|
||||
}
|
||||
|
||||
div.antenna div.rateit-selected
|
||||
{
|
||||
background: url(antenna-red.png) no-repeat;
|
||||
}
|
||||
|
@ -0,0 +1,34 @@
|
||||
/*
|
||||
SOURCE: http://iconexpo.com/2008/12/free-8color-star-icons/
|
||||
|
||||
*/
|
||||
|
||||
|
||||
div.bigstars div.rateit-range
|
||||
{
|
||||
background: url(star-white32.png);
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
div.bigstars div.rateit-hover
|
||||
{
|
||||
background: url(star-gold32.png);
|
||||
}
|
||||
|
||||
div.bigstars div.rateit-selected
|
||||
{
|
||||
background: url(star-red32.png);
|
||||
}
|
||||
|
||||
div.bigstars div.rateit-reset
|
||||
{
|
||||
background: url(star-black32.png);
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
|
||||
}
|
||||
|
||||
div.bigstars div.rateit-reset:hover
|
||||
{
|
||||
background: url(star-white32.png);
|
||||
}
|
After Width: | Height: | Size: 1.4 KiB |
BIN
app/static/global/plugins/rateit/example/content/star-gold32.png
Normal file
After Width: | Height: | Size: 1.7 KiB |
BIN
app/static/global/plugins/rateit/example/content/star-red32.png
Normal file
After Width: | Height: | Size: 1.7 KiB |
After Width: | Height: | Size: 1.6 KiB |
BIN
app/static/global/plugins/rateit/example/content/star_2.gif
Normal file
After Width: | Height: | Size: 2.4 KiB |
BIN
app/static/global/plugins/rateit/example/content/star_3.gif
Normal file
After Width: | Height: | Size: 2.4 KiB |
BIN
app/static/global/plugins/rateit/example/content/star_4.gif
Normal file
After Width: | Height: | Size: 2.4 KiB |
639
app/static/global/plugins/rateit/example/example.htm
Normal file
@ -0,0 +1,639 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>RateIt</title>
|
||||
<link href="../src/rateit.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
|
||||
|
||||
<style>
|
||||
body
|
||||
{
|
||||
font-family: Tahoma;
|
||||
font-size: 12px;
|
||||
}
|
||||
h1
|
||||
{
|
||||
font-size: 1.7em;
|
||||
}
|
||||
h2
|
||||
{
|
||||
font-size: 1.5em;
|
||||
}
|
||||
h3
|
||||
{
|
||||
font-size: 1.2em;
|
||||
}
|
||||
ul.nostyle
|
||||
{
|
||||
list-style: none;
|
||||
}
|
||||
ul.nostyle h3
|
||||
{
|
||||
margin-left: -20px;
|
||||
}
|
||||
</style>
|
||||
<!-- alternative styles -->
|
||||
<link href="content/bigstars.css" rel="stylesheet" type="text/css">
|
||||
<link href="content/antenna.css" rel="stylesheet" type="text/css">
|
||||
<!-- syntax highlighter -->
|
||||
<link href="sh/shCore.css" rel="stylesheet" type="text/css">
|
||||
<link href="sh/shCoreDefault.css" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>
|
||||
RateIt plugin</h1>
|
||||
<h2>
|
||||
Prerequisites</h2>
|
||||
<p>
|
||||
In order to use RateIt you'll need:
|
||||
<ul>
|
||||
<li><a target="_blank" href="http://www.jquery.com">jQuery 1.6.0</a> or newer.</li>
|
||||
<li>jquery.rateit.min.js, rateit.css, delete.gif, star.gif - <a href="http://rateit.codeplex.com/releases">
|
||||
Download RateIt</a></li>
|
||||
<li>Place a reference to the rateit.css stylesheet into the page head.</li>
|
||||
<li>Place a script reference to jquery.rateit.js before your </body> tag.
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
<h2>
|
||||
Options</h2>
|
||||
Go to the <a href="http://rateit.codeplex.com">RateIt project homepage</a> to view
|
||||
the documentation.
|
||||
<h2>
|
||||
Examples</h2>
|
||||
<div style="font-weight: bold">
|
||||
<span id="toc"></span>
|
||||
</div>
|
||||
<ul class="nostyle" id="examples">
|
||||
<li id="ex_a1">
|
||||
<h3>
|
||||
1a) Basic usage</h3>
|
||||
<div class="rateit">
|
||||
</div>
|
||||
<pre class="brush: xml">
|
||||
<div class="rateit">
|
||||
</div>
|
||||
</pre>
|
||||
</li>
|
||||
<li id="ex_1b">
|
||||
<h3>
|
||||
1a) Basic usage (inline element)</h3>
|
||||
<span class="rateit">
|
||||
</span>
|
||||
<pre class="brush: xml">
|
||||
<span class="rateit">
|
||||
</span>
|
||||
</pre>
|
||||
</li>
|
||||
<li id="ex_2a">
|
||||
<h3>
|
||||
2a) Progressive enhancement (using HTML5 range input type)
|
||||
</h3>
|
||||
<input type="range" min="0" max="7" value="0" step="0.5" id="backing2">
|
||||
<div class="rateit" data-rateit-backingfld="#backing2">
|
||||
</div>
|
||||
<pre class="brush: xml">
|
||||
<input type="range" min="0" max="7" value="0" step="0.5" id="backing2">
|
||||
<div class="rateit" data-rateit-backingfld="#backing2"></div>
|
||||
</pre>
|
||||
<button onclick="$('#backing2').toggle()">
|
||||
Toggle Backing Field visibility</button>
|
||||
</li>
|
||||
<li id="ex_2b">
|
||||
<h3>
|
||||
2b) Progressive enhancement (using select)
|
||||
</h3>
|
||||
<select id="backing2b">
|
||||
<option value="0">Bad</option>
|
||||
<option value="1">OK</option>
|
||||
<option value="2">Great</option>
|
||||
<option value="3">Excellent</option>
|
||||
</select>
|
||||
<div class="rateit" data-rateit-backingfld="#backing2b">
|
||||
</div>
|
||||
<pre class="brush: xml">
|
||||
<select id="backing2b">
|
||||
<option value="0">Bad</option>
|
||||
<option value="1">OK</option>
|
||||
<option value="2">Great</option>
|
||||
<option value="3">Excellent</option>
|
||||
</select>
|
||||
<div class="rateit" data-rateit-backingfld="#backing2b"></div>
|
||||
</pre>
|
||||
</li>
|
||||
<li id="ex_3">
|
||||
<h3>
|
||||
3) Readonly and preset value</h3>
|
||||
<div class="rateit" data-rateit-value="2.5" data-rateit-ispreset="true" data-rateit-readonly="true">
|
||||
</div>
|
||||
<pre class="brush: xml">
|
||||
<div class="rateit" data-rateit-value="2.5" data-rateit-ispreset="true" data-rateit-readonly="true"></div>
|
||||
</pre>
|
||||
</li>
|
||||
<li id="ex_4">
|
||||
<h3>
|
||||
4) More settings</h3>
|
||||
<input type="range" value="4" step="0.25" id="backing4">
|
||||
<div class="rateit" data-rateit-backingfld="#backing4" data-rateit-resetable="false" data-rateit-ispreset="true"
|
||||
data-rateit-min="0" data-rateit-max="10">
|
||||
</div>
|
||||
<pre class="brush: xml">
|
||||
<input type="range" value="4" step="0.25" id="backing4">
|
||||
<div class="rateit" data-rateit-backingfld="#backing4" data-rateit-resetable="false" data-rateit-ispreset="true"
|
||||
data-rateit-min="0" data-rateit-max="10">
|
||||
</div>
|
||||
|
||||
</pre>
|
||||
</li>
|
||||
<li id="ex_5">
|
||||
<h3>
|
||||
5) Javascript interaction</h3>
|
||||
<div class="rateit" id="rateit5" data-rateit-min="2">
|
||||
</div>
|
||||
<div>
|
||||
<span id="value5"></span><span id="hover5"></span>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
$("#rateit5").bind('rated', function (event, value) { $('#value5').text('You\'ve rated it: ' + value); });
|
||||
$("#rateit5").bind('reset', function () { $('#value5').text('Rating reset'); });
|
||||
$("#rateit5").bind('over', function (event, value) { $('#hover5').text('Hovering over: ' + value); });
|
||||
</script>
|
||||
|
||||
<pre class="brush: xml">
|
||||
<div class="rateit" id="rateit5" data-rateit-min="2">
|
||||
</div>
|
||||
<div>
|
||||
<span id="value5"></span>
|
||||
<span id="hover5"></span>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
$("#rateit5").bind('rated', function (event, value) { $('#value5').text('You\'ve rated it: ' + value); });
|
||||
$("#rateit5").bind('reset', function () { $('#value5').text('Rating reset'); });
|
||||
$("#rateit5").bind('over', function (event, value) { $('#hover5').text('Hovering over: ' + value); });
|
||||
</script>
|
||||
</pre>
|
||||
</li>
|
||||
<li id="ex_6">
|
||||
<h3>
|
||||
6) Javascript invocation</h3>
|
||||
<input type="hidden" id="backing6">
|
||||
<div id="rateit6">
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(function () { $('#rateit6').rateit({ max: 20, step: 2, backingfld: '#backing6' }); });
|
||||
</script>
|
||||
|
||||
<pre class="brush: xml">
|
||||
<input type="hidden" id="backing6">
|
||||
<div id="rateit6">
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(function () { $('#rateit6').rateit({ max: 20, step: 2, backingfld: '#backing6' }); });
|
||||
</script>
|
||||
</pre>
|
||||
</li>
|
||||
<li id="ex_7a">
|
||||
<h3>
|
||||
7a) Styling</h3>
|
||||
<p>
|
||||
You can change the styles of the plugin in a two ways.
|
||||
<ul>
|
||||
<li>You can change change the star.gif and delete.gif pictures (and perhaps the default
|
||||
starwidth, and starheight values in the javascript file). This will change the style
|
||||
everywhere.</li>
|
||||
<li>You can change individual items, by adding a stylesheet with a few rules.</li>
|
||||
</ul>
|
||||
Here I've opted for the second option.
|
||||
</p>
|
||||
<div class="rateit bigstars" data-rateit-starwidth="32" data-rateit-starheight="32">
|
||||
</div>
|
||||
<h4>
|
||||
Inline code</h4>
|
||||
<pre class="brush: xml">
|
||||
<div class="rateit bigstars" data-rateit-starwidth="32" data-rateit-starheight="32"></div>
|
||||
</pre>
|
||||
<h4>
|
||||
Style sheet</h4>
|
||||
<pre class="brush: css">
|
||||
div.bigstars div.rateit-range
|
||||
{
|
||||
background: url(star-white32.png);
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
div.bigstars div.rateit-hover
|
||||
{
|
||||
background: url(star-gold32.png);
|
||||
}
|
||||
|
||||
div.bigstars div.rateit-selected
|
||||
{
|
||||
background: url(star-red32.png);
|
||||
}
|
||||
|
||||
div.bigstars div.rateit-reset
|
||||
{
|
||||
background: url(star-black32.png);
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
div.bigstars div.rateit-reset:hover
|
||||
{
|
||||
background: url(star-white32.png);
|
||||
}
|
||||
</pre>
|
||||
</li>
|
||||
<li id="ex_7b">
|
||||
<h3>
|
||||
7b) More styling</h3>
|
||||
<p>
|
||||
Here we use one big image (actually 3), with different dimensions. Not very pretty,
|
||||
but it conveys the message I hope.</p>
|
||||
<div class="rateit antenna" data-rateit-starwidth="11" data-rateit-starheight="25">
|
||||
</div>
|
||||
<h4>
|
||||
Inline code</h4>
|
||||
<pre class="brush: xml">
|
||||
<div class="rateit antenna" data-rateit-starwidth="11" data-rateit-starheight="25"></div>
|
||||
</pre>
|
||||
<h4>
|
||||
Style sheet</h4>
|
||||
<pre class="brush: css">
|
||||
div.antenna div.rateit-range
|
||||
{
|
||||
background: url(antenna-black.png) no-repeat;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
div.antenna div.rateit-hover
|
||||
{
|
||||
background: url(antenna-yellow.png) no-repeat;
|
||||
}
|
||||
|
||||
div.antenna div.rateit-selected
|
||||
{
|
||||
background: url(antenna-red.png) no-repeat;
|
||||
}
|
||||
</pre>
|
||||
</li>
|
||||
<li id="ex_8">
|
||||
<h3>
|
||||
8) RTL support</h3>
|
||||
<div style="direction: rtl">
|
||||
Now we are in RTL mode. No changes needed to make this work.
|
||||
<div class="rateit">
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li id="ex_9">
|
||||
<h3>
|
||||
9) Setting and Getting values</h3>
|
||||
<p>
|
||||
All properties can also be set on the fly. Here are a few examples:</p>
|
||||
<div class="rateit" id="rateit9">
|
||||
</div>
|
||||
<div>
|
||||
<button onclick="alert($('#rateit9').rateit('value'))">
|
||||
Get value</button>
|
||||
<button onclick="$('#rateit9').rateit('value', prompt('Input numerical value'))">
|
||||
Set value</button>
|
||||
</div>
|
||||
<div>
|
||||
<button onclick="alert($('#rateit9').rateit('max'))">
|
||||
Get max value</button>
|
||||
<button onclick="$('#rateit9').rateit('max', prompt('Input numerical value'))">
|
||||
Set max value</button>
|
||||
</div>
|
||||
<div>
|
||||
<button onclick="alert($('#rateit9').rateit('min'))">
|
||||
Get min value</button>
|
||||
<button onclick="$('#rateit9').rateit('min', prompt('Input numerical value'))">
|
||||
Set min value</button>
|
||||
</div>
|
||||
<div>
|
||||
<button onclick="alert($('#rateit9').rateit('step'))">
|
||||
Get step size</button>
|
||||
<button onclick="$('#rateit9').rateit('step', prompt('Input numerical value'))">
|
||||
Set step size</button>
|
||||
</div>
|
||||
<div>
|
||||
<button onclick="alert($('#rateit9').rateit('readonly'))">
|
||||
Get readonly value</button>
|
||||
<button onclick="$('#rateit9').rateit('readonly',!$('#rateit9').rateit('readonly'))">
|
||||
Toggle readonly</button>
|
||||
</div>
|
||||
<div>
|
||||
<button onclick="alert($('#rateit9').rateit('ispreset'))">
|
||||
Get ispreset value</button>
|
||||
<button onclick="$('#rateit9').rateit('ispreset',!$('#rateit9').rateit('ispreset'))">
|
||||
Toggle ispreset</button>
|
||||
</div>
|
||||
<div>
|
||||
<button onclick="$('#rateit9').rateit('reset')">
|
||||
Reset
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
<pre class="brush: xml">
|
||||
<div class="rateit" id="rateit9">
|
||||
</div>
|
||||
<div>
|
||||
<button onclick="alert($('#rateit9').rateit('value'))">Get value</button>
|
||||
<button onclick="$('#rateit9').rateit('value', prompt('Input numerical value'))">Set value</button>
|
||||
</div>
|
||||
<div>
|
||||
<button onclick="alert($('#rateit9').rateit('max'))">Get max value</button>
|
||||
<button onclick="$('#rateit9').rateit('max', prompt('Input numerical value'))">Set max value</button>
|
||||
</div>
|
||||
<div>
|
||||
<button onclick="alert($('#rateit9').rateit('step'))">Get step size</button>
|
||||
<button onclick="$('#rateit9').rateit('step', prompt('Input numerical value'))">Set step size</button>
|
||||
</div>
|
||||
<div>
|
||||
<button onclick="alert($('#rateit9').rateit('readonly'))">Get readonly value</button>
|
||||
<button onclick="$('#rateit9').rateit('readonly',!$('#rateit9').rateit('readonly'))">Toggle readonly</button>
|
||||
</div>
|
||||
<div>
|
||||
<button onclick="alert($('#rateit9').rateit('ispreset'))">Get ispreset value</button>
|
||||
<button onclick="$('#rateit9').rateit('ispreset',!$('#rateit9').rateit('ispreset'))">Toggle ispreset</button>
|
||||
</div>
|
||||
<div>
|
||||
<button onclick="$('#rateit9').rateit('reset')">Reset</button>
|
||||
</div>
|
||||
</pre>
|
||||
</li>
|
||||
<li id="ex_10">
|
||||
<h3>
|
||||
10) Tooltip example</h3>
|
||||
<p>
|
||||
Using tooltips is easy. Just bind to the hover event, and do your thing. Shown here
|
||||
is the basic tooltip, but of course you can use any tooltip you'd like.</p>
|
||||
<h4>
|
||||
Basic numbers</h4>
|
||||
<div class="rateit" id="rateit10">
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
$("#rateit10").bind('over', function (event, value) { $(this).attr('title', value); });
|
||||
</script>
|
||||
|
||||
<pre class="brush: xml">
|
||||
<div class="rateit" id="rateit10">
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
$("#rateit10").bind('over', function (event,value) { $(this).attr('title', value); });
|
||||
</script>
|
||||
</pre>
|
||||
<h4>
|
||||
Custom text</h4>
|
||||
<div class="rateit" id="rateit10b" data-rateit-step="1">
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
var tooltipvalues = ['bad', 'poor', 'ok', 'good', 'super'];
|
||||
$("#rateit10b").bind('over', function (event, value) { $(this).attr('title', tooltipvalues[value - 1]); });
|
||||
</script>
|
||||
|
||||
<pre class="brush: xml">
|
||||
<div class="rateit" id="rateit10b" data-rateit-step="1">
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
var tooltipvalues = ['bad', 'poor', 'ok', 'good', 'super'];
|
||||
$("#rateit10b").bind('over', function (event, value) { $(this).attr('title', tooltipvalues[value-1]); });
|
||||
</script>
|
||||
</pre>
|
||||
</li>
|
||||
<li id="ex_11">
|
||||
<h3>
|
||||
11) AJAX example</h3>
|
||||
<p>
|
||||
Most times RateIt will be used using some Ajax. There are different ways of implementing
|
||||
it (with/without backing field, using data-* attributes etc.)</p>
|
||||
<div id="products">
|
||||
<div style="float: right; width: 350px; border: 1px solid #ccc; padding: 1em;">
|
||||
<strong>Server response:</strong>
|
||||
<ul id="response">
|
||||
</ul>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<h4>
|
||||
Product X (id: 312)</h4>
|
||||
RateIt:
|
||||
<div data-productid="312" class="rateit">
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<h4>
|
||||
Product Y (id: 423)</h4>
|
||||
RateIt:
|
||||
<div data-productid="423" class="rateit">
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<h4>
|
||||
Product Z (id: 653)</h4>
|
||||
RateIt:
|
||||
<div data-productid="653" class="rateit">
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
//we bind only to the rateit controls within the products div
|
||||
$('#products .rateit').bind('rated reset', function (e) {
|
||||
var ri = $(this);
|
||||
|
||||
//if the use pressed reset, it will get value: 0 (to be compatible with the HTML range control), we could check if e.type == 'reset', and then set the value to null .
|
||||
var value = ri.rateit('value');
|
||||
var productID = ri.data('productid'); // if the product id was in some hidden field: ri.closest('li').find('input[name="productid"]').val()
|
||||
|
||||
//maybe we want to disable voting?
|
||||
ri.rateit('readonly', true);
|
||||
|
||||
$.ajax({
|
||||
url: 'rateit.aspx', //your server side script
|
||||
data: { id: productID, value: value }, //our data
|
||||
type: 'POST',
|
||||
success: function (data) {
|
||||
$('#response').append('<li>' + data + '</li>');
|
||||
|
||||
},
|
||||
error: function (jxhr, msg, err) {
|
||||
$('#response').append('<li style="color:red">' + msg + '</li>');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<h4>
|
||||
Client</h4>
|
||||
<pre class="brush: xml">
|
||||
<div id="products">
|
||||
<div style="float:right; width:350px; border:1px solid #ccc; padding:1em;">
|
||||
<strong>Server response:</strong>
|
||||
<ul id="response">
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
<ul>
|
||||
<li><h4>Product X (id: 312)</h4>
|
||||
RateIt: <div data-productid="312" class="rateit"></div>
|
||||
</li>
|
||||
<li><h4>Product Y (id: 423)</h4>
|
||||
RateIt: <div data-productid="423" class="rateit"></div></li>
|
||||
<li><h4>Product Z (id: 653)</h4>
|
||||
RateIt: <div data-productid="653" class="rateit"></div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<script type ="text/javascript">
|
||||
//we bind only to the rateit controls within the products div
|
||||
$('#products .rateit').bind('rated reset', function (e) {
|
||||
var ri = $(this);
|
||||
|
||||
//if the use pressed reset, it will get value: 0 (to be compatible with the HTML range control), we could check if e.type == 'reset', and then set the value to null .
|
||||
var value = ri.rateit('value');
|
||||
var productID = ri.data('productid'); // if the product id was in some hidden field: ri.closest('li').find('input[name="productid"]').val()
|
||||
|
||||
//maybe we want to disable voting?
|
||||
ri.rateit('readonly', true);
|
||||
|
||||
$.ajax({
|
||||
url: 'rateit.aspx', //your server side script
|
||||
data: { id: productID, value: value }, //our data
|
||||
type: 'POST',
|
||||
success: function (data) {
|
||||
$('#response').append('<li>' + data + '</li>');
|
||||
|
||||
},
|
||||
error: function (jxhr, msg, err) {
|
||||
$('#response').append('<li style="color:red">' + msg + '</li>');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</pre>
|
||||
<h4>
|
||||
Server (ASPX) super simplified</h4>
|
||||
<pre class="brush: c-sharp">
|
||||
<%@ Page Language="C#" %>
|
||||
<%
|
||||
//Get value
|
||||
float value = float.Parse(Request.Form["value"]);
|
||||
int productID = int.Parse(Request.Form["id"]);
|
||||
|
||||
Response.Write(string.Format("You voted {0} on product: {1}.<br/>Time on server: {2}", value, productID, DateTime.Now.ToString()));
|
||||
|
||||
%>
|
||||
|
||||
|
||||
|
||||
</pre>
|
||||
</li>
|
||||
|
||||
<li id="ex_12">
|
||||
<h3>
|
||||
12) Resizing
|
||||
</h3>
|
||||
<p>
|
||||
Sometimes we would like to resize the rating controls (perhaps based on screen size). <br />
|
||||
This is as easy as<br />
|
||||
a) adding a class to the rateit control, which would change the background image.<br/>
|
||||
b) modifying the starwidth and starheigth properties.
|
||||
<br /><br />
|
||||
The alternative styling is taken from example <a href="#ex_7a">7a) styling</a>.
|
||||
</p>
|
||||
|
||||
<div class="rateit" id="rateit12">
|
||||
</div>
|
||||
<p>Pick a size: <select id="size_12"><option data-class="" data-size="16" selected>normal</option><option data-class="bigstars" data-size="32">big</option></select></p>
|
||||
|
||||
<script type="text/javascript">
|
||||
$('#size_12').change(function () {
|
||||
var option = $(this.options[this.selectedIndex]);
|
||||
$('#rateit12').removeClass('bigstars')
|
||||
.addClass(option.data('class'))
|
||||
.rateit('starwidth', option.data('size'))
|
||||
.rateit('starheight', option.data('size'));
|
||||
|
||||
});
|
||||
</script>
|
||||
<pre class="brush: xml">
|
||||
<div class="rateit" id="rateit12"></div>
|
||||
<p>Pick a size:
|
||||
<select id="size_12">
|
||||
<option data-class="" data-size="16" selected>normal</option>
|
||||
<option data-class="bigstars" data-size="32">big</option>
|
||||
</select>
|
||||
</p>
|
||||
|
||||
<script type="text/javascript">
|
||||
$('#size_12').change(function () {
|
||||
var option = $(this.options[this.selectedIndex]);
|
||||
$('#rateit12').removeClass('bigstars') //remove old class
|
||||
.addClass(option.data('class')) //add new class
|
||||
.rateit('starwidth', option.data('size')) //change width
|
||||
.rateit('starheight', option.data('size')); //change height
|
||||
|
||||
});
|
||||
</script>
|
||||
</pre>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<script src="../src/jquery.rateit.js" type="text/javascript"></script>
|
||||
|
||||
<script>
|
||||
//build toc
|
||||
var toc = [];
|
||||
$('#examples > li').each(function (i, e) {
|
||||
|
||||
|
||||
if (i > 0)
|
||||
toc.push(', ');
|
||||
toc.push('<a href="#')
|
||||
toc.push(e.id)
|
||||
toc.push('">')
|
||||
var title = $(e).find('h3:first').text();
|
||||
title = title.substring(title.indexOf(')') + 2);
|
||||
toc.push(title);
|
||||
toc.push('</a>');
|
||||
|
||||
});
|
||||
|
||||
$('#toc').html(toc.join(''));
|
||||
|
||||
</script>
|
||||
|
||||
<!-- syntax highlighter -->
|
||||
|
||||
<script src="sh/shCore.js" type="text/javascript"></script>
|
||||
|
||||
<script src="sh/shBrushJScript.js" type="text/javascript"></script>
|
||||
|
||||
<script src="sh/shBrushXml.js" type="text/javascript"></script>
|
||||
|
||||
<script src="sh/shBrushCss.js" type="text/javascript"></script>
|
||||
|
||||
<script src="sh/shBrushCSharp.js" type="text/javascript"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
SyntaxHighlighter.all()
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
9
app/static/global/plugins/rateit/example/rateit.aspx
Normal file
@ -0,0 +1,9 @@
|
||||
<%@ Page Language="C#" %>
|
||||
<%
|
||||
//Get value
|
||||
float value = float.Parse(Request.Form["value"]);
|
||||
int productID = int.Parse(Request.Form["id"]);
|
||||
|
||||
Response.Write(string.Format("You voted {0} on product: {1}.<br/>Time on server: {2}", value, productID, DateTime.Now.ToString()));
|
||||
|
||||
%>
|
65
app/static/global/plugins/rateit/example/sh/shBrushCSharp.js
vendored
Normal file
@ -0,0 +1,65 @@
|
||||
/**
|
||||
* SyntaxHighlighter
|
||||
* http://alexgorbatchev.com/SyntaxHighlighter
|
||||
*
|
||||
* SyntaxHighlighter is donationware. If you are using it, please donate.
|
||||
* http://alexgorbatchev.com/SyntaxHighlighter/donate.html
|
||||
*
|
||||
* @version
|
||||
* 3.0.83 (July 02 2010)
|
||||
*
|
||||
* @copyright
|
||||
* Copyright (C) 2004-2010 Alex Gorbatchev.
|
||||
*
|
||||
* @license
|
||||
* Dual licensed under the MIT and GPL licenses.
|
||||
*/
|
||||
;(function()
|
||||
{
|
||||
// CommonJS
|
||||
typeof(require) != 'undefined' ? SyntaxHighlighter = require('shCore').SyntaxHighlighter : null;
|
||||
|
||||
function Brush()
|
||||
{
|
||||
var keywords = 'abstract as base bool break byte case catch char checked class const ' +
|
||||
'continue decimal default delegate do double else enum event explicit ' +
|
||||
'extern false finally fixed float for foreach get goto if implicit in int ' +
|
||||
'interface internal is lock long namespace new null object operator out ' +
|
||||
'override params private protected public readonly ref return sbyte sealed set ' +
|
||||
'short sizeof stackalloc static string struct switch this throw true try ' +
|
||||
'typeof uint ulong unchecked unsafe ushort using virtual void while';
|
||||
|
||||
function fixComments(match, regexInfo)
|
||||
{
|
||||
var css = (match[0].indexOf("///") == 0)
|
||||
? 'color1'
|
||||
: 'comments'
|
||||
;
|
||||
|
||||
return [new SyntaxHighlighter.Match(match[0], match.index, css)];
|
||||
}
|
||||
|
||||
this.regexList = [
|
||||
{ regex: SyntaxHighlighter.regexLib.singleLineCComments, func : fixComments }, // one line comments
|
||||
{ regex: SyntaxHighlighter.regexLib.multiLineCComments, css: 'comments' }, // multiline comments
|
||||
{ regex: /@"(?:[^"]|"")*"/g, css: 'string' }, // @-quoted strings
|
||||
{ regex: SyntaxHighlighter.regexLib.doubleQuotedString, css: 'string' }, // strings
|
||||
{ regex: SyntaxHighlighter.regexLib.singleQuotedString, css: 'string' }, // strings
|
||||
{ regex: /^\s*#.*/gm, css: 'preprocessor' }, // preprocessor tags like #region and #endregion
|
||||
{ regex: new RegExp(this.getKeywords(keywords), 'gm'), css: 'keyword' }, // c# keyword
|
||||
{ regex: /\bpartial(?=\s+(?:class|interface|struct)\b)/g, css: 'keyword' }, // contextual keyword: 'partial'
|
||||
{ regex: /\byield(?=\s+(?:return|break)\b)/g, css: 'keyword' } // contextual keyword: 'yield'
|
||||
];
|
||||
|
||||
this.forHtmlScript(SyntaxHighlighter.regexLib.aspScriptTags);
|
||||
};
|
||||
|
||||
Brush.prototype = new SyntaxHighlighter.Highlighter();
|
||||
Brush.aliases = ['c#', 'c-sharp', 'csharp'];
|
||||
|
||||
SyntaxHighlighter.brushes.CSharp = Brush;
|
||||
|
||||
// CommonJS
|
||||
typeof(exports) != 'undefined' ? exports.Brush = Brush : null;
|
||||
})();
|
||||
|
91
app/static/global/plugins/rateit/example/sh/shBrushCss.js
vendored
Normal file
@ -0,0 +1,91 @@
|
||||
/**
|
||||
* SyntaxHighlighter
|
||||
* http://alexgorbatchev.com/SyntaxHighlighter
|
||||
*
|
||||
* SyntaxHighlighter is donationware. If you are using it, please donate.
|
||||
* http://alexgorbatchev.com/SyntaxHighlighter/donate.html
|
||||
*
|
||||
* @version
|
||||
* 3.0.83 (July 02 2010)
|
||||
*
|
||||
* @copyright
|
||||
* Copyright (C) 2004-2010 Alex Gorbatchev.
|
||||
*
|
||||
* @license
|
||||
* Dual licensed under the MIT and GPL licenses.
|
||||
*/
|
||||
;(function()
|
||||
{
|
||||
// CommonJS
|
||||
typeof(require) != 'undefined' ? SyntaxHighlighter = require('shCore').SyntaxHighlighter : null;
|
||||
|
||||
function Brush()
|
||||
{
|
||||
function getKeywordsCSS(str)
|
||||
{
|
||||
return '\\b([a-z_]|)' + str.replace(/ /g, '(?=:)\\b|\\b([a-z_\\*]|\\*|)') + '(?=:)\\b';
|
||||
};
|
||||
|
||||
function getValuesCSS(str)
|
||||
{
|
||||
return '\\b' + str.replace(/ /g, '(?!-)(?!:)\\b|\\b()') + '\:\\b';
|
||||
};
|
||||
|
||||
var keywords = 'ascent azimuth background-attachment background-color background-image background-position ' +
|
||||
'background-repeat background baseline bbox border-collapse border-color border-spacing border-style border-top ' +
|
||||
'border-right border-bottom border-left border-top-color border-right-color border-bottom-color border-left-color ' +
|
||||
'border-top-style border-right-style border-bottom-style border-left-style border-top-width border-right-width ' +
|
||||
'border-bottom-width border-left-width border-width border bottom cap-height caption-side centerline clear clip color ' +
|
||||
'content counter-increment counter-reset cue-after cue-before cue cursor definition-src descent direction display ' +
|
||||
'elevation empty-cells float font-size-adjust font-family font-size font-stretch font-style font-variant font-weight font ' +
|
||||
'height left letter-spacing line-height list-style-image list-style-position list-style-type list-style margin-top ' +
|
||||
'margin-right margin-bottom margin-left margin marker-offset marks mathline max-height max-width min-height min-width orphans ' +
|
||||
'outline-color outline-style outline-width outline overflow padding-top padding-right padding-bottom padding-left padding page ' +
|
||||
'page-break-after page-break-before page-break-inside pause pause-after pause-before pitch pitch-range play-during position ' +
|
||||
'quotes right richness size slope src speak-header speak-numeral speak-punctuation speak speech-rate stemh stemv stress ' +
|
||||
'table-layout text-align top text-decoration text-indent text-shadow text-transform unicode-bidi unicode-range units-per-em ' +
|
||||
'vertical-align visibility voice-family volume white-space widows width widths word-spacing x-height z-index';
|
||||
|
||||
var values = 'above absolute all always aqua armenian attr aural auto avoid baseline behind below bidi-override black blink block blue bold bolder '+
|
||||
'both bottom braille capitalize caption center center-left center-right circle close-quote code collapse compact condensed '+
|
||||
'continuous counter counters crop cross crosshair cursive dashed decimal decimal-leading-zero default digits disc dotted double '+
|
||||
'embed embossed e-resize expanded extra-condensed extra-expanded fantasy far-left far-right fast faster fixed format fuchsia '+
|
||||
'gray green groove handheld hebrew help hidden hide high higher icon inline-table inline inset inside invert italic '+
|
||||
'justify landscape large larger left-side left leftwards level lighter lime line-through list-item local loud lower-alpha '+
|
||||
'lowercase lower-greek lower-latin lower-roman lower low ltr marker maroon medium message-box middle mix move narrower '+
|
||||
'navy ne-resize no-close-quote none no-open-quote no-repeat normal nowrap n-resize nw-resize oblique olive once open-quote outset '+
|
||||
'outside overline pointer portrait pre print projection purple red relative repeat repeat-x repeat-y rgb ridge right right-side '+
|
||||
'rightwards rtl run-in screen scroll semi-condensed semi-expanded separate se-resize show silent silver slower slow '+
|
||||
'small small-caps small-caption smaller soft solid speech spell-out square s-resize static status-bar sub super sw-resize '+
|
||||
'table-caption table-cell table-column table-column-group table-footer-group table-header-group table-row table-row-group teal '+
|
||||
'text-bottom text-top thick thin top transparent tty tv ultra-condensed ultra-expanded underline upper-alpha uppercase upper-latin '+
|
||||
'upper-roman url visible wait white wider w-resize x-fast x-high x-large x-loud x-low x-slow x-small x-soft xx-large xx-small yellow';
|
||||
|
||||
var fonts = '[mM]onospace [tT]ahoma [vV]erdana [aA]rial [hH]elvetica [sS]ans-serif [sS]erif [cC]ourier mono sans serif';
|
||||
|
||||
this.regexList = [
|
||||
{ regex: SyntaxHighlighter.regexLib.multiLineCComments, css: 'comments' }, // multiline comments
|
||||
{ regex: SyntaxHighlighter.regexLib.doubleQuotedString, css: 'string' }, // double quoted strings
|
||||
{ regex: SyntaxHighlighter.regexLib.singleQuotedString, css: 'string' }, // single quoted strings
|
||||
{ regex: /\#[a-fA-F0-9]{3,6}/g, css: 'value' }, // html colors
|
||||
{ regex: /(-?\d+)(\.\d+)?(px|em|pt|\:|\%|)/g, css: 'value' }, // sizes
|
||||
{ regex: /!important/g, css: 'color3' }, // !important
|
||||
{ regex: new RegExp(getKeywordsCSS(keywords), 'gm'), css: 'keyword' }, // keywords
|
||||
{ regex: new RegExp(getValuesCSS(values), 'g'), css: 'value' }, // values
|
||||
{ regex: new RegExp(this.getKeywords(fonts), 'g'), css: 'color1' } // fonts
|
||||
];
|
||||
|
||||
this.forHtmlScript({
|
||||
left: /(<|<)\s*style.*?(>|>)/gi,
|
||||
right: /(<|<)\/\s*style\s*(>|>)/gi
|
||||
});
|
||||
};
|
||||
|
||||
Brush.prototype = new SyntaxHighlighter.Highlighter();
|
||||
Brush.aliases = ['css'];
|
||||
|
||||
SyntaxHighlighter.brushes.CSS = Brush;
|
||||
|
||||
// CommonJS
|
||||
typeof(exports) != 'undefined' ? exports.Brush = Brush : null;
|
||||
})();
|
52
app/static/global/plugins/rateit/example/sh/shBrushJScript.js
vendored
Normal file
@ -0,0 +1,52 @@
|
||||
/**
|
||||
* SyntaxHighlighter
|
||||
* http://alexgorbatchev.com/SyntaxHighlighter
|
||||
*
|
||||
* SyntaxHighlighter is donationware. If you are using it, please donate.
|
||||
* http://alexgorbatchev.com/SyntaxHighlighter/donate.html
|
||||
*
|
||||
* @version
|
||||
* 3.0.83 (July 02 2010)
|
||||
*
|
||||
* @copyright
|
||||
* Copyright (C) 2004-2010 Alex Gorbatchev.
|
||||
*
|
||||
* @license
|
||||
* Dual licensed under the MIT and GPL licenses.
|
||||
*/
|
||||
;(function()
|
||||
{
|
||||
// CommonJS
|
||||
typeof(require) != 'undefined' ? SyntaxHighlighter = require('shCore').SyntaxHighlighter : null;
|
||||
|
||||
function Brush()
|
||||
{
|
||||
var keywords = 'break case catch continue ' +
|
||||
'default delete do else false ' +
|
||||
'for function if in instanceof ' +
|
||||
'new null return super switch ' +
|
||||
'this throw true try typeof var while with'
|
||||
;
|
||||
|
||||
var r = SyntaxHighlighter.regexLib;
|
||||
|
||||
this.regexList = [
|
||||
{ regex: r.multiLineDoubleQuotedString, css: 'string' }, // double quoted strings
|
||||
{ regex: r.multiLineSingleQuotedString, css: 'string' }, // single quoted strings
|
||||
{ regex: r.singleLineCComments, css: 'comments' }, // one line comments
|
||||
{ regex: r.multiLineCComments, css: 'comments' }, // multiline comments
|
||||
{ regex: /\s*#.*/gm, css: 'preprocessor' }, // preprocessor tags like #region and #endregion
|
||||
{ regex: new RegExp(this.getKeywords(keywords), 'gm'), css: 'keyword' } // keywords
|
||||
];
|
||||
|
||||
this.forHtmlScript(r.scriptScriptTags);
|
||||
};
|
||||
|
||||
Brush.prototype = new SyntaxHighlighter.Highlighter();
|
||||
Brush.aliases = ['js', 'jscript', 'javascript'];
|
||||
|
||||
SyntaxHighlighter.brushes.JScript = Brush;
|
||||
|
||||
// CommonJS
|
||||
typeof(exports) != 'undefined' ? exports.Brush = Brush : null;
|
||||
})();
|
69
app/static/global/plugins/rateit/example/sh/shBrushXml.js
vendored
Normal file
@ -0,0 +1,69 @@
|
||||
/**
|
||||
* SyntaxHighlighter
|
||||
* http://alexgorbatchev.com/SyntaxHighlighter
|
||||
*
|
||||
* SyntaxHighlighter is donationware. If you are using it, please donate.
|
||||
* http://alexgorbatchev.com/SyntaxHighlighter/donate.html
|
||||
*
|
||||
* @version
|
||||
* 3.0.83 (July 02 2010)
|
||||
*
|
||||
* @copyright
|
||||
* Copyright (C) 2004-2010 Alex Gorbatchev.
|
||||
*
|
||||
* @license
|
||||
* Dual licensed under the MIT and GPL licenses.
|
||||
*/
|
||||
;(function()
|
||||
{
|
||||
// CommonJS
|
||||
typeof(require) != 'undefined' ? SyntaxHighlighter = require('shCore').SyntaxHighlighter : null;
|
||||
|
||||
function Brush()
|
||||
{
|
||||
function process(match, regexInfo)
|
||||
{
|
||||
var constructor = SyntaxHighlighter.Match,
|
||||
code = match[0],
|
||||
tag = new XRegExp('(<|<)[\\s\\/\\?]*(?<name>[:\\w-\\.]+)', 'xg').exec(code),
|
||||
result = []
|
||||
;
|
||||
|
||||
if (match.attributes != null)
|
||||
{
|
||||
var attributes,
|
||||
regex = new XRegExp('(?<name> [\\w:\\-\\.]+)' +
|
||||
'\\s*=\\s*' +
|
||||
'(?<value> ".*?"|\'.*?\'|\\w+)',
|
||||
'xg');
|
||||
|
||||
while ((attributes = regex.exec(code)) != null)
|
||||
{
|
||||
result.push(new constructor(attributes.name, match.index + attributes.index, 'color1'));
|
||||
result.push(new constructor(attributes.value, match.index + attributes.index + attributes[0].indexOf(attributes.value), 'string'));
|
||||
}
|
||||
}
|
||||
|
||||
if (tag != null)
|
||||
result.push(
|
||||
new constructor(tag.name, match.index + tag[0].indexOf(tag.name), 'keyword')
|
||||
);
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
this.regexList = [
|
||||
{ regex: new XRegExp('(\\<|<)\\!\\[[\\w\\s]*?\\[(.|\\s)*?\\]\\](\\>|>)', 'gm'), css: 'color2' }, // <![ ... [ ... ]]>
|
||||
{ regex: SyntaxHighlighter.regexLib.xmlComments, css: 'comments' }, // <!-- ... -->
|
||||
{ regex: new XRegExp('(<|<)[\\s\\/\\?]*(\\w+)(?<attributes>.*?)[\\s\\/\\?]*(>|>)', 'sg'), func: process }
|
||||
];
|
||||
};
|
||||
|
||||
Brush.prototype = new SyntaxHighlighter.Highlighter();
|
||||
Brush.aliases = ['xml', 'xhtml', 'xslt', 'html'];
|
||||
|
||||
SyntaxHighlighter.brushes.Xml = Brush;
|
||||
|
||||
// CommonJS
|
||||
typeof(exports) != 'undefined' ? exports.Brush = Brush : null;
|
||||
})();
|
226
app/static/global/plugins/rateit/example/sh/shCore.css
Normal file
@ -0,0 +1,226 @@
|
||||
/**
|
||||
* SyntaxHighlighter
|
||||
* http://alexgorbatchev.com/SyntaxHighlighter
|
||||
*
|
||||
* SyntaxHighlighter is donationware. If you are using it, please donate.
|
||||
* http://alexgorbatchev.com/SyntaxHighlighter/donate.html
|
||||
*
|
||||
* @version
|
||||
* 3.0.83 (July 02 2010)
|
||||
*
|
||||
* @copyright
|
||||
* Copyright (C) 2004-2010 Alex Gorbatchev.
|
||||
*
|
||||
* @license
|
||||
* Dual licensed under the MIT and GPL licenses.
|
||||
*/
|
||||
.syntaxhighlighter a,
|
||||
.syntaxhighlighter div,
|
||||
.syntaxhighlighter code,
|
||||
.syntaxhighlighter table,
|
||||
.syntaxhighlighter table td,
|
||||
.syntaxhighlighter table tr,
|
||||
.syntaxhighlighter table tbody,
|
||||
.syntaxhighlighter table thead,
|
||||
.syntaxhighlighter table caption,
|
||||
.syntaxhighlighter textarea {
|
||||
-moz-border-radius: 0 0 0 0 !important;
|
||||
-webkit-border-radius: 0 0 0 0 !important;
|
||||
background: none !important;
|
||||
border: 0 !important;
|
||||
bottom: auto !important;
|
||||
float: none !important;
|
||||
height: auto !important;
|
||||
left: auto !important;
|
||||
line-height: 1.1em !important;
|
||||
margin: 0 !important;
|
||||
outline: 0 !important;
|
||||
overflow: visible !important;
|
||||
padding: 0 !important;
|
||||
position: static !important;
|
||||
right: auto !important;
|
||||
text-align: left !important;
|
||||
top: auto !important;
|
||||
vertical-align: baseline !important;
|
||||
width: auto !important;
|
||||
box-sizing: content-box !important;
|
||||
font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
|
||||
font-weight: normal !important;
|
||||
font-style: normal !important;
|
||||
font-size: 1em !important;
|
||||
min-height: inherit !important;
|
||||
min-height: auto !important;
|
||||
}
|
||||
|
||||
.syntaxhighlighter {
|
||||
width: 100% !important;
|
||||
margin: 1em 0 1em 0 !important;
|
||||
position: relative !important;
|
||||
overflow: auto !important;
|
||||
font-size: 1em !important;
|
||||
}
|
||||
.syntaxhighlighter.source {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
.syntaxhighlighter .bold {
|
||||
font-weight: bold !important;
|
||||
}
|
||||
.syntaxhighlighter .italic {
|
||||
font-style: italic !important;
|
||||
}
|
||||
.syntaxhighlighter .line {
|
||||
white-space: pre !important;
|
||||
}
|
||||
.syntaxhighlighter table {
|
||||
width: 100% !important;
|
||||
}
|
||||
.syntaxhighlighter table caption {
|
||||
text-align: left !important;
|
||||
padding: .5em 0 0.5em 1em !important;
|
||||
}
|
||||
.syntaxhighlighter table td.code {
|
||||
width: 100% !important;
|
||||
}
|
||||
.syntaxhighlighter table td.code .container {
|
||||
position: relative !important;
|
||||
}
|
||||
.syntaxhighlighter table td.code .container textarea {
|
||||
box-sizing: border-box !important;
|
||||
position: absolute !important;
|
||||
left: 0 !important;
|
||||
top: 0 !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
border: none !important;
|
||||
background: white !important;
|
||||
padding-left: 1em !important;
|
||||
overflow: hidden !important;
|
||||
white-space: pre !important;
|
||||
}
|
||||
.syntaxhighlighter table td.gutter .line {
|
||||
text-align: right !important;
|
||||
padding: 0 0.5em 0 1em !important;
|
||||
}
|
||||
.syntaxhighlighter table td.code .line {
|
||||
padding: 0 1em !important;
|
||||
}
|
||||
.syntaxhighlighter.nogutter td.code .container textarea, .syntaxhighlighter.nogutter td.code .line {
|
||||
padding-left: 0em !important;
|
||||
}
|
||||
.syntaxhighlighter.show {
|
||||
display: block !important;
|
||||
}
|
||||
.syntaxhighlighter.collapsed table {
|
||||
display: none !important;
|
||||
}
|
||||
.syntaxhighlighter.collapsed .toolbar {
|
||||
padding: 0.1em 0.8em 0em 0.8em !important;
|
||||
font-size: 1em !important;
|
||||
position: static !important;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
}
|
||||
.syntaxhighlighter.collapsed .toolbar span {
|
||||
display: inline !important;
|
||||
margin-right: 1em !important;
|
||||
}
|
||||
.syntaxhighlighter.collapsed .toolbar span a {
|
||||
padding: 0 !important;
|
||||
display: none !important;
|
||||
}
|
||||
.syntaxhighlighter.collapsed .toolbar span a.expandSource {
|
||||
display: inline !important;
|
||||
}
|
||||
.syntaxhighlighter .toolbar {
|
||||
position: absolute !important;
|
||||
right: 1px !important;
|
||||
top: 1px !important;
|
||||
width: 11px !important;
|
||||
height: 11px !important;
|
||||
font-size: 10px !important;
|
||||
z-index: 10 !important;
|
||||
}
|
||||
.syntaxhighlighter .toolbar span.title {
|
||||
display: inline !important;
|
||||
}
|
||||
.syntaxhighlighter .toolbar a {
|
||||
display: block !important;
|
||||
text-align: center !important;
|
||||
text-decoration: none !important;
|
||||
padding-top: 1px !important;
|
||||
}
|
||||
.syntaxhighlighter .toolbar a.expandSource {
|
||||
display: none !important;
|
||||
}
|
||||
.syntaxhighlighter.ie {
|
||||
font-size: .9em !important;
|
||||
padding: 1px 0 1px 0 !important;
|
||||
}
|
||||
.syntaxhighlighter.ie .toolbar {
|
||||
line-height: 8px !important;
|
||||
}
|
||||
.syntaxhighlighter.ie .toolbar a {
|
||||
padding-top: 0px !important;
|
||||
}
|
||||
.syntaxhighlighter.printing .line.alt1 .content,
|
||||
.syntaxhighlighter.printing .line.alt2 .content,
|
||||
.syntaxhighlighter.printing .line.highlighted .number,
|
||||
.syntaxhighlighter.printing .line.highlighted.alt1 .content,
|
||||
.syntaxhighlighter.printing .line.highlighted.alt2 .content {
|
||||
background: none !important;
|
||||
}
|
||||
.syntaxhighlighter.printing .line .number {
|
||||
color: #bbbbbb !important;
|
||||
}
|
||||
.syntaxhighlighter.printing .line .content {
|
||||
color: black !important;
|
||||
}
|
||||
.syntaxhighlighter.printing .toolbar {
|
||||
display: none !important;
|
||||
}
|
||||
.syntaxhighlighter.printing a {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
.syntaxhighlighter.printing .plain, .syntaxhighlighter.printing .plain a {
|
||||
color: black !important;
|
||||
}
|
||||
.syntaxhighlighter.printing .comments, .syntaxhighlighter.printing .comments a {
|
||||
color: #008200 !important;
|
||||
}
|
||||
.syntaxhighlighter.printing .string, .syntaxhighlighter.printing .string a {
|
||||
color: blue !important;
|
||||
}
|
||||
.syntaxhighlighter.printing .keyword {
|
||||
color: #006699 !important;
|
||||
font-weight: bold !important;
|
||||
}
|
||||
.syntaxhighlighter.printing .preprocessor {
|
||||
color: gray !important;
|
||||
}
|
||||
.syntaxhighlighter.printing .variable {
|
||||
color: #aa7700 !important;
|
||||
}
|
||||
.syntaxhighlighter.printing .value {
|
||||
color: #009900 !important;
|
||||
}
|
||||
.syntaxhighlighter.printing .functions {
|
||||
color: #ff1493 !important;
|
||||
}
|
||||
.syntaxhighlighter.printing .constants {
|
||||
color: #0066cc !important;
|
||||
}
|
||||
.syntaxhighlighter.printing .script {
|
||||
font-weight: bold !important;
|
||||
}
|
||||
.syntaxhighlighter.printing .color1, .syntaxhighlighter.printing .color1 a {
|
||||
color: gray !important;
|
||||
}
|
||||
.syntaxhighlighter.printing .color2, .syntaxhighlighter.printing .color2 a {
|
||||
color: #ff1493 !important;
|
||||
}
|
||||
.syntaxhighlighter.printing .color3, .syntaxhighlighter.printing .color3 a {
|
||||
color: red !important;
|
||||
}
|
||||
.syntaxhighlighter.printing .break, .syntaxhighlighter.printing .break a {
|
||||
color: black !important;
|
||||
}
|
17
app/static/global/plugins/rateit/example/sh/shCore.js
vendored
Normal file
328
app/static/global/plugins/rateit/example/sh/shCoreDefault.css
Normal file
@ -0,0 +1,328 @@
|
||||
/**
|
||||
* SyntaxHighlighter
|
||||
* http://alexgorbatchev.com/SyntaxHighlighter
|
||||
*
|
||||
* SyntaxHighlighter is donationware. If you are using it, please donate.
|
||||
* http://alexgorbatchev.com/SyntaxHighlighter/donate.html
|
||||
*
|
||||
* @version
|
||||
* 3.0.83 (July 02 2010)
|
||||
*
|
||||
* @copyright
|
||||
* Copyright (C) 2004-2010 Alex Gorbatchev.
|
||||
*
|
||||
* @license
|
||||
* Dual licensed under the MIT and GPL licenses.
|
||||
*/
|
||||
.syntaxhighlighter a,
|
||||
.syntaxhighlighter div,
|
||||
.syntaxhighlighter code,
|
||||
.syntaxhighlighter table,
|
||||
.syntaxhighlighter table td,
|
||||
.syntaxhighlighter table tr,
|
||||
.syntaxhighlighter table tbody,
|
||||
.syntaxhighlighter table thead,
|
||||
.syntaxhighlighter table caption,
|
||||
.syntaxhighlighter textarea {
|
||||
-moz-border-radius: 0 0 0 0 !important;
|
||||
-webkit-border-radius: 0 0 0 0 !important;
|
||||
background: none !important;
|
||||
border: 0 !important;
|
||||
bottom: auto !important;
|
||||
float: none !important;
|
||||
height: auto !important;
|
||||
left: auto !important;
|
||||
line-height: 1.1em !important;
|
||||
margin: 0 !important;
|
||||
outline: 0 !important;
|
||||
overflow: visible !important;
|
||||
padding: 0 !important;
|
||||
position: static !important;
|
||||
right: auto !important;
|
||||
text-align: left !important;
|
||||
top: auto !important;
|
||||
vertical-align: baseline !important;
|
||||
width: auto !important;
|
||||
box-sizing: content-box !important;
|
||||
font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
|
||||
font-weight: normal !important;
|
||||
font-style: normal !important;
|
||||
font-size: 1em !important;
|
||||
min-height: inherit !important;
|
||||
min-height: auto !important;
|
||||
}
|
||||
|
||||
.syntaxhighlighter {
|
||||
width: 100% !important;
|
||||
margin: 1em 0 1em 0 !important;
|
||||
position: relative !important;
|
||||
overflow: auto !important;
|
||||
font-size: 1em !important;
|
||||
}
|
||||
.syntaxhighlighter.source {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
.syntaxhighlighter .bold {
|
||||
font-weight: bold !important;
|
||||
}
|
||||
.syntaxhighlighter .italic {
|
||||
font-style: italic !important;
|
||||
}
|
||||
.syntaxhighlighter .line {
|
||||
white-space: pre !important;
|
||||
}
|
||||
.syntaxhighlighter table {
|
||||
width: 100% !important;
|
||||
}
|
||||
.syntaxhighlighter table caption {
|
||||
text-align: left !important;
|
||||
padding: .5em 0 0.5em 1em !important;
|
||||
}
|
||||
.syntaxhighlighter table td.code {
|
||||
width: 100% !important;
|
||||
}
|
||||
.syntaxhighlighter table td.code .container {
|
||||
position: relative !important;
|
||||
}
|
||||
.syntaxhighlighter table td.code .container textarea {
|
||||
box-sizing: border-box !important;
|
||||
position: absolute !important;
|
||||
left: 0 !important;
|
||||
top: 0 !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
border: none !important;
|
||||
background: white !important;
|
||||
padding-left: 1em !important;
|
||||
overflow: hidden !important;
|
||||
white-space: pre !important;
|
||||
}
|
||||
.syntaxhighlighter table td.gutter .line {
|
||||
text-align: right !important;
|
||||
padding: 0 0.5em 0 1em !important;
|
||||
}
|
||||
.syntaxhighlighter table td.code .line {
|
||||
padding: 0 1em !important;
|
||||
}
|
||||
.syntaxhighlighter.nogutter td.code .container textarea, .syntaxhighlighter.nogutter td.code .line {
|
||||
padding-left: 0em !important;
|
||||
}
|
||||
.syntaxhighlighter.show {
|
||||
display: block !important;
|
||||
}
|
||||
.syntaxhighlighter.collapsed table {
|
||||
display: none !important;
|
||||
}
|
||||
.syntaxhighlighter.collapsed .toolbar {
|
||||
padding: 0.1em 0.8em 0em 0.8em !important;
|
||||
font-size: 1em !important;
|
||||
position: static !important;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
}
|
||||
.syntaxhighlighter.collapsed .toolbar span {
|
||||
display: inline !important;
|
||||
margin-right: 1em !important;
|
||||
}
|
||||
.syntaxhighlighter.collapsed .toolbar span a {
|
||||
padding: 0 !important;
|
||||
display: none !important;
|
||||
}
|
||||
.syntaxhighlighter.collapsed .toolbar span a.expandSource {
|
||||
display: inline !important;
|
||||
}
|
||||
.syntaxhighlighter .toolbar {
|
||||
position: absolute !important;
|
||||
right: 1px !important;
|
||||
top: 1px !important;
|
||||
width: 11px !important;
|
||||
height: 11px !important;
|
||||
font-size: 10px !important;
|
||||
z-index: 10 !important;
|
||||
}
|
||||
.syntaxhighlighter .toolbar span.title {
|
||||
display: inline !important;
|
||||
}
|
||||
.syntaxhighlighter .toolbar a {
|
||||
display: block !important;
|
||||
text-align: center !important;
|
||||
text-decoration: none !important;
|
||||
padding-top: 1px !important;
|
||||
}
|
||||
.syntaxhighlighter .toolbar a.expandSource {
|
||||
display: none !important;
|
||||
}
|
||||
.syntaxhighlighter.ie {
|
||||
font-size: .9em !important;
|
||||
padding: 1px 0 1px 0 !important;
|
||||
}
|
||||
.syntaxhighlighter.ie .toolbar {
|
||||
line-height: 8px !important;
|
||||
}
|
||||
.syntaxhighlighter.ie .toolbar a {
|
||||
padding-top: 0px !important;
|
||||
}
|
||||
.syntaxhighlighter.printing .line.alt1 .content,
|
||||
.syntaxhighlighter.printing .line.alt2 .content,
|
||||
.syntaxhighlighter.printing .line.highlighted .number,
|
||||
.syntaxhighlighter.printing .line.highlighted.alt1 .content,
|
||||
.syntaxhighlighter.printing .line.highlighted.alt2 .content {
|
||||
background: none !important;
|
||||
}
|
||||
.syntaxhighlighter.printing .line .number {
|
||||
color: #bbbbbb !important;
|
||||
}
|
||||
.syntaxhighlighter.printing .line .content {
|
||||
color: black !important;
|
||||
}
|
||||
.syntaxhighlighter.printing .toolbar {
|
||||
display: none !important;
|
||||
}
|
||||
.syntaxhighlighter.printing a {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
.syntaxhighlighter.printing .plain, .syntaxhighlighter.printing .plain a {
|
||||
color: black !important;
|
||||
}
|
||||
.syntaxhighlighter.printing .comments, .syntaxhighlighter.printing .comments a {
|
||||
color: #008200 !important;
|
||||
}
|
||||
.syntaxhighlighter.printing .string, .syntaxhighlighter.printing .string a {
|
||||
color: blue !important;
|
||||
}
|
||||
.syntaxhighlighter.printing .keyword {
|
||||
color: #006699 !important;
|
||||
font-weight: bold !important;
|
||||
}
|
||||
.syntaxhighlighter.printing .preprocessor {
|
||||
color: gray !important;
|
||||
}
|
||||
.syntaxhighlighter.printing .variable {
|
||||
color: #aa7700 !important;
|
||||
}
|
||||
.syntaxhighlighter.printing .value {
|
||||
color: #009900 !important;
|
||||
}
|
||||
.syntaxhighlighter.printing .functions {
|
||||
color: #ff1493 !important;
|
||||
}
|
||||
.syntaxhighlighter.printing .constants {
|
||||
color: #0066cc !important;
|
||||
}
|
||||
.syntaxhighlighter.printing .script {
|
||||
font-weight: bold !important;
|
||||
}
|
||||
.syntaxhighlighter.printing .color1, .syntaxhighlighter.printing .color1 a {
|
||||
color: gray !important;
|
||||
}
|
||||
.syntaxhighlighter.printing .color2, .syntaxhighlighter.printing .color2 a {
|
||||
color: #ff1493 !important;
|
||||
}
|
||||
.syntaxhighlighter.printing .color3, .syntaxhighlighter.printing .color3 a {
|
||||
color: red !important;
|
||||
}
|
||||
.syntaxhighlighter.printing .break, .syntaxhighlighter.printing .break a {
|
||||
color: black !important;
|
||||
}
|
||||
|
||||
.syntaxhighlighter {
|
||||
background-color: white !important;
|
||||
}
|
||||
.syntaxhighlighter .line.alt1 {
|
||||
background-color: white !important;
|
||||
}
|
||||
.syntaxhighlighter .line.alt2 {
|
||||
background-color: white !important;
|
||||
}
|
||||
.syntaxhighlighter .line.highlighted.alt1, .syntaxhighlighter .line.highlighted.alt2 {
|
||||
background-color: #e0e0e0 !important;
|
||||
}
|
||||
.syntaxhighlighter .line.highlighted.number {
|
||||
color: black !important;
|
||||
}
|
||||
.syntaxhighlighter table caption {
|
||||
color: black !important;
|
||||
}
|
||||
.syntaxhighlighter .gutter {
|
||||
color: #afafaf !important;
|
||||
}
|
||||
.syntaxhighlighter .gutter .line {
|
||||
border-right: 3px solid #6ce26c !important;
|
||||
}
|
||||
.syntaxhighlighter .gutter .line.highlighted {
|
||||
background-color: #6ce26c !important;
|
||||
color: white !important;
|
||||
}
|
||||
.syntaxhighlighter.printing .line .content {
|
||||
border: none !important;
|
||||
}
|
||||
.syntaxhighlighter.collapsed {
|
||||
overflow: visible !important;
|
||||
}
|
||||
.syntaxhighlighter.collapsed .toolbar {
|
||||
color: blue !important;
|
||||
background: white !important;
|
||||
border: 1px solid #6ce26c !important;
|
||||
}
|
||||
.syntaxhighlighter.collapsed .toolbar a {
|
||||
color: blue !important;
|
||||
}
|
||||
.syntaxhighlighter.collapsed .toolbar a:hover {
|
||||
color: red !important;
|
||||
}
|
||||
.syntaxhighlighter .toolbar {
|
||||
color: white !important;
|
||||
background: #6ce26c !important;
|
||||
border: none !important;
|
||||
}
|
||||
.syntaxhighlighter .toolbar a {
|
||||
color: white !important;
|
||||
}
|
||||
.syntaxhighlighter .toolbar a:hover {
|
||||
color: black !important;
|
||||
}
|
||||
.syntaxhighlighter .plain, .syntaxhighlighter .plain a {
|
||||
color: black !important;
|
||||
}
|
||||
.syntaxhighlighter .comments, .syntaxhighlighter .comments a {
|
||||
color: #008200 !important;
|
||||
}
|
||||
.syntaxhighlighter .string, .syntaxhighlighter .string a {
|
||||
color: blue !important;
|
||||
}
|
||||
.syntaxhighlighter .keyword {
|
||||
color: #006699 !important;
|
||||
}
|
||||
.syntaxhighlighter .preprocessor {
|
||||
color: gray !important;
|
||||
}
|
||||
.syntaxhighlighter .variable {
|
||||
color: #aa7700 !important;
|
||||
}
|
||||
.syntaxhighlighter .value {
|
||||
color: #009900 !important;
|
||||
}
|
||||
.syntaxhighlighter .functions {
|
||||
color: #ff1493 !important;
|
||||
}
|
||||
.syntaxhighlighter .constants {
|
||||
color: #0066cc !important;
|
||||
}
|
||||
.syntaxhighlighter .script {
|
||||
font-weight: bold !important;
|
||||
color: #006699 !important;
|
||||
background-color: none !important;
|
||||
}
|
||||
.syntaxhighlighter .color1, .syntaxhighlighter .color1 a {
|
||||
color: gray !important;
|
||||
}
|
||||
.syntaxhighlighter .color2, .syntaxhighlighter .color2 a {
|
||||
color: #ff1493 !important;
|
||||
}
|
||||
.syntaxhighlighter .color3, .syntaxhighlighter .color3 a {
|
||||
color: red !important;
|
||||
}
|
||||
|
||||
.syntaxhighlighter .keyword {
|
||||
font-weight: bold !important;
|
||||
}
|
BIN
app/static/global/plugins/rateit/src/delete.gif
Normal file
After Width: | Height: | Size: 752 B |
310
app/static/global/plugins/rateit/src/jquery.rateit.js
Normal file
@ -0,0 +1,310 @@
|
||||
/*! RateIt | v1.0.18 / 12/22/2013 | https://rateit.codeplex.com/license
|
||||
http://rateit.codeplex.com | Twitter: @gjunge
|
||||
*/
|
||||
(function ($) {
|
||||
$.rateit = {
|
||||
aria : {
|
||||
resetLabel: 'reset rating',
|
||||
ratingLabel: 'rating'
|
||||
}
|
||||
}
|
||||
|
||||
$.fn.rateit = function (p1, p2) {
|
||||
//quick way out.
|
||||
var index = 1;
|
||||
var options = {}; var mode = 'init';
|
||||
var capitaliseFirstLetter = function (string) {
|
||||
return string.charAt(0).toUpperCase() + string.substr(1);
|
||||
};
|
||||
|
||||
if (this.length == 0) return this;
|
||||
|
||||
|
||||
var tp1 = $.type(p1);
|
||||
if (tp1 == 'object' || p1 === undefined || p1 == null) {
|
||||
options = $.extend({}, $.fn.rateit.defaults, p1); //wants to init new rateit plugin(s).
|
||||
}
|
||||
else if (tp1 == 'string' && p1 !== 'reset' && p2 === undefined) {
|
||||
return this.data('rateit' + capitaliseFirstLetter(p1)); //wants to get a value.
|
||||
}
|
||||
else if (tp1 == 'string') {
|
||||
mode = 'setvalue'
|
||||
}
|
||||
|
||||
return this.each(function () {
|
||||
var item = $(this);
|
||||
|
||||
|
||||
//shorten all the item.data('rateit-XXX'), will save space in closure compiler, will be like item.data('XXX') will become x('XXX')
|
||||
var itemdata = function (key, value) {
|
||||
|
||||
if (value != null) {
|
||||
//update aria values
|
||||
var ariakey = 'aria-value' + ((key == 'value') ? 'now' : key);
|
||||
var range = item.find('.rateit-range');
|
||||
if (range.attr(ariakey) != undefined) {
|
||||
range.attr(ariakey, value);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
arguments[0] = 'rateit' + capitaliseFirstLetter(key);
|
||||
return item.data.apply(item, arguments); ////Fix for WI: 523
|
||||
};
|
||||
|
||||
//handle programmatic reset
|
||||
if (p1 == 'reset') {
|
||||
var setup = itemdata('init'); //get initial value
|
||||
for (var prop in setup) {
|
||||
item.data(prop, setup[prop]);
|
||||
}
|
||||
|
||||
if (itemdata('backingfld')) { //reset also backingfield
|
||||
var fld = $(itemdata('backingfld'));
|
||||
fld.val(itemdata('value'));
|
||||
if (fld[0].min) fld[0].min = itemdata('min');
|
||||
if (fld[0].max) fld[0].max = itemdata('max');
|
||||
if (fld[0].step) fld[0].step = itemdata('step');
|
||||
}
|
||||
item.trigger('reset');
|
||||
}
|
||||
|
||||
//add the rate it class.
|
||||
if (!item.hasClass('rateit')) item.addClass('rateit');
|
||||
|
||||
var ltr = item.css('direction') != 'rtl';
|
||||
|
||||
// set value mode
|
||||
if (mode == 'setvalue') {
|
||||
if (!itemdata('init')) throw 'Can\'t set value before init';
|
||||
|
||||
|
||||
//if readonly now and it wasn't readonly, remove the eventhandlers.
|
||||
if (p1 == 'readonly' && p2 == true && !itemdata('readonly')) {
|
||||
item.find('.rateit-range').unbind();
|
||||
itemdata('wired', false);
|
||||
}
|
||||
//when we receive a null value, reset the score to its min value.
|
||||
if (p1 == 'value')
|
||||
p2 = (p2 == null) ? itemdata('min') : Math.max(itemdata('min'), Math.min(itemdata('max'), p2));
|
||||
if (itemdata('backingfld')) {
|
||||
//if we have a backing field, check which fields we should update.
|
||||
//In case of input[type=range], although we did read its attributes even in browsers that don't support it (using fld.attr())
|
||||
//we only update it in browser that support it (&& fld[0].min only works in supporting browsers), not only does it save us from checking if it is range input type, it also is unnecessary.
|
||||
var fld = $(itemdata('backingfld'));
|
||||
if (p1 == 'value') fld.val(p2);
|
||||
if (p1 == 'min' && fld[0].min) fld[0].min = p2;
|
||||
if (p1 == 'max' && fld[0].max) fld[0].max = p2;
|
||||
if (p1 == 'step' && fld[0].step) fld[0].step = p2;
|
||||
}
|
||||
|
||||
itemdata(p1, p2);
|
||||
}
|
||||
|
||||
//init rateit plugin
|
||||
if (!itemdata('init')) {
|
||||
|
||||
//get our values, either from the data-* html5 attribute or from the options.
|
||||
itemdata('min', isNaN(itemdata('min')) ? options.min : itemdata('min'));
|
||||
itemdata('max', isNaN(itemdata('max')) ? options.max : itemdata('max'));
|
||||
itemdata('step', itemdata('step') || options.step);
|
||||
itemdata('readonly', itemdata('readonly') !== undefined ? itemdata('readonly') : options.readonly);
|
||||
itemdata('resetable', itemdata('resetable') !== undefined ? itemdata('resetable') : options.resetable);
|
||||
itemdata('backingfld', itemdata('backingfld') || options.backingfld);
|
||||
itemdata('starwidth', itemdata('starwidth') || options.starwidth);
|
||||
itemdata('starheight', itemdata('starheight') || options.starheight);
|
||||
itemdata('value', Math.max(itemdata('min'), Math.min(itemdata('max'), (!isNaN(itemdata('value')) ? itemdata('value') : (!isNaN(options.value) ? options.value : options.min) ))));
|
||||
itemdata('ispreset', itemdata('ispreset') !== undefined ? itemdata('ispreset') : options.ispreset);
|
||||
//are we LTR or RTL?
|
||||
|
||||
if (itemdata('backingfld')) {
|
||||
//if we have a backing field, hide it, and get its value, and override defaults if range.
|
||||
var fld = $(itemdata('backingfld'));
|
||||
itemdata('value', fld.hide().val());
|
||||
|
||||
if (fld.attr('disabled') || fld.attr('readonly'))
|
||||
itemdata('readonly', true); //http://rateit.codeplex.com/discussions/362055 , if a backing field is disabled or readonly at instantiation, make rateit readonly.
|
||||
|
||||
|
||||
if (fld[0].nodeName == 'INPUT') {
|
||||
if (fld[0].type == 'range' || fld[0].type == 'text') { //in browsers not support the range type, it defaults to text
|
||||
|
||||
itemdata('min', parseInt(fld.attr('min')) || itemdata('min')); //if we would have done fld[0].min it wouldn't have worked in browsers not supporting the range type.
|
||||
itemdata('max', parseInt(fld.attr('max')) || itemdata('max'));
|
||||
itemdata('step', parseInt(fld.attr('step')) || itemdata('step'));
|
||||
}
|
||||
}
|
||||
if (fld[0].nodeName == 'SELECT' && fld[0].options.length > 1) {
|
||||
itemdata('min', Number(fld[0].options[0].value));
|
||||
itemdata('max', Number(fld[0].options[fld[0].length - 1].value));
|
||||
itemdata('step', Number(fld[0].options[1].value) - Number(fld[0].options[0].value));
|
||||
}
|
||||
}
|
||||
|
||||
//Create the necessary tags. For ARIA purposes we need to give the items an ID. So we use an internal index to create unique ids
|
||||
var element = item[0].nodeName == 'DIV' ? 'div' : 'span';
|
||||
index++;
|
||||
var html = '<button id="rateit-reset-{{index}}" data-role="none" class="rateit-reset" aria-label="' + $.rateit.aria.resetLabel + '" aria-controls="rateit-range-{{index}}"></button><{{element}} id="rateit-range-{{index}}" class="rateit-range" tabindex="0" role="slider" aria-label="' + $.rateit.aria.ratingLabel + '" aria-owns="rateit-reset-{{index}}" aria-valuemin="' + itemdata('min') + '" aria-valuemax="' + itemdata('max') + '" aria-valuenow="' + itemdata('value') + '"><{{element}} class="rateit-selected" style="height:' + itemdata('starheight') + 'px"></{{element}}><{{element}} class="rateit-hover" style="height:' + itemdata('starheight') + 'px"></{{element}}></{{element}}>';
|
||||
item.append(html.replace(/{{index}}/gi, index).replace(/{{element}}/gi, element));
|
||||
|
||||
//if we are in RTL mode, we have to change the float of the "reset button"
|
||||
if (!ltr) {
|
||||
item.find('.rateit-reset').css('float', 'right');
|
||||
item.find('.rateit-selected').addClass('rateit-selected-rtl');
|
||||
item.find('.rateit-hover').addClass('rateit-hover-rtl');
|
||||
}
|
||||
|
||||
itemdata('init', JSON.parse(JSON.stringify(item.data()))); //cheap way to create a clone
|
||||
}
|
||||
//resize the height of all elements,
|
||||
item.find('.rateit-selected, .rateit-hover').height(itemdata('starheight'));
|
||||
|
||||
//set the range element to fit all the stars.
|
||||
var range = item.find('.rateit-range');
|
||||
range.width(itemdata('starwidth') * (itemdata('max') - itemdata('min'))).height(itemdata('starheight'));
|
||||
|
||||
|
||||
//add/remove the preset class
|
||||
var presetclass = 'rateit-preset' + ((ltr) ? '' : '-rtl');
|
||||
if (itemdata('ispreset'))
|
||||
item.find('.rateit-selected').addClass(presetclass);
|
||||
else
|
||||
item.find('.rateit-selected').removeClass(presetclass);
|
||||
|
||||
//set the value if we have it.
|
||||
if (itemdata('value') != null) {
|
||||
var score = (itemdata('value') - itemdata('min')) * itemdata('starwidth');
|
||||
item.find('.rateit-selected').width(score);
|
||||
}
|
||||
|
||||
//setup the reset button
|
||||
var resetbtn = item.find('.rateit-reset');
|
||||
if (resetbtn.data('wired') !== true) {
|
||||
resetbtn.bind('click', function (e) {
|
||||
e.preventDefault();
|
||||
resetbtn.blur();
|
||||
item.rateit('value', null);
|
||||
item.trigger('reset');
|
||||
}).data('wired', true);
|
||||
|
||||
}
|
||||
|
||||
//this function calculates the score based on the current position of the mouse.
|
||||
var calcRawScore = function (element, event) {
|
||||
var pageX = (event.changedTouches) ? event.changedTouches[0].pageX : event.pageX;
|
||||
|
||||
var offsetx = pageX - $(element).offset().left;
|
||||
if (!ltr) offsetx = range.width() - offsetx;
|
||||
if (offsetx > range.width()) offsetx = range.width();
|
||||
if (offsetx < 0) offsetx = 0;
|
||||
|
||||
return score = Math.ceil(offsetx / itemdata('starwidth') * (1 / itemdata('step')));
|
||||
};
|
||||
|
||||
//sets the hover element based on the score.
|
||||
var setHover = function (score) {
|
||||
var w = score * itemdata('starwidth') * itemdata('step');
|
||||
var h = range.find('.rateit-hover');
|
||||
if (h.data('width') != w) {
|
||||
range.find('.rateit-selected').hide();
|
||||
h.width(w).show().data('width', w);
|
||||
var data = [(score * itemdata('step')) + itemdata('min')];
|
||||
item.trigger('hover', data).trigger('over', data);
|
||||
}
|
||||
};
|
||||
|
||||
var setSelection = function (value) {
|
||||
itemdata('value', value);
|
||||
if (itemdata('backingfld')) {
|
||||
$(itemdata('backingfld')).val(value);
|
||||
}
|
||||
if (itemdata('ispreset')) { //if it was a preset value, unset that.
|
||||
range.find('.rateit-selected').removeClass(presetclass);
|
||||
itemdata('ispreset', false);
|
||||
}
|
||||
range.find('.rateit-hover').hide();
|
||||
range.find('.rateit-selected').width(value * itemdata('starwidth') - (itemdata('min') * itemdata('starwidth'))).show();
|
||||
item.trigger('hover', [null]).trigger('over', [null]).trigger('rated', [value]);
|
||||
};
|
||||
|
||||
if (!itemdata('readonly')) {
|
||||
//if we are not read only, add all the events
|
||||
|
||||
//if we have a reset button, set the event handler.
|
||||
if (!itemdata('resetable'))
|
||||
resetbtn.hide();
|
||||
|
||||
//when the mouse goes over the range element, we set the "hover" stars.
|
||||
if (!itemdata('wired')) {
|
||||
range.bind('touchmove touchend', touchHandler); //bind touch events
|
||||
range.mousemove(function (e) {
|
||||
var score = calcRawScore(this, e);
|
||||
setHover(score);
|
||||
});
|
||||
//when the mouse leaves the range, we have to hide the hover stars, and show the current value.
|
||||
range.mouseleave(function (e) {
|
||||
range.find('.rateit-hover').hide().width(0).data('width', '');
|
||||
item.trigger('hover', [null]).trigger('over', [null]);
|
||||
range.find('.rateit-selected').show();
|
||||
});
|
||||
//when we click on the range, we have to set the value, hide the hover.
|
||||
range.mouseup(function (e) {
|
||||
var score = calcRawScore(this, e);
|
||||
var value = (score * itemdata('step')) + itemdata('min');
|
||||
setSelection(value);
|
||||
range.blur();
|
||||
});
|
||||
|
||||
//support key nav
|
||||
range.keyup( function (e) {
|
||||
if (e.which == 38 || e.which == (ltr ? 39 : 37)) {
|
||||
setSelection(Math.min(itemdata('value') + itemdata('step'), itemdata('max')));
|
||||
}
|
||||
if (e.which == 40 || e.which == (ltr ? 37 : 39)) {
|
||||
setSelection(Math.max(itemdata('value') - itemdata('step'), itemdata('min')));
|
||||
}
|
||||
});
|
||||
|
||||
itemdata('wired', true);
|
||||
}
|
||||
if (itemdata('resetable')) {
|
||||
resetbtn.show();
|
||||
}
|
||||
}
|
||||
else {
|
||||
resetbtn.hide();
|
||||
}
|
||||
|
||||
range.attr('aria-readonly', itemdata('readonly'));
|
||||
});
|
||||
};
|
||||
|
||||
//touch converter http://ross.posterous.com/2008/08/19/iphone-touch-events-in-javascript/
|
||||
function touchHandler(event) {
|
||||
|
||||
var touches = event.originalEvent.changedTouches,
|
||||
first = touches[0],
|
||||
type = "";
|
||||
switch (event.type) {
|
||||
case "touchmove": type = "mousemove"; break;
|
||||
case "touchend": type = "mouseup"; break;
|
||||
default: return;
|
||||
}
|
||||
|
||||
var simulatedEvent = document.createEvent("MouseEvent");
|
||||
simulatedEvent.initMouseEvent(type, true, true, window, 1,
|
||||
first.screenX, first.screenY,
|
||||
first.clientX, first.clientY, false,
|
||||
false, false, false, 0/*left*/, null);
|
||||
|
||||
first.target.dispatchEvent(simulatedEvent);
|
||||
event.preventDefault();
|
||||
};
|
||||
|
||||
//some default values.
|
||||
$.fn.rateit.defaults = { min: 0, max: 5, step: 0.5, starwidth: 16, starheight: 16, readonly: false, resetable: true, ispreset: false};
|
||||
|
||||
//invoke it on all .rateit elements. This could be removed if not wanted.
|
||||
$(function () { $('div.rateit, span.rateit').rateit(); });
|
||||
|
||||
})(jQuery);
|
7
app/static/global/plugins/rateit/src/jquery.rateit.min.js
vendored
Normal file
98
app/static/global/plugins/rateit/src/rateit.css
Normal file
@ -0,0 +1,98 @@
|
||||
.rateit {
|
||||
display: -moz-inline-box;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-o-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-touch-callout: none;
|
||||
}
|
||||
|
||||
.rateit .rateit-range
|
||||
{
|
||||
position: relative;
|
||||
display: -moz-inline-box;
|
||||
display: inline-block;
|
||||
background: url(star.gif);
|
||||
height: 16px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.rateit .rateit-range * {
|
||||
display:block;
|
||||
}
|
||||
|
||||
/* for IE 6 */
|
||||
* html .rateit, * html .rateit .rateit-range
|
||||
{
|
||||
display: inline;
|
||||
}
|
||||
|
||||
/* for IE 7 */
|
||||
* + html .rateit, * + html .rateit .rateit-range
|
||||
{
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.rateit .rateit-hover, .rateit .rateit-selected
|
||||
{
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.rateit .rateit-hover-rtl, .rateit .rateit-selected-rtl
|
||||
{
|
||||
left: auto;
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
.rateit .rateit-hover
|
||||
{
|
||||
background: url(star.gif) left -32px;
|
||||
}
|
||||
|
||||
.rateit .rateit-hover-rtl
|
||||
{
|
||||
background-position: right -32px;
|
||||
}
|
||||
|
||||
.rateit .rateit-selected
|
||||
{
|
||||
background: url(star.gif) left -16px;
|
||||
}
|
||||
|
||||
.rateit .rateit-selected-rtl
|
||||
{
|
||||
background-position: right -16px;
|
||||
}
|
||||
|
||||
.rateit .rateit-preset
|
||||
{
|
||||
background: url(star.gif) left -48px;
|
||||
}
|
||||
|
||||
.rateit .rateit-preset-rtl
|
||||
{
|
||||
background: url(star.gif) left -48px;
|
||||
}
|
||||
|
||||
.rateit button.rateit-reset
|
||||
{
|
||||
background: url(delete.gif) 0 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: -moz-inline-box;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
outline: none;
|
||||
border:none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.rateit button.rateit-reset:hover, .rateit button.rateit-reset:focus
|
||||
{
|
||||
background-position: 0 -16px;
|
||||
}
|
BIN
app/static/global/plugins/rateit/src/star.gif
Normal file
After Width: | Height: | Size: 2.4 KiB |