fix: reload images on new search when view is gallery

ckanext/nhm/theme/assets/scripts/apps/search/src/components/views/GalleryView.vue

@@ -142,7 +142,13 @@ export default {
  return rowHeight - (rowHeight % 1) + 1;
  },
  setColWidth() {
- let currentWidth = this.$refs.galleryContainer.clientWidth;
+ let currentWidth = 0;
+ try {
+ currentWidth = this.$refs.galleryContainer.clientWidth;
+ } catch {
+ //
+ }
+
  if (currentWidth === 0) {
  // the container is about 88% of the full window width; this is here just in
  // case the container hasn't loaded yet
@@ -168,7 +174,6 @@ export default {
  });
  }
  })
- .then(this.loadAndCheckImages)
  .then(() => {
  this.setFilteredRecordTag(this.recordTag + '$ with images');
  this.loading = false;

ckanext/nhm/theme/assets/scripts/apps/search/src/store/results/images.js

@@ -106,62 +106,60 @@ let images = {
  },
  actions: {
  loadAndCheckImages(context) {
- context.rootState.appState.status.resultData.promise.then(() => {
-  if (context.state.locked) {
-  return;
-  } else {
-  Vue.set(context.state, 'locked', true);
-  }
+ Vue.set(context.state, 'imageRecords', []);
+ if (context.state.locked) {
+ return;
+ } else {
+ Vue.set(context.state, 'locked', true);
+ }
 
- let imgRecords = [];
- Vue.set(context.state, 'imageRecords', []);
+ let imgRecords = [];
 
-  let records = context.rootGetters['results/records'];
+ let records = context.rootGetters['results/records'];
 
- records.forEach((r, rix) => {
- context.getters.getItemImages(r, false, rix).forEach((i) => {
- imgRecords.push(i);
- });
+ records.forEach((r, rix) => {
+ context.getters.getItemImages(r, false, rix).forEach((i) => {
+ imgRecords.push(i);
  });
+ });
 
- function checkImageSrc(url) {
- // using a requests library like axios doesn't work if the external server
- // doesn't have CORS set up properly, and all we want to know is if it loads as
- // an image anyway
- return new Promise((resolve, reject) => {
- let imageElement = new Image();
- imageElement.onload = () => {
- let ratio = imageElement.width / imageElement.height;
- resolve(ratio);
- };
- imageElement.onerror = reject;
- imageElement.src = url;
- });
- }
-
- let brokenChecks = imgRecords.map((r) => {
- return checkImageSrc(r.image.thumb)
- .then((ratio) => {
- r.image.canLoad = true;
- r.image.ratio = ratio;
- })
- .catch(() => {
- r.image.canLoad = false;
- r.image.ratio = 1;
- })
- .finally(() => {
- r.image.loading = false;
- context.state.imageRecords.push(r);
- });
- });
- return Promise.allSettled(brokenChecks).then(() => {
- context.commit(
- 'results/display/addPageImages',
- context.getters.loadedImageRecords,
- { root: true },
- );
- Vue.set(context.state, 'locked', false);
+ function checkImageSrc(url) {
+ // using a requests library like axios doesn't work if the external server
+ // doesn't have CORS set up properly, and all we want to know is if it loads as
+ // an image anyway
+ return new Promise((resolve, reject) => {
+ let imageElement = new Image();
+ imageElement.onload = () => {
+ let ratio = imageElement.width / imageElement.height;
+ resolve(ratio);
+ };
+ imageElement.onerror = reject;
+ imageElement.src = url;
  });
+ }
+
+ let brokenChecks = imgRecords.map((r) => {
+ return checkImageSrc(r.image.thumb)
+ .then((ratio) => {
+ r.image.canLoad = true;
+ r.image.ratio = ratio;
+ })
+ .catch(() => {
+ r.image.canLoad = false;
+ r.image.ratio = 1;
+ })
+ .finally(() => {
+ r.image.loading = false;
+ context.state.imageRecords.push(r);
+ });
+ });
+ return Promise.allSettled(brokenChecks).then(() => {
+ context.commit(
+ 'results/display/addPageImages',
+ context.getters.loadedImageRecords,
+ { root: true },
+ );
+ Vue.set(context.state, 'locked', false);
  });
  },
  },

ckanext/nhm/theme/assets/scripts/apps/search/src/store/results/main.js

@@ -230,7 +230,12 @@ let results = {
  if (aborted) {
  throw new AbortError(searchId);
  }
- return searchId;
+ if (context.state.display.view === 'gallery') {
+ return context.dispatch('images/loadAndCheckImages');
+ }
+ return new Promise((r) => {
+ r();
+ });
  })
  .catch((e) => {
  if (!(e instanceof AbortError)) {