# FabButton

**Repository Path**: queling/fab-button

## Basic Information

- **Project Name**: FabButton
- **Description**: FabButton 悬浮按钮
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-08-02
- **Last Updated**: 2021-11-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# FabBUtton

#### 项目介绍
组件基于SDK6版本开发;
1.悬浮按钮拖拽，手指松开贴边
2.点击悬浮按钮显示工具栏
3.工具栏可以根据参数以window为基准左中右对齐，也可以悬浮按钮为基准点，上下对齐


#### 演示效果
![cmd-markdown-logo](gif/showTime.gif)
![cmd-markdown-logo](gif/square-round.gif)

#### 安装教程
在自己的hml文件下引入fab组件
```
<element name="fab" src="../../common/component/fab/fab.hml"></element>
```
在自己的hml下的div.container下使用组件   
```
<fab fab-size="60"
         fab-background-image="/common/icon/e5.png"
         fab-background-color="rgba(00,00,00,0)"
         fab-text=""
         toolbar-content="{{content}}"
         offset="{{ local }}"
         tool-bar-type="{{toolBarType}}"
         tool-bar-width="{{60}}"
         tool-bar-height="{{200}}"
         tool-bar-list-direction="column"
         tool-bar-background-color="rgba(00,00,00,1)"
         item-background-color="rgba(255,255,255,0.1)"
         item-color="#ffffff"
         padding="0 10px"
         item-width="{{40}}"
         item-radius="{{40}}"
         @checked-item="checkedItem"
         @click-fab="clickFab"
         @leave-end="leaveEnd"
            >
    </fab>
```
参数使用请看使用说明
#### 使用说明

1. Fab悬浮按钮组件所在文件夹为 entry\src\main\js\default\common\component\fab
2. 使用时可自由传入参数,参数如下:

**fab-size:** 按钮字体大小，同时也是按钮宽高大小,穿入数字不要带单位;

**fab-background-image:**  悬浮按钮背景图片;路径只支持从common目录开始;
* 注意：fab-background-image和fab-background-color不可共存,如果同时存在,背景色会覆盖背景图片
 
**fab-background-color:** 悬浮按钮背景色;
* 注意：fab-background-image和fab-background-color不可共存,如果同时存在,背景色会覆盖背景图片

**fab-text:** 悬浮按钮文本字体内容,颜色默认白色,不可修改 

**offset:** 工具栏位置;可取值 left, right, center, top,bottom,auto;
当取值为left, right, center时,工具栏以整个屏幕视图为基准靠齐;分别会显示在窗口的左(left)中(center)右(right)
当取值为top,bottom,auto时候,工具栏以悬浮为基准点,会随着悬浮按钮移动;
* 注意：当offset值为center,并且tool-bar-type值等于square或者round时,tool-bar-width和tool-bar-height传入值的会失效,tool-bar-width和tool-bar-height宽高会取屏幕宽度的一半;

**tool-bar-type:** 工具栏类型,可取值rectangle 矩形, square 方形, round 圆形 ;
* 注意： 赋值为square或者round时,offset的值必须赋为center;此时工具栏以悬浮按钮为基准点垂直居中,会随着悬浮按钮移动;并且最多只能存在6条数据,最少4条数据;当offset值为center,并且tool-bar-type值等于square或者round时,tool-bar-width和tool-bar-height传入值的会失效,宽高会取屏幕宽度的一半;

**toolbar-content:** 工具显示栏内容, 类型数组对象;如果某项不需要显示在页面上,赋值为空字符穿即可;
* 注意： 当tool-bar-type值为square或者round时,toolbar-content数据最大不能超过6条,最小不能少于4条;如果数据长度超过6条,只会截取前六条数据展示;

toolbar-content数据格式:
```
[
    {
        id:1,
        text:"电话:",
        image:"/common/icon/e1.png"
    },

    {
        id:2,
        text:"刷新:",
        image:"/common/icon/e2.png"
    },
    {
        id:3,
        text:"爱心:",
        image:"/common/icon/e3.png"
    },
    {
        id:4,
        text:"声音:",
        image:"/common/icon/e6.png"
    },
    {
        id:5,
        text:"闹钟:",
        image:"/common/icon/e7.png"
    }
]
```


**tool-bar-width|tool-bar-height:** 工具栏宽高, number类型;
* 注意： 当offset值为center,并且tool-bar-type值等于square或者round时,
tool-bar-width和tool-bar-height传入值的会失效,宽高会取屏幕宽度的一半;

**tool-bar-list-direction:** 工具栏显示水平方向，可取值 column 垂直排列，row 水平排列;
当tool-bar-type赋值为square 方形 或者 round 圆形时，tool-bar-list-direction会失效

**tool-bar-background-color:** 工具栏背景色

**padding:** 工具栏内边距;

> 格式: 四个值,上右下左 , 三个值,上(左右)下 , 两个值,(上下)(左右) , 一个值(上下左右)

* 注意: padding对角值必须相等,否工具栏可能会出现偏移差距

**item-background-color:** 工具栏列表选项背景色 

**item-color:** 工具栏列表选项文本颜色

**item-width:** 工具栏列表选项宽度,Number类型;宽高相等,不支持设置高度;

**item-radius:** 工具栏列表选项圆角大小;Number类型; 

**checked-item:** [**事件**] 选中工具栏内容触发,返回选中数据

**click-fab:** [**事件**] 点击悬浮按钮触发，返回工具栏状态和悬浮按钮状态 

> 返回格式如下:
```
{
isToolbar:布尔值, // true 工具栏显示,false工具栏隐藏
isFabBUttonShow:布尔值, // true 悬浮按钮显示,false悬浮按钮隐藏
}
```

**eave-end:** [**事件**] 离开悬浮按钮后触发，返回工具栏状态和悬浮按钮状态

> 返回格式如下:
```
{
isToolbar:布尔值, // true 工具栏显示,false工具栏隐藏
isFabBUttonShow:布尔值, // true 悬浮按钮显示,false悬浮按钮隐藏
}
```

#### 实现思路
主要功能：
1. 悬浮按钮拖拽，手指松开贴边
2. 点击悬浮按钮显示工具栏
3. 工具栏可以根据参数以window为基准左中右对齐，也可以悬浮按钮为基准点，上下对齐
主要用到JS的手指触摸事件,手指滑动事件,手指抬起事件
JS思路解析：
API版本需要升级到 API6
一定先要在css中给元素设置固定定位或者绝对定位，js动态设置left、top值

##### 1.  在手指触摸时候
###### 1.1. 需要获取到元素距离屏幕左侧(offsetLeft)&上侧的距离(offsetTop);
1.2. 获取到手指触摸元素的坐标点（x,y）
##### 2. 在手指滑动的时候
###### 2.1. 在滑动的时候，实时获取到滑动的坐标点（x,y）；
###### 2.2. 计算元素的left值和top值，公式如下：
* left = 滑动时的x值 - （触摸时的x值-元素的offsetLeft）

* top = 滑动时的y值 - （触摸时的y值-元素的offsetTop）
##### 3. 最大最小边界值计算
###### 3. 最大边界值不能大于屏幕宽高；最小边界值不能小于0；
* 最left小边界值=left小于0；就让他等于0；
* 最小top边界值=top小于0；就让他等于0；
* 最大left边界值=屏幕宽度-元素自身宽度
* 最大top边界值=屏幕高度-元素自身高度
##### 4. 贴边吸附效果
* 贴边计算公式：(屏幕宽度-元素宽度) /2;
###### 4.1. 如果滑动的left值大于屏幕宽度的一半，就贴边到右侧;
* 此时left=屏幕宽度-元素宽度
###### 4.2. 如果滑动的left值小于于屏幕宽度的一半，就贴边到左侧；此时left赋值零;
* 注意：此处的left指的是2.2下的left
##### 5. 贴边后长时间不操作，使其透明化
5.1. 手指离两秒开后，使其透明化；当手指手指触摸时候，使其不透明化
##### 6. 工具栏
* 以window视图为基线，偏左，偏右，居中显示的时候， 始终垂直居中，计算公式：
* top = （window窗口高度 – 工具栏高-工具栏上下边距）/  2
###### 6.1. 工具栏靠window左边显示（以window视图为基线）
* 偏左显示的时候，left直接设置为0即可
###### 6.2. 工具栏靠window右边显示（以window视图为基线）
* 偏右显示的时候，需要计算left的偏移量的值
* left计算公式：window窗口宽度 -工具栏宽度 - 工具栏左右边距
###### 6.3. 工具栏以window中心显示（以window视图为基线）
* 居中显示的时候，此时工具栏水平垂直居中
* 计算公式：（window窗口宽度 -工具栏宽度 - 工具栏左右边距）/ 2 
###### 6.4. 工具栏显示在上方（以fab悬浮按钮为基线）
* 获取悬浮按钮的距离顶部距离 和 工具栏高度，用来判断悬浮按钮顶部偏移距离是否小于工具栏高度；
* 获取悬浮按钮的距离顶部距离 小于 悬浮按钮高度，悬浮按钮top偏移量就向下方挪动
* 悬浮按钮top偏移量计算公式：工具栏高度+20;
* 加了20 是让工具栏和悬浮按钮有距离
* 工具栏top偏移量计算公式：悬浮按钮顶部top – 工具栏高度
* 这个时候悬浮按钮顶部top值在 a 里面重新计算了
###### 6.5. 工具栏显示在下方（以fab悬浮按钮为基线）
* 获取悬浮按钮的距离底部距离 和 工具栏高度，用来判断悬浮按钮底部偏移距离是否小于工具栏高度；
* 判断条件：悬浮按钮距离底部偏移量  是否大于 window视图高度-工具栏高度
* 如果大于重新计算悬浮按钮偏移量 和 工具栏偏移量
* 悬浮按钮偏移量公式：window视图高度 – 工具栏高度 – 20
* 减了20 是让工具栏和悬浮按钮有距离
* 工具栏偏移量公式： window视图高度 – 工具栏高度
* 注意:
* 样式里面设置display=flex时候，页面中使用 show 属性不起作用