@antv/f6-plugin
Version:
F6 plugin
36 lines (34 loc) • 1.94 kB
JavaScript
import { createSegmentNode } from '@antv/f6-ui';
import { dispatch } from '../../dispatcher';
import { CONTROL_NEXT, CONTROL_PREV, DEFAULT_CONTROLLER_CONFIG, SPEED_CHANGE } from '../../utils/const';
import createControlBtn from './control-btn';
import createPlayBtn from './play-btn';
import { deepMix } from '@antv/util';
function createControlbar(option) {
var mixOption = deepMix({}, DEFAULT_CONTROLLER_CONFIG, option);
var wrapperWidth = mixOption.wrapperWidth,
contentWidth = mixOption.contentWidth,
height = mixOption.height,
fill = mixOption.fill,
stroke = mixOption.stroke,
nextBtnStyle = mixOption.nextBtnStyle,
preBtnStyle = mixOption.preBtnStyle,
playBtnStyle = mixOption.playBtnStyle,
speed = mixOption.speed;
var html = "\n <div class='wrapper'>\n <div class='content'> \n\n </div>\n </div>\n ";
var css = "\n .wrapper {\n display: flex;\n width: " + wrapperWidth + ";\n height: " + height + ";\n flex-wrap: nowrap;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n background: " + fill + ";\n " + (stroke ? "border: 1 solid " + stroke + ";" : '') + "\n }\n .content{\n display: flex;\n width: " + contentWidth + ";\n flex-wrap: nowrap;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n background-opacity: 0;\n }\n";
var uiTree = createSegmentNode(html, css);
var nextBtn = createControlBtn('next', nextBtnStyle);
var prevBtn = createControlBtn('prev', preBtnStyle);
var playBtn = createPlayBtn(playBtnStyle);
dispatch(SPEED_CHANGE, speed);
nextBtn.on('tap', function () {
dispatch(CONTROL_NEXT);
});
prevBtn.on('tap', function () {
dispatch(CONTROL_PREV);
});
uiTree.query('.content').appendChild(prevBtn, playBtn, nextBtn);
return uiTree;
}
export default createControlbar;