1

I tried different solutions given here, here and here. But I get nothing to work, probably missing something small and simple.

I have this variable in a .js File: 

var dziFilesUrl = 'http://localhost:3000/openseadragon/highres/{{ entry.kelimImageData }}/';
var dziData = '<?xml version="1.0" encoding="UTF-8"?><Image xmlns="http://schemas.microsoft.com/deepzoom/2008" Format="jpeg" Overlap="1" TileSize="254"><Size Height="5097" Width="3600"/></Image>';

where I want the entry.kelimImageData coming from the Backend.

In my .twig File i have this: 

{% includeJsFile "/assets/js/openseadragon-custom-dzi.js" %}

{% set myJs %}
  tileSourceFromData('{{entry.kelimImageData}}');
{% endset %} 

{% includeJs myJs %}`

My openseadragon-custom-dzi.js File looks like this (modified to make it not so long) 

var dziFilesUrl = 'http://localhost:3000/openseadragon/highres/{{ entry.kelimImageData }}/';
var dziData = '<?xml version="1.0" encoding="UTF-8"?><Image xmlns="http://schemas.microsoft.com/deepzoom/2008" Format="jpeg" Overlap="1" TileSize="254"><Size Height="5097" Width="3600"/></Image>';

var tileSourceFromData = function(data, filesUrl) {
  var $xml = $($.parseXML(data));
  var $image = $xml.find('Image');
  var $size = $xml.find('Size');
  var dzi = {
    Image: {
      xmlns: $image.attr('xmlns'),
      Url: filesUrl,
      Format: $image.attr('Format'),
      Overlap: $image.attr('Overlap'),
      TileSize: $image.attr('TileSize'),
      Size: {
        Height: $size.attr('Height'),
        Width: $size.attr('Width')
      }
    }
   return dzi;
  }; 
}

var viewer = OpenSeadragon({
  ...
  tileSources: tileSourceFromData(dziData, dziFilesUrl)
});
Henrik
  • 425
  • 2
  • 10

1 Answers1

1

Craft 3

According to the craft 3 js docs

We'll need to adjust some things as follows:

Twig

We no longer need to tell craft which File we're editing as it now simply inserts a <script> tag with the contents at the end of the <body> tag. (Can be adjusted, see position docs.)

{% js %}
// define our vars
var dziFilesUrl = "http://localhost:3000/openseadragon/highres/{{ entry.kelimImageData }}/";
var dziData = "{{ entry.kelimImageData }}";
//Call our function
tileSourceFromData(dziData, dziFilesUrl);
{% endjs %}

JS

Remove the dziFilesUrl declaration from openseadragon-custom-dzi.js & and other files you declare this variable in.

And that about sums it up, if any error does occur, please inform me of whatever error your browser console spews out or otherwise any error craft presents.

Craft 2

I'm gonna guess that you're using craft cms v2 as I only found includeJS in the craft 2 docs.

Adjust your twig as follows:

{%includeJsFile "" %}

{% set myJs %}
  // here you're setting the vars which use the twig variables for them to be available later on in the JS
  var dziFilesUrl = "http://localhost:3000/openseadragon/highres/{{ entry.kelimImageData }}/";
  var dziData = "{{ entry.kelimImageData }}";

  // you could even still call your `tileSourceFromData` function here
  tileSourceFromData(dziData, dziFilesUrl);
{% endset %} 

{% includeJs myJs %}`

And then remove the setting of those vars in your openseadragon-custom-dzi.js.

This should:

  1. Set the vars with the backend data in the Footer (see docs)
  2. Call the tileSources function in the footer as you did before.
  3. Allow you to use the dziFilesUrl and the dziData variables anywhere else in your JS with the backend data as their values.

Beware: This JS is getting executed in the footer according to the docs so you need to either start your function call from within the twig myJs or when the full page is loaded, otherwise you'll run into undefined variables.

Sidenote: you were calling your tileSourceFromData function in the twig with only one arg, instead of the required two before, this is also adjusted in my answer.

Campiotti
  • 313
  • 1
  • 8
  • Thanks. But its not working yet. First thing i was not aware of, is that there is a difference between craft 2 & 3. So i changed {%includeJsFile "" %}to {% js "" %}. But i get an error: "Uncaught SyntaxError: Invalid regular expression flags", which i cannot find. Between the "" in {% js "" %} i have to put the path to the js file, right? And what do you mean by "then remove the setting of those vars..."? Should i remove the vars in the .js File? – Henrik Dec 07 '19 at 08:41
  • that's what I was implying yes, since you're setting / "creating" those vars in your craft js part, there's no need to also declare them in your acutal .js file (also this'll prevent them from being overwritten from double-declarations) – Campiotti Dec 09 '19 at 09:05
  • 1
    @Henrik I've updated my answer to include a craft 3 part at the top, if you follow that guide you should hopefully be able to fix your issue.

    There's no longer any need for the "/path/to/file.js" in {% js "" %} as it's been changed (see linked docs in updated answer), now you just do {% js %}

     – Campiotti Dec 09 '19 at 09:25
  • thanks a lot. just found some time to try your solution. I edited the code example in my initial questions, because i think you are missing something with the second var, because i did not mention it correctly. The var dziData is not the twig variable, but is part of the javascript for image zoom to work (Tile Images made by Deepzoom to work in Openseadragon Viewer). – Henrik Dec 13 '19 at 12:20
  • When i follow your instruction, i get the error in the console: dziData is not defined. When i leave the var=dziData like in my inital question, the console.log of the image gives me something like this: "http://localhost:3000/openseadragon/highres/O:28:"craftelementsdbAssetQuery":85:{s:8:"volumeId";N;s:..." and so on. Encoding Issue? – Henrik Dec 13 '19 at 12:30
  • That looks more like debug output which is also "cleaned" so no injections can occur, both of those things are not really what we want in this case...

    I'll try and look around in the docs to see if I can find anything, not sure what could be causing this type of output currently.

    I don't think it's an encoding issue though.

     – Campiotti Dec 16 '19 at 06:51