Add "Pop Out" button for preview

This commit is contained in:
Cram42 2022-11-12 19:02:38 +08:00
parent af0872dc23
commit 60ef5686ab

View file

@ -18,12 +18,23 @@
flex-direction: column; flex-direction: column;
} }
.l2p-root > label { .l2p-root > .l2p-top {
display: flex;
flex-direction: row;
align-items: end;
}
.l2p-root > .l2p-top > label {
flex: 1;
font-size: 0.9em; font-size: 0.9em;
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
.l2p-root > .l2p-top > .l2p-pop-button {
padding: 3px 6px;
}
.l2p-root > iframe { .l2p-root > iframe {
flex: 1; flex: 1;
overflow: auto; overflow: auto;
@ -63,7 +74,15 @@
.concat('?', $.param(params), '#toolbar=0'); .concat('?', $.param(params), '#toolbar=0');
}, },
previewURL: '' _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); }
})); }));
}); });
@ -71,6 +90,9 @@
@endpush @endpush
<div x-data="label2_preview" x-init="_init" class="l2p-root"> <div x-data="label2_preview" x-init="_init" class="l2p-root">
<label for="label2-preview">Preview</label> <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>
<iframe id="label2-preview" x-bind:src="previewURL"></iframe> <iframe id="label2-preview" x-bind:src="previewURL"></iframe>
</div> </div>