/UBHD-Lens

UBHD-Lens

Primary LanguageJavaScript

Description

Browser-based HTML Viewer for Journal Articles and Monographs based on JATS Standard XML files.based on elifescience Lens Viewer.

Functionality for BITS (Book extension for JATS) is limited and constantly improved.

Lens library

New changes

  • TRP issue # 12442
  • Fix missing heading levels in Contents panel view
  • Remove abstract details from Cover view
  • Add Abstract as top level heading
  • Present abstract contents (paragraphs) under Abstract view

Implemented Extensions

Feature Ready Live Links in monographs
Audio/Video from external repositories ✓ demo
Citation blocks (with unique IDs) ✓ demo
Citations containing tables ✓ demo
Footnotes formatting support ✓ demo
Footnotes internal navigation into references ✓ demo
Clickable Images ✓ demo
Paragraph formatting using CSS-Stylesheets ✓
Quotes (unique ids, formatting supported) ✓ demo
Right scrollbar reader panel ✓ demo
Section metadata for monographs
- Section authors/contributors / translators and display role ✓ demo
- Section title ✓ demo
- Section Abstract ✓ demo
Speech-Element ✓ demo
Table display in reading panel ✓ demo
Table (unique id for reference) ✓ demo
Table formatting using JATS XML Attributes and CSS-Stylesheets ✓ Local example
Resizable reader panel 👷
Software Source-code in Lens 👷 ticket

Feature limitations

Feature Value Remarks
Browser support Google Chrome, Firefox, Opera, Microsoft Edge , Safari Limited support for internet explorer
Minimum recommended resolution 768 * 1024 (iPad) Although smaller resolutions may work

Installation

# Clone source repository 
git clone https://github.com/ParthoShuvo/UBHD-Lens.git
cd UBHD-Lens

# Install npm for your distribution e.g. sudo apt-get install npm

# Install gulp
npm -g install gulp gulp-sass gulp-uglify browserify gulp-rename through2 path gulp-livereload rename st

#  install submodues
npm install

# build project
npm run build
or
gulp

Development

Run built project in dist folder

use Live Server extension in vs code

Run server application

npm start

Integration procedure for external services

command exaplanation
gulp Complies the lens distribution in the dist folder
Copy dist folder Copy folder into the external environment
Change index.html file according to the environment make sure the XML file is loaded accordingly and the lens.css and lens.js are in the correct paths, if you rename them.

Integration examples

wep2py application

Open Journal Systems

Developer