function (require) {
var observable = require('common/observable');
function makeHash(stringArray) {
var hash = {};
for (var i = 0, l = stringArray.length; i < l; i++) {
if (stringArray[i]) {
hash[stringArray[i]] = true;
}
}
return hash;
}
function init() {
var me = this;
this.main.on('click', '[data-id]', function (e) {
if (this.getAttribute('data-disabled')) {
return;
}
if ($(this).hasClass('not-btn'))
{
return ;
}
var id = this.getAttribute('data-id');
var command = me.commands[id];
if (command) {
var name = command.name;
if (command.type === 'toggle') {
if (command.on) {
this.removeAttribute('data-on');
command.on = false;
me.fire('command:un', {
command: name,
args: command
});
return;
}
this.setAttribute('data-on', 1);
command.on = true;
}
me.fire('command', {
command: name,
args: command
});
}
});
this.main.on('input', '[data-id] > input', function (e) {
var id = $(this).parent().data('id');
var command = me.commands[id];
if (command) {
var name = command.name;
var value = this.value;
me.fire('command', {
command: name,
args: value
});
}
});
}
/**
* 命令菜单栏
*
* @constructor
* @param {HTMLElement} main 主元素
* @param {Object} options 参数选项
* @param {Array} options.commands 命令数组
*/
function CommandMenu(main, options) {
options = options || {};
this.main = $(main);
this.commands = options.commands || [];
init.call(this);
if (this.commands.length) {
this.setCommands();
}
}
/**
* 设置命令集合
*
* @param {Array} commands 命令集合
* @return {this}
*/
CommandMenu.prototype.setCommands = function (commands) {
commands = commands || this.commands;
var str = '';
commands.forEach(function (item, i) {
if (item.type === 'split') {
str += '<li data-id="-1" data-split="1"></li>';
}
else if (item.type == 'input') {
str += '<li data-id="' + i + '" class="not-btn">' + item.title + ' <input type="number" min="1" max="100" /></li>';
}
else {
str += '<li data-id="' + i + '"'
+ (item.disabled ? ' data-disabled="1"' : '')
+ (item.on ? ' data-on="1"' : '')
+ (item.ico ? 'data-theme="ico" title="' + item.title + '"' : '')
+ (item.direction ? 'data-direction="'+item.direction+'"' : '')
+ '>';
if (item.ico) {
str += '<i class="ico i-' + item.ico + '"></i>';
if (item.text)
{
str += item.text
}
}
else {
str += item.title
+ (item.quickKey ? '(<i>' + item.quickKey + '</i>)' : '');
}
str += '</li>';
}
});
this.main.html(str);
this.commands = commands;
return this;
};
/**
* 设置命令不可用
*
* @param {Array} commands 命令hash集合
* @return {this}
*/
CommandMenu.prototype.disableCommands = function (commands) {
var list = this.main.find('[data-id]');
if (commands) {
commands = makeHash(commands);
this.commands.forEach(function (item, i) {
if (commands[item.name]) {
item.disabled = true;
$(list[i]).attr('data-disabled', 1);
}
});
}
return this;
};
/**
* 设置命令可用
*
* @param {Array} commands 命令hash集合
* @return {this}
*/
CommandMenu.prototype.enableCommands = function (commands) {
var list = this.main.find('[data-id]');
if (commands) {
commands = makeHash(commands);
this.commands.forEach(function (item, i) {
if (commands[item.name]) {
delete item.disabled;
$(list[i]).attr('data-disabled', null);
}
});
}
return this;
};
/**
* 移除指定命令
*
* @param {Array} commands 命令hash集合
* @return {this}
*/
CommandMenu.prototype.removeCommands = function (commands) {
if (commands) {
commands = makeHash(commands);
for (var i = this.commands.length; i >= 0; i--) {
var item = this.commands[i];
if (commands[item.name]) {
this.commands.splice(i, 1);
this.main.find('[data-id="' + i + '"]').remove();
}
}
}
return this;
};
/**
* 显示
* @return {this}
*/
CommandMenu.prototype.show = function () {
this.main.show();
return this;
};
/**
* 隐藏
* @return {this}
*/
CommandMenu.prototype.hide = function () {
this.main.hide();
return this;
};
/**
* 注销
*/
CommandMenu.prototype.dispose = function () {
this.main.un('click', '[data-id]');
this.main = null;
this.commands = null;
};
observable.mixin(CommandMenu.prototype);
return CommandMenu;
}
function (require) {
var lang = require('common/lang');
var observable = require('common/observable');
/**
* 获取X坐标
*
* @param {MouseEvent} e 事件
* @return {number} 坐标值
*/
function getX(e) {
return e.offsetX || e.layerX || e.clientX;
}
/**
* 获取Y坐标
*
* @param {MouseEvent} e 事件
* @return {number} 坐标值
*/
function getY(e) {
return e.offsetY || e.layerY || e.clientY;
}
/**
* 获取事件参数
*
* @param {MouseEvent} e 事件
* @return {Object} 事件参数
*/
function getEvent(e) {
return {
x: getX(e),
y: getY(e),
which: e.which,
ctrlKey: e.ctrlKey || e.metaKey,
metaKey: e.metaKey,
altKey: e.altKey,
shiftKey: e.shiftKey,
originEvent: e
};
}
/**
* 阻止事件传递
*
* @param {MouseEvent} e 事件
*/
function prevent(e) {
e.stopPropagation();
if (e.preventDefault) {
e.preventDefault();
}
else {
e.returnValue = false;
}
}
/**
* 按下处理事件
*
* @param {Object} e 事件参数
*/
function mousedown(e) {
if (false === this.events.mousedown) {
return;
}
prevent(e);
var event = getEvent(e);
this.startX = event.x;
this.startY = event.y;
this.startTime = Date.now();
this.isDown = true;
// 左键
this.fire('down', event);
if (3 === e.which) {
this.fire('rightdown', event);
}
document.addEventListener('mouseup', this.handlers.mouseup, false);
}
/**
* 双击事件
*
* @param {Object} e 事件参数
*/
function dblclick(e) {
prevent(e);
if (false === this.events.dblclick) {
return;
}
this.fire('dblclick', getEvent(e));
}
/**
* 鼠标移动事件
*
* @param {Object} e 事件参数
*/
function mousemove(e) {
if (false === this.events.mousemove) {
return;
}
prevent(e);
var event = getEvent(e);
this.fire('move', event);
if (this.isDown && false !== this.events.drag) {
event.startX = this.startX;
event.startY = this.startY;
event.deltaX = event.x - this.startX;
event.deltaY = event.y - this.startY;
if (
Math.abs(event.deltaX) >= this.dragDelta
|| Math.abs(event.deltaY) >= this.dragDelta
) {
if (!this.isDragging) {
this.isDragging = true;
this.fire('dragstart', event);
}
}
if (this.isDragging) {
this.fire('drag', event);
}
}
}
/**
* 鼠标弹起事件
*
* @param {Object} e 事件参数
*/
function mouseup(e) {
if (false === this.events.mouseup) {
return;
}
prevent(e);
var event = getEvent(e);
event.time = Date.now() - this.startTime;
// 左键
this.fire('up', event);
if (3 === e.which) {
this.fire('rightup', event);
}
if (this.isDown && this.isDragging && false !== this.events.drag) {
event.deltaX = event.x - this.startX;
event.deltaY = event.y - this.startY;
this.isDragging = false;
this.fire('dragend', event);
}
else if (this.isDown && !this.isDragging && false !== this.events.click) {
this.isDragging = false;
this.fire('click', event);
}
this.isDown = false;
document.removeEventListener('mouseup', this.handlers.mouseup);
}
/**
* 滚轮事件
*
* @param {Object} e 事件参数
*/
function mousewheel(e) {
if (false === this.events.mousewheel) {
return;
}
prevent(e);
// tracepad触发滚动事件比滚轮触发速度快很多，这里需要截流一下
// 15毫秒可以去掉一半的trancepad滚动事件, 但是对滚轮滚动影响很小
// http://stackoverflow.com/questions/5527601/normalizing-mousewheel-speed-across-browsers
var now = Date.now();
if (this.lastWheel && now - this.lastWheel < 15) {
return;
}
this.lastWheel = now;
var delta = 0;
if (e.wheelDelta) {
delta = e.wheelDelta % 120 === 0 ? e.wheelDelta / 120 : e.wheelDelta / 3;
}
else if (e.detail) {
delta = -e.detail / 3;
}
var event = getEvent(e);
event.delta = delta;
this.fire('wheel', event);
}
/**
* 进入处理事件
*
* @param {Object} e 事件参数
*/
function mouseover(e) {
if (false === this.events.mouseover) {
return;
}
prevent(e);
this.fire('over');
}
/**
* 离开处理事件
*
* @param {Object} e 事件参数
*/
function mouseout(e) {
if (false === this.events.mouseout) {
return;
}
prevent(e);
this.fire('out');
}
/**
* 鼠标动作捕获器
*
* @param {HTMLElement} main 控制元素
* @param {Object} options 参数选项
* @param {HTMLElement} options.main 监控对象
*
* @constructor
*/
function MouseCapture(main, options) {
this.main = main;
options = options || {};
this.events = options.events || {};
this.dragDelta = 2;
this.handlers = {
mousewheel: lang.bind(mousewheel, this),
mousemove: lang.bind(mousemove, this),
mousedown: lang.bind(mousedown, this),
dblclick: lang.bind(dblclick, this),
mouseover: lang.bind(mouseover, this),
mouseout: lang.bind(mouseout, this),
mouseup: lang.bind(mouseup, this)
};
this.start();
}
MouseCapture.prototype = {
constructor: MouseCapture,
/**
* 开始监听
*
* @return {this}
*/
start: function () {
if (!this.listening) {
this.listening = true;
var target = this.main;
target.addEventListener('DOMMouseScroll', this.handlers.mousewheel, false);
target.addEventListener('mousewheel', this.handlers.mousewheel, false);
target.addEventListener('mousemove', this.handlers.mousemove, false);
target.addEventListener('mousedown', this.handlers.mousedown, false);
target.addEventListener('dblclick', this.handlers.dblclick, false);
target.addEventListener('mouseover', this.handlers.mouseover, false);
target.addEventListener('mouseout', this.handlers.mouseout, false);
}
return this;
},
/**
* 停止监听
*
* @return {this}
*/
stop: function () {
if (this.listening) {
this.listening = false;
var target = this.main;
target.removeEventListener('DOMMouseScroll', this.handlers.mousewheel);
target.removeEventListener('mousewheel', this.handlers.mousewheel);
target.removeEventListener('mousemove', this.handlers.mousemove);
target.removeEventListener('mousedown', this.handlers.mousedown);
target.removeEventListener('click', this.handlers.click);
target.removeEventListener('dblclick', this.handlers.dblclick);
target.removeEventListener('mouseover', this.handlers.mouseover);
target.removeEventListener('mouseout', this.handlers.mouseout);
document.removeEventListener('mouseup', this.handlers.mouseup);
}
return this;
},
/**
* 是否监听中
*
* @return {boolean} 是否
*/
isListening: function () {
return !!this.listening;
},
/**
* 注销
*/
dispose: function () {
this.stop();
this.un();
this.main = this.events = null;
}
};
observable.mixin(MouseCapture.prototype);
return MouseCapture;
}
function (require) {
var lang = require('common/lang');
var observable = require('common/observable');
/**
* 键盘按键
*
* @param {MouseEvent} e 事件
* @return {Object} 按键列表
*/
function getEvent(e) {
return {
originEvent: e
};
}
/**
* 按下弹起事件
*
* @param {Object} e 事件参数
*/
function resizedetect(e) {
if (false === this.events.resize) {
return;
}
var event = getEvent(e);
this.fire('resize', event);
}
/**
* 鼠标动作捕获器
*
* @constructor
* @param {HTMLElement} main 控制元素
* @param {Object} options 参数选项
* @param {HTMLElement} options.main 监控对象
*/
function ResizeCapture(main, options) {
this.main = main;
options = options || {};
this.events = options.events || {};
this.debounce = options.debounce || 200;
this.handlers = {
resize: lang.debounce(lang.bind(resizedetect, this), this.debounce)
};
this.start();
}
ResizeCapture.prototype = {
constructor: ResizeCapture,
/**
* 开始监听
*
* @return {this}
*/
start: function () {
if (!this.listening) {
this.listening = true;
window.addEventListener('resize', this.handlers.resize, false);
}
return this;
},
/**
* 停止监听
*
* @return {this}
*/
stop: function () {
if (this.listening) {
this.listening = false;
window.removeEventListener('resize', this.handlers.resize);
}
return this;
},
/**
* 是否监听中
*
* @return {boolean} 是否
*/
isListening: function () {
return !!this.listening;
},
/**
* 注销
*/
dispose: function () {
this.stop();
this.main = this.events = null;
this.un();
}
};
observable.mixin(ResizeCapture.prototype);
return ResizeCapture;
}
function(require) {
var lang = require('common/lang');
var guid = require('./util/guid');
var Painter = require('./Painter');
var MouseCapture = require('./capture/Mouse');
var KeyboardCapture = require('./capture/Keyboard');
var ResizeCapture = require('./capture/Resize');
var observable = require('common/observable');
/**
* Render初始化
*
*/
function init() {
// 注册画布
this.painter = new Painter(
this.main,
this.options.painter
);
// 注册鼠标
this.capture = new MouseCapture(
this.main,
this.options.mouse
);
// 注册键盘
this.keyCapture = new KeyboardCapture(
this.main,
this.options.keyboard
);
this.camera = this.painter.camera;
var me = this;
// 是否允许缩放
if(this.options.enableScale) {
this.capture.on('wheel', function(e) {
if (e.altKey || e.ctrlKey) {
e.originEvent.preventDefault();
e.originEvent.stopPropagation();
var defaultRatio = me.options.defaultRatio || 1.2;
var ratio = e.delta > 0 ? defaultRatio : 1 / defaultRatio;
var toScale = me.camera.scale * ratio;
if (
toScale < me.options.minScale
|| toScale > me.options.maxScale
) {
return;
}
me.scale(ratio, e);
}
else {
var moval = e.delta > 0 ? 30 : -30;
me.move(e.shiftKey ? moval : 0, e.shiftKey ? 0 : moval);
me.refresh();
}
});
}
// 窗口改变
if(this.options.enableResize) {
this.resizeCapture = new ResizeCapture(this.main);
this.resizeCapture.on('resize', function(e) {
var prevSize = me.painter.getSize();
me.painter.resetSize();
var size = me.painter.getSize();
if(size.width != prevSize.width || size.height != prevSize.height) {
me.fire('resize', {
size: size,
prevSize: prevSize
});
}
});
}
}
/**
* Render 构造函数
*
* @constructor
* @param {Object} options 参数选项
*/
function Render(main, options) {
this.main = main;
this.options = lang.extend(
{
defaultRatio: 1.2, // 默认的缩放比例
minScale: 0.2, // 最小缩放
maxScale: 200, //最大缩放
enableScale: true, // 是否允许缩放
enableResize: true // 是否允许大小改变
},
options
);
this.id = guid();
if(!this.main) {
throw 'require a main dom element';
}
init.call(this);
}
/**
* 设置鼠标样式
*
* @param {string} name 名字
* @return {this}
*/
Render.prototype.setCursor = function(name) {
this.main.style.cursor = name || 'default';
return this;
};
/**
* 刷新render
*
* @return {this}
*/
Render.prototype.refresh = function() {
this.painter.refresh();
return this;
};
/**
* 重置渲染器
*/
Render.prototype.reset = function() {
this.painter.reset();
};
/**
* 缩放指定的比例
*
* @param {number} ratio 比例
* @param {Object} p 参考点坐标
* @param {boolean} noRefresh 无刷新缩放
*
* @return {this}
*/
Render.prototype.scale = function(ratio, p, noRefresh) {
var toScale = this.camera.scale * ratio;
if (
toScale < this.options.minScale
|| toScale > this.options.maxScale
) {
return;
}
this.camera.ratio = ratio;
this.camera.center.x = p.x;
this.camera.center.y = p.y;
this.camera.scale = toScale;
if(true !== noRefresh) {
this.painter.refresh();
}
else {
this.painter.adjust();
}
this.camera.ratio = 1;
};
/**
* 缩放到指定的比例
*
* @param {number} scale 比例
* @param {Object} p 中心点坐标
* @param {boolean} noRefresh 无刷新缩放
*
* @return {this}
*/
Render.prototype.scaleTo = function(scale, p, noRefresh) {
// 缩放
this.scale(scale / this.camera.scale, this.camera.center, true);
// 平移
this.painter.moveTo(p.x, p.y);
this.camera.reset(p, scale);
if(true !== noRefresh) {
this.painter.refresh();
}
};
/**
* 获取焦点
*
*/
Render.prototype.focus = function() {
//this.capture.start();
this.keyCapture.start();
};
/**
* 离开焦点
*
*/
Render.prototype.blur = function() {
//this.capture.stop();
this.keyCapture.stop();
};
/**
* 注销对象
*
*/
Render.prototype.dispose = function() {
this.un();
this.painter.dispose();
this.capture.dispose();
this.keyCapture.dispose();
this.resizeCapture && this.resizeCapture.dispose();
this.main = this.options = this.camera = null;
this.painter = this.capture = this.keyCapture = null;
};
// 注册painter中的函数
[
'addSupport', 'move', 'getSize',
'getLayer', 'addLayer', 'removeLayer',
'getShapeIn', 'clearShapes'
].forEach(function(fnName) {
Render.prototype[fnName] = function() {
return this.painter[fnName].apply(this.painter, arguments);
};
});
observable.mixin(Render.prototype);
return Render;
}
function(require) {
var observable = require('common/observable');
// 绑定click事件
function bindClick(components) {
var me = this;
document.body.addEventListener('click', function(e) {
// 监听查看器
if (components.viewer === e.target || components.viewer.contains(e.target)) {
me.viewer.focus();
}
else {
me.viewer.blur();
}
// 监听编辑器
if (components.editor) {
if (components.editor === e.target || components.editor.contains(e.target)) {
me.editor.focus();
}
else {
me.editor.blur();
}
}
}, false);
}
/**
* 绑定键盘事件
*/
function bindKey() {
var me = this;
document.body.addEventListener('keydown', function(e) {
if (!program.listening) {
return;
}
e.ctrlKey = e.ctrlKey || e.metaKey;
// 全选
if (65 === e.keyCode && e.ctrlKey) {
e.preventDefault();
e.stopPropagation();
}
// 功能键
if (e.keyCode >= 112 && e.keyCode <= 119 && e.keyCode !== 116) {
e.preventDefault();
e.stopPropagation();
me.fire('function', {
keyCode: e.keyCode
});
}
// 保存
else if (83 === e.keyCode && e.ctrlKey) {
e.preventDefault();
e.stopPropagation();
me.fire('save');
}
// 粘贴
else if ((e.keyCode == 86 && e.ctrlKey)) {
e.preventDefault();
e.stopPropagation();
me.fire('paste');
}
});
}
var program = {
// 在线地址读取接口
fontUrl: './php/readFont.php?file=${0}',
/**
* 初始化
*/
init: function(components) {
bindClick.call(this, components);
bindKey.call(this, components);
},
/**
* 暂存对象
*
* @type {Object}
*/
data: {},
viewer: null, // glyf查看器
project: null, // 项目管理器
projectViewer: null, // 项目查看器
ttfManager: null, // ttf管理器
listening: true, // 正在监听事件
loading: require('./loading')
};
observable.mixin(program);
return program;
}
function (require) {
var lang = require('common/lang');
var i18n = require('../i18n/i18n');
var contours2svg = require('fonteditor-core/ttf/util/contours2svg');
var observable = require('common/observable');
var string = require('common/string');
var shapes = require('editor/shapes/support');
var SYMBOL_ITEM_TPL = '' // symbol 아이템 템플릿 ( div 안에 svg 구조 )
+ "<a class='symbol-item btn btn-flat btn-sm' "
+ " data-action='addsupportshapes' data-type='${symbol}' title='${title}'>"
+ '<svg viewbox="0 0 ${unitsPerEm.xMax} ${unitsPerEm.yMax}">'
+ '<g><path class="path" ${fillColor} ${d}/></g>'
+ '</svg>'
+ "</a>";
function SymbolList(main, options) {
this.main = $(main);
this.options = lang.extend({ }, options);
this.init();
}
function getMax (contours) {
var xMax = 0;
var yMax = 0;
contours.forEach(function(c) {
c.forEach(function(p) {
if (p.x > xMax) { xMax = p.x; }
if (p.y > yMax) { yMax = p.y; }
})
});
return { xMax : xMax, yMax : yMax };
}
SymbolList.prototype.init = function () {
var arr = [];
var self = this;
var symbols = Object.keys(shapes);
symbols.forEach(function(symbol) {
var unitsPerEm = getMax(shapes[symbol]);
var obj = {
symbol : symbol,
title : i18n.lang[symbol],
d : 'd="' + contours2svg(shapes[symbol]) + '"',
unitsPerEm : unitsPerEm
}
arr.push(string.format(SYMBOL_ITEM_TPL, obj));
});
this.main.html(arr.join(''));
}
observable.mixin(SymbolList.prototype);
return SymbolList;
}
function (require) {
var observable = require('common/observable');
function bindClick(components) {
var me = this;
document.body.addEventListener('click', function (e) {
if (!me.listening) {
return;
}
// 监听查看器
if (components.viewer === e.target || components.viewer.contains(e.target)) {
me.viewer.focus();
}
else {
me.viewer.blur();
}
// 监听编辑器
if (components.editor) {
if (components.editor === e.target || components.editor.contains(e.target)) {
me.editor.focus();
}
else {
me.editor.blur();
}
}
});
}
/**
* 绑定键盘事件
*/
function bindKey() {
var me = this;
document.body.addEventListener('keydown', function (e) {
if (!me.listening) {
return;
}
e.ctrl = e.ctrlKey || e.metaKey;
// 全选
if (65 === e.keyCode && e.ctrl) {
e.preventDefault();
e.stopPropagation();
}
// 功能键
if (e.keyCode >= 112 && e.keyCode <= 119 && e.keyCode !== 116) {
e.preventDefault();
e.stopPropagation();
me.fire('function', {
keyCode: e.keyCode
});
}
// 保存
else if (83 === e.keyCode && e.ctrl) {
e.preventDefault();
e.stopPropagation();
if (e.shiftKey) {
me.fire('save', {
saveType: 'force'
});
}
else {
me.fire('save');
}
}
// 粘贴
else if ((86 === e.keyCode && e.ctrl)) {
e.preventDefault();
e.stopPropagation();
me.fire('paste');
}
});
}
var program = {
/**
* 初始化
*
* @param {HTMLElement} components 主面板元素
*/
init: function (components) {
bindClick.call(this, components);
bindKey.call(this, components);
},
/**
* 暂存对象
*
* @type {Object}
*/
data: {},
setting: {},
listening: true, // 正在监听事件
loading: require('./loading') // loading 对象
};
observable.mixin(program);
return program;
}
function(require) {
var lang = require('common/lang');
var observable = require('common/observable');
// 键盘名称映射表
var keyCodeMap = {
37: 'left',
38: 'up' ,
39: 'right',
40: 'down',
13: 'enter',
27: 'esc',
8: 'backspace',
45: 'insert',
46: 'delete',
16: 'shift',
17: 'ctrl',
18: 'alt',
36: 'home',
47: 'help',
20: 'caps',
9: 'tab'
};
/**
* 键盘按键
* @param {MouseEvent} e 事件
*
* @return {Object} 按键列表
*/
function getEvent(e) {
return {
keyCode: e.keyCode,
key: keyCodeMap[e.keyCode],
ctrlKey: e.ctrlKey,
metaKey: e.metaKey,
altKey: e.altKey,
shiftKey: e.shiftKey,
originEvent: e
};
}
/**
* 按下弹起事件
*
* @param {Object} e 事件参数
*/
function keydetect(keyEvent, e) {
if(false === this.events['key' + Event]) {
return;
}
var event = getEvent(e);
this.fire('key' + keyEvent, event);
var keyName = keyCodeMap[event.keyCode];
if (keyName) {
this.fire(keyName + ':' + keyEvent, event);
}
}
/**
* 鼠标动作捕获器
*
* @constructor
* @param {HTMLElement} main 控制元素
* @param {Object} options 参数选项
* @param {HTMLElement} options.main 监控对象
*/
function KeyboardCapture(main, options) {
this.main = main;
options = options || {};
this.events = options.events || {};
this.handlers = {
keydown: lang.bind(keydetect, this, 'down'),
keyup: lang.bind(keydetect, this, 'up'),
keypress: lang.bind(keydetect, this, 'press')
};
this.start();
}
lang.extend(KeyboardCapture.prototype, {
/**
* 开始监听
*
* @return {this}
*/
start: function() {
if (!this.listening) {
this.listening = true;
var target = document.body;
target.addEventListener('keydown', this.handlers.keydown, false);
target.addEventListener('keyup', this.handlers.keyup, false);
target.addEventListener('keypress', this.handlers.keypress, false);
}
return this;
},
/**
* 停止监听
*
* @return {this}
*/
stop: function() {
if (this.listening) {
this.listening = false;
var target = document.body;
target.removeEventListener('keydown', this.handlers.keydown);
target.removeEventListener('keyup', this.handlers.keyup);
target.removeEventListener('keypress', this.handlers.keypress);
}
return this;
},
/**
* 是否监听中
*
* @return {boolean} 是否
*/
isListening: function() {
return !!this.listening;
},
/**
* 注销
*/
dispose: function() {
this.stop();
this.main = this.events = null;
this.un();
}
});
observable.mixin(KeyboardCapture.prototype);
return KeyboardCapture;
}
function (require) {
var observable = require('common/observable');
var i18n = require('../i18n/i18n');
var PAGER_TPL = ''
+ '<button data-pager="prev" type="button" class="btn btn-flat btn-new btn-sm">'
+ i18n.lang.prevpage + '</button>'
+ '<input data-pager="text" type="text" class="form-control">'
+ '<span data-pager="info"></span>'
+ '<button data-pager="goto" type="button" class="btn btn-flat btn-new btn-sm">'
+ i18n.lang.gotopage + '</button>'
+ '<button data-pager="next" type="button" class="btn btn-flat btn-new btn-sm">'
+ i18n.lang.nextpage + '</button>';
/**
* pager构造函数
*
* @constructor
* @param {HTMLElement} main 主元素
* @param {Object} options 参数
*/
function Pager(main, options) {
this.main = $(main);
this.options = options || {};
this.main.html(PAGER_TPL);
this.textPage = this.main.find('input[data-pager="text"]');
var me = this;
me.main.on('click', 'button[data-pager]', function (e) {
if (this.getAttribute('data-disabled')) {
return;
}
var action = this.getAttribute('data-pager');
var page = me.page;
if (action === 'prev') {
page = me.page > 1 ? me.page - 1 : 1;
}
else if (action === 'next') {
page = me.page < me.totalPage ? me.page + 1 : me.totalPage;
}
else if (action === 'goto') {
var p = +me.textPage.val();
if (p >= 1 && p <= me.totalPage) {
page = p;
}
else {
page = me.page;
}
}
me.textPage.val(page);
if (page !== me.page) {
me.page = page;
me.fire('change', {
page: page
});
}
});
me.textPage.on('keyup', function (e) {
if (e.keyCode === 13) {
var page = +this.value.trim();
if (page >= 1 && page <= me.totalPage) {
me.page = page;
me.fire('change', {
page: page
});
}
else {
this.value = me.page;
}
}
});
}
/**
* 显示pager
*
* @param {number} page 当前页码
* @param {number} pageSize 分页大小
* @param {number} total 总个数
*/
Pager.prototype.show = function (page, pageSize, total) {
if (total <= pageSize) {
this.hide();
}
else {
this.page = page;
this.totalPage = Math.ceil(total / pageSize);
this.main.find('[data-pager="text"]').val(page);
this.main.find('[data-pager="info"]').html('/ ' + this.totalPage);
this.main.find('[data-pager="prev"]')[
page === 1 ? 'attr' : 'removeAttr'
]('data-disabled', 1);
this.main.find('[data-pager="next"]')[
page === this.totalPage ? 'attr' : 'removeAttr'
]('data-disabled', 1);
}
this.main.show();
};
/**
* 隐藏
*/
Pager.prototype.hide = function () {
this.main.hide();
};
/**
* 注销
*/
Pager.prototype.dispose = function () {
this.main.un('click', 'button[data-pager]');
this.main.find('input[data-pager="text"]').un('keyup');
};
observable.mixin(Pager.prototype);
return Pager;
}