ngx-mzd-timeline
Version:
Minimalist's vertical timeline library for Angular applications.
55 lines • 7.08 kB
JavaScript
import { Component, ContentChildren, Input, ViewEncapsulation } from '@angular/core';
import { MzdTimelineContentComponent } from '../timeline-content/timeline-content.component';
export class MzdTimelineComponent {
constructor() {
this.firstContentSide = 'left';
this.alternateSide = true;
}
ngOnChanges(changes) {
this.updateContent();
}
ngOnInit() { }
ngAfterViewInit() {
this.updateContent();
}
updateContent() {
if (this.contents) {
if (this.alternateSide) {
if (this.firstContentSide === 'left') {
this.contents.forEach((content, index) => {
content.left = (index % 2 === 0);
content.right = (index % 2 !== 0);
});
}
else {
this.contents.forEach((content, index) => {
content.left = (index % 2 !== 0);
content.right = (index % 2 === 0);
});
}
}
else {
this.contents.forEach(content => {
content.left = this.firstContentSide === 'left';
content.right = this.firstContentSide === 'right';
});
}
this.contents.forEach(content => content.noAlternate = !this.alternateSide);
}
}
}
MzdTimelineComponent.decorators = [
{ type: Component, args: [{
selector: 'mzd-timeline',
template: "<div\n class=\"mzd-timeline-line\"\n [ngClass]=\"{\n 'no-alternate': !alternateSide,\n left: firstContentSide !== 'left',\n right: firstContentSide !== 'right'\n }\"\n></div>\n<ng-content></ng-content>\n",
encapsulation: ViewEncapsulation.None,
styles: ["*{box-sizing:border-box}mzd-timeline{display:block;padding:50px 0;position:relative;width:100%}mzd-timeline .mzd-timeline-line{background:grey;height:100%;left:50%;position:absolute;right:auto;top:0;width:1px}mzd-timeline .mzd-timeline-line.no-alternate.left{left:30px;right:auto}mzd-timeline .mzd-timeline-line.no-alternate.right{left:auto;right:30px}@media screen and (max-width:599px){mzd-timeline .mzd-timeline-line{left:30px;right:auto}}"]
},] }
];
MzdTimelineComponent.ctorParameters = () => [];
MzdTimelineComponent.propDecorators = {
firstContentSide: [{ type: Input }],
alternateSide: [{ type: Input }],
contents: [{ type: ContentChildren, args: [MzdTimelineContentComponent,] }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGltZWxpbmUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LW16ZC10aW1lbGluZS9zcmMvbGliL2NvbXBvbmVudHMvdGltZWxpbmUvdGltZWxpbmUuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDVSxTQUFTLEVBQUUsZUFBZSxFQUFFLEtBQUssRUFDaEQsaUJBQWlCLEVBQ2xCLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSwyQkFBMkIsRUFBRSxNQUFNLGdEQUFnRCxDQUFDO0FBUTdGLE1BQU0sT0FBTyxvQkFBb0I7SUFNL0I7UUFKUyxxQkFBZ0IsR0FBcUIsTUFBTSxDQUFDO1FBQzVDLGtCQUFhLEdBQVksSUFBSSxDQUFDO0lBR3ZCLENBQUM7SUFFakIsV0FBVyxDQUFDLE9BQXNCO1FBQ2hDLElBQUksQ0FBQyxhQUFhLEVBQUUsQ0FBQztJQUN2QixDQUFDO0lBRUQsUUFBUSxLQUFXLENBQUM7SUFFcEIsZUFBZTtRQUNiLElBQUksQ0FBQyxhQUFhLEVBQUUsQ0FBQztJQUN2QixDQUFDO0lBRU8sYUFBYTtRQUNuQixJQUFJLElBQUksQ0FBQyxRQUFRLEVBQUU7WUFDakIsSUFBSSxJQUFJLENBQUMsYUFBYSxFQUFFO2dCQUN0QixJQUFJLElBQUksQ0FBQyxnQkFBZ0IsS0FBSyxNQUFNLEVBQUU7b0JBQ3BDLElBQUksQ0FBQyxRQUFRLENBQUMsT0FBTyxDQUFDLENBQUMsT0FBTyxFQUFFLEtBQUssRUFBRSxFQUFFO3dCQUN2QyxPQUFPLENBQUMsSUFBSSxHQUFHLENBQUMsS0FBSyxHQUFHLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQzt3QkFDakMsT0FBTyxDQUFDLEtBQUssR0FBRyxDQUFDLEtBQUssR0FBRyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUM7b0JBQ3BDLENBQUMsQ0FBQyxDQUFDO2lCQUNKO3FCQUFNO29CQUNMLElBQUksQ0FBQyxRQUFRLENBQUMsT0FBTyxDQUFDLENBQUMsT0FBTyxFQUFFLEtBQUssRUFBRSxFQUFFO3dCQUN2QyxPQUFPLENBQUMsSUFBSSxHQUFHLENBQUMsS0FBSyxHQUFHLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQzt3QkFDakMsT0FBTyxDQUFDLEtBQUssR0FBRyxDQUFDLEtBQUssR0FBRyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUM7b0JBQ3BDLENBQUMsQ0FBQyxDQUFDO2lCQUNKO2FBQ0Y7aUJBQU07Z0JBQ0wsSUFBSSxDQUFDLFFBQVEsQ0FBQyxPQUFPLENBQUMsT0FBTyxDQUFDLEVBQUU7b0JBQzlCLE9BQU8sQ0FBQyxJQUFJLEdBQUcsSUFBSSxDQUFDLGdCQUFnQixLQUFLLE1BQU0sQ0FBQztvQkFDaEQsT0FBTyxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUMsZ0JBQWdCLEtBQUssT0FBTyxDQUFDO2dCQUNwRCxDQUFDLENBQUMsQ0FBQzthQUNKO1lBQ0QsSUFBSSxDQUFDLFFBQVEsQ0FBQyxPQUFPLENBQUMsT0FBTyxDQUFDLEVBQUUsQ0FBQyxPQUFPLENBQUMsV0FBVyxHQUFHLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxDQUFDO1NBQzdFO0lBQ0gsQ0FBQzs7O1lBOUNGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsY0FBYztnQkFDeEIsbU9BQXdDO2dCQUV4QyxhQUFhLEVBQUUsaUJBQWlCLENBQUMsSUFBSTs7YUFDdEM7Ozs7K0JBR0UsS0FBSzs0QkFDTCxLQUFLO3VCQUNMLGVBQWUsU0FBQywyQkFBMkIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBBZnRlclZpZXdJbml0LCBDb21wb25lbnQsIENvbnRlbnRDaGlsZHJlbiwgSW5wdXQsIE9uQ2hhbmdlcywgT25Jbml0LCBRdWVyeUxpc3QsIFNpbXBsZUNoYW5nZXMsXG4gIFZpZXdFbmNhcHN1bGF0aW9uXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTXpkVGltZWxpbmVDb250ZW50Q29tcG9uZW50IH0gZnJvbSAnLi4vdGltZWxpbmUtY29udGVudC90aW1lbGluZS1jb250ZW50LmNvbXBvbmVudCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ216ZC10aW1lbGluZScsXG4gIHRlbXBsYXRlVXJsOiAnLi90aW1lbGluZS5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3RpbWVsaW5lLmNvbXBvbmVudC5zY3NzJ10sXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmVcbn0pXG5leHBvcnQgY2xhc3MgTXpkVGltZWxpbmVDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIEFmdGVyVmlld0luaXQsIE9uQ2hhbmdlcyB7XG5cbiAgQElucHV0KCkgZmlyc3RDb250ZW50U2lkZTogJ2xlZnQnIHwgJ3JpZ2h0JyA9ICdsZWZ0JztcbiAgQElucHV0KCkgYWx0ZXJuYXRlU2lkZTogYm9vbGVhbiA9IHRydWU7XG4gIEBDb250ZW50Q2hpbGRyZW4oTXpkVGltZWxpbmVDb250ZW50Q29tcG9uZW50KSBjb250ZW50czogUXVlcnlMaXN0PE16ZFRpbWVsaW5lQ29udGVudENvbXBvbmVudD47XG5cbiAgY29uc3RydWN0b3IoKSB7IH1cblxuICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKTogdm9pZCB7XG4gICAgdGhpcy51cGRhdGVDb250ZW50KCk7XG4gIH1cblxuICBuZ09uSW5pdCgpOiB2b2lkIHsgfVxuXG4gIG5nQWZ0ZXJWaWV3SW5pdCgpOiB2b2lkIHtcbiAgICB0aGlzLnVwZGF0ZUNvbnRlbnQoKTtcbiAgfVxuXG4gIHByaXZhdGUgdXBkYXRlQ29udGVudCgpOiB2b2lkIHtcbiAgICBpZiAodGhpcy5jb250ZW50cykge1xuICAgICAgaWYgKHRoaXMuYWx0ZXJuYXRlU2lkZSkge1xuICAgICAgICBpZiAodGhpcy5maXJzdENvbnRlbnRTaWRlID09PSAnbGVmdCcpIHtcbiAgICAgICAgICB0aGlzLmNvbnRlbnRzLmZvckVhY2goKGNvbnRlbnQsIGluZGV4KSA9PiB7XG4gICAgICAgICAgICBjb250ZW50LmxlZnQgPSAoaW5kZXggJSAyID09PSAwKTtcbiAgICAgICAgICAgIGNvbnRlbnQucmlnaHQgPSAoaW5kZXggJSAyICE9PSAwKTtcbiAgICAgICAgICB9KTtcbiAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICB0aGlzLmNvbnRlbnRzLmZvckVhY2goKGNvbnRlbnQsIGluZGV4KSA9PiB7XG4gICAgICAgICAgICBjb250ZW50LmxlZnQgPSAoaW5kZXggJSAyICE9PSAwKTtcbiAgICAgICAgICAgIGNvbnRlbnQucmlnaHQgPSAoaW5kZXggJSAyID09PSAwKTtcbiAgICAgICAgICB9KTtcbiAgICAgICAgfVxuICAgICAgfSBlbHNlIHtcbiAgICAgICAgdGhpcy5jb250ZW50cy5mb3JFYWNoKGNvbnRlbnQgPT4ge1xuICAgICAgICAgIGNvbnRlbnQubGVmdCA9IHRoaXMuZmlyc3RDb250ZW50U2lkZSA9PT0gJ2xlZnQnO1xuICAgICAgICAgIGNvbnRlbnQucmlnaHQgPSB0aGlzLmZpcnN0Q29udGVudFNpZGUgPT09ICdyaWdodCc7XG4gICAgICAgIH0pO1xuICAgICAgfVxuICAgICAgdGhpcy5jb250ZW50cy5mb3JFYWNoKGNvbnRlbnQgPT4gY29udGVudC5ub0FsdGVybmF0ZSA9ICF0aGlzLmFsdGVybmF0ZVNpZGUpO1xuICAgIH1cbiAgfVxuXG59XG4iXX0=