Add photoswipe or similar to allow figure image zooming

[geealbers]

All figure images should be viewable in the full browser window, at whatever size they are provided in with modest zooming as possible. Photoswipe is fine, though could also use something less featured if you wanted. This is a feature that should ultimately come packaged in the Quire starter, and given that we're also supporting tiles zoom and a lot of other features, I think this one can be fairly simple.

[egardner]

Ok, so this is in progress but it is going to be a little more complicated than it was in Roman Mosaics, because the way we are structuring content and what constitutes a figure has gotten more complicated.

You can see the start of this process here: 6601a7106eb4f10d16a37039e0dc026560a5b7ff. I've made a photoswipe branch off of first-pages. The basic lightbox feature is working, but it gets confused about which element you want when you click.

Here's the question that we need to think about before this feature can be completed: <figure> elements can both be self-contained (figure with a single image and figcaption) as well as nested figure groups, with individual images wrapped in figure elements but sharing a figcaption. Then there are the non-image figures (tables, etc) which will need to be handled a little differently, but I want to get images working properly first.

We need some way to designate the "root-level" figures which do not contain other sub-figures so that photoswipe knows what to work with. This could be as simple as just adding some kind of class like js-lightbox-figure that will only be used for this purpose. Also, presumably in cases of figure groups we'd want the multiple child figures to pull from the parent figure group's caption for each image in the lightbox, correct?

I'm confident we can get this working without a whole lot of additional work, but we need to explicitly decide what kind of behavior we want here first.

[geealbers]

Understood. While it would be nice to have the captions, those grouped captions do make things tricky. Not just because they may require an extra step/logic for photoswipe to grab them for each associated image in the group, but because they'll often be written as if all the associated images are indivudally labeled and in view. For example, "As seen in image (a) blah blah blah, while in image (b) ...". For that reason, I think we should forgo the captions altogether and just show the images. At least for this alpha version of Quire.

For grabbing the images, we could certainly add js-lightbox-figure class, though as it stands now, all the images, whether individual or in groups, do already share a common core which is consistently classed q-figure__wrapper, and which perhaps could also be used?

<div class="q-figure__wrapper">
  <img src="..." />
</div>

[egardner]

Ok, I have this working for the various different forms of figures and figure captions now. This is one of the first times I've had to use a recursive process in a real-world project.

The basic gist is, if you want to find the proper figcaption element for a given figure, do the following:

1. Check for a <figcaption> tag immediately inside the given element.
2. Recursively walk up the DOM tree looking for any "sibling" <figcaption> elements. In some cases you might have to go as many as two levels "up" from the starting point.
3. If both of these tests fail, return null and assume there is no caption.

function findCaption(figure) {
  if (figure.querySelector("figCaption")) {
    return figure.querySelector("figCaption").textContent
  } else if (searchUpTree(figure, "figCaption")) {
    return searchUpTree(figure, "figCaption").textContent
  } else {
    return null
  }
}

function searchUpTree(el, query) {
  while (el.parentNode) {
    el = el.parentNode;
    if (el.querySelector(query))
      return el.querySelector(query);
  }
  return null;
}

This finds the appropriate caption in figure grids and figure groups as well as for single figures. When figures in a figure group share a single caption, that caption is shown below both images.

This should handle all the image-specific (as opposed to table-related) photoswipe needs.