{"action":"created","issue":{"url":"https://api.github.com/repos/atom/atom/issues/6419","labels_url":"https://api.github.com/repos/atom/atom/issues/6419/labels{/name}","comments_url":"https://api.github.com/repos/atom/atom/issues/6419/comments","events_url":"https://api.github.com/repos/atom/atom/issues/6419/events","html_url":"https://github.com/atom/atom/pull/6419","id":69152147,"number":6419,"title":"Add popover panel API","user":{"login":"jessegrosjean","id":21868,"avatar_url":"https://avatars.githubusercontent.com/u/21868?v=3","gravatar_id":"","url":"https://api.github.com/users/jessegrosjean","html_url":"https://github.com/jessegrosjean","followers_url":"https://api.github.com/users/jessegrosjean/followers","following_url":"https://api.github.com/users/jessegrosjean/following{/other_user}","gists_url":"https://api.github.com/users/jessegrosjean/gists{/gist_id}","starred_url":"https://api.github.com/users/jessegrosjean/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jessegrosjean/subscriptions","organizations_url":"https://api.github.com/users/jessegrosjean/orgs","repos_url":"https://api.github.com/users/jessegrosjean/repos","events_url":"https://api.github.com/users/jessegrosjean/events{/privacy}","received_events_url":"https://api.github.com/users/jessegrosjean/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/atom/atom/labels/needs-review","name":"needs-review","color":"bfe5bf"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":6,"created_at":"2015-04-17T14:41:37Z","updated_at":"2015-04-20T19:35:43Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/atom/atom/pulls/6419","html_url":"https://github.com/atom/atom/pull/6419","diff_url":"https://github.com/atom/atom/pull/6419.diff","patch_url":"https://github.com/atom/atom/pull/6419.patch"},"body":"Currently Atom has panel layers for top/left/right/bottom and modal. I think it would also be useful to have a 'popover' panel layer. This would be an absolutely positioned layer above all other window content (except modal panel layer). Panels are absolute positioned within it. Benefits include:\r\n\r\n1. A standard place (using existing panel API) for inserting overlay elements. Now it seems the common practice is for packages to insert popover UI arbitrarily into the DOM.\r\n\r\n2. Support more use cases then TextEditor 'overlay' decorations, because the popover panel layer would allow popovers anywhere in the Atom window, not just within a text editor. This layer might also be a place to solve https://github.com/atom/atom/issues/5469.\r\n\r\n3. Optionally implement popover layout logic once instead of having each package implement it badly once. Popover layout logic is somewhat complex since generally popovers want to be positioned relative to an existing element while also not being clipped by screen edges.\r\n\r\nThis pull request is a minimal start. It defines the popover layer and API for adding panels. But it doesn't perform any positioning logic. Assuming people like this idea I would also like to add positioning options and logic with the basic goal being:\r\n\r\n1. Uses should be able to position panel at arbitrary position on screen\r\n\r\n2. Or users should be able to position panel relative to an existing element on screen similar to Cocoa's [NSPopover](https://developer.apple.com/library/mac/documentation/AppKit/Reference/NSPopover_Class/index.html#//apple_ref/occ/instm/NSPopover/showRelativeToRect:ofView:preferredEdge:).\r\n\r\nThoughts?\r\n"},"comment":{"url":"https://api.github.com/repos/atom/atom/issues/comments/94548878","html_url":"https://github.com/atom/atom/pull/6419#issuecomment-94548878","issue_url":"https://api.github.com/repos/atom/atom/issues/6419","id":94548878,"user":{"login":"jessegrosjean","id":21868,"avatar_url":"https://avatars.githubusercontent.com/u/21868?v=3","gravatar_id":"","url":"https://api.github.com/users/jessegrosjean","html_url":"https://github.com/jessegrosjean","followers_url":"https://api.github.com/users/jessegrosjean/followers","following_url":"https://api.github.com/users/jessegrosjean/following{/other_user}","gists_url":"https://api.github.com/users/jessegrosjean/gists{/gist_id}","starred_url":"https://api.github.com/users/jessegrosjean/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jessegrosjean/subscriptions","organizations_url":"https://api.github.com/users/jessegrosjean/orgs","repos_url":"https://api.github.com/users/jessegrosjean/repos","events_url":"https://api.github.com/users/jessegrosjean/events{/privacy}","received_events_url":"https://api.github.com/users/jessegrosjean/received_events","type":"User","site_admin":false},"created_at":"2015-04-20T19:35:43Z","updated_at":"2015-04-20T19:35:43Z","body":"I've just updated the request with positioning logic that I'm using in my own app. The basic idea is that when you create a popover your provide:\r\n\r\n1. target - A target rectangle to position around\r\n2. viewport - A constraint rectangle in which to keep the popover\r\n3. placement - Desired popover placement 'top center', 'top left', 'left bottom', etc.\r\n\r\nBoth `target` and `viewport` can be specified as rects, elements, or a function. If specified as an element or function then the positioning is continuous scheduled view requestAnimationFrame. This makes it easy to keep the popover positioned over a scrolling or otherwise dynamic position.\r\n\r\nOf course this type of loop isn't ideal, but I think it's a simple way to handle lots of different cases. It's smart in that it only updates the DOM when the position has changed. And generally popovers are modal, there shouldn't be many on screen, and they shouldn't stick around long.\r\n\r\nI'm including this positioning logic as a proposal looking for feedback. If it's a direction that seems useful then I can polish it up a bit more. Otherwise I can remove it from this pull request.\r\n\r\nJesse"}}