Tomasz Kula realtomaszkula

realtomaszkula / ng-carousel.ts#autoplay.ts

Last active June 24, 2018 15:25

	@Directive({
	selector: '[carousel]'
	})
	export class CarouselDirective implements OnInit, OnDestroy {
	// ...
	timerId: number \| null = null;

	@Input('carouselAutoplay')
	set autoplay(autoplay: 'on' \| 'off') {
	autoplay === 'on' ? this.setAutoplayTimer() : this.clearAutoplayTimer();

realtomaszkula / ng-carousel.ts#consume-controller.html

Last active June 25, 2018 09:51

	<div *carousel="let image from images; let ctrl = controller">
	<img [src]="image">

	<button (click)="ctrl.prev()">Previous</button>
	<button (click)="ctrl.next()">Next</button>
	</div>

realtomaszkula / ng-carousel.ts#controller.ts

Last active June 24, 2018 14:58

	@Directive({
	selector: '[carousel]'
	})
	export class CarouselDirective implements OnInit {
	context: CarouselContext \| null = null;
	index = 0;

	constructor(
	private tpl: TemplateRef<CarouselContext>,
	private vcr: ViewContainerRef

realtomaszkula / ng-carousel.ts#createEmbeddedView.ts

Last active June 24, 2018 14:52

	@Directive({
	selector: '[carousel]'
	})
	export class CarouselDirective implements OnInit {
	context: CarouselContext \| null = null;

	constructor(
	private tpl: TemplateRef<CarouselContext>,
	private vcr: ViewContainerRef
	) {}

realtomaszkula / ng-carousel.ts#final.ts

Last active June 24, 2018 15:21

	export interface CarouselContext {
	$implicit: string;
	controller: {
	next: () => void;
	prev: () => void;
	};
	}

	@Directive({
	selector: '[carousel]'

realtomaszkula / ng-reactive-sticky-header#throttle-stream.ts

Created June 18, 2018 12:34

realtomaszkula / ng-reactive-sticky-header#is-visible-flag.ts

Last active June 16, 2020 09:45

	@Component({
	selector: 'app-sticky-header',
	template: `<ng-content></ng-content>`,
	styles: [ ... ]
	})
	export class StickyHeaderComponent implements AfterViewInit {
	private isVisible = true;

	ngAfterViewInit() {
	const scroll$ = fromEvent(window, 'scroll').pipe(

realtomaszkula / ng-reactive-sticky-header#pairwise-stream.ts

Last active June 18, 2018 12:49

realtomaszkula / ng-reactive-sticky-header#animation-metadata.ts

Last active June 18, 2018 14:46

	trigger('toggle', [
	state(
	VisibilityState.Hidden,
	style({ opacity: 0, transform: 'translateY(-100%)' })
	),
	state(
	VisibilityState.Visible,
	style({ opacity: 1, transform: 'translateY(0)' })
	),
	transition('* => *', animate('200ms ease-in'))

realtomaszkula / ng-reactive-sticky-header#animation-host-binding.ts

Created June 16, 2018 20:39

	enum VisibilityState {
	Visible = 'visible',
	Hidden = 'hidden'
	}

	@HostBinding('@toggle')
	get toggle(): VisibilityState {
	return this.isVisible ? VisibilityState.Visible : VisibilityState.Hidden;
	}

	const scroll$ = fromEvent(window, 'scroll').pipe(
	throttleTime(10),
	map(() => window.pageYOffset),
	pairwise(),
	);