core_image
This commit is contained in:
@@ -18,6 +18,10 @@ export default {
|
||||
'core_section_html': {
|
||||
label: 'Pole HTML',
|
||||
svg: '<svg version="1.1" height="128" width="128" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><g><g><path d="M467,0H45C20.187,0,0,20.187,0,45v422c0,24.813,20.187,45,45,45h422c24.813,0,45-20.187,45-45V45C512,20.187,491.813,0,467,0z M482,467c0,8.271-6.729,15-15,15H45c-8.271,0-15-6.729-15-15V150h452V467z M482,120H30V45c0-8.271,6.729-15,15-15h422c8.271,0,15,6.729,15,15V120z"/></g></g><g><g><path d="M127.213,316l49.393-49.393c5.858-5.858,5.858-15.356,0-21.214c-5.857-5.858-15.355-5.858-21.213,0l-60,60c-5.858,5.858-5.858,15.355,0,21.213l60,60c5.857,5.857,15.355,5.858,21.213,0c5.858-5.858,5.858-15.355,0-21.213L127.213,316z"/></g></g><g><g><path d="M416.607,305.393l-60.001-60c-5.857-5.858-15.355-5.858-21.213,0c-5.858,5.858-5.858,15.355,0,21.213L384.787,316l-49.393,49.393c-5.858,5.858-5.858,15.355,0,21.213c5.857,5.857,15.355,5.858,21.213,0l60-60C422.465,320.748,422.465,311.251,416.607,305.393z"/></g></g><g><g><path d="M290.744,211.77c-7.862-2.621-16.354,1.628-18.974,9.487l-60,180c-2.62,7.859,1.628,16.354,9.487,18.974c7.861,2.62,16.355-1.629,18.974-9.487l60-180C302.85,222.884,298.603,214.389,290.744,211.77z"/></g></g><g><g><path d="M106,60H76c-8.284,0-15,6.716-15,15s6.716,15,15,15h30c8.284,0,15-6.716,15-15S114.284,60,106,60z"/></g></g><g><g><path d="M196,60h-30c-8.284,0-15,6.716-15,15s6.716,15,15,15h30c8.284,0,15-6.716,15-15S204.284,60,196,60z"/></g></g><g><g><path d="M286,60h-30c-8.284,0-15,6.716-15,15s6.716,15,15,15h30c8.284,0,15-6.716,15-15S294.284,60,286,60z"/></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>'
|
||||
},
|
||||
'core_section_image': {
|
||||
label: 'Obrazek',
|
||||
svg: '<svg version="1.1" id="Capa_1" height="128" width="128" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><g><g><path d="M446.575,0H65.425C29.349,0,0,29.35,0,65.426v381.149C0,482.65,29.349,512,65.425,512h381.15C482.651,512,512,482.65,512,446.574V65.426C512,29.35,482.651,0,446.575,0z M481.842,446.575c0,19.447-15.821,35.267-35.267,35.267H65.425c-19.447,0-35.268-15.821-35.268-35.267v-55.007l99.255-84.451c3.622-3.082,8.906-3.111,12.562-0.075l62.174,51.628c5.995,4.977,14.795,4.569,20.304-0.946L372.181,209.77c2.67-2.675,5.783-2.935,7.408-2.852c1.62,0.083,4.695,0.661,7.078,3.596l95.176,117.19V446.575z M481.842,279.865l-71.766-88.366c-7.117-8.764-17.666-14.122-28.942-14.701c-11.268-0.57-22.317,3.672-30.294,11.662L212.832,326.681l-51.59-42.839c-14.959-12.422-36.563-12.293-51.373,0.308l-79.712,67.822V65.426c0-19.447,15.821-35.268,35.268-35.268h381.15c19.447,0,35.267,15.821,35.267,35.268V279.865z"/></g></g><g><g><path d="M161.174,62.995c-40.095,0-72.713,32.62-72.713,72.713c0,40.094,32.619,72.713,72.713,72.713s72.713-32.619,72.713-72.713S201.269,62.995,161.174,62.995z M161.174,178.264c-23.466,0-42.556-19.091-42.556-42.556c0-23.466,19.09-42.556,42.556-42.556c23.466,0,42.556,19.091,42.556,42.556S184.64,178.264,161.174,178.264z"/></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>'
|
||||
}
|
||||
},
|
||||
axios: null,
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div style="min-height: 100px;" :class="value.name">
|
||||
|
||||
<b-modal v-model="modalAddBox" class_other="modal-xl" v-on:onClose="modalAddBox = false" title="Dodaj widżet" >
|
||||
<b-modal v-model="modalAddBox" class_other="modal-xl" v-on:onClose="modalAddBox = false" title="Dodaj widżet">
|
||||
|
||||
<div>
|
||||
<DropdownSectionSection v-on:input="clickAdd" v-model="opcja">
|
||||
@@ -53,6 +53,7 @@ import MagicoModal from './MagicoModal.vue'
|
||||
import SectionText from './plugin/SectionText.vue'
|
||||
import SectionTextarea from './plugin/SectionTextarea.vue'
|
||||
import SectionHtml from './plugin/SectionHtml.vue'
|
||||
import SectionImage from './plugin/SectionImage.vue'
|
||||
|
||||
import DropdownSectionSection from './DropdownSectionSection.vue'
|
||||
|
||||
@@ -64,7 +65,9 @@ export default {
|
||||
'b-modal': MagicoModal,
|
||||
'core_section_textarea': SectionTextarea,
|
||||
'core_section_text': SectionText,
|
||||
'core_section_html':SectionHtml,
|
||||
'core_section_html': SectionHtml,
|
||||
'core_section_image': SectionImage,
|
||||
|
||||
DropdownSectionSection
|
||||
|
||||
},
|
||||
@@ -85,7 +88,7 @@ export default {
|
||||
var a = { name: item, open: true }
|
||||
this.value.items.push(a);
|
||||
this.onChange();
|
||||
this.opcja='';
|
||||
this.opcja = '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
200
src/components/plugin/SectionImage.vue
Normal file
200
src/components/plugin/SectionImage.vue
Normal file
@@ -0,0 +1,200 @@
|
||||
|
||||
<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.value }}
|
||||
</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>
|
||||
</template>
|
||||
<script>
|
||||
import MagicoModal from './../MagicoModal.vue'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
value: 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"
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
console.log('mount image', this.value);
|
||||
this.alt = (this.value && this.value.alt) ? this.value.alt : this.alt;
|
||||
this.title = (this.value && this.value.title) ? this.value.title : this.title;
|
||||
this.name = (this.value && this.value.name) ? this.value.name : this.name;
|
||||
this.text = (this.value && this.value.text) ? this.value.text : this.text;
|
||||
this.width = (this.value && this.value.width) ? this.value.width : this.width;
|
||||
this.height = (this.value && this.value.height) ? this.value.height : this.height;
|
||||
this.ratio = (this.value && this.value.ratio) ? this.value.ratio : this.ratio;
|
||||
this.scale = (this.value && this.value.scale) ? this.value.scale : this.scale;
|
||||
this.href = (this.value && this.value.href) ? this.value.href : this.href;
|
||||
this.figcaption = (this.value && this.value.figcaption) ? this.value.figcaption : this.figcaption;
|
||||
|
||||
if (this.value.open) this.modalBox = true;
|
||||
},
|
||||
components: {
|
||||
'b-modal': MagicoModal,
|
||||
},
|
||||
methods: {
|
||||
removeItem: function () {
|
||||
this.$emit('itemRemoved', this.value);
|
||||
},
|
||||
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('input', {
|
||||
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('input', {
|
||||
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();
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user