Skip to content

Commit

Permalink
fix(template): refactored class names
Browse files Browse the repository at this point in the history
Closes #58
  • Loading branch information
BioPhoton committed Apr 7, 2017
1 parent 111314f commit ee2270f
Showing 1 changed file with 21 additions and 25 deletions.
46 changes: 21 additions & 25 deletions src/star-rating.tpl.html
@@ -1,32 +1,28 @@
<div id="{{$ctrl.id}}"
class="rating {{$ctrl.rating?'value-'+$ctrl.ratingAsInteger:'value-0'}} {{$ctrl.hoverRating?'hover-'+$ctrl.hoverRating:'hover-0'}} {{$ctrl.halfStarVisible?'half':''}} {{$ctrl.space?'space-'+$ctrl.space:''}} {{$ctrl.labelVisible?'label-'+$ctrl.labelVisible:''}} {{$ctrl.labelPosition?'label-'+$ctrl.labelPosition:''}} {{$ctrl.color?'color-'+$ctrl.color:''}} {{$ctrl.starType?'star-'+$ctrl.starType:''}} {{$ctrl.speed}} {{$ctrl.size}}"
ng-class="{'read-only':$ctrl.readOnly, 'disabled':$ctrl.disabled}">
<div id="{{$ctrl.id}}" class="rating" ng-class="$ctrl.getComponentClassNames()">

<div ng-show="$ctrl.labelText" class="label-value">{{$ctrl.labelText}}</div>
<div ng-show="$ctrl.labelText" class="label-value">{{$ctrl.labelText}}</div>

<div class="star-container">
<div class="star"
ng-repeat="star in $ctrl.stars track by $index"
ng-click="$ctrl.onStarClicked(star)"
ng-mouseover="$ctrl.onStarHover(star)"
ng-mouseleave="$ctrl.onStarHover(0)"
>
<div class="star-container" ng-mouseleave="$ctrl.onStarHover()">

<i class="star-empty {{$ctrl.classEmpty}}" ng-if="!$ctrl.svgVisible()"></i>
<i class="star-half {{$ctrl.classHalf}}" ng-if="!$ctrl.svgVisible()"></i>
<i class="star-filled {{$ctrl.classFilled}}" ng-if="!$ctrl.svgVisible()"></i>
<div class="star"
ng-repeat="star in $ctrl.stars track by $index"
ng-click="$ctrl.onStarClicked(star)"
ng-mouseover="$ctrl.onStarHover(star)">

<svg class="star-empty {{$ctrl.classEmpty}}" ng-if="$ctrl.svgVisible()">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{{$ctrl.pathEmpty}}"></use>
</svg>
<svg class="star-half {{$ctrl.classHalf}}" ng-if="$ctrl.svgVisible()">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{{$ctrl.pathHalf}}"></use>
</svg>
<svg class="star-filled {{$ctrl.classFilled}}" ng-if="$ctrl.svgVisible()">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{{$ctrl.pathFilled}}"></use>
</svg>
<i class="star-empty {{$ctrl.classEmpty}}" ng-if="!$ctrl.svgVisible()"></i>
<i class="star-half {{$ctrl.classHalf}}" ng-if="!$ctrl.svgVisible()"></i>
<i class="star-filled {{$ctrl.classFilled}}" ng-if="!$ctrl.svgVisible()"></i>

</div>
</div>
<svg class="star-empty {{$ctrl.classEmpty}}" ng-if="$ctrl.svgVisible()">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{{$ctrl.pathEmpty}}"></use>
</svg>
<svg class="star-half {{$ctrl.classHalf}}" ng-if="$ctrl.svgVisible()">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{{$ctrl.pathHalf}}"></use>
</svg>
<svg class="star-filled {{$ctrl.classFilled}}" ng-if="$ctrl.svgVisible()">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{{$ctrl.pathFilled}}"></use>
</svg>
</div>
</div>

</div>

0 comments on commit ee2270f

Please sign in to comment.