Popover

[typehorror]

• Custom trigger: focus, click and hover.
• Loads template string or URL
• optional controller ?
• Positioning should probably be relative to the element it is attached since absolute positioning breaks on scroll
  • We should be able to get the target from the event, then appendchild a size less element, with a relative positioning as a popover container.

[jimobrien]

Probably will need to be a restrict: 'A' directive so that any element can be the anchor for a popover

e.g.

a(shift-popover) sometext

div(shift-popover) sometext

ul
  li(shift-popover) sometext

ect.

I can't think of a reason for it needing to also be restrict: 'EA' (can you?)

[typehorror]

I concur, no need for it to be an element directive, makes sense to restrict it to be an attribute.

What do you think about delegating the rendering to a sub directive? The popover directive would handle events and prevent simultaneous popover.

[typehorror]

Also using an attribute directive might actually preventing us from using I a transclusion tho... I was kind of looking forward transcluding the popover content ^^

[jimobrien]

👍 to rendering with a sub directive.

No worries, transclusion still works with an attribute directive.

[typehorror]

I was thinking of that sort of case:

button.button(
  shift-popover = "hover"
  ng-click = "doStuff()"
) Click Me

Transcluding inside that button would then compromise the button's caption

[jimobrien]

I think the popover would just need to be a child in that case:

button.button(
  ng-click = "doStuff()"
) 
  div(shift-popover)
  | Click Me

[typehorror]

Brainstorm, what about that:

button.button(
  ng-click = "doStuff()"
  shift-popover = "hover"
) click me
  shift-popover-content
    p
      |  I am the popover content

[typehorror]

actually a popover could automatically find its parent element and add an event listener on it.

[jimobrien]

Hm. I feel like that begins to destruct the isolated nature of a component. Now what could be an internal of shift-popover is spread out across multiple directives.

[typehorror]

button.button(
  ng-click = "doStuff()"
) click me
  shift-popover(
    on = "hover"
  )
    p
      |  I am the popover content

[jimobrien]

ooOo I like that

[typehorror]

So we can have

p
  | this is some text with a 
  span technical word
    shift-popover(on="hover") Word definition
 | and the text continues here...

[typehorror]

I don't think we should provide a mean to include a template URL. For complex popover, like form in a popover, I'd recommend the form being in its own directive.