ng-zorro-antd-mobile
Version:
An enterprise-class mobile UI components based on Ant Design and Angular
169 lines (163 loc) • 9.57 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Component, Input, Output, NgModule } from '@angular/core';
import * as i3 from '@angular/common';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import * as i1 from 'ng-zorro-antd-mobile/core';
import { IconHandler } from 'ng-zorro-antd-mobile/core';
import * as i2 from 'ng-zorro-antd-mobile/icon';
import { IconModule } from 'ng-zorro-antd-mobile/icon';
function insertKeyFrame(rule, className) {
const style = document.createElement('style');
style.setAttribute('class', className);
style.innerHTML = rule;
document.body.appendChild(style);
}
function deleteKeyFrame(className) {
const styleDom = document.getElementsByClassName(className);
while (styleDom.length > 0) {
styleDom[0].remove();
}
}
function getWidthHeight() {
const w = window;
const d = document;
const e = d.documentElement;
const g = d.getElementsByTagName('body')[0];
return {
width: w.innerWidth || e.clientWidth || g.clientWidth,
height: w.innerHeight || e.clientHeight || g.clientHeight
};
}
function getTextWidth(text, font) {
const _dom = document.createElement('div');
_dom.innerHTML = text;
_dom.style.position = 'absolute';
_dom.style.left = '-9999';
_dom.style.whiteSpace = 'nowrap';
_dom.style.fontSize = font;
document.body.appendChild(_dom);
const _w = _dom.clientWidth + 10;
document.body.removeChild(_dom);
return _w;
}
class NoticeBarComponent {
get option() {
return this._option;
}
set option(value) {
Object.assign(this._option, value);
this.dataProcess();
if (this._option.scrolling) {
this.marqueeScroll = 'scrolling';
}
else {
this.marqueeScroll = 'scrolling-stop';
}
}
constructor(_iconHandler) {
this._iconHandler = _iconHandler;
this.visiable = false;
this.marqueeScroll = 'scrolling';
this.style = {};
this._option = {
mode: '',
icon: '',
action: '',
content: '',
fontSize: '14px',
scrolling: true,
marqueeProps: { loop: true, leading: 500, trailing: 8000, fps: 200, style: {} }
};
this.onClick = new EventEmitter();
this._iconHandler.load();
}
click() {
this.onClick.emit(this._option.mode);
if (this._option.mode === 'closable') {
this.visiable = false;
}
}
dataProcess() {
this.visiable = true;
this.style = {
width: '200%'
};
this._width = getTextWidth(this._option.content, this._option.fontSize);
if (getWidthHeight().width < this._width) {
const count = this._option.marqueeProps.loop ? 'infinite' : 1;
let animationName = `noticebarmarquee_${this._width}`;
this.style = {
width: this._width * 2 + 'px',
'animation-name': animationName,
'animation-delay': `${this._option.marqueeProps.leading}ms`,
'animation-duration': `${(((1 / this._option.marqueeProps.fps) * this._width) / getWidthHeight().width) *
1000}s`,
'animation-iteration-count': `${count}`
};
this.marqueeScroll = 'scrolling';
this.insetKeyframe(animationName);
}
else {
this.marqueeScroll = 'scrolling-stop';
}
}
insetKeyframe(animationName) {
insertKeyFrame(` ${animationName} {
0% { left: 0px; }
100% { left: -${this._width}px }
}`, 'notice_bar_animation_cls');
insertKeyFrame(`@-webkit-keyframes ${animationName} {
0% { left: 0px; }
100% { left: -${this._width}px }
}`, 'notice_bar_animation_cls');
insertKeyFrame(`@-moz-keyframes ${animationName} {
0% { left: 0px; }
100% { left: -${this._width}px }
}`, 'notice_bar_animation_cls');
insertKeyFrame(`@-o-keyframes ${animationName} {
0% { left: 0px; }
100% { left: -${this._width}px }
}`, 'notice_bar_animation_cls');
}
ngOnInit() {
document.addEventListener('touchstart', () => {
this.marqueeScroll = 'scrolling-stop';
});
document.addEventListener('touchend', () => {
this.marqueeScroll = 'scrolling';
});
}
ngOnDestroy() {
deleteKeyFrame('notice_bar_animation_cls');
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NoticeBarComponent, deps: [{ token: i1.IconHandler }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: NoticeBarComponent, selector: "NoticeBar, nzm-notice-bar", inputs: { option: "option" }, outputs: { onClick: "onClick" }, providers: [IconHandler], ngImport: i0, template: "<div role=\"alert\" *ngIf=\"visiable\" class=\"am-notice-bar\" (click)=\"click()\">\n <div *ngIf=\"option.icon !== null\" class=\"am-notice-bar-icon\">\n <ng-template [ngTemplateOutlet]=\"option.icon || voice\"></ng-template>\n </div>\n <div class=\"am-notice-bar-content\">\n <div class=\"marquee\">\n <div [ngClass]=\"marqueeScroll\" [ngStyle]=\"style\">\n <span>{{ option.content }}</span>\n <span>{{ option.content }}</span>\n </div>\n </div>\n </div>\n <div role=\"button\" *ngIf=\"option.mode && option.action !== null\" class=\"am-notice-bar-operation\">\n <ng-template *ngIf=\"option.mode === 'closable'\" [ngTemplateOutlet]=\"option.action || cross\"></ng-template>\n <ng-template *ngIf=\"option.mode === 'link'\" [ngTemplateOutlet]=\"option.action || right\"></ng-template>\n </div>\n</div>\n\n<ng-template #voice>\n <Icon [type]=\"'voice'\" [size]=\"'xxs'\"></Icon>\n</ng-template>\n<ng-template #cross>\n <Icon [type]=\"'cross'\" [size]=\"'md'\"></Icon>\n</ng-template>\n<ng-template #right>\n <Icon [type]=\"'right'\" [size]=\"'md'\"></Icon>\n</ng-template>\n", dependencies: [{ kind: "component", type: i2.IconComponent, selector: "Icon, nzm-icon", inputs: ["color", "type", "src", "size"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NoticeBarComponent, decorators: [{
type: Component,
args: [{ selector: 'NoticeBar, nzm-notice-bar', providers: [IconHandler], template: "<div role=\"alert\" *ngIf=\"visiable\" class=\"am-notice-bar\" (click)=\"click()\">\n <div *ngIf=\"option.icon !== null\" class=\"am-notice-bar-icon\">\n <ng-template [ngTemplateOutlet]=\"option.icon || voice\"></ng-template>\n </div>\n <div class=\"am-notice-bar-content\">\n <div class=\"marquee\">\n <div [ngClass]=\"marqueeScroll\" [ngStyle]=\"style\">\n <span>{{ option.content }}</span>\n <span>{{ option.content }}</span>\n </div>\n </div>\n </div>\n <div role=\"button\" *ngIf=\"option.mode && option.action !== null\" class=\"am-notice-bar-operation\">\n <ng-template *ngIf=\"option.mode === 'closable'\" [ngTemplateOutlet]=\"option.action || cross\"></ng-template>\n <ng-template *ngIf=\"option.mode === 'link'\" [ngTemplateOutlet]=\"option.action || right\"></ng-template>\n </div>\n</div>\n\n<ng-template #voice>\n <Icon [type]=\"'voice'\" [size]=\"'xxs'\"></Icon>\n</ng-template>\n<ng-template #cross>\n <Icon [type]=\"'cross'\" [size]=\"'md'\"></Icon>\n</ng-template>\n<ng-template #right>\n <Icon [type]=\"'right'\" [size]=\"'md'\"></Icon>\n</ng-template>\n" }]
}], ctorParameters: () => [{ type: i1.IconHandler }], propDecorators: { option: [{
type: Input
}], onClick: [{
type: Output
}] } });
class NoticeBarModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NoticeBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: NoticeBarModule, declarations: [NoticeBarComponent], imports: [IconModule, CommonModule, FormsModule], exports: [NoticeBarComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NoticeBarModule, imports: [IconModule, CommonModule, FormsModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: NoticeBarModule, decorators: [{
type: NgModule,
args: [{
imports: [IconModule, CommonModule, FormsModule],
declarations: [NoticeBarComponent],
exports: [NoticeBarComponent],
providers: []
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { NoticeBarComponent, NoticeBarModule };
//# sourceMappingURL=ng-zorro-antd-mobile-notice-bar.mjs.map