Skip to content

Commit 79cc6f2

Browse files
yannbfyannbf
committed
fix(slides): Adjust color changing sliders
1 parent c905df8 commit 79cc6f2

File tree

3 files changed

+53
-77
lines changed

3 files changed

+53
-77
lines changed

‎src/pages/slide/slide-color-changing/slide-color-changing.html

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
<ion-header>
2-
<ion-navbar>
1+
<ion-header no-border>
2+
<ion-navbar transparent>
33
<ion-title>Color Changing Slide</ion-title>
44
</ion-navbar>
55
</ion-header>
6-
<ion-content>
7-
<!--<ion-slides #slider [options]="slideOptions" (ionDrag)="onSlideMove($event, element)" (ionDidChange)="onSlideChanged()">-->
8-
<ion-slides #slider (ionDidChange)="onSlideChanged()">
9-
<ion-slide>
10-
<div id="test">
6+
<ion-content fullscreen>
7+
<ion-slides #slider pager
8+
(ionSlideDidChange)="onSlideChanged()">
9+
<ion-slide [style.background-color]="color">
10+
<div class="container">
1111
<h1>
1212
<span>Love </span>
1313
<ul>

‎src/pages/slide/slide-color-changing/slide-color-changing.scss

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,14 @@
11
page-slide-color-changing {
2+
.bar-buttons,
3+
.toolbar-title {
4+
color: #fff;
5+
}
6+
.scroll-content {
7+
padding-top: 0 !important;
8+
}
9+
ion-slide {
10+
transition: all 1s linear;
11+
}
212
.swiper-container {
313
width: 100%;
414
height: 100%;
@@ -13,7 +23,7 @@ page-slide-color-changing {
1323
align-items: center;
1424
}
1525
////
16-
#test {
26+
#container {
1727
width: 80%;
1828
margin: 10% auto 0;
1929
}
@@ -25,13 +35,15 @@ page-slide-color-changing {
2535
position: relative;
2636
font-size: 30px;
2737
font-family: Helvetica;
28-
color: red;
2938
font-family: Sans-serif;
3039
font-weight: 800;
3140
letter-spacing: 2px;
3241
text-align: left;
3342
padding-left: 10px;
3443
}
44+
h1, span, h2 {
45+
color: white;
46+
}
3547
ul {
3648
margin: 0 0 0 40px;
3749
position: absolute;

‎src/pages/slide/slide-color-changing/slide-color-changing.ts

Lines changed: 32 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Component, ViewChild } from '@angular/core';
2-
import { AlertController, NavController, Slides, IonicPage } from 'ionic-angular';
2+
import { NavController, Slides, IonicPage } from 'ionic-angular';
33

44
@IonicPage()
55
@Component({
@@ -9,79 +9,43 @@ import { AlertController, NavController, Slides, IonicPage } from 'ionic-angular
99
export class SlideColorChangingPage {
1010
@ViewChild('slider') slider: Slides;
1111

12-
slideOptions = {
13-
pager: true,
14-
};
15-
16-
slides = [{
17-
title: "Dream's Adventure",
18-
imageUrl: "assets/img/lists/wishlist-1.jpg",
19-
songs: 2,
20-
private: false
21-
},
22-
{
23-
title: "For the Weekend",
24-
imageUrl: "assets/img/lists/wishlist-2.jpg",
25-
songs: 4,
26-
private: false
27-
},
28-
{
29-
title: "Family Time",
30-
imageUrl: "assets/img/lists/wishlist-3.jpg",
31-
songs: 5,
32-
private: true
33-
},
34-
{
35-
title: "My Trip",
36-
imageUrl: "assets/img/lists/wishlist-4.jpg",
37-
songs: 12,
38-
private: true
39-
}
12+
slides = [
13+
{
14+
title: "Dream's Adventure",
15+
imageUrl: "assets/img/lists/wishlist-1.jpg",
16+
songs: 2,
17+
private: false
18+
},
19+
{
20+
title: "For the Weekend",
21+
imageUrl: "assets/img/lists/wishlist-2.jpg",
22+
songs: 4,
23+
private: false
24+
},
25+
{
26+
title: "Family Time",
27+
imageUrl: "assets/img/lists/wishlist-3.jpg",
28+
songs: 5,
29+
private: true
30+
},
31+
{
32+
title: "My Trip",
33+
imageUrl: "assets/img/lists/wishlist-4.jpg",
34+
songs: 12,
35+
private: true
36+
}
4037
]
4138

39+
color: any;
40+
colors = ['#e43737', '#e0e437', '#37e446', '#375be4', '#972cb1']
41+
4242
onSlideChanged() {
4343
let currentIndex = this.slider.getActiveIndex();
44+
this.color = this.colors[currentIndex];
4445
console.log("Slide changed! Current index is", currentIndex);
4546
}
4647

47-
constructor(public navCtrl: NavController, public alertCtrl: AlertController) {
48-
}
49-
50-
decimalToHex(d, padding) {
51-
var hex = Number(d).toString(16);
52-
padding = typeof (padding) === "undefined" || padding === null ? padding = 2 : padding;
53-
54-
while (hex.length < padding) {
55-
hex = "0" + hex;
56-
}
57-
58-
return hex;
59-
}
60-
61-
color: any;
62-
onSlideMove(event) {
63-
console.log(event);
64-
let maxValue = event.virtualSize - event.width;
65-
let normalizedValue = this.normalize(event.translate * -1, maxValue);
66-
let hexCode = this.decimalToHex(normalizedValue, 2);
67-
// let slideCount = event.slidesGrid.length;
68-
let inverseHexCode = this.decimalToHex(255 - normalizedValue, 2);
69-
if (event.activeIndex == 0) {
70-
this.color = '#' + inverseHexCode + hexCode + hexCode;
71-
} else if (event.activeIndex == 1) {
72-
this.color = '#' + hexCode + inverseHexCode + hexCode;
73-
} if (event.activeIndex == 2) {
74-
this.color = '#' + hexCode + hexCode + inverseHexCode;
75-
} else {
76-
this.color = '#' + hexCode + hexCode + hexCode;
77-
}
78-
}
79-
80-
normalize(value, maxValue) {
81-
value = value < 0 ? 0 : value;
82-
let proportion = value / maxValue;
83-
console.log(value, proportion);
84-
proportion = proportion > 1 ? 1 : proportion;
85-
return Math.trunc(proportion * 255);
48+
constructor(public navCtrl: NavController) {
49+
this.color = this.colors[0];
8650
}
8751
}

0 commit comments

Comments
 (0)