OJS 3 Lens Reader needs a back button

Feature Requests
,
1

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.

2 Likes
2

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.

3

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

4

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 Releases · elifesciences/lens · GitHub. 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: GitHub - Vitaliy-1/OJSLensPlugin: Lens viewer plugin for OJS3

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
5

Hi @Vitaliy,

Excellent, thanks for sharing this!

Regards,
Alec Smecher
Public Knowledge Project Team

6

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.

7

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
8

Hi @Vitaliy,

Thanks for this tip. It would really be helpful if I could get it to work. However, I have followed your instructions, but I still see no back button.

The JavaScript Console in Chrome shows the following error:

10.150.35.17:6510/journal.cosecsa.org/plugins/generic/lensGalley/lib/lens/lensAdd.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)

Any troubleshooting advice would be greatly appreciated.

Best wishes,
Andrew

9

Hi @11AM,

Custom JS should be added after Lens loads the DOM. I don’t remember if there were other problems, it was a long time ago and the journal doesn’t use Lens Viewer anymore.

according to the error, the file is missing or the path is incorrect.

1 Like
10

Thanks for the reply. It prompted me to check the location of lensAdd.js, and of course, it was in …/lib/lens/lib instead of …/lib/lens :man_facepalming:

I moved it to the correct folder and—problem solved.

And, yes, I’ve seen your site and that you’ve moved on from Lens Viewer. I hope to move in that direction eventually. I have quite a bit to learn first.

Thanks again.

1 Like