Skip to content

Instantly share code, notes, and snippets.

@droganaida

droganaida/rating-source.html

Last active August 7, 2017 07:13
Show Gist options
  • Save droganaida/461167a6ec7a011ebf6c9c0820f6aca3 to your computer and use it in GitHub Desktop.
Save droganaida/461167a6ec7a011ebf6c9c0820f6aca3 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
rating-source.html
<div class="ratingHolder">
<div class="passiveRatingHolder">
<div class="ratingBg"></div>
<div style="width: 85%;" class="ratingMask"></div>
</div>
<div class="rateNumbers">
<div>
<span class="ratingvalue">4.25</span>
/
<span class="bestrating">5.00</span>
<div class="br"></div>
(
<span class="commentscount">4</span>
голосов)
</div>
</div>
</div>
<style>
.ratingHolder {
width: 210px;
position: relative;
}
.ratingHolder .passiveRatingHolder {
position: relative;
width: 178px; height: 37px;
left: 50%; margin-left: -89px; display: block;
}
.ratingHolder .passiveRatingHolder > div {
position:absolute; left: 0; top: 0;
height: 37px;
background-image: url("stars.svg");
background-repeat: no-repeat;
background-size: 178px;
}
.ratingHolder .passiveRatingHolder .ratingBg {background-position: 0 0; width: 178px; z-index: 1;}
.ratingHolder .passiveRatingHolder .ratingMask {background-position: 0 -41px; z-index: 99;}
.ratingHolder .rateNumbers {text-align: center; width: 100%; color: #a1a1a1;font-size: 14px;}
.ratingHolder .rateNumbers .ratingvalue {color: #2d2d2d; font-size: 26px;}
.ratingHolder .rateNumbers .bestrating {margin-bottom: 4px; display: inline-block; font-size: 20px;}
</style>
<div class="userRatingHolder">
<div class="userRating">
<div class="votingHolder">
<div data-score="5" class="vote onestar"></div>
<div data-score="4" class="vote twostar"></div>
<div data-score="3" class="vote threestar"></div>
<div data-score="2" class="vote fourstar"></div>
<div data-score="1" class="vote fivestar"></div>
</div>
</div>
</div>
<style>
.ratingHolder .userRatingHolder {
opacity: 0;
transition: .1s;
}
.ratingHolder:hover .userRatingHolder, .ratingHolder.voted .userRatingHolder {
opacity: 1; transition: .1s;
}
</style>
<style>
.ratingHolder .userRating {
position: absolute; top: -10px; left: 0;
padding: 10px 16px;
cursor: pointer;
z-index: 9999;
background-color: #ffffff;
border-radius: 5px;
width: 178px; height: 31px;
}
.ratingHolder.voted .userRating {background-color: #598a86;}
</style>
<style>
.ratingHolder.voted .vote {pointer-events:none;}
</style>
<style>
.ratingHolder .vote {
transition: .2s;
position: absolute; top: 0;
cursor: pointer;
z-index: 99999;
width: 32px; height: 31px;
background-image: url("stars.svg");
background-repeat: no-repeat; background-position: 0 0; background-size: 178px;
}
.ratingHolder .vote:hover, .ratingHolder.voted .vote.active {
transition: .2s; background-position: 0 -81px;
}
.ratingHolder .vote:hover ~ .vote, .vote.active ~ .vote {
transition: .2s; background-position: 0 -41px;
}
.ratingHolder .votingHolder {direction: rtl; position: relative}
.ratingHolder .vote.onestar {left: 80%;}
.ratingHolder .vote.twostar {left: 60%;}
.ratingHolder .vote.threestar {left: 40%;}
.ratingHolder .vote.fourstar {left: 20%;}
.ratingHolder .vote.fivestar {left: 0;}
.ratingHolder.voted .vote:hover {background-position: 0 0;}
.ratingHolder.voted .vote.active ~ .vote {background-position: 0 -41px;}
.ratingHolder.voted .vote.active:hover {background-position: 0 -81px;}
</style>
<div class="text">Ваш голос учтен!</div>
<style>
.ratingHolder .text {color: #4f8d88; text-align: center; margin: 0; opacity: 0; transition: .1s; height: 0px;}
.ratingHolder.voted .text {opacity: 1; margin: 10px 0 0 0; transition: .1s; height: auto;}
</style>
<script>
$( document ).ready(function() {
$('.vote').on ('click', function(){
$(this).addClass('active');
var parent = $(this).parent().parent().parent().parent();
var commentCountElement = parent.find('.commentscount');
var ratingValueElement = parent.find('.ratingvalue');
var votedValue = parseInt($(this).attr('data-score'));
parent.addClass('voted');
var commentCount = parseInt(commentCountElement.text());
commentCount = commentCount;
commentCountElement.text(commentCount + 1);
var rating = parseFloat(ratingValueElement.text());
rating = (commentCount * rating + votedValue)/(commentCount + 1);
ratingValueElement.text(rating.toFixed(2));
console.log('AJAX запрос примет значение ' + votedValue);
})
})
</script>
<div itemscope="" itemtype="http://schema.org/CollectionPage" class="ratingHolder">
<div class="userRatingHolder">
<div class="userRating">
<div class="votingHolder">
<div data-score="5" class="vote onestar"></div>
<div data-score="4" class="vote twostar"></div>
<div data-score="3" class="vote threestar"></div>
<div data-score="2" class="vote fourstar"></div>
<div data-score="1" class="vote fivestar"></div>
</div>
</div>
</div>
<div class="passiveRatingHolder">
<div class="ratingBg"></div>
<div style="width: 85%;" class="ratingMask"></div>
</div>
<div class="text">Ваш голос учтен!</div>
<div class="rateNumbers">
<div itemprop="aggregateRating" itemscope="" itemtype="http://schema.org/AggregateRating">
<span itemprop="ratingValue" class="ratingvalue">4.25</span>
/
<span itemprop="bestRating" class="bestrating">5.00</span>
<div class="br"></div>
(
<span itemprop="reviewCount" class="commentscount">4</span>
голосов)
</div>
</div>
</div>
Display the source blob
Display the rendered blob
Raw
stars.svg
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="362.993px" height="227.361px" viewBox="0 0 362.993 227.361" enable-background="new 0 0 362.993 227.361"
xml:space="preserve">
<g>
<polygon fill="#E2E2E2" points="32.435,0 42.457,20.309 64.869,23.565 48.651,39.374 52.48,61.694 32.435,51.156 12.389,61.694
16.217,39.374 0,23.565 22.411,20.309 "/>
<polygon fill="#E2E2E2" points="105.965,0 115.988,20.309 138.399,23.565 122.183,39.374 126.011,61.694 105.965,51.156
85.919,61.694 89.748,39.374 73.53,23.565 95.942,20.309 "/>
<polygon fill="#E2E2E2" points="179.435,0 189.457,20.309 211.869,23.565 195.651,39.374 199.48,61.694 179.435,51.156
159.389,61.694 163.217,39.374 147,23.565 169.411,20.309 "/>
<polygon fill="#E2E2E2" points="251.109,0 261.133,20.309 283.544,23.565 267.327,39.374 271.155,61.694 251.109,51.156
231.063,61.694 234.893,39.374 218.675,23.565 241.087,20.309 "/>
<polygon fill="#E2E2E2" points="324.559,0 334.581,20.309 356.993,23.565 340.776,39.374 344.604,61.694 324.559,51.156
304.513,61.694 308.341,39.374 292.124,23.565 314.536,20.309 "/>
</g>
<g>
<polygon fill="#A8D05C" points="32.435,83.333 42.457,103.642 64.869,106.899 48.651,122.707 52.48,145.028 32.435,134.489
12.389,145.028 16.217,122.707 0,106.899 22.411,103.642 "/>
<polygon fill="#A8D05C" points="105.965,83.333 115.988,103.642 138.399,106.899 122.183,122.707 126.011,145.028 105.965,134.489
85.919,145.028 89.748,122.707 73.53,106.899 95.942,103.642 "/>
<polygon fill="#A8D05C" points="179.435,83.333 189.457,103.642 211.869,106.899 195.651,122.707 199.48,145.028 179.435,134.489
159.389,145.028 163.217,122.707 147,106.899 169.411,103.642 "/>
<polygon fill="#A8D05C" points="251.109,83.333 261.133,103.642 283.544,106.899 267.327,122.707 271.155,145.028 251.109,134.489
231.063,145.028 234.893,122.707 218.675,106.899 241.087,103.642 "/>
<polygon fill="#A8D05C" points="325.56,83.333 335.581,103.642 357.993,106.899 341.776,122.707 345.604,145.028 325.56,134.489
305.513,145.028 309.341,122.707 293.124,106.899 315.536,103.642 "/>
</g>
<polygon fill="#FEDE8A" points="32.435,164.667 42.458,184.975 64.869,188.232 48.652,204.04 52.48,226.361 32.435,215.822
12.389,226.361 16.218,204.04 0,188.232 22.412,184.975 "/>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment