frfr

import {
  Component,
  ViewChild,
  ElementRef,
  OnDestroy,
  OnInit,
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  NgZone
} from '@angular/core';
import { ApiService } from '../../../api/api.service';

@Component({
selector: 'app-live-offers-bar',
templateUrl: './live-offers-bar.component.html',
styleUrls: ['./live-offers-bar.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class LiveOffersBarComponent implements OnInit, OnDestroy {
PAN_ACTION = {
  LEFT: 'panleft',
  RIGHT: 'panright'
};

list: Array<{
  platform: string,
  slug: string,
  name: string,
  price: number,
  discount: number,
}> = [];

updated = false;

@ViewChild('ticker') ticker: ElementRef;
@ViewChild('container') container: ElementRef;
style: any;

// ticker: ElementRef;

offset = 0;

interval: any;

transform: any;

constructor(private apiService: ApiService,
            private changeDetectorRef: ChangeDetectorRef,
            private zone: NgZone) {
  this.changeDetectorRef = changeDetectorRef;
  this.changeDetectorRef.detach();
  console.log(this.ticker)
}

ngOnInit() {
  this.loadList();
}

ngOnDestroy() {
  this.zone.runOutsideAngular(() => {
    cancelAnimationFrame(this.interval);
  });
}

loadList() {
  this.updated = true;

  this.apiService.getLatestOffers(30).subscribe((data: any) => {
    data = data;




    const list = data.map(item => ({
      platform: item.platformSlug,
      slug: item.slug,
      name: item.name,
      price: item.lowest_price,
      discount: item.official_price > item.lowest_price ? Math.floor(100 - ((item.lowest_price / item.official_price) * 100)) : null,
    })).filter(item => !!item.discount);

    this.list = list;
    this.updated = false;
    this.changeDetectorRef.detectChanges();

    // this.zone.runOutsideAngular(() => {
    // setTimeout(() => this.play(), 50);
    // });

    let sliderWidth = 0;
    let animationWidth = 0;
    const liveTimeOffers = document.getElementsByClassName('live-offers__item') as HTMLCollection;
    const sliderHeight = this.ticker.nativeElement.offsetHeight;
    for (let i = 0; i < liveTimeOffers.length; i++) {
      console.dir((liveTimeOffers[i] as HTMLElement))
       animationWidth += (liveTimeOffers[i] as HTMLElement).offsetWidth;
    }
    console.dir(sliderHeight)
    console.log(animationWidth)
    // if (activeEditions.length > 0) {
    //   for (let i = 0; i < activeEditions.length; i++) {
    //     (activeEditions[i] as HTMLElement).click()
    //  }
    // }
    this.zone.runOutsideAngular(() => {
    const containerWidth = this.container.nativeElement.offsetWidth;

    let slidesVisible = containerWidth / (animationWidth / liveTimeOffers.length);
    slidesVisible = Math.ceil(slidesVisible);
    console.log(slidesVisible)

    const slidesNumber = liveTimeOffers.length;
    const speed = slidesNumber * 5;



    // const elo = Array.from(document.getElementsByClassName('live-offers__item') as HTMLCollection)
    // .slice(0, slidesVisible)
    // console.log(elo)
    // $('>div',container).css({'width':sliderWidth,'height':sliderHeight});

    this.style = {'width': sliderWidth, 'height': sliderHeight};

    // console.log($('>div',container))
    const animation = 'elo'
    const styleElement = document.createElement('style');
    styleElement.type = 'text/css';
    styleElement.innerHTML = '@keyframes ' +
    animation +
    ' { 0% { margin-left: 0px; } 100% { margin-left: -'+
    animationWidth +
    'px; } } '+
    '.first'+
    ' { -webkit-animation: '+
    animation+' '+
    speed+"s linear infinite; -moz-animation: "
    +animation+" "+speed+
    "s linear infinite; -ms-animation: "+animation+
    " "+speed+"s linear infinite; -o-animation: " +
    animation+" "+speed+"s linear infinite; animation: "+
    animation+" "+speed + 's linear infinite; }'
    document.head.appendChild(styleElement);
  // Insert styles to html
  console.dir(liveTimeOffers[0] as HTMLElement)
    // $("<style type='text/css'>@keyframes "+animation+" { 0% { margin-left: 0px; } 100% { margin-left: -"+animationWidth+"px; } } "+$('>div>div:first-of-type',container).selector+" { -webkit-animation: "+animation+" "+speed+"s linear infinite; -moz-animation: "+animation+" "+speed+"s linear infinite; -ms-animation: "+animation+" "+speed+"s linear infinite; -o-animation: "+animation+" "+speed+"s linear infinite; animation: "+animation+" "+speed+"s linear infinite; }</style>");
    })
  });
}

// tick() {
//   const tickerOffsetWidth = this.ticker.nativeElement.offsetWidth;

//   if (!!this.interval) {
//     this.zone.runOutsideAngular(() => {
//       cancelAnimationFrame(this.interval);
//     });
//   }

//   if (tickerOffsetWidth <= 0) {
//     return;
//   }

//   if (this.offset >= tickerOffsetWidth) {
//     this.offset = 0;
//     this.loadList();
//     return;
//   }

//   this.offset++;
//   this.offset = this.offset - 0.4;

//   this.transform = { transform: `translate3d(-${this.offset}px, 0, 0)` };
//   this.changeDetectorRef.detectChanges();

//   // this.zone.runOutsideAngular(() => {
//     this.interval = requestAnimationFrame(() => this.tick());
//   // });
// }

// play() {
//   // this.zone.runOutsideAngular(() => {
//     this.interval = requestAnimationFrame(() => this.tick());
//   // });
// }

// pause() {
//   // this.zone.runOutsideAngular(() => {
//     cancelAnimationFrame(this.interval);
//   // });
// }

// pan(event) {
//   if (event.type === this.PAN_ACTION.RIGHT) {
//     if (this.offset < 0) {
//       this.offset = 0;
//     }
//     this.offset -= 4;
//   }
//   if (event.type === this.PAN_ACTION.LEFT) {
//     this.offset += 4;
//   }
// }

// moved(event) {
//   event.preventDefault();

//   this.zone.runOutsideAngular(() => {
//     cancelAnimationFrame(this.interval);
//   });

//   this.transform = { transform: `translate3d(-${this.offset}px, 0, 0)` };
//   this.changeDetectorRef.detectChanges();
// }

// trackById(index: number, item: { id: number }) {
//   return item.id;
// }
// function initSmoothScrolling(container,animation){
//  /*
// 	* @param {String} container Class or ID of the animation container
// 	* @param {String} animation Name of the animation, e.g. smoothscroll
//   */

// 	const sliderWidth = 0;
// 	const animationWidth = 0;
// 	var sliderHeight = $('>div>div:first-of-type',container).outerHeight(false);

// 	$('>div>div', container).each(function(){
// 		animationWidth += $(this).outerWidth(false);
// 	});

// 	// detect number of visible slides
// 	var slidesVisible = $(container).width() / $('>div>div:first-of-type',container).outerWidth(false);
// 	slidesVisible = Math.ceil(slidesVisible);

//   // count slides to determine animation speed
// 	var slidesNumber = $('>div>div', container).length;
// 	var speed = slidesNumber*2;

// // append the tail
// 	$('>div>div',container).slice(0,slidesVisible).clone().appendTo($('>div',container));

// 	// Detect the slider width with appended tail
// 	$('>div>div', container).each(function(){
// 		sliderWidth += $(this).outerWidth(false);
// 	});

// 	// set slider dimensions
// 	$('>div',container).css({'width':sliderWidth,'height':sliderHeight});

// // Insert styles to html
// 	$("<style type='text/css'>@keyframes "+animation+" { 0% { margin-left: 0px; } 100% { margin-left: -"+animationWidth+"px; } } "+$('>div>div:first-of-type',container).selector+" { -webkit-animation: "+animation+" "+speed+"s linear infinite; -moz-animation: "+animation+" "+speed+"s linear infinite; -ms-animation: "+animation+" "+speed+"s linear infinite; -o-animation: "+animation+" "+speed+"s linear infinite; animation: "+animation+" "+speed+"s linear infinite; }</style>").appendTo("head");

// 	// restart the animation (e.g. for safari & ie)
// 	var cl = $(container).attr("class");
// 	$(container).removeClass(cl).animate({'nothing':null}, 1, function () {
// 		$(this).addClass(cl);
// 	});
// }
}


<div class="live-offers">
  <h5 class="live-offers__label">
    {{ 'live_offers_bar.label' | translate }}
  </h5>
  <div class="live-offers__container"
       [class.live-offers__container--updated]="updated"
       #container
       [ngStyle]="style">
    <ul class="live-offers__list" #ticker>
      <ng-container *ngTemplateOutlet="items"></ng-container>
    </ul>
    <!-- <ul class="live-offers__list" [ngStyle]="transform">
      <ng-container *ngTemplateOutlet="items"></ng-container>
    </ul> -->
  </div>
<div>

<ng-template #items>
  <li class="live-offers__item" *ngFor="let item of list; trackBy: trackById; let first = first" [ngClass]="{'first': first}">
    <div routerLink="/product/{{ item.slug }}"
        class="offer"
     >
      <span class="offer__platform offer__platform--{{item.platform}}"></span>
      <span class="offer__name">{{item.name}}</span>
      <span class="offer__price"> {{ 'live_offers_bar.from' | translate }}&nbsp;<b>{{item.price | exchange }}</b></span>
      <span class="offer__discount">&minus;{{item.discount}}%</span>
    </div>
  </li>
</ng-template>