Silverstripe framework issues

Page: 1

Author Post
Member
Registered: Aug 2015
Posts: 4
I've previously used Floatbox for other sites and recommended it to colleagues. I'm now attempting to integrate it with a site written in the Common Web Platform, a hosted installation of the Silverstripe framework that's used by hundreds of public sector websites here in New Zealand.

It appears the JS and CSS are successfully loaded into my page header. At the console command line I can type
fb.version
and get the result "6.1.0". However, typing
fb.key
returns "undefined" and
fb.key()
returns "TypeError: fb.key is not a function".

When clicked, simple links such as the following do nothing.
<p>Click <a class="floatbox" href="assets/Uploads/vehicletesting09-img3.jpg">this link</a> to display a single image.</p>
<p><a class="floatbox" href="#div_hiddencontent">Click here</a> to display some text content from a hidden div on the page</p>
<div id="div_hiddencontent" class="hidden">
<p>This is content stored on page load in a hidden div, and loaded into a modal dialog when the corresponding link is clicked.</p>
<p>This content can be anything, including images and cheese sandwiches.</p>
<img title="" src="assets/Uploads/vehicletesting09-img3.jpg" alt="" />
<p>OK, we lied about the cheese sandwiches.</p>
</div>


If I go back to the console and enter
fb.start("#div_hiddencontent")
nothing happens either.

Trawling through the DOM after clicking or attempting to run fb.start from the console shows only a single (possible) floatbox reference:
<fbtrash id="fbTrash" style="display: none;"></fbtrash>


Where and how should I try to diagnose these issues?
Administrator
Registered: Aug 2008
Posts: 3382
The quickest way to diagnose the problem would be to link me in to a page that is failing. I'll be able to tell quite quickly what's going on if I can see it.

It may not have anything to do with the framework that's being used. It sounds like the dynamic loading of options.js or core_610.js is failing. One likely possibility for why this might occur is a problem with the Floatbox installation - either missing files, files mixed in from older versions, or corrupt files.

Make sure the full Floatbox install is present and is using the folder structure that's present in the downloaded .zip file. Make sure the files are not corrupt and have not been modified. Add any custom settings into the options.js file that shipped with the download, and don't use options.js from an older version. Show me the page if you can.
Member
Registered: Aug 2015
Posts: 4
Thanks for your prompt response.

Currently I'm working on my local dev machine. We have two test servers I could deploy to, but both are behind firewalls and I can't post access credentials in a public forum.

Here are two screenshots from Firebug (if only it would generate printable output!).
- The fb object in the DOM after page load.
- The first n nodes of fb.data expanded.

I installed the latest download from floatboxjs without altering the directory structure: there are no previous versions of Floatbox present on this site. I can vouch that both options.js and core_610.js, as well as the floatbox image and language resources, are accessible at the paths listed in the fb DOM object.

I should note that CWP has a tight Content Security Policy, and it's often difficult to get JavaScript libraries to work as designed. However, I'm keen to install and purchase Floatbox for this site, and then publish a "how to" for other CWP sites.
Administrator
Registered: Aug 2008
Posts: 3382
fb.data.Z.zn.licenseKey --> NaN is highly suspicious. Make sure the licenseKey entry in options.js is a simple quoted string, even if empty, and see what happens.

Great if you could email your existing options.js file before making any changes. You can use the contact form under this site's Support menu entry, or this forum's email facility (click my 'admin' username).
Member
Registered: Aug 2015
Posts: 4
Thanks,

I've sent the file, although it is the original from the download zip.

I've also sent access to a test instance of CWP with a Floatbox test page added.

I appreciate your help.
Member
Registered: Aug 2015
Posts: 4
Thanks for your diagnosis: the Content Security Policy is the issue. I've added floatbox.js's SHA hash as an exclusion and the library now works. Now I just need to get approval for that deviation from Security and Architecture.

One issue: clicking on either of the examples I first posted above results in the floatbox opening twice. Any thoughts?
Administrator
Registered: Aug 2008
Posts: 3382
I've lost access to the test page so can't give a definitive answer as to why a floatbox link might be opening twice.

The only other time I've seen such behaviour is when another "lightbox" package was active alongside Floatbox and the links were configured to open in both libraries.

Page: 1