@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
266 lines (260 loc) • 11.9 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('/core'), require('@angular/forms'), require('/common')) :
typeof define === 'function' && define.amd ? define('ng-devui/rate', ['exports', '@angular/core', '@angular/forms', '@angular/common'], factory) :
(global = global || self, factory((global['ng-devui'] = global['ng-devui'] || {}, global['ng-devui'].rate = {}), global.ng.core, global.ng.forms, global.ng.common));
}(this, (function (exports, core, forms, common) { 'use strict';
/**
* added by tsickle
* Generated from: rate.component.ts
* {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var RateComponent = /** @class */ (function () {
function RateComponent() {
this.read = false;
this.count = 5;
this.color = '';
this.icon = '';
this.character = '';
this.totalLevel_array = [];
this.width = '';
this.onChange = (/**
* @return {?}
*/
function () { return null; });
this.onTouched = (/**
* @return {?}
*/
function () { return null; });
}
/**
* @return {?}
*/
RateComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
for (var i = 0; i < this.count; i++) {
this.totalLevel_array.push({ width: '0' });
}
};
// 只读模式配置
// 只读模式配置
/**
* @return {?}
*/
RateComponent.prototype.setStaticRating =
// 只读模式配置
/**
* @return {?}
*/
function () {
/** @type {?} */
var half_star = this.chooseValue % 1;
/** @type {?} */
var int_current_level = Math.floor(this.chooseValue);
this.setChange(0, int_current_level + 1, '100%');
if (half_star > 0) {
this.totalLevel_array[int_current_level + 1]['width'] = half_star * 100 + '%';
this.setChange(int_current_level + 2, this.count, '0');
}
else {
this.setChange(int_current_level + 1, this.count, '0');
}
};
// 动态模式配置
// 动态模式配置
/**
* @return {?}
*/
RateComponent.prototype.setDynamicRating =
// 动态模式配置
/**
* @return {?}
*/
function () {
this.setChange(0, this.chooseValue + 1, '100%');
this.setChange(this.chooseValue + 1, this.count, '0');
};
/**
* @param {?} event
* @param {?=} index
* @param {?=} reset
* @return {?}
*/
RateComponent.prototype.hoverToggle = /**
* @param {?} event
* @param {?=} index
* @param {?=} reset
* @return {?}
*/
function (event, index, reset) {
if (reset === void 0) { reset = false; }
if (this.read) {
return;
}
if (reset) {
if (this.chooseValue >= 0) {
this.setChange(0, this.chooseValue + 1, '100%');
this.setChange(this.chooseValue + 1, this.count, '0');
}
else {
this.setChange(0, this.count, '0');
}
}
else {
this.setChange(0, index + 1, '100%');
this.setChange(index + 1, this.count, '0');
}
};
// 根据mouseMove，mouseLeave,select等操作，改变颜色与是否选中
// 根据mouseMove，mouseLeave,select等操作，改变颜色与是否选中
/**
* @param {?} start
* @param {?} end
* @param {?} width
* @return {?}
*/
RateComponent.prototype.setChange =
// 根据mouseMove，mouseLeave,select等操作，改变颜色与是否选中
/**
* @param {?} start
* @param {?} end
* @param {?} width
* @return {?}
*/
function (start, end, width) {
for (var i = start; i < end; i++) {
this.totalLevel_array[i]['width'] = width;
}
};
/**
* @param {?} index
* @return {?}
*/
RateComponent.prototype.selectValue = /**
* @param {?} index
* @return {?}
*/
function (index) {
if (this.read) {
return;
}
this.setChange(0, index + 1, '100%');
this.setChange(index + 1, this.count, '0');
this.chooseValue = index;
this.onChange(index + 1);
this.onTouched();
};
/**
* @param {?} fn
* @return {?}
*/
RateComponent.prototype.registerOnChange = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this.onChange = fn;
};
/**
* @param {?} fn
* @return {?}
*/
RateComponent.prototype.registerOnTouched = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this.onTouched = fn;
};
/**
* @param {?} value
* @return {?}
*/
RateComponent.prototype.writeValue = /**
* @param {?} value
* @return {?}
*/
function (value) {
this.chooseValue = value - 1;
if (this.read) {
this.setStaticRating();
}
else {
this.setDynamicRating();
}
};
RateComponent.decorators = [
{ type: core.Component, args: [{
selector: 'd-rate',
template: "<div class=\"devui-star-container\" (mouseleave)=\"hoverToggle($event, chooseValue, true)\">\r\n <div\r\n *ngFor=\"let item of totalLevel_array; let i = index\"\r\n class=\"devui-star-align devui-pointer\"\r\n [ngClass]=\"{ 'devui-only-read': read }\"\r\n (mouseover)=\"hoverToggle($event, i)\"\r\n (click)=\"selectValue(i)\"\r\n >\r\n <span class=\"devui-star-color {{ icon }}\">\r\n {{ character }}\r\n <svg\r\n *ngIf=\"!icon && !character\"\r\n width=\"16px\"\r\n height=\"16px\"\r\n viewBox=\"0 0 16 16\"\r\n version=\"1.1\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n >\r\n <g id=\"\u6536\u85CF\u661F\u6807\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <g fill=\"#E3E5E9\" id=\"Mask\">\r\n <polygon\r\n points=\"8 12.7603585 3.67376208 14.3147912 3.81523437 9.71994835 1 6.0857977 5.41367261 4.80046131 8 1 10.5863274 4.80046131 15 6.0857977 12.1847656 9.71994835 12.3262379 14.3147912\"\r\n ></polygon>\r\n </g>\r\n </g>\r\n </svg>\r\n </span>\r\n <span\r\n class=\"devui-star-color-active devui-active-star devui-star-color-{{ type }} {{ icon }}\"\r\n [style.color]=\"color\"\r\n [style.width]=\"item.width\"\r\n >\r\n {{ character }}\r\n <svg\r\n *ngIf=\"!icon && !character\"\r\n width=\"16px\"\r\n height=\"16px\"\r\n viewBox=\"0 0 16 16\"\r\n version=\"1.1\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n >\r\n <g id=\"\u6536\u85CF\u661F\u6807\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <g [style.fill]=\"color\" id=\"Mask\">\r\n <polygon\r\n points=\"8 12.7603585 3.67376208 14.3147912 3.81523437 9.71994835 1 6.0857977 5.41367261 4.80046131 8 1 10.5863274 4.80046131 15 6.0857977 12.1847656 9.71994835 12.3262379 14.3147912\"\r\n ></polygon>\r\n </g>\r\n </g>\r\n </svg>\r\n </span>\r\n </div>\r\n <div style=\"clear:both;\"></div>\r\n</div>\r\n",
providers: [
{
provide: forms.NG_VALUE_ACCESSOR,
useExisting: core.forwardRef((/**
* @return {?}
*/
function () { return RateComponent; })),
multi: true
}
],
styles: [".devui-star-align{float:left;font-size:16px;margin-right:5px;position:relative}.devui-pointer{cursor:pointer}.devui-star-container{display:inline-block}.devui-star-color-active{color:#6a81ed}.devui-star-color-active svg g{fill:#6a81ed}.devui-star-color-success{color:#3dcca6}.devui-star-color-success svg g{fill:#3dcca6}.devui-star-color-warning{color:#fac20a}.devui-star-color-warning svg g{fill:#fac20a}.devui-star-color-error{color:#f66f6a}.devui-star-color-error svg g{fill:#f66f6a}.devui-active-star{position:absolute;top:0;left:0;overflow:hidden}.devui-star-color{color:#dfe1e6}.devui-star-color svg g{fill:#dfe1e6}.devui-only-read{cursor:not-allowed}"]
}] }
];
RateComponent.propDecorators = {
read: [{ type: core.Input }],
count: [{ type: core.Input }],
color: [{ type: core.Input }],
icon: [{ type: core.Input }],
character: [{ type: core.Input }],
type: [{ type: core.Input }]
};
return RateComponent;
}());
if (false) {
/** @type {?} */
RateComponent.prototype.read;
/** @type {?} */
RateComponent.prototype.count;
/** @type {?} */
RateComponent.prototype.color;
/** @type {?} */
RateComponent.prototype.icon;
/** @type {?} */
RateComponent.prototype.character;
/** @type {?} */
RateComponent.prototype.type;
/** @type {?} */
RateComponent.prototype.totalLevel_array;
/** @type {?} */
RateComponent.prototype.chooseValue;
/** @type {?} */
RateComponent.prototype.width;
/** @type {?} */
RateComponent.prototype.onChange;
/** @type {?} */
RateComponent.prototype.onTouched;
}
/**
* @fileoverview added by tsickle
* Generated from: rate.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var RateModule = /** @class */ (function () {
function RateModule() {
}
RateModule.decorators = [
{ type: core.NgModule, args: [{
imports: [common.CommonModule, forms.FormsModule],
exports: [RateComponent],
declarations: [RateComponent],
providers: [],
},] }
];
return RateModule;
}());
exports.RateComponent = RateComponent;
exports.RateModule = RateModule;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=ng-devui-rate.umd.js.map