I have two components, a "DirectoryViewer" and a "MediaViewer", that I created. The Directory Viewer displays a list of file names and contains a MediaViewer component to show the selected file. This setup is functioning properly.
Within the DirectoryViewer, the MediaViewer is displayed using a zone:
<t:zone t:id="MediaViewZone" id="MediaViewZone">
<t:MediaViewer fileToShow="fileToShow"/>
</t:zone>
When a user clicks on a filename link, the fileToShow property is updated and the zone is refreshed accordingly:
Object onActionFromFileSelection(File file) {
this.fileToShow = file;
return MediaViewZone.getBody(); // AJAX request, returning zone's body
}
This setup prevents the whole page from refreshing when switching between files, providing a better user experience.
The MediaViewer has three blocks for displaying different types of media. Currently, it supports text, pdf, or image files. For images specifically, I want to incorporate zoom functionality using a JavaScript library.
Up until this point, everything is working as expected.
However, when an image file is selected, the corresponding block should display like this:
<t:block id="image">
<section id="focal">
<h1>Use the mousewheel to zoom on a focal point</h1>
<div class="parent">
<div class="panzoom">
<image src="${FileLink}"/>
</div>
</div>
<div class="buttons">
<button class="zoom-in">Zoom In</button>
<button class="zoom-out">Zoom Out</button>
<input type="range" class="zoom-range"></input>
<button class="reset">Reset</button>
</div>
<script src="${context:layout/js/jquery.mousewheel.run.js}"></script>
</section>
</t:block>
The issue arises when the script inside the block does not get executed initially. Upon inspecting the source code, the script is missing. However, if I perform a hard refresh (CTRL + F5), the script appears and runs successfully. It seems that the script is not executing when returned within the AJAX zone. The reason behind this behavior could be related to how the onActionFromFileSelection method functions or if there is a need to use eval() to trigger the browser to process the script. This problem has me puzzled.
I've spent a considerable amount of time trying to resolve these issues but haven't found a definite solution yet. 1) Why does the script disappear from view source after loading the zone by clicking a file? 2) How can I ensure that the JavaScript loads when showing the image block?
Your assistance in resolving this matter would be greatly appreciated.