UNPKG

4.71 kBJavaScriptView Raw
1import { Component, EventEmitter, HostListener, Input, Output, forwardRef } from '@angular/core';
2import { NG_VALUE_ACCESSOR } from '@angular/forms';
3export var RATING_CONTROL_VALUE_ACCESSOR = {
4 provide: NG_VALUE_ACCESSOR,
5 useExisting: forwardRef(function () { return RatingComponent; }),
6 multi: true
7};
8export var RatingComponent = (function () {
9 function RatingComponent() {
10 /** number of icons */
11 this.max = 5;
12 /** fired when icon selected, $event:number equals to selected rating */
13 this.onHover = new EventEmitter();
14 /** fired when icon selected, $event:number equals to previous rating value */
15 this.onLeave = new EventEmitter();
16 this.onChange = Function.prototype;
17 this.onTouched = Function.prototype;
18 }
19 RatingComponent.prototype.onKeydown = function (event) {
20 if ([37, 38, 39, 40].indexOf(event.which) === -1) {
21 return;
22 }
23 event.preventDefault();
24 event.stopPropagation();
25 var sign = event.which === 38 || event.which === 39 ? 1 : -1;
26 this.rate(this.value + sign);
27 };
28 RatingComponent.prototype.ngOnInit = function () {
29 this.max = typeof this.max !== 'undefined' ? this.max : 5;
30 this.readonly = this.readonly === true;
31 this.stateOn = typeof this.stateOn !== 'undefined'
32 ? this.stateOn
33 : 'glyphicon-star';
34 this.stateOff = typeof this.stateOff !== 'undefined'
35 ? this.stateOff
36 : 'glyphicon-star-empty';
37 this.titles = typeof this.titles !== 'undefined' && this.titles.length > 0
38 ? this.titles
39 : ['one', 'two', 'three', 'four', 'five'];
40 this.range = this.buildTemplateObjects(this.ratingStates, this.max);
41 };
42 // model -> view
43 RatingComponent.prototype.writeValue = function (value) {
44 if (value % 1 !== value) {
45 this.value = Math.round(value);
46 this.preValue = value;
47 return;
48 }
49 this.preValue = value;
50 this.value = value;
51 };
52 RatingComponent.prototype.enter = function (value) {
53 if (!this.readonly) {
54 this.value = value;
55 this.onHover.emit(value);
56 }
57 };
58 RatingComponent.prototype.reset = function () {
59 this.value = this.preValue;
60 this.onLeave.emit(this.value);
61 };
62 RatingComponent.prototype.registerOnChange = function (fn) {
63 this.onChange = fn;
64 };
65 RatingComponent.prototype.registerOnTouched = function (fn) {
66 this.onTouched = fn;
67 };
68 RatingComponent.prototype.rate = function (value) {
69 if (!this.readonly && value >= 0 && value <= this.range.length) {
70 this.writeValue(value);
71 this.onChange(value);
72 }
73 };
74 RatingComponent.prototype.buildTemplateObjects = function (ratingStates, max) {
75 ratingStates = ratingStates || [];
76 var count = ratingStates.length || max;
77 var result = [];
78 for (var i = 0; i < count; i++) {
79 result.push(Object.assign({
80 index: i,
81 stateOn: this.stateOn,
82 stateOff: this.stateOff,
83 title: this.titles[i] || i + 1
84 }, ratingStates[i] || {}));
85 }
86 return result;
87 };
88 RatingComponent.decorators = [
89 { type: Component, args: [{
90 selector: 'rating',
91 template: "\n <span (mouseleave)=\"reset()\" (keydown)=\"onKeydown($event)\" tabindex=\"0\" role=\"slider\" aria-valuemin=\"0\" [attr.aria-valuemax]=\"range.length\" [attr.aria-valuenow]=\"value\">\n <template ngFor let-r [ngForOf]=\"range\" let-index=\"index\">\n <span class=\"sr-only\">({{ index < value ? '*' : ' ' }})</span>\n <i (mouseenter)=\"enter(index + 1)\" (click)=\"rate(index + 1)\" class=\"glyphicon\" [ngClass]=\"index < value ? r.stateOn : r.stateOff\" [title]=\"r.title\" ></i>\n </template>\n </span>\n ",
92 providers: [RATING_CONTROL_VALUE_ACCESSOR]
93 },] },
94 ];
95 /** @nocollapse */
96 RatingComponent.ctorParameters = function () { return []; };
97 RatingComponent.propDecorators = {
98 'max': [{ type: Input },],
99 'stateOn': [{ type: Input },],
100 'stateOff': [{ type: Input },],
101 'readonly': [{ type: Input },],
102 'titles': [{ type: Input },],
103 'ratingStates': [{ type: Input },],
104 'onHover': [{ type: Output },],
105 'onLeave': [{ type: Output },],
106 'onKeydown': [{ type: HostListener, args: ['keydown', ['$event'],] },],
107 };
108 return RatingComponent;
109}());
110//# sourceMappingURL=rating.component.js.map
\No newline at end of file