aico-image-editor
Version:
Combine multiple image into and create single combined image
106 lines (88 loc) • 4.49 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <script src="https://kit.fontawesome.com/ed99b80982.js" crossorigin="anonymous"></script> -->
<!-- <link href="output/css/main.css" rel="stylesheet" />
<link href="output/css/custom.css" rel="stylesheet" /> -->
</head>
<body>
<div class="container p-4">
<button class="btn btn-primary" id="imageModalToggle" x-data="imageModalToggle({
apiUrl: 'http://127.0.0.1',
apiToken: 'Yk4IfQkpukPoPHVIsZBDNrXWc7MDn8jCjaSJ56vJf765c3ca',
configuratorId: '17',
productId: '6',
locale: 'en_US',
productMainImage: 'images/main/fanta.webp',
eventId: '12345678910'
})" @click="()=> {
deactivateParentModalBackdrop('')
updateConfigurator()
}"
@file-url-updated.window="updateMainImage($event.detail.fileUrl)">Test button</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script src="fabric.js"></script>
<script src="fabriceraser.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/@alpinejs/intersect@3.x.x/dist/cdn.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.x.x/dist/cdn.min.js"></script>
<script src="output/js/index.js" data-openai-api-key="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"
data-app-url="http://127.0.0.1:5700" ></script>
<script>
// as above script is now being used as umd, we can access its exports object via window.aicoEditor
const {prepareEditorHTML, mainPictures, updateEditorConfig} = window.aicoEditor
document.addEventListener('alpine:init', function() {
Alpine.data('imageModalToggle', (apiConfig = {}) => ({
init() {
/// this is the line for local setup
//this.updateConfigurator()
prepareEditorHTML(this.$el);
},
// as apiConfig is param which can not be altered,
// we will need one more prop here called productMainImage
// and init that from whatever is passed
productMainImage: null,
originalImage: null,
updateConfigurator() {
this.updateMainImage(apiConfig?.productMainImage)
// update the editor configuration before updating mainPictures
updateEditorConfig(this.$store, apiConfig)
},
updateMainImage(productMainImage) {
// now alter above prop if it is modified from alpine or from php component
// where alpine event which triggers this will be given preference as it was originated from parent
this.originalImage = null;
this.productMainImage = productMainImage;
//only remove those mainPictures which coming from product, not uploaded
for(let i = mainPictures.length - 1; i >=-0; i--) {
if (!(mainPictures[i].isRemovable)) {
mainPictures.splice(i, 1);
}
}
let url = this.productMainImage;
if(url) {
mainPictures.push({
id: `main-image-${apiConfig.eventId}`,
url: url,
label: url.substring(url.lastIndexOf("/") + 1, url.lastIndexOf("."))
})
}
},
deactivateParentModalBackdrop(modalEl) {
bootstrap.Modal.getInstance(document.getElementById(modalEl))?._focustrap.deactivate();
}
}))
})
</script>
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<style>
body, html, :root {
background: none;
}
</style>
</body>
</html>