/*!
* ====================================================
* Hot Box UI - v1.0.15 - 2017-05-05
* https://github.com/fex-team/hotbox
* GitHub: https://github.com/fex-team/hotbox.git
* Copyright (c) 2017 Baidu FEX; Licensed BSD
* ====================================================
*/
(function () {
var _p = {
r: function(index) {
if (_p[index].inited) {
return _p[index].value;
}
if (typeof _p[index].value === "function") {
var module = {
exports: {}
}, returnValue = _p[index].value(null, module.exports, module);
_p[index].inited = true;
_p[index].value = returnValue;
if (returnValue !== undefined) {
return returnValue;
} else {
for (var key in module.exports) {
if (module.exports.hasOwnProperty(key)) {
_p[index].inited = true;
_p[index].value = module.exports;
return module.exports;
}
}
}
} else {
_p[index].inited = true;
return _p[index].value;
}
}
};
//src/expose.js
_p[0] = {
value: function(require, exports, module) {
module.exports = window.HotBox = _p.r(1);
}
};
//src/hotbox.js
_p[1] = {
value: function(require, exports, module) {
var key = _p.r(2);
var KeyControl = _p.r(3);
/**** Dom Utils ****/
function createElement(name) {
return document.createElement(name);
}
function setElementAttribute(element, name, value) {
element.setAttribute(name, value);
}
function getElementAttribute(element, name) {
return element.getAttribute(name);
}
function addElementClass(element, name) {
element.classList.add(name);
}
function removeElementClass(element, name) {
element.classList.remove(name);
}
function appendChild(parent, child) {
parent.appendChild(child);
}
/*******************/
var IDLE = HotBox.STATE_IDLE = "idle";
var div = "div";
/**
* Simple Formatter
*/
function format(template, args) {
if (typeof args != "object") {
args = [].slice.apply(arguments, 1);
}
return String(template).replace(/\{(\w+)\}/g, function(match, name) {
return args[name] || match;
});
}
/**
* Hot Box Class
*/
function HotBox($container) {
if (typeof $container == "string") {
$container = document.querySelector($container);
}
if (!$container || !($container instanceof HTMLElement)) {
throw new Error("No container or not invalid container for hot box");
}
// 创建 HotBox Dom 解构
var $hotBox = createElement(div);
addElementClass($hotBox, "hotbox");
appendChild($container, $hotBox);
// 保存 Dom 解构和父容器
this.$element = $hotBox;
this.$container = $container;
// 标示是否是输入法状态
this.isIME = false;
/**
* @Desc: 增加一个browser用于判断浏览器类型，方便解决兼容性问题
* @Editor: Naixor
* @Date: 2015.09.14
*/
this.browser = {
sg: /se[\s\S]+metasr/.test(navigator.userAgent.toLowerCase())
};
/*
* added by zhangbobell
* 2015.09.22
* 增加父状态机，以解决在父 FSM 下状态控制的问题，最好的解决办法是增加一个函数队列
* 将其中的函数一起执行。//TODO
* */
this._parentFSM = {};
// 记录位置
this.position = {};
// 已定义的状态（string => HotBoxState）
var _states = {};
// 主状态（HotBoxState）
var _mainState = null;
// 当前状态（HotBoxState）
var _currentState = IDLE;
// 当前状态堆栈
var _stateStack = [];
// 实例引用
var _this = this;
var _controler;
/**
* Controller: {
* constructor(hotbox: HotBox),
* active: () => void
* }
*/
function _control(Controller) {
if (_controler) {
_controler.active();
return;
}
Controller = Controller || KeyControl;
_controler = new Controller(_this);
_controler.active();
$hotBox.onmousedown = function(e) {
e.stopPropagation();
e.preventDefault();
};
return _this;
}
function _dispatchKey(e) {
var type = e.type.toLowerCase();
e.keyHash = key.hash(e);
e.isKey = function(keyExpression) {
if (!keyExpression) return false;
var expressions = keyExpression.split(/\s*\|\s*/);
while (expressions.length) {
if (e.keyHash == key.hash(expressions.shift())) return true;
}
return false;
};
e[type] = true;
// Boot: keyup and activeKey pressed on IDLE, active main state.
if (e.keyup && _this.activeKey && e.isKey(_this.activeKey) && _currentState == IDLE && _mainState) {
_activeState("main", {
x: $container.clientWidth / 2,
y: $container.clientHeight / 2
});
return;
}
var handleState = _currentState == IDLE ? _mainState : _currentState;
if (handleState) {
var handleResult = handleState.handleKeyEvent(e);
if (typeof _this.onkeyevent == "function") {
e.handleResult = handleResult;
_this.onkeyevent(e, handleResult);
}
return handleResult;
}
return null;
}
function _addState(name) {
if (!name) return _currentState;
if (name == IDLE) {
throw new Error("Can not define or use the `idle` state.");
}
_states[name] = _states[name] || new HotBoxState(this, name);
if (name == "main") {
_mainState = _states[name];
}
return _states[name];
}
function _activeState(name, position) {
_this.position = position;
// 回到 IDLE
if (name == IDLE) {
if (_currentState != IDLE) {
_stateStack.shift().deactive();
_stateStack = [];
}
_currentState = IDLE;
} else if (name == "back") {
if (_currentState != IDLE) {
_currentState.deactive();
_stateStack.shift();
_currentState = _stateStack[0];
if (_currentState) {
_currentState.active();
} else {
_currentState = "idle";
}
}
} else {
if (_currentState != IDLE) {
_currentState.deactive();
}
var newState = _states[name];
_stateStack.unshift(newState);
if (typeof _this.position == "function") {
position = _this.position(position);
}
newState.active(position);
_currentState = newState;
}
}
function setParentFSM(fsm) {
_this._parentFSM = fsm;
}
function getParentFSM() {
return _this._parentFSM;
}
this.control = _control;
this.state = _addState;
this.active = _activeState;
this.dispatch = _dispatchKey;
this.setParentFSM = setParentFSM;
this.getParentFSM = getParentFSM;
this.activeKey = "space";
this.actionKey = "space";
}
/**
* 表示热盒某个状态，包含这些状态需要的 Dom 对象
*/
function HotBoxState(hotBox, stateName) {
var BUTTON_SELECTED_CLASS = "selected";
var BUTTON_PRESSED_CLASS = "pressed";
var STATE_ACTIVE_CLASS = "active";
// 状态容器
var $state = createElement(div);
// 四种可见的按钮容器
var $center = createElement(div);
var $ring = createElement(div);
var $ringShape = createElement("div");
var $top = createElement(div);
var $bottom = createElement(div);
// 添加 CSS 类
addElementClass($state, "state");
addElementClass($state, stateName);
addElementClass($center, "center");
addElementClass($ring, "ring");
addElementClass($ringShape, "ring-shape");
addElementClass($top, "top");
addElementClass($bottom, "bottom");
// 摆放容器
appendChild(hotBox.$element, $state);
appendChild($state, $ringShape);
appendChild($state, $center);
appendChild($state, $ring);
appendChild($state, $top);
appendChild($state, $bottom);
// 记住状态名称
this.name = stateName;
// 五种按钮：中心，圆环，上栏，下栏，幕后
var buttons = {
center: null,
ring: [],
top: [],
bottom: [],
behind: []
};
var allButtons = [];
var selectedButton = null;
var pressedButton = null;
var stateActived = false;
// 布局，添加按钮后，标记需要布局
var needLayout = true;
function layout() {
var radius = buttons.ring.length * 15;
layoutRing(radius);
layoutTop(radius);
layoutBottom(radius);
indexPosition();
needLayout = false;
function layoutRing(radius) {
var ring = buttons.ring;
var step = 2 * Math.PI / ring.length;
if (buttons.center) {
buttons.center.indexedPosition = [ 0, 0 ];
}
$ringShape.style.marginLeft = $ringShape.style.marginTop = -radius + "px";
$ringShape.style.width = $ringShape.style.height = radius + radius + "px";
var $button, angle, x, y;
for (var i = 0; i < ring.length; i++) {
$button = ring[i].$button;
angle = step * i - Math.PI / 2;
x = radius * Math.cos(angle);
y = radius * Math.sin(angle);
ring[i].indexedPosition = [ x, y ];
$button.style.left = x + "px";
$button.style.top = y + "px";
}
}
function layoutTop(radius) {
var xOffset = -$top.clientWidth / 2;
var yOffset = -radius * 2 - $top.clientHeight / 2;
$top.style.marginLeft = xOffset + "px";
$top.style.marginTop = yOffset + "px";
buttons.top.forEach(function(topButton) {
var $button = topButton.$button;
topButton.indexedPosition = [ xOffset + $button.offsetLeft + $button.clientWidth / 2, yOffset ];
});
}
function layoutBottom(radius) {
var xOffset = -$bottom.clientWidth / 2;
var yOffset = radius * 2 - $bottom.clientHeight / 2;
$bottom.style.marginLeft = xOffset + "px";
$bottom.style.marginTop = yOffset + "px";
buttons.bottom.forEach(function(bottomButton) {
var $button = bottomButton.$button;
bottomButton.indexedPosition = [ xOffset + $button.offsetLeft + $button.clientWidth / 2, yOffset ];
});
}
function indexPosition() {
var positionedButtons = allButtons.filter(function(button) {
return button.indexedPosition;
});
positionedButtons.forEach(findNeightbour);
function findNeightbour(button) {
var neighbor = {};
var coef = 0;
var minCoef = {};
var homePosition = button.indexedPosition;
var candidatePosition, dx, dy, ds;
var possible, dir;
var abs = Math.abs;
positionedButtons.forEach(function(candidate) {
if (button == candidate) return;
candidatePosition = candidate.indexedPosition;
possible = [];
dx = candidatePosition[0] - homePosition[0];
dy = candidatePosition[1] - homePosition[1];
ds = Math.sqrt(dx * dx + dy * dy);
if (abs(dx) > 2) {
possible.push(dx > 0 ? "right" : "left");
possible.push(ds + abs(dy));
}
if (abs(dy) > 2) {
possible.push(dy > 0 ? "down" : "up");
possible.push(ds + abs(dx));
}
while (possible.length) {
dir = possible.shift();
coef = possible.shift();
if (!neighbor[dir] || coef < minCoef[dir]) {
neighbor[dir] = candidate;
minCoef[dir] = coef;
}
}
});
button.neighbor = neighbor;
}
}
}
function alwaysEnable() {
return true;
}
// 为状态创建按钮
function createButton(option) {
var $button = createElement(div);
addElementClass($button, "button");
var render = option.render || defaultButtonRender;
$button.innerHTML = render(format, option);
switch (option.position) {
case "center":
appendChild($center, $button);
break;
case "ring":
appendChild($ring, $button);
break;
case "top":
appendChild($top, $button);
break;
case "bottom":
appendChild($bottom, $button);
break;
}
return {
action: option.action,
enable: option.enable || alwaysEnable,
beforeShow: option.beforeShow,
key: option.key,
next: option.next,
label: option.label,
data: option.data || null,
$button: $button
};
}
// 默认按钮渲染
function defaultButtonRender(format, option) {
return format('<span class="label">{label}</span><span class="key">{key}</span>', {
label: option.label,
key: option.key && option.key.split("|")[0]
});
}
// 为当前状态添加按钮
this.button = function(option) {
var button = createButton(option);
if (option.position == "center") {
buttons.center = button;
} else if (buttons[option.position]) {
buttons[option.position].push(button);
}
allButtons.push(button);
needLayout = true;
};
function activeState(position) {
position = position || {
x: hotBox.$container.clientWidth / 2,
y: hotBox.$container.clientHeight / 2
};
if (position) {
$state.style.left = position.x + "px";
$state.style.top = position.y + "px";
}
allButtons.forEach(function(button) {
var $button = button.$button;
if ($button) {
$button.classList[button.enable() ? "add" : "remove"]("enabled");
}
if (button.beforeShow) {
button.beforeShow();
}
});
addElementClass($state, STATE_ACTIVE_CLASS);
if (needLayout) {
layout();
}
if (!selectedButton) {
select(buttons.center || buttons.ring[0] || buttons.top[0] || buttons.bottom[0]);
}
stateActived = true;
}
function deactiveState() {
removeElementClass($state, STATE_ACTIVE_CLASS);
select(null);
stateActived = false;
}
// 激活当前状态
this.active = activeState;
// 反激活当前状态
this.deactive = deactiveState;
function press(button) {
if (pressedButton && pressedButton.$button) {
removeElementClass(pressedButton.$button, BUTTON_PRESSED_CLASS);
}
pressedButton = button;
if (pressedButton && pressedButton.$button) {
addElementClass(pressedButton.$button, BUTTON_PRESSED_CLASS);
}
}
function select(button) {
if (selectedButton && selectedButton.$button) {
if (selectedButton.$button) {
removeElementClass(selectedButton.$button, BUTTON_SELECTED_CLASS);
}
}
selectedButton = button;
if (selectedButton && selectedButton.$button) {
addElementClass(selectedButton.$button, BUTTON_SELECTED_CLASS);
}
}
$state.onmouseup = function(e) {
if (e.button) return;
var target = e.target;
while (target && target != $state) {
if (target.classList.contains("button")) {
allButtons.forEach(function(button) {
if (button.$button == target) {
execute(button);
}
});
}
target = target.parentNode;
}
};
this.handleKeyEvent = function(e) {
var handleResult = null;
/**
* @Desc: 搜狗浏览器下esc只触发keyup，因此做兼容性处理
* @Editor: Naixor
* @Date: 2015.09.14
*/
if (hotBox.browser.sg) {
if (e.isKey("esc")) {
if (pressedButton) {
// 若存在已经按下的按钮，则取消操作
if (!e.isKey(pressedButton.key)) {
// the button is not esc
press(null);
}
} else {
hotBox.active("back", hotBox.position);
}
return "back";
}
}
if (e.keydown || hotBox.isIME && e.keyup) {
allButtons.forEach(function(button) {
if (button.enable() && e.isKey(button.key)) {
if (stateActived || hotBox.hintDeactiveMainState) {
select(button);
press(button);
handleResult = "buttonpress";
// 如果是 keyup 事件触发的，因为没有后续的按键事件，所以就直接执行
if (e.keyup) {
execute(button);
handleResult = "execute";
return handleResult;
}
} else {
execute(button);
handleResult = "execute";
}
e.preventDefault();
e.stopPropagation();
if (!stateActived && hotBox.hintDeactiveMainState) {
hotBox.active(stateName, hotBox.position);
}
}
});
if (stateActived) {
if (e.isKey("esc")) {
if (pressedButton) {
// 若存在已经按下的按钮，则取消操作
if (!e.isKey(pressedButton.key)) {
// the button is not esc
press(null);
}
} else {
hotBox.active("back", hotBox.position);
}
return "back";
}
[ "up", "down", "left", "right" ].forEach(function(dir) {
if (!e.isKey(dir)) return;
if (!selectedButton) {
select(buttons.center || buttons.ring[0] || buttons.top[0] || buttons.bottom[0]);
return;
}
var neighbor = selectedButton.neighbor[dir];
while (neighbor && !neighbor.enable()) {
neighbor = neighbor.neighbor[dir];
}
if (neighbor) {
select(neighbor);
}
handleResult = "navigate";
});
// 若是由 keyup 触发的，则直接执行选中的按钮
if (e.isKey("space") && e.keyup) {
execute(selectedButton);
e.preventDefault();
e.stopPropagation();
handleResult = "execute";
} else if (e.isKey("space") && selectedButton) {
press(selectedButton);
handleResult = "buttonpress";
} else if (pressedButton && pressedButton != selectedButton) {
press(null);
handleResult = "selectcancel";
}
}
} else if (e.keyup && (stateActived || !hotBox.hintDeactiveMainState)) {
if (pressedButton) {
if (e.isKey("space") && selectedButton == pressedButton || e.isKey(pressedButton.key)) {
execute(pressedButton);
e.preventDefault();
e.stopPropagation();
handleResult = "execute";
}
}
}
/*
* Add by zhangbobell 2015.09.06
* 增加了下面这一个判断因为 safari 下开启输入法后，所有的 keydown 的 keycode 都为 229，
* 只能以 keyup 的 keycode 进行判断
* */
hotBox.isIME = e.keyCode == 229 && e.keydown;
return handleResult;
};
function execute(button) {
if (button) {
if (!button.enable || button.enable()) {
if (button.action) button.action(button);
hotBox.active(button.next || IDLE, hotBox.position);
}
press(null);
select(null);
}
}
}
module.exports = HotBox;
}
};
//src/key.js
_p[2] = {
value: function(require, exports, module) {
var keymap = _p.r(4);
var CTRL_MASK = 4096;
var ALT_MASK = 8192;
var SHIFT_MASK = 16384;
function hash(unknown) {
if (typeof unknown == "string") {
return hashKeyExpression(unknown);
}
return hashKeyEvent(unknown);
}
function is(a, b) {
return a && b && hash(a) == hash(b);
}
exports.hash = hash;
exports.is = is;
function hashKeyEvent(keyEvent) {
var hashCode = 0;
if (keyEvent.ctrlKey || keyEvent.metaKey) {
hashCode |= CTRL_MASK;
}
if (keyEvent.altKey) {
hashCode |= ALT_MASK;
}
if (keyEvent.shiftKey) {
hashCode |= SHIFT_MASK;
}
// Shift, Control, Alt KeyCode ignored.
if ([ 16, 17, 18, 91 ].indexOf(keyEvent.keyCode) == -1) {
hashCode |= keyEvent.keyCode;
}
return hashCode;
}
function hashKeyExpression(keyExpression) {
var hashCode = 0;
keyExpression.toLowerCase().split(/\s*\+\s*/).forEach(function(name) {
switch (name) {
case "ctrl":
case "cmd":
hashCode |= CTRL_MASK;
break;
case "alt":
hashCode |= ALT_MASK;
break;
case "shift":
hashCode |= SHIFT_MASK;
break;
default:
hashCode |= keymap[name];
}
});
return hashCode;
}
}
};
//src/keycontrol.js
_p[3] = {
value: function(require, exports, module) {
var key = _p.r(2);
var FOCUS_CLASS = "hotbox-focus";
var RECEIVER_CLASS = "hotbox-key-receiver";
function KeyControl(hotbox) {
var _this = this;
var _receiver;
var _actived = true;
var _receiverIsSelfCreated = false;
var $container = hotbox.$container;
_createReceiver();
_bindReceiver();
_bindContainer();
_active();
function _createReceiver() {
_receiver = document.createElement("input");
_receiver.classList.add(RECEIVER_CLASS);
$container.appendChild(_receiver);
_receiverIsSelfCreated = true;
}
function _bindReceiver() {
_receiver.onkeyup = _handle;
_receiver.onkeypress = _handle;
_receiver.onkeydown = _handle;
_receiver.onfocus = _active;
_receiver.onblur = _deactive;
if (_receiverIsSelfCreated) {
_receiver.oninput = function(e) {
_receiver.value = null;
};
}
}
function _bindContainer() {
$container.onmousedown = function(e) {
_active();
e.preventDefault();
};
}
function _handle(keyEvent) {
if (!_actived) return;
hotbox.dispatch(keyEvent);
}
function _active() {
_receiver.select();
_receiver.focus();
_actived = true;
$container.classList.add(FOCUS_CLASS);
}
function _deactive() {
_receiver.blur();
_actived = false;
$container.classList.remove(FOCUS_CLASS);
}
this.handle = _handle;
this.active = _active;
this.deactive = _deactive;
}
module.exports = KeyControl;
}
};
//src/keymap.js
_p[4] = {
value: function(require, exports, module) {
var keymap = {
Shift: 16,
Control: 17,
Alt: 18,
CapsLock: 20,
BackSpace: 8,
Tab: 9,
Enter: 13,
Esc: 27,
Space: 32,
PageUp: 33,
PageDown: 34,
End: 35,
Home: 36,
Insert: 45,
Left: 37,
Up: 38,
Right: 39,
Down: 40,
Direction: {
37: 1,
38: 1,
39: 1,
40: 1
},
Delete: 46,
NumLock: 144,
Cmd: 91,
CmdFF: 224,
F1: 112,
F2: 113,
F3: 114,
F4: 115,
F5: 116,
F6: 117,
F7: 118,
F8: 119,
F9: 120,
F10: 121,
F11: 122,
F12: 123,
"`": 192,
"=": 187,
"-": 189,
"/": 191,
".": 190
};
// 小写适配
for (var key in keymap) {
if (keymap.hasOwnProperty(key)) {
keymap[key.toLowerCase()] = keymap[key];
}
}
var aKeyCode = 65;
var aCharCode = "a".charCodeAt(0);
// letters
"abcdefghijklmnopqrstuvwxyz".split("").forEach(function(letter) {
keymap[letter] = aKeyCode + (letter.charCodeAt(0) - aCharCode);
});
// numbers
var n = 9;
do {
keymap[n.toString()] = n + 48;
} while (n--);
module.exports = keymap;
}
};
var moduleMapping = {
expose: 0
};
function use(name) {
_p.r([ moduleMapping[name] ]);
}
use('expose');
})();