Skip to content

Commit ab95cdb

Browse files
author
Yandeqiang
committed
[update] 暴露， 控制条显示/隐藏事件
what: Why: How:
1 parent 4d0ab80 commit ab95cdb

File tree

9 files changed

+92
-27
lines changed

9 files changed

+92
-27
lines changed

‎README.md

+23-2
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,7 @@ plugin: [{
8080
##### 目前支持的组件及配置
8181

8282
组件支持的事件： 'tap', 'swipe', 'panstart', 'panmove', 'panend', 'press', 'doubletap'
83+
8384
 * play
8485
* 类型： Object
8586
* 含义： 配置播放暂停键 icon 及事件
@@ -233,7 +234,27 @@ plugin: [{
233234
}
234235
```
235236
236-
##### 组件相关问题
237+
## 事件
238+
239+
在 chimee 实例上可以监听下列事件
240+
241+
* barShow 控制条出现
242+
243+
```js
244+
chimeeInstance.$on('barShow', function () {
245+
console.log('show')
246+
})
247+
```
248+
249+
* barHide 控制条隐藏
250+
251+
```js
252+
chimeeInstance.$on('barHide', function () {
253+
console.log('hide')
254+
})
255+
```
256+
257+
## 组件相关问题
237258

238259
* Q: 子组件的默认顺序是什么？
239260

@@ -253,7 +274,7 @@ plugin: [{
253274

254275
A: 假如 children 配置后， 会读 children 的属性，并渲染， 不会补充其他组件，所以，需要你把所有的组件都写.
255276

256-
#### 兼容性
277+
## 兼容性
257278

258279
> 兼容性是移动端的大坑，在各个浏览器内总有特殊的表现，遇到最多的情况是，浏览器控制了 video，强制使用他的播放器，并且有最高层级，结尾的时候还会有广告😂
259280

‎demo/index.html

+8
Original file line numberDiff line numberDiff line change
@@ -79,5 +79,13 @@
7979
controls: true,
8080
autoplay: false
8181
});
82+
83+
player.$on('barShow', function () {
84+
console.log('show')
85+
})
86+
87+
player.$on('barHide', function () {
88+
console.log('hide')
89+
})
8290
</script>
8391
</html>

‎lib/index.browser.js

+15-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11

22
/**
3-
* chimee-plugin-mobile-controlbar v0.1.1
3+
* chimee-plugin-mobile-controlbar v0.1.2
44
* (c) 2017 yandeqiang
55
* Released under ISC
66
*/
@@ -6268,7 +6268,6 @@ var Base = function () {
62686268
this.option.event && _Object$keys(this.option.event).forEach(function (item) {
62696269
var key = '__' + item;
62706270
_this[key] = bind(_this.option.event[item], _this);
6271-
console.log(_this[key]);
62726271
addDelegate$1(_this.parent, _this.option.tag, item, _this[key], false, false);
62736272
});
62746273
}
@@ -6855,6 +6854,11 @@ var defaultConfig = {
68556854
hideBarTime: 2000
68566855
};
68576856

6857+
var barStatus = {
6858+
timer: null,
6859+
show: true
6860+
};
6861+
68586862
var mobiControlbar = gestureFactory({
68596863
name: 'chimeeMobiControlbar',
68606864
el: 'chimee-control',
@@ -6902,7 +6906,8 @@ var mobiControlbar = gestureFactory({
69026906
this.watch_fullscreen = this.$watch('isFullscreen', this._mousemove);
69036907
},
69046908
destroy: function destroy() {
6905-
window.clearTimeout(this.timeId);
6909+
window.clearTimeout(barStatus.timer);
6910+
barStatus.show = false;
69066911
this._removeGlobalEvent();
69076912
this.watch_fullscreen && this.watch_fullscreen();
69086913
},
@@ -6962,25 +6967,29 @@ var mobiControlbar = gestureFactory({
69626967
_hideItself: function _hideItself() {
69636968
var _this2 = this;
69646969

6965-
window.clearTimeout(this.timeId);
6966-
this.timeId = setTimeout(function () {
6970+
window.clearTimeout(barStatus.timer);
6971+
barStatus.timer = setTimeout(function () {
69676972
var bottom = -_this2.$wrap.offsetHeight;
69686973
setStyle(_this2.$wrap, {
69696974
bottom: bottom + 'px'
69706975
});
69716976
setStyle(_this2.$dom, {
69726977
visibility: 'hidden'
69736978
});
6979+
barStatus.show = false;
6980+
_this2.$emit('barHide');
69746981
}, this.config.hideBarTime);
69756982
},
69766983
_showItself: function _showItself() {
6977-
window.clearTimeout(this.timeId);
6984+
window.clearTimeout(barStatus.timer);
69786985
setStyle(this.$wrap, {
69796986
bottom: '0'
69806987
});
69816988
setStyle(this.$dom, {
69826989
visibility: 'visible'
69836990
});
6991+
!barStatus.show && this.$emit('barShow');
6992+
barStatus.show = true;
69846993
},
69856994
_display: function _display() {
69866995
var display = this.show ? 'block' : 'none';

‎lib/index.js

+15-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11

22
/**
3-
* chimee-plugin-mobile-controlbar v0.1.1
3+
* chimee-plugin-mobile-controlbar v0.1.2
44
* (c) 2017 yandeqiang
55
* Released under ISC
66
*/
@@ -1399,7 +1399,6 @@ var Base = function () {
13991399
this.option.event && _Object$keys(this.option.event).forEach(function (item) {
14001400
var key = '__' + item;
14011401
_this[key] = chimeeHelper.bind(_this.option.event[item], _this);
1402-
console.log(_this[key]);
14031402
addDelegate(_this.parent, _this.option.tag, item, _this[key], false, false);
14041403
});
14051404
}
@@ -1986,6 +1985,11 @@ var defaultConfig = {
19861985
hideBarTime: 2000
19871986
};
19881987

1988+
var barStatus = {
1989+
timer: null,
1990+
show: true
1991+
};
1992+
19891993
var mobiControlbar = gestureFactory({
19901994
name: 'chimeeMobiControlbar',
19911995
el: 'chimee-control',
@@ -2033,7 +2037,8 @@ var mobiControlbar = gestureFactory({
20332037
this.watch_fullscreen = this.$watch('isFullscreen', this._mousemove);
20342038
},
20352039
destroy: function destroy() {
2036-
window.clearTimeout(this.timeId);
2040+
window.clearTimeout(barStatus.timer);
2041+
barStatus.show = false;
20372042
this._removeGlobalEvent();
20382043
this.watch_fullscreen && this.watch_fullscreen();
20392044
},
@@ -2093,25 +2098,29 @@ var mobiControlbar = gestureFactory({
20932098
_hideItself: function _hideItself() {
20942099
var _this2 = this;
20952100

2096-
window.clearTimeout(this.timeId);
2097-
this.timeId = setTimeout(function () {
2101+
window.clearTimeout(barStatus.timer);
2102+
barStatus.timer = setTimeout(function () {
20982103
var bottom = -_this2.$wrap.offsetHeight;
20992104
chimeeHelper.setStyle(_this2.$wrap, {
21002105
bottom: bottom + 'px'
21012106
});
21022107
chimeeHelper.setStyle(_this2.$dom, {
21032108
visibility: 'hidden'
21042109
});
2110+
barStatus.show = false;
2111+
_this2.$emit('barHide');
21052112
}, this.config.hideBarTime);
21062113
},
21072114
_showItself: function _showItself() {
2108-
window.clearTimeout(this.timeId);
2115+
window.clearTimeout(barStatus.timer);
21092116
chimeeHelper.setStyle(this.$wrap, {
21102117
bottom: '0'
21112118
});
21122119
chimeeHelper.setStyle(this.$dom, {
21132120
visibility: 'visible'
21142121
});
2122+
!barStatus.show && this.$emit('barShow');
2123+
barStatus.show = true;
21152124
},
21162125
_display: function _display() {
21172126
var display = this.show ? 'block' : 'none';

‎lib/index.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/index.mjs

+15-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11

22
/**
3-
* chimee-plugin-mobile-controlbar v0.1.1
3+
* chimee-plugin-mobile-controlbar v0.1.2
44
* (c) 2017 yandeqiang
55
* Released under ISC
66
*/
@@ -1395,7 +1395,6 @@ var Base = function () {
13951395
this.option.event && _Object$keys(this.option.event).forEach(function (item) {
13961396
var key = '__' + item;
13971397
_this[key] = bind(_this.option.event[item], _this);
1398-
console.log(_this[key]);
13991398
addDelegate(_this.parent, _this.option.tag, item, _this[key], false, false);
14001399
});
14011400
}
@@ -1982,6 +1981,11 @@ var defaultConfig = {
19821981
hideBarTime: 2000
19831982
};
19841983

1984+
var barStatus = {
1985+
timer: null,
1986+
show: true
1987+
};
1988+
19851989
var mobiControlbar = gestureFactory({
19861990
name: 'chimeeMobiControlbar',
19871991
el: 'chimee-control',
@@ -2029,7 +2033,8 @@ var mobiControlbar = gestureFactory({
20292033
this.watch_fullscreen = this.$watch('isFullscreen', this._mousemove);
20302034
},
20312035
destroy: function destroy() {
2032-
window.clearTimeout(this.timeId);
2036+
window.clearTimeout(barStatus.timer);
2037+
barStatus.show = false;
20332038
this._removeGlobalEvent();
20342039
this.watch_fullscreen && this.watch_fullscreen();
20352040
},
@@ -2089,25 +2094,29 @@ var mobiControlbar = gestureFactory({
20892094
_hideItself: function _hideItself() {
20902095
var _this2 = this;
20912096

2092-
window.clearTimeout(this.timeId);
2093-
this.timeId = setTimeout(function () {
2097+
window.clearTimeout(barStatus.timer);
2098+
barStatus.timer = setTimeout(function () {
20942099
var bottom = -_this2.$wrap.offsetHeight;
20952100
setStyle(_this2.$wrap, {
20962101
bottom: bottom + 'px'
20972102
});
20982103
setStyle(_this2.$dom, {
20992104
visibility: 'hidden'
21002105
});
2106+
barStatus.show = false;
2107+
_this2.$emit('barHide');
21012108
}, this.config.hideBarTime);
21022109
},
21032110
_showItself: function _showItself() {
2104-
window.clearTimeout(this.timeId);
2111+
window.clearTimeout(barStatus.timer);
21052112
setStyle(this.$wrap, {
21062113
bottom: '0'
21072114
});
21082115
setStyle(this.$dom, {
21092116
visibility: 'visible'
21102117
});
2118+
!barStatus.show && this.$emit('barShow');
2119+
barStatus.show = true;
21112120
},
21122121
_display: function _display() {
21132122
var display = this.show ? 'block' : 'none';

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "chimee-plugin-mobile-controlbar",
3-
"version": "0.1.1",
3+
"version": "0.1.2",
44
"description": "controlbar for chimee in mobile",
55
"main": "lib/index.js",
66
"module": "lib/index.mjs",

‎src/base.js

-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@ export default class Base {
3030
this.option.event && Object.keys(this.option.event).forEach(item => {
3131
const key = '__' + item;
3232
this[key] = bind(this.option.event[item], this);
33-
console.log(this[key])
3433
addDelegate(this.parent, this.option.tag, item, this[key], false, false);
3534
});
3635
}

‎src/index.js

+14-4
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,11 @@ const defaultConfig = {
3737
hideBarTime: 2000
3838
};
3939

40+
const barStatus = {
41+
timer: null,
42+
show: true
43+
};
44+
4045
const mobiControlbar = gestureFactory({
4146
name: 'chimeeMobiControlbar',
4247
el: 'chimee-control',
@@ -84,7 +89,8 @@ const mobiControlbar = gestureFactory({
8489
this.watch_fullscreen = this.$watch('isFullscreen', this._mousemove);
8590
},
8691
destroy () {
87-
window.clearTimeout(this.timeId);
92+
window.clearTimeout(barStatus.timer);
93+
barStatus.show = false;
8894
this._removeGlobalEvent();
8995
this.watch_fullscreen && this.watch_fullscreen();
9096
},
@@ -142,25 +148,29 @@ const mobiControlbar = gestureFactory({
142148
this.children.currentTime && this.children.currentTime.updateCurrent();
143149
},
144150
_hideItself () {
145-
window.clearTimeout(this.timeId);
146-
this.timeId = setTimeout(() => {
151+
window.clearTimeout(barStatus.timer);
152+
barStatus.timer = setTimeout(() => {
147153
const bottom = -this.$wrap.offsetHeight;
148154
setStyle(this.$wrap, {
149155
bottom: bottom + 'px'
150156
});
151157
setStyle(this.$dom, {
152158
visibility: 'hidden'
153159
});
160+
barStatus.show = false;
161+
this.$emit('barHide');
154162
}, this.config.hideBarTime);
155163
},
156164
_showItself () {
157-
window.clearTimeout(this.timeId);
165+
window.clearTimeout(barStatus.timer);
158166
setStyle(this.$wrap, {
159167
bottom: '0'
160168
});
161169
setStyle(this.$dom, {
162170
visibility: 'visible'
163171
});
172+
!barStatus.show && this.$emit('barShow');
173+
barStatus.show = true;
164174
},
165175
_display () {
166176
const display = this.show ? 'block' : 'none';

0 commit comments

Comments
 (0)