uis-star-rating
Version:
A simple component for star rating - ionic4
154 lines (153 loc) • 6.66 kB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { Events } from '@ionic/angular';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
var HTML_TEMPLATE = "\n<div class=\"ionic4-star-rating\">\n <button [ngStyle]=\"{'width' : fontSize, 'height' : fontSize}\" *ngFor=\"let index of iconsArray\" id=\"{{index}}\" type=\"button\" ion-button icon-only (click)=\"changeRating($event)\">\n <ion-icon [ngStyle]=\"{'color':index < this.Math.round(this.parseFloat(rating)) ? activeColor : defaultColor, 'font-size' : fontSize }\" name=\"{{(halfStar ==='true' && (rating - index > 0) && (rating - index <= 0.5)) ? halfIcon : (index < this.Math.round(this.parseFloat(rating))) ? activeIcon : defaultIcon}}\"></ion-icon>\n </button>\n</div>\n";
var CSS_STYLE = "\n .ionic4-star-rating button {\n background: none;\n box-shadow: none;\n -webkit-box-shadow: none;\n padding : 0px;\n }\n";
var StarRating = /** @class */ (function () {
function StarRating(events) {
this.events = events;
this.eventInfo = (function () {
var id = new Date().getTime();
var topic = "star-rating:" + id + ":changed";
return {
topic: topic
};
})();
this.ratingChanged = new EventEmitter();
this.readonly = "false";
this.activeColor = '#488aff';
this.defaultColor = '#aaaaaa';
this.activeIcon = 'ios-star';
this.defaultIcon = 'ios-star-outline';
this.halfIcon = 'ios-star-half';
this.halfStar = "false";
this.maxRating = 5;
this.fontSize = '28px';
this.iconsArray = [];
this.Math = Math;
this.parseFloat = parseFloat;
}
StarRating_1 = StarRating;
StarRating.prototype.ngOnInit = function () {
this.rating = this.rating || 0; //default after input`s initialization
for (var i = 0; i < this.maxRating; i++) {
this.iconsArray.push(i);
}
};
StarRating.prototype.writeValue = function (obj) {
this.rating = obj;
};
StarRating.prototype.registerOnChange = function (fn) {
this.onChange = fn;
};
StarRating.prototype.registerOnTouched = function (fn) {
this.onTouched = fn;
};
StarRating.prototype.setDisabledState = function (isDisabled) {
this.readonly = isDisabled ? "true" : "false";
};
Object.defineProperty(StarRating.prototype, "rating", {
get: function () {
return this._rating;
},
set: function (val) {
this._rating = val;
// for form
if (this.onChange) {
this.onChange(val);
}
},
enumerable: true,
configurable: true
});
StarRating.prototype.changeRating = function (event) {
if (this.readonly && this.readonly === "true")
return;
// event is different for firefox and chrome
var id = event.target.id ? parseInt(event.target.id) : parseInt(event.target.parentElement.id);
if (this.halfStar && this.halfStar === "true") {
this.rating = ((this.rating - id > 0) && (this.rating - id <= 0.5)) ? id + 1 : id + .5;
}
else {
this.rating = id + 1;
}
// subscribe this event to get the changed value in your parent compoanent
this.events.publish("star-rating:changed", this.rating); //common event for all instances included for backwards compatibility
this.events.publish(this.eventInfo.topic, this.rating); //common event for all instances
// unique event
this.ratingChanged.emit(this.rating);
};
var StarRating_1;
__decorate([
Input(),
__metadata("design:type", Number),
__metadata("design:paramtypes", [Number])
], StarRating.prototype, "rating", null);
__decorate([
Output(),
__metadata("design:type", EventEmitter)
], StarRating.prototype, "ratingChanged", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], StarRating.prototype, "readonly", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], StarRating.prototype, "activeColor", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], StarRating.prototype, "defaultColor", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], StarRating.prototype, "activeIcon", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], StarRating.prototype, "defaultIcon", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], StarRating.prototype, "halfIcon", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], StarRating.prototype, "halfStar", void 0);
__decorate([
Input(),
__metadata("design:type", Number)
], StarRating.prototype, "maxRating", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], StarRating.prototype, "fontSize", void 0);
StarRating = StarRating_1 = __decorate([
Component({
selector: 'ionic4-star-rating',
template: HTML_TEMPLATE,
styles: [CSS_STYLE],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: StarRating_1,
multi: true
}
]
}),
__metadata("design:paramtypes", [Events])
], StarRating);
return StarRating;
}());
export { StarRating };
//# sourceMappingURL=ionic4-star-rating-component.js.map