section image lightbox
This commit is contained in:
@@ -1,200 +1,228 @@
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="row m-0 p-0 align-items-center">
|
<div class="row m-0 p-0 align-items-center">
|
||||||
|
<div class="col-sm-12 col-md-6 p-0">
|
||||||
<div class="col-sm-12 col-md-6 p-0">
|
<span class="material-icons-outlined box-move me-2" style="cursor: move">open_with</span
|
||||||
<span class="material-icons-outlined box-move me-2" style="cursor:move;">open_with</span><span
|
><span class="font-weight-bold text-primary">{{ langs.label }}</span>
|
||||||
class="font-weight-bold text-primary">{{ langs.label }}</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-sm-12 col-md-6 p-0 text-end">
|
|
||||||
<a href="#" @click.prevent="modalOpen" title="Edytuj" class="text-primary me-2"><i
|
|
||||||
class="material-icons-outlined">create</i></a>
|
|
||||||
<a href="#" title="Usuń" @click.prevent="removeItem()" class="text-danger"><i
|
|
||||||
class="material-icons-outlined">delete</i></a>
|
|
||||||
</div>
|
|
||||||
<b-modal v-model="modalBox" v-on:close="onCloseModal" :title="langs.label">
|
|
||||||
<div>
|
|
||||||
<div class="p-0 m-0">
|
|
||||||
<div class="form-group ">
|
|
||||||
<label class="w-100 col-form-label">{{ langs.label }}</label>
|
|
||||||
<div class="input-group mb-3">
|
|
||||||
<input class="form-control" type="text" v-model="text" />
|
|
||||||
<button @click="chooseImage" class="btn btn-outline-secondary" type="button" id="button-addon2">Wybierz</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group ">
|
|
||||||
<label class="w-100 col-form-label">{{ langs.title }}</label>
|
|
||||||
<input class="form-control" type="text" v-model="title" />
|
|
||||||
</div>
|
|
||||||
<div class="form-group ">
|
|
||||||
<label class="w-100 col-form-label">{{ langs.alt }}</label>
|
|
||||||
<input class="form-control" type="text" v-model="alt" />
|
|
||||||
</div>
|
|
||||||
<div class="form-group ">
|
|
||||||
<label class="w-100 col-form-label">Legenda obrazka</label>
|
|
||||||
<input class="form-control" type="text" v-model="figcaption" />
|
|
||||||
</div>
|
|
||||||
<div class="form-group ">
|
|
||||||
<label class="w-100 col-form-label">{{ langs.scaling }}</label>
|
|
||||||
<select v-model="scale" class="form-select">
|
|
||||||
<option v-for="item, ii in scales" :key="ii" :value="item.key">{{ item.modelValue }}
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="w-100 col-form-label">{{ langs.href }}</label>
|
|
||||||
<input class="form-control" type="text" v-model="href" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<fieldset class="mt-3" v-show="scale == 'tak'">
|
|
||||||
<legend>{{ langs.proportions }}</legend>
|
|
||||||
Brak możliwości skalowania obrazków z zewnętrznego serwera.
|
|
||||||
<div class="form-group"><label class="w-100 col-form-label">{{ langs.width
|
|
||||||
}}</label><input class="form-control" v-model="width"></div>
|
|
||||||
<div class="form-group"><label class="w-100 col-form-label">{{ langs.height
|
|
||||||
}}</label><input class="form-control" v-model="height"></div>
|
|
||||||
<div class="form-group"><label class="w-100 col-form-label">{{ langs.ratio
|
|
||||||
}}</label><select class="form-select" v-model="ratio">
|
|
||||||
<option v-for="item, ri in ratios" :key="ri">{{ item }}</option>
|
|
||||||
</select></div>
|
|
||||||
|
|
||||||
</fieldset>
|
|
||||||
|
|
||||||
<img v-if="text" :src="text" style="max-width: 100%;" class="my-2">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="text-center mt-4"><button class="btn btn-outline-secondary mr-1"
|
|
||||||
@click.prevent="onCloseModal">{{
|
|
||||||
langs.saveclose
|
|
||||||
}}</button></div>
|
|
||||||
</b-modal>
|
|
||||||
|
|
||||||
<div v-if="text">
|
|
||||||
<img :src="text" style="width:100px;" />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="col-sm-12 col-md-6 p-0 text-end">
|
||||||
|
<a href="#" @click.prevent="modalOpen" title="Edytuj" class="text-primary me-2"
|
||||||
|
><i class="material-icons-outlined">create</i></a
|
||||||
|
>
|
||||||
|
<a href="#" title="Usuń" @click.prevent="removeItem()" class="text-danger"
|
||||||
|
><i class="material-icons-outlined">delete</i></a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<b-modal v-model="modalBox" v-on:close="onCloseModal" :title="langs.label">
|
||||||
|
<div>
|
||||||
|
<div class="p-0 m-0">
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="w-100 col-form-label">{{ langs.label }}</label>
|
||||||
|
<div class="input-group mb-3">
|
||||||
|
<input class="form-control" type="text" v-model="text" />
|
||||||
|
<button
|
||||||
|
@click="chooseImage"
|
||||||
|
class="btn btn-outline-secondary"
|
||||||
|
type="button"
|
||||||
|
id="button-addon2"
|
||||||
|
>
|
||||||
|
Wybierz
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="w-100 col-form-label">{{ langs.title }}</label>
|
||||||
|
<input class="form-control" type="text" v-model="title" />
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="w-100 col-form-label">{{ langs.alt }}</label>
|
||||||
|
<input class="form-control" type="text" v-model="alt" />
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="w-100 col-form-label">Legenda obrazka</label>
|
||||||
|
<input class="form-control" type="text" v-model="figcaption" />
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="w-100 col-form-label">{{ langs.scaling }}</label>
|
||||||
|
<select v-model="scale" class="form-select">
|
||||||
|
<option v-for="(item, ii) in scales" :key="ii" :value="item.key">
|
||||||
|
{{ item.modelValue }}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="w-100 col-form-label">{{ langs.href }}</label>
|
||||||
|
<input class="form-control" type="text" v-model="href" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<fieldset class="mt-3" v-show="scale == 'tak'">
|
||||||
|
<legend>{{ langs.proportions }}</legend>
|
||||||
|
Brak możliwości skalowania obrazków z zewnętrznego serwera.
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="w-100 col-form-label">{{ langs.width }}</label
|
||||||
|
><input class="form-control" v-model="width" />
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="w-100 col-form-label">{{ langs.height }}</label
|
||||||
|
><input class="form-control" v-model="height" />
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="w-100 col-form-label">{{ langs.ratio }}</label
|
||||||
|
><select class="form-select" v-model="ratio">
|
||||||
|
<option v-for="(item, ri) in ratios" :key="ri">{{ item }}</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="w-100 col-form-label">Używaj lightbox</label>
|
||||||
|
|
||||||
|
<select v-model="img_lightbox" class="form-select">
|
||||||
|
<option :value="false">NIE</option>
|
||||||
|
<option :value="true">TAK</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<img v-if="text" :src="text" style="max-width: 100%; max-height: 30vh; width: 100%;object-fit:contain;" class="my-2" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-center mt-4">
|
||||||
|
<button class="btn btn-outline-secondary mr-1" @click.prevent="onCloseModal">
|
||||||
|
{{ langs.saveclose }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</b-modal>
|
||||||
|
|
||||||
|
<div v-if="text">
|
||||||
|
<img :src="text" style="width: 100px" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import MagicoModal from './../MagicoModal.vue'
|
import MagicoModal from './../MagicoModal.vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
modelValue: Object,
|
modelValue: Object
|
||||||
},
|
},
|
||||||
data: function () {
|
data: function () {
|
||||||
return {
|
return {
|
||||||
langs: {
|
langs: {
|
||||||
saveclose: "Zapisz",
|
saveclose: 'Zapisz',
|
||||||
label: "Obrazek",
|
label: 'Obrazek',
|
||||||
close: "Zamknij",
|
close: 'Zamknij',
|
||||||
removefile: "<?=lang('pagebuilder_core_section_image_removefile')?>",
|
removefile: "<?=lang('pagebuilder_core_section_image_removefile')?>",
|
||||||
fileupload: "<?=lang('pagebuilder_core_section_image_fileupload')?>",
|
fileupload: "<?=lang('pagebuilder_core_section_image_fileupload')?>",
|
||||||
scaling: "Skalowanie",
|
scaling: 'Skalowanie',
|
||||||
scalingyes: "Tak",
|
scalingyes: 'Tak',
|
||||||
scalingno: "Nie",
|
scalingno: 'Nie',
|
||||||
proportions: "Proporcje",
|
proportions: 'Proporcje',
|
||||||
height: "Wysokość",
|
height: 'Wysokość',
|
||||||
width: "Szerokość",
|
width: 'Szerokość',
|
||||||
ratio: "Radio",
|
ratio: 'Radio',
|
||||||
href: "Adres URL",
|
href: 'Adres URL',
|
||||||
alt: "Tekst alternatywny",
|
alt: 'Tekst alternatywny',
|
||||||
title: "Tytuł",
|
title: 'Tytuł'
|
||||||
},
|
},
|
||||||
modalBox: false,
|
modalBox: false,
|
||||||
items: [],
|
items: [],
|
||||||
text: '',
|
text: '',
|
||||||
name: '',
|
name: '',
|
||||||
alt: '',
|
alt: '',
|
||||||
href: '',
|
href: '',
|
||||||
title: '',
|
title: '',
|
||||||
width: 1800,
|
width: 1800,
|
||||||
height: 600,
|
height: 600,
|
||||||
ratio: 'crop',
|
ratio: 'crop',
|
||||||
figcaption: '',
|
figcaption: '',
|
||||||
ratios: ['crop', 'auto', 'width', 'height'],
|
img_lightbox: true,
|
||||||
scales: [{
|
ratios: ['crop', 'auto', 'width', 'height'],
|
||||||
"key": "nie",
|
scales: [
|
||||||
"value": "Nie"
|
{
|
||||||
}, {
|
key: 'nie',
|
||||||
"key": "tak",
|
value: 'Nie'
|
||||||
"value": "Tak"
|
},
|
||||||
}],
|
{
|
||||||
scale: "Nie"
|
key: 'tak',
|
||||||
|
value: 'Tak'
|
||||||
}
|
}
|
||||||
|
],
|
||||||
|
scale: 'Nie'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted: function () {
|
||||||
|
console.log('mount image', this.modelValue)
|
||||||
|
this.alt = this.modelValue && this.modelValue.alt ? this.modelValue.alt : this.alt
|
||||||
|
this.title = this.modelValue && this.modelValue.title ? this.modelValue.title : this.title
|
||||||
|
this.name = this.modelValue && this.modelValue.name ? this.modelValue.name : this.name
|
||||||
|
this.text = this.modelValue && this.modelValue.text ? this.modelValue.text : this.text
|
||||||
|
this.width = this.modelValue && this.modelValue.width ? this.modelValue.width : this.width
|
||||||
|
this.height = this.modelValue && this.modelValue.height ? this.modelValue.height : this.height
|
||||||
|
this.ratio = this.modelValue && this.modelValue.ratio ? this.modelValue.ratio : this.ratio
|
||||||
|
this.scale = this.modelValue && this.modelValue.scale ? this.modelValue.scale : this.scale
|
||||||
|
this.href = this.modelValue && this.modelValue.href ? this.modelValue.href : this.href
|
||||||
|
this.figcaption =
|
||||||
|
this.modelValue && this.modelValue.figcaption ? this.modelValue.figcaption : this.figcaption
|
||||||
|
this.img_lightbox =
|
||||||
|
this.modelValue && this.modelValue.img_lightbox
|
||||||
|
? this.modelValue.img_lightbox
|
||||||
|
: this.img_lightbox
|
||||||
|
if (this.modelValue.open) this.modalBox = true
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
'b-modal': MagicoModal
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
removeItem: function () {
|
||||||
|
this.$emit('itemRemoved', this.modelValue)
|
||||||
},
|
},
|
||||||
mounted: function () {
|
chooseImage: function () {
|
||||||
console.log('mount image', this.modelValue);
|
if (this.$filechooser) {
|
||||||
this.alt = (this.modelValue && this.modelValue.alt) ? this.modelValue.alt : this.alt;
|
let vm = this
|
||||||
this.title = (this.modelValue && this.modelValue.title) ? this.modelValue.title : this.title;
|
this.$filechooser.open({
|
||||||
this.name = (this.modelValue && this.modelValue.name) ? this.modelValue.name : this.name;
|
chooseCallback: function (ev) {
|
||||||
this.text = (this.modelValue && this.modelValue.text) ? this.modelValue.text : this.text;
|
vm.text = ev.publicUrl
|
||||||
this.width = (this.modelValue && this.modelValue.width) ? this.modelValue.width : this.width;
|
}
|
||||||
this.height = (this.modelValue && this.modelValue.height) ? this.modelValue.height : this.height;
|
})
|
||||||
this.ratio = (this.modelValue && this.modelValue.ratio) ? this.modelValue.ratio : this.ratio;
|
} else {
|
||||||
this.scale = (this.modelValue && this.modelValue.scale) ? this.modelValue.scale : this.scale;
|
alert('No FileChooser implemented')
|
||||||
this.href = (this.modelValue && this.modelValue.href) ? this.modelValue.href : this.href;
|
}
|
||||||
this.figcaption = (this.modelValue && this.modelValue.figcaption) ? this.modelValue.figcaption : this.figcaption;
|
|
||||||
|
|
||||||
if (this.modelValue.open) this.modalBox = true;
|
|
||||||
},
|
},
|
||||||
components: {
|
onCloseModal: function () {
|
||||||
'b-modal': MagicoModal,
|
this.modalBox = false
|
||||||
|
this.$emit('update:modelValue', {
|
||||||
|
name: this.name,
|
||||||
|
text: this.text,
|
||||||
|
height: this.height,
|
||||||
|
width: this.width,
|
||||||
|
ratio: this.ratio,
|
||||||
|
scale: this.scale,
|
||||||
|
alt: this.alt,
|
||||||
|
href: this.href,
|
||||||
|
title: this.title,
|
||||||
|
figcaption: this.figcaption,
|
||||||
|
img_lightbox: this.img_lightbox
|
||||||
|
})
|
||||||
},
|
},
|
||||||
methods: {
|
setText: function (item) {
|
||||||
removeItem: function () {
|
this.text = 'files/images/' + item
|
||||||
this.$emit('itemRemoved', this.modelValue);
|
this.$emit('update:modelValue', {
|
||||||
},
|
name: this.name,
|
||||||
chooseImage: function () {
|
text: this.text,
|
||||||
if (this.$filechooser) {
|
height: this.height,
|
||||||
let vm = this;
|
width: this.width,
|
||||||
this.$filechooser.open({
|
ratio: this.ratio,
|
||||||
chooseCallback: function (ev) {
|
scale: this.scale,
|
||||||
vm.text = ev.publicUrl
|
alt: this.alt,
|
||||||
}
|
href: this.href,
|
||||||
})
|
title: this.title,
|
||||||
}else{
|
figcaption: this.figcaption,
|
||||||
alert('No FileChooser implemented')
|
img_lightbox: this.img_lightbox
|
||||||
}
|
})
|
||||||
},
|
|
||||||
onCloseModal: function () {
|
|
||||||
this.modalBox = false;
|
|
||||||
this.$emit('update:modelValue', {
|
|
||||||
name: this.name,
|
|
||||||
text: this.text,
|
|
||||||
height: this.height,
|
|
||||||
width: this.width,
|
|
||||||
ratio: this.ratio,
|
|
||||||
scale: this.scale,
|
|
||||||
alt: this.alt,
|
|
||||||
href: this.href,
|
|
||||||
title: this.title,
|
|
||||||
figcaption: this.figcaption,
|
|
||||||
})
|
|
||||||
},
|
|
||||||
setText: function (item) {
|
|
||||||
this.text = 'files/images/' + item;
|
|
||||||
this.$emit('update:modelValue', {
|
|
||||||
name: this.name,
|
|
||||||
text: this.text,
|
|
||||||
height: this.height,
|
|
||||||
width: this.width,
|
|
||||||
ratio: this.ratio,
|
|
||||||
scale: this.scale,
|
|
||||||
alt: this.alt,
|
|
||||||
href: this.href,
|
|
||||||
title: this.title,
|
|
||||||
figcaption: this.figcaption,
|
|
||||||
})
|
|
||||||
},
|
|
||||||
modalOpen: function () {
|
|
||||||
this.modalBox = !this.modalBox;
|
|
||||||
//this.getItems();
|
|
||||||
},
|
|
||||||
|
|
||||||
},
|
},
|
||||||
|
modalOpen: function () {
|
||||||
};
|
this.modalBox = !this.modalBox
|
||||||
|
//this.getItems();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
Reference in New Issue
Block a user