section image lightbox
This commit is contained in:
@@ -1,200 +1,228 @@
|
||||
|
||||
<template>
|
||||
<div class="row m-0 p-0 align-items-center">
|
||||
|
||||
<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="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 class="row m-0 p-0 align-items-center">
|
||||
<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="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>
|
||||
<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>
|
||||
<script>
|
||||
import MagicoModal from './../MagicoModal.vue'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
modelValue: Object,
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
langs: {
|
||||
saveclose: "Zapisz",
|
||||
label: "Obrazek",
|
||||
close: "Zamknij",
|
||||
removefile: "<?=lang('pagebuilder_core_section_image_removefile')?>",
|
||||
fileupload: "<?=lang('pagebuilder_core_section_image_fileupload')?>",
|
||||
scaling: "Skalowanie",
|
||||
scalingyes: "Tak",
|
||||
scalingno: "Nie",
|
||||
proportions: "Proporcje",
|
||||
height: "Wysokość",
|
||||
width: "Szerokość",
|
||||
ratio: "Radio",
|
||||
href: "Adres URL",
|
||||
alt: "Tekst alternatywny",
|
||||
title: "Tytuł",
|
||||
},
|
||||
modalBox: false,
|
||||
items: [],
|
||||
text: '',
|
||||
name: '',
|
||||
alt: '',
|
||||
href: '',
|
||||
title: '',
|
||||
width: 1800,
|
||||
height: 600,
|
||||
ratio: 'crop',
|
||||
figcaption: '',
|
||||
ratios: ['crop', 'auto', 'width', 'height'],
|
||||
scales: [{
|
||||
"key": "nie",
|
||||
"value": "Nie"
|
||||
}, {
|
||||
"key": "tak",
|
||||
"value": "Tak"
|
||||
}],
|
||||
scale: "Nie"
|
||||
props: {
|
||||
modelValue: Object
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
langs: {
|
||||
saveclose: 'Zapisz',
|
||||
label: 'Obrazek',
|
||||
close: 'Zamknij',
|
||||
removefile: "<?=lang('pagebuilder_core_section_image_removefile')?>",
|
||||
fileupload: "<?=lang('pagebuilder_core_section_image_fileupload')?>",
|
||||
scaling: 'Skalowanie',
|
||||
scalingyes: 'Tak',
|
||||
scalingno: 'Nie',
|
||||
proportions: 'Proporcje',
|
||||
height: 'Wysokość',
|
||||
width: 'Szerokość',
|
||||
ratio: 'Radio',
|
||||
href: 'Adres URL',
|
||||
alt: 'Tekst alternatywny',
|
||||
title: 'Tytuł'
|
||||
},
|
||||
modalBox: false,
|
||||
items: [],
|
||||
text: '',
|
||||
name: '',
|
||||
alt: '',
|
||||
href: '',
|
||||
title: '',
|
||||
width: 1800,
|
||||
height: 600,
|
||||
ratio: 'crop',
|
||||
figcaption: '',
|
||||
img_lightbox: true,
|
||||
ratios: ['crop', 'auto', 'width', 'height'],
|
||||
scales: [
|
||||
{
|
||||
key: 'nie',
|
||||
value: '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 () {
|
||||
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;
|
||||
|
||||
if (this.modelValue.open) this.modalBox = true;
|
||||
chooseImage: function () {
|
||||
if (this.$filechooser) {
|
||||
let vm = this
|
||||
this.$filechooser.open({
|
||||
chooseCallback: function (ev) {
|
||||
vm.text = ev.publicUrl
|
||||
}
|
||||
})
|
||||
} else {
|
||||
alert('No FileChooser implemented')
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'b-modal': MagicoModal,
|
||||
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,
|
||||
img_lightbox: this.img_lightbox
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
removeItem: function () {
|
||||
this.$emit('itemRemoved', this.modelValue);
|
||||
},
|
||||
chooseImage: function () {
|
||||
if (this.$filechooser) {
|
||||
let vm = this;
|
||||
this.$filechooser.open({
|
||||
chooseCallback: function (ev) {
|
||||
vm.text = ev.publicUrl
|
||||
}
|
||||
})
|
||||
}else{
|
||||
alert('No FileChooser implemented')
|
||||
}
|
||||
},
|
||||
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();
|
||||
},
|
||||
|
||||
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,
|
||||
img_lightbox: this.img_lightbox
|
||||
})
|
||||
},
|
||||
|
||||
};
|
||||
modalOpen: function () {
|
||||
this.modalBox = !this.modalBox
|
||||
//this.getItems();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user