Draggable gallery only kicks in on page/window resize - not on initial page load

[gkurl]

Hello guys - I am facing an issue using this where on initial page load the gallery JS doesn't seem to kick-in. But when I manually resize the window - it kicks in. I am on Mac and have tested in FF dev edition and Chrome - a quick video demonstrating the issue:

https://user-images.githubusercontent.com/107123229/201205313-91361680-7c24-4d92-88b1-684154a56dee.mp4

I have also noticed that the initial opacity:0 stays permanent - I had to change this manually to 100 in the scss so the images would display otherwise all you get is invisible images - I have shown console for reference and to show that they are indeed there:

[claudia-romano]

Hi there, I just checked the component locally and everything seems to be working fine.

May I ask what version you are using (e.g., CodyFrame, no framework) and if you could please reproduce the issue on a simple template (e.g., without any custom CSS/JS that may be the reason of the bug)? Thank you.

[gkurl]

Hi there, I just checked the component locally and everything seems to be working fine.

May I ask what version you are using (e.g., CodyFrame, no framework) and if you could please reproduce the issue on a simple template (e.g., without any custom CSS/JS that may be the reason of the bug)? Thank you.

Hi thanks for replying - I am using CodyFrame 3.0.10 installed via npm in the latest version of Gridsome. I have however as you said, installed a fresh clean native vue app using npm init vue@latest with nothing but codyframe, sass-loader, sass and axios installed and still get the same issue.

I'm on node v14.19.3 and npm 6.14.17

My package.json for the clean native vue app:

Stock default vite.config.js in the clean vue app

My mounted function inside the component for the clean vue app:

a video demonstrating the issue on the clean vue app:

https://user-images.githubusercontent.com/34505859/201363280-53b15a02-0c42-4551-b352-500616b472b8.mp4

You closed my previous ticket regarding the masonry.js not loading images in the v-for - I believe there is something similar/strange going on here related to the JS possibly and whether the image is sourced statically or using v-bind.

My v-for is a stock v-for - I'm not doing anything fancy so it can be barely classed as custom-code - I'm literally just v-for over the <li> from the HTML in your component docs - the images are from a public API URL which even you can test with here:

https://g1c0r7af15.execute-api.eu-west-1.amazonaws.com/dev/api/portfolio-items?filters[category][$eq]=Portraits&populate=image

To access the URL for the images hosted in S3 you would need to traverse into {variable}.attributes.image.data.attributes.url

Example v-for:

 <ul class="drag-gallery__list">
      <li class="drag-gallery__item" v-for="image in images" :key="image.attributes.id">
        <img :src="image.attributes.image.data.attributes.url" :alt="image.attributes.title">
      </li>
    </ul>

I have followed the setup docs for importing style.scss into main.js and the component scss is in the <style> tag as per your instructions in the Vue setup post.

Here is a video with the console open - if it helps the CSS for is-dragging seems to be being applied? But no action on-screen until window resize:

https://user-images.githubusercontent.com/34505859/201365448-c08da16a-3dae-4464-9cda-1cb9ac061846.mp4

Even keystrokes aren't being registered/recognised.

Do you think you are maybe able to recreate this issue using the above URL in a Vue environment of your choosing? please I appreciate things are busy but it's business critical for me to get things working with your components - please don't close this ticket saying it's custom-code without at least trying a basic vue app test.

Many thanks

[claudia-romano]

Hi there, the data you are using to generate your v-for is probably populated after the mounted function is called. Is this something you checked? If this is the case, then the component is initialised before the elements are created in your HTML and this could be the cause of the issue. You may need to initialise the component after the data is ready.

[gkurl]

Hi - yes I did double check this before. To triple check it, I moved the API call inside the component directly and am calling the API in the created function and the mounted contains the JS - swipe content loads first, then the draggable gallery JS. I even included a "imagesLoaded" boolean on the template that is set only to true once the images are input into the array from the response.

Created:

created() {
      axios
          .get('https://g1c0r7af15.execute-api.eu-west-1.amazonaws.com/dev/api/portfolio-items?filters[category][$eq]=Portraits&populate=image')
          .then(response => {
            this.images = response.data.data;
            if(this.images.length > 0) {
              this.imagesLoaded = true;
            }
          })
  },

<template v-if="imagesLoaded">

I'm not using async functions either to ensure it works synchronous - still seeing the same issue.

I switched the template varianle to jsLoaded and set that to true after all the mounted appendChild were complete. Still see the same result.

[claudia-romano]

Could you try consoling the number of <li> children when the draggable gallery script is loaded?

[gkurl]

Could you try consoling the number of

• children when the draggable gallery script is loaded?

Could you detail how I would go about detailing this? Would this be consoled from the JS files direct or somewhere in the Vue component?

[claudia-romano]

You can do that in your Vue component, right before importing the JS code of the gallery. Thanks.

[gkurl]

You can do that in your Vue component, right before importing the JS code of the gallery. Thanks.

Hi thanks for the reply. I am happy to say after hours and hours and hours of experimenting, stress and tears, I have solved this (and another similar issue that i was having with the mega menu component also not loading data correctly, so will not create an issue there).

The solution was to call the API in mounted and make the mounted function async like:

async mounted() {
await axios.get.....then(response => {
....assign props/data variables 
){
}

// AFTER axios call, do document js. This was true before but as mounted was not async, the JS files were being appended first BEFORE the API call had finishes strangely.

document.create....

so that the API loads data first, and then the JS gets mounted after - it was really weird and bothersome to figure out, but I figured it was to do with some load order as per your comments and could see some inconsistencies with how and when the data vs the JS was loading.

I've moved the call back to the parent component now, made the mounted async there, but kept the child component where the JS files are appended (where all the document.create statements are) as a normal mounted and added a v-if=images.length > 1 to the child component wrapper to double ensure the images are in the array before rendering the child component and JS.

Appreciate the help and you not closing/disregarding the ticket!