Fix styling on the plugin demo.

This commit is contained in:
Aiosa 2024-10-21 10:00:53 +02:00
parent 3c6c7e0ab7
commit d5cdf59993

View File

@ -86,11 +86,11 @@
<p>You should see two plugins interacting. You can change the order of plugins and the logics!</p> <p>You should see two plugins interacting. You can change the order of plugins and the logics!</p>
</section> </section>
<div style="display: flex; flex-direction: row;"> <div style="display: flex; flex-direction: row; flex-wrap: wrap;">
<section class="demo" id="demo" style="width: 800px; height: 600px"></section> <section class="demo" id="demo" style="width: 800px; height: 600px"></section>
<div> <div>
<textarea id="scriptInput" rows="25" cols="120" placeholder="" style="height: 450px"> <textarea id="scriptInput" rows="25" cols="120" placeholder="" style="height: 470px">
// window.pluginA must be defined! draw small gradient square // window.pluginA must be defined! draw small gradient square
window.pluginA = async function(e) { window.pluginA = async function(e) {
const tile = e.tile; const tile = e.tile;
@ -117,7 +117,7 @@ window.pluginB = async function(e) {
window.orderPluginA = 1; window.orderPluginA = 1;
window.orderPluginB = 0; window.orderPluginB = 0;
</textarea> </textarea>
<textarea style="height: 120px" disabled> <textarea style="height: 120px; background-color: #e5e5e5" disabled>
// Application of the plugins done automatically: // Application of the plugins done automatically:
viewer.addHandler('tile-loaded', window.pluginA, null, window.orderPluginA); viewer.addHandler('tile-loaded', window.pluginA, null, window.orderPluginA);
viewer.addHandler('tile-invalidated', window.pluginA, null, window.orderPluginA); viewer.addHandler('tile-invalidated', window.pluginA, null, window.orderPluginA);
@ -131,10 +131,6 @@ viewer.requestInvalidate();
</div> </div>
<script> <script>
const viewer = window.viewer = OpenSeadragon({ const viewer = window.viewer = OpenSeadragon({
id: "demo", id: "demo",