Skip to content

A
ati
Commit 2d227b51 by inspirations
Options

25-09-2015

parent 55dbaf38
Showing with 114 additions and 240 deletions
.angulardoc.json 0 → 100644
{
"repoId": "063f3cfe-6b38-4dd7-b3ce-70f163b8291e",
"lastSync": 0
}
\ No newline at end of file
package-lock.json
...@@ -3931,7 +3931,8 @@ ...@@ -3931,7 +3931,8 @@
"ansi-regex": { "ansi-regex": {
"version": "2.1.1", "version": "2.1.1",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"aproba": { "aproba": {
"version": "1.2.0", "version": "1.2.0",
...@@ -3952,12 +3953,14 @@ ...@@ -3952,12 +3953,14 @@
"balanced-match": { "balanced-match": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"brace-expansion": { "brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"balanced-match": "^1.0.0", "balanced-match": "^1.0.0",
"concat-map": "0.0.1" "concat-map": "0.0.1"
...@@ -3972,17 +3975,20 @@ ...@@ -3972,17 +3975,20 @@
"code-point-at": { "code-point-at": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"concat-map": { "concat-map": {
"version": "0.0.1", "version": "0.0.1",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"console-control-strings": { "console-control-strings": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"core-util-is": { "core-util-is": {
"version": "1.0.2", "version": "1.0.2",
...@@ -4099,7 +4105,8 @@ ...@@ -4099,7 +4105,8 @@
"inherits": { "inherits": {
"version": "2.0.3", "version": "2.0.3",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"ini": { "ini": {
"version": "1.3.5", "version": "1.3.5",
...@@ -4111,6 +4118,7 @@ ...@@ -4111,6 +4118,7 @@
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"number-is-nan": "^1.0.0" "number-is-nan": "^1.0.0"
} }
...@@ -4125,6 +4133,7 @@ ...@@ -4125,6 +4133,7 @@
"version": "3.0.4", "version": "3.0.4",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"brace-expansion": "^1.1.7" "brace-expansion": "^1.1.7"
} }
...@@ -4132,12 +4141,14 @@ ...@@ -4132,12 +4141,14 @@
"minimist": { "minimist": {
"version": "0.0.8", "version": "0.0.8",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"minipass": { "minipass": {
"version": "2.3.5", "version": "2.3.5",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"safe-buffer": "^5.1.2", "safe-buffer": "^5.1.2",
"yallist": "^3.0.0" "yallist": "^3.0.0"
...@@ -4156,6 +4167,7 @@ ...@@ -4156,6 +4167,7 @@
"version": "0.5.1", "version": "0.5.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"minimist": "0.0.8" "minimist": "0.0.8"
} }
...@@ -4236,7 +4248,8 @@ ...@@ -4236,7 +4248,8 @@
"number-is-nan": { "number-is-nan": {
"version": "1.0.1", "version": "1.0.1",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"object-assign": { "object-assign": {
"version": "4.1.1", "version": "4.1.1",
...@@ -4248,6 +4261,7 @@ ...@@ -4248,6 +4261,7 @@
"version": "1.4.0", "version": "1.4.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"wrappy": "1" "wrappy": "1"
} }
...@@ -4333,7 +4347,8 @@ ...@@ -4333,7 +4347,8 @@
"safe-buffer": { "safe-buffer": {
"version": "5.1.2", "version": "5.1.2",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"safer-buffer": { "safer-buffer": {
"version": "2.1.2", "version": "2.1.2",
...@@ -4369,6 +4384,7 @@ ...@@ -4369,6 +4384,7 @@
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"code-point-at": "^1.0.0", "code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0", "is-fullwidth-code-point": "^1.0.0",
...@@ -4388,6 +4404,7 @@ ...@@ -4388,6 +4404,7 @@
"version": "3.0.1", "version": "3.0.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"ansi-regex": "^2.0.0" "ansi-regex": "^2.0.0"
} }
...@@ -4431,12 +4448,14 @@ ...@@ -4431,12 +4448,14 @@
"wrappy": { "wrappy": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"yallist": { "yallist": {
"version": "3.0.3", "version": "3.0.3",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
} }
} }
}, },
......
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