支持下拉视图指令

[rdkmaster]

背景

一个很常见的场景：鼠标hover到dom上的某个玩意，就飘出一个任意视图提供一些操作，鼠标离开了飘出的视图区域后，视图自动关闭。有2个注意的地方：

1. 触发漂浮的入口未知，我们也不预设它应该是啥
2. 下拉出来的视图内容是啥，我们也不做预设。对下拉视图的管理和使用方面，效果和Jigsaw的combo非常相似

实现

综合这个功能的场景，以一个指令的形式实现是比较合适的。指令可以挂到任意节点、组件上，这满足了背景中的条件1，下拉的视图通过一个组件传递给这个指令，由指令调用PopupService将视图弹出，对视图弹出、销毁等过程，可以参考现在combo的实现。

指令名为 jigsaw-float，它有这些输入属性

• jigsawFloatTarget: Type<IPopupable> | TemplateRef<any> 双绑属性，漂浮出来的视图，支持直接弹出组件，也支持弹出ng-template
• jigsawFloatOptions: PopupOptions 用于控制弹出的参数，可选。默认采用combo相似的参数
• jigsawFloatPosition: 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom' 一共8个位置，其中第一个单词表示弹出视图在触发点的哪个位置，第二个单词控制弹出视图的哪个边缘与触发点对齐，比如'bottomLeft'表示在下面弹出来，并且视图左侧与触发点左侧对齐。注意，这个位置是应用给的理想位置，在弹出的时候，我们应该使用PopupService的位置修正函数来对理想位置坐修正，避免视图超时浏览器边界的情况，总之，参考combo的实现。
• jigsawFloatOpen: boolean 双绑属性，控制视图打开还是关闭
• jigsawFloatOpenTrigger: 'click' | 'mouseenter' 打开下拉触发方式，默认值是'mouseenter'
• jigsawFloatCloseTrigger: 'click' | 'mouseleave' 打开下拉触发方式，默认值是'mouseleave'

combo里已经有大量的下拉视图的开关的控制代码了，功能相似度极高，把这些代码抽出来，然后combo改造成使用这个指令来管理下拉视图。

使用方式

应用这样使用这个指令

<span class="fa fa-xxxx" jigsaw-float
       [jigsawFloatTarget]="MyFloatingComponent"
       jigsawFloatPosition="bottomRight">
</span>

[rdkmaster]

这个功能做出来后，简单下拉菜单，复杂下拉菜单，图标下拉都可以搞了，awade的很多header里的下拉，也都可以用这个来搞了。

[rdkmaster]

请 @hpyou 关注

[rdkmaster]

[rdkmaster]

bottomLeft 为默认值

[rdkmaster]

float指令支持热更新视图的功能，即 float要做到：当下拉视图是打开的时候，发现jigsawFloatTarget发生了变化，应该直接把视图1销毁，然后再弹出视图2，销毁视图1弹出视图2，都是调用PopupService的功能就行了