Skip to content

Commit e2880a0

Browse files
AniketRaneThaliaAniketRaneThalia
committed
Added lazy loading feature
1 parent 8d58316 commit e2880a0

File tree

2 files changed

+145
-85
lines changed

2 files changed

+145
-85
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@csvbox/vuejs3",
3-
"version": "1.0.5",
3+
"version": "1.1.2-alpha.1",
44
"description": "Vue adapter (Vue Version 3) for csvbox.io",
55
"author": "csvbox-io",
66
"license": "MIT",

‎src/csv-box-button.vue‎

Lines changed: 144 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<script>
22
import { defineComponent } from 'vue';
33
import { isProxy, toRaw } from 'vue';
4+
const packageJson = require("./../package.json")
45
56
export default /*#__PURE__*/defineComponent({
67
name: 'CSVBoxButton', // vue component name
@@ -9,14 +10,6 @@ export default /*#__PURE__*/defineComponent({
910
type: String,
1011
required: true
1112
},
12-
debugMode: {
13-
type: Boolean,
14-
required: false
15-
},
16-
useStagingServer: {
17-
type: Boolean,
18-
required: false
19-
},
2013
onImport: {
2114
type: Function,
2215
default: function() {}
@@ -50,52 +43,82 @@ export default /*#__PURE__*/defineComponent({
5043
default: function () {
5144
return { user_id: 'default123' };
5245
}
46+
},
47+
dataLocation: {
48+
type: String,
49+
required: false
50+
},
51+
customDomain: {
52+
type: String,
53+
required: false
54+
},
55+
language: {
56+
type: String,
57+
required: false
58+
},
59+
lazy: {
60+
type: Boolean,
61+
required: false,
62+
default: false
5363
}
5464
},
55-
computed:{
56-
iframeSrc() {
57-
let BASE_URL = `https://${this.useStagingServer ? 'staging' : 'app' }.csvbox.io/embed/${this.licenseKey}`;
58-
return `${BASE_URL}?library-version=2&source=embedCode&sourceLang=vue`;
59-
}
60-
},
61-
data(){
62-
return {
63-
isModalShown: false,
64-
disableImportButton: true,
65-
uuid: Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15)
66-
}
67-
},
65+
computed: {
66+
iframeSrc() {
67+
let domain = this.customDomain ? this.customDomain : "app.csvbox.io";
68+
if(this.dataLocation) { domain = `${this.dataLocation}-${domain}`; }
69+
let iframeUrl = `https://${domain}/embed/${this.licenseKey}`;
70+
iframeUrl += `?library-version=${packageJson.version}`;
71+
iframeUrl += "&framework=vue3";
72+
if(this.dataLocation) {
73+
iframeUrl += "&preventRedirect";
74+
}
75+
if(this.language) {
76+
iframeUrl += "&language=" + this.language;
77+
}
78+
return iframeUrl;
79+
}
80+
},
81+
data(){
82+
return {
83+
isModalShown: false,
84+
disableImportButton: true,
85+
uuid: Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15),
86+
iframe: null,
87+
isIframeLoaded: false,
88+
openModalOnIframeLoad: false,
89+
}
90+
},
6891
methods: {
69-
openModal() {
70-
if(!this.isModalShown) {
71-
this.isModalShown = true;
72-
this.$refs.holder.style.display = 'block';
73-
this.$refs.iframe.contentWindow.postMessage('openModal', '*');
74-
}
75-
},
92+
openModal() {
93+
if(this.lazy) {
94+
if(!this.iframe) {
95+
this.openModalOnIframeLoad = true;
96+
this.initImporter();
97+
return;
98+
}
99+
}
100+
if(!this.isModalShown) {
101+
if(this.isIframeLoaded) {
102+
this.isModalShown = true;
103+
this.$refs.holder.style.display = 'block';
104+
this.iframe.contentWindow.postMessage('openModal', '*');
105+
} else {
106+
this.openModalOnIframeLoad = true;
107+
}
108+
}
109+
},
76110
onMessageEvent(event) {
77-
if (event.data === "mainModalHidden") {
78-
this.$refs.holder.style.display = 'none';
79-
this.isModalShown = false;
80-
this.onClose();
81-
}
82-
if(event.data === "uploadSuccessful") {
83-
this.onImport(true);
84-
}
85-
if(event.data === "uploadFailed") {
86-
this.onImport(false);
87-
}
88-
if(typeof event.data == "object") {
89-
if(event?.data?.data?.unique_token == this.uuid) {
111+
112+
if(typeof event.data == "object") {
113+
if(event?.data?.data?.unique_token == this.uuid) {
90114
if(event.data.type && event.data.type == "data-on-submit") {
91115
let metadata = event.data.data;
92116
metadata["column_mappings"] = event.data.column_mapping;
93-
// this.callback(true, metadata);
94117
delete metadata["unique_token"];
95118
this.onSubmit?.(metadata);
96119
}
97120
else if(event.data.type && event.data.type == "data-push-status") {
98-
if(event.data.data.import_status == "success") {
121+
if(event.data.data.import_status == "success") {
99122
if(event && event.data && event.data.row_data) {
100123
let primary_row_data = event.data.row_data;
101124
let headers = event.data.headers;
@@ -141,49 +164,84 @@ export default /*#__PURE__*/defineComponent({
141164
let metadata = event.data.data;
142165
delete metadata["unique_token"];
143166
this.onImport(true, metadata);
144-
}
167+
}
145168
146-
} else {
147-
console.log("onImport", false, event.data.data);
148-
this.onImport(false, event.data.data);
169+
} else {
170+
console.log("onImport", false, event.data.data);
171+
this.onImport(false, event.data.data);
172+
}
173+
} else if(event.data.type && event.data.type == "csvbox-modal-hidden") {
174+
this.$refs.holder.style.display = 'none';
175+
this.isModalShown = false;
176+
this.onClose();
177+
} else if(event.data.type && event.data.type == "csvbox-upload-successful") {
178+
this.onImport(true);
179+
} else if(event.data.type && event.data.type == "csvbox-upload-failed") {
180+
this.onImport(false);
149181
}
150-
}
151-
}
152-
}
153-
},
154-
randomString() {
155-
let result = '';
156-
let characters = 'abcdefghijklmnopqrstuvwxyz0123456789';
157-
let charactersLength = characters.length;
158-
for (let i = 0; i < 20; i++) {
159-
result += characters.charAt(Math.floor(Math.random() * charactersLength));
160-
}
161-
return result;
162-
}
163-
},
164-
mounted() {
182+
}
183+
}
184+
},
185+
randomString() {
186+
let result = '';
187+
let characters = 'abcdefghijklmnopqrstuvwxyz0123456789';
188+
let charactersLength = characters.length;
189+
for (let i = 0; i < 20; i++) {
190+
result += characters.charAt(Math.floor(Math.random() * charactersLength));
191+
}
192+
return result;
193+
},
194+
initImporter() {
165195
166-
window.addEventListener("message", this.onMessageEvent, false);
196+
let iframe = document.createElement("iframe");
197+
this.iframe = iframe;
198+
iframe.setAttribute("src", this.iframeSrc);
199+
iframe.frameBorder = 0;
200+
iframe.classList.add('csvbox-iframe');
167201
168-
let iframe = this.$refs.iframe;
202+
window.addEventListener("message", this.onMessageEvent, false);
169203
170-
let self = this;
204+
let self = this;
171205
172-
iframe.onload = function () {
206+
iframe.onload = function () {
207+
self.isIframeLoaded = true;
208+
iframe.contentWindow.postMessage({
209+
"customer" : self.user ? (isProxy(self.user) ? toRaw(self.user) : self.user) : null,
210+
"columns" : self.dynamicColumns ? (isProxy(self.dynamicColumns) ? toRaw(self.dynamicColumns) : self.dynamicColumns) : null,
211+
"options" : self.options ? (isProxy(self.options) ? toRaw(self.options) : self.options) : null,
212+
"unique_token": self.uuid
213+
}, "*");
214+
self.disableImportButton = false;
215+
self.onReady();
216+
if(self.openModalOnIframeLoad) {
217+
self.openModal();
218+
}
219+
}
173220
174-
iframe.contentWindow.postMessage({
175-
"customer" : self.user ? (isProxy(self.user) ? toRaw(self.user) : self.user) : null,
176-
"columns" : self.dynamicColumns ? (isProxy(self.dynamicColumns) ? toRaw(self.dynamicColumns) : self.dynamicColumns) : null,
177-
"options" : self.options ? (isProxy(self.options) ? toRaw(self.options) : self.options) : null,
178-
"unique_token": self.uuid
179-
}, "*");
221+
this.$refs.holder.appendChild(iframe);
180222
181-
self.disableImportButton = false;
223+
}
224+
},
225+
mounted() {
182226
183-
self.onReady();
227+
// window.addEventListener("message", this.onMessageEvent, false);
228+
// let iframe = this.$refs.iframe;
229+
// let self = this;
230+
// iframe.onload = function () {
231+
// iframe.contentWindow.postMessage({
232+
233+
// }, "*");
234+
// self.disableImportButton = false;
235+
// self.onReady();
236+
// }
184237
185-
}
186-
},
238+
if(this.lazy) {
239+
this.disableImportButton = false;
240+
} else {
241+
this.initImporter();
242+
}
243+
244+
},
187245
beforeDestroy() {
188246
window.removeEventListener("message", this.onMessageEvent);
189247
}
@@ -196,7 +254,7 @@ export default /*#__PURE__*/defineComponent({
196254
<slot></slot>
197255
</button>
198256
<div ref="holder" class="holder-style">
199-
<iframe ref="iframe" class="iframe" :src="iframeSrc" frameBorder="0"></iframe>
257+
<!-- <iframe ref="iframe" class="iframe" :src="iframeSrc" frameBorder="0"></iframe> -->
200258
</div>
201259
</div>
202260
</template>
@@ -211,11 +269,13 @@ export default /*#__PURE__*/defineComponent({
211269
left: 0;
212270
right: 0;
213271
}
214-
.iframe {
215-
height: 100%;
216-
width: 100%;
217-
position: absolute;
218-
top: 0;
219-
left: 0;
220-
}
272+
</style>
273+
<style>
274+
.csvbox-iframe {
275+
height: 100%;
276+
width: 100%;
277+
position: absolute;
278+
top: 0;
279+
left: 0;
280+
}
221281
</style>

0 commit comments

Comments
 (0)