Skip to content

Commit 74cdbbb

Browse files
amrelbialyamrelbialy
committed
fix: how props are pass and config
1 parent bcdb511 commit 74cdbbb

File tree

3 files changed

+150
-89
lines changed

3 files changed

+150
-89
lines changed

‎src/CloudImageProvider.vue

Lines changed: 34 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -5,67 +5,71 @@
55
</template>
66

77
<script>
8-
import { CONSTANTS, processParams } from 'cloudimage-responsive-utils';
9-
import { debounce } from 'throttle-debounce';
8+
import { CONSTANTS, processParams } from "cloudimage-responsive-utils";
9+
import { debounce } from "throttle-debounce";
1010
1111
export default {
1212
props: { cloudImageConfig: Object },
1313
data() {
1414
return {
1515
config: {
16-
token: this.cloudImageConfig.token,
17-
domain: 'cloudimg.io',
18-
lazyLoading: true,
19-
lazyLoadOffset: 100,
20-
placeholderBackground: '#f4f4f4',
16+
token: this.cloudImageConfig.token || "",
17+
domain: "cloudimg.io",
18+
lazyLoading: this.cloudImageConfig.lazyLoading || true,
19+
lazyLoadOffset: this.cloudImageConfig.lazyLoadOffset || 100,
20+
placeholderBackground:
21+
this.cloudImageConfig.placeholderBackground || "#f4f4f4",
2122
baseURL: this.cloudImageConfig.baseUrl || this.cloudImageConfig.baseURL,
2223
ratio: 1.5,
2324
exactSize: false,
2425
presets: this.cloudImageConfig.presets
2526
? this.cloudImageConfig.presets
2627
: {
27-
xs: '(max-width: 575px)', // to 575 PHONE
28-
sm: '(min-width: 576px)', // 576 - 767 PHABLET
29-
md: '(min-width: 768px)', // 768 - 991 TABLET
30-
lg: '(min-width: 992px)', // 992 - 1199 SMALL_LAPTOP_SCREEN
31-
xl: '(min-width: 1200px)' // from 1200 USUALSCREEN
28+
xs: "(max-width: 575px)", // to 575 PHONE
29+
sm: "(min-width: 576px)", // 576 - 767 PHABLET
30+
md: "(min-width: 768px)", // 768 - 991 TABLET
31+
lg: "(min-width: 992px)", // 992 - 1199 SMALL_LAPTOP_SCREEN
32+
xl: "(min-width: 1200px)" // from 1200 USUALSCREEN
3233
},
3334
params: processParams(this.cloudImageConfig.params),
34-
innerWidth: typeof window !== 'undefined' ? window.innerWidth : null,
35+
innerWidth: typeof window !== "undefined" ? window.innerWidth : null,
3536
previewQualityFactor: 10,
36-
doNotReplaceURL: false,
37-
devicePixelRatioList: CONSTANTS.DEVICE_PIXEL_RATIO_LIST,
37+
doNotReplaceURL: this.cloudImageConfig.doNotReplaceURL || false,
38+
devicePixelRatioList:
39+
this.cloudImageConfig.devicePixelRatioList ||
40+
CONSTANTS.DEVICE_PIXEL_RATIO_LIST,
3841
limitFactor: this.cloudImageConfig.limitFactor,
39-
xs: '(max-width: 575px)',
40-
sm: '(min-width: 576px)',
41-
md: '(min-width: 768px)',
42-
lg: '(min-width: 992px)',
43-
xl: '(min-width: 1200px)'
42+
xs: "(max-width: 575px)",
43+
sm: "(min-width: 576px)",
44+
md: "(min-width: 768px)",
45+
lg: "(min-width: 992px)",
46+
xl: "(min-width: 1200px)"
4447
}
4548
};
4649
},
4750
created() {
48-
if (typeof window !== 'undefined') {
51+
if (typeof window !== "undefined") {
4952
window.addEventListener(
50-
'resize',
53+
"resize",
5154
debounce(100, () => {
5255
this.config.innerWidth = window.innerWidth;
5356
})
5457
);
5558
}
5659
},
57-
58-
beforeDestroy() {
59-
window.removeEventListener(
60-
'resize',
61-
debounce(100, () => {
62-
this.config.innerWidth = window.innerWidth;
63-
}));
60+
61+
beforeDestroy() {
62+
window.removeEventListener(
63+
"resize",
64+
debounce(100, () => {
65+
this.config.innerWidth = window.innerWidth;
66+
})
67+
);
6468
},
6569
// to able to use the data in image and background
6670
provide() {
6771
const cloudProvider = {};
68-
Object.defineProperty(cloudProvider, 'config', {
72+
Object.defineProperty(cloudProvider, "config", {
6973
enumerable: true,
7074
get: () => this.config
7175
});

‎src/Img.vue

Lines changed: 61 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,24 @@
11
<template>
2-
<div>
3-
<lazy-component v-if="properties.config.lazyLoading && lazyLoadActive" @show="handler">
4-
<div v-bind:class="loadedStyle" :style="picture">
5-
<Canvas v-if="properties.blurhash" :blurhash="properties.blurhash" :loaded="loaded" />
6-
<img v-bind:alt="alt" :style="imgStyle" v-bind:ratio="otherProps.ratio" @load="onImgLoad" />
7-
</div>
8-
</lazy-component>
9-
<div v-else v-bind:class="loadedStyle" :style="picture">
2+
<img v-if="server" :alt="alt" :src="BASE_64_PLACEHOLDER" />
3+
<lazy-component
4+
v-else-if="!server && properties.config.lazyLoading && lazyLoadActive"
5+
@show="handler"
6+
>
7+
<div v-bind:class="loadedStyle" :style="picture">
108
<Canvas v-if="properties.blurhash" :blurhash="properties.blurhash" :loaded="loaded" />
11-
<img
12-
v-bind:alt="alt"
13-
:style="imgStyle"
14-
v-bind:ratio="otherProps.ratio"
15-
v-bind:src="data.cloudimgURL"
16-
@load="onImgLoad"
17-
:srcset="cloudimgSRCSET"
18-
/>
9+
<img v-bind:alt="alt" :style="imgStyle" v-bind:ratio="otherProps.ratio" @load="onImgLoad" />
1910
</div>
20-
<img v-if="server" :alt="alt" :src="BASE_64_PLACEHOLDER" />
11+
</lazy-component>
12+
<div v-else v-bind:class="loadedStyle" :style="picture">
13+
<Canvas v-if="properties.blurhash" :blurhash="properties.blurhash" :loaded="loaded" />
14+
<img
15+
v-bind:alt="alt"
16+
:style="imgStyle"
17+
v-bind:ratio="otherProps.ratio"
18+
v-bind:src="data.cloudimgURL"
19+
@load="onImgLoad"
20+
:srcset="cloudimgSRCSET"
21+
/>
2122
</div>
2223
</template>
2324

@@ -27,7 +28,7 @@ import { BASE_64_PLACEHOLDER } from "cloudimage-responsive-utils/dist/constants"
2728
import Canvas from "./Canvas.vue";
2829
2930
import { getFilteredProps } from "./utils";
30-
import {blurHashImgStyes as styles} from "cloudimage-responsive-utils";
31+
import { blurHashImgStyes as styles } from "cloudimage-responsive-utils";
3132
3233
export default {
3334
components: {
@@ -36,11 +37,39 @@ export default {
3637
// geting the data from the provider
3738
inject: ["cloudProvider"],
3839
props: {
39-
src: String,
40-
ratio: Number,
41-
sizes: Object,
42-
params: String,
43-
blurhash: String
40+
src: {
41+
type: String,
42+
default: undefined,
43+
required: true
44+
},
45+
width: {
46+
type: String,
47+
default: undefined
48+
},
49+
height: {
50+
type: String,
51+
default: undefined
52+
},
53+
params: {
54+
type: String,
55+
default: undefined
56+
},
57+
sizes: {
58+
type: Object,
59+
default: undefined
60+
},
61+
ratio: {
62+
type: Number
63+
},
64+
alt: {
65+
type: String
66+
},
67+
className: {
68+
type: String
69+
},
70+
blurhash: {
71+
type: String
72+
}
4473
},
4574
data() {
4675
return {
@@ -56,24 +85,25 @@ export default {
5685
data: "",
5786
properties: {
5887
src: this.src,
59-
ratio: this.ratio,
88+
width: this.width,
89+
height: this.height,
90+
params: this.params,
6091
sizes: this.sizes,
92+
ratio: this.ratio,
6193
blurhash: this.blurhash,
62-
params: this.params,
94+
alt: this.alt,
95+
className: this.className,
6396
config: this.cloudProvider.config
6497
},
65-
alt: "",
66-
className: "",
67-
lazyLoadConfig: "",
98+
6899
preserveSize: "",
69100
imgNodeWidth: "",
70101
imgNodeHeight: "",
71102
otherProps: "",
72103
cloudimgSRCSET: "",
73104
imgStyle: "",
74105
picture: "",
75-
loadedStyle: "",
76-
height: { height: 0 }
106+
loadedStyle: ""
77107
};
78108
},
79109
mounted() {
@@ -83,9 +113,6 @@ export default {
83113
const loaded = this.loaded;
84114
const previewLoaded = this.previewLoaded;
85115
const {
86-
alt,
87-
className,
88-
lazyLoadConfig,
89116
preserveSize,
90117
imgNodeWidth,
91118
imgNodeHeight,
@@ -121,9 +148,7 @@ export default {
121148
}
122149
123150
//the value from filter and passing to data
124-
this.alt = alt;
125-
this.className = className;
126-
this.lazyLoadConfig = lazyLoadConfig;
151+
127152
this.preserveSize = preserveSize;
128153
this.imgNodeWidth = imgNodeWidth;
129154
this.imgNodeHeight = imgNodeHeight;

‎src/background.vue

Lines changed: 55 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,28 @@
11
<template>
2-
<div>
3-
<lazy-component v-if="properties.config.lazyLoading && lazyLoadActive" @show="handler">
4-
<div :class="loadedStyle" :style="container">
5-
<Canvas v-if="properties.blurhash" :blurhash="properties.blurhash" :loaded="loaded" />
6-
7-
<div class="cloudimage-background-content" style="position: relative; zIndex: 2 ">
8-
<slot></slot>
9-
</div>
10-
</div>
11-
</lazy-component>
12-
<div v-else :class="loadedStyle" :style="container">
2+
<div v-if="processed">
3+
<slot></slot>
4+
</div>
5+
<lazy-component v-else-if="properties.config.lazyLoading && lazyLoadActive" @show="handler">
6+
<div :class="loadedStyle" :style="container">
137
<Canvas v-if="properties.blurhash" :blurhash="properties.blurhash" :loaded="loaded" />
148

159
<div class="cloudimage-background-content" style="position: relative; zIndex: 2 ">
1610
<slot></slot>
1711
</div>
1812
</div>
19-
<div v-if="processed">
13+
</lazy-component>
14+
<div v-else :class="loadedStyle" :style="container">
15+
<Canvas v-if="properties.blurhash" :blurhash="properties.blurhash" :loaded="loaded" />
16+
17+
<div class="cloudimage-background-content" style="position: relative; zIndex: 2 ">
2018
<slot></slot>
2119
</div>
2220
</div>
2321
</template>
2422

2523
<script>
2624
import { isServer, processReactNode } from "cloudimage-responsive-utils";
27-
import { backgroundStyles as styles } from 'cloudimage-responsive-utils';
25+
import { backgroundStyles as styles } from "cloudimage-responsive-utils";
2826
import { getFilteredBgProps } from "./utils.js";
2927
import Canvas from "./Canvas.vue";
3028
export default {
@@ -34,10 +32,42 @@ export default {
3432
// geting the data from the provider
3533
inject: ["cloudProvider"],
3634
props: {
37-
src: String,
38-
params: String,
39-
styles: Object,
40-
blurhash: String
35+
src: {
36+
type: String,
37+
default: undefined,
38+
required: true
39+
},
40+
width: {
41+
type: String,
42+
default: undefined
43+
},
44+
height: {
45+
type: String,
46+
default: undefined
47+
},
48+
params: {
49+
type: String,
50+
default: undefined
51+
},
52+
sizes: {
53+
type: Object,
54+
default: undefined
55+
},
56+
ratio: {
57+
type: Number
58+
},
59+
alt: {
60+
type: String
61+
},
62+
className: {
63+
type: String
64+
},
65+
styles: {
66+
type: Object
67+
},
68+
blurhash: {
69+
type: String
70+
}
4171
},
4272
data() {
4373
return {
@@ -49,26 +79,28 @@ export default {
4979
data: "",
5080
properties: {
5181
src: this.src,
52-
params: this.params ? this.params : undefined,
82+
params: this.params,
5383
config: this.cloudProvider.config,
5484
style: this.styles,
55-
blurhash: this.blurhash
85+
width: this.width,
86+
height: this.height,
87+
sizes: this.sizes,
88+
ratio: this.ratio,
89+
blurhash: this.blurhash,
90+
alt: this.alt,
91+
className: this.className
5692
},
5793
container: "",
5894
previewBgWrapper: "",
5995
previewBg: "",
60-
className: "",
61-
lazyLoadConfig: "",
6296
otherProps: "",
6397
loadedStyle: ""
6498
};
6599
},
66100
mounted() {
67101
if (this.server) return;
68102
const style = this.properties.style;
69-
const { className } = getFilteredBgProps(this.properties);
70103
const cloudimgURL = this.data.cloudimgURL;
71-
this.className = className;
72104
73105
//initial loading style
74106
this.loadedStyle = [this.className, "cloudimage-background", "loading"];

0 commit comments

Comments
 (0)