{"action":"created","issue":{"url":"https://api.github.com/repos/reflex-frp/reflex-dom/issues/94","repository_url":"https://api.github.com/repos/reflex-frp/reflex-dom","labels_url":"https://api.github.com/repos/reflex-frp/reflex-dom/issues/94/labels{/name}","comments_url":"https://api.github.com/repos/reflex-frp/reflex-dom/issues/94/comments","events_url":"https://api.github.com/repos/reflex-frp/reflex-dom/issues/94/events","html_url":"https://github.com/reflex-frp/reflex-dom/issues/94","id":174883660,"number":94,"title":"dyn at other position in the DOM, popup handling","user":{"login":"emmanueltouzery","id":339433,"avatar_url":"https://avatars.githubusercontent.com/u/339433?v=3","gravatar_id":"","url":"https://api.github.com/users/emmanueltouzery","html_url":"https://github.com/emmanueltouzery","followers_url":"https://api.github.com/users/emmanueltouzery/followers","following_url":"https://api.github.com/users/emmanueltouzery/following{/other_user}","gists_url":"https://api.github.com/users/emmanueltouzery/gists{/gist_id}","starred_url":"https://api.github.com/users/emmanueltouzery/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/emmanueltouzery/subscriptions","organizations_url":"https://api.github.com/users/emmanueltouzery/orgs","repos_url":"https://api.github.com/users/emmanueltouzery/repos","events_url":"https://api.github.com/users/emmanueltouzery/events{/privacy}","received_events_url":"https://api.github.com/users/emmanueltouzery/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":6,"created_at":"2016-09-03T07:09:45Z","updated_at":"2016-09-03T17:47:33Z","closed_at":null,"body":"this was covered a bit on the side in bug #35, but I think this probably deserves its own bug. I'm not sure how to handle popups in reflex-dom, actually my feeling is that it's not well-catered for use case -- I don't understand how the existing commercial projects can make it properly with the primitives in place... I must be missing something, or possibly I have a little more specific requirements?\r\n\r\nI make popups using the `bootstrap` system. I have a `div` with a certain ID, render the HTML I want in the div, then I call a JS function that displays that div as a popup. In normal HTML/JS, I would have a DIV at the top or bottom of the page, and reuse it -- because typically can display only one popup at a time.\r\n\r\nNow in reflex I don't see how to from point X in the DOM (where I'm rendering the 'edit' button that'll open the popup) modify point Y (where the popup contents live). So my first approach was to generate the popup div just next to my code. But that was bloated. For instance if I display a list of 10 items, I would have in my DOM 10 popup divs, each next to its 'edit' button.\r\nThe next step was to move the popup div a little higher up in the DOM, then communicating, passing up and down events, but that message-passing was really messy. In addition sometimes an action for the popup would cause re-generation of the part of the DOM where the popup HTML lived... That required careful timing to make sure the popup was fully closed before the DOM update would occur (otherwise the popup would be wiped from the DOM before it had fully closed, causing funky effects), which was messy and forced me to disable animations when closing popups so that the user wouldn't have to wait too much.\r\n\r\nThen I came up with the solution that I currently use:\r\nhttps://github.com/emmanueltouzery/cigale-timesheet/blob/97de81a01b5bac2a44d238df2861a82a8b0e1d90/src/WebGui/Common.hs#L220-L247\r\n\r\nAt the time I copy-pasted `dyn` from `reflex-dom` and modified it so that it may render not at the current location within the DOM, but at any element ID. I'm super happy with this solution, although it's stringly typed. I guess I could put the element in a reader monad transformer and pass it, and so on.\r\n\r\nAnyway now I have a problem because I'm trying to update my app to the latest reflex & reflex-dom develop versions, and the code changed in such a way that I don't manage to port my `dynAtEltId`.\r\n\r\nI wonder about two things:\r\n\r\n1. how come I seem to be the only one with such requirements? I wonder how others handle popups?\r\n2. if my requirements are indeed slightly different, is there a more sound way to handle this in reflex?"},"comment":{"url":"https://api.github.com/repos/reflex-frp/reflex-dom/issues/comments/244560207","html_url":"https://github.com/reflex-frp/reflex-dom/issues/94#issuecomment-244560207","issue_url":"https://api.github.com/repos/reflex-frp/reflex-dom/issues/94","id":244560207,"user":{"login":"mulderr","id":5698461,"avatar_url":"https://avatars.githubusercontent.com/u/5698461?v=3","gravatar_id":"","url":"https://api.github.com/users/mulderr","html_url":"https://github.com/mulderr","followers_url":"https://api.github.com/users/mulderr/followers","following_url":"https://api.github.com/users/mulderr/following{/other_user}","gists_url":"https://api.github.com/users/mulderr/gists{/gist_id}","starred_url":"https://api.github.com/users/mulderr/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mulderr/subscriptions","organizations_url":"https://api.github.com/users/mulderr/orgs","repos_url":"https://api.github.com/users/mulderr/repos","events_url":"https://api.github.com/users/mulderr/events{/privacy}","received_events_url":"https://api.github.com/users/mulderr/received_events","type":"User","site_admin":false},"created_at":"2016-09-03T17:47:33Z","updated_at":"2016-09-03T17:47:33Z","body":"> how come I seem to be the only one with such requirements? I wonder how others handle popups\r\n\r\nI've been wondering myself. I currently do [this](https://github.com/mulderr/reflex-dom-sui/blob/master/src/Reflex/Dom/Sui/Modal.hs). I took and I don't want to say improved because when I look at the code I wonder the opposite, so let's say modified reflex-dom-contrib's modal - which is also a nice minimal implementation if you want to start somewhere.\r\n\r\nMy requirements were:\r\n* integrate with semantic ui CSS\r\n* optional close on dimmer click\r\n* optional close on Esc\r\n* must handle scrolling without causing page content to shift to the right due to missing scrollbar (which you have to hide or you end up with two scollbars) - afaik this always ends up being very hacky even in pure JS, I just copied what bootstrap was doing\r\n\r\nThere's a `uiModal` that always stays in the DOM and `uiRemovingModal` that widgetHolds internally. The signatures are slightly different - I think @mightybyte explains that in reflex-dom-contrib.\r\n\r\nSome more remarks:\r\n* it's not very well thought through and inconsistent in at least a couple places\r\n* no, it's not used anywhere in production\r\n* it has not been updated for the latest reflex yet\r\n* it does some unspeakable things to the DOM which I would very much like to get rid of but I don't know how without sacrificing functionality (eg. there is no way to directly ask the browser what is the width of the scrollbar or if it's currently present at all)"}}
{"actor":{"display_login":"mulderr"}}