Crossrider external js file not loading :PDFJS is not defined - javascript

Below are my codes in extension.js. If you look at the codes, I tried different ways to load the file to my extension. No matter what, I always getting
VM3051:15 Uncaught ReferenceError: PDFJS is not defined
Tried with putting the file in different locations.
appAPI.ready(function($) {
console.log("pdf min js loading");
appAPI.resources.includeJS('jspdf.js');
// appAPI.resources.includeJS('js/jspdf.js');
// appAPI.resources.includeRemoteJS('//cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js');
//$.globalEval(appAPI.resources.get('//cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js'));
console.log("done");
setTimeout(function(){
alert(window.location.href);
if(window.location.href.indexOf(".pdf") > -1) {
console.log("its a pdf");
alert("pdf");
var doc = new jsPDF();
}else{
alert($.trim($('div').find('h1,h2,h3,h4,h5,p,span').text()));
}
},6000);
});
Here is the file structure
I cannot modify manifest.json because the extension should be unique for all the browsers not just for chrome.

I'm confused, the two CloudFlare URLs in your code reference the project jsPDF. I would assume the local pdf.js does the same too.
In your code, you're using
PDFJS.getDocument();
This syntax comes from PDF.js which is a totally different project from Mozilla.
If you're sticking with jsPDF, your code should be something like:
var doc = new jsPDF();
doc.text(20, 20, 'Hello world.');
doc.save('Test.pdf');
Or you'll need to include the correct library for PDF.js.
After the edits you've made and your comments, it seems you've switch completely over to jsPDF but you're still getting the same error which clearly mentions PDF.js.
Are you sure you're debugging the correct and last version of your app which is only using jsPDF?
I've setup a small reproduction example on Crossrider using only jsPDF.
The extension.js code is the following:
appAPI.ready(function($) {
console.log("pdf min js loading");
appAPI.resources.includeJS('jspdf.js');
console.log("done");
var doc = new jsPDF();
console.log(doc);
});
When debugging the extension, I'm getting this result:
doc is an object containing an instance of jsPDF which I can later use.
There should be no mention of PDF.js whatsoever. My only guess could be that you're running / debugging a version of your extension still containing references to this project.

Related

Open a directory of images into separate layers using Adobe extension

I am developing an Adobe extension, from within the extension I want to load a directory of images into separate layers within a document. I am completely impartial to how this is done - so if there is a better approach, please share it with me. My current working method involves using the open() method which opens a file in a new document, then duplicate the layer of the new document into the original document. An example of this can be seen below.
// open new document
var originalDoc = app.activeDocument;
var doc = open( new File( filePath ) );
// duplicate to original document
var layer = doc.activeLayer;
var newLayer = layer.duplicate(originalDoc, ElementPlacement.PLACEATBEGINNING);
// close new document
doc.close(SaveOptions.DONOTSAVECHANGES);
This method is extraordinarily slow, especially for large images. After doing some Googling I discovered that Photoshop has a built-in method for creating an image stack. This feature uses a .jsx script itself and it can be found on GitHub. Looking around online I found a few people trying to load a folders contents as layers, perfect. The main code I was interested in is below.
var folder = new Folder('~/Desktop/MyFolder');
function runLoadStack(folderPath) {
var loadLayersFromScript = true;
// #include 'Load Files into Stack.jsx'
var fList = folder.getFiles('*.png')
var aFlag = true;
loadLayers.intoStack(fList, aFlag);
}
runLoadStack(folder)
I immediately noticed the #include method of importing the stack methods, I can not find any official documentation for this (also not friendly with minification). Also, if the script is not placed with the same directory as Load Files into Stack.jsx it will throw the error Unable to open file: anonymous. And even after solving all of these issues when I run the .jsx script from within my extension using $.evalFile() I am having the same error as if the script is not in the correct directory: Unable to open file: anonymous. Error is being thrown on line 762 of an imported jsx.
Any help resolving the error I am experiencing or simply on how to load an array of image paths into layers (faster method) will be greatly appreciated!
Here is the code I am using within my extension:
var loadLayersFromScript = true;
var strPresets = localize("$$$/ApplicationPresetsFolder/Presets=Presets");
var strScripts = localize("$$$/PSBI/Automate/ImageProcessor/Photoshop/Scripts=Scripts");
var jsxFilePath = app.path + "/" + strPresets + "/" + strScripts + "/Load Files into Stack.jsx";
$.evalFile( new File( jsxFilePath ) );
loadLayers.intoStack( new Folder("/c/Users/Me/teststack").getFiles(), true );
Photoshop's inbuilt scripts has a script to do this here's the github link
https://github.com/ES-Collection/Photoshop-Scripts/blob/master/Import%20Folder%20As%20Layers.jsx
use this script inside your CEP extension

How do I load antlr/index into ace worker js file?

I am following the instruction given here to integrate antlr4 with ace editor and I have trouble at the step var antlr4 = require('antlr4/index');. The author mentions that here we should use require for nodejs. However, ACE has another require that may cause problems. Thus he loaded another script for nodejs require and load antlr4/index with require in that script.
I tried that one, too. But it always cannot find the script. From the console of my browser, I can see the path it loads the script is:
localhost:4200/./antlr4/index.js and it fails to load it.
I am using Angular 7, and the structure of my project is as follows:
Also, when loading some local javascript file using importScripts, I always fails by giving the local path, however, giving URL from CDN will always work. But importScripts should support local file importing.
Where should I make changes and what else methods should I try?
Here are some of my code:
var ace_require = require;
window.require = undefined;
var Honey = { 'requirePath': ['..'] };
//importScript{"require.js"}
//the script can't be imported through importSctipt so I pasted the
//whole script file under...(not shown here)
var antlr4_require = window.require; // antlr4_require:antlr using nodejs require;
window.require = require = ace_require; // require:ace using its own require
var antlr4, LPMLNLexer, LPMLNParser;
try {
window.require = antlr4_require;
antlr4 = antlr4_require('antlr4/index');
//the browser stuck here reporting error...
} finally {
window.require = ace_require;
}

Creating Photoshop Plugin - trying to find simpler way to source file in javascript function

I'm creating a plugin I would like to be used for both Mac and Windows.
As the file trees are different, I would like to find a simpler way to source a file in a function contained in my /host/index.jsx file.
My file is located at /files/thisismyfile.psd
Currently I can only successfully source it by entering the full file tree from the main hard drive:
var fileRef = new File("/Library/Application Support/Adobe/CEP/extensions/com.my.panel/files/thisismyfile.psd");
I would much prefer to use something like:
var fileRef = new File("./files/thisismyfile.psd");
I've also tried testing having the file in each other folder and simply searching for:
var fileRef = new File("thisismyfile.psd");
With no luck! Any ideas?
Failing that, is it possible to code it so that it says:
"If this is mac, then search for the file here. If this is windows, then search for the file here."?
I ended up using this script to determine the location of the file depending on whether the system being used is mac or windows.
function isMacOS() {
return ($.os.toLowerCase().indexOf('mac') >= 0);
}
var fileRef = isMacOS()
? new File("/Library/Application Support/Adobe/CEP/extensions/my.panel/files/filename.psd")
: new File("C:\Program Files\Common Files\Adobe\CEP\extensions\my.panel\files\filename.psd");
var docRef = app.open(fileRef);
};

Save pdf directly to file using jspdf

My script is a Firefox addon so has access to sensitive code like access to filesystem etc.
I display a Panel populated with html content, I could easily send input to the addon code using postMessage
When I run the code below a pdf is generated and a download prompt is shown so i can select directory to place file, but I'd like to save the file using javascript directly to a file in background without the download prompt showing.
Something like: doc.saveToFile("/path/to/file") // custom method in my addon code
Would this be possible using the jsPDF object?
<html>
<head>
<script type='text/javascript' src='jspdf.source.js'></script>
</head>
<body>
Hey
<script>
var doc = new jsPDF();
doc.text(20, 20, 'Hello bob');
doc.save('test.pdf');
</script>
</body>
</html>
This should work on your Firefox add-on code:
const { OS } = require("resource://gre/modules/osfile.jsm");
var pathToFile = OS.Path.join("path", "to", "file.pdf");
var doc = new jsPDF();
doc.text(20, 20, 'Hello bob');
var ab = doc.output('arraybuffer');
var u8 = new Uint8Array(ab);
OS.File.writeAtomic(pathToFile, u8).then(
function()
{
alert('File written!');
},
function(e)
{
alert('Error ' + e);
}
);
If you aren't using the Add-On SDK, but rather a normal extension, replace the first line with:
const { OS } = Components.utils.import("resource://gre/modules/osfile.jsm", {});
Check this out for further info on OS.File: https://developer.mozilla.org/en-US/docs/JavaScript_OS.File/OS.File_for_the_main_thread
But why you don't wanna use your add-on? I think that you don't be able to access the filesystem or things like that, with jsPDF or pdf.js (http://mozilla.github.io/pdf.js/, which is a mozilla project), you will be able to print something that is being displayed on the window, but not sure if you can access some local files.

Read local file in Phonegap

I'm trying to read a local file in Phonegap to load the language strings for the application and I can't make it work :(
The code is pretty straightforward:
var pathToLocalFile = "/home/user/android/assets/www/js/";
var langCache = new FileReader();
langCache.onload = function(data){
col = JSON.parse(data);
refreshAllStrings();
};
langCache.onerror = function(err){
debug.error(err);
};
langCache.readAsText(pathToLocalFile+currentLang+'.json');
This code doesn't work on the Ripple emulator and I replaced it with
var pathToLocalFile = "file:///android_asset/www/js/";
in case of android, with the same result:
Uncaught TypeError: Object #<Console> has no method 'warning' cordova-2.4.0.js:2616
initRead cordova-2.4.0.js:2616
FileReader.readAsText cordova-2.4.0.js:2660
loadLanguage
In the Ripple emulator, I started Chrome with google-chrome -–allow-file-access-from-files and the Android config and manifest has all the permissions for and the plugins set.
Of course I'm missing something, but any idea what this could be?
Regards.
If the file is under the www folder of your app you don't need to add '/home/..' or 'file:///'. You should just be able to load the contents using an "AJAX" fetch even though it is bundled in the app.
$.get('js/filename.ext');
The error you're seeing is actually a result of cordova-2.4.0.js calling a non-existent "warning" method. It should be console.warn. It is attempting to warn you that using a string for the readAsText method is now deprecated, and that you should use a File reference instead.
What should be happening is a console.warn of "Using a string argument with FileReader.readAs functions is deprecated."

Categories

Resources