Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import {
- Directive,
- ElementRef,
- Renderer2,
- HostListener,
- AfterViewInit
- } from '@angular/core';
- @Directive({
- selector: '[appSlider]'
- })
- export class SliderDirective implements AfterViewInit {
- filterItems: HTMLCollectionOf<HTMLElement>;
- performanceBlocks: HTMLCollectionOf<HTMLElement>;
- performanceTitle: HTMLCollectionOf<HTMLElement>;
- lastPerformanceIndex: number;
- performanceIndex = 0;
- performanceBlocksWidth = 0;
- performanceTitlesWidth = 0;
- constructor(
- private element: ElementRef,
- private renderer: Renderer2) { }
- ngAfterViewInit() {
- this.filterItems = (document.getElementsByClassName('arrow') as HTMLCollectionOf<HTMLElement>);
- this.performanceBlocks = (document.getElementsByClassName('performance') as HTMLCollectionOf<HTMLElement>);
- this.performanceTitle = (document.getElementsByClassName('table-title') as HTMLCollectionOf<HTMLElement>);
- this.lastPerformanceIndex = this.performanceBlocks.length - 1;
- for (let i = 0; i < this.performanceBlocks.length; i++) {
- this.performanceBlocksWidth += this.performanceBlocks[i].offsetWidth;
- }
- for (let i = 0; i < this.performanceTitle.length; i++) {
- this.performanceTitlesWidth += this.performanceTitle[i].offsetWidth;
- }
- }
- @HostListener('click') onclick() {
- const e = this.performanceBlocks[0];
- const t = this.performanceTitle[0];
- const target = this.element.nativeElement.attributes['data-target'].value;
- if (target === 'next') {
- if (this.performanceIndex === this.lastPerformanceIndex) {
- this.renderer.setStyle(e, 'margin-left', 0);
- this.renderer.setStyle(t, 'margin-left', 0);
- this.performanceIndex = 0;
- } else {
- this.performanceIndex++;
- this.renderer.setStyle(e, 'margin-left', '-' + e.offsetWidth * this.performanceIndex + 'px');
- this.renderer.setStyle(t, 'margin-left', '-' + t.offsetWidth * this.performanceIndex + 'px');
- }
- } else if (target === 'prev') {
- if (this.performanceIndex === 0) {
- this.performanceIndex = this.lastPerformanceIndex;
- this.renderer.setStyle(e, 'margin-left', '-' + (this.performanceBlocksWidth - e.offsetWidth) + 'px');
- this.renderer.setStyle(t, 'margin-left', '-' + (this.performanceBlocksWidth - t.offsetWidth) + 'px');
- } else {
- console.log(e['style'].marginLeft)
- console.log(t['style'].marginLeft)
- console.log(typeof (parseInt(t['style'].marginLeft)))
- this.renderer.setStyle(e, 'margin-left', parseInt(e['style'].marginLeft) + e.offsetWidth + 'px');
- this.renderer.setStyle(t, 'margin-left', parseInt(t['style'].marginLeft) + e.offsetWidth + 'px');
- this.performanceIndex--;
- }
- }
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement