1 | import { Component, EventEmitter, HostListener, Input, Output, forwardRef } from '@angular/core';
|
2 | import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
3 | export var RATING_CONTROL_VALUE_ACCESSOR = {
|
4 | provide: NG_VALUE_ACCESSOR,
|
5 | useExisting: forwardRef(function () { return RatingComponent; }),
|
6 | multi: true
|
7 | };
|
8 | export var RatingComponent = (function () {
|
9 | function RatingComponent() {
|
10 |
|
11 | this.max = 5;
|
12 |
|
13 | this.onHover = new EventEmitter();
|
14 |
|
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 |
|
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 |
|
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 |
|
\ | No newline at end of file |