Swipe down to close pop up

[aredon]

Similar to https://github.com/zanna-37/hass-swipe-navigation this would allow the user to swipe down once the pop up is already at the top of its scrollable area in order to dismiss the card.

[Clooos]

You can actually do that already, but the movement has to be long for it to work. I'm planning on making that a bit more visual.

[Jbautista13]

I'm planning on making that a bit more visual.

Any updates on this? It seems there's already an event handler function written that begins to do this in the pop-up/helpers.js file

Bubble-Card/src/cards/pop-up/helpers.js

Lines 346 to 360 in 287e841

	context.handleTouchMove = (event) => {
	if (event.touches.length !== 1) return;
	currentY = event.touches[0].clientY;
	const deltaY = currentY - startY;
	if (Math.abs(deltaY) > 10) {
	isDragging = true;
	if (deltaY > 0) {
	context.popUp.style.transform = `translateY(${deltaY}px)`;
	event.preventDefault();
	}
	}
	};

It moves the pop-up if the user initiates a downwards scroll, but it seems to get overridden by the event handle created in the pop-up/create.js file instead

Bubble-Card/src/cards/pop-up/create.js

Lines 163 to 169 in 287e841

	context.handleTouchMove = (event) => {
	const touchMoveDistance = event.touches[0].clientY - startTouchY;
	if (touchMoveDistance > slideToCloseDistance && event.touches[0].clientY > lastTouchY) {
	removeHash();
	}
	lastTouchY = event.touches[0].clientY;
	};

which doesn't visually move the pop-up but does close it completely if you scroll far enough, but there's no visual indication this is going to occur.

[Clooos]

Try to swipe from the pop-up header, this is only working from that position.

[aredon]

Ahh I see. I wasn't doing it long enough. I'd shorten the requirement on that if possible.

[drulmc]

Hey just wondering if you're looking into this, and if so, I'd like to request a couple of config options please!

Is there any chance you could add an option to modify the swipe length when the contents of the popup is:

• in line with the header (default scroll position when opening a popup)
• not in line with the header (scrolled down within a popup)

The idea being, when the content is scrolled down and not in line with the header, a larger swipe would scroll up and close the popup when it hits the top. Likewise, if the content is in line with the popup header, a small swipe would close the popup.

If you have an iPhone and swipe around any popups, you can see what I mean.
Please let me know if you want me to provide a video.

Ps: this bubble card is amazing, deffo the best home assistant mod out there 👌🏽

Thanks

[drulmc]

I've had a look at your code, looks like we can override the default value in the config already:
https://github.com/search?q=repo%3AClooos%2FBubble-Card%20slide_to_close_distance&type=code

Do you have any docs or can you point me in the right direction so I can take a stab at making changes and test within home assistant?

[MrBearPresident]

You mean how to make a build?

How I did it.

• install studio code
• install npm
• make a github fork
• clone your fork
  • click in the search bar in studio code
  • clone from github
  • select your fork
• install webpack
  • open terminal window in studio code
  • in terminal window run npm init -y and npm install webpack webpack-cli --save-dev
• adapt the package.json
  • change the line "test": "echo \"Error: no test specified\" && exit 1" to "build": "webpack"
  • save (a step I sometimes forget 😅)
• in terminal window run npm run build
• go to dist folder an see your new packaged .js file
• place file in the www folder of your home assistant
• in Home Assistant go to your settings - > dashboard - > 3-dots in upper right corner - > resources
  • delete old config for bubble-card.js
  • add new config for /local/bubble-card.js
  • extra: for every build make sure I give the file a new name that is easier than having to clean the cache all the time
• check if all worked well in Home assistant
• in studio code go to the source control (on the left side)
• place all 3000+ adapted/new files in .gitignore

---

• adjust the necessary code
• build through terminal through npm run build
• place file in www folder
• clear cache or rename
• test in Home assistant

---

• in source control stage only the files that you changed yourself
• add what you did in text-field and commit
• push
• in webbrowser on github make a pull request

---

@Clooos
You do some things differently?

[Clooos]

Your process can be improved by a lot, you are losing a lot of time between each builds for your tests.

• place file in the www folder of your home assistant
  In my Webpack config file (available on the root of this repo), I build it in dev mode directly on my HA server, for that I'm using the Samba share add-on on HA. I'm on Mac so the path is easy to get, I don't know how to make this works on Windows.

• extra: for every build make sure I give the file a new name that is easier than having to clean the cache all the time
  It's even easier to disable the browser cache, this way when you save, just refresh your page and everything is updated.

Take your time to do that @MrBearPresident, doing what you do between each builds seems like a really long process 😅

[drulmc]

nice one for that! can you share your tsconfig + eslint config too please?

[MrBearPresident]

I don't have that... 🤔 In what step does it ask for these?

[drulmc]

It's needed for running the project, it's written in typescript so making sure I have the same config you or @Clooos is using.

• tsconfig (typescript config)
• package.json (need all the dependencies required)
• eslint config (linting)

got a bunch of errors with importing hacs, and everything has an 'any' type atm 🤣

[MrBearPresident]

Webpack config file through samba - I don't know how to make this works on Windows.

Yes do that also like this, but I tried to write down something that is fool proof.
My HA's (both of them, the live and the test) runs on a docker on my NAS so I can also just smb to the correct folder.

... to disable the browser cache, this...

This is much easier.... 😅 In chrome there is a right-click on the refresh button to easily clear cache. But I work on vivaldi and this is not available. But disabiling the cache is.... So now I know...