ngx-address
Version:
A simple address picker in angular.
91 lines • 7.59 kB
JavaScript
import { Component, Input, EventEmitter, Output, forwardRef, ElementRef, Inject, ViewEncapsulation } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { AddressService } from "./address.service";
/**
* 城市选择器组件
* Usage:
* <ngx-address [(ngModel)]="city.id" [options]="{...}"></ngx-address>
*/
var AddressComponent = (function () {
function AddressComponent(element) {
this.element = element;
this.onSelected = new EventEmitter();
this.onChange = Function.prototype;
this.onTouched = Function.prototype;
this.onClose = this.onClose.bind(this);
this._t = new AddressService();
}
AddressComponent.prototype.ngOnInit = function () {
};
AddressComponent.prototype.onOpen = function () {
this._t.opened = true;
};
AddressComponent.prototype.onClose = function () {
this._t.opened = false;
};
AddressComponent.prototype.onTabChange = function (index) {
this._t.setHead(index);
};
AddressComponent.prototype.notify = function () {
this.onTouched();
this.onChange(this._t.result.id);
this.onSelected.emit(this._t.result);
};
AddressComponent.prototype.onItem = function (bdIndex, key, id, item) {
this._t.onSelected(bdIndex, id, item);
this.notify();
};
AddressComponent.prototype.ngOnChanges = function (changes) {
var _this = this;
if (changes.options) {
this.options = this._t.initData(this.options);
this.notify();
return;
}
if (changes.values) {
setTimeout(function () {
_this._t.setAddress(changes.values.currentValue);
});
}
};
AddressComponent.prototype.writeValue = function (obj) {
var _this = this;
if (obj && obj !== this._t.result.id) {
setTimeout(function () {
_this._t.setAddress(obj);
});
}
};
AddressComponent.prototype.registerOnChange = function (fn) { this.onChange = fn; };
AddressComponent.prototype.registerOnTouched = function (fn) { this.onTouched = fn; };
AddressComponent.prototype.setDisabledState = function (isDisabled) {
};
AddressComponent.decorators = [
{ type: Component, args: [{
selector: 'ngx-address',
template: "<div class=\"ngx-address\" [offClick]=\"onClose\">\n <div class=\"ngx-address-title\" [ngClass]=\"{'has':_t.title.length > 0}\"\n (click)=\"onOpen()\">\n <span [innerHTML]=\"_t.title ? _t.title : options.placeholder\"></span>\n <i class=\"arrow\"></i>\n </div>\n <div class=\"ngx-address-overlay\" *ngIf=\"_t.inited\" [hidden]=\"!_t.opened\" [ngStyle]=\"{'top.px': options.offset.y,'left.px': options.offset.x}\">\n <div class=\"ngx-address-select-warp\">\n <div class=\"ngx-address-select-tab\">\n <a *ngFor=\"let item of _t.hd\" (click)=\"onTabChange(item.index)\" [ngClass]=\"{'current': item.selected}\">{{item.name}}</a>\n </div>\n <div class=\"ngx-address-select\" *ngFor=\"let bitem of _t.bd\" [hidden]=\"!bitem.selected\">\n <dl *ngFor=\"let g of bitem.data.items | keys\">\n <dt *ngIf=\"g.key\">{{g.key}}</dt>\n <dd>\n <a *ngFor=\"let i of g.value\"\n (click)=\"onItem(bitem.index, g.key, i.id, i)\"\n [ngClass]=\"{'current': i.selected}\" title=\"{{i.name}}\" data-id=\"{{i.id}}\"\n href=\"javascript:;\">{{i.name}}</a>\n </dd>\n </dl>\n <dl class=\"ngx-address-tips\" *ngIf=\"bitem.data.tips && bitem.data.tips.length > 0\">\n <dd>\n <p *ngFor=\"let ti of bitem.data.tips\" data-id=\"{{ti.id}}\">{{ti.name}}</p>\n </dd>\n </dl>\n </div>\n </div>\n </div>\n</div>",
encapsulation: ViewEncapsulation.None,
styles: ["ngx-address { width: 100%; } .ngx-address { font-size: 12px; outline: 0; position: relative; cursor: pointer; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .ngx-address * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .ngx-address-title { padding: 4px 8px; border: 1px solid #ccc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #ccc; } .ngx-address-title .arrow { position: absolute; top: 10px; right: 8px; width: 10px; height: 5px; background: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAFCAIAAADzBuo/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAD1JREFUeNpinDlzJgMDQ1paGgMqmDVrFpBkgkhAOGhyQCkmuFa4CrgckGT8//8/sigEwO1iwhRCdgdAgAEAbbUZNeMBbuoAAAAASUVORK5CYII=\") 0 0 no-repeat; } .ngx-address-title.has { color: #333; } .ngx-address-title.has .separator { color: #cfcfcf; padding: 0 4px; } .ngx-address-overlay { position: absolute; left: -9999px; top: -9999px; z-index: 999999; outline: 0; width: 100%; -webkit-tap-highlight-color: transparent; } .ngx-address-select-tab { border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; border-top: 1px solid #ccc; height: 35px; display: flex; align-items: center; justify-content: space-around; background: #f0f0f0; } .ngx-address-select-tab a { display: block; height: 100%; width: 100%; color: #333; text-align: center; line-height: 35px; border-left: 1px solid #ccc; border-bottom: 1px solid transparent; text-decoration: none; outline: 0; } .ngx-address-select-tab .current { background: #fff; border-bottom: 1px solid #fff; color: #f60; } .ngx-address-select { border: 1px #ccc solid; border-top: 0; padding: 10px 15px; background: #fff; } .ngx-address-select dl { display: flex; margin: 0; padding: 3px 0; line-height: 2; } .ngx-address-select dt { width: 35px; line-height: 2; padding-right: 10px; font-weight: 700; text-align: right; } .ngx-address-select dd { margin-left: 0; flex: 1; } .ngx-address-select a { display: inline-block; line-height: 2; text-decoration: none; color: #333; padding: 0 10px; outline: 0; text-decoration: none; white-space: nowrap; } .ngx-address-select a:hover, .ngx-address-select a:focus { background-color: #fff8f3; border-radius: 2px; color: #f60; } .ngx-address-select a.current { background-color: #f60; color: #fff; border-radius: 2px; } .ngx-address-tips { border-top: 1px solid #ccc; color: #ccc; } .ngx-address-tips p { margin: 0; line-height: 2; } "],
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(function () { return AddressComponent; }),
multi: true
}],
host: {
'[attr.class]': 'options.className'
}
},] },
];
/** @nocollapse */
AddressComponent.ctorParameters = function () { return [
{ type: ElementRef, decorators: [{ type: Inject, args: [ElementRef,] },] },
]; };
AddressComponent.propDecorators = {
"options": [{ type: Input },],
"values": [{ type: Input },],
"onSelected": [{ type: Output },],
};
return AddressComponent;
}());
export { AddressComponent };
//# sourceMappingURL=address.component.js.map