Skip to content

A
ati
Commit 6f7f32fe by Adarsh K
Options

Merge branch 'master' of https://gitlab.techware.co.in/amal/ati

parents 1f22ded1 04e55605
Showing with 84 additions and 229 deletions
.angulardoc.json 0 → 100644
{
"repoId": "063f3cfe-6b38-4dd7-b3ce-70f163b8291e",
"lastSync": 0
}
\ No newline at end of file
src/app/home/cariusel/carousel.component.ts → src/app/home/carousel/carousel.component.ts
...@@ -11,99 +11,8 @@ export class CarouselItemElement { ...@@ -11,99 +11,8 @@ export class CarouselItemElement {
@Component({ @Component({
selector: 'carousel', selector: 'carousel',
exportAs: 'carousel', exportAs: 'carousel',
template: ` templateUrl: './carousel.html',
<section class="carousel-wrapper" [ngStyle]="carouselWrapperStyle"> styleUrls: ['./carousel.scss']
<ul class="carousel-inner" #carousel>
<li *ngFor="let item of items;" class="carousel-item">
<ng-container [ngTemplateOutlet]="item.tpl"></ng-container>
</li>
</ul>
</section>
<div *ngIf="showControls" style="margin-top: 1em">
<button (click)="next()" class="btn btn-default">Next</button>
<button (click)="prev()" class="btn btn-default">Prev</button>
</div>
`,
styles: [`
.offer_slider {
padding: 10px;
padding-top: 0px;
.slick-slide {
margin: 0 5px;
}
.slide {
position: relative;
padding-bottom: 10px;
.inner_slider {
height: 160px;
width: 100%;
.content_inner {
position: relative;
top: 10px;
left: 15px;
}
background-image: url("../../../assets/offer/offer_temp.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border-radius: 10px;
border-bottom-right-radius: 0px;
position: relative;
.content_inner {
h3 {
margin: 0px;
padding: 0px;
color: #fff;
padding-top: 10px;
padding-bottom: 10px;
}
p {
margin: 0px;
padding: 0px;
color: #fff;
font-size: 13px;
font-weight: 300;
}
}
.coupon_code {
border: 1px dashed #fff;
background-size: 9px;
position: absolute;
bottom: 10px;
right: 10px;
border-radius: 3px;
background-image: url("../../../assets/offer/copy.png");
background-position: right 10px top 10px;
background-repeat: no-repeat;
padding-right: 30px;
font-size: 11px;
.code {
color: #fff;
padding: 8px;
border-right: 1px dashed #fff;
}
.copy {}
}
}
img {
position: absolute;
bottom: 7px;
right: 0px;
left: 55px;
width: calc(100% - 55px);
}
}
}
.carousel-wrapper {
overflow: hidden;
}
.carousel-inner {
display: flex;
}
`]
}) })
export class CarouselComponent implements AfterViewInit { export class CarouselComponent implements AfterViewInit {
@ContentChildren(CarouselDirective) items: QueryList<CarouselDirective>; @ContentChildren(CarouselDirective) items: QueryList<CarouselDirective>;
......
src/app/home/carousel/carousel.html 0 → 100644
<section class="carousel-wrapper" [ngStyle]="carouselWrapperStyle">
<ul class="carousel-inner" #carousel>
<li *ngFor="let item of items;" class="carousel-item">
<ng-container [ngTemplateOutlet]="item.tpl"></ng-container>
</li>
</ul>
</section>
<div *ngIf="showControls" style="margin-top: 1em">
<button (click)="next()" class="btn btn-default">Next</button>
<button (click)="prev()" class="btn btn-default">Prev</button>
</div>
\ No newline at end of file
src/app/home/carousel/carousel.scss 0 → 100644
.carousel-wrapper {
min-width: 100%;
ul {
margin: 0px;
padding: 0px;
li {
width: auto;
}
}
}
\ No newline at end of file
src/app/home/home.module.ts
...@@ -10,11 +10,21 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; ...@@ -10,11 +10,21 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { DestinationComponent } from './destination/destination.component'; import { DestinationComponent } from './destination/destination.component';
import { FlexLayoutModule } from '@angular/flex-layout'; import { FlexLayoutModule } from '@angular/flex-layout';
import { CarouselDirective } from './../directives/carousel.directive'; import { CarouselDirective } from './../directives/carousel.directive';
import { CarouselComponent, CarouselItemElement } from './cariusel/carousel.component'; import { CarouselComponent, CarouselItemElement } from './carousel/carousel.component';
@NgModule({ @NgModule({
declarations: [NavbarComponent, NavmenuComponent, MainmenuComponent, OffersComponent, IndexComponent, DestinationComponent, CarouselDirective, CarouselItemElement, CarouselComponent], declarations: [
NavbarComponent,
NavmenuComponent,
MainmenuComponent,
OffersComponent,
IndexComponent,
DestinationComponent,
CarouselDirective,
CarouselItemElement,
CarouselComponent
],
imports: [ imports: [
CommonModule, CommonModule,
moduleRouting, moduleRouting,
......
src/app/home/index/index.component.html
...@@ -9,39 +9,8 @@ ...@@ -9,39 +9,8 @@
<span class="more">All Deals</span> <span class="more">All Deals</span>
</div> </div>
</h4> </h4>
<!-- <ati-offers>
<ng-container *ngFor="let item of items;">
<ng-container *carouselItem>
<div class="item">{{item.title}}</div>
</ng-container>
</ng-container>
</ati-offers> -->
<carousel>
<ng-container *ngFor="let item of items;">
<ng-container *carouselItem>
<div class="offer_slider">
<div class="slide">
<div class="inner_slider">
<div class="content_inner">
<h3>{{item.title}}</h3>
<p [innerHTML]="item.desc"></p>
</div>
<div class="coupon_code"> <offers></offers>
<div class="code">
Code : {{item.code}}
</div>
<div class="copy">
</div>
</div>
</div>
<img src="../../../assets/offer/bottom_ribbon.png">
</div>
</div>
</ng-container>
</ng-container>
</carousel>
<h4> <h4>
<div class="width50"> <div class="width50">
<span class="head">Upcoming Itinerary</span> <span class="head">Upcoming Itinerary</span>
......
src/app/home/index/index.component.ts
...@@ -7,11 +7,7 @@ import { Component, OnInit } from '@angular/core'; ...@@ -7,11 +7,7 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./index.component.scss'] styleUrls: ['./index.component.scss']
}) })
export class IndexComponent implements OnInit { export class IndexComponent implements OnInit {
items = [
{ title: 'Airfares starting at Rs. 899*', desc: 'Flights, 1080 Hotels, 410 Homestays,<br> Holiday Packages get 1080 Hotels, 410 Homestays..', code: 'AT 500' },
{ title: 'Airfares starting at Rs. 899*', desc: 'Flights, 1080 Hotels, 410 Homestays,<br> Holiday Packages get 1080 Hotels, 410 Homestays..', code: 'AT 500' },
{ title: 'Airfares starting at Rs. 899*', desc: 'Flights, 1080 Hotels, 410 Homestays,<br> Holiday Packages get 1080 Hotels, 410 Homestays..', code: 'AT 500' },
]
constructor() { } constructor() { }
......
src/app/home/mainmenu/mainmenu.component.html
<div class="main_menu_wrapper" fxLayout="row" fxLayoutAlign="space-around center" fxLayoutGap="10px" fxFlexAlign="center"> <!-- <div class="main_menu_wrapper" fxLayout="row" fxLayoutAlign="space-around center" fxLayoutGap="10px" fxFlexAlign="center">
<div fxflex="25%" style="border: 1px solid #d7d8d9; border-top: none;border-left: none;padding: 10px;"> <div fxflex="25%" style="border: 1px solid #d7d8d9; border-top: none;border-left: none;padding: 10px;">
<div class="custmenu"> <div class="custmenu">
<img src="./../../../assets/mainmenu/menu_flight.png" /> <img src="./../../../assets/mainmenu/menu_flight.png" />
...@@ -26,10 +26,10 @@ ...@@ -26,10 +26,10 @@
</div> </div>
<p>Hotel</p> <p>Hotel</p>
</div> </div>
</div> </div> -->
<div class="main_menu_wrapper"> <div class="main_menu_wrapper" fxLayout="row" fxLayoutAlign="space-around center" fxLayoutGap="10px" fxFlexAlign="center">
<ul> <ul>
<li> <li>
<div class="menu_icon flight "> <div class="menu_icon flight ">
......
src/app/home/mainmenu/mainmenu.component.scss
...@@ -12,6 +12,7 @@ $border_cm_color:#d7d8d9; ...@@ -12,6 +12,7 @@ $border_cm_color:#d7d8d9;
ul { ul {
margin: 0px; margin: 0px;
padding: 10px; padding: 10px;
width: 100%;
li { li {
list-style: none; list-style: none;
text-align: center; text-align: center;
......
src/app/home/offers/offers.component.html
<carousel>
<ng-container *ngFor="let item of items;">
<ng-container *carouselItem>
<div class="offer_slider">
<div class="slide">
<div class="inner_slider">
<div class="content_inner">
<h3>{{item.title}}</h3>
<p [innerHTML]="item.desc"></p>
</div>
<div class="coupon_code">
<div class="code">
Code : {{item.code}}
</div>
<div class="copy">
</div>
</div>
</div>
<img src="../../../assets/offer/bottom_ribbon.png">
</div>
</div>
</ng-container>
</ng-container>
</carousel>
\ No newline at end of file
src/app/home/offers/offers.component.ts
import { AfterViewInit, Component, ContentChildren, Directive, ElementRef, Input, OnInit, QueryList, TemplateRef, ViewChild, ViewChildren } from '@angular/core'; import {Component,OnInit} from '@angular/core';
import { CarouselDirective } from './../../directives/carousel.directive';
import { animate, AnimationBuilder, AnimationFactory, AnimationPlayer, style } from '@angular/animations';
@Directive({
selector: '.carousel-item'
})
export class CarouselItemElement {
}
@Component({ @Component({
selector: 'ati-offers', selector: 'offers',
template: ` templateUrl: './offers.component.html',
<section class="carousel-wrapper" [ngStyle]="carouselWrapperStyle"> styleUrls: ['./offers.component.scss']
<ul class="carousel-inner" #carousel>
<li *ngFor="let item of items;" class="carousel-item">
<ng-container [ngTemplateOutlet]="item.tpl"></ng-container>
</li>
</ul>
</section>
<div *ngIf="showControls" style="margin-top: 1em">
<button (click)="next()" class="btn btn-default">Next</button>
<button (click)="prev()" class="btn btn-default">Prev</button>
</div>
`,
styles: [`
ul {
list-style: none;
margin: 0;
padding: 0;
width: 6000px;
}
.carousel-wrapper {
overflow: hidden;
}
.carousel-inner {
display: flex;
}
`]
}) })
export class OffersComponent { export class OffersComponent {
@ContentChildren(CarouselDirective) items: QueryList<CarouselDirective>; items = [
@ViewChildren(OffersComponent, { read: ElementRef }) private itemsElements: QueryList<ElementRef>; { title: 'Airfares starting at Rs. 899*', desc: 'Flights, 1080 Hotels, 410 Homestays,<br> Holiday Packages get 1080 Hotels, 410 Homestays..', code: 'AT 500' },
@ViewChild('carousel', {static: false}) private carousel: ElementRef; { title: 'Airfares starting at Rs. 899*', desc: 'Flights, 1080 Hotels, 410 Homestays,<br> Holiday Packages get 1080 Hotels, 410 Homestays..', code: 'AT 500' },
@Input() timing = '250ms ease-in'; { title: 'Airfares starting at Rs. 899*', desc: 'Flights, 1080 Hotels, 410 Homestays,<br> Holiday Packages get 1080 Hotels, 410 Homestays..', code: 'AT 500' },
@Input() showControls = true; ]
private player: AnimationPlayer;
private itemWidth: number;
private currentSlide = 0;
carouselWrapperStyle = {}
constructor(private builder: AnimationBuilder) { }
ngOnInit() { ngOnInit() {
} }
next() {
if (this.currentSlide + 1 === this.items.length) return;
this.currentSlide = (this.currentSlide + 1) % this.items.length;
const offset = this.currentSlide * this.itemWidth;
const myAnimation: AnimationFactory = this.buildAnimation(offset);
this.player = myAnimation.create(this.carousel.nativeElement);
this.player.play();
}
private buildAnimation(offset) {
return this.builder.build([
animate(this.timing, style({ transform: `translateX(-${offset}px)` }))
]);
}
prev() {
if (this.currentSlide === 0) return;
this.currentSlide = ((this.currentSlide - 1) + this.items.length) % this.items.length;
const offset = this.currentSlide * this.itemWidth;
const myAnimation: AnimationFactory = this.buildAnimation(offset);
this.player = myAnimation.create(this.carousel.nativeElement);
this.player.play();
}
ngAfterViewInit() {
// For some reason only here I need to add setTimeout, in my local env it's working without this.
console.log(this.itemsElements);
setTimeout(() => {
this.itemWidth = this.itemsElements.first.nativeElement.getBoundingClientRect().width;
this.carouselWrapperStyle = {
width: `${this.itemWidth}px`
}
});
}
afterChange(e) {
console.log('afterChange');
}
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment