StackMap for DPU and UIC

[gibsonjc]

@cedelis @eschell @fellowsgl (I'm not sure which of you to tag.)

DPU asked on RT 99262 if we could try putting the same StackMap code that they already have in VuFind 0.6 into the header of New VuFind to see if it will work "as is".

<!-- STACKMAP CHANGES BEGIN HERE -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script> 
<script src="https://www.stackmap.com/integration/depaul_vufind/StackMap.js" type="text/javascript"></script> 
<link rel="stylesheet" media="all" type="text/css" href="https://www.stackmap.com/integration/depaul_vufind/StackMap.css" />
<!-- STACKMAP CHANGES END HERE -->

For background, we implemented this for them in VuFind 0.6 in RT 82442

[gibsonjc]

To be clearer: let's try to put DPU's StackMap code on the TEST server for /vf-dpu/ to start to see if it works "as is" or not.

[cedelis]

I added the StackMap code on TEST for DPU. It does not work "as is":

https://i-share-test.carli.illinois.edu/vf-dpu/Search/Results?lookfor=&type=AllFields

So, it appears that there need to be customizations made to the following (javascript and/or CSS) in order for it to work probably with this new version of VuFind:

https://www.stackmap.com/integration/depaul_vufind/StackMap.js https://www.stackmap.com/integration/depaul_vufind/StackMap.css

Obviously, if they wish to support both the "old" and "new" versions, they would need to create a separate set of these files, e.g.,

https://www.stackmap.com/integration/depaul_new_vufind/StackMap.js https://www.stackmap.com/integration/depaul_new_vufind/StackMap.css

[gibsonjc]

This page reinforces that DPU needs to get new custom URLs from StackMap and describes where the code should be inserted: https://vufind.org/wiki/administration:third-party_add-ons:stackmaps

[gibsonjc]

On 7/20, I received a personal email from UIC (due to RT 100143) that said that StackMap staff are going to work on scripts for DPU and UIC for the VuFind version 4.x catalog. (As we suspected, StackMap staff said the scraping logic in DPU's existing 0.6 script is specific to 0.6.)

[gibsonjc]

@cedelis and if needed, @eschell : Please try to install the two scripts below on TEST for UIC and DPU, respectively, according to the instructions at https://vufind.org/wiki/administration:third-party_add-ons:stackmaps

From StackMap staff on RT 100868: "So we've finished creating the VuFind v4 scripts for both DePaul and UIC! Would you be so kind as to pass the script along to CARLI so that DePaul's v4 integration is pushed through as well?"

UIC -- VuFind v4:

<?php
return array(
'extends' => 'bootstrap3',
'js' => [
'https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js',
'https://www.stackmap.com/integration/uic-vufind/StackMap.js',
],
'css' => array(
'https://www.stackmap.com/integration/uic-vufind/StackMap.css',
),
);

DePaul -- VuFind v4:

<?php
return array(
'extends' => 'bootstrap3',
'js' => [
'https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js',
'https://www.stackmap.com/integration/depaul_vufindv4/StackMap.js',
],
'css' => array(
'https://www.stackmap.com/integration/depaul_vufindv4/StackMap.css',
),
);

[cedelis]

In Test.

[gibsonjc]

This script works to add the Map indicator to the Location on the Results Page, but it seems to have a nasty side effect of make the "check boxes" next to the Exclude facets look like broken characters in Firefox, and a little funny in Chrome. Neither shows the nicely rounded check boxes anymore.

Even more importantly, the visual toggling on and off of the check boxes do not work in either Firefox or Chrome; it always looks like an unchecked box.

For the record, Safari seems to look and toggle on/off fine.

[gibsonjc]

UIC has updated code for VuFind 4 now per RT 100868. (No changes to DPU code.) Please replace what is on TEST for UIC with the following:

<?php
return array(
 'extends' => 'bootstrap3',
 'js' => [
     'https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js',
     'https://www.stackmap.com/integration/uic-vufindv4/StackMap.js',
 ],
 'css' => array(
      'https://www.stackmap.com/integration/uic-vufindv4/StackMap.css',
 ),
);

[gibsonjc]

@cedelis UIC has more updated code for StackMap in VuFind 4 per RT 102169. Please replace what is currently on TEST for UIC with the following:

<!-- STACKMAP CHANGES BEGIN HERE -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<script src="https://www.stackmap.com/integration/uic-vufindv4/StackMap.js" type="text/javascript"></script>
<link rel="stylesheet" media="all" type="text/css" href="https://www.stackmap.com/integration/uic-vufindv4/StackMap.css" />
<!-- STACKMAP CHANGES END HERE -->

[cedelis]

@gibsonjc : I added the new css and js references to UIC on TEST. BTW, I accomplished this not by adding in the script and link reference tags noted above (STACKMAP CHANGES BEGIN HERE), but instead by configuring theme.config.php to include those reference. NOTE: I had to do this because otherwise VuFind would load two copies of jquery.min.js (CARLI's version is 2.1.1 and UIC's older version 1.11.1) which causes problems. It seems that CARLI's version (2.1.1) works okay (at least, I no longer receive javascript errors).

/usr/local/vufind$ more themes/uic/theme.config.php:

 'carli',
    'js' => array(
        'https://www.stackmap.com/integration/uic-vufindv4/StackMap.js',
    ),
    'css' => array(
        'https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css',
        'https://www.stackmap.com/integration/uic-vufindv4/StackMap.css',
    ),
);

[gibsonjc]

@cedelis Thank you! It looks like the problem with the "Exclude" checkboxes not being checked or looking odd (see entry above on July 25) is no longer occurring in any browser version I have tried. I will ask UIC to review this on TEST.

[cedelis]

@gibsonjc BTW, just a reminder that DPU still does not work. Their js and css files are wreaking havoc with our javascript (open a javascript console and notice the error messages).

[gibsonjc]

UIC staff report on RT 102169 that their StackMap code on TEST is ready to be moved to PROD at our convenience.

[cedelis]

UIC's changes are now in PROD.

[gibsonjc]

@cedelis DPU says that StackMap has also worked on their code and provided these new URLs:

https://www.stackmap.com/integration/depaul_vufindv4/StackMap.css https://www.stackmap.com/integration/depaul_vufindv4/StackMap.js

Can you implement these for DPU on TEST as you did for UIC? Thanks!

[cedelis]

@gibsonjc I have made the changes and it does not look good. It breaks a lot of stuff. See attached image showing javascript errors.

[gibsonjc]

@cedelis New code from StackMap for DPU. Can you try this on vf-dpu TEST when you get a moment? Thanks!

Code Snippet

<!-- STACKMAP CHANGES BEGIN HERE -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<script src="https://www.stackmap.com/integration/depaul_vufindv4/StackMap.js" type="text/javascript"></script>
<link rel="stylesheet" media="all" type="text/css" href="https://www.stackmap.com/integration/depaul_vufindv4/StackMap.css" />
<!-- STACKMAP CHANGES END HERE -->

[cedelis]

@gibsonjc Looks better now. I wonder if it's because this time I decided to also include:

https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js

which is an older version of the library that vufind4 core uses. BTW, I am not sure how to replace the new with the old, so I didn't; I simply added it alongside the new version. Might want to test across different browsers.

Here's the latest themes/dpu/theme.config.php file:

return array(
    'extends' => 'carli',
    'js' => array(
        'https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js',
        'https://www.stackmap.com/integration/depaul_vufindv4/StackMap.js',
    ),
    'css' => array(
        'https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css',
        'https://www.stackmap.com/integration/depaul_vufindv4/StackMap.css',
    ),
);

[gibsonjc]

@cedelis The Map button appears correctly (it seems to me), but unfortunately I'm still seeing the display problems with our "Exclude" check boxes under Narrow Search on the Results page. In Firefox they look like missing characters, in Chrome the check boxes aren't checked when you have applied them, etc. as documented above in my screenshots of July 25. I wonder why DPU isn't working like UIC if you've implemented them the same way.

[cedelis]

@gibsonjc There's the difference between their implementations in that UIC's works with the more recent version of jquery (v2.1.1) wheras DPU's does not. I was able to get DPU's to almost work by including the older jquery library: https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js

I wonder if it would be in DPU's interest to migrate their code so that it works with v2.1.1? Or better yet: perhaps use UIC as a template.

[cedelis]

@gibsonjc I decided to re-use UIC's boilerplate stackmap code and kept only DPU's StackMap object. It seems to work a lot better now. I wonder if they'd mind it if we used this version instead. It's currently hosted on our server ( https://i-share-test.carli.illinois.edu/vf-dpu/themes/carli/js/vendor/dpu_stackmap.js?_=1540322006 ), but they can host it on theirs if they wish.

[gibsonjc]

@cedelis StackMap staff report: "We've concluded our work on the detail record buttons! We noticed that the code snippet is being loaded in by copying the contents of DePaul's VuFind v4 javascript http://stackmap.com/integration/depaul_vufindv4/StackMap.js and CSS http://stackmap.com/integration/depaul_vufindv4/StackMap.css files that we're hosting. Is this format being used for testing purposes? Regardless, these files have been updated on our end and will need to be updated on your end in order to view the changes."

I decided to re-use UIC's boilerplate stackmap code and kept only DPU's StackMap object. It seems to work a lot better now. I wonder if they'd mind it if we used this version instead. It's currently hosted on our server ( https://i-share-test.carli.illinois.edu/vf-dpu/themes/carli/js/vendor/dpu_stackmap.js?_=1540322006 ), but they can host it on theirs if they wish.