src/app/middle-content/middle-content.component.ts
The middle-content component
| selector | app-middle-content |
| styleUrls | middle-content.component.scss |
| templateUrl | ./middle-content.component.html |
Properties |
Methods |
|
constructor(apiService: ApiService)
|
||||||
|
Parameters :
|
| Public advertisingInViewHandler | ||||||
advertisingInViewHandler(event: any)
|
||||||
|
Detect if adversting block in viewport
Parameters :
Returns :
void
void |
| Public filterInViewHandler | ||||||
filterInViewHandler(event: any)
|
||||||
|
Detect if filter block in viewport
Parameters :
Returns :
void
void |
| Private getAccordion |
getAccordion()
|
|
Api method to get accordion data
Returns :
Subscription
Subscription |
| Private getBrands |
getBrands()
|
|
Api method to get brands
Returns :
Subscription
Subscription |
| Private getColors |
getColors()
|
|
Api method to get colors
Returns :
Subscription
Subscription |
| Private getQbox |
getQbox()
|
|
Api method to get qBox
Returns :
Subscription
Subscription |
| Public getQboxRate | ||||||
getQboxRate(length: number)
|
||||||
|
Calculate rating for single qbox
Parameters :
Returns :
Array<number>
Array |
| Public infoInViewHandler | ||||||
infoInViewHandler(event: any)
|
||||||
|
Detect if info block in viewport
Parameters :
Returns :
void
void |
| Public newsLeftInViewHandler | ||||||
newsLeftInViewHandler(event: any)
|
||||||
|
Detect if news left block in viewport
Parameters :
Returns :
void
void |
| Public newsRightInViewHandler | ||||||
newsRightInViewHandler(event: any)
|
||||||
|
Detect if news right block in viewport
Parameters :
Returns :
void
void |
| ngOnInit |
ngOnInit()
|
|
Lifecycle hook that is called after data-bound properties of a directive are initialized. Initialize variables, fetch data, set slider config.
Returns :
void
void |
| Public quoteInViewHandler | ||||||
quoteInViewHandler(event: any)
|
||||||
|
Detect if quote block in viewport
Parameters :
Returns :
void
void |
| accordionInfo |
accordionInfo:
|
Type : Accordion[]
|
Default value : []
|
| activeColor |
activeColor:
|
Type : String
|
| advertisingInView |
advertisingInView:
|
Type : boolean
|
| brands |
brands:
|
Type : Brand[]
|
Default value : []
|
| colors |
colors:
|
Type : Color[]
|
Default value : []
|
| filterInView |
filterInView:
|
Type : boolean
|
| infoInView |
infoInView:
|
Type : boolean
|
| newsLeftInView |
newsLeftInView:
|
Type : boolean
|
| newsRightInView |
newsRightInView:
|
Type : boolean
|
| qBoxes |
qBoxes:
|
Type : Qbox[]
|
Default value : []
|
| quoteInView |
quoteInView:
|
Type : boolean
|
| quoteSlideConfig |
quoteSlideConfig:
|
Type : any
|
| slideConfig |
slideConfig:
|
Type : any
|
import { Component, OnInit } from '@angular/core';
import {ApiService} from '../services/api.service';
import {Color} from '../models/color';
import {Brand} from '../models/brand';
import {Qbox} from '../models/qbox';
import {Accordion} from '../models/accordion';
import {Subscription} from 'rxjs/Subscription';
/**
* The middle-content component
*/
@Component({
selector: 'app-middle-content',
templateUrl: './middle-content.component.html',
styleUrls: ['./middle-content.component.scss']
})
/**
* @class MiddleContentComponent
* @implements OnInit
*/
export class MiddleContentComponent implements OnInit {
colors: Color[] = [];
brands: Brand[] = [];
qBoxes: Qbox[] = [];
accordionInfo: Accordion[] = [];
activeColor: String;
infoInView: boolean;
filterInView: boolean;
advertisingInView: boolean;
quoteInView: boolean;
newsLeftInView: boolean;
newsRightInView: boolean;
slideConfig: any;
quoteSlideConfig: any;
/**
* @constructor
* @param {ApiService} apiService
*/
constructor(private apiService: ApiService) { }
/**
* Lifecycle hook that is called after data-bound
* properties of a directive are initialized.
* Initialize variables, fetch data, set slider config.
* @returns void
*/
ngOnInit(): void {
this.getColors();
this.getBrands();
this.getQbox();
this.getAccordion();
this.activeColor = '';
this.infoInView = false;
this.filterInView = false;
this.advertisingInView = false;
this.quoteInView = false;
this.newsLeftInView = false;
this.newsRightInView = false;
this.slideConfig = {'slidesToShow': 5, 'slidesToScroll': 1, 'autoplay': true};
this.quoteSlideConfig = {'slidesToShow': 3, 'slidesToScroll': 1, 'autoplay': true};
}
/**
* Api method to get colors
* @returns Subscription
*/
private getColors(): Subscription {
return this.apiService.getColors().subscribe((color) => {
this.colors = color as Color[];
});
}
/**
* Api method to get brands
* @returns Subscription
*/
private getBrands(): Subscription {
return this.apiService.getBrands().subscribe((brand) => {
this.brands = brand as Brand[];
});
}
/**
* Api method to get qBox
* @returns Subscription
*/
private getQbox(): Subscription {
return this.apiService.getQboxes().subscribe((box) => {
this.qBoxes = box as Qbox[];
});
}
/**
* Api method to get accordion data
* @returns Subscription
*/
private getAccordion(): Subscription {
return this.apiService.getAccordion().subscribe((accordion) => {
this.accordionInfo = accordion as Accordion[];
});
}
/**
* Calculate rating for single qbox
* @returns Array<number>
*/
public getQboxRate(length: number): Array<number> {
return Array(length).fill(0).map((x, i) => i);
}
/**
* Detect if info block in viewport
* @returns void
*/
public infoInViewHandler(event: any): void {
this.infoInView = event.value;
}
/**
* Detect if filter block in viewport
* @returns void
*/
public filterInViewHandler(event: any): void {
this.filterInView = event.value;
}
/**
* Detect if adversting block in viewport
* @returns void
*/
public advertisingInViewHandler(event: any): void {
this.advertisingInView = event.value;
}
/**
* Detect if quote block in viewport
* @returns void
*/
public quoteInViewHandler(event: any): void {
this.quoteInView = event.value;
}
/**
* Detect if news left block in viewport
* @returns void
*/
public newsLeftInViewHandler(event: any): void {
this.newsLeftInView = event.value;
}
/**
* Detect if news right block in viewport
* @returns void
*/
public newsRightInViewHandler(event: any): void {
this.newsRightInView = event.value;
}
}
<div class="middle-content">
<div class="container">
<div class="middle-content__info">
<div class="row">
<div class="col-12 col-md-6">
<p>
What are the requirements to web pages and sites that are designed and laid out in a network?
First, we must adhere to web standards. Our web pages have to be made by all the rules that have been
developed and adopted as mandatory to use.
<span><a href="javascript:">Request a quote</a></span>
</p>
<p>
We understand the importance of innovation and
professionalism and work with the best people to achieve this.
</p>
</div>
<div class="col-12 col-md-6">
<div class="middle-content__info__wrapper animated">
<div class="row">
<div class="col-12 order-2 order-md-first col-md-3">
<div class="middle-content__info__wrapper__image">
<img src="../../assets/chrome.png">
</div>
</div>
<div class="col-12 order-first order-md-2 col-md-9">
<div class="middle-content__info__wrapper__text">
<h4>Flexibility and Cross-platform</h4>
<p>Web pages should appear the same on all devices. It creates a kind of universality.</p>
<a href="javascript:">Read more</a>
</div>
</div>
</div>
</div>
<div>
<div class="row">
<div class="col-12 order-2 order-md-first col-md-3">
<div class="middle-content__info__wrapper__image">
<img src="../../assets/firefox.png">
</div>
</div>
<div class="col-12 order-first order-md-2 col-md-9">
<div class="middle-content__info__wrapper__text">
<h4>User-friendly content</h4>
<p>We have to take care of the content that will be placed on the pages .
It must be structured to have a certain type ( single design ), and be user-friendly.
</p>
<a href="javascript:">Read more</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="middle-content__introduction">
<div class="row animated"
[ngClass]="{'fadeInLeft': infoInView, 'fadeOutRight': !infoInView}"
in-viewport (inViewportAction)="infoInViewHandler($event)">
<div class="col-12 col-sm-6 col-md-4">
<div class="middle-content__introduction__item"
style="background: url('../../assets/it1.jpg'); background-position: center; background-size: cover">
</div>
<h3>Code</h3>
<span>Write once run anywhere</span>
</div>
<div class="col-12 col-sm-6 col-md-4">
<div class="middle-content__introduction__item"
style="background: url('../../assets/it2.jpg'); background-position: center; background-size: cover">
</div>
<h3>Tools</h3>
<span>Biggest community</span>
</div>
<div class="col-12 col-sm-6 col-md-4">
<div class="middle-content__introduction__item"
style="background: url('../../assets/it3.jpg'); background-position: center; background-size: cover">
</div>
<h3>Frameworks</h3>
<span>Supporting structure around which something can be built</span>
</div>
</div>
</div>
</div>
<div class="middle-content__filter">
<div class="container-fluid">
<div class="container animated"
[ngClass]="{'fadeInRight': filterInView, 'fadeOutLeft': !filterInView}"
in-viewport (inViewportAction)="filterInViewHandler($event)">
<div class="middle-content__filter__header">
<div class="row">
<div class="col-4">
<h1>Image filter</h1>
<span>:::::::::::::::::::::::::::::::::::::::::::::::</span>
</div>
<div class="col-8">
<ul class="list-inline">
<li [ngClass]="{'active': activeColor === ''}">
<a href="javascript:" (click)="activeColor = ''">Display all</a>
</li>
<li [ngClass]="{'active': activeColor === 'red'}">
<a href="javascript:" (click)="activeColor = 'red'">Red</a>
</li>
<li [ngClass]="{'active': activeColor === 'blue'}">
<a href="javascript:" (click)="activeColor = 'blue'">Blue</a>
</li>
<li [ngClass]="{'active': activeColor === 'cold'}">
<a href="javascript:" (click)="activeColor = 'cold'">Cold</a>
</li>
<li [ngClass]="{'active': activeColor === 'hot'}">
<a href="javascript:" (click)="activeColor = 'hot'">Hot</a>
</li>
</ul>
</div>
</div>
</div>
<div class="middle-content__filter__image-wrapper">
<ul class="row list-inline">
<li class="col-12 col-md-3" *ngFor="let col of colors | imageFilter: activeColor">
<div [ngStyle]="{'background': 'url(' + col.imageSrc + ')', 'background-size':'cover'}"></div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="middle-content__advertising animated"
[ngClass]="{'fadeIn': advertisingInView, 'fadeOut': !advertisingInView}"
in-viewport (inViewportAction)="advertisingInViewHandler($event)"
#carouselRoot>
<div class="container">
<div class="row">
<div class="d-none d-md-block col-md-3">
<div class="middle-content__advertising__head">
<h3>Companies carousel</h3>
</div>
</div>
<div class="col-12 col-md-9">
<ngx-slick class="carousel companies__carousel" #slickModal="slick-modal" [config]="slideConfig">
<div ngxSlickItem *ngFor="let slide of brands" class="slide">
<img src="{{ slide.src }}" alt="" width="80%">
</div>
</ngx-slick>
</div>
</div>
</div>
</div>
<div class="middle-content__quote animated"
[ngClass]="{'fadeIn': quoteInView, 'fadeOut': !quoteInView}"
in-viewport (inViewportAction)="quoteInViewHandler($event)">
<div class="container">
<div>
<ngx-slick class="carousel" #slickModal="slick-modal" [config]="quoteSlideConfig">
<div ngxSlickItem *ngFor="let slide of qBoxes" class="slide">
<div class="middle-content__quote__box">
<span>
<i class="material-icons">reply</i>
</span>
<h3>{{slide.header}}</h3>
<p>{{slide.text}}</p>
<div class="middle-content__quote__box__outer">
<h3>Kiskin Vladislav
<span>Technician Engineer</span>
</h3>
<ul class="list-inline">
<li *ngFor="let rating of getQboxRate(slide.rating)" class="list-inline-item">
<i class="material-icons">star</i>
</li>
</ul>
</div>
</div>
</div>
</ngx-slick>
</div>
</div>
</div>
<div class="middle-content__news">
<div class="container">
<div class="row">
<div class="col-12 col-md-6 animated"
[ngClass]="{'fadeInLeft': newsLeftInView, 'fadeOutLeft': !newsLeftInView}"
in-viewport (inViewportAction)="newsLeftInViewHandler($event)">
<h1>Simple accordion panels</h1>
<span>::::::::::::::::::::::::::::::::::::::::::::::::::::::::</span>
<div *ngIf="accordionInfo[0]">
<app-accordion>
<app-panel *ngFor="let panel of accordionInfo" title="{{panel.header}}">{{panel.text}}</app-panel>
</app-accordion>
</div>
</div>
<div class="col-12 col-md-6 animated"
[ngClass]="{'fadeInRight': newsRightInView, 'fadeOutRight': !newsRightInView}"
in-viewport (inViewportAction)="newsRightInViewHandler($event)">
<h1>Latest news</h1>
<span>::::::::::::::::::::::::::::::</span>
<div class="middle-content__news__block">
<div class="middle-content__news__block__image_wrapper">
<img src="../../assets/news1.jpg">
</div>
<div class="middle-content__news__block__text_wrapper">
<a href="javascript:">
First News Block Header
</a>
<span>March 29, 2018 /</span>
<span>Publisher General</span>
<p>This is text for the first news block.</p>
<a>Read More</a>
</div>
</div>
<div class="middle-content__news__block">
<div class="middle-content__news__block__image_wrapper">
<img src="../../assets/news2.jpg">
</div>
<div class="middle-content__news__block__text_wrapper">
<a href="javascript:">
Second News Block Header
</a>
<span>April 14, 2018 /</span>
<span>Publisher General</span>
<p>This is text for the first news block.</p>
<a>Read More</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>