OJS 3 Lens Reader needs a back button

Much like the PDF reader, the Lens Reader really needs a small topbar with a back button to leave the rendered XML. At present, if you click through a few links/figures etc. you will have to press the browser back button as many times as links you’ve clicked on, which is not very user friendly.

1 Like

Yep, This is very annoying problem. Another one is that elens reader is not mobile friendly.

I have already tried to do something with with and can say, that it is impossible to inject something in the body of the html file, that is created by lens.js without the modification of latter itself. And lens.js is to big and complex, especially 2.0 version.

Hi @Vitaliy & all,

Have you given this feedback to the eLens team? I’d suggest finding an issue tracker or forum for that tool and letting them know.

Regards,
Alec Smecher
Public Knowledge Project Team

Greetings @Richard_Pilbery and @asmecher
I have contacted with the developer and he gave me a hint how to do this in simple way (add “back” button).
After some coding I propose this variant:

  1. Download the latest version of Lens viewer from here https://github.com/elifesciences/lens/releases. Needed file is lens-2.0.0.zip. There are fixes that will help to avoid eternal loading problem if xml document.

  2. Create new javascript file in the directory …/lib/lens/lensAdd.js

  3. Add this lines in it:
    $(document).ready(function(){
    $(“body”).prepend("< a class=“back-button” href="./">Back");
    });
    place between “<” and “a class=” was left because this code actually makes this element on forum.

  4. Add this line in /templates/display.tpl:
    <script src="{$pluginLensPath}/lensAdd.js" defer></script>
    it should be placed just above this line: <script type="text/javascript">{literal}

  5. The last thing is modifying …/lib/lens/lens.css. Just add the style for button:
    .back-button {
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 30000;
    padding: 9.5px;
    border-left: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    color: black;
    font-size: 13px;
    }

    .back-button:hover {
    background-color: rgba(0, 0, 0, 0.05);
    }

Code example: https://github.com/Vitaliy-1/OJSLensPlugin

It should to be noted that back button will load before the main text. This is how it looks on our site: https://e-medjournal.com/index.php/psp/article/view/11/9 (top right corner)

2 Likes

Hi @Vitaliy,

Excellent, thanks for sharing this!

Regards,
Alec Smecher
Public Knowledge Project Team

Hi @Vitaliy thanks for your sharing, I looked at your journal and I like very much. I would like to ask you about How you generate the JATS XML files which you show through the Lens viewer?. I have a JATS XML file generated for the Open Typesetting Stack of PKP from an article.docx and my xml file is correctly rendered for the Lens viewer however I have the doubt if there are other ways for generate an JATS XML files. I hope you can answer and thanks a lot for your time.

Greetings.
I use the way through Open Typesetting stack. But it also needs some manual rendering. It is about twice/3 times quicker than doing all this manually. Don’t know a better way.

1 Like