diff --git a/atlas/templates/atlas/collection_viva.html b/atlas/templates/atlas/collection_viva.html index 2a9b76bb..3b15cf8b 100644 --- a/atlas/templates/atlas/collection_viva.html +++ b/atlas/templates/atlas/collection_viva.html @@ -2,17 +2,20 @@ {% block content %}
- Instructions + Instructions

This set up is designed to allow you to project/share cases in a seperate window whilst controlling/tracking their display from this page.

-

Click on the 'Load' button to open the case in a new window/tab, this should be positioned on it's own window (you may have to detach the tab). Opening subsequent cases/series will replace the first case in the window.

-

It is also possible to open a single series by clicking on the 'Load' button next to the indvidual series.

+

First you will need to open the linked viewer window by clicking the 'Open Viewer' button. This will open a new window/tab with the viewer in it. You will probably need to detach this from your current window.

+

If you are sharing the window you can maximise the screen area by hiding the tab/bookmark bar and the address bar. In Microsoft Edge this can be done by installing as an app, in Chrome you can use an extension such as Open-as-Popup.

+

Click on the 'Load' button to open the case in a the linked window. Loading subsequent cases/series will replace the first case in the window.

+

It is also possible to open a single series by clicking on the 'Load' button next to the individual series.

Once opened the case details will be show on the right hand side of the page.

Cases

- + +
    {% for case in cases %} @@ -21,11 +24,11 @@
    Case {{forloop.counter}}: {{case.title}}   {% comment %} {% endcomment %} {% comment %} {% endcomment %} - + {% comment %} {% endcomment %}
    -
    Series: +
    Series: {% for series in case.series.all %} @@ -35,7 +38,8 @@ {% comment %} {% endcomment %} -
    @@ -53,7 +57,8 @@
    -

    Open Case

    +

    Current Case

    +
    Waiting for case to load in linked window.
    If you are seeing this message you probably need to open the viewer window and reload the case.
    None
    @@ -73,6 +78,15 @@ $(document).ready(function() { const bc = new BroadcastChannel("test_channel"); + bc.onmessage = (event) => { + console.log("message received"); + console.log(event); + if (event.data.type == "open-complete") { + $("#loading-case").hide(); + $("#open-viewer").removeClass("flash-button"); + //bc.postMessage({"type": "open-complete", "url" : event.data.url}); + } + }; console.log('ready') $('.show-collection, .show-case, .show-series').click(function() { var url = $(this).data('target'); @@ -90,6 +104,8 @@ case_details = c.data('case-json'); console.log(case_details); + $('#loading-case').show() + $("#open-viewer").addClass("flash-button"); $('#current-case-title').text("Case: "+c.data('title')); $("#current-case-history").text("History: "+case_details['history']); $("#current-case-discussion").text("Discussion: "+case_details['discussion']); @@ -115,9 +131,15 @@ bc.postMessage(url); }) $('#open-viewer').click(function() { + $("#open-viewer").removeClass("flash-button"); openSecondaryWindow("{% url 'atlas:collection_viewer' %}"); //bc.postMessage(url); }) + $('#view-series').click(function() { + $(".series-detail").attr("open", (_, attr) => !attr); + //document.getElementsByClassName("series-detail").toggleAttribute("open"); + //bc.postMessage(url); + }) }); function openSecondaryWindow(url) { @@ -128,4 +150,30 @@ {{ form.media }} -{% endblock %} \ No newline at end of file +{% endblock %} + + +{% block css %} + + +{% endblock css %} + \ No newline at end of file diff --git a/atlas/templates/atlas/viewer.html b/atlas/templates/atlas/viewer.html index 5a998fce..e01c3bda 100644 --- a/atlas/templates/atlas/viewer.html +++ b/atlas/templates/atlas/viewer.html @@ -32,6 +32,7 @@ console.log(event); if (event.data.type == "open") { document.getElementById("viewer").src = event.data.url; + bc.postMessage({"type": "open-complete", "url" : event.data.url}); } }; }); diff --git a/rad/static/css/anatomy.css b/rad/static/css/anatomy.css index 4b86b9e3..587c2303 100644 --- a/rad/static/css/anatomy.css +++ b/rad/static/css/anatomy.css @@ -130,6 +130,7 @@ button:hover { background-color: #52057b; } + button a { text-decoration: none; color: inherit;