META-INF.resources.primefaces-extensions.documentviewer.changes.txt Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of primefaces-extensions Show documentation
PrimeFaces Extensions components and utilities for PrimeFaces.
There is a newer version: 14.0.7.1
Show newest version
1. Download latest pdf.js

2. Combine the following files into pdf.viewer.js in order. compatibility.js > l10n.js > pdf.js > viewer.js = pdf.viewer.js

3. Copy GruntFile.js and package.json to the downloaded PDF.js\web\ directory.

4. Execute to convert images to data URI:
	npm install
	npm install -g grunt-cli
	grunt dataUri  https://github.com/ahomu/grunt-data-uri --force
	
package.json

{
  "name": "pdf.js",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-jshint": "~0.10.0",
    "grunt-contrib-nodeunit": "~0.4.1",
    "grunt-contrib-uglify": "~0.5.0",
    "grunt-data-uri": "^0.3.0"
  }
}

GruntFile.js

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    dataUri: {
      dist: {
        // src file
        src: ['viewer.css'],
        // output dir
        dest: 'viewer-data.css',
        options: {
          // specified files are only encoding
          target: ['images/*.*'],
          // adjust relative path?
          fixDirLevel: true,
          // img detecting base dir
          // baseDir: './'
      
          // Do not inline any images larger
          // than this size. 2048 is a size
          // recommended by Google's mod_pagespeed.
          maxBytes : 3048
      
        }
      }
  }
  });

  // Load the plugin that provides the "uglify" task.
   grunt.loadNpmTasks('grunt-data-uri');

};

5. Replace all mask-image CSS styles that use variables to directly use the base64 encoded images as it doesn't work using the variables.

6. Compress the CSS from #4 and place right into the  of the viewer.html

7. Edit pdf.viewer.js and replace in two places checks for Primefaces URL.

In 1l10.js replace this..
             if (match) { // @import rule?
                loadImport(baseURL + match[1], nextEntry);
                return;
              }
			  
with:

              match = reImport.exec(line);
              if (match) { // @import rule?
                var url = window.parent.PrimeFaces.getFacesResource('documentviewer/locale/' + match[1],
                    window.parent.PrimeFacesExt.RESOURCE_LIBRARY,
                    window.parent.PrimeFacesExt.VERSION);
                loadImport(url, nextEntry);
                return;
              }

And change this variable:
  PDFJS.workerSrc = window.parent.PrimeFaces.getFacesResource('documentviewer/pdf.worker.js',
            window.parent.PrimeFacesExt.RESOURCE_LIBRARY,
            window.parent.PrimeFacesExt.VERSION);

 return new Promise(function (resolve, reject) {
        var url =window.parent.PrimeFaces.getFacesResource('documentviewer/cmaps/'+ name + (_this.isCompressed ? '.bcmap' : ''),
            window.parent.PrimeFacesExt.RESOURCE_LIBRARY,
            window.parent.PrimeFacesExt.VERSION);
        var request = new XMLHttpRequest();

      image.src = window.parent.PrimeFaces.getFacesResource('documentviewer/images/'+ 'annotation-' + this.data.name.toLowerCase() + '.svg',
            window.parent.PrimeFacesExt.RESOURCE_LIBRARY,
            window.parent.PrimeFacesExt.VERSION);

Remove this check...
    if (fileOrigin !== viewerOrigin) {
      throw new Error('file origin does not match viewer\'s');
    }

8. Fix the Locale

https://stackoverflow.com/questions/64915575/how-to-force-set-locale-in-pdf-js

async _initializeL10n() {
    var hash = document.location.hash.substring(1);
    var hashParams = (0, _ui_utils.parseQueryString)(document.location.hash.substring(1));
    this.l10n = this.externalServices.createL10n({
        locale: ('locale' in hashParams) ? hashParams['locale'] : _app_options.AppOptions.get("locale")
    });
    const dir = await this.l10n.getDirection();
    document.getElementsByTagName("html")[0].dir = dir;
}

https://stackoverflow.com/questions/29407188/how-to-localize-pdf-js-toolbar

defaultOptions.locale = {
    value: typeof navigator !== "undefined" ? navigator.language : "en-US",
    kind: OptionKind.VIEWER
  };
  
to

  defaultOptions.locale = {
    value:  new URLSearchParams(document.location.hash.substring(1)).get("locale"),
    kind: OptionKind.VIEWER
  };
  
9. Compress and minify pdf.worker.js.

10. In the /web/locale directory of the distribution run this DOS script..

@echo off
for /r %%a in (viewer.ftl) do for %%b in ("%%~dpa\.") do ren "%%~a" "%%~nxb.locale.txt"
pause

This renames all viewer.ftl correctly.  Then move the new XX.locale.txt files into the /locale folder of PFE.

Also make sure there is an "en" file which you can just copy "en-US" and make it "en".