Issue with popup and pikaday widget

#1

Hi everyone,

I would appreciate some advice about this issue:

I’m modifying the Projectify plugin, and I would like to have a sticky popup (i.e. with tc-popup-keep, I know about this) which can itself open a second popup containing a pikaday calendar (already part of the plugin)… but clicking a date in the calendar closes both popups, instead of closing only the calendar.

It might be clearer if you look directly at my current wiki here: there you can see the issue, and I also tried to explain with more details and with links to the code.

Is what I want even possible? or is this behaviour hard-coded inside the pikaday widget?

Thank you!
Erwan

#2

Anyone?

I would appreciate any pointer, I don’t even know if the issue is about my mediocre understanding of CSS style or if it is specific to this pikaday widget…

Don’t hesitate to tell me if my explanations are not clear or incomplete, of course.

#3

I think maybe popup widget will listen on any click event, to close it self. (not sure)

I seem to did some hack around click events tiddlywiki-plugins/link.js at 8377af31b38cf9907318601fb3045b26d7158f9d · tiddly-gittly/tiddlywiki-plugins · GitHub

But that was too long ago so I’m not sure.

#4

Thank you @linonetwo

But would this explain the closure of the first popup as well? The widget is only in the second popup normally.

#5

Making such thing happen without debugging lots of js code is not possible. My advice would be use web developer tool’s performance tab to see which js function executes when you emit mouse event.

1 Like
#6

Why do you open a second popup, instead opening the datepicker and the recurring UI in 1 popup? IMO one popup should be enough.

Just my thought

#7

Thank you for the suggestion @pmario, but I think it would not be intuitive if the popup closes immediately after picking a date since it contains other controls. Also picking the date should be optional preferably.

But I was able to make some progress (surprisingly given my total lack of JS skills!): I found that the wrapper defining the widget $:/plugins/nico/projectify/ui/widgets/date-picker.js creates the Pikaday object with this argument:

		onSelect: () => {
			this.setValue(calendar.getDate());
			// Close the popup
			$tw.popup.cancel(0);
		},

The issue clearly comes from $tw.popup.cancel(0); which closes all the popups instead of only the last one.

If I change this line to $tw.popup.cancel(1); it works: it closes only my second popup. However it prevents the other date picker (the “Schedule” button) from closing properly, since this one doesn’t have two levels of popup.

Is there a way I can close precisely the last level of popup and only this one?

#8

I was able to figure it out eventually: I replaced the onSelect argument with this:

		onSelect: () => {
			this.setValue(calendar.getDate());
			// Close the popup (but only the last level)
		    var info = $tw.popup.popupInfo(this.domNode);
			$tw.popup.cancel(info.popupLevel -1);
		},

Now it works exactly as I want :slight_smile:

Btw I was able to find this thanks to my little investigation in popup.js in the core… before I was always too scared to look at the core :sweat_smile:

#9

Can you package and share a working solution if possible?

#10

Sure, I just updated the github page now, in case people want to see the conclusion of this issue working.

Also I plan to finish doing my improvements on Projectify and then release a full new version probably in the next few weeks, after TW 5.3 is released (since it requires need some 5.3 features).

1 Like
#11

@erwan is there any demo available for the improvements you have made to projectify ?

#12

Hi @arunnbabu81

I just saw your message.

I was unable to work on this in the past three months due to health issues, so there will be a delay in releasing the improved version. So no demo yet but I’m still on it, hopefully in the next couple months.

1 Like
#13

I have a large number of projectify modifications I could see adding to my own or a shared fork. Today I forked my own, with a view to doing this in the longer run.

  • However a community effort may be better.

I do like the date picker and went back to hack it for a date field other than “due”, unfortunately it seems to be designed in a way to do this could be quite difficult.

  • Even better if we could create a separate date picker with fieldname parameters and an option to choose the date format it saves tiddlywiki serial date (as it currently does) or unix time stamp.
#14

I would be happy to contribute to a community effort, especially because I’m an amateur and I’m a bit out of my depth managing a project like this. Let me know how you envision organizing this?

My main contribution so far is adding the option of recurring tasks, it’s still in progress. I have a few other tentative ideas for later, maybe… Additionally I’m currently in the process of changing jobs, moving to a different country and all this while dealing with quite serious health issues! So I’m probably not going to be very active in the near future :sweat_smile: