Skip to content
This repository has been archived by the owner on Nov 4, 2023. It is now read-only.

Working example of popup auto closure #727

Open
flick116 opened this issue Jun 18, 2021 · 5 comments
Open

Working example of popup auto closure #727

flick116 opened this issue Jun 18, 2021 · 5 comments

Comments

@flick116
Copy link

Can we have a documented example of how to setup the popup auto close function. I have tested using the following defined on TYPES.POPUP and it is not working:

                         action: function (item, entity) {
                         this.$scope.openPopup(item, entity);
                         setTimeout(function () {
                           this.$scope.closePopup();
                         }, '1000');},

The popup opens as expected and after the timeout of 1 second the following error is seen on the screen and in the browser console and the popup does not close:

Uncaught TypeError: Cannot read property 'closePopup' of undefined

@FaiekA
Copy link

FaiekA commented Jun 18, 2021

Hi , Any assistance on this would be great, have been struggling with this for a while, to no avail. My tileboard is made up of popups and this will really assist.

                                            action: function (item, entity) {
                                               this.$scope.entityClick({}, item, entity); 
                                               setTimeout(function () {
                                                  this.$scope.closePopup();
                                               }, '5000');}

I tried this as well but no luck.
An example would super.
Thanks...

@FaiekA
Copy link

FaiekA commented Aug 23, 2021

@flick116
Hi - I managed to get it work , I'm sure that this is probably not correct, but does work with a small issues it seems - whereby the popup would close unexpectedly if you go back within the 5 seconds.

{
  position: [0, 1],
  type: TYPES.POPUP,			  
  id: {},
  icon: "mdi-home-group",
  title: "Home Scenes",
  customStyles: {
  "background-color": "#7dba81",},			  
  height: 1,
  state: false,		  
  popup: {
	tileSize: 100,
	items: [
{
	position: [0, 0],
	width: 2,
	title: "Guest Mode",
	classes: [CLASS_BIG],
	type: TYPES.INPUT_BOOLEAN,					
	id: "input_boolean.guest_mode",
	icons: {
		  on: "mdi-account-multiple-plus",
		  off: "mdi-account-multiple-outline",
},
	customStyles: function (item, entity) {
	if (entity.state === "off") {
	return { backgroundColor: "#898c80" };
	} else {
	return { backgroundColor: "red" };
	}
},
	states: {
	  on: "Guests",
	  off: "No Guests",
	},	
	state: function (item, entity) {
	this.$scope.entityClick.bind(this);	
    setTimeout(this.$scope.closePopup.bind(this), 5000); },
},

		],	

},
},

I requested help on the Q&A and hoping to get some help #758
Hope this helps in the interim.

@flick116
Copy link
Author

That's great - I'll give that a test. Thanks for this

@Erelen-Laiquendi
Copy link

Solution:

action: function (item, entity) {
   this.$scope.openPopup(item, entity);
   this.$scope.popupTimeout = setTimeout(function () {
      this.$scope.closePopup();
   }.bind(this), 5 * 1000);
},

@FaiekA
Copy link

FaiekA commented Jul 11, 2022

@Erelen-Laiquendi - Thanks a mill this works - flawlessly
Finally - thanks again

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants