mirror of https://github.com/abpframework/abp.git
EngincanV
6 years ago
3 changed files with 145 additions and 59 deletions
@ -1,27 +1,67 @@ |
|||
@using Volo.Abp.Users |
|||
@using Microsoft.AspNetCore.Mvc.Localization |
|||
@using Volo.Abp.Users |
|||
@using Volo.CmsKit.Localization |
|||
@inject ICurrentUser CurrentUser |
|||
@model Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Rating.RatingViewModel |
|||
@inject IHtmlLocalizer<CmsKitResource> L |
|||
|
|||
@if (CurrentUser.IsAuthenticated) |
|||
{ |
|||
<div class="my-simple-widget"> |
|||
<h2>My Simple Widget</h2> |
|||
<p>This is a simple widget!</p> |
|||
</div> |
|||
} |
|||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/star-rating-svg@3.5.0/src/css/star-rating-svg.css"> |
|||
|
|||
<div class="rate"> |
|||
<input type="radio" id="star5" name="rate" value="5"/> |
|||
<label for="star5" title="5 stars"></label> |
|||
<div class="cms-rating-area" data-entity-type="@Model.EntityType" data-entity-id="@Model.EntityId"> |
|||
@if (CurrentUser.IsAuthenticated) |
|||
{ |
|||
<hr/> |
|||
<span class="my-rating-5" data-rating="@(Model.CurrentRating != null ? Model.CurrentRating.StarCount : 0)" data-authenticated="@(Model.CurrentRating != null)"></span> |
|||
<span class="live-rating">@(Model.CurrentRating != null ? Model.CurrentRating.StarCount : 0)</span> |
|||
if (Model.CurrentRating != null) |
|||
{ |
|||
<a href="#" class="rating-undo-link" data-id="@Model.CurrentRating.Id"> |
|||
<i class="fa fa-undo"></i> @L["Undo"] |
|||
</a> |
|||
} |
|||
<hr/> |
|||
<div class="container text-center"> |
|||
<h2 class="mb-5">All Stars</h2> |
|||
@if (Model.Ratings != null) |
|||
{ |
|||
<ul class="list-group"> |
|||
@foreach (var rating in Model.Ratings) |
|||
{ |
|||
<li class="list-group-item d-flex justify-content-between align-items-center"> |
|||
@rating.StarCount @L["Stars"] |
|||
<span class="badge badge-primary badge-pill">@rating.Count</span> |
|||
</li> |
|||
} |
|||
</ul> |
|||
} |
|||
</div> |
|||
} |
|||
else |
|||
{ |
|||
<div class="float-right mb-2"> |
|||
<a href="@Model.LoginUrl" class="btn btn-primary">@L["LoginToRate"]</a> |
|||
</div> |
|||
} |
|||
</div> |
|||
|
|||
<input type="radio" id="star4" name="rate" value="4"/> |
|||
<label for="star4" title="4 stars"></label> |
|||
|
|||
<input type="radio" id="star3" name="rate" value="3"/> |
|||
<label for="star3" title="3 stars"></label> |
|||
|
|||
<input type="radio" id="star2" name="rate" value="2"/> |
|||
<label for="star2" title="2 stars"></label> |
|||
|
|||
<input type="radio" id="star1" name="rate" value="1"/> |
|||
<label for="star1" title="1 star"></label> |
|||
</div> |
|||
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc" crossorigin="anonymous"></script> |
|||
<script src="https://cdn.jsdelivr.net/npm/star-rating-svg@3.5.0/dist/jquery.star-rating-svg.min.js"></script> |
|||
<script> |
|||
var authenticated = $(".my-rating-5").attr("data-authenticated"); |
|||
|
|||
$(".my-rating-5").starRating({ |
|||
initialRating: 0, |
|||
disableAfterRate: true, |
|||
useFullStars: true, |
|||
readOnly: authenticated === "True", |
|||
onHover: function(currentIndex, currentRating, $el) { |
|||
$(".live-rating").text(currentIndex); |
|||
}, |
|||
onLeave: function(currentIndex, currentRating, $el) { |
|||
$(".live-rating").text(currentRating); |
|||
}, |
|||
callback: function(currentRating, $el) { |
|||
alert(currentRating); |
|||
} |
|||
}); |
|||
</script> |
|||
@ -1,35 +1 @@ |
|||
.rate { |
|||
float: left; |
|||
height: 46px; |
|||
padding: 0 10px; |
|||
} |
|||
.rate:not(:checked) > input { |
|||
position:absolute; |
|||
top:-9999px; |
|||
} |
|||
.rate:not(:checked) > label { |
|||
float:right; |
|||
width:1em; |
|||
overflow:hidden; |
|||
white-space:nowrap; |
|||
cursor:pointer; |
|||
font-size:30px; |
|||
color:#ccc; |
|||
} |
|||
.rate:not(:checked) > label:before { |
|||
content: '★ '; |
|||
} |
|||
.rate > input:checked ~ label { |
|||
color: #ffc700; |
|||
} |
|||
.rate:not(:checked) > label:hover, |
|||
.rate:not(:checked) > label:hover ~ label { |
|||
color: #deb217; |
|||
} |
|||
.rate > input:checked + label:hover, |
|||
.rate > input:checked + label:hover ~ label, |
|||
.rate > input:checked ~ label:hover, |
|||
.rate > input:checked ~ label:hover ~ label, |
|||
.rate > label:hover ~ input:checked ~ label { |
|||
color: #c59b08; |
|||
} |
|||
|
|||
@ -1 +1,81 @@ |
|||
|
|||
(function () { |
|||
|
|||
var l = abp.localization.getResource("CmsKit"); |
|||
|
|||
$(document).ready(function () { |
|||
abp.widgets.CmsRating = function ($widget) { |
|||
var widgetManager = $widget.data("abp-widget-manager"); |
|||
var $ratingArea = $widget.find(".cms-rating-area"); |
|||
|
|||
function getFilters() { |
|||
return { |
|||
entityType: $ratingArea.attr("data-entity-type"), |
|||
entityId: $ratingArea.attr("data-entity-id") |
|||
}; |
|||
} |
|||
|
|||
function registerCreateOfNewRating() { |
|||
$(".my-rating-5").starRating({ |
|||
initialRating: 0, |
|||
disableAfterRate: true, |
|||
useFullStars: true, |
|||
readOnly: authenticated === "True", |
|||
onHover: function(currentIndex, currentRating, $el) { |
|||
$(".live-rating").text(currentIndex); |
|||
}, |
|||
onLeave: function(currentIndex, currentRating, $el) { |
|||
$(".live-rating").text(currentRating); |
|||
}, |
|||
callback: function(currentRating, $el) { |
|||
volo.cmsKit.public.ratings.ratingPublic.create( |
|||
$ratingArea.attr("data-entity-type"), |
|||
$ratingArea.attr("data-entity-id"), |
|||
{ |
|||
starCount: parseInt(currentRating) |
|||
} |
|||
).then(function () { |
|||
widgetManager.refresh($widget); |
|||
}) |
|||
} |
|||
}); |
|||
} |
|||
|
|||
function registerUndoLink() { |
|||
console.log("asdf"); |
|||
$(".rating-undo-link").on('click', '', function (e) { |
|||
e.preventDefault(); |
|||
|
|||
abp.message.confirm(l("RatingUndoMessage"), function (ok) { |
|||
if(ok) { |
|||
var id = $(".rating-undo-link").attr("data-id"); |
|||
volo.cmsKit.public.ratings.ratingPublic.delete( |
|||
id |
|||
).then(function () { |
|||
widgetManager.refresh($widget); |
|||
}); |
|||
} |
|||
}) |
|||
}); |
|||
} |
|||
|
|||
function init() { |
|||
registerCreateOfNewRating(); |
|||
registerUndoLink(); |
|||
} |
|||
|
|||
return { |
|||
init: init, |
|||
getFilters: getFilters |
|||
} |
|||
}; |
|||
|
|||
$('.abp-widget-wrapper[data-widget-name="CmsRating"]') |
|||
.each(function () { |
|||
var widgetManager = new abp.WidgetManager({ |
|||
wrapper: $(this), |
|||
}); |
|||
|
|||
widgetManager.init($(this)); |
|||
}); |
|||
}); |
|||
})(jQuery); |
|||
Loading…
Reference in new issue