snipe-it/resources/views/partials/label2-preview.blade.php

99 lines
3 KiB
PHP
Raw Normal View History

2022-11-10 22:23:02 -08:00
@once
@push('css')
<style>
:root {
2024-06-06 13:28:05 -07:00
--l2p-height: 200px;
2022-11-10 22:23:02 -08:00
--l2p-background-color: aliceblue;
}
.l2p-root,
.l2p-root * {
box-sizing: border-box;
}
.l2p-root {
width: 100%;
height: var(--l2p-height);
display: flex;
flex-direction: column;
}
2022-11-12 03:02:38 -08:00
.l2p-root > .l2p-top {
display: flex;
flex-direction: row;
align-items: end;
}
.l2p-root > .l2p-top > label {
flex: 1;
2022-11-10 22:23:02 -08:00
font-size: 0.9em;
padding: 0;
margin: 0;
}
2022-11-12 03:02:38 -08:00
.l2p-root > .l2p-top > .l2p-pop-button {
padding: 3px 6px;
}
2022-11-10 22:23:02 -08:00
.l2p-root > iframe {
flex: 1;
overflow: auto;
background-color: var(--l2p-background-color);
}
</style>
@endpush
@endonce
@push('js')
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('label2_preview', () => ({
_form: null,
_init: function() {
this._form = this.$root.closest('form');
this._form.addEventListener('change', this.updateURL.bind(this));
},
updateURL: function() {
let params = {
settings: Object.assign({}, ...$(this._form)
.serializeArray()
.filter((value, index, all) => value.name.includes('label2_'))
.map((value, index, all) => ({[value.name]: value.value}))
)
};
let template = params.settings.label2_template;
if (!template) return;
this.previewURL = '{{ route("labels.show", ["labelName" => ":label"]) }}'
.replace(':label', template.replaceAll('\\', '/'))
.concat('?', $.param(params), '#toolbar=0');
},
2022-11-12 03:02:38 -08:00
_previewURL: '',
get previewURL() { return this._previewURL; },
set previewURL(url) {
this._previewURL = url;
if (this._popped) this._popped.location = this.previewURL;
},
_popped: null,
popout: function() { this._popped = window.open(this.previewURL); }
2022-11-10 22:23:02 -08:00
}));
});
</script>
@endpush
<div x-data="label2_preview" x-init="_init" class="l2p-root">
2022-11-12 03:02:38 -08:00
<div class="l2p-top">
<label for="label2-preview">Preview</label>
<button class="l2p-pop-button btn btn-default" x-on:click.prevent="popout" title="Pop Out"><i class="fa-solid fa-maximize"></i></button>
</div>
2022-11-10 22:23:02 -08:00
<iframe id="label2-preview" x-bind:src="previewURL"></iframe>
</div>