UNPKG

ng-marquee-improved

Version:

Angular 7/8 CSS-based Scrolling Marquee

51 lines 4.68 kB
/** * @fileoverview added by tsickle * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ import { Component, ChangeDetectionStrategy, Input } from "@angular/core"; export class NgMarqueeComponent { constructor() { } /** * @return {?} */ updateDuration() { if (!this.duration) { return; } this.animationElem.style.animationDuration = `${this.duration}s`; } /** * @return {?} */ ngOnInit() { } /** * @return {?} */ ngAfterViewInit() { this.animationElem = (/** @type {?} */ (document.querySelector(`.ng-marquee-wrapper#${this.marqueeId} > div`))); this.updateDuration(); } } NgMarqueeComponent.decorators = [ { type: Component, args: [{ selector: "ng-marquee", template: "<div class=\"ng-marquee-wrapper\" id=\"{{ marqueeId }}\">\n <div>\n <ng-content></ng-content>\n </div>\n</div>\n", changeDetection: ChangeDetectionStrategy.OnPush, styles: [".ng-marquee-wrapper{overflow:hidden;position:relative}.ng-marquee-wrapper>div{height:100%;display:inline-block;margin:0;padding-left:100%;-webkit-animation:20s linear infinite marqueeAnimation;animation:20s linear infinite marqueeAnimation;white-space:nowrap}.ng-marquee-wrapper:hover>div{-webkit-animation-play-state:paused;animation-play-state:paused}@-webkit-keyframes marqueeAnimation{0%{-webkit-transform:translateX(0);transform:translateX(0)}100%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes marqueeAnimation{0%{-webkit-transform:translateX(0);transform:translateX(0)}100%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@media (max-width:500px){.ng-marquee-wrapper>div{width:100%;height:100%;margin:0;-webkit-transform:translateX(100%);transform:translateX(100%);-webkit-animation:9s linear 1s infinite marqueeAnimation;animation:9s linear 1s infinite marqueeAnimation;white-space:nowrap}}"] }] } ]; /** @nocollapse */ NgMarqueeComponent.ctorParameters = () => []; NgMarqueeComponent.propDecorators = { duration: [{ type: Input }], marqueeId: [{ type: Input }] }; if (false) { /** @type {?} */ NgMarqueeComponent.prototype.duration; /** @type {?} */ NgMarqueeComponent.prototype.marqueeId; /** @type {?} */ NgMarqueeComponent.prototype.animationElem; } //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmctbWFycXVlZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9uZy1tYXJxdWVlLWltcHJvdmVkLyIsInNvdXJjZXMiOlsibGliL25nLW1hcnF1ZWUvbmctbWFycXVlZS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFDTCxTQUFTLEVBRVQsdUJBQXVCLEVBQ3ZCLEtBQUssRUFFTixNQUFNLGVBQWUsQ0FBQztBQVF2QixNQUFNLE9BQU8sa0JBQWtCO0lBSzdCLGdCQUFlLENBQUM7Ozs7SUFFaEIsY0FBYztRQUNaLElBQUksQ0FBQyxJQUFJLENBQUMsUUFBUSxFQUFFO1lBQ2xCLE9BQU87U0FDUjtRQUNELElBQUksQ0FBQyxhQUFhLENBQUMsS0FBSyxDQUFDLGlCQUFpQixHQUFHLEdBQUcsSUFBSSxDQUFDLFFBQVEsR0FBRyxDQUFDO0lBQ25FLENBQUM7Ozs7SUFFRCxRQUFRLEtBQUksQ0FBQzs7OztJQUNiLGVBQWU7UUFDYixJQUFJLENBQUMsYUFBYSxHQUFHLG1CQUFBLFFBQVEsQ0FBQyxhQUFhLENBQ3pDLHVCQUF1QixJQUFJLENBQUMsU0FBUyxRQUFRLENBQzlDLEVBQWtCLENBQUM7UUFDcEIsSUFBSSxDQUFDLGNBQWMsRUFBRSxDQUFDO0lBQ3hCLENBQUM7OztZQTFCRixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLFlBQVk7Z0JBQ3RCLGlJQUEwQztnQkFFMUMsZUFBZSxFQUFFLHVCQUF1QixDQUFDLE1BQU07O2FBQ2hEOzs7Ozt1QkFFRSxLQUFLO3dCQUNMLEtBQUs7Ozs7SUFETixzQ0FBbUM7O0lBQ25DLHVDQUEyQjs7SUFDM0IsMkNBQThCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ29tcG9uZW50LFxuICBPbkluaXQsXG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBJbnB1dCxcbiAgQWZ0ZXJWaWV3SW5pdFxufSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6IFwibmctbWFycXVlZVwiLFxuICB0ZW1wbGF0ZVVybDogXCIuL25nLW1hcnF1ZWUuY29tcG9uZW50Lmh0bWxcIixcbiAgc3R5bGVVcmxzOiBbXCIuL25nLW1hcnF1ZWUuY29tcG9uZW50LmNzc1wiXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2hcbn0pXG5leHBvcnQgY2xhc3MgTmdNYXJxdWVlQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcbiAgQElucHV0KCkgZHVyYXRpb246IHN0cmluZyB8IG51bWJlcjtcbiAgQElucHV0KCkgbWFycXVlZUlkOiBzdHJpbmc7XG4gIGFuaW1hdGlvbkVsZW06IEhUTUxEaXZFbGVtZW50O1xuXG4gIGNvbnN0cnVjdG9yKCkge31cblxuICB1cGRhdGVEdXJhdGlvbigpIHtcbiAgICBpZiAoIXRoaXMuZHVyYXRpb24pIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG4gICAgdGhpcy5hbmltYXRpb25FbGVtLnN0eWxlLmFuaW1hdGlvbkR1cmF0aW9uID0gYCR7dGhpcy5kdXJhdGlvbn1zYDtcbiAgfVxuXG4gIG5nT25Jbml0KCkge31cbiAgbmdBZnRlclZpZXdJbml0KCkge1xuICAgIHRoaXMuYW5pbWF0aW9uRWxlbSA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoXG4gICAgICBgLm5nLW1hcnF1ZWUtd3JhcHBlciMke3RoaXMubWFycXVlZUlkfSA+IGRpdmBcbiAgICApIGFzIEhUTUxEaXZFbGVtZW50O1xuICAgIHRoaXMudXBkYXRlRHVyYXRpb24oKTtcbiAgfVxufVxuIl19