vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 00:42:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

ZoomIn and zoomOut props added

Browse source
This commit is contained in:
Olgu Örs Başak 2023-04-10 13:35:15 +03:00
parent fd29176b48
commit 5f57291418
3 changed files with 53 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

36
components/lib/image/Image.vue
View file

@ -21,13 +21,13 @@
</slot>
</button>
<button class="p-image-action p-link" @click="zoomOut" type="button" :disabled="zoomDisabled" :aria-label="zoomOutAriaLabel">
<button class="p-image-action p-link" @click="zoomOut" type="button" :disabled="isZoomOutDisabled" :aria-label="zoomOutAriaLabel">
<slot name="zoomout">
<SearchMinusIcon />
</slot>
</button>
<button class="p-image-action p-link" @click="zoomIn" type="button" :disabled="zoomDisabled" :aria-label="zoomInAriaLabel">
<button class="p-image-action p-link" @click="zoomIn" type="button" :disabled="isZoomInDisabled" :aria-label="zoomInAriaLabel">
<slot name="zoomin">
<SearchPlusIcon />
</slot>
@ -92,6 +92,14 @@ export default {
indicatorIcon: {
type: String,
default: undefined
},
zoomInDisabled: {
type: Boolean,
default: false
},
zoomOutDisabled: {
type: Boolean,
default: false
}
},
mask: null,
@ -126,7 +134,13 @@ export default {
onPreviewImageClick() {
this.previewClick = true;
},
onMaskClick() {
onMaskClick(event) {
const isActionbarTarget = [event.target.classList].includes('p-image-action') || event.target.closest('.p-image-action');
if (isActionbarTarget) {
return;
}
if (!this.previewClick) {
this.previewVisible = false;
this.rotate = 0;
@ -192,6 +206,11 @@ export default {
if (focusTarget) {
focusTarget.focus();
}
},
hidePreview() {
this.previewVisible = false;
this.rotate = 0;
this.scale = 1;
}
},
computed: {
@ -213,8 +232,11 @@ export default {
imagePreviewStyle() {
return { transform: 'rotate(' + this.rotate + 'deg) scale(' + this.scale + ')' };
},
zoomDisabled() {
return this.scale <= 0.5 || this.scale >= 1.5;
isZoomInDisabled() {
return this.zoomInDisabled || this.scale >= 1.5;
},
isZoomOutDisabled() {
return this.zoomOutDisabled || this.scale <= 0.5;
},
rightAriaLabel() {
return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.rotateRight : undefined;
@ -298,6 +320,10 @@ export default {
align-items: center;
}
.p-image-action.p-link[disabled] {
opacity: 0.5;
}
.p-image-preview {
transition: transform 0.15s;
max-width: 100vw;