Skip to content

Commit 4db9d99

Browse files
subotkevicsubotkevic
committed
Background position, repeat and size in props
1 parent ea0911c commit 4db9d99

File tree

3 files changed

+72
-54
lines changed

3 files changed

+72
-54
lines changed

‎src/component/background.vue

Lines changed: 47 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,42 @@
11
<template>
2-
<component :is="tag" :class="['progressive-background']" v-bind="$attrs">
2+
<component :is="tag" :class="['lazy-background']" v-bind="$attrs">
33
<div v-if="cached" :style="wrapperStyle">
4-
<div class="progressive-background-image" :style="imageStyle"></div>
5-
<div class="progressive-background-slot">
4+
<div class="lazy-background-image" :style="imageStyle"></div>
5+
6+
<div class="lazy-background-slot">
67
<slot name="content" />
78
</div>
89
</div>
10+
911
<span v-else>
1012
<div v-if="!shouldImageRender">
1113
<canvas
1214
width="1"
1315
height="1"
14-
class="progressive-background-canvas"
16+
class="lazy-background-canvas"
1517
ref="canvas">
1618
</canvas>
19+
1720
<img ref="main" :src="image" hidden>
1821
</div>
22+
1923
<div :style="wrapperStyle">
2024
<transition
21-
enter-class="progressive-background-enter"
22-
enter-active-class="progressive-background-before">
23-
<div v-if="shouldImageRender" class="progressive-background-image" :style="imageStyle"></div>
25+
enter-class="lazy-background-enter"
26+
enter-active-class="lazy-background-before">
27+
<div v-if="shouldImageRender" class="lazy-background-image" :style="imageStyle"></div>
2428
</transition>
25-
<div class="progressive-background-slot">
29+
30+
<div class="lazy-background-slot">
2631
<slot name="content" :visible="!shouldImageRender" />
2732
</div>
33+
2834
<transition
29-
enter-class="progressive-background-enter"
30-
enter-active-class="progressive-background-before">
35+
enter-class="lazy-background-enter"
36+
enter-active-class="lazy-background-before">
3137
<div
3238
v-if="shouldPlaceholderRender"
33-
class="progressive-background-placeholder"
39+
class="lazy-background-placeholder"
3440
:style="placeholderStyle">
3541
</div>
3642
</transition>
@@ -43,7 +49,7 @@
4349
import image from '../mixin/image'
4450
4551
export default {
46-
name: 'progressive-background',
52+
name: 'lazy-background',
4753
4854
props: {
4955
noRatio: {
@@ -54,7 +60,18 @@
5460
type: String,
5561
default: 'div',
5662
},
57-
63+
position: {
64+
type: String,
65+
default: '0% 0%',
66+
},
67+
size: {
68+
type: String,
69+
default: 'cover',
70+
},
71+
repeat: {
72+
type: String,
73+
default: 'no-repeat',
74+
},
5875
},
5976
6077
mixins: [
@@ -63,83 +80,84 @@
6380
6481
data () {
6582
return {
66-
applyRatio: !this.noRatio,
83+
applyRatio: ! this.noRatio,
6784
}
6885
},
6986
7087
computed: {
7188
imageStyle () {
7289
return {
73-
backgroundImage: `url(${this.image})`
90+
backgroundImage: `url(${this.image})`,
91+
backgroundPosition: this.position,
92+
backgroundSize: this.size,
93+
backgroundRepeat: this.repeat,
7494
}
7595
},
7696
7797
placeholderStyle () {
7898
return {
7999
...this.blurStyle,
80-
backgroundImage: `url(${this.placeholderImage})`
100+
backgroundImage: `url(${this.placeholderImage})`,
101+
backgroundPosition: this.position,
102+
backgroundSize: this.size,
103+
backgroundRepeat: this.repeat,
81104
}
82105
}
83106
}
84107
}
85108
</script>
86109

87110
<style lang="css">
88-
.progressive-background {
111+
.lazy-background {
89112
position: relative;
90113
width: 100%;
91114
height: 100%;
92115
overflow: hidden;
93116
}
94117
95-
.progressive-background-slot {
118+
.lazy-background-slot {
96119
position: relative;
97120
z-index: 1;
98121
}
99122
100-
.progressive-background-canvas {
123+
.lazy-background-canvas {
101124
visibility: hidden;
102125
position: absolute;
103126
top: 0;
104127
left: 0;
105128
}
106129
107-
/* @todo: Add background position, repeat and size as props in the future */
108-
.progressive-background-image {
130+
.lazy-background-image {
109131
position: absolute;
110132
top: 0;
111133
left: 0;
112134
width: 100%;
113135
height: 100%;
114136
z-index: 1;
115137
transition: all 0.4s ease-out;
116-
background-repeat: no-repeat;
117-
background-size: cover;
118138
}
119139
120-
.progressive-background-placeholder {
140+
.lazy-background-placeholder {
121141
position: absolute;
122142
top: 0;
123143
left: 0;
124144
width: 100%;
125145
height: 100%;
126146
z-index: 1;
127147
transition: all 0.4s ease-out;
128-
background-repeat: no-repeat;
129-
background-size: cover;
130148
transform: scale(1.1);
131149
z-index: 0;
132150
}
133151
134-
.progressive-background-before {
152+
.lazy-background-before {
135153
opacity: 1;
136154
}
137155
138-
.progressive-background-enter {
156+
.lazy-background-enter {
139157
opacity: 0;
140158
}
141159
142-
.progressive-background-preloader {
160+
.lazy-background-preloader {
143161
pointer-events: none;
144162
position: absolute;
145163
top: 0;

‎src/component/image.vue

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<template>
2-
<div ref="image" :class="['progressive-image', customClass]" :style="componentStyle">
2+
<div ref="image" :class="['lazy-image', customClass]" :style="componentStyle">
33
<div
44
v-if="cached"
5-
class="progressive-image-wrapper"
5+
class="lazy-image-wrapper"
66
:style="wrapperStyle">
77
<img
8-
:class="['progressive-image-main', imageCustomClass]"
8+
:class="['lazy-image-main', imageCustomClass]"
99
:src="image"
1010
:alt="alt"
1111
/>
@@ -15,28 +15,28 @@
1515
v-if="!shouldImageRender"
1616
width="1"
1717
height="1"
18-
class="progressive-image-canvas"
18+
class="lazy-image-canvas"
1919
ref="canvas">
2020
</canvas>
21-
<div class="progressive-image-wrapper" :style="wrapperStyle">
21+
<div class="lazy-image-wrapper" :style="wrapperStyle">
2222
<transition
23-
enter-class="progressive-image-enter"
24-
enter-active-class="progressive-image-before-enter">
23+
enter-class="lazy-image-enter"
24+
enter-active-class="lazy-image-before-enter">
2525
<img
2626
v-show="shouldImageRender"
27-
:class="['progressive-image-main', imageCustomClass]"
27+
:class="['lazy-image-main', imageCustomClass]"
2828
ref="main"
2929
:src="image"
3030
:alt="alt"
3131
/>
3232
</transition>
3333
<transition
34-
enter-class="progressive-image-enter"
35-
enter-active-class="progressive-image-before-enter">
34+
enter-class="lazy-image-enter"
35+
enter-active-class="lazy-image-before-enter">
3636
<div
3737
v-if="shouldPlaceholderRender"
38-
class="progressive-image-placeholder"
39-
:class="{ 'progressive-image-placeholder-out': shouldImageRender }"
38+
class="lazy-image-placeholder"
39+
:class="{ 'lazy-image-placeholder-out': shouldImageRender }"
4040
:style="placeholderStyle">
4141
</div>
4242
</transition>
@@ -49,7 +49,7 @@
4949
import image from '../mixin/image'
5050
5151
export default {
52-
name: 'progressive-img',
52+
name: 'lazy-img',
5353
5454
props: {
5555
imageCustomClass: { type: String }
@@ -71,21 +71,21 @@
7171
</script>
7272

7373
<style lang="css">
74-
.progressive-image {
74+
.lazy-image {
7575
position: relative;
7676
overflow: hidden;
7777
width: 100%;
7878
display: inline-block
7979
}
8080
81-
.progressive-image-canvas {
81+
.lazy-image-canvas {
8282
visibility: hidden;
8383
position: absolute;
8484
top: 0;
8585
left: 0;
8686
}
8787
88-
.progressive-image-main {
88+
.lazy-image-main {
8989
position: absolute;
9090
top: 0px;
9191
left: 0px;
@@ -98,15 +98,15 @@
9898
transform: translateZ(0);
9999
}
100100
101-
.progressive-image-before-enter {
101+
.lazy-image-before-enter {
102102
opacity: 1;
103103
}
104104
105-
.progressive-image-enter {
105+
.lazy-image-enter {
106106
opacity: 0;
107107
}
108108
109-
.progressive-image-placeholder {
109+
.lazy-image-placeholder {
110110
position: absolute;
111111
top: 0px;
112112
left: 0px;
@@ -122,22 +122,22 @@
122122
background-size: cover;
123123
}
124124
125-
.progressive-image-placeholder-out {
125+
.lazy-image-placeholder-out {
126126
transition-duration: inherit;
127127
transition-property: all;
128128
transition-timing-function: ease-out;
129129
130130
/**
131131
* the transitioon delay needs to be longer than the
132-
* .progressive-image-main transition-duration, otherwise it will flick
132+
* .lazy-image-main transition-duration, otherwise it will flick
133133
* because there won't be a background.
134134
*/
135135
transition-delay: 0.4s;
136136
137137
opacity: 0;
138138
}
139139
140-
.progressive-image-preloader {
140+
.lazy-image-preloader {
141141
pointer-events: none;
142142
position: absolute;
143143
top: 0;

‎src/mixin/image.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -172,7 +172,7 @@ export default {
172172
ctx = this.$refs.canvas.getContext('2d')
173173
ctx.drawImage(this.$refs.main, 0, 0)
174174
} catch (e) {
175-
// see https://github.com/MatteoGabriele/vue-progressive-image/issues/30
175+
176176
}
177177

178178
// next tick to know when the image is rendered
@@ -194,7 +194,7 @@ export default {
194194
this.$emit('onError', error)
195195

196196
if (process.env.NODE_ENV !== 'production' && !this.fallback) {
197-
console.warn('[vue-progressive-image] An error occured during the image loading')
197+
console.warn('[vue-lazy-image-loading] An error occured during the image loading')
198198
}
199199

200200
if (this.fallback || this.options.fallback) {
@@ -227,7 +227,7 @@ export default {
227227
this.$emit('onPlaceholderError', error)
228228

229229
if (process.env.NODE_ENV !== 'production') {
230-
console.warn('[vue-progressive-image] An error occured during the placeholder image loading')
230+
console.warn('[vue-lazy-image-loading] An error occured during the placeholder image loading')
231231
}
232232
}
233233
},

0 commit comments

Comments
 (0)