function (require) {
var Control = require('esui/Control');
var u = require('underscore');
var eoo = require('eoo');
var painters = require('esui/painters');
var esui = require('esui');
require('./AdvancedColorPicker');
require('./SimpleColorPicker');
/**
* @class FullColorPicker
* @extends esui.InputControl
*/
var FullColorPicker = eoo.create(
Control,
{
/**
* 控件类型
*
* @override
*/
type: 'FullColorPicker',
/**
* 初始化参数
*
* @override
*/
initOptions: function (options) {
var properties = {
// 默认颜色
hex: '000000',
displayHex: '000000',
alpha: 100,
displayAlpha: 100,
// 默认拾色器模式，支持 'simple' | 'advanced' | 'full'
defaultMode: 'simple',
// 是否支持切换为'full'型
// mode为'simple'，属性可配
// mode为'advanced'，属性可配
// mode为'full'，属性只能为false
switchable: true,
// 是否支持alpha选择
hasAlpha: true
};
u.extend(properties, FullColorPicker.defaultProperties, options);
// mode是full型，switchable必须是false
if (properties.mode === 'full' || properties.switchable === false) {
properties.switchable = false;
}
this.setProperties(properties);
},
/**
* @override
*/
initStructure: function () {
var html = [];
var advancedHTML = generateAdvancedHTML.call(this);
var simpleHTML = generateSimpleHTML.call(this);
// 根据模式创建结构
if (this.defaultMode === 'full' || this.switchable) {
html = [advancedHTML, simpleHTML];
}
else if (this.defaultMode === 'simple') {
html = [simpleHTML];
}
else {
html = [advancedHTML];
}
// 如果是可切换的，还要加上切换按钮
if (this.switchable) {
var switchClass = this.helper.getPartClassName('mode-switch');
html.push('<div data-ui-variants="link fluid" data-ui-type="Button" data-ui-child-name="switch" ');
html.push('class="' + switchClass + '">' + this.fullModeText + '</div>');
}
this.main.innerHTML = html.join('');
this.initChildren();
this.currentMode = this.defaultMode;
this.addState(this.defaultMode);
},
/**
* @override
* @fires FullColorPicker#change
*/
initEvents: function () {
var control = this;
// 大色盘
var advancedColorPicker = this.getChild('advanced');
if (advancedColorPicker) {
// 高级色盘改变引发简单色盘色彩重置
advancedColorPicker.on(
'change',
function () {
var hex = this.getDisplayHex();
var alpha = this.getDisplayAlpha();
control.displayHex = hex;
control.displayAlpha = alpha;
control.fire('change');
}
);
}
// 基本色盘变化
var SimpleColorPicker = this.getChild('simple');
if (SimpleColorPicker) {
SimpleColorPicker.on(
'change',
function () {
var color = this.getRawValue();
control.displayHex = color;
updateAdvancedColorPicker.call(control);
control.fire('change');
}
);
}
var switchButton = this.getChild('switch');
if (switchButton) {
switchButton.on('click', u.bind(switchState, this));
}
},
/**
* 渲染自身
*
* @override
*/
repaint: painters.createRepaint(
Control.prototype.repaint,
{
name: ['hex', 'alpha'],
paint: function (colorPicker, hex, alpha) {
if (hex == null && alpha == null) {
return;
}
// 更新显示值
colorPicker.displayHex = hex;
colorPicker.displayAlpha = alpha;
// 更新高级模式
var advanced = colorPicker.getChild('advanced');
if (advanced) {
advanced.setProperties({hex: hex, alpha: alpha});
}
}
}
),
/**
* 获取色值
*
* @method FullColorPicker#getDisplayHex
* @return {string}
* @public
*/
getDisplayHex: function () {
return this.displayHex;
},
/**
* 获取透明度
*
* @method FullColorPicker#getDisplayAlpha
* @return {number}
* @public
*/
getDisplayAlpha: function () {
return this.displayAlpha;
}
}
);
FullColorPicker.defaultProperties = {
fullModeText: '完整模式',
advancedModeText: '高级模式',
simpleModeText: '简单模式'
};
function generateAdvancedHTML() {
return ''
+ '<div class="' + this.helper.getPartClassName('advanced-section') + '">'
+ '<div data-ui-type="AdvancedColorPicker" data-ui-child-name="advanced"'
+ 'data-ui-no-alpha="' + (this.hasAlpha ? 'false' : 'true') + '">'
+ '</div>'
+ '</div>';
}
function generateSimpleHTML() {
return ''
+ '<div class="' + this.helper.getPartClassName('simple-section') + '">'
+ '<div data-ui-type="SimpleColorPicker" data-ui-child-name="simple">'
+ '</div>'
+ '</div>';
}
/**
* 模式切换
*/
function switchState() {
var newMode;
var switchButton = this.getChild('switch');
// 如果当前处于full模式，切换回默认模式
if (this.currentMode === 'full') {
newMode = this.defaultMode;
switchButton.setContent(this.fullModeText);
}
else {
newMode = 'full';
if (this.currentMode === 'simple') {
switchButton.setContent(this.simpleModeText);
}
else {
switchButton.setContent(this.advancedModeText);
}
}
this.removeState(this.currentMode);
this.addState(newMode);
this.currentMode = newMode;
}
function updateAdvancedColorPicker() {
// 更新色盘
var colorPicker = this.getChild('advanced');
if (colorPicker) {
var color = this.displayHex;
colorPicker.updateHex(color);
var alpha = this.displayAlpha;
colorPicker.updateAlpha(alpha);
}
}
esui.register(FullColorPicker);
return FullColorPicker;
}
function (require) {
var eoo = require('eoo');
var InputControl = require('esui/InputControl');
var lib = require('esui/lib');
var u = require('underscore');
var m = require('moment');
var ui = require('esui');
var painters = require('esui/painters');
var $ = require('jquery');
require('esui/behavior/mousewheel');
/**
* 微调输入控件
*
* @class ui.Spinner
* @extends esui.InputControl
*/
var Spinner = eoo.create(
InputControl,
{
/**
* 控件类型
*
* @type {string}
* @override
*/
type: 'Spinner',
/**
* 微调输入控件
*
* @constructor
*/
constructor: function () {
this.$super(arguments);
// 短按计时器
this.timer = 0;
// 长按计时器
this.longTimer = 0;
},
initOptions: function (options) {
var properties = {};
u.extend(properties, Spinner.defaultProperties, options);
var format = properties.format;
var max = properties.max;
var min = properties.min;
if (format === 'number') {
max = max === 'indefinite' ? Number.MAX_VALUE : parseToNum(max);
min = min === 'indefinite' ? -(Number.MAX_VALUE) : parseToNum(min);
}
else {
max = max === 'indefinite' ? m().add(50, 'years') : m(max, format);
min = min === 'indefinite' ? m().subtract(50, 'years') : m(min, format);
}
properties.max = max;
properties.min = min;
var scale = properties.scale;
// 根据步长计算精度
if (format === 'number') {
scale = scale + '';
var dotPosition = scale.indexOf('.');
if (dotPosition > -1) {
properties.precision = scale.length - dotPosition - 1;
}
else {
properties.precision = 0;
}
}
// scale
if (format !== 'number' && /^\s*\{/.test(scale)) {
properties.scale = $.parseJSON(scale);
}
this.setProperties(properties);
},
/**
* 构建spinner
*/
initStructure: function () {
var helper = this.helper;
var spinnerTpl = [
'<input id="${inputId}" type="text" />',
'<span id="${upId}" class="${upClass} ${iconClass}"></span>',
'<span id=${downId} class="${downClass} ${iconClass}"></span>'
].join('');
var mainElement = this.main;
mainElement.innerHTML = lib.format(
spinnerTpl,
{
inputId: helper.getId('input'),
upId: helper.getId('up'),
upClass: helper.getPartClasses('up'),
downId: helper.getId('down'),
downClass: helper.getPartClasses('down'),
iconClass: helper.getIconClass()
}
);
$(mainElement).addClass(helper.getPrefixClass('textbox'));
},
/**
* 初始化spinner事件
*/
initEvents: function () {
var helper = this.helper;
var up = helper.getPart('up');
var down = helper.getPart('down');
helper.addDOMEvent(up, 'mousedown', mouseDownHandler);
helper.addDOMEvent(down, 'mousedown', mouseDownHandler);
helper.addDOMEvent(up, 'mouseup', mouseUpHandler);
helper.addDOMEvent(down, 'mouseup', mouseUpHandler);
helper.addDOMEvent(up, 'mouseout', mouseUpHandler);
helper.addDOMEvent(down, 'mouseout', mouseUpHandler);
// focus时支持鼠标滚轮
var input = this.getInput();
helper.addDOMEvent(
input,
'focus',
function () {
helper.addDOMEvent(this.main, 'mousewheel', mouseWheelHandler);
}
);
helper.addDOMEvent(
input,
'blur',
function () {
helper.removeDOMEvent(this.main, 'mousewheel', mouseWheelHandler);
}
);
},
/**
* 渲染自身
*
* @override
* @protected
*/
repaint: painters.createRepaint(
InputControl.prototype.repaint,
{
name: ['rawValue'],
paint: function (spinner, rawValue) {
var max = spinner.max;
var min = spinner.min;
var format = spinner.format;
if (spinner.format === 'number') {
rawValue = parseToNum(rawValue);
rawValue = Math.max(rawValue, min);
rawValue = Math.min(rawValue, max);
}
else {
rawValue = m(rawValue, format);
if (rawValue.isValid()) {
rawValue = m.max(rawValue, min);
rawValue = m.min(rawValue, max);
}
else {
rawValue = min;
}
rawValue = m(rawValue, format).format(format);
}
setInputValue.call(spinner, rawValue);
}
},
{
name: ['width'],
paint: function (spinner, width) {
width = parseInt(width, 10);
spinner.main.style.width = width + 'px';
}
},
{
name: ['disabled', 'readOnly'],
paint: function (spinner, disabled, readOnly) {
var input = spinner.getInput();
input.disabled = disabled;
input.readOnly = readOnly;
}
}
),
/**
* 获取input元素
*
* @return {Element}
*/
getInput: function () {
return lib.g(this.helper.getId('input'));
},
/**
* 获取控件值
*
* @return {string}
*/
getValue: function () {
var input = this.getInput();
return input.value;
},
/**
* 设置控件值
*
* @param {string} value 控件值
*/
setValue: function (value) {
setInputValue.call(this, value);
}
}
);
/**
* 解析数字类型方法
*
* @param {string} value 要解析的值
* @return {string}
*/
function parseToNum(value) {
if (value) {
value = parseFloat(value);
}
return isNaN(value) ? '' : value;
}
/**
* 微调方向枚举值
*
* @enum {string}
*/
var Direct = {
UP: 'up',
DOWN: 'down'
};
/**
* 更新日期类型方法
*
* @param {Direct} direct up / down
*/
function updateDate(direct) {
var input = this.getInput();
var scale = typeof this.scale === 'object' ? this.scale : parseToNum(this.scale);
var timeFormat = this.format;
var value = m(input.value, timeFormat);
var max = this.max;
var min = this.min;
// 如果用户手动输入一个非法值，会默认显示最小值
value = value.isValid() ? value : min;
if (direct === Direct.UP) {
value = value.add(scale.value, scale.key);
if (m.max(value, max) === max) {
value = m(value, timeFormat).format(timeFormat);
}
else {
if (!!this.turn && this.turn !== 'false') {
value = m(min, timeFormat).format(timeFormat);
}
else {
value = m(max, timeFormat).format(timeFormat);
}
}
}
else {
value = value.subtract(scale.value, scale.key);
if (m.min(value, min) === min) {
value = m(value, timeFormat).format(timeFormat);
}
else {
if (!!this.turn && this.turn !== 'false') {
value = m(max, timeFormat).format(timeFormat);
}
else {
value = m(min, timeFormat).format(timeFormat);
}
}
}
setInputValue.call(this, value);
}
/**
* 更新数值类型的方法
*
* @param {Direct} direct up / down
*/
function updateNumber(direct) {
var input = this.getInput();
var scale = parseToNum(this.scale);
var value = parseToNum(input.value);
var max = this.max;
var min = this.min;
if (direct === Direct.UP) {
value += scale;
if (value > max) {
if (!!this.turn && this.turn !== 'false') {
value = min;
}
else {
value = max;
}
}
}
else {
value -= scale;
if (value < min) {
if (!!this.turn && this.turn !== 'false') {
value = max;
}
else {
value = min;
}
}
}
setInputValue.call(this, value);
}
/**
* 更新值方法，用来判断值类型是数字类型还是时间类型
*
* @param {Direct} direct 方向
*/
function updateValue(direct) {
if (this.format !== 'number') {
updateDate.call(this, direct);
}
else {
updateNumber.call(this, direct);
}
}
/**
* 改变value方法，该方法会触发 scrollValue 事件
* 如果用户想自定义方法，可以通过preventDefault()阻止默认行为
*
* @param {Event} e 事件对象
*/
function scrollValue(e) {
if (!this.disabled && !this.readOnly) {
var direct = (e.target.id === this.helper.getId('up')) ? Direct.UP : Direct.DOWN;
var args = {
direct: direct
};
var eventArgs = this.fire('scrollValue', args);
if (!eventArgs.isDefaultPrevented()) {
updateValue.call(this, direct);
}
}
}
/**
* 长按按钮自动更新方法
* 长按3秒时，速度加倍
*
* @param {Event} e 事件对象
*/
function autoUpdate(e) {
var me = this;
this.timer = setInterval(
function () {
return scrollValue.call(me, e);
},
+parseToNum(this.timeInterval)
);
this.longTimer = setTimeout(
function () {
clearInterval(me.timer);
me.timer = setInterval(
function () {
return scrollValue.call(me, e);
},
parseToNum(this.timeInterval) / 2
);
},
3000
);
}
/**
* 鼠标滚轮方法
*
* @param {Event} e 事件对象
* @param {Direct} direct 方向
*/
function mouseWheelHandler(e, direct) {
direct = direct === 1 ? Direct.UP : Direct.DOWN;
updateValue.call(this, direct);
e.preventDefault();
}
/**
* 鼠标点击方法
*
* @param {Event} e 事件对象
*/
function mouseDownHandler(e) {
var delayTime = 1200 - this.timeInterval;
scrollValue.call(this, e);
var me = this;
this.timer = setTimeout(
function () {
return autoUpdate.call(me, e);
},
delayTime
);
// 阻止鼠标双击后反选控件其他部分
e.preventDefault();
}
/**
* 取消事件方法
*
* @param {Event} e 事件对象
*/
function mouseUpHandler(e) {
clearInterval(this.timer);
clearTimeout(this.timer);
clearTimeout(this.longTimer);
this.timer = 0;
this.longTimer = 0;
}
function setInputValue(value) {
if (this.precision) {
value = value.toFixed(this.precision);
}
var input = this.getInput();
input.value = value;
}
/**
* Spinner默认属性
* turn: 当值到边界时是否反转
* scale: 刻度单位, 如果format为 number 类型，则为数字类型， 如果format为 日期类型，则为Object类型，格式为：
* {
* key: ***, //时间单位，如 'days', 'years'等，具体请参考 {@link moment}
* value: *** //单位时间， 数字类型
* }
* max: 上界
* min: 下界
* format: 值的格式，包括 number 和 日期 两种，如果使用日期格式，format按照{@link moment}的格式进行设置
* timeInterval: 长按按钮时，数值滚动的时间间隔
* @type {{spaceHolder: string, turn: boolean, scale: number, range: Array}}
*/
Spinner.defaultProperties = {
turn: true,
scale: 1,
width: 200,
height: 30,
max: 'indefinite',
min: 'indefinite',
format: 'number',
timeInterval: 100
};
ui.register(Spinner);
return Spinner;
}
function (require) {
require('esui/Tree');
var painter = require('esui/painters');
var ui = require('esui/main');
var lib = require('esui/lib');
var u = require('underscore');
var util = require('ub-ria/util');
var RichSelector = require('ub-ria/ui/RichSelector');
var TreeStrategy = require('ub-ria/ui/SelectorTreeStrategy');
/**
* 控件类
*
* @constructor
* @param {Object} options 初始化参数
*/
function TreeRichSelector(options) {
RichSelector.apply(this, arguments);
}
lib.inherits(TreeRichSelector, RichSelector);
TreeRichSelector.prototype.type = 'TreeRichSelector';
TreeRichSelector.prototype.styleType = 'RichSelector';
TreeRichSelector.prototype.initOptions = function (options) {
var properties = {
// 数据源
datasource: null,
// 树的相关属性
orientExpand: false,
wideToggleArea: false,
onlyLeafSelect: true,
allowUnselectNode: false,
hideRoot: true,
treeSkin: 'flat'
};
lib.extend(properties, options);
RichSelector.prototype.initOptions.call(this, properties);
};
TreeRichSelector.prototype.initStructure = function () {
RichSelector.prototype.initStructure.apply(this, arguments);
lib.addClass(
this.main,
'ui-tree-richselector'
);
};
/**
* 重新渲染视图
* 仅当生命周期处于RENDER时，该方法才重新渲染
*
* @param {Array=} 变更过的属性的集合
* @override
*/
TreeRichSelector.prototype.repaint = painter.createRepaint(
RichSelector.prototype.repaint,
{
name: 'datasource',
paint: function (control, datasource) {
control.refresh();
}
},
{
name: 'selectedData',
paint:
function (control, selectedData) {
// 先取消选择
var allData = control.allData;
if (allData && allData.children) {
control.selectItems(allData.children, false);
control.selectItems(selectedData, true);
control.fire('add');
}
}
}
);
/**
* 适配数据，创建一个全集扁平索引
*
* @param {ui.TreeRichSelector} treeForSelector 类实例
* @ignore
*/
TreeRichSelector.prototype.adaptData = function () {
// 这是一个不具备任何状态的东西
this.allData = this.datasource;
// 一个扁平化的索引
// 其中包含父节点信息，以及节点选择状态
var indexData = {};
if (this.allData && this.allData.children) {
walkTree(
this.allData,
this.allData.children,
function (parent, child) {
indexData[child.id] = {
parentId: parent.id,
node: child,
isSelected: false
};
}
);
}
this.indexData = indexData;
};
/**
* 刷新备选区
* @override
*/
TreeRichSelector.prototype.refreshContent = function () {
var treeData = this.isQuery() ? this.queriedData : this.allData;
if (!treeData
|| !treeData.children
|| !treeData.children.length) {
this.addState('empty');
}
else {
this.removeState('empty');
}
if (!treeData || !treeData.children) {
return;
}
var queryList = this.getQueryList();
var tree = queryList.getChild('tree');
if (!tree) {
var options = {
childName: 'tree',
datasource: treeData,
allowUnselectNode: this.allowUnselectNode,
strategy:
new TreeStrategy(
{
mode: this.mode,
onlyLeafSelect: this.onlyLeafSelect,
orientExpand: this.orientExpand
}
),
wideToggleArea: this.wideToggleArea,
hideRoot: this.hideRoot,
selectMode: this.multi ? 'multiple' : 'single',
skin: this.treeSkin
};
if (this.getItemHTML) {
options.getItemHTML = this.getItemHTML;
}
tree = ui.create('Tree', options);
queryList.addChild(tree);
tree.appendTo(queryList.main);
var control = this;
var indexData = this.indexData;
tree.on(
'selectnode',
function (e) {
var node = e.node;
control.handlerAfterClickNode(node);
}
);
tree.on(
'unselectnode',
function (e) {
var node = e.node;
if (indexData[node.id]) {
indexData[node.id]['isSelected'] = false;
}
}
);
}
else {
tree.setProperties({
'datasource': util.deepClone(treeData),
'keyword': this.getKeyword()
});
}
};
/**
* 点击触发，选择或删除节点
* @param {Object} node 节点对象
* @ignore
*/
TreeRichSelector.prototype.handlerAfterClickNode = function (node) {
// 这个item不一定是源数据元，为了连锁同步，再取一遍
var item = this['indexData'][node.id];
if (!item) {
return;
}
if (this.mode === 'add') {
actionForAdd(this, item);
}
else if (this.mode === 'delete') {
actionForDelete(this, item);
}
else if (this.mode === 'load') {
actionForLoad(this, item);
}
};
/**
* 添加动作
*
* @param {ui.TreeRichSelector} control 类实例
* @param {Object} item 保存在indexData中的item
*
* @ignore
*/
function actionForAdd(control, item) {
item['isSelected'] = true;
//如果是单选，需要将其他的已选项置为未选
if (!control.multi) {
// 赋予新值
control.curSeleId = item['node'].id;
}
control.fire('add');
}
/**
* 选择或取消选择
* 如果控件是单选的，则将自己置灰且将其他节点恢复可选
* 如果控件是多选的，则仅将自己置灰
*
* @param {ui.TreeRichSelector} control 类实例
* @param {Object} id 结点对象id
* @param {boolean} toBeSelected 置为选择还是取消选择
*
* @ignore
*/
function selectItem(control, id, toBeSelected) {
var tree = control.getQueryList().getChild('tree');
// 完整数据
var indexData = control['indexData'];
var item = indexData[id];
if (!item) {
return;
}
//如果是单选，需要将其他的已选项置为未选
if (!control.multi && toBeSelected) {
unselectCurrent(control);
// 赋予新值
control.curSeleId = id;
}
item.isSelected = toBeSelected;
if (toBeSelected) {
tree.selectNode(id, true);
}
else {
tree.unselectNode(id, true);
}
}
/**
* 撤销选择当前项
* @param {ui.TreeRichSelector} control 类实例
* @ignore
*/
function unselectCurrent(control) {
var curId = control.curSeleId;
//撤销当前选中项
if (curId) {
var treeList = control.getQueryList().getChild('tree');
treeList.unselectNode(curId);
control.curSeleId = null;
}
}
/**
* 添加全部
*
* @override
*/
TreeRichSelector.prototype.selectAll = function () {
var data = this.isQuery() ? this.queriedData : this.allData;
var children = data.children;
var items = this.getLeafItems(children, false);
var control = this;
u.each(items, function (item) {
selectItem(control, item.id, true);
});
this.fire('add');
};
/**
* 批量选择或取消选择，供外部调用，不提供fire事件
*
* @param {Array} nodes 要改变状态的节点集合
* @param {boolean} toBeSelected 目标状态 true是选择，false是取消
* @override
*/
TreeRichSelector.prototype.selectItems =
function (nodes, toBeSelected) {
var indexData = this.indexData;
if (!indexData) {
return;
}
var control = this;
u.each(
nodes,
function (node) {
var id = node.id !== undefined ? node.id : node;
var item = indexData[id];
if (item !== null && item !== undefined) {
var node = item['node'];
// 更新状态，但不触发事件
selectItem(control, node.id, toBeSelected);
}
}
);
};
/**
* 删除动作
*
* @param {ui.TreeRichSelector} control 类实例
* @param {Object} item 保存在indexData中的item
*
* @ignore
*/
function actionForDelete(control, item) {
deleteItem(control, item['node'].id);
// 外部需要知道什么数据被删除了
control.fire('delete', { items: [item['node']] });
}
/**
* 删除选择的节点
*
* @param {ui.TreeRichSelector} control 类实例
* @param {number} id 结点数据id
*
* @ignore
*/
function deleteItem(control, id) {
// 完整数据
var indexData = control.indexData;
var item = indexData[id];
var parentId = item.parentId;
var parentItem = indexData[parentId];
var node;
if (!parentItem) {
node = control.allData;
}
else {
node = parentItem.node;
}
var children = node.children || [];
// 从parentNode的children里删除
var newChildren = u.without(children, item['node']);
// 没有孩子了，父节点也删了吧
if (newChildren.length === 0 && parentId !== -1) {
deleteItem(control, parentId);
}
else {
node.children = newChildren;
// datasource以引用形式分布下来，因此无需重新set了
control.refresh();
}
}
/**
* 删除全部
*
* @FIXME 删除全部要区分搜索和非搜索状态么
* @override
*/
TreeRichSelector.prototype.deleteAll = function () {
var items = util.deepClone(this.getSelectedItems());
this.set('datasource', null);
this.fire('delete', { items: items });
};
/**
* 加载动作
*
* @param {ui.TreeRichSelector} control 类实例
* @param {Object} item 保存在indexData中的item
*
* @ignore
*/
function actionForLoad(control, item) {
selectItem(control, item.id, true);
control.fire('load');
}
/**
* 获取指定状态的叶子节点，递归
*
* @param {ui.TreeRichSelector} treeForSelector 类实例
* @param {Array=} data 检测的数据源
* @param {boolean} isSelected 选择状态还是未选状态
* @ignore
*/
TreeRichSelector.prototype.getLeafItems = function (data, isSelected) {
var leafItems = [];
var me = this;
var indexData = this.indexData;
u.each(data, function (item) {
if (isLeaf(item)) {
var indexItem = indexData[item.id];
var valid = (isSelected === indexItem.isSelected);
if (me.mode === 'delete' || valid) {
leafItems.push(item);
}
}
else {
leafItems = u.union(
leafItems,
me.getLeafItems(item.children, isSelected)
);
}
});
return leafItems;
};
/**
* 或许当前已选择的数据
*
* @return {Object}
* @public
*/
TreeRichSelector.prototype.getSelectedItems = function () {
var data = this.allData.children;
return this.getLeafItems(data, true);
};
/**
* 或许当前已选择的数据
*
* @return {Object}
* @public
*/
TreeRichSelector.prototype.getSelectedTree = function () {
var control = this;
var copyData = util.deepClone(this.allData);
var nodes = copyData.children;
u.each(nodes, function (node) {
var selectedChildren = getSelectedNodesUnder(node, control);
if (selectedChildren.length) {
node.children = selectedChildren;
}
else {
node.children = null;
}
});
var filteredNodes = u.filter(nodes, function (node) {
return node.children;
});
copyData.children = filteredNodes;
return copyData;
};
function getSelectedNodesUnder(parentNode, control) {
var children = parentNode.children;
var indexData = control.indexData;
return u.filter(children, function (node) {
var indexItem = indexData[node.id];
return indexItem.isSelected;
});
}
/**
* 清除搜索结果
* @param {ui.RichSelector2} richSelector 类实例
* @ignore
*/
TreeRichSelector.prototype.clearQuery = function () {
RichSelector.prototype.clearQuery.apply(this, arguments);
this.selectItems(this.selectedData, true);
return false;
};
/**
* 清空搜索的结果
*
*/
TreeRichSelector.prototype.clearData = function() {
// 清空数据
this.queriedData = {};
};
/**
* 搜索含有关键字的结果
*
* @param {ui.TreeRichSelector} treeForSelector 类实例
* @param {String} keyword 关键字
* @return {Array} 结果集
*/
TreeRichSelector.prototype.queryItem = function (keyword) {
var filteredTreeData = [];
filteredTreeData = queryFromNode(keyword, this.allData);
// 更新状态
this.queriedData = {
id: '-1', text: '符合条件的结果', children: filteredTreeData
};
this.addState('queried');
this.refreshContent();
this.selectItems(this.selectedData, true);
};
/**
* 供递归调用的搜索方法
*
* @param {String} keyword 关键字
* @param {Object} node 节点对象
* @return {Array} 结果集
*/
function queryFromNode(keyword, node) {
var filteredTreeData = [];
var treeData = node.children;
u.each(
treeData,
function (data, key) {
var filteredData;
// 命中，先保存副本
if (data.text.indexOf(keyword) !== -1) {
filteredData = u.clone(data);
}
// 如果子节点也有符合条件的，那么只把符合条件的子结点放进去
if (data.children && data.children.length) {
var filteredChildren = queryFromNode(keyword, data);
if (filteredChildren.length > 0) {
if (!filteredData) {
filteredData = u.clone(data);
}
filteredData.children = filteredChildren;
}
}
if (filteredData) {
filteredTreeData.push(filteredData);
}
}
);
return filteredTreeData;
}
/**
* 一个遍历树的方法
*
* @param {Array} children 需要遍历的树的孩子节点
* @param {Function} callback 遍历时执行的函数
* @ignore
*/
function walkTree(parent, children, callback) {
u.each(
children,
function (child, key) {
callback(parent, child);
walkTree(child, child.children, callback);
}
);
}
function isLeaf(node) {
return !node.children;
}
function getLeavesCount(node) {
// 是叶子节点，但不是root节点
if (isLeaf(node)) {
// FIXME: 这里感觉不应该hardcode，后期想想办法
if (!node.id || node.id === '-1' || node.id === '0' ) {
return 0;
}
return 1;
}
var count = u.reduce(
node.children,
function (sum, child) {
return sum + getLeavesCount(child);
},
0
);
return count;
}
/**
* 获取当前列表的结果个数
*
* @return {number}
* @public
*/
TreeRichSelector.prototype.getFilteredItemsCount = function () {
var node = this.isQuery() ? this.queriedData : this.allData;
var count = getLeavesCount(node);
return count;
};
/**
* 获取当前状态的显示个数
*
* @return {number}
* @override
*/
TreeRichSelector.prototype.getCurrentStateItemsCount = function () {
var node = this.isQuery() ? this.queriedData : this.allData;
if (!node) {
return 0;
}
var count = getLeavesCount(node);
return count;
};
require('esui').register(TreeRichSelector);
return TreeRichSelector;
}
define(function (require) {
var u = require('underscore');
var esui = require('esui');
var lib = require('esui/lib');
var Control = require('esui/Control');
var eoo = require('eoo');
var $ = require('jquery');
var painters = require('esui/painters');
var previewHelper = require('./helper/previewHelper');
/**
* 图片,视频和Flash预览控件
*
* 显示图片,视频和Flash资源,并提供配置
*
* @extends {Control}
* @param {Object} options 初始化参数
* @constructor
*/
var MediaPreview = eoo.create(
Control,
{
/**
* 控件类型,始终为`"MediaPreview"`
*
* @type {string}
* @readonly
* @override
*/
type: 'MediaPreview',
/**
* 初始化参数
*
* 对于图片资源,显示的宽度为容器宽度
* 而高度是默认高度,最大高度为容器高度
*
* @param {Object} [options] 构造函数传入的参数
* @protected
* @override
*/
initOptions: function (options) {
var properties = {
/**
* @property {number} [width=300]
*
* 默认宽度
*/
width: 300,
/**
* @property {number} [width=500]
*
* 默认高度
*/
height: 500,
/**
* @property {number} [width=0]
*
* 预览media要显示的宽度
*/
mediaWidth: 0,
/**
* @property {number} [width=0]
*
* 预览media要显示的高度
*/
mediaHeight: 0,
/**
* @property {String} [toolRole='']
*
* 用以标注添加工具icon的属性,要以','分隔,并由role生成相应的class
*/
toolRole: '',
/**
* @property {String} [sourceURL='']
*
* 资源路径
*/
sourceURL: '',
/**
* @property {String} [sourceType='']
*
* 资源的类别,共支持以下四种类型
* 1.image: 图片类型
* 2.flash: 带有'swf'后缀名的flash文件
* 3.flv: 带有'flv'后缀名的视频文件
* 4.video: 带有'mp4|mov|mkv|mpg|avi|rmvb|rm|ogg|wmv|mp3|wma|mid'后缀名的文件
*/
sourceType: '',
/**
* @property {String} [swfPath='']
*
* 要使用的视频播放器路径
*/
swfPath: ''
};
u.extend(properties, MediaPreview.defaultProperties, options);
this.setProperties(properties);
},
/**
* 初始化DOM结构
*
* @protected
* @override
*/
initStructure: function () {
var helper = this.helper;
var tpl = [
'<div id="${containerId}" class="${containerClass}">',
'<div id="${bodyId}" class="${bodyClass}"></div>',
'<div id="${toolId}" class="${toolClass}"></div>',
'</div>'
].join('');
var mainElement = this.main;
mainElement.innerHTML = lib.format(
tpl,
{
containerId: helper.getId('container'),
containerClass: helper.getPartClasses('container'),
bodyId: helper.getId('body'),
bodyClass: helper.getPartClasses('body'),
toolId: helper.getId('tool'),
toolClass: helper.getPartClasses('tool')
}
);
},
/**
* 重渲染
*
* @method
* @protected
* @override
*/
repaint: painters.createRepaint(
Control.prototype.repaint,
/**
* @property {String} sourceURL
* @property {String} sourceType
* @property {number} mediaWidth
* @property {number} mediaHeight
*
* 资源的路径以及type
*/
{
name: ['sourceURL', 'sourceType', 'mediaWidth', 'mediaHeight'],
paint: function (mediaPreview, sourceURL, sourceType) {
initBody.call(mediaPreview);
}
},
/**
* @property {String} toolRole
*
* 工具栏工具的自定义属性,以','分隔,用来标志工具icon
*/
{
name: ['toolRole'],
paint: function (mediaPreview, toolRole) {
initToolBar.call(mediaPreview);
}
},
/**
* @property {number} width
* @property {number} height
*
* 文本框的宽度及高度
*/
{
name: ['width', 'height'],
paint: function (mediaPreview, width, height) {
$(mediaPreview.main).width(width).height(height);
}
}
),
/**
* 初始化事件交互
*
* @protected
* @override
*/
initEvents: function () {
var me = this;
// 为所有的具有'data-role="tool"'属性的span节点添加点击事件
// 并在该控件上fire一个'iconclick'的事件,参数是点击的span的toolRole
this.helper.addDOMEvent(
this.helper.getPart('tool'),
'click',
'[data-role="tool"]',
function (event) {
var toolNode = event.target;
me.fire('iconclick', {roleName: $(toolNode).attr('data-tool-role')});
}
);
}
}
);
/**
* 默认属性值
*
* @type {Object}
* @public
*/
MediaPreview.defaultProperties = {
errorHTML: '无法预览该内容！'
};
/**
* 构造预览资源的html结构
*
* @ignore
*/
function initBody() {
var errorTpl = '<p class="${errorClass}">' + this.errorHTML + '</p>';
var width = u.min([this.mediaWidth || this.width, this.width]);
var height = u.min([this.mediaHeight || this.height, this.height]);
if (this.sourceType === 'image') {
width = '100%';
height = 'auto';
}
var html = previewHelper.preview({
width: width,
height: height,
url: this.sourceURL,
type: this.sourceType,
swfPath: this.swfPath
});
// 如果previewHelper中无法将其渲染出来,这里要显示一个错误的模版
if (!html) {
html = lib.format(
errorTpl,
{
errorClass: this.helper.getPartClasses('error')
}
);
}
// 获取body节点
var bodyElement = $(this.helper.getPart('body'));
bodyElement.html('');
if (typeof html === 'string') {
bodyElement.html(html);
}
else {
if (html.appendTo) {
html.appendTo(bodyElement[0]);
}
else {
bodyElement.append(html);
}
}
}
/**
* 构造工具栏的html结构
*
* @ignore
*/
function initToolBar() {
var toolRole = this.toolRole;
if (!toolRole) {
return;
}
var helper = this.helper;
var toolTpl = '<span data-role="tool" class="${iconClass}" data-tool-role="${iconRole}"></span>';
u.each(toolRole.split(','), function (role) {
$(helper.getPart('tool')).append(lib.format(
toolTpl,
{
iconClass: helper.getIconClass() + '-' + role,
iconRole: role
}
));
});
}
esui.register(MediaPreview);
return MediaPreview;
});
define(function (require) {
var esui = require('esui');
var lib = require('esui/lib');
var u = require('underscore');
var eoo = require('eoo');
var Control = require('esui/Control');
var painters = require('esui/painters');
var $ = require('jquery');
var previewHelper = require('./helper/previewHelper');
require('./helper/swfHelper');
require('esui/Dialog');
var LightBox = eoo.create(
Control,
{
/**
* 资源预览弹出框控件
*
* @extends Control
* @constructor
*/
constructor: function () {
this.$super(arguments);
this.dialog = null;
},
type: 'LightBox',
/**
* 初始化配置
*
* @protected
* @override
*/
initOptions: function (options) {
var properties = {
currentIndex: 0,
width: 'auto',
height: 'auto',
dialogVariants: 'lightbox',
loadingStyle: this.helper.getPartClassName('media-loading'),
loadFailedStyle: this.helper.getPartClassName('media-load-failed'),
group: null,
groupContainerId: null
};
u.extend(properties, LightBox.defaultProperties, options);
this.setProperties(properties);
},
/**
* 初始化DOM结构
*
* @protected
* @override
*/
initStructure: function () {
var properties = {
content: '',
closeButton: true,
mask: true,
alwaysTop: true,
closeOnHide: false,
width: 'auto'
};
u.extend(
properties,
{
title: this.title || '',
foot: this.foot || '',
draggable: this.draggable || false,
needfoot: this.needfoot || false,
variants: this.dialogVariants
}
);
var dialog = esui.create('Dialog', properties);
dialog.appendTo(document.body);
this.dialog = dialog;
},
/**
* 初始化事件交互
*
* @protected
* @override
*/
initEvents: function () {
this.initCarousel();
var leftLink = lib.g(this.dialog.helper.getId('link-left'));
var rightLink = lib.g(this.dialog.helper.getId('link-right'));
var me = this;
this.dialog.helper.addDOMEvent(
leftLink,
'click',
function (e) {
me.showPreviousMedia();
}
);
this.dialog.helper.addDOMEvent(
rightLink,
'click',
function (e) {
me.showNextMedia();
}
);
if (this.group) {
var container = this.groupContainerId ? lib.g(this.groupContainerId) : document.body;
me.helper.addDOMEvent(
container,
'click',
'[data-lightbox-group]',
function (e) {
var target = e.currentTarget;
e.preventDefault();
var $groupElements = $(container).find('[data-lightbox-group="' + me.group + '"]');
var i = $groupElements.index(target);
var datasource = [];
$groupElements.each(function (i, element) {
var $el = $(element);
var item = {
url: $el.attr('href')
};
var dataType = $el.attr('data-lightbox-type');
item.width = $el.attr('data-lightbox-width');
item.height = $el.attr('data-lightbox-height');
dataType && (item.type = dataType);
datasource.push(item);
});
me.datasource = datasource;
me.show({
currentIndex: i
});
}
);
}
},
/**
* 初始化图片/视频轮播
*
* @protected
*/
initCarousel: function () {
var tpl = [
'<div id="${mediaId}" class="${mediaStyle}"></div>',
'<div id="${linkId}" class="${linkStyle}">',
'<a href="javascript:;" id="${leftLinkId}" class="${leftLinkStyle}"></a>',
'<a href="javascript:;" id="${rightLinkId}" class="${rightLinkStyle}"></a>',
'</div>'
].join('');
var body = this.dialog.getBody();
var dialogHelper = this.dialog.helper;
var leftIcon = dialogHelper.getPartClassName('lightbox-content-link-left')
+ ' '
+ dialogHelper.getIconClass();
var rightIcon = dialogHelper.getPartClassName('lightbox-content-link-right')
+ ' '
+ dialogHelper.getIconClass();
body.setContent(
lib.format(
tpl,
{
mediaId: dialogHelper.getId('media'),
mediaStyle: dialogHelper.getPartClassName('lightbox-content-media'),
linkId: dialogHelper.getId('link'),
linkStyle: dialogHelper.getPartClassName('lightbox-content-link'),
leftLinkId: dialogHelper.getId('link-left'),
leftLinkStyle: leftIcon,
rightLinkId: dialogHelper.getId('link-right'),
rightLinkStyle: rightIcon
}
)
);
},
mediaContainer: function () {
return lib.g(this.dialog.helper.getId('media'));
},
/**
* 显示图片/视频对话框容器
*
* @param {Object} args 显示对话框时传入的参数
* @protected
*/
show: function (args) {
args && this.setProperties(args);
var link = lib.g(this.dialog.helper.getId('link'));
link.style.display = this.datasource.length <= 1 ? 'none' : '';
this.showMedia();
},
/**
* 隐藏图片/视频对话框容器
*
* @protected
*/
hide: function () {
this.dialog.hide();
},
/**
* 填充内容
*
* @param {Array} list 图片或视频数据列表
* @protected
*/
setContent: function (list) {
this.setProperties(
{
datasource: list
}
);
},
/**
* 显示图片/视频
*
* @protected
*/
showMedia: function () {
var data = this.datasource[this.currentIndex];
this.showLoading();
if (!data.type) {
if (/\.(?:jpg|png|gif|jpeg|bmp)$/i.test(data.url)) {
data.type = 'image';
}
else if (/\.swf/i.test(data.url)) {
data.type = 'flash';
}
else if (/\.(?:mp4|flv|mov|mkv|mpg|avi|rmvb|rm|ogg|wmv|mp3|wma|mid)/i.test(data.url)) {
data.type = 'video';
}
}
this.preview(data);
},
/**
* 显示加载状态
*
* @protected
*/
showLoading: function () {
$(this.dialog.main).addClass(this.helper.getPartClassName('loading'));
},
/**
* 取消加载状态
*
* @protected
*/
hideLoading: function () {
$(this.dialog.main).removeClass(this.helper.getPartClassName('loading'));
},
/**
* 预览图片/视频/flash
*
* @protected
* @param {Object} options 预览参数
*/
preview: function (options) {
if (options) {
var type = options.type;
options.id = options.id || 'preiew-' + Math.random();
options.width = options.width || this.width;
options.height = options.height || this.height;
type = type.charAt(0).toUpperCase() + type.slice(1).toLowerCase();
(this['preview' + type] || this.previewNotSupported).call(this, options);
}
},
/**
* 预览图片
*
* @param {Object} options 图片数据
* @protected
*/
previewImage: function (options) {
var me = this;
options.width += 'px';
options.height += 'px';
var img = previewHelper.preview(options);
img.onload = function () {
me.hideLoading();
me.mediaContainer().innerHTML = '';
me.mediaContainer().appendChild(img);
me.dialog.show();
img.onload = img.onerror = null;
};
img.onerror = function () {
me.hideLoading();
me.mediaContainer().innerHTML = lib.format(this.LOAD_FAILED_TPL, me);
img.onload = img.onerror = null;
me.dialog.show();
};
},
/**
* 预览Flash
*
* @param {Object} options flash数据
* @protected
*/
previewFlash: function (options) {
var html = previewHelper.preview(options);
this.hideLoading();
this.mediaContainer().innerHTML = '';
this.mediaContainer().appendChild(html);
this.dialog.show();
},
/**
* 预览视频
*
* @param {Object} options 视频数据
* @protected
*/
previewVideo: function (options) {
var url = options.url;
var html = '';
if (/\.flv/.test(url)) {
options.type = 'flv';
}
else if (/\.mp4|\.mov/.test(url)) {
options.type = 'video';
}
options.swfPath = this.swfPath;
html = previewHelper.preview(options);
var $container = $(this.mediaContainer());
this.hideLoading();
$container.html('');
$container.append($(html));
this.dialog.show();
},
previewNotSupported: function () {
this.hideLoading();
this.mediaContainer().innerHTML = this.NOT_SUPPORT_MESSAGE;
this.dialog.show();
},
/**
* 显示下一个图片/视频
*
* @protected
*/
showNextMedia: function () {
this.currentIndex = ++this.currentIndex % this.datasource.length;
this.showMedia();
},
/**
* 显示上一个图片/视频
*
* @protected
*/
showPreviousMedia: function () {
this.currentIndex = (--this.currentIndex + this.datasource.length) % this.datasource.length;
this.showMedia();
},
/**
* 重渲染
*
* @method
* @protected
* @override
*/
repaint: painters.createRepaint(
Control.prototype.repaint,
{
name: ['title'],
paint: function (control, title) {
control.dialog.setTitle(title || '');
}
}
)
}
);
LightBox.defaultProperties = {
NOT_SUPPORT_MESSAGE: '暂不支持该格式预览',
LOAD_FAILED_TPL: '<div class="${loadFailedStyle}">加载图片失败</div>'
};
esui.register(LightBox);
return LightBox;
});
function (require) {
require('esui/Panel');
require('esui/TextBox');
require('esui/Select');
var esui = require('esui');
var u = require('underscore');
var lib = require('esui/lib');
var InputControl = require('esui/InputControl');
var eoo = require('eoo');
var painters = require('esui/painters');
require('esui/behavior/mouseproxy');
var $ = require('jquery');
var Slider = eoo.create(
InputControl,
{
/**
* 控件的类型
*
* @override
* @type {String}
*/
type: 'Slider',
/**
* 参数的初始化
*
* @protected
* @override
* @param {Object} options [初始化的参数]
*/
initOptions: function (options) {
/**
* 默认的属性
*
* @type {Object}
* @type {string} defaults.orientation 滑块的形式 横着为'' 竖着为’vertical‘
* @type {number} defaults.start 起始值 默认是0
* @type {number} defaults.end 结束值 默认是10,
* @type {number} defaults.step 滑动杆值的步长默认是1
* @type {number | Arrary} defaults.value 滑动杆的值 默认为min或[min, max]
* @type {number} defaults.min 最小值 不能小于start, 无值时与start相同
* @type {number} defaults.max 最大值 不能大于end,无值时与end相同
* @type {boolean} defaults.isShowSelectedBG 滑杆已选择的部分是否加背景色显示 显示true 不显示false 默认true
* @type {boolean} defaults.range 滑动杆控件是否是选择区间 默认false 是true
*/
var defaults = {
orientation: '',
start: 0,
end: 10,
step: 1,
min: null,
max: null,
isShowSelectedBG: true,
range: false
};
var properties = {};
u.extend(properties, defaults, options);
// 处理min和max
properties.min = properties.min || properties.start;
properties.max = properties.max || properties.end;
// min和max只能在start和end的中间
properties.min = Math.max(properties.min, properties.start);
properties.max = Math.min(properties.max, properties.end);
// 水平、竖直滑动杆时的设置
if (properties.orientation === 'vertical') {
// 竖直滑动杆时参数的设置
properties.leftTop = 'top';
properties.rightBottom = 'bottom';
properties.widthHeight = 'height';
properties.pageXY = 'pageY';
}
else {
// 水平时参数的设置
properties.leftTop = 'left';
properties.rightBottom = 'right';
properties.widthHeight = 'width';
properties.pageXY = 'pageX';
}
// 适配value的数据
properties = adaptValue.call(this, properties);
this.$super([properties]);
},
/**
* 将字符串类型的值转换成原始格式，复杂类型的输入控件需要重写此接口
*
* @param {string} value 要转换的string
* @param {Object} properties 参数对象
* @return {Mixed}
* @protected
*/
parseValue: function (value, properties) {
if ((properties && properties.range) || this.range) {
if (typeof value === 'string') {
var arr = value.split(',');
return [+arr[0], +arr[1]];
}
}
return value;
},
/**
* 批量设置控件的属性值
*
* @param {Object} properties 属性值集合
* @override
*/
setProperties: function (properties) {
// 给控件设值的时候适配数据用
if (properties.hasOwnProperty('rawValue')) {
properties = adaptValue.call(this, properties);
}
this.$super([properties]);
},
/**
* 创建滑动杆体
* 有滑块的范围和滑块，
* 滑块的范围分为显示的范围、已选的范围
* 滑动杆可能有一个滑块或两个滑块，类型是区间时可能有两个滑块，最大值和最小值
* 任意一个是显示的起始值时显示一个滑块
* 放在原型里是为了可重写
*
* @protected
*/
createBody: function () {
var bodyElement = this.bodyElement = this.helper.createPart('body');
var cursorElement = this.cursorElement = this.helper.createPart('body-cursor');
bodyElement.appendChild(cursorElement);
// 区间时需要两个滑块
if (this.range) {
var cursorElementTwo
= this.cursorElementTwo
= this.helper.createPart('body-cursortwo');
$(this.cursorElementTwo).addClass(this.helper.getPartClassName('body-cursor'));
bodyElement.appendChild(cursorElementTwo);
}
// 已选择的范围加个背景色
if (this.isShowSelectedBG) {
// 已选择的区间元素
var bodySelectedElement
= this.bodySelectedElement
= this.helper.createPart('body-selected');
bodyElement.appendChild(bodySelectedElement);
}
this.main.appendChild(bodyElement);
// 初始化body内元素的宽度和位置
initBodyElements(this);
},
/**
* 初始化dom结构，仅在第一次渲染的时候使用
*
* @protected
* @override
*/
initStructure: function () {
// 竖直滑动杆时增加样式
if (this.orientation === 'vertical') {
$(this.main).addClass(this.helper.getPartClassName('vertical'));
}
/\d+/.test(this.size) && (this.main.style[this.widthHeight] = this.size + 'px');
this.createBody();
},
/**
* 初始化事件的交互
*
* @protected
* @override
*/
initEvents: function () {
// 绑定滑块的事件
bindCursorEvents.call(this);
},
/**
* 获取滑动杆的值
*
* @return {*} 滑动杆的值
*/
getValue: function () {
var value;
if (this.range) {
value = [this.minRangeValue, this.maxRangeValue];
}
else {
value = this.getRawValue();
}
return value;
},
/**
* 重新渲染
*
* @protected
* @override
* @type {Function} 重新渲染时要执行的函数
*/
repaint: painters.createRepaint(
InputControl.prototype.repaint,
{
name: 'rawValue',
paint: function (slider, value) {
setByValue(slider, value, true);
}
}
),
/**
* 销毁控件
*
* @protected
* @override
*/
dispose: function () {
this.bodyElement = null;
this.cursorElement = null;
this.bodySelectedElement = null;
this.activeCursorElement = null;
if (this.range) {
this.cursorElementTwo = null;
}
this.$super(arguments);
}
}
);
/**
* 适配控件的value
*
* @param {Object} properties 参数
* @return {Object} 适配后的参数
*/
function adaptValue(properties) {
var value = properties.value;
delete properties.value;
if (value != null && properties.rawValue == null) {
properties.rawValue = this.parseValue(value, properties);
}
properties.min = typeof properties.min !== 'undefined' ? properties.min : this.min;
properties.max = typeof properties.max !== 'undefined' ? properties.max : this.max;
if (properties.range || this.range) {
// 值类型是区间时
properties.rawValue = typeof properties.rawValue === 'undefined'
? [properties.min, properties.max] : properties.rawValue;
// 结果是区间时
properties.minRangeValue = properties.rawValue[0];
properties.maxRangeValue = properties.rawValue[1];
properties.minRangeValue = Math.max(properties.minRangeValue, properties.min);
properties.maxRangeValue = Math.min(properties.maxRangeValue, properties.max);
// value只能在[min, max]之间
properties.rawValue = [
properties.minRangeValue,
properties.maxRangeValue
];
}
else {
// 值类型是单个值时
properties.rawValue = typeof properties.rawValue === 'undefined'
? properties.min : properties.rawValue;
// value只能在min 和 max中间
properties.rawValue = Math.max(properties.rawValue, properties.min);
properties.rawValue = Math.min(properties.rawValue, properties.max);
}
return properties;
}
/**
* 绑定滑块拖拽的事件
*
* @private
*/
function bindCursorEvents() {
var body = this.helper.getPart('body');
// 给滑块绑定事件
if (body) {
$(body).mouseproxy(
{
start: u.bind(mousedownHandler, this),
drag: u.bind(mousemoveHandler, this),
stop: u.bind(mouseupHandler, this)
}
);
// 点在其他空白处，滑块也要移动到这里
this.helper.addDOMEvent(body, 'click', mousedownHandler);
}
}
/**
* 根据滑块left或top的值来计算value
*
* @param {number} cursorLeftTop 滑块位置left或top的值
* @return {number} 滑块的值
* @private
*/
function getValueByLeftTop(cursorLeftTop) {
var widthHeight = this.widthHeight;
// 滑块容器的宽度
var tmpWidthHeight = this[widthHeight];
// 选择的宽度
var selectedWidthHeight = cursorLeftTop;
var similarValue = (selectedWidthHeight / tmpWidthHeight) * (this.end - this.start);
// 根据步长算值
similarValue = similarValue - similarValue % this.step;
var value = this.start + Math.round(similarValue);
return value;
}
/**
* 根据值获取滑块的位置
*
* @param {number} value 滑块的值
* @return {number} 滑块的左侧位置
* @private
*/
function getLeftTopByValue(value) {
var widthHeight = this.widthHeight;
var bodyElement = this.bodyElement;
// 获取滑块容器的位置
var bodyPos = lib.getOffset(bodyElement);
var tmpwidthHeight = bodyPos[widthHeight];
var start = this.start;
var end = this.end;
var cursorLeftTop = (value - start) / (end - start) * tmpwidthHeight;
return cursorLeftTop;
}
/**
* 根据值去做相应的调整，包括head里显示、赋值和微调滑块的位置
* 为啥要微调位置，因为你不知道鼠标会停在哪，比如1，2之间跨度太大时 要落到值上
*
* @param {Slider} slider 滑动杆控件
* @param {number} value 滑动杆的值
*/
function setByValue(slider, value) {
var cursorElement = slider.cursorElement;
var cursorLeftTop;
var leftTop = slider.leftTop;
var widthHeight = slider.widthHeight;
if (slider.range) {
var cursorElementTwo = slider.cursorElementTwo;
var cursorLeftTopTwo = getLeftTopByValue.call(slider, value[1]);
cursorElementTwo.style[leftTop] = cursorLeftTopTwo + 'px';
cursorLeftTop = getLeftTopByValue.call(slider, value[0]);
// hack: 默认第一个滑块的z-index是2 第二个滑块的z-index的是3
// 因为区间的值可以是2,2这种，当两个滑块值是这种切最大值时，这时只能滑块1可拖动
// 这时要把它放在第二个滑块上面
if (value[0] === value[1] && value[0] === slider.max) {
cursorElement.style.zIndex = 3;
cursorElementTwo.style.zIndex = 2;
}
else {
cursorElement.style.zIndex = 2;
cursorElementTwo.style.zIndex = 3;
}
}
else {
cursorLeftTop = getLeftTopByValue.call(slider, value);
}
// 调整滑块的位置
cursorElement.style[leftTop] = cursorLeftTop + 'px';
// 已选择的部分加个背景色显示
if (slider.isShowSelectedBG) {
if (slider.range) {
slider.bodySelectedElement.style[leftTop] = cursorLeftTop + 'px';
slider.bodySelectedElement.style[widthHeight] = cursorLeftTopTwo - cursorLeftTop + 'px';
}
else {
slider.bodySelectedElement.style[widthHeight] = cursorLeftTop + 'px';
}
}
}
/**
* 鼠标移动的事件
*
* @param {Event} e 事件对象
* @param {boolean=} isMouseUp 是否是鼠标松开的触发 是为true 不是为false
* @param {Object} data 事件fire时的data
* @return {number} 返回value 让mouseup用
* @private
*/
function mousemoveHandler(e, isMouseUp, data) {
if (this.disabled === true) {
return false;
}
if (!u.isBoolean(isMouseUp)) {
data = isMouseUp;
isMouseUp = false;
}
var target = this.activeCursorElement;
var cursorElement = this.cursorElement;
var pageXY = this.pageXY;
var leftTop = this.leftTop;
var widthHeight = this.widthHeight;
// 拖动的滑块距left的值
var cursorLeftTop;
// 滑块区间的时候
if (this.range) {
// 拖动的是否是第一个滑块
var isFirst = false;
// 另外一个滑块的left
var otherLeftTop;
// 另一个滑块的值
var otherValue;
// 滑块是第一个时
if (target.id === cursorElement.id) {
otherLeftTop = getLeftTopByValue.call(this, this.maxRangeValue);
otherValue = this.maxRangeValue;
isFirst = true;
cursorLeftTop = Math.max(
this.minStartPos - this.startPos,
e[pageXY] - this.startPos
);
cursorLeftTop = Math.min(cursorLeftTop, otherLeftTop);
}
else {
// 滑块是第二个时
otherLeftTop = getLeftTopByValue.call(this, this.minRangeValue);
otherValue = this.minRangeValue;
cursorLeftTop = Math.max(otherLeftTop, e[pageXY] - this.startPos);
cursorLeftTop = Math.min(cursorLeftTop, this.maxEndPos - this.startPos);
}
}
else {
target = cursorElement;
cursorLeftTop = Math.max(
this.minStartPos - this.startPos,
e[pageXY] - this.startPos
);
cursorLeftTop = Math.min(
cursorLeftTop,
this.maxEndPos - this.startPos
);
}
// 根据left来计算值
var value;
var curValue = getValueByLeftTop.call(this, cursorLeftTop);
if (this.range) {
if (isFirst) {
value = [curValue, otherValue];
}
else {
value = [otherValue, curValue];
}
}
else {
value = curValue;
}
if (!isMouseUp) {
// 避免抖动，这里根据value值重新计算出leftTop
cursorLeftTop = getLeftTopByValue.call(this, curValue);
target.style[this.leftTop] = cursorLeftTop + 'px';
// 已选择的部分加个背景色显示
if (this.isShowSelectedBG) {
if (this.range) {
var tmpWidthHeight;
if (isFirst) {
this.bodySelectedElement.style[leftTop] = cursorLeftTop + 'px';
tmpWidthHeight = otherLeftTop - cursorLeftTop;
}
else {
this.bodySelectedElement.style[leftTop] = otherLeftTop + 'px';
tmpWidthHeight = cursorLeftTop - otherLeftTop;
}
this.bodySelectedElement.style[widthHeight] = tmpWidthHeight + 'px';
}
else {
this.bodySelectedElement.style[widthHeight]
= cursorLeftTop + 'px';
}
}
// 滑动的时候触发move事件
this.fire('move', value);
}
return value;
}
/**
* 鼠标的松开事件
*
* @param {Event} e 事件的对象
* @private
*/
function mouseupHandler(e) {
if (this.disabled === true) {
return false;
}
// 去掉active的样式
$(this.activeCursorElement).removeClass(
this.helper.getPartClassName('body-cursor-active')
);
// 放开和mousemove时做得事是一样的，再做一遍
var value = mousemoveHandler.call(this, e, true);
// 设置控件的值，因为是内部设值不涉及重绘，所以不调set*方法了
this.rawValue = value;
this.minRangeValue = value[0];
this.maxRangeValue = value[1];
setByValue(this, value, true);
// 放开鼠标的时候触发change事件
this.fire('change', value);
}
/**
* 初始化body内元素的坐标和宽度
*
* @param {Slider} slider 滑动杆控件
*/
function initBodyElements(slider) {
var bodyElement = slider.bodyElement;
// 获取滑块容器的位置
var bodyPos = lib.getOffset(bodyElement);
var leftTop = slider.leftTop;
var rightBottom = slider.rightBottom;
var widthHeight = slider.widthHeight;
// 获取滑块容器的宽度，用来计算值用
slider[widthHeight] = bodyPos[widthHeight];
// 滑块能去的最左边
if (typeof slider.min !== 'undefined') {
var minLeftTop = getLeftTopByValue.call(slider, slider.min);
// 滑块所能去的最左边
slider.minStartPos = bodyPos[leftTop] + minLeftTop;
// 滑竿范围的最左边
slider.startPos = bodyPos[leftTop];
}
// 滑块能去的最右侧
if (typeof slider.max !== 'undefined') {
var maxLeftTop = getLeftTopByValue.call(slider, slider.max);
slider.maxEndPos = bodyPos[leftTop] + maxLeftTop;
slider.endPos = bodyPos[rightBottom];
}
}
/**
* 根据鼠标位置，寻找离鼠标位置最近的handle
*
* @private
* @param {Event} e 事件对象
* @return {Element}
*/
function findNearestCursorElement(e) {
var pageXY = this.pageXY;
var leftTop = this.leftTop;
var bodyElement = this.helper.getPart('body');
var bodyPos = lib.getOffset(bodyElement);
var mouseLeftTop = e[pageXY] - bodyPos[leftTop];
// 有两个滑块
if (this.range) {
var firstLeftTop = getLeftTopByValue.call(this, this.minRangeValue);
var secondLeftTop = getLeftTopByValue.call(this, this.maxRangeValue);
var middleLeftTop = firstLeftTop + (secondLeftTop - firstLeftTop) / 2;
if (mouseLeftTop > middleLeftTop && this.cursorElementTwo) {
return this.cursorElementTwo;
}
}
return this.cursorElement;
}
/**
* 鼠标的按下事件
*
* @private
* @param {Event} e 事件对象
* @return {boolean}
*/
function mousedownHandler(e) {
if (this.disabled === true) {
return false;
}
var cursorElement = findNearestCursorElement.call(this, e);
// 存住活动的对象
this.activeCursorElement = cursorElement;
// 增加active的样式
$(cursorElement).addClass(this.helper.getPartClassName('body-cursor-active'));
// 点击的时候再初始化各种坐标 为了一些初始化时不在屏幕内的控件
initBodyElements(this);
// 滑块首先移动到鼠标点击位置
mousemoveHandler.call(this, e);
return true;
}
esui.register(Slider);
return Slider;
}
function (require) {
var esui = require('esui');
var $ = require('jquery');
var u = require('underscore');
var lib = require('esui/lib');
var InputControl = require('esui/InputControl');
var eoo = require('eoo');
var painters = require('esui/painters');
require('esui/TextBox');
/**
* TokenField
*
* @class
* @extends esui.InputControl
*/
var TokenField = eoo.create(
InputControl,
{
/**
* 控件类型，始终为`"TokenField"`
*
* @type {string}
* @readonly
* @override
*/
type: 'TokenField',
/**
* 初始化配置
*
* @protected
* @override
*/
initOptions: function (options) {
var properties = {
/**
* 控件宽度
*
* @type {number}
*/
width: 300,
/**
* 输入框最小宽度,剩余宽度不够就换行了
*
* @type {number}
*/
inputWidth: 90,
/**
* token最小字符串长度，低于该长度不创建, 默认不限制
*
* @type {number}
*/
minLength: 0,
/**
* token最大数量,默认不限制
*
* @type {number}
*/
limit: 0,
/**
* 是否允许重复
*
* @type {bool}
*/
allowRepeat: false,
/**
* 默认空数组
*/
rawValue: []
};
u.extend(properties, options);
properties.name = properties.name || this.main.getAttribute('name');
this.setProperties(properties);
},
/**
* 初始化DOM结构
*
* @protected
* @override
*/
initStructure: function () {
// 如果用的是一个`<input>`，替换成`<div>`
if (this.main.nodeName.toLowerCase() === 'input') {
this.helper.replaceMain();
this.main.id = this.helper.getId();
}
var html = [
'<input type="text" autocomplete="off"',
' class="${inputClasses}"',
' data-ui-type="TextBox"',
' data-ui-width="${width}"',
' data-ui-id="${inputId}">'
].join('');
this.main.innerHTML = lib.format(
html,
{
inputId: this.helper.getId('input'),
inputClasses: this.helper.getPartClasses('input'),
width: this.inputWidth
}
);
// 创建控件树
this.initChildren();
},
/**
* 初始化事件交互
*
* @protected
* @override
*/
initEvents: function () {
var controlHelper = this.helper;
controlHelper.addDOMEvent(this.main, 'click', this.focusInput);
var itemClass = this.helper.getPartClassName('item');
controlHelper.addDOMEvent(this.main, 'click', '.' + itemClass, this.remove);
var input = this.getInput();
input.on('focus', this.focus, this);
input.on('blur', this.blur, this);
input.on('enter', this.enter, this);
var inputElem = input.getFocusTarget();
controlHelper.addDOMEvent(inputElem, 'keydown', this.keydown);
controlHelper.addDOMEvent(inputElem, 'keyup', this.keyup);
},
/**
* 获取真实输入框控件
*
* @return {esui.TextBox}
*/
getInput: function () {
var inputId = this.helper.getId('input');
return this.viewContext.get(inputId);
},
/**
* 输入框focus
*
* @param {Event} e 事件对象
*/
focusInput: function (e) {
var input = this.getInput();
input.getFocusTarget().focus();
},
/**
* 响应focus, 输入框获取焦点时，控件整体相应的focus
*
* @param {Event} e 事件对象
*/
focus: function (e) {
this.focused = true;
this.helper.addStateClasses('focus');
},
/**
* 响应blur
*
* @param {Event} e 事件对象
*/
blur: function (e) {
this.focused = false;
this.helper.removeStateClasses('focus');
},
/**
* 响应keydown,keydown较keyup早触发，keydown时可记录输入框变化前的值
*
* @param {Event} e 事件对象
*/
keydown: function (e) {
var input = this.getInput();
switch (e.keyCode) {
// backspace
case 8:
if (input.getFocusTarget() === document.activeElement) {
// keydown触发早于keyup，keydown时记下当前输入框的字符
// 用于keyup时判断是否应删除token
this.lastInputValue = input.getRawValue();
}
break;
default:
break;
}
},
/**
* 响应keyup
*
* @param {Event} e 事件对象
*/
keyup: function (e) {
if (!this.focused) {
return;
}
var input = this.getInput();
var inputValue = input.getRawValue();
switch (e.keyCode) {
// backspace
case 8:
// delete
case 46:
if (input.getFocusTarget() === document.activeElement) {
if (inputValue.length || this.lastInputValue) {
break;
}
this.remove();
}
break;
}
},
/**
* 用户按下回车或者预设置的triggerKey，则触发token创建
*
* @param {Event} e 事件对象
*/
enter: function (e) {
var input = e.target;
var inputValue = input.getRawValue();
if (input.getFocusTarget() === document.activeElement && inputValue.length) {
createTokensFromInput.call(this);
}
},
/**
* 删除token，有两种情况：
* 1. 用户点击删除按钮
* 2. 用户在真实输入框按下backspace / delete键，且输入框中无字符
*
* @param {Event=} e 事件对象
*/
remove: function (e) {
var deleteIndex = -1;
var rawValue = this.rawValue.slice(0);
var target = e && e.currentTarget;
if (!target) {
// 通过回车删除, 则删除最后一个
deleteIndex = rawValue.length - 1;
}
else {
// 找到用户点击了哪个item上的删除按钮
var itemClass = this.helper.getPartClassName('item');
deleteIndex = $(this.main).find('.' + itemClass).index(target);
}
if (deleteIndex >= 0) {
var removedValue = rawValue.splice(deleteIndex, 1);
this.fire('removetoken', {token: removedValue[0]});
this.setProperties({rawValue: rawValue});
}
},
/**
* 将字符串类型的值转换成数组格式
*
* @param {string} value 字符串值
* @return {Array}
* @protected
*/
parseValue: function (value) {
if (u.isString(value)) {
return value.split(',');
}
return value || [];
},
/**
* 将值从原始格式转换成字符串
*
* @param {Array} rawValue 原始值
* @return {string}
* @protected
*/
stringifyValue: function (rawValue) {
if (u.isArray(rawValue)) {
return rawValue.join(',');
}
return '';
},
/**
* 重绘
*
* @protected
* @override
*/
repaint: painters.createRepaint(
InputControl.prototype.repaint,
painters.style('width'),
{
name: ['disabled', 'readOnly'],
paint: function (textbox, disabled, readOnly) {
var input = textbox.getInput();
input.setProperties(
{
disabled: disabled,
readOnly: readOnly
}
);
}
},
{
name: ['rawValue'],
paint: function (textbox, rawValue) {
renderTokens.call(textbox, rawValue);
}
}
),
/**
* 清空所有token
*/
clearAllTokens: function () {
var itemClass = this.helper.getPartClassName('item');
$(this.main).find('.' + itemClass).remove();
},
/**
* 销毁
*
* @protected
* @override
*/
dispose: function () {
var controlHelper = this.helper;
controlHelper.removeDOMEvent(this.main, 'click', this.focusInput);
var itemClass = this.helper.getPartClassName('item');
controlHelper.removeDOMEvent(this.main, 'click', '.' + itemClass, this.remove);
var input = this.getInput();
input.un('focus', this.focus, this);
input.un('blur', this.blur, this);
input.un('enter', this.enter, this);
var inputElem = input.getFocusTarget();
controlHelper.removeDOMEvent(inputElem, 'keydown', this.keydown);
controlHelper.removeDOMEvent(inputElem, 'keyup', this.keyup);
this.$super(arguments);
}
}
);
/**
* 检测token是否合法
*
* @param {Object} token 要检测的token
* @return {boolean} 是否合法
*/
function isTokenValid(token) {
// token长度要大于最小长度限制
if (!token || token.length <= this.minLength) {
return false;
}
return true;
}
/**
* 查找重复token
*
* @param {Object} token 要检测的token
* @return {Object|null} 如果找到重复token，则返回，否则返回null
*/
function findRepeatToken(token) {
if (!this.allowRepeat) {
var repeatIndex = u.indexOf(this.rawValue, token);
if (repeatIndex > -1) {
var itemClass = this.helper.getPartClassName('item');
return {
index: repeatIndex,
element: $(this.main).find('.' + itemClass).get(repeatIndex),
token: this.rawValue[repeatIndex]
};
}
}
return null;
}
/**
* 闪动指定元素
*
* @param {Object} repeatToken 重复的token对象
*/
function flashToken(repeatToken) {
this.helper.addPartClasses('flash', repeatToken.element);
var me = this;
setTimeout(
function () {
me.helper.removePartClasses('flash', repeatToken.element);
},
300
);
}
/**
* 创建token，添加到dom中
*
* @param {string|Object} token 要创建的token定义
*/
function renderToken(token) {
token = lib.trim(token);
var event = this.fire('beforecreate', {token: token});
if (event.preventDefault()) {
return;
}
var $tokenElem = $('<div></div>');
$tokenElem.addClass(this.helper.getPartClassName('item'));
$tokenElem.html(
this.helper.getPartHTML('label', 'span')
+ this.helper.getPartHTML('close', 'span')
);
// token标签值
var $tokenLabel = $tokenElem.children(':first-child');
$tokenLabel.html(token);
// 关闭按钮
var $closeButton = $tokenElem.children(':last-child');
$closeButton.addClass(this.helper.getIconClass());
var input = this.getInput();
var inputElem = input.main;
$tokenElem.insertBefore(inputElem);
this.fire('aftercreate', {token: token});
}
/**
* 对tokens进行预处理
*
* @param {Array=} rawValue 要设置的token数组
*/
function renderTokens(rawValue) {
if (u.isArray(this.rawValue)) {
// 因为renderTokens是对rawValue进行全量渲染，所以这里要全部清空
this.clearAllTokens();
// 合法性校验
this.rawValue = u.filter(this.rawValue, isTokenValid, this);
// token数量要小于最大限制
this.rawValue = u.filter(
this.rawValue,
function (item, index) {
return index < this.limit
},
this
);
// 重复检测，分为两个场景
// 1. 根据初始rawValue值生成tokens，仅去重；
// 2. 在用户输入值时，如果与已存在列表重复，需提示用户，
// 派发事件等，则在用户输入时进行处理;
// 因此，这里仅对this.rawValue进行重复过滤
if (!this.allowRepeat) {
this.rawValue = u.uniq(this.rawValue);
}
// 根据rawValue值进行全量更新
u.each(this.rawValue, renderToken, this);
}
}
/**
* 根据input输入创建tokens列表
*/
function createTokensFromInput() {
var beforeValue = this.getValue();
var input = this.getInput();
var inputValue = input.getRawValue();
// 检测重复元素
var repeatToken = findRepeatToken.call(this, inputValue);
if (repeatToken) {
flashToken.call(this, repeatToken);
return;
}
// 这里要保证setProperties时rawValue前后值不同，这里复制一份
if (!this.rawValue) {
// 第一次没有设置的时候设置一个空值进来
this.rawValue = [];
}
var rawValue = this.rawValue.slice(0);
rawValue.push(inputValue);
this.setProperties({rawValue: rawValue});
if (beforeValue === this.getValue() && inputValue.length) {
return;
}
// token创建成功，清空输入框
input.setRawValue('');
}
esui.register(TokenField);
return TokenField;
}
function (require) {
var Control = require('esui/Control');
var lib = require('esui/lib');
var ui = require('esui');
require('esui/Panel');
/**
* 折叠控件
*/
function TogglePanel() {
Control.apply(this, arguments);
}
TogglePanel.prototype.type = 'TogglePanel';
/**
* 初始化参数
*
* @param {Object} options 构造函数传入的参数
* @override
* @protected
*/
TogglePanel.prototype.initOptions = function (options) {
var defaults = {
expanded: false
};
var properties = lib.extend(defaults, options);
this.setProperties(properties);
};
/**
* 初始化DOM结构
*
* @override
* @protected
*/
TogglePanel.prototype.initStructure = function () {
var children = lib.getChildren(this.main);
var titleElem = children[0];
var contentElem = children[1];
var titlePanel = ui.create('Panel', { main: titleElem });
this.helper.addPartClasses('title', titlePanel.main);
this.addChild(titlePanel, 'title');
titlePanel.render();
this.set('title', titleElem && titleElem.innerHTML);
titlePanel.helper.addDOMEvent(titlePanel.main, 'click', lib.bind(onToggle, this));
var contentPanel = ui.create('Panel', { main: contentElem });
this.helper.addPartClasses('content', contentPanel.main);
this.addChild(contentPanel, 'content');
this.set('content', contentElem && contentElem.innerHTML);
};
function onToggle() {
this.toggleState('expanded');
this.fire('change');
}
var painters = require('esui/painters');
/**
* 重绘
*
* @override
* @protected
*/
TogglePanel.prototype.repaint = painters.createRepaint(
Control.prototype.repaint,
painters.state('expanded'),
{
name: 'title',
paint: function (panel, title) {
panel.getChild('title').set('content', title);
}
},
{
name: 'content',
paint: function (panel, content) {
panel.getChild('content').set('content', content);
}
}
);
TogglePanel.prototype.isExpanded = function () {
return this.hasState('expanded');
};
lib.inherits(TogglePanel, Control);
ui.register(TogglePanel);
return TogglePanel;
}
function (require) {
var lib = require('esui/lib');
var InputControl = require('esui/InputControl');
var u = require('underscore');
var eoo = require('eoo');
var esui = require('esui');
var painters = require('esui/painters');
var $ = require('jquery');
/**
* 简单版拾色器
*
* @class SimpleColorPicker
* @extends esui.InputControl
*/
var SimpleColorPicker = eoo.create(
InputControl,
{
/**
* 控件类型
*
* @override
*/
type: 'SimpleColorPicker',
/**
* 初始化参数
*
* @override
* @protected
*/
initOptions: function (options) {
var properties = {};
u.extend(properties, SimpleColorPicker.defaultProperties, options);
this.setProperties(properties);
},
/**
* @override
*/
initStructure: function () {
this.main.innerHTML = createColorBlocks(this);
},
/**
* @override
*/
initEvents: function () {
this.$super(arguments);
this.helper.addDOMEvent(this.main, 'click', chooseColor);
},
/**
* 渲染自身
*
* @override
* @protected
*/
repaint: painters.createRepaint(
InputControl.prototype.repaint,
{
name: 'rawValue',
paint: function (colorPicker, rawValue) {
syncValue(colorPicker);
}
}
),
/**
* 批量更新属性并重绘
*
* @fires SimpleColorPicker#change
* @override
* @public
*/
setProperties: function (properties) {
var changes = this.$super(arguments);
if (changes.hasOwnProperty('rawValue')) {
this.fire('change');
}
return changes;
}
}
);
/**
* 默认属性
*
* @static
* @type {Object}
* @public
*/
SimpleColorPicker.defaultProperties = {
colors: [
// row1
{text: '#ffffff', value: 'ffffff'},
{text: '#ededed', value: 'ededed'},
{text: '#d2d2d2', value: 'd2d2d2'},
{text: '#bfbfbf', value: 'bfbfbf'},
{text: '#a0a0a0', value: 'a0a0a0'},
{text: '#898989', value: '898989'},
{text: '#6f6f6f', value: '6f6f6f'},
{text: '#626262', value: '626262'},
{text: '#434343', value: '434343'},
{text: '#333333', value: '333333'},
{text: '#1b1b1b', value: '1b1b1b'},
{text: '#000000', value: '000000'},
// row2
{text: '#50a7f9', value: '50a7f9'},
{text: '#6ebf40', value: '6ebf40'},
{text: '#fff45c', value: 'fff45c'},
{text: '#f39017', value: 'f39017'},
{text: '#ec5d57', value: 'ec5d57'},
{text: '#b36ae2', value: 'b36ae2'},
{text: '#0065c0', value: '0065c0'},
{text: '#92d500', value: '92d500'},
{text: '#f5d327', value: 'f5d327'},
{text: '#c82503', value: 'c82503'},
{text: '#f39017', value: 'f39017'},
{text: '#ec5d57', value: 'ec5d57'},
// row3
{text: '#86ccc8', value: '86ccc8'},
{text: '#acd599', value: 'acd599'},
{text: '#7fcdf4', value: '7fcdf4'},
{text: '#8c97cb', value: '8c97cb'},
{text: '#aa8abd', value: 'aa8abd'},
{text: '#f19fc2', value: 'f19fc2'},
{text: '#f26071', value: 'f26071'},
{text: '#e60013', value: 'e60013'},
{text: '#eb6102', value: 'eb6102'},
{text: '#f8b551', value: 'f8b551'},
{text: '#7fc169', value: '7fc169'},
{text: '#009d97', value: '009d97'},
// row4
{text: '#0068b7', value: '0068b7'},
{text: '#1e2087', value: '1e2087'},
{text: '#611986', value: '611986'},
{text: '#920783', value: '920783'},
{text: '#e5007f', value: 'e5007f'},
{text: '#a40000', value: 'a40000'},
{text: '#a84300', value: 'a84300'},
{text: '#cea973', value: 'cea973'},
{text: '#996b34', value: '996b34'},
{text: '#81511c', value: '81511c'},
{text: '#372f2c', value: '372f2c'},
{text: '#a6927d', value: 'a6927d'}
],
mode: 'block'
};
function syncValue(colorPicker) {
var blocks = colorPicker.main.getElementsByTagName('span');
var blockClass = colorPicker.helper.getPartClassName('block');
u.each(
blocks,
function (block) {
var $block = $(block);
if ($block.hasClass(blockClass)) {
var color = $block.attr('data-value');
if (color === this.rawValue) {
this.helper.addPartClasses('selected', block);
}
else {
this.helper.removePartClasses('selected', block);
}
}
},
colorPicker
);
}
/**
* 创建候选颜色块
*
* @param {SimpleColorPicker} colorPicker 控件实例
* @return {string} html
*/
function createColorBlocks(colorPicker) {
var blockTemplate = ''
+ '<span class="' + colorPicker.helper.getPartClassName('block') + '" '
+ 'title="${text}" '
+ 'data-value="${value}" '
+ 'style="background-color: ${diplayValue}">'
+ '${text}'
+ '</span>';
var html = '<div>';
u.each(
colorPicker.colors,
function (color, index) {
color.diplayValue = color.value;
if (color.value.indexOf('#') < 0) {
color.diplayValue = '#' + color.value;
}
html += lib.format(blockTemplate, color);
}
);
html += '</div>';
return html;
}
/**
* 选择颜色
*
* @param {Event} e DOM事件对象
*/
function chooseColor(e) {
var blockClass = this.helper.getPartClassName('block');
var $t = $(e.target);
if ($t.hasClass(blockClass)) {
var color = $t.attr('data-value');
this.setRawValue(color);
}
}
esui.register(SimpleColorPicker);
return SimpleColorPicker;
}
function (require) {
var u = require('underscore');
var lib = require('esui/lib');
var InputControl = require('esui/InputControl');
var Layer = require('esui/Layer');
var eoo = require('eoo');
var painters = require('esui/painters');
var $ = require('jquery');
var esui = require('esui');
/**
* 'MultiSelect'控件使用的层类
* @extends Layer
* @ignore
* @constructor
*/
var MultiSelectLayer = eoo.create(Layer, {
create: function () {
var ele = this.$super(arguments);
$(ele).addClass(this.control.helper.getPrefixClass('dropdown'));
$(this.control.main).after(ele);
return ele;
},
layerFootTpl: [
'<button type="button" class="${confirmClass}" data-ui="type:Button;variants:primary"'
+ 'data-ui-child-name="confirm">${okText}</button>',
'<button type="button" class="${cancelClass}" data-ui="type:Button;variants:link"'
+ 'data-ui-child-name="cancel">${cancelText}</button>'
].join(''),
render: function (element) {
var multiSelector = this.control;
var helper = multiSelector.helper;
// 渲染layer主体部分
var html = helper.getPartBeginTag('wrapper', 'div');
for (var i = 0; i < this.control.datasource.length; i++) {
html += multiSelector.getItemHTML(i);
}
html += helper.getPartEndTag('wrapper', 'div');
// 渲染layer底部确认和取消按钮
if (multiSelector.footer) {
html += this.getLayerFoot();
}
element.innerHTML = html;
helper.initChildren(element);
},
getLayerFoot: function () {
var multiSelect = this.control;
var helper = multiSelect.helper;
var footBegin = helper.getPartBeginTag('layer-footer', 'div');
var footEnd = helper.getPartEndTag('layer-footer', 'div');
var data = {
confirmClass: helper.getPrimaryClassName('layer-confirm'),
cancelClass: helper.getPrimaryClassName('layer-cancel'),
okText: multiSelect.okText,
cancelText: multiSelect.cancelText
};
var footBody = lib.format(this.layerFootTpl, data);
return footBegin + footBody + footEnd;
},
initBehavior: function (element) {
var multiSelect = this.control;
// item点击事件
$(element).on('click', 'input', u.bind(itemClickHandler, multiSelect));
// 确定、取消事件绑定
if (multiSelect.footer) {
var layerConfirm = multiSelect.getChild('confirm');
var layerCancel = multiSelect.getChild('cancel');
layerConfirm.on('click', u.bind(confirmHandler, multiSelect));
layerCancel.on('click', u.bind(cancelHandler, multiSelect));
}
},
syncState: function (element) {
var helper = this.control.helper;
// 根据selectedIndex的值更新视图
var selectClass = helper.getPrimaryClassName('item-checked');
var selectedIndex = lib.toDictionary(this.control.selectedIndex);
for (var i = 0; i < this.control.datasource.length; i++) {
var checkInput = $(element).find('input[data-index=' + i + ']');
var checkItem = $(checkInput).parent();
if (selectedIndex[i]) {
checkInput.prop('checked', true);
$(checkItem).addClass(selectClass);
}
else {
checkInput.prop('checked', false);
$(checkItem).removeClass(selectClass);
}
}
},
dock: {
strictWidth: true
},
hide: function () {
var multiSelect = this.control;
// 没有确定按钮时，弹层隐藏即为确定
if (multiSelect.footer) {
this.syncState(this.getElement(false));
}
else {
multiSelect.set('selectedIndex', [].concat(multiSelect.newSelectedIndex));
}
this.$super(arguments);
}
});
/**
* 下拉多选控件
* @extends InputControl
* @constructor
*/
var MultiSelect = eoo.create(InputControl, {
constructor: function () {
this.$super(arguments);
this.layer = new MultiSelectLayer(this);
},
/**
* 控件类型，始终为'MultiSelect'
* @type {string}
* @readonly
* @override
*/
type: 'MultiSelect',
initOptions: function (options) {
var properties = {
multi: false,
title: '',
width: 200,
datasource: [],
selectedIndex: [],
footer: false,
maxLength: null,
displayText: null
};
u.extend(properties, MultiSelect.defaultProperties, options);
// 如果主元素是个'<select>'元素，则需要从元素中抽取数据源，
// 这种情况下构造函数中传入的'datasource'无效
if (this.main.nodeName.toLowerCase() === 'select') {
if ($(this.main).attr('multiple') === 'multiple') {
properties.multi = true;
}
properties.datasource = [];
var elements = this.main.getElementsByTagName('option');
for (var i = 0, length = elements.length; i < length; i++) {
var item = elements[i];
var dataItem = {
name: item.name || item.text,
value: item.value
};
if (item.disabled) {
dataItem.disabled = true;
}
properties.datasource.push(dataItem);
}
this.helper.extractOptionsFromInput(this.main, properties);
}
properties.newSelectedIndex = [].concat(properties.selectedIndex);
this.setProperties(properties);
},
/**
* 每个节点显示的内容的模板
* @type {string}
*/
itemTemplate: [
'<div title="${title}" class="${wrapperClass}">',
'<div class="${itemWrapperClass}">',
' <input type="${type}" name="${name}" id="${id}" data-index="${dataIndex}"'
+ 'title="${title}" value="${value}" ${checked} ${disabled} />',
' <label for="${id}">${title}</label>',
'</div>',
'</div>'
].join(''),
headItemTemplate: [
'<div title="${title}" class="${headerClass}">',
' <span">${title}</span>',
'</div>'
].join(''),
/**
* 获取每个节点显示的内容
*
* @param {number} index 当前节点的索引
* @return {string} 返回HTML片段
*/
getItemHTML: function (index) {
var item = this.datasource[index];
if (u.isFunction(this.getCustomItemHTML)) {
return this.getCustomItemHTML(item);
}
var helper = this.helper;
var classes = helper.getPartClasses('item');
// checked
var wrapperClass = '';
var itemWrapperClass = '';
if (this.multi) {
itemWrapperClass += [
helper.getPrefixClass('checkbox-custom'),
helper.getPrefixClass('checkbox-single')
].join(' ');
}
else {
itemWrapperClass += [
helper.getPrefixClass('radio-custom'),
helper.getPrefixClass('radio-single')
].join(' ');
}
var valueIndex = lib.toDictionary(this.selectedIndex);
if (valueIndex[index]) {
wrapperClass += ' ' + helper.getPartClassName('item-checked');
}
var headerClass = '';
if (item.header) {
headerClass += ' ' + helper.getPartClassName('item-header');
}
if (item.disabled) {
wrapperClass += ' ' + helper.getPartClassName('item-disabled');
}
var data = {
wrapperClass: classes.join(' ') + ' ' + wrapperClass,
id: helper.getId('multiselect-' + index),
type: this.multi ? 'checkbox' : 'radio',
name: this.name,
title: lib.trim(item.title || item.name || item.text),
value: item.value,
checked: valueIndex[index] ? ' checked="checked"' : '',
dataIndex: index,
headerClass: headerClass,
itemWrapperClass: itemWrapperClass,
disabled: item.disabled ? 'disabled' : ''
};
var tpl = item.header ? this.headItemTemplate : this.itemTemplate;
return lib.format(tpl, data);
},
/**
* 显示选中值的模板
*
* @type {string}
*/
displayTemplate: '${text}',
/**
* 获取选中值的内容
*
* @param {meta.SelectItem | null} item 选中节点的数据项，
* 如果{@link Select#emptyText}属性值不为空且未选中任何节点，则传递'null'
* @return {string} 显示的HTML片段
*/
getDisplayHTML: function (item) {
if (u.isFunction(this.getCustomDisplayHTML)) {
return this.getCustomDisplayHTML(item);
}
if (this.displayText) {
return this.displayText;
}
if (item.length === 0) {
return u.escape(this.emptyText);
}
var displayText = '';
$.each(item, function (index, selectItem) {
displayText += u.escape(selectItem.name || selectItem.text);
if (index !== item.length - 1) {
displayText += ',';
}
});
return lib.format(this.displayTemplate, {text: displayText});
},
/**
* 初始化DOM结构
*
* @protected
* @override
*/
initStructure: function () {
var helper = this.helper;
var arrow = 'arrow';
var span = 'span';
var mainElement = this.main;
// 如果主元素是'<select>'，删之替换成'<div>'
if (mainElement.nodeName.toLowerCase() === 'select') {
helper.replaceMain();
mainElement = this.main;
}
this.layer.autoCloseExcludeElements = [mainElement];
mainElement.innerHTML = helper.getPartHTML('text', span) + helper.getPartHTML(arrow, span);
$(helper.getPart(arrow)).addClass(helper.getIconClass());
},
/**
* 初始化事件交互
*
* @protected
* @override
*/
initEvents: function () {
this.helper.addDOMEvent(this.main, 'click', toggle);
this.layer.on('rendered', u.bind(addLayerClass, this));
},
/**
* 将字符串类型的值转换成原始格式
*
* @param {string} value 字符串值
* @return {string[]}
* @protected
* @override
*/
parseValue: function (value) {
/**
* @property {string} [value=""]
*
* `MultiSelect`的字符串形式的值为逗号分隔的多个值
*/
return value.split(',');
},
/**
* 获取值
*
* @return {Mixed}
* @override
*/
getRawValue: function () {
if (this.selectedIndex.length === 0) {
return null;
}
var values = [];
var datasource = this.datasource;
u.each(this.selectedIndex, function (index) {
var item = datasource[index];
if (item) {
values.push(item.value);
}
});
return values;
},
/**
* 重渲染
*
* @method
* @protected
* @override
*/
repaint: painters.createRepaint(
InputControl.prototype.repaint,
painters.style('width'),
{
name: 'datasource',
paint: function (select) {
select.layer.repaint();
}
},
{
name: ['selectedIndex'],
paint: function (select, selectedIndex) {
updateValue(select);
}
},
{
name: ['rawValue'],
paint: function (select, rawValue) {
if (u.isArray(rawValue) && rawValue.length) {
var selectedItems = u.filter(
select.datasource,
function (item) {
return u.indexOf(rawValue, item.value) > -1;
}
);
if (!select.multi) {
selectedItems = selectedItems.slice(-1);
}
select.selectedIndex = u.map(
selectedItems,
function (item) {
return u.indexOf(select.datasource, item);
}
);
updateValue(select);
}
}
},
{
name: ['disabled', 'hidden', 'readOnly'],
paint: function (select, disabled, hidden, readOnly) {
if (disabled || hidden || readOnly) {
select.layer.hide();
}
}
}
),
/**
* 更新{@link Select#datasource}属性，无论传递的值是否变化都会进行更新
*
* @param {meta.SelectItem[]} datasource 新的数据源对象
*/
updateDatasource: function (datasource) {
if (!datasource) {
datasource = this.datasource;
}
this.datasource = datasource;
var record = {name: 'datasource'};
this.repaint([record], {datasource: record});
},
/**
* 批量更新属性并重绘
*
* @param {Object} properties 需更新的属性
* @override
* @fires change
*/
setProperties: function (properties) {
if (properties.datasource == null) {
properties.datasource = this.datasource;
}
if (properties.value == null
&& properties.rawValue == null
&& properties.selectedIndex == null
&& properties.datasource === this.datasource
) {
properties.selectedIndex = this.selectedIndex;
}
var changes = this.$super(arguments);
return changes;
},
/**
* 销毁控件
*
* @override
*/
dispose: function () {
if (this.helper.isInStage('DISPOSED')) {
return;
}
if (this.layer) {
this.layer.dispose();
this.layer = null;
}
this.$super(arguments);
},
/**
* 获取当前选中的{@link meta.SelectItem}对象
*
* @return {meta.SelectItem}
*/
getSelectedItem: function () {
var datasource = this.datasource;
var selectedItems = [];
if (u.isArray(this.selectedIndex)) {
$.each(this.selectedIndex, function (index, itemIndex) {
if (datasource[itemIndex]) {
selectedItems.push(datasource[itemIndex]);
}
});
}
return selectedItems;
}
});
MultiSelect.defaultProperties = {
emptyText: '请选择',
okText: '确认',
cancelText: '取消'
};
/**
* 切换下拉框
*
* @param {Event} e click事件对象
*/
function toggle(e) {
this.layer.toggle.call(this.layer, e);
this.layer.syncState(this.layer.getElement(false));
this.newSelectedIndex = [].concat(this.selectedIndex);
}
function itemClickHandler(e) {
var target = e.target;
// 值是否发生更改的标志位
var isChanged = false;
if (!this.helper.isPart(target, 'item-disabled')) {
var index = target.getAttribute('data-index');
var newIndex = +index;
if (this.multi) {
var isNewIndex = true;
for (var i = 0; i < this.newSelectedIndex.length; i++) {
if (this.newSelectedIndex[i] === newIndex) {
isNewIndex = false;
isChanged = true;
this.newSelectedIndex.splice(i, 1);
}
}
if (isNewIndex) {
this.newSelectedIndex.push(+index);
isChanged = true;
}
}
else {
this.newSelectedIndex = [newIndex];
isChanged = true;
}
this.fire('itemclick');
}
if (this.maxLength && this.newSelectedIndex.length > this.maxLength) {
var shiftIndex = this.newSelectedIndex.shift();
$(this.layer.getElement(false)).find('input[data-index=' + shiftIndex + ']').removeAttr('checked');
isChanged = false;
}
if (isChanged && !this.footer) {
this.set('selectedIndex', [].concat(this.newSelectedIndex));
this.fire('change');
}
}
function confirmHandler(e) {
this.set('selectedIndex', [].concat(this.newSelectedIndex));
this.fire('change');
this.layer.hide();
}
function cancelHandler() {
this.set('selectedIndex', this.selectedIndex);
this.newSelectedIndex = [].concat(this.selectedIndex);
updateValue(this);
this.layer.hide();
}
function addLayerClass() {
this.fire('layerrendered', {layer: this.layer});
}
/**
* 根据控件的值更新其视图
*
* @param {Select} select 控件实例
* @ignore
*/
function updateValue(select) {
// 同步显示的文字
var textHolder = select.helper.getPart('text');
var selectedItem = select.getSelectedItem();
var text = select.getDisplayHTML(selectedItem);
textHolder.innerHTML = text;
textHolder.title = text;
var layerElement = select.layer.getElement(false);
if (layerElement) {
select.layer.syncState(layerElement);
}
}
esui.register(MultiSelect);
return MultiSelect;
}
function (require) {
var Control = require('esui/Control');
var lib = require('esui/lib');
var ui = require('esui');
require('esui/Panel');
require('esui/Overlay');
/**
* 折叠控件
*
* @class ui.TogglePanel
* @extends.esui.Control
*/
var exports = {};
/**
* 控件类型，始终为`"TogglePanel"`
*
* @type {string}
* @override
*/
exports.type = 'TogglePanel';
/**
* 初始化参数
*
* @param {Object} options 构造函数传入的参数
* @override
* @protected
*/
exports.initOptions = function (options) {
var defaults = {
expanded: false,
position: 'layer'
};
var properties = lib.extend(defaults, options);
this.setProperties(properties);
};
/**
* 初始化DOM结构
*
* @override
* @protected
*/
exports.initStructure = function () {
var children = lib.getChildren(this.main);
var titleElem = children[0];
var contentElem = children[1];
// 初始化Title部分的DOM结构
initTitle.call(this, titleElem);
// 初始化content部分的DOM结构
var position = this.position;
if (position === 'fixed') {
// 占位
initContentPanel.call(this, contentElem);
}
else {
// 不占位
initContentOverlay.call(this, contentElem);
}
};
/**
* 初始化Title部分的DOM结构
*
* @inner
* @param {Object} titleElem Title的DOM对象
*/
function initTitle(titleElem) {
var titlePanel = ui.create('Panel', {main: titleElem});
this.helper.addPartClasses('title', titlePanel.main);
this.addChild(titlePanel, 'title');
titlePanel.render();
this.set('title', titleElem && titleElem.innerHTML);
}
/**
* 按Panel模式初始化Content部分的DOM结构
*
* @inner
* @param {Object} contentElem content的DOM对象
*/
function initContentPanel(contentElem) {
var options = {
main: contentElem,
childName: 'content',
viewContext: this.viewContext,
renderOptions: this.renderOptions
};
var contentPanel = ui.create('Panel', options);
this.helper.addPartClasses('content', contentPanel.main);
this.addChild(contentPanel, 'content');
contentPanel.render();
}
/**
* 按Overlay模式初始化Content部分的DOM结构
*
* @inner
* @param {Object} contentElem content的DOM对象
*/
function initContentOverlay(contentElem) {
var overlayMain = this.helper.createPart('layer', 'div');
lib.addClass(overlayMain, this.helper.getPartClassName('layer'));
var options = {
main: contentElem,
childName: 'content',
attachedDOM: this.main,
attachedLayout: 'bottom,left',
autoClose: false,
viewContext: this.viewContext,
renderOptions: this.renderOptions
};
var contentLayer = ui.create('Overlay', options);
this.helper.addPartClasses('content', contentLayer.main);
this.addChild(contentLayer, 'content');
contentLayer.render();
var globalEvent = lib.bind(close, this);
contentLayer.on(
'show',
function () {
this.helper.addDOMEvent(document, 'mousedown', globalEvent);
}
);
contentLayer.on(
'hide',
function () {
this.helper.removeDOMEvent(document, 'mousedown', globalEvent);
}
);
}
/**
* 关闭layer层的事件处理句柄
*
* @param {mini-event.Event} e 事件对象
* @inner
*/
function close(e) {
var target = e.target;
var layer = this.getChild('content');
if (!layer) {
return;
}
var isChild = lib.dom.contains(layer.main, target);
if (!isChild) {
layer.hide();
// 如果是点击attachedTarget的话，需要保持expanded状态.
// 如果是点击其他空白区域的话，直接去掉expanded就行。
var attachedTarget = layer.attachedTarget;
var isAttachedTarget = lib.dom.contains(attachedTarget, target) || attachedTarget === target;
if (!isAttachedTarget) {
this.removeState('expanded');
this.removeState('active');
}
}
}
/**
* 点击Title区域的句柄
*
* @inner
*/
function onToggle() {
this.toggleContent();
}
/**
* 切换展开/收起状态
*
* @inner
*/
exports.toggleContent = function () {
this.toggleStates();
this.fire('change');
};
exports.toggleStates = function () {
var position = this.position;
if (position === 'fixed') {
// 占位模式
this.toggleState('expanded');
this.toggleState('active');
}
else {
// 浮层模式
var contentLayer = this.getChild('content');
if (this.isExpanded()) {
this.removeState('expanded');
this.removeState('active');
contentLayer.hide();
}
else {
this.addState('expanded');
this.addState('active');
contentLayer.show();
}
}
};
exports.initEvents = function () {
var me = this;
me.$super(arguments);
var titlePanel = me.getChild('title');
me.helper.addDOMEvent(titlePanel.main, 'click', lib.bind(onToggle, me));
};
var painters = require('esui/painters');
/**
* 重绘
*
* @override
* @protected
*/
exports.repaint = painters.createRepaint(
Control.prototype.repaint,
painters.state('expanded'),
{
name: 'title',
paint: function (panel, title) {
panel.getChild('title').set('content', title);
}
},
{
name: 'content',
paint: function (panel, content) {
panel.getChild('content').set('content', content);
}
},
/**
* @property {number} width
*
* 宽度
*/
painters.style('width')
);
exports.isExpanded = function () {
return this.hasState('expanded');
};
var TogglePanel = require('eoo').create(Control, exports);
ui.register(TogglePanel);
return TogglePanel;
}
function (require) {
require('esui/Button');
require('./FileInput');
require('./Progress');
var eoo = require('eoo');
var esui = require('esui');
var ui = require('esui/main');
var Control = require('esui/Control');
var painters = require('esui/painters');
var File = require('./File');
var $ = require('jquery');
var u = require('underscore');
var lib = require('esui/lib');
var supportXHR = (window.File && window.XMLHttpRequest);
var supportXHR2 = (supportXHR && new window.XMLHttpRequest().upload);
/**
* 控件类
*
* 上传控件有如下结构特点：
*
* - 上传组件 (必须，至少一个)
* -- 文件上传控件
* - 上传列表 (可选，可自定义容器)
* -- 由一个或多个进度条组件构成
*
* 上传控件有两种模式：
*
* - 单文件上传
* - 多文件上传
*
* @class ui.Uploader
* @extends esui.Control
*/
var Uploader = eoo.create(
Control,
{
/**
* 控件类型，始终为`"Uploader"`
*
* @type {string}
* @readonly
* @override
*/
type: 'Uploader',
/*
* 文件上传队列
*/
queue: {
// 队列长度
length: 0,
// 正在上传的文件
uploadingFiles: [],
// 等待开始的文件
waitingFiles: [],
// 出错的文件
failedFiles: [],
// 遗弃的文件
// 当文件过长时会遗弃多余的文件
abandonedFiles: [],
// 上传完成的文件
completeFiles: []
},
/**
* @override
*/
initOptions: function (options) {
var properties = {};
u.extend(properties, this.$self.defaultProperties, options);
var adaptProperties = ['sequentialUploads', 'showProgress', 'multiple'];
u.each(
adaptProperties,
function (propertyName) {
if (properties[propertyName] === 'false') {
properties[propertyName] = false;
}
}
);
this.$super([properties]);
},
/**
* @override
*/
initStructure: function () {
var tpl = [
'<div class="${uploadComboxClass}">',
// 上传input
' <div data-ui-child-name="fileInput"',
' data-ui="type:FileInput;accept:${accept};multiple:${multiple};name:${paramKey};"></div>',
// 伪装ge按钮
' <div data-ui-child-name="submitButton" ',
' data-ui="type:Button;">${text}</div>',
'</div>',
'<div id="${defaultProgressContainerId}"></div>'
].join('');
this.main.innerHTML = lib.format(
tpl,
{
uploadComboxClass: this.helper.getPartClassName('combox'),
accept: this.accept,
multiple: this.multiple,
text: this.text,
variants: this.buttonVariants || '',
paramKey: this.paramKey,
defaultProgressContainerId: this.helper.getId('default-progress-container')
}
);
// 创建控件树
this.helper.initChildren();
// 绑事件
var fileInput = this.getChild('fileInput');
fileInput.on('change', u.bind(inputChangeHandler, this));
var submitButton = this.getChild('submitButton');
submitButton.on(
'click',
function (e) {
fileInput.triggerUploadOutside();
e.preventDefault();
}
);
},
/**
* @override
*/
repaint: painters.createRepaint(
Control.prototype.repaint,
{
name: ['text'],
paint: function (uploader, text) {
var button = uploader.getChild('submitButton');
button.setContent(text);
}
},
{
name: ['disabled', 'readOnly'],
paint: function (uploader, disabled, readOnly) {
var input = uploader.getChild('fileInput');
var button = uploader.getChild('submitButton');
input.setProperties({disabled: disabled});
input.setProperties({readOnly: readOnly});
button.setProperties({disabled: disabled});
button.setProperties({readOnly: readOnly});
}
},
painters.style('width')
),
/**
* 接收文件并做上传前的校验
*
* @param {Array} files 接收到的文件，可以是input中取到的，也可以是drag外部传入的
* @public
*/
receiveFile: function (files) {
// 如果仍然在uploading，则不执行新的上传操作
if (this.stage === 'UPLOADING') {
return;
}
var event = this.fire('beforeupload', {files: files});
if (event.isDefaultPrevented()) {
return;
}
this.doUpload(files);
},
/**
* 开始上传
*
* @param {Array} files 接收到的文件
* @protected
*/
doUpload: function (files) {
// 超出最大限制，直接返回
if (files.length > this.maxFileNumber) {
this.notifyFail(this.message.ERROR_FILE_MAX_NUMBER);
return;
}
files = u.map(
files,
function (file, index) {
// 文件格式检查
if (!this.checkFileFormat(file)) {
file.status = 'client-error';
file.message = this.message.ERROR_FILE_EXTENSIONS;
}
else if (!this.checkFileSize(file)) {
file.status = 'client-error';
file.message = this.message.ERROR_FILE_MAX_SIEZ;
}
else {
file.status = 'waiting';
// 单文件上传要覆盖之前的文件
if (this.multiple === false) {
this.queue.waitingFiles = [file];
}
else {
this.queue.waitingFiles.push(file);
}
}
return file;
},
this
);
initFileList.call(this, files);
operationFileQueue.call(this);
},
/**
* 获取Uploader中的文件上传组件
*
* @return {DOMElement} 容器中FileInput组件
* @public
*/
getFileInput: function () {
return this.getChild('fileInput');
},
/**
* 验证文件格式
*
* @param {Object} file file对象
* @return {boolean}
* @protected
*/
checkFileFormat: function (file) {
if (this.accept) {
// 这里就是个内置的`Rule`，走的完全是标准的验证流程，
// 主要问题是上传控件不能通过`getValue()`获得验证用的内容，
// 因此把逻辑写在控件内部了
var extension = file.name.split('.');
extension = '.' + extension[extension.length - 1].toLowerCase();
var isValid = false;
if (typeof this.accept === 'string') {
this.accept = lib.splitTokenList(this.accept);
}
for (var i = 0; i < this.accept.length; i++) {
var acceptPattern = this.accept[i].toLowerCase();
if (acceptPattern === extension) {
isValid = true;
break;
}
// image/*之类的，表示一个大类
if (acceptPattern.slice(-1)[0] === '*') {
var mimeType = acceptPattern.split('/')[0];
var targetExtensions = this.mimeTypes[mimeType];
if (targetExtensions && targetExtensions.hasOwnProperty(extension)) {
isValid = true;
break;
}
}
}
return isValid;
}
return true;
},
/**
* 验证文件大小
*
* @param {Object} file file对象
* @return {boolean}
* @protected
*/
checkFileSize: function (file) {
// IE9中filechange返回的event只有fileName以及fileId
// 所以如果出现这种情况就放过去，让后端做长度校验
if (this.maxFileSize && file.originalSize) {
var isValid = false;
if (file.originalSize) {
isValid = parseInt(file.originalSize, 10) <= parseInt(this.maxFileSize, 10);
}
return isValid;
}
return true;
},
/**
* 解析返回中的错误 TODO 这个的具体解析格式要跟后端商定
*
* @param {Object} response 请求返回的对象
* @return {string}
* @protected
*/
parseError: function (response) {
if (response.success === 'false') {
return {message: response.error};
}
return null;
},
/**
* 通知上传失败
*
* @method ui.Uploader#notifyFail
* @param {string} message 失败消息
* @protected
*/
notifyFail: function (message) {
message = message || '上传失败';
this.fire('fail', {message: message});
},
/**
* 通知上传完成
*
* @protected
* @method ui.Uploader#notifyComplete
*/
notifyComplete: function () {
this.stage = 'COMPLETE';
this.fire('complete', {
completeFiles: this.queue.completeFiles,
failedFiles: this.queue.failedFiles
});
}
}
);
/**
* 默认属性
*
* @type {Object}
* @public
*/
Uploader.defaultProperties = {
// 上传按钮文本
text: '点击上传',
// 文件上传的路径
action: '/uploadFile',
// 后台接收时的key名
paramKey: 'files',
// 接收的文件类型
accept: '.gif,.jpg,.png,.swf,.xlsx',
// 默认为单文件上传控件
// 单文件上传控件一次只能选择一个文件
multiple: false,
// 单个文件最大大小，单位B，默认2M
maxFileSize: 2147483648,
// 单次最大上传文件数量
maxFileNumber: 6,
// 多文件上传时，请求同时开始还是逐个开始
sequentialUploads: true,
// 当前允许的最大连接数
// sequentialUploads为true时该选项无效
maxConnections: 6,
// 提示信息
// 目前支持提供成功提示，文件大小不符
// 文件类型不匹配,
message: {
// 上传成功
SUCCESS_INFO: '上传成功',
// 重新上传
RESTART_INFO: '正在重新上传',
// http错误，一般来说就是status返回不是200
ERROR_HTTP: '上传失败，网络连接错误或上传路径无效',
// 文件类型错误
ERROR_FILE_EXTENSIONS: '上传失败，安全因素不支持此类文件',
// 文件超出最大尺寸, 标准浏览器下可以判断
ERROR_FILE_MAX_SIEZ: '超出最大上传尺寸',
// 文件数量超过最大限制了
ERROR_FILE_MAX_NUMBER: '发生错误，上传文件超过限定。',
// 格式错误
ERROR_FILE_FORMAT: '文件格式错误'
},
// 是否显示进度
showProgress: true,
// 进度模式，seperate和total两种，seperate代表每个文件独立进度；total代表所有文件统一计算进度
progressMode: 'seperate',
singleProgressMode: 'detail',
// 文件列表的容器
// 如果没有会添加一个默认容器
progressContainer: null
};
/**
* 上传输入组件变化事件处理
*
* @param {mini-event.Event} e 事件对象
*/
function inputChangeHandler(e) {
var files = this.getFileInput().files;
this.receiveFile(files);
}
/**
* 创建上传进度队列
*
* @param {Array} fileList 在队列中的文件
*/
function initFileList(fileList) {
if (!this.showProgress) {
return;
}
var files = fileList ? fileList : this.queue.waitingFiles;
this.progressContainer = this.progressContainer || this.helper.getId('default-progress-container');
var container;
// 字符串处理
if (u.isString(this.progressContainer)) {
// 先作为DOM id寻找
container = $('#' + this.progressContainer);
// 如果没找到，找控件id
if (!container[0] && this.viewContext.get(this.progressContainer)) {
container = $(this.viewContext.get(this.progressContainer).main);
}
}
// 只能认为扔了个控件进来
else {
container = $(this.progressContainer.main);
}
if (!container[0]) {
return;
}
var me = this;
if (this.progressMode === 'seperate') {
u.each(files, function (file, index) {
// 创建主容器
var progressContainer = $('<div></div>');
container.append(progressContainer);
var options = {
file: file,
childName: 'progress-' + file.id,
main: progressContainer[0],
progressMode: me.singleProgressMode
};
// 如果不支持进度，那就强制不展示进度详情
if (!supportXHR) {
options.singleProgressMode = 'general';
}
// 如果定义了进度模板，使用定义的
if (me.progressItemTemplate) {
options.template = me.progressItemTemplate;
}
var progress = ui.create('Progress', options);
progress.render();
me.addChild(progress);
progress.on('restart', function (e) {
// 重新上传
var file = e.target.file;
e.target.dispose();
// 将文件移出上传队列，然后重新进行上传
removeFileFromUploading.call(me, file, 'restart');
me.receiveFile([file]);
});
progress.on('cancel', function (e) {
var file = e.target.file;
if (file.request) {
file.request.abort();
removeFileFromUploading.call(me, file, 'cancel');
if (me.sequentialUploads) {
operationFileQueue.call(me);
}
}
// 从等待队列中清除
else {
removeFileFromWaiting.call(me, file);
}
e.target.dispose();
});
});
}
// TODO 文件的总进度条，待实现
// else {
// }
}
/**
* 执行上传队列
*
*/
function operationFileQueue() {
// 当队列中
if (this.queue.waitingFiles && this.queue.waitingFiles.length) {
// 一个个上传
if (this.sequentialUploads && this.queue.uploadingFiles.length < 1) {
chooseProgressFile.call(this);
}
// 多文件上传，如果当前连接数未满就继续上传
else if ((this.maxConnections && this.queue.uploadingFiles.length < this.maxConnections)
|| !this.maxConnections) {
chooseProgressFile.call(this);
operationFileQueue.call(this);
}
}
else if (this.queue.uploadingFiles.length === 0) {
this.notifyComplete();
}
}
/**
* 选择一个文件上传
*/
function chooseProgressFile() {
this.stage = 'UPLOADING';
// 等待队列中弹出
var file = this.queue.waitingFiles.shift();
// 进入上传队列
this.queue.uploadingFiles.push(file);
// 执行上传
uploadFile.call(this, file);
}
/**
* 上传文件
*
* @param {ui.File} file 目标文件
*/
function uploadFile(file) {
// 文件对应的进度组件
var progress = this.getChild('progress-' + file.id);
var me = this;
// 创建请求
var request = getHttpRequest.call(this);
// Need to modified
file.request = request;
// 修改文件状态
file.status = File.UPLOADING;
// 创建一个符合后端接口的数据对象
file[this.paramKey] = file.fileData;
delete file.fileData;
request.send(
{
container: this.main
},
file
);
// 上传中
request.on(
'progress',
function (response) {
var loaded = response.loaded;
var total = response.total;
progress.setProperties({loaded: loaded, total: total});
}
);
// 上传完成
request.on(
'load',
function (event) {
var response = event.target.response;
// 解析一些校验错误
var error = me.parseError(response);
if (error) {
// 修改进度状态
progress.updateStatus('client-error', error.message);
me.removeFileFromUploading.call(me, file, 'error');
me.fire('error', {file: file});
addToErrorQueue.call(me, file);
event.preventDefault();
return;
}
file.status = File.DONE;
// 修改进度状态
progress.updateStatus('done', me.message.SUCCESS_INFO);
progress.fadeOut(
1000,
function () {
removeFileFromUploading.call(me, file, 'load');
if (me.sequentialUploads) {
operationFileQueue.call(me);
}
// 通知完成，供外部捕获，执行预览等操作
me.fire(
'onecomplete',
{
file: file,
data: response
}
);
}
);
}
);
// 上传出错
request.on(
'error',
function (event) {
// 修改进度状态
removeFileFromUploading.call(me, file, 'error');
progress.updateStatus('server-error', event.message || me.message.ERROR_HTTP);
me.fire('error', {file: file});
addToErrorQueue.call(me, file);
}
);
// 传输终止
request.on(
'abort',
function (event) {
removeFileFromUploading.call(me, file, 'abort');
me.fire('abort', {file: file});
}
);
}
/**
* 将文件移出等待队列
*
* @param {ui.File} file 目标文件
*/
function removeFileFromWaiting(file) {
var queue = this.queue.waitingQueue;
this.queue.waitingQueue = u.without(queue, file);
}
/**
* 需要添加的错误文件
*
* @param {ui.File} file 目标文件
*/
function addToErrorQueue(file) {
var sameFile = u.filter(this.queue.failedFiles, function (rawFile) {
return rawFile.id === file.id;
});
sameFile ? '' : this.queue.failedFiles.push(file);
}
/**
* 将文件移出上传队列并放入完成队列
*
* @param {ui.File} file 目标文件
* @param {string} operation 操作
*/
function removeFileFromUploading(file, operation) {
var queue = this.queue.uploadingFiles;
file = u.find(
queue,
function (rawFile) {
return rawFile.id === file.id;
}
);
this.queue.uploadingFiles = u.without(queue, file);
if ('load' === operation) {
var completeFiles = this.queue.completeFiles;
var sameFile = u.filter(completeFiles, function (rawFile) {
return rawFile.id === file.id;
});
sameFile ? '' : completeFiles.push(file);
}
operationFileQueue.call(this);
}
/**
* 获取合适的HttpRequest，用于文件上传
* 目前实现了Leve1 XHR、Level2 XHR以及iframe的封装
*
* @return {ui.HttpRequest}
*/
function getHttpRequest() {
var HTTPRequest;
if (supportXHR2) {
HTTPRequest = require('./L2XMLHttpRequest');
// HTTPRequest = require('./XMLHttpRequest');
}
else if (supportXHR) {
HTTPRequest = require('./XMLHttpRequest');
}
else {
HTTPRequest = require('./IframeHttpRequest');
}
var httpInstance = new HTTPRequest('POST', this.action);
// 修复Firefox上传文件的bug
// 上传时reponse会设置concent-type为application/octet-stream
// 但是request的accept没有这个取值
httpInstance.setRequestHeader([
{key: 'token', value: this.token},
{key: 'Accept', value: '*/*'}
]);
return httpInstance;
}
esui.register(Uploader);
return Uploader;
}
define(function (require) {
var lib = require('esui/lib');
var u = require('underscore');
var InputControl = require('esui/InputControl');
var eoo = require('eoo');
var esui = require('esui/main');
var painters = require('esui/painters');
var $ = require('jquery');
require('esui/Label');
/**
* FilterResult
*
* @extends Panel
* @constructor
*/
var FilterResult = eoo.create(
InputControl,
{
type: 'FilterResult',
/**
* 初始化配置
*
* @protected
* @override
*/
initOptions: function (options) {
var properties = {
datasource: []
};
u.extend(properties, options);
this.setProperties(properties);
},
/**
* 初始化DOM结构
*
* @protected
* @override
*/
initStructure: function () {
var controlHelper = this.helper;
var mainEle = this.main;
var html
= '<div id="${filterPanelId}" class="${filterPanelStyle}">'
+ '<label id="${labelId}"></label>'
+ '<div id="${contentPanelId}" class="${contentPanelStyle}"></div>'
+ '</div>';
mainEle.innerHTML = lib.format(
html,
{
filterPanelStyle: controlHelper.getPartClassName('panel'),
filterPanelId: controlHelper.getId('items-wrapper-panel'),
labelId: controlHelper.getId('items-label'),
contentPanelId: controlHelper.getId('items-panel'),
contentPanelStyle: controlHelper.getPartClassName('items-panel')
}
);
// 创建控件树
this.initChildren(mainEle);
},
/**
* 增加项
* @param {Object} item 选中项的数据 格式如: {value: '', text: ''}
* @public
*/
addItem: function (item) {
if (this.getItemByValue(item.value)) {
return;
}
this.datasource.push(item);
this.buildItems();
},
/**
* 获取提示已选项Panel
* @return {Panel} 提示已选项Panel
* @private
*/
getSelectedItemsPanel: function () {
var selectedPanelId = this.helper.getId('items-panel');
return this.viewContext.get(selectedPanelId);
},
/**
* 初始化事件交互
*
* @protected
* @override
*/
initEvents: function () {
var me = this;
this.helper.addDOMEvent(
me.main,
'click',
'a',
function (e) {
e.preventDefault();
var $target = $(e.currentTarget);
var value = $target.attr('data-value');
var text = $target.children(':first-child').text();
var item = {
value: value,
text: text
};
me.removeItem(item);
}
);
},
/**
* 移除选中项
* @param {Object} item 选中项的数据 格式如: {value: '', text: ''}
* @param {HtmlElement} target 取消选中的元素
* @private
*/
removeItem: function (item) {
if (!item) {
return;
}
var selectedItem = this.getItemByValue(item.value);
this.datasource = u.without(this.datasource, selectedItem);
/**
* @event select
*
* 移除时触发
*/
this.fire('change', {
item: item
});
this.buildItems();
},
/**
* 根据值获取整个选择项的数据
* @param {string} value 值
* @param {Object=} datasource 数据源
* @return {Object} item 选中项的数据 格式如: {value: '', text: ''}
* @public
*/
getItemByValue: function (value) {
var item;
u.each(this.datasource, function (single, index) {
if (single.value === value) {
item = single;
}
});
return item;
},
/**
* 重渲染
*
* @method
* @protected
* @override
*/
repaint: painters.createRepaint(
InputControl.prototype.repaint,
{
name: ['datasource'],
paint: function (resultPanel, datasource) {
resultPanel.buildItems();
}
},
{
name: ['label'],
paint: function (resultPanel, selectedLabel) {
$(resultPanel.helper.getPart('items-label')).text(selectedLabel);
}
}
),
/**
* 根据datasource生成选择项
* @param {Array} datasource 选项列表数据源
* @private
*/
buildItems: function () {
var html
= '<a href="#" class="${style}" data-value="${value}">'
+ '<span>${text}</span>'
+ '<span class="${iconClass} ${removeClass}"></span>'
+ '</a>';
var s = '';
var helper = this.helper;
u.forEach(this.datasource, function (item) {
s += lib.format(
html,
{
value: item.value,
text: item.text,
style: helper.getPartClassName('item'),
iconClass: helper.getIconClass(),
removeClass: helper.getPartClassName('remove')
}
);
});
var selectedItemsPanel = helper.getPart('items-panel');
$(selectedItemsPanel).html(s);
},
/**
* 获取选中的
* @return {Object} 选中的条件
*/
getSelectedItems: function () {
var items = [];
u.each(this.datasource, function (item, index) {
if (item.selected) {
items.push(item);
}
});
return items;
},
/**
* 获取选中的值
* @return {Object} 选中项
*/
getValue: function () {
var items = this.getSelectedItems();
var valueArr = [];
u.each(items, function (item, index) {
valueArr.push(item.value);
});
return valueArr;
}
}
);
esui.register(FilterResult);
return FilterResult;
});
function (require) {
var u = require('underscore');
var InputControl = require('esui/InputControl');
var eoo = require('eoo');
var painters = require('esui/painters');
var esui = require('esui');
var $ = require('jquery');
/**
* Filter
*
* @class filter.Filter
* @extends esui.InputControl
*/
var Filter = eoo.create(
InputControl,
{
/**
* @override
*/
type: 'Filter',
/**
* 初始化配置
*
* @protected
* @override
*/
initOptions: function (options) {
var properties = {
// 默认单选
multiple: false,
// 是否支持自定义
custom: false,
// 自定义按钮Label
customBtnLabel: '自定义',
datasource: [],
value: null
};
u.extend(properties, options);
this.setProperties(properties);
},
/**
* 初始化DOM结构
*
* @protected
* @override
*/
initStructure: function () {
var controlHelper = this.helper;
var template = '<div id="${filterPanelId}" class="${filterPanelStyle}">'
+ '<label id="${labelId}"></label>'
+ '<div id="${contentPanelId}" class="${contentPanelStyle}"></div>'
+ '</div>';
var data = {
filterPanelStyle: controlHelper.getPartClassName('panel'),
filterPanelId: controlHelper.getId('items-wrapper-panel'),
labelId: controlHelper.getId('items-label'),
contentPanelId: controlHelper.getId('items-panel'),
contentPanelStyle: controlHelper.getPartClassName('items-panel')
};
var mainElement = this.main;
mainElement.innerHTML = this.helper.render(template, data);
// 创建控件树
this.initChildren(mainElement);
},
/**
* 重渲染
*
* @method
* @protected
* @override
*/
repaint: painters.createRepaint(
InputControl.prototype.repaint,
{
name: ['datasource', 'rawValue'],
paint: function (filter, datasource, rawValue) {
if (!u.isArray(rawValue)) {
rawValue = [rawValue];
}
u.each(filter.datasource, function (item, index) {
if (u.indexOf(rawValue, item.value) > -1) {
item.selected = true;
}
});
filter.buildItems();
}
},
{
name: ['label'],
paint: function (filter, label) {
$(filter.helper.getPart('items-label')).text(label);
}
}
),
/**
* 初始化事件交互
*
* @protected
* @override
*/
initEvents: function () {
var itemMainClass = this.helper.getPartClasses('item')[0];
var itemCmdClass = this.helper.getPartClasses('item-cmd')[0];
this.helper.addDOMEvent(
this.main,
'click',
'.' + itemMainClass + ', .' + itemCmdClass,
function (e) {
e.preventDefault();
this.changeItemStatus(e.target);
}
);
},
/**
* 改变选择项的选中状态
*
* @protected
* @method filter.Filter#changeItemStatus
* @param {HTMLElement} target 目标元素
*/
changeItemStatus: function (target) {
var helper = this.helper;
var itemRemoveClass = helper.getPartClassName('item-remove');
var itemCommonClass = helper.getPartClasses('item')[0];
var itemCmdClass = this.helper.getPartClasses('item-cmd')[0];
var clickItem = $(target);
var selectedItem = clickItem.closest('.' + itemCommonClass + ', .' + itemCmdClass);
var itemIndex = selectedItem.data('index');
var item = u.clone(this.datasource[itemIndex]);
if (clickItem.hasClass(itemRemoveClass)) {
this.selectItem(item);
this.removeItem(item);
this.fire('customitemremove', {item: item});
}
else {
var itemClass = helper.getPartClassName('item');
var cmdItemClass = helper.getPartClassName('item-cmd');
if (selectedItem.hasClass(itemClass)) {
this.selectItem(item);
}
else if (selectedItem.hasClass(cmdItemClass)) {
this.fire('customlinkclick', {element: target});
}
}
},
/**
* 根据datasource生成选择项
*
* @param {Array} datasource 选项列表数据源
* @private
*/
buildItems: function () {
var helper = this.helper;
var htmls = u.map(
this.datasource,
function (item, index) {
var active = item.selected ? helper.getPartClassName('item-active') : '';
return buildItem.call(this, item, active, index);
},
this
);
helper.getPart('items-panel').innerHTML = htmls.join('');
this.custom && buildCustomItem.call(this);
},
/**
* 新增选择项
*
* @public
* @param {Object} item 新增的选择项
*/
addItem: function (item) {
this.datasource.push(item);
this.buildItems();
},
/**
* 移除选择项
*
* @param {Object} item 待移除的项
*/
removeItem: function (item) {
var removeItem = this.getItemByValue(item.value);
this.datasource = u.without(this.datasource, removeItem);
this.buildItems();
},
/**
* 设置选择项
*
* @param {Object} item 选中项的数据 格式如: {value: '', text: ''}
* @public
*/
unselectItem: function (item) {
if (!item || !this.getItemByValue(item.value)) {
return;
}
var targetItem = this.getItemByValue(item.value);
targetItem.selected = false;
this.buildItems();
},
/**
* 选择项
*
* @param {Object} item 选中项的数据 格式如: {value: '', text: ''}
* @param {HtmlElement} target 选中的元素
* @private
*/
selectItem: function (item) {
var selectedItem = this.getItemByValue(item.value);
var lastItem;
var oldSelected = selectedItem.selected;
// 需要移除前一个单选
if (!this.multiple && !oldSelected) {
var selectedItems = this.getSelectedItems();
if (selectedItems.length > 0) {
lastItem = selectedItems[0];
lastItem.selected = false;
}
}
selectedItem.selected = !selectedItem.selected;
/**
* @event select
*
* 选择时触发
*/
this.fire('change', {
item: item,
lastItem: lastItem,
action: oldSelected ? 'unselect' : 'select'
});
this.buildItems();
},
/**
* 根据值获取整个选择项的数据
*
* @param {string} value 值
* @param {Object=} datasource 数据源
* @return {Object} item 选中项的数据 格式如: {value: '', text: ''}
* @public
*/
getItemByValue: function (value, datasource) {
datasource = datasource || this.datasource;
return u.find(
datasource,
function (single, index) {
return single.value === value;
}
);
},
/**
* 获取选中的项
*
* @return {Object} 选中项
*/
getSelectedItems: function () {
var items = [];
u.each(this.datasource, function (item, index) {
if (item.selected) {
items.push(item);
}
});
return items;
},
/**
* 获取选中的值
*
* @return {Object} 选中项
*/
getValue: function () {
var items = this.getSelectedItems();
var valueArr = [];
u.each(items, function (item, index) {
valueArr.push(item.value);
});
return valueArr;
}
}
);
/**
* 根据选项数据生成选择项
*
* @param {Object} item 选项数据
* @param {string} style 额外的样式
* @param {number} index 数据源中的索引
* @return {HtmlElement} 生成的选择项元素
*/
function buildItem(item, style, index) {
var template = ''
+ '<div class="${item | class} ${style}"'
+ ' data-value="${value}" data-index="${index}" data-allow-delete="${allowDelete}">'
+ '<span>${text | raw}</span>'
+ '<!-- if: ${allowDelete}-->'
+ '<span class="ui-icon ui-filter-remove ui-filter-item-remove"></span>'
+ '<!-- /if -->'
+ '</div>';
var data = {
style: style || '',
value: item.value,
index: index,
text: item.text,
allowDelete: item.allowDelete
};
return this.helper.render(template, data);
}
/**
* 生成自定义项
*/
function buildCustomItem() {
var controlHelper = this.helper;
var template = '<div id="${custom-link | id}" class="${item-cmd | class}"><span>${text}</span></div>';
var data = {
text: this.customBtnLabel
};
var html = this.helper.render(template, data);
$(controlHelper.getPart('items-panel')).append(html);
}
esui.register(Filter);
return Filter;
}
function (require) {
var esui = require('esui');
var lib = require('esui/lib');
var u = require('underscore');
var eoo = require('eoo');
var painters = require('esui/painters');
require('esui/Select');
require('esui/Panel');
var TableRichSelector = require('./TableRichSelector');
/**
* 控件类
*
* @class ui.TableRichSelectorWithFilter
* @extends ui.RichSelector
*/
var TableRichSelectorWithFilter = eoo.create(
TableRichSelector,
{
/**
* 控件类型，始终为`"TableRichSelectorWithFilter"`
*
* @type {string}
* @override
*/
type: 'TableRichSelectorWithFilter',
/**
* @override
*/
styleType: 'RichSelector',
/**
* 在搜索框的旁边增加筛选
* @override
*/
getSearchBoxHTML: function () {
var searchBoxHTML = [
// 搜索区
'<div data-ui="type:Panel;childName:searchBoxArea"',
' class="' + this.helper.getPartClassName('search-wrapper') + '">',
' <div style="float:left" data-ui="type:Select;childName:filter;"></div>',
' <div',
' data-ui="buttonPosition:right;buttonVariants:bordered icon;',
' type:SearchBox;childName:itemSearch;variants:clear-border',
' hide-searched-button;searchMode:instant;">',
' </div>',
'</div>'
].join('');
return searchBoxHTML;
},
/**
* 刷新筛选区
* @public
*/
refreshFilter: function () {
var filter = this.getFilter();
if (filter) {
filter.setProperties({datasource: this.filterDatasource});
filter.on('change', u.bind(this.search, this));
}
},
/**
* 重新渲染视图
* 仅当生命周期处于RENDER时，该方法才重新渲染
*
* @param {Array=} 变更过的属性的集合
* @override
*/
repaint: painters.createRepaint(
TableRichSelector.prototype.repaint,
{
name: 'filterDatasource',
paint: function (control, filterDatasource) {
control.refreshFilter();
}
}
),
/**
* @override
*/
initStructure: function () {
this.$super(arguments);
// 状态筛选，最终调用search函数
var filter = this.getFilter();
filter.extensions[0].activate();
this.addState('with-filter');
},
/**
* @override
*/
search: function (args) {
var filterData = [];
// 取自带搜索框的值
var searchBox = this.getSearchBox();
if (searchBox) {
filterData.push({value: lib.trim(searchBox.getValue())});
}
var filterSelect = this.getFilter();
if (filterSelect) {
var value = filterSelect.getValue();
if (value && value !== '') {
filterData.push({keys: [this.filterField], value: filterSelect.getRawValue()});
}
}
if (filterData.length) {
// 查询，更新数据源
this.queryItem(filterData);
// 更新腿部总结果
this.refreshFoot();
// 更新头部总结果
this.refreshHead();
// 更新状态
this.addState('queried');
}
// 相当于执行清空操作
else {
this.clearQuery();
}
},
/**
* 获取筛选区Panel
* @return {esui.Panel}
*/
getFilter: function () {
return this.getChild('body').getChild('searchBoxArea').getChild('filter');
}
}
);
esui.register(TableRichSelectorWithFilter);
return TableRichSelectorWithFilter;
}
function (require) {
var lib = require('esui/lib');
var InputControl = require('esui/InputControl');
/**
* ToggleButton控件
*
* @param {Object=} options 初始化参数
* @extends esui/InputControl
* @constructor
* @public
*/
function ToggleButton(options) {
InputControl.apply(this, arguments);
}
ToggleButton.prototype.type = 'ToggleButton';
ToggleButton.prototype.getCategory = function () {
return 'check';
};
/**
* 创建主元素
*
* @return {HTMLElement}
* @override
* @protected
*/
ToggleButton.prototype.createMain = function () {
return document.createElement('div');
};
/**
* 初始化参数
*
* @param {Object=} options 构造函数传入的参数
* @override
* @protected
*/
ToggleButton.prototype.initOptions = function (options) {
// 亲，看到这行代码的时候你有想过吗，按钮文字应该表示状态还是表示操作
var properties = {
onText: 'ON',
offText: 'OFF',
checked: false
};
lib.extend(properties, options);
if (!properties.title) {
properties.title = this.main.title;
}
if (lib.isInput(this.main)) {
this.helper.extractOptionsFromInput(this.main, properties);
}
else {
var children = lib.getChildren(this.main);
if (children.length > 1) {
if (!options.onText) {
properties.onText = lib.getText(children[0]);
}
if (!options.offText) {
properties.offText = lib.getText(children[1]);
}
}
}
InputControl.prototype.initOptions.call(this, properties);
};
function getPartHTML(button, part) {
var id = button.helper.getId(part);
var classes = button.helper.getPartClassName('part-' + part);
var html = '<span id="' + id + '" class="' + classes + '"></span>';
return html;
}
ToggleButton.prototype.initStructure = function () {
this.main.innerHTML = getPartHTML(this, 'on') + getPartHTML(this, 'off');
this.helper.addDOMEvent(
this.main,
'click',
lib.bind(this.toggle, this)
);
};
var paint = require('esui/painters');
/**
* 渲染自身
*
* @override
* @protected
*/
ToggleButton.prototype.repaint = paint.createRepaint(
InputControl.prototype.repaint,
paint.text('onText', 'on'),
paint.text('offText', 'off'),
paint.attribute('title'),
paint.style('width'),
paint.style('height'),
paint.state('checked')
);
ToggleButton.prototype.setProperties = function () {
if (this.hasOwnProperty('checked')) {
this.checked = !!this.checked;
}
var changed =
InputControl.prototype.setProperties.apply(this, arguments);
if (changed.hasOwnProperty('checked')) {
this.fire('change');
}
};
/**
* 获取是否选中
*
* @return {boolean}
*/
ToggleButton.prototype.isChecked = function () {
return this.checked;
};
/**
* 切换状态
*
* @public
*/
ToggleButton.prototype.toggle = function () {
this.set('checked', !this.checked);
};
lib.inherits(ToggleButton, InputControl);
require('esui').register(ToggleButton);
return ToggleButton;
}
define("esui/Frame",["require","esui/lib","esui/Control","esui/painters","esui"],function(require){function e(){n.apply(this,arguments)}var t=require("esui/lib"),n=require("esui/Control");e.prototype.type="Frame",e.prototype.createMain=function(){return document.createElement("iframe")},e.prototype.initOptions=function(e){var n={};if(t.extend(n,e),!n.src)n.src=this.main.src;this.setProperties(n)},e.prototype.initStructure=function(){this.main.frameborder="no",this.main.marginHeight="0",this.main.marginWeight="0"},e.prototype.initEvents=function(){this.helper.delegateDOMEvent(this.main,"load"),this.helper.addDOMEvent(this.main,"message",function(e){var t={origin:e.origin,data:e.data};this.fire("message",t)})};var i=require("esui/painters");return e.prototype.repaint=i.createRepaint(n.prototype.repaint,{name:"src",paint:function(e,t){if(e.main.src!==t)e.main.src=t}},i.style("height"),i.style("width")),e.prototype.callContentMethod=function(e){var t=[].slice.call(arguments,1),n=this.main.contentWindow;if(!n)throw new Error("No content window on this iframe");if("function"!=typeof n[e])throw new Error('No "'+e+'" method on window');return n[e].apply(n,t)},e.prototype.postMessage=function(e,t){var n=this.main.contentWindow;if(!n)throw new Error("No content window on this iframe");if("function"!=typeof n.postMessage)throw new Error("Current browser does not support postMessage");n.postMessage(e,t)},t.inherits(e,n),require("esui").register(e),e});
function (require) {
require('esui/Tree');
var esui = require('esui');
var eoo = require('eoo');
var u = require('underscore');
var util = require('../helper/util');
var lib = require('esui/lib');
var RichSelector = require('./RichSelector');
var TreeStrategy = require('./SelectorTreeStrategy');
var painters = require('esui/painters');
var $ = require('jquery');
/**
* 控件类
*
* @constructor
* @param {Object} options 初始化参数
*/
var TreeRichSelector = eoo.create(
RichSelector,
{
/**
* 控件类型，始终为`"TreeRichSelector"`
*
* @type {string}
* @override
*/
type: 'TreeRichSelector',
/**
* @override
*/
styleType: 'RichSelector',
/**
* @override
*/
initOptions: function (options) {
var properties = {
// 数据源
datasource: null,
// 定向展开配置开关，true则可以根据需要默认展开指定的节点
orientExpand: false,
// 全节点点击触发展开的配置开关
wideToggleArea: false,
// 是否只允许选择叶子节点
onlyLeafSelect: true,
// 是否隐藏根节点
hideRoot: true,
// 节点状态切换时，父子节点是否需要同步状态
// 有些需求场景是，父子节点除了概念上的从属关系外，交互上没有任何关联
// 选择父节点不代表其下的子节点全被选中；选择全部子节点也不代表父节点选中
needSyncParentChild: true,
// 树样式
treeVariants: 'icon angle hoverable',
// 大小写是否敏感。默认无视大小写
caseSensitive: false
};
u.extend(properties, options);
this.$super([properties]);
},
/**
* @override
*/
initStructure: function () {
this.$super(arguments);
$(this.main).addClass(
this.helper.getPrefixClass('treerichselector')
);
if (this.onlyLeafSelect) {
this.addState('only-leaf-selectable');
}
},
/**
* 重新渲染视图
* 仅当生命周期处于RENDER时，该方法才重新渲染
*
* @param {Array=} 变更过的属性的集合
* @override
*/
repaint: painters.createRepaint(
RichSelector.prototype.repaint,
{
name: 'datasource',
paint: function (me, datasource) {
me.refresh();
toggleTreeState(me, me.disabled);
}
},
{
name: 'selectedData',
paint: function (control, selectedData) {
// 如果没有传selectedData，就别取消了。
if (u.isEmpty(selectedData)) {
return;
}
// 先取消选择
var allData = control.allData;
// 对于根节点隐藏的情况
// 因为取值也不会取根节点，赋值如果等于根节点
// 避免所有子孙都被选中，这里无视
if (this.hideRoot && allData && selectedData.length === 1) {
var selectedItem = selectedData[0];
selectedItem = selectedItem.id || selectedItem.value || selectedItem;
if (selectedItem === allData.id) {
return;
}
}
if (allData && allData.children) {
var oldSelectedData = control.getSelectedItems();
control.selectItems(oldSelectedData, false);
control.selectItems(selectedData, true);
control.fire('add');
control.fire('change');
}
}
},
{
name: 'disabled',
paint: function (me, disabled) {
toggleTreeState(me, disabled);
}
}
),
/**
* 适配数据，创建一个全集扁平索引
*
* @param {ui.TreeRichSelector} treeForSelector 类实例
* @return {Object} 包含`indexData`和`selectedData`两个属性
* @ignore
*/
adaptData: function () {
var selectedData = [];
/**
* datasource的数据结构：
* {
* id: -1,
* text: '全部',
* children: [
* {
* id: 1,
* text: '节点1',
* children: [],
* // 以下属性都可以自定义
* isSelected: true,
* ...
* }
* ...
* ]
* }
*/
this.allData = lib.deepClone(this.datasource);
// 一个扁平化的索引
// 其中包含父节点信息，以及节点选择状态
var indexData = {};
var allData = this.allData;
if (allData && allData.children) {
this.walkTree(
allData,
allData.children,
function (parent, child) {
parent.id = parent.id || parent.value;
child.id = child.id || child.value;
indexData[child.id] = {
parentId: parent.id,
node: child,
isSelected: false
};
if (child.hasOwnProperty('isSelected')) {
indexData[child.id].isSelected = child.isSelected;
}
if (indexData[child.id].isSelected === true) {
selectedData.push(child);
}
}
);
// 把根节点也加上
indexData[allData.id] = {
parentId: null,
node: allData,
isSelected: false
};
}
this.indexData = indexData;
return {
indexData: indexData,
selectedData: selectedData
};
},
/**
* @override
*/
processDataAfterRefresh: function (adaptedData) {
// 用这个数据结构更新选择状态
if (this.mode !== 'delete') {
this.selectItems(adaptedData.selectedData, true);
}
},
/**
* 刷新备选区
*
* @override
*/
refreshContent: function () {
var treeData = this.isQuery() ? this.queriedData : this.allData;
if (!treeData || !treeData.children || !treeData.children.length) {
this.addState('empty');
}
else {
this.removeState('empty');
}
if (!treeData || !treeData.children) {
return;
}
var queryList = this.getQueryList();
var tree = queryList.getChild('tree');
if (!tree) {
var options = {
childName: 'tree',
datasource: treeData,
allowUnselectNode: this.allowUnselectNode,
strategy:
new TreeStrategy(
{
mode: this.mode,
onlyLeafSelect: this.onlyLeafSelect,
orientExpand: this.orientExpand
}
),
wideToggleArea: this.wideToggleArea,
hideRoot: this.hideRoot,
selectMode: this.multi ? 'multiple' : 'single',
variants: this.treeVariants
};
if (this.getItemHTML) {
options.getItemHTML = this.getItemHTML;
}
if (this.itemTemplate) {
options.itemTemplate = this.itemTemplate;
}
tree = esui.create('Tree', options);
queryList.addChild(tree);
tree.appendTo(queryList.main);
var control = this;
tree.on(
'selectnode',
function (e) {
var node = e.node;
control.handlerAfterClickNode(node);
}
);
tree.on(
'unselectnode',
function (e) {
// control.setItemState(e.node.id, 'isSelected', false);
control.handlerAfterClickNode(e.node);
}
);
}
else {
tree.setProperties(
{
datasource: lib.deepClone(treeData),
keyword: this.getKeyword()
}
);
}
},
getStateNode: function (id) {
return this.indexData[id];
},
getItemState: function (id, stateName) {
if (this.indexData[id]) {
var stateNode = this.getStateNode(id);
return stateNode[stateName];
}
return null;
},
setItemState: function (id, stateName, stateValue) {
if (this.indexData[id]) {
var stateNode = this.getStateNode(id);
stateNode[stateName] = stateValue;
}
},
getDatasourceWithState: function () {
var datasource = lib.deepClone(this.datasource);
var indexData = this.indexData;
this.walkTree(datasource, datasource.children, function (parent, child) {
child.isSelected = indexData[child.id].isSelected;
});
return datasource;
},
/**
* 点击触发，选择或删除节点
*
* @param {Object} node 节点对象
* @ignore
*/
handlerAfterClickNode: function (node) {
// 这个item不一定是源数据元，为了连锁同步，再取一遍
var item = this.indexData[node.id];
if (!item) {
return;
}
if (this.mode === 'add') {
this.actionForAdd(item);
}
else if (this.mode === 'delete') {
this.actionForDelete(item);
}
else if (this.mode === 'load') {
this.actionForLoad(item);
}
},
/**
* 添加动作
*
* @param {Object} item 保存在indexData中的item
*
*/
actionForAdd: function (item) {
var stateNode = this.getStateNode(item.node.id);
var toBeSelected = true;
if (stateNode.isSelected && this.allowUnselectNode) {
toBeSelected = false;
}
// 如果是单选，需要将其他的已选项置为未选
if (!this.multi) {
// 如果以前选中了一个，要取消选择
// 节点的状态切换Tree控件会完成，因此无需这里手动unselect
if (this.currentSeletedId != null) {
this.setItemState(this.currentSeletedId, 'isSelected', !toBeSelected);
}
// 赋予新值
if (toBeSelected) {
this.currentSeletedId = item.node.id;
}
}
this.setItemState(item.node.id, 'isSelected', toBeSelected);
// 多选同步父子状态
// 要先更新当前节点状态，再同步祖先与子孙
if (this.multi) {
trySyncParentAndChildrenStates(this, item, toBeSelected);
}
this.fire('add', {item: item.node});
this.fire('change');
},
/**
* 添加全部
*
* @override
*/
selectAll: function () {
var data = this.isQuery() ? this.queriedData : this.allData;
var root = this.getStateNode(data.id);
selectItem(this, root.node.id, true);
trySyncChildrenStates(this, root, true);
this.fire('add');
this.fire('change');
},
/**
* 批量选择或取消选择，供外部调用，不提供fire事件
*
* @param {Array} nodes 要改变状态的节点集合
* @param {boolean} toBeSelected 目标状态 true是选择，false是取消
* @override
*/
selectItems: function (nodes, toBeSelected) {
var indexData = this.indexData;
if (!indexData) {
return;
}
var control = this;
u.each(
nodes,
function (node) {
var id = node.id !== undefined ? node.id : node;
var item = indexData[id];
if (item != null && item !== undefined) {
// 更新状态，但不触发事件
selectItem(control, id, toBeSelected);
trySyncParentAndChildrenStates(control, item, toBeSelected);
}
}
);
},
/**
* 删除动作
*
* @param {Object} item 保存在indexData中的item
*
*/
actionForDelete: function (item) {
// 外部需要知道什么数据被删除了
var event = this.fire('delete', {items: [item.node]});
// 如果外面阻止了默认行为（比如自己控制了Tree的删除），就不自己删除了
if (!event.isDefaultPrevented()) {
deleteItem(this, item.node.id);
this.fire('change');
}
},
/**
* 删除全部
*
* @FIXME 删除全部要区分搜索和非搜索状态么
* @override
*/
deleteAll: function () {
var event = this.fire('delete', {items: this.getSelectedItems()});
// 如果外面阻止了默认行为（比如自己控制了Tree的删除），就不自己删除了
if (!event.isDefaultPrevented()) {
this.set('datasource', null);
this.fire('change');
}
},
/**
* 加载动作
*
* @param {Object} item 保存在indexData中的item
*/
actionForLoad: function (item) {
this.setItemState(item.node.id, 'isActive', true);
// 如果以前选中了一个，要取消选择
if (this.currentActiveId) {
this.setItemState(this.currentActiveId, 'isActive', false);
// load型树节点状态不是简单的“已选择”和“未选择”，还包含已激活和未激活
// -- 选择状态中的节点不可以激活
// -- 未选择状态的节点可以激活，激活后变成“已激活”状态，而不是“已选择”
// -- 激活某节点时，其余“已激活”节点要变成“未激活”状态
// 说了这么多，就是想说，我要自己把“已激活”节点要变成“未激活”状态。。。
// 然后如果这个节点恰好是isSelected状态的，那则不许执行unselect操作
if (!this.getStateNode(this.currentActiveId).isSelected) {
var tree = this.getQueryList().getChild('tree');
tree.unselectNode(this.currentActiveId, true);
}
}
// 赋予新值
this.currentActiveId = item.node.id;
this.fire('load', {item: item.node});
this.fire('change');
},
/**
* 获取指定状态的叶子节点，递归
*
* @param {Array} data 检测的数据源
* @param {boolean} isSelected 选择状态还是未选状态
* @return {Array} 叶子节点
* @ignore
*/
getLeafItems: function (data, isSelected) {
data = data || (this.allData && this.allData.children) || [];
var leafItems = [];
var me = this;
u.each(
data,
function (item) {
if (isLeaf(item)) {
var valid = (isSelected === this.getItemState(item.id, 'isSelected'));
// delete型的树没有“选择”和“未选择”的状态区别，所以特殊处理
if (me.mode === 'delete' || valid) {
leafItems.push(item);
}
}
else {
leafItems = u.union(
leafItems,
me.getLeafItems(item.children, isSelected)
);
}
},
this
);
return leafItems;
},
/**
* 获取当前已选择数据的扁平数组结构
*
* @return {Array}
* @public
*/
getSelectedItems: function () {
if (!this.allData) {
return [];
}
var selectedItems = [];
var control = this;
this.walkTree(
this.allData,
this.allData.children,
function (parent, child) {
if (control.mode === 'delete' || control.getStateNode(child.id).isSelected) {
selectedItems.push(child);
}
}
);
return selectedItems;
},
/**
* 获取当前已选择的数据的树形结构
*
* @return {Object}
* @public
*/
getSelectedTree: function () {
var control = this;
// clone完整数据，这个数据是原始的，不带最新选择状态的
var copyData = lib.deepClone(this.allData);
// 遍历树，把各个节点的children更新成只包含已选状态节点的
this.walkTree(
copyData,
copyData.children,
function (parent, child) {
// 找出所有选中节点或父节点状态为`isSomeSelected`, 即该节点存在选中的子孙节点
var selectedChildren = getSelectedNodesUnder(child, control);
if (selectedChildren.length) {
child.children = selectedChildren;
}
else {
child.children = null;
}
}
);
// 最外层再处理一下
copyData.children = u.filter(copyData.children, function (node) {
// 可能是叶子节点
return node.children || control.indexData[node.id].isSelected;
});
return copyData;
},
/**
* @override
*/
getSelectedItemsFullStructure: function () {
return this.getSelectedTree();
},
/**
* 清除搜索结果
*
* @return {boolean}
* @ignore
*/
clearQuery: function () {
this.$super(arguments);
if (this.mode !== 'delete') {
var selectedData = this.getSelectedItems();
this.selectItems(selectedData, true);
}
return false;
},
/**
* 清空搜索的结果
*
*/
clearData: function () {
// 清空数据
this.queriedData = {};
},
/**
* 搜索含有关键字的结果
*
* @param {Array} filters 过滤参数
*/
queryItem: function (filters) {
// Tree就只定位一个关键词字段
var keyword = filters[0].value;
var filteredTreeData = [];
filteredTreeData = queryFromNode.call(this, keyword, this.allData);
// 更新状态
this.queriedData = {
id: getTopId(this), text: '符合条件的结果', children: filteredTreeData
};
this.addState('queried');
this.refreshContent();
var selectedData = this.getSelectedItems();
// 删除型的不用设置
if (this.mode !== 'delete') {
this.selectItems(selectedData, true);
}
},
/**
* 一个遍历树的方法
*
* @param {Object} parent 父节点
* @param {Array} children 需要遍历的树的孩子节点
* @param {Function} callback 遍历时执行的函数
*/
walkTree: function (parent, children, callback) {
u.each(
children,
function (child, key) {
callback(parent, child);
this.walkTree(child, child.children, callback);
},
this
);
},
/**
* 获取当前列表的结果个数
*
* @return {number}
* @public
*/
getFilteredItemsCount: function () {
var node = this.isQuery() ? this.queriedData : this.allData;
var count = getChildrenCount(this, node, true);
return count;
},
/**
* 获取当前状态的显示个数
*
* @return {number}
* @override
*/
getCurrentStateItemsCount: function () {
var node = this.isQuery() ? this.queriedData : this.allData;
if (!node) {
return 0;
}
var count = getChildrenCount(this, node, true);
return count;
},
/**
* 判断是否根节点
*
* @param {Object} node 节点对象
* @return {boolean}
*/
isRoot: function (node) {
return node.id === getTopId(this);
}
}
);
/**
* 选择或取消选择
* 如果控件是单选的，则将自己置灰且将其他节点恢复可选
* 如果控件是多选的，则仅将自己置灰
*
* @param {ui.TreeRichSelector} control 类实例
* @param {Object} id 结点对象id
* @param {boolean} toBeSelected 置为选择还是取消选择
*
* @ignore
*/
function selectItem(control, id, toBeSelected) {
var tree = control.getQueryList().getChild('tree');
// 完整数据
var indexData = control.indexData;
var item = indexData[id];
if (!item) {
return;
}
// 如果是单选，需要将其他的已选项置为未选
if (!control.multi && toBeSelected) {
unselectCurrent(control);
// 赋予新值
control.currentSeletedId = id;
}
control.setItemState(id, 'isSelected', toBeSelected);
if (toBeSelected) {
tree.selectNode(id, true);
}
else {
tree.unselectNode(id, true);
}
}
/**
* 撤销选择当前项
*
* @param {ui.TreeRichSelector} control 类实例
* @ignore
*/
function unselectCurrent(control) {
var curId = control.currentSeletedId;
// 撤销当前选中项
var treeList = control.getQueryList().getChild('tree');
treeList.unselectNode(curId);
control.currentSeletedId = null;
}
/**
* 同步一个节点的父节点和子节点选择状态
* 比如：父节点选中与子节点全部选中的状态同步
*
* @param {ui.TreeRichSelector} control 类实例
* @param {Object} item 保存在indexData中的item
* @param {boolean} toBeSelected 目标状态 true是选择，false是取消
*/
function trySyncParentAndChildrenStates(control, item, toBeSelected) {
if (!control.needSyncParentChild) {
return;
}
trySyncParentStates(control, item, toBeSelected);
trySyncChildrenStates(control, item, toBeSelected);
}
/**
* 同步一个节点的父节点选择状态
*
* @param {ui.TreeRichSelector} control 类实例
* @param {Object} item 保存在indexData中的item
* @param {boolean} toBeSelected 目标状态 true是选择，false是取消
*/
function trySyncChildrenStates(control, item, toBeSelected) {
// 如果当前节点确定选中或者未选中状态
// 就不可能处于半选状态了
control.setItemState(item.node.id, 'isSomeSelected', false);
var indexData = control.indexData;
var node = item.node;
// 如果选的是父节点，子节点也要连带选上
var children = node.children || [];
u.each(children, function (child) {
selectItem(control, child.id, toBeSelected);
trySyncChildrenStates(control, indexData[child.id], toBeSelected);
});
}
/**
* 同步一个节点的子节点选择状态
*
* @param {ui.TreeRichSelector} control 类实例
* @param {Object} item 保存在indexData中的item
* @param {boolean} toBeSelected 目标状态 true是选择，false是取消
*/
function trySyncParentStates(control, item, toBeSelected) {
var indexData = control.indexData;
// 选的是子节点，判断一下是不是全部选择了，全部选择了，也要勾上父节点
var parentId = item.parentId;
var parentItem = indexData[parentId];
if (parentItem) {
var brothers = parentItem.node.children || [];
var allSelected = !u.find(
brothers,
function (brother) {
return !control.getItemState(brother.id, 'isSelected');
}
);
// 如果子节点部分选中，则标记父节点`isSomeSelected`为true
var someSelected = u.some(
brothers,
function (brother) {
return control.getItemState(brother.id, 'isSelected')
|| control.getItemState(brother.id, 'isSomeSelected');
}
);
if (!allSelected && someSelected) {
control.setItemState(parentId, 'isSomeSelected', true);
}
else {
control.setItemState(parentId, 'isSomeSelected', false);
}
selectItem(control, parentId, allSelected);
trySyncParentStates(control, parentItem, allSelected);
}
}
/**
* 删除选择的节点
*
* @param {ui.TreeRichSelector} control 类实例
* @param {number} id 结点数据id
*
* @ignore
*/
function deleteItem(control, id) {
// 完整数据
var indexData = control.indexData;
var topId = getTopId(control);
// 根节点
if (topId === id) {
control.setProperties({datasource: {}});
}
else {
var item = indexData[id];
var parentId = item.parentId;
var parentItem = indexData[parentId];
var node = parentItem.node;
var children = node.children || [];
// 从parentNode的children里删除
var newChildren = u.without(children, item.node);
// 没有孩子了，父节点也删了吧，遇到顶级父节点就不要往上走了，直接删掉
if (newChildren.length === 0 && parentId !== topId) {
deleteItem(control, parentId);
}
else {
node.children = newChildren;
control.setProperties({datasource: control.allData});
}
}
}
function getSelectedNodesUnder(parentNode, control) {
var children = parentNode.children;
return u.filter(
children,
function (node) {
return this.getItemState(node.id, 'isSelected')
|| this.getItemState(node.id, 'isSomeSelected');
},
control
);
}
/**
* 供递归调用的搜索方法
*
* @param {string} keyword 关键字
* @param {Object} node 节点对象
* @return {Array} 结果集
*/
function queryFromNode(keyword, node) {
var filteredTreeData = [];
var treeData = node.children;
u.each(
treeData,
function (data, key) {
var filteredData;
// 命中节点，先保存副本，之后要修改children
var config = {
caseSensitive: this.caseSensitive,
isPartial: true
};
if (util.compare(data.text, keyword, config)) {
filteredData = u.clone(data);
}
if (data.children && data.children.length) {
var filteredChildren = queryFromNode.call(this, keyword, data);
// 如果子节点有符合条件的，那么只把符合条件的子结点放进去
if (filteredChildren.length > 0) {
if (!filteredData) {
filteredData = u.clone(data);
}
filteredData.children = filteredChildren;
}
// 这段逻辑我还是留着吧，以防哪天又改回来。。。
// else {
// // 如果命中了父节点，又没有命中子节点，则只展示父节点
// if (filteredData) {
// filteredData.children = [];
// }
// }
}
if (filteredData) {
filteredTreeData.push(filteredData);
}
},
this
);
return filteredTreeData;
}
function isLeaf(node) {
return !node.children;
}
function getChildrenCount(control, node, onlyLeaf) {
var count = 1;
// 是叶子节点，但不是root节点
if (onlyLeaf) {
if (isLeaf(node)) {
// FIXME: 这里感觉不应该hardcode，后期想想办法
if (!node.id || node.id === getTopId(control)) {
return 0;
}
return 1;
}
// 如果只算叶子节点，父节点那一个不算数，从0计数
count = 0;
}
else {
// 顶级节点不算
if (node.id === getTopId(control)) {
count = 0;
}
}
count += u.reduce(
node.children,
function (sum, child) {
return sum + getChildrenCount(control, child, onlyLeaf);
},
0
);
return count;
}
/**
* 获取顶级节点id
*
* @param {ui.TreeRichSelector} control 当前的控件实例
* @return {number}
*/
function getTopId(control) {
return control.allData.id;
}
function toggleTreeState(selector, disabled) {
var queryList = selector.getQueryList();
var tree = queryList.getChild('tree');
if (!tree) {
return;
}
disabled ? tree.disable() : tree.enable();
}
esui.register(TreeRichSelector);
return TreeRichSelector;
}
function (require) {
require('esui/Label');
require('esui/Panel');
require('esui/SearchBox');
var lib = require('esui/lib');
var painter = require('esui/painters');
var InputControl = require('esui/InputControl');
var u = require('underscore');
/**
* 控件类
*
* @constructor
* @param {Object} options 初始化参数
*/
function RichSelector(options) {
InputControl.apply(this, arguments);
}
lib.inherits(RichSelector, InputControl);
RichSelector.prototype.type = 'RichSelector';
RichSelector.prototype.initOptions = function (options) {
var properties = {
height: 340,
width: 200,
// 是否需要标题栏
hasHead: true,
// 这个名字出现在标题栏
title: '标题名',
// 是否需要批量操作
needBatchAction: false,
// 批量操作文字
batchActionLabel: '批量操作',
// 是否有搜索功能
hasSearchBox: true,
// 是否有腿部信息
hasFoot: true,
// 这个字段是对腿部信息的填充
itemName: '结果',
// 搜索为空的提示
emptyText: '没有相应的搜索结果',
// 是否刷新数据时保持搜索状态
holdState: false,
// 选择器类型 'load', 'add', 'delete'
// load: 点击某个节点，加载 出一堆别的数据，主要用于样式区分
// add: 点击一个节点，把这个节点加到另一个容器里
// delete: 点击一个节点，删
mode: 'add',
multi: true
};
if (options.hasHead === 'false') {
options.hasHead = false;
}
if (options.hasSearchBox === 'false') {
options.hasSearchBox = false;
}
if (options.hasFoot === 'false') {
options.hasFoot = false;
}
if (options.holdState === 'false') {
options.holdState = false;
}
if (options.multi === 'false') {
options.multi = false;
}
// load型的选择器只能是单选的
if (options.mode === 'load') {
options.multi = false;
}
lib.extend(properties, options);
properties.width = Math.max(200, properties.width);
this.setProperties(properties);
};
RichSelector.prototype.getHeadHTML = function () {
var helper = this.helper;
var actionLink = '';
if (this.needBatchAction) {
var linkClassName =
helper.getPartClassName('batch-action-link');
var linkId = this.helper.getId('batch-action');
actionLink = ''
+ '<span class="' + linkClassName
+ '" id="' + linkId + '" >'
+ this.batchActionLabel
+ '</span>';
}
var head = [
'<div data-ui="type:Panel;childName:head;"',
' class="${headClass}">',
'<h3 data-ui="type:Label;childName:title;">',
'${title}</h3>',
'${actionLink}',
'</div>'
].join('\n');
head = lib.format(
head,
{
headClass: helper.getPartClassName('head'),
title: this.title,
actionLink: actionLink
}
);
return head;
};
RichSelector.prototype.getFootHTML = function () {
return [
'<div data-ui="type:Panel;childName:foot;"',
' class="' + this.helper.getPartClassName('foot') + '">',
'<span data-ui="type:Label;childName:totalCount">',
'</span>',
'</div>'
].join('\n');
};
RichSelector.prototype.initStructure = function () {
var tpl = [
// 表头
'${head}',
// 内容
'<div data-ui="type:Panel;childName:body;"',
' class="${bodyClass}">',
'${searchInput}',
// 搜索结果列表区
'<div data-ui="type:Panel;childName:content"',
' class="${contentClass}">',
// 结果为空提示
'<div data-ui="type:Label;childName:emptyText"',
' class="${emptyTextClass}">${emptyText}</div>',
// 结果列表
'<div data-ui="type:Panel;childName:queryList"',
' class="${queryListClass}">',
'</div>',
'</div>',
'</div>',
// 腿部概要信息
'${footInfo}'
];
var helper = this.helper;
var head = '';
if (this.hasHead) {
head = this.getHeadHTML();
}
var searchInput = '';
if (this.hasSearchBox) {
var searchBoxWidth = this.width - 45;
searchInput = [
// 搜索区
'<div data-ui="type:Panel;childName:searchBoxArea"',
' class="${searchWrapperClass}">',
'<div data-ui="type:SearchBox;childName:itemSearch;"',
' data-ui-skin="magnifier"',
' data-ui-width="' + searchBoxWidth + '">',
'</div>',
'</div>',
// 搜索结果概要
'<div data-ui="type:Panel;',
'childName:generalQueryResultArea"',
' class="${generalQueryResultClass}"',
' id="${queryResultId}">',
'<span class="${linkClass}" id="${linkId}">清空</span>',
'共找到<span id="${queryResultCountId}"></span>个',
'</div>'
].join('\n');
searchInput = lib.format(
searchInput,
{
searchWrapperClass:
helper.getPartClassName('search-wrapper'),
generalQueryResultClass:
helper.getPartClassName('query-result-general'),
queryResultCountId: helper.getId('result-count'),
linkClass: helper.getPartClassName('clear-query-link'),
linkId: helper.getId('clear-query')
}
);
}
var footInfo = '';
if (this.hasFoot) {
footInfo = this.getFootHTML();
}
this.main.style.width = this.width + 'px';
this.main.innerHTML = lib.format(
tpl.join('\n'),
{
head: head,
bodyClass: helper.getPartClassName('body'),
searchInput: searchInput,
contentClass: helper.getPartClassName('content-wrapper'),
emptyTextClass: helper.getPartClassName('empty-text'),
emptyText: this.emptyText,
queryListClass: helper.getPartClassName('query-list'),
footInfo: footInfo
}
);
this.initChildren();
// 初始化模式状态
if (this.mode === 'load') {
this.addState('load');
}
else if (this.mode === 'add') {
this.addState('add');
}
else {
this.addState('del');
}
// 绑事件
var batchActionLink = helper.getPart('batch-action');
if (batchActionLink) {
helper.addDOMEvent(
batchActionLink,
'click',
u.bind(this.batchAction, this)
);
}
var clearQueryLink = helper.getPart('clear-query');
if (clearQueryLink) {
helper.addDOMEvent(
clearQueryLink,
'click',
u.bind(this.clearQuery, this)
);
}
var searchBox = this.getSearchBox();
if (searchBox) {
searchBox.on('search', search, this);
}
// 为备选区绑定事件
var queryList = this.getQueryList().main;
helper.addDOMEvent(
queryList,
'click',
u.bind(this.eventDispatcher, this)
);
};
/**
* 点击行为分发器
* @param {Event} 事件对象
* @ignore
*/
RichSelector.prototype.eventDispatcher = function (e) {
return false;
};
/**
* 根据关键词搜索结果
* @param {event} SearchBox的点击事件对象
* @ignore
*/
function search(e) {
var keyword = e.target.getValue();
this.search(keyword);
}
RichSelector.prototype.search = function (keyword) {
keyword = lib.trim(keyword);
// 查询
this.queryItem(keyword);
// 更新概要搜索结果区
this.refreshResult();
// 更新腿部总结果
this.refreshFoot();
// 更新状态
this.addState('queried');
// 调整高度
this.adjustHeight();
};
RichSelector.prototype.refreshResult = function () {
var count = this.getCurrentStateItemsCount();
this.helper.getPart('result-count').innerHTML = count;
};
function resetSearchState(control) {
// 删除搜索状态
control.removeState('queried');
// 清空搜索框
var searchBox = control.getSearchBox();
if (searchBox) {
searchBox.set('text', '');
}
}
/**
* 清除搜索结果
* @param {ui.RichSelector} richSelector 类实例
* @ignore
*/
RichSelector.prototype.clearQuery = function () {
// 重置搜索
resetSearchState(this);
// 清空数据
this.clearData();
// 概要搜索结果区归零
this.refreshResult();
// 更新备选区
this.refreshContent();
// 更新腿部总结果
this.refreshFoot();
// 调整高度
this.adjustHeight();
return false;
};
/**
* 获取结果列表承载容器控件，列表在它里面
* @param {ui.RichSelector} richSelector 类实例
* @return {ui.Panel}
* @ignore
*/
RichSelector.prototype.getContent = function () {
var body = this.getChild('body');
if (body) {
return body.getChild('content');
}
return null;
};
RichSelector.prototype.getKeyword = function () {
var searchBox = this.getSearchBox();
var isQuery = this.isQuery();
if (searchBox && isQuery) {
return lib.trim(searchBox.getValue());
}
return null;
};
/**
* 获取结果列表控件
* @return {ui.TreeForSelector | ui.ListForSelector}
* @ignore
*/
RichSelector.prototype.getQueryList = function () {
var content = this.getContent();
if (content) {
return content.getChild('queryList');
}
return null;
};
/**
* 获取搜索控件
* @return {ui.Panel}
* @ignore
*/
RichSelector.prototype.getSearchBox = function () {
var searchBoxArea =
this.getChild('body').getChild('searchBoxArea');
if (searchBoxArea) {
return searchBoxArea.getChild('itemSearch');
}
};
/**
* 获取腿部总个数容器
* @param {ui.RichSelector} richSelector 类实例
* @return {ui.Panel}
* @ignore
*/
RichSelector.prototype.getTotalCountPanel = function () {
var foot = this.getChild('foot');
if (!foot) {
return null;
}
return foot.getChild('totalCount');
};
/**
* 判断是否处于query状态
* @return {boolean}
*/
RichSelector.prototype.isQuery = function () {
return this.hasState('queried');
};
/**
* 批量操作事件处理
* 可重写
*
*/
RichSelector.prototype.batchAction = function () {
if (this.mode == 'delete') {
this.deleteAll();
this.refreshFoot();
}
else if (this.mode == 'add') {
this.selectAll();
}
return false;
};
RichSelector.prototype.deleteAll = function () {
return false;
};
RichSelector.prototype.addAll = function () {
return false;
};
/**
* 调整高度。
* 出现搜索信息时，结果区域的高度要变小，才能使整个控件高度不变
*
*/
RichSelector.prototype.adjustHeight = function() {
// 用户设置总高度
var settingHeight = this.height;
// 头部高度 contentHeight + border
var headHeight = 28;
// 是否有搜索框
var searchBoxHeight = this.hasSearchBox ? 45 : 0;
// 是否有腿部信息
var footHeight = this.hasFoot ? 25 : 0;
// 结果区高度 = 总高度 - 头部高度 - 搜索框高度 - 腿部高度
var contentHeight =
settingHeight - headHeight - searchBoxHeight - footHeight;
// 处于query状态时，会有一个30px的概要信息区
if (this.isQuery()) {
contentHeight -= 30;
}
var content = this.getContent().main;
content.style.height = contentHeight + 'px';
};
RichSelector.prototype.adaptData = function () {};
/**
* 手动刷新
*
* @param {ui.RichSelector} richSelector 类实例
* @ignore
*/
RichSelector.prototype.refresh = function () {
// 重建数据，包括索引数据的创建
this.adaptData();
var needRefreshContent = true;
// 刷新搜索区
if (this.hasSearchBox && this.isQuery()) {
// 有一种场景（一般在删除型控件里）
// 在搜索状态下，删除了某个节点之后，希望还保留在搜索状态下
if (this.holdState) {
// 根据关键字获取结果
this.search(this.getKeyword());
// search方法里面已经执行过了
needRefreshContent = false;
}
// 清空搜索区
else {
resetSearchState(this);
}
}
// 刷新主体
if (needRefreshContent) {
// 重绘视图
this.refreshContent();
// 更新底部信息
this.refreshFoot();
// 更新高度
this.adjustHeight();
}
};
/**
* 更新腿部信息
*
* @param {ui.RichSelector} richSelector 类实例
* @ignore
*/
RichSelector.prototype.refreshFoot = function () {
if (!this.hasFoot) {
return;
}
var count = this.getCurrentStateItemsCount();
// 更新腿部总结果
var totalCountPanel = this.getTotalCountPanel();
if (totalCountPanel) {
var itemName = u.escape(this.itemName);
totalCountPanel.setText('共 ' + count + ' 个' + itemName);
}
};
RichSelector.prototype.getCurrentStateItemsCount = function () {
return 0;
};
/**
* 重新渲染视图
* 仅当生命周期处于RENDER时，该方法才重新渲染
*
* @param {Array=} 变更过的属性的集合
* @override
*/
RichSelector.prototype.repaint = painter.createRepaint(
InputControl.prototype.repaint,
{
name: 'title',
paint: function (control, title) {
var head = control.getChild('head');
var titleLabel = head && head.getChild('title');
titleLabel && titleLabel.setText(title);
}
}
);
/**
* 获取已经选择的数据项
* 就是一个代理，最后从结果列表控件里获取
* @return {Array}
* @public
*/
RichSelector.prototype.getSelectedItems = function () {
return [];
};
/**
* 批量更新状态
* @param {Array} items 需要更新的对象集合
* @param {boolean} toBeSelected 要选择还是取消选择
* @public
*/
/**
* 批量更新选择状态
* @param {Array} items 需要更新的对象集合
* @param {boolean} toBeSelected 要选择还是取消选择
* @public
*/
RichSelector.prototype.selectItems = function (items, toBeSelected) {};
/**
* 设置元数据
*
* @param {Array} selectedItems 置为选择的项.
*/
RichSelector.prototype.setRawValue = function (selectedItems) {
this.rawValue = selectedItems;
this.selectItems(selectedItems, true);
};
/**
* 获取已经选择的数据项
*
* @return {Array}
*/
RichSelector.prototype.getRawValue = function () {
return this.getSelectedItems();
};
/**
* 将value从原始格式转换成string
*
* @param {*} rawValue 原始值
* @return {string}
*/
RichSelector.prototype.stringifyValue = function (rawValue) {
var selectedIds = [];
u.each(rawValue, function (item) {
selectedIds.push(item.id);
});
return selectedIds.join(',');
};
require('esui').register(RichSelector);
return RichSelector;
}
function (require) {
require('esui/Tree');
require('esui/Label');
require('esui/Panel');
require('esui/SearchBox');
var painter = require('esui/painters');
var ui = require('esui/main');
var lib = require('esui/lib');
var u = require('underscore');
var TreeStrategy = require('./SearchTreeStrategy');
var InputControl = require('esui/InputControl');
/**
* 控件类
*
* @constructor
* @param {Object} options 初始化参数
*/
function SearchTree(options) {
InputControl.apply(this, arguments);
}
lib.inherits(SearchTree, InputControl);
/**
* 控件类型，始终为`"SearchTree"`
*
* @type {string}
* @readonly
* @override
*/
SearchTree.prototype.type = 'SearchTree';
SearchTree.prototype.styleType = 'SearchTree';
SearchTree.prototype.initOptions = function (options) {
var properties = {
// 数据源
datasource: null,
// 树的相关属性
defaultExpand: true,
wideToggleArea: false,
onlyLeafSelect: false,
allowUnselectNode: false,
hideRoot: true,
treeSkin: 'flat',
height: '200',
width: '200',
// 是否有搜索功能
hasSearchBox: true,
// 这个字段是对腿部信息的填充
itemName: '结果',
// 搜索为空的提示
emptyText: '没有相应的搜索结果',
// 是否刷新数据时保持搜索状态
holdState: false
};
if (options.hasSearchBox === 'false') {
options.hasSearchBox = false;
}
if (options.holdState === 'false') {
options.holdState = false;
}
lib.extend(properties, options);
// properties.width = Math.max(200, properties.width);
this.setProperties(properties);
};
/**
* @override
*/
SearchTree.prototype.initStructure = function () {
/* eslint-disable fecs-indent */
var tpl = [
// 内容
'<div data-ui="type:Panel;childName:body;"',
' class="${bodyClass}">',
'${searchInput}',
// 搜索结果列表区
'<div data-ui="type:Panel;childName:content"',
' class="${contentClass}">',
// 结果为空提示
'<div data-ui="type:Label;childName:emptyText"',
' class="${emptyTextClass}">${emptyText}</div>',
// 结果列表
'<div data-ui="type:Panel;childName:queryList"',
' class="${queryListClass}">',
'</div>',
'</div>',
'</div>'
];
/* eslint-enable fecs-indent */
var helper = this.helper;
var searchInput = '';
if (this.hasSearchBox) {
var searchBoxWidth = this.width - 45;
// var searchBoxWidth = 150;
searchInput = [
// 搜索区
'<div data-ui="type:Panel;childName:searchBoxArea"',
' class="${searchWrapperClass}">',
'<div data-ui="type:SearchBox;childName:itemSearch;"',
' data-ui-skin="magnifier"',
' data-ui-width="' + searchBoxWidth + '">',
'</div>',
'</div>',
// 搜索结果概要
'<div data-ui="type:Panel;',
'childName:generalQueryResultArea"',
' class="${generalQueryResultClass}"',
' id="${queryResultId}">',
'<span class="${linkClass}" id="${linkId}">清空</span>',
'共找到<span id="${queryResultCountId}"></span>个',
'</div>'
].join('\n');
searchInput = lib.format(
searchInput,
{
searchWrapperClass:
helper.getPartClassName('search-wrapper'),
generalQueryResultClass:
helper.getPartClassName('query-result-general'),
queryResultCountId: helper.getId('result-count'),
linkClass: helper.getPartClassName('clear-query-link'),
linkId: helper.getId('clear-query')
}
);
}
this.main.style.width = this.width + 'px';
this.main.innerHTML = lib.format(
tpl.join('\n'),
{
bodyClass: helper.getPartClassName('body'),
searchInput: searchInput,
contentClass: helper.getPartClassName('content-wrapper'),
emptyTextClass: helper.getPartClassName('empty-text'),
emptyText: this.emptyText,
queryListClass: helper.getPartClassName('query-list')
}
);
this.initChildren();
var clearQueryLink = helper.getPart('clear-query');
if (clearQueryLink) {
helper.addDOMEvent(
clearQueryLink,
'click',
u.bind(this.clearQuery, this)
);
}
var searchBox = this.getSearchBox();
if (searchBox) {
searchBox.on('search', this.search, this);
}
lib.addClass(
this.main,
'ui-searchtree'
);
};
SearchTree.prototype.search = function (e) {
var keyword = lib.trim(e.target.getValue());
// 查询
this.queryItem(keyword);
// 更新概要搜索结果区
this.refreshResult();
// 更新状态
this.addState('queried');
// 调整高度
this.adjustHeight();
};
SearchTree.prototype.refreshResult = function () {
var count = this.getCurrentStateItemsCount();
this.helper.getPart('result-count').innerHTML = count;
};
/**
* 清除搜索结果
* @return {false} 阻止默认行为
* @ignore
*/
SearchTree.prototype.clearQuery = function () {
// 更新状态
this.removeState('queried');
// 清空搜索框
var searchBox = this.getSearchBox();
if (searchBox) {
searchBox.set('text', '');
}
// 清空数据
this.clearData();
// 概要搜索结果区归零
this.refreshResult();
// 更新备选区
this.refreshContent();
// 调整高度
this.adjustHeight();
if (this.curSeleId) {
this.selectItem(this.curSeleId, true);
}
return false;
};
/**
* 获取结果列表承载容器控件，列表在它里面
* @return {ui.Panel}
* @ignore
*/
SearchTree.prototype.getContent = function () {
var body = this.getChild('body');
if (body) {
return body.getChild('content');
}
return null;
};
SearchTree.prototype.getKeyword = function () {
var searchBox = this.getSearchBox();
var isQuery = this.isQuery();
if (searchBox && isQuery) {
return lib.trim(searchBox.getValue());
}
return null;
};
/**
* 获取结果列表控件
* @return {ui.TreeForSelector | ui.ListForSelector}
* @ignore
*/
SearchTree.prototype.getQueryList = function () {
var content = this.getContent();
if (content) {
return content.getChild('queryList');
}
return null;
};
/**
* 获取搜索控件
* @return {ui.Panel}
* @ignore
*/
SearchTree.prototype.getSearchBox = function () {
var searchBoxArea =
this.getChild('body').getChild('searchBoxArea');
if (searchBoxArea) {
return searchBoxArea.getChild('itemSearch');
}
};
/**
* 判断是否处于query状态
* @return {boolean}
*/
SearchTree.prototype.isQuery = function () {
return this.hasState('queried');
};
/**
* 调整高度。
* 出现搜索信息时，结果区域的高度要变小，才能使整个控件高度不变
*
*/
SearchTree.prototype.adjustHeight = function() {
// 用户设置总高度
var settingHeight = this.height;
// 头部高度 contentHeight + border
var headHeight = 28;
// 是否有搜索框
var searchBoxHeight = this.hasSearchBox ? 45 : 0;
// 是否有腿部信息
var footHeight = this.hasFoot ? 25 : 0;
var content = this.getContent().main;
if (settingHeight === 'auto') {
content.style.height = 'auto';
}
else {
// 结果区高度 = 总高度 - 头部高度 - 搜索框高度 - 腿部高度
var contentHeight =
settingHeight - headHeight - searchBoxHeight - footHeight;
// 处于query状态时，会有一个30px的概要信息区
if (this.isQuery()) {
contentHeight -= 30;
}
content.style.height = contentHeight + 'px';
}
};
/**
* 手动刷新
*
* @ignore
*/
SearchTree.prototype.refresh = function () {
// 刷新搜索区
if (this.hasSearchBox) {
// 有的时候需要保留搜索状态
if (this.holdState && this.isQuery()) {
var keyword = this.getKeyword();
// 根据关键字获取结果
this.queryItem(keyword);
}
else {
// 清空搜索区
this.clearQuery();
// 重建数据
this.adaptData();
// 构建选区
this.refreshContent();
}
}
else {
// 重建数据
this.adaptData();
// 构建选区
this.refreshContent();
}
// 更新高度
this.adjustHeight();
};
/**
* 重新渲染视图
* 仅当生命周期处于RENDER时，该方法才重新渲染
*
* @param {Array=} 变更过的属性的集合
* @override
*/
SearchTree.prototype.repaint = painter.createRepaint(
SearchTree.prototype.repaint,
{
name: 'datasource',
paint: function (control, datasource) {
control.refresh();
}
}
);
/**
* 适配数据，创建一个全集扁平索引
*
* @ignore
*/
SearchTree.prototype.adaptData = function () {
// 这是一个不具备任何状态的东西
this.allData = this.datasource;
// 一个扁平化的索引
// 其中包含父节点信息，以及节点选择状态
var indexData = {};
if (this.allData && this.allData.children) {
indexData[this.allData.id] = {
parentId: null,
node: this.allData,
isSelected: false
};
walkTree(
this.allData,
this.allData.children,
function (parent, child) {
indexData[child.id] = {
parentId: parent.id,
node: child,
isSelected: false
};
}
);
}
this.indexData = indexData;
};
/**
* 刷新备选区
* @override
*/
SearchTree.prototype.refreshContent = function () {
var treeData = this.isQuery() ? this.queriedData : this.allData;
if (!treeData
|| !treeData.children
|| !treeData.children.length) {
this.addState('empty');
}
else {
this.removeState('empty');
}
if (!treeData || !treeData.children) {
return;
}
var queryList = this.getQueryList();
var tree = queryList.getChild('tree');
if (!tree) {
var options = {
childName: 'tree',
datasource: treeData,
allowUnselectNode: this.allowUnselectNode,
strategy:
new TreeStrategy(
{
onlyLeafSelect: this.onlyLeafSelect,
defaultExpand: this.defaultExpand
}
),
wideToggleArea: this.wideToggleArea,
hideRoot: this.hideRoot,
selectMode: 'single',
skin: this.treeSkin
};
if (this.getItemHTML) {
options.getItemHTML = this.getItemHTML;
}
tree = ui.create('Tree', options);
queryList.addChild(tree);
tree.appendTo(queryList.main);
var me = this;
var indexData = this.indexData;
tree.on(
'selectnode',
function (e) {
var node = e.node;
me.selectItem(node.id, true);
me.fire('change');
}
);
tree.on(
'unselectnode',
function (e) {
var node = e.node;
if (indexData[node.id]) {
indexData[node.id].isSelected = false;
}
}
);
}
else {
tree.setProperties({
'datasource': u.deepClone(treeData),
'keyword': this.getKeyword()
});
}
};
/**
* 撤销选择当前项
* @param {ui.SearchTree} control 类实例
* @ignore
*/
function unselectCurrent(control) {
var curId = control.curSeleId;
// 撤销当前选中项
if (curId) {
var treeList = control.getQueryList().getChild('tree');
treeList.unselectNode(curId);
control.curSeleId = null;
}
}
/**
* 获取指定状态的叶子节点，递归
*
* @param {Array=} data 检测的数据源
* @param {boolean} isSelected 选择状态还是未选状态
* @return {Array} 子节点数组
* @ignore
*/
SearchTree.prototype.getLeafItems = function (data, isSelected) {
var leafItems = [];
var me = this;
var indexData = this.indexData;
u.each(data, function (item) {
if (isLeaf(item)) {
var indexItem = indexData[item.id];
var valid = (isSelected === indexItem.isSelected);
if (valid) {
leafItems.push(item);
}
}
else {
leafItems = u.union(
leafItems,
me.getLeafItems(item.children, isSelected)
);
}
});
return leafItems;
};
/**
* 选择或取消选择
* 如果控件是单选的，则将自己置灰且将其他节点恢复可选
* 如果控件是多选的，则仅将自己置灰
* @param {Object} id 结点对象id
* @param {boolean} toBeSelected 置为选择还是取消选择
* @ignore
*/
SearchTree.prototype.selectItem = function (id, toBeSelected) {
var tree = this.getQueryList().getChild('tree');
// 完整数据
var indexData = this.indexData;
var item = indexData[id];
if (!item) {
return;
}
// 如果是单选，需要将其他的已选项置为未选
if (toBeSelected) {
unselectCurrent(this);
// 赋予新值
this.curSeleId = id;
}
item.isSelected = toBeSelected;
if (toBeSelected) {
tree.selectNode(id, true);
}
else {
tree.unselectNode(id);
}
};
/**
* 或许当前已选择的数据
*
* @return {Object}
* @public
*/
SearchTree.prototype.getSelectedItem = function () {
var me = this;
return u.find(
me.indexData,
function(item) {
return item.node.id === me.curSeleId;
}
).node;
};
/**
* 或许当前已选择的id
*
* @return {Object}
* @public
*/
SearchTree.prototype.getSelectedId = function () {
return this.curSeleId;
};
/**
* 清空搜索的结果
*
*/
SearchTree.prototype.clearData = function() {
// 清空数据
this.queriedData = {};
};
/**
* 搜索含有关键字的结果
*
* @param {string} keyword 关键字
*/
SearchTree.prototype.queryItem = function (keyword) {
var filteredTreeData = [];
filteredTreeData = queryFromNode(keyword, this.allData);
// 更新状态
this.queriedData = {
id: '-1', text: '符合条件的结果', children: filteredTreeData
};
this.addState('queried');
this.refreshContent();
if (this.curSeleId) {
this.selectItem(this.curSeleId, true);
}
};
/**
* 供递归调用的搜索方法
*
* @param {string} keyword 关键字
* @param {Object} node 节点对象
* @return {Array} 结果集
*/
function queryFromNode(keyword, node) {
var filteredTreeData = [];
var treeData = node.children;
u.each(
treeData,
function (data, key) {
var filteredData;
// 命中，先保存副本
if (data.text.indexOf(keyword) !== -1) {
filteredData = u.clone(data);
}
// 如果子节点也有符合条件的，那么只把符合条件的子结点放进去
if (data.children && data.children.length) {
var filteredChildren = queryFromNode(keyword, data);
if (filteredChildren.length > 0) {
if (!filteredData) {
filteredData = u.clone(data);
}
filteredData.children = filteredChildren;
}
}
if (filteredData) {
filteredTreeData.push(filteredData);
}
}
);
return filteredTreeData;
}
/**
* 一个遍历树的方法
*
* @param {Object} parent 父节点
* @param {Array} children 需要遍历的树的孩子节点
* @param {Function} callback 遍历时执行的函数
* @ignore
*/
function walkTree(parent, children, callback) {
u.each(
children,
function (child, key) {
callback(parent, child);
walkTree(child, child.children, callback);
}
);
}
function isLeaf(node) {
return !node.children;
}
function getLeavesCount(node) {
// 是叶子节点，但不是root节点
if (isLeaf(node)) {
// FIXME: 这里感觉不应该hardcode，后期想想办法
if (!node.id || node.id === '-1' || node.id === '0') {
return 0;
}
return 1;
}
var count = u.reduce(
node.children,
function (sum, child) {
return sum + getLeavesCount(child);
},
0
);
return count;
}
/**
* 获取当前状态的显示个数
*
* @return {number}
* @override
*/
SearchTree.prototype.getCurrentStateItemsCount = function () {
var node = this.isQuery() ? this.queriedData : this.allData;
if (!node) {
return 0;
}
var count = getLeavesCount(node);
return count;
};
require('esui').register(SearchTree);
return SearchTree;
}
function (require) {
require('echarts/chart/line');
var m = require('moment');
var eoo = require('eoo');
var painter = require('esui/painters');
var BaseChart = require('./BaseChart');
var util = require('./util');
/**
* 线状图封装控件
*
* @class ui.LineChart
* @extends ui.BaseChart
*/
var LineChart = eoo.create(BaseChart, {
/**
* @override
*/
type: 'LineChart',
/**
* @override
*/
styleType: 'Chart',
/**
* @override
*/
initChartOptions: function () {
return {
tooltip: {
trigger: 'axis'
},
xAxis: [{}]
};
},
/**
* @override
*/
getTipTitleHtml: function (options) {
// 如果是日期，则需要显示星期几
// 取一个数据做抽取就可以
var timeStr;
if (options.isContrast) {
timeStr = getContrastRealTime.call(this, options.pointIndex);
}
else {
timeStr = options.pointInfo[0].name;
}
var week = '';
var date = m(timeStr, 'YYYY-MM-DD', 'zh-cn');
if (date.isValid()) {
week = date.format('dddd');
}
timeStr += ' ' + week;
return timeStr;
},
/**
* @override
*/
formatYSeriesData: function (serie, index) {
// 如果是对比图表，则曲线依赖的坐标计算方式
if (this.isContrast) {
index = Math.floor(index / 2);
}
// 计算area的颜色
var areaStyle = {};
if (serie.color) {
var areaColor = util.hexToRGB(serie.color);
areaStyle = {
color: 'rgba('
+ areaColor.r
+ ','
+ areaColor.g
+ ','
+ areaColor.b
+ ', 0.2)'
};
}
return {
name: serie.label,
type: 'line',
symbol: 'emptyCircle',
yAxisIndex: index,
itemStyle: {
normal: {
color: serie.color || '',
areaStyle: areaStyle
}
},
smooth: this.get('serieSmooth'),
data: serie.data
};
},
/**
* @override
*/
repaint: painter.createRepaint(BaseChart.prototype.repaint)
});
function getContrastRealTime(index) {
var xSeriesContrast = this.xSeriesContrast;
return xSeriesContrast[index];
}
require('esui').register(LineChart);
return LineChart;
}
function (require) {
require('esui/Label');
require('esui/Panel');
require('esui/SearchBox');
var lib = require('esui/lib');
var InputControl = require('esui/InputControl');
var u = require('underscore');
var eoo = require('eoo');
var painters = require('esui/painters');
var esui = require('esui');
/**
* 控件类
*
* 富选择控件有如下结构特点：
*
* - 一个标题栏 （可选）
* - 标题栏总数显示 （可选）
* - 标题栏批量操作 （可选）
* - 一个选择区 （必须）
* - 选择区头部搜索框 （可选）
* - 一个底部状态栏 （可选）
*
* 富选择控件有三种交互模式：
*
* - add 点击节点，执行选择行为，并触发'add'事件
* - load 点击节点，执行选择行为，并触发'load'事件
* - del 点击节点，执行删除行为，并触发'delete'事件
*
* 富选择控件有两种选择模式：
*
* - 单选
* - 多选
*
* @class ui.RichSelector
* @extends esui.InputControl
*/
var RichSelector = eoo.create(
InputControl,
{
/**
* 控件类型，始终为`"RichSelector"`
*
* @type {string}
* @override
*/
type: 'RichSelector',
/**
* @override
*/
initOptions: function (options) {
var properties = {
// 是否需要标题栏
hasHead: true,
// 标题栏是否需要统计数
needHeadCount: true,
// 这个名字出现在标题栏
title: '标题名',
// 是否需要批量操作
needBatchAction: false,
// 批量操作文字
batchActionLabel: '批量操作',
// 是否有搜索功能
hasSearchBox: true,
// 是否有腿部信息
hasFoot: true,
// 这个字段是对腿部信息的填充
itemName: '结果',
// 搜索为空的提示
emptyText: '没有相应的搜索结果',
// 是否刷新数据时保持搜索状态
holdState: false,
// 选择器类型 'load', 'add', 'delete'
// load: 点击某个节点，加载 出一堆别的数据，主要用于样式区分
// add: 点击一个节点，把这个节点加到另一个容器里
// delete: 点击一个节点，删
mode: 'add',
multi: true,
// 是否允许反选
allowUnselectNode: false
};
u.extend(properties, options);
this.$super([properties]);
},
/**
* 创建标题栏HTML
* @return {string}
*/
getHeadHTML: function () {
var helper = this.helper;
var actionLink = '';
var headCount = '';
if (this.needBatchAction) {
var linkClassName = helper.getPartClassName('batch-action-link');
var linkId = this.helper.getId('batch-action');
actionLink = ''
+ '<a class="' + linkClassName
+ '" id="' + linkId + '" >'
+ this.batchActionLabel
+ '</a>';
}
if (this.hasHead && this.needHeadCount) {
var countClass = helper.getPartClassName('head-count');
headCount = '<span class="'
+ countClass
+ '" data-ui="type:Label;childName:headTotalCount;title:;"></span>';
}
var head = [
'<div data-ui="type:Panel;childName:head;"',
' class="${headClass}">',
'<span class="${headTitleClass}" data-ui="type:Label;childName:title;title:;">',
'${title}</span>${totalCount}',
'${actionLink}',
'</div>'
].join('\n');
head = lib.format(
head,
{
headClass: helper.getPartClassName('head'),
headTitleClass: helper.getPartClassName('head-title'),
title: this.title,
actionLink: actionLink,
totalCount: headCount
}
);
return head;
},
/**
* 创建底部状态栏HTML
* @return {string}
*/
getFootHTML: function () {
var tpl = [
'<div data-ui="type:Panel;childName:foot;" class="${classes}">',
' <span data-ui="type:Label;childName:totalCount"></span>',
' ${footButton}',
'</div>'
].join('\n');
var footButton = '';
if (this.footButtonText) {
footButton = '<button data-ui="type:Button;childName:button;variants:link;">'
+ this.footButtonText
+ '</button>';
}
return lib.format(
tpl,
{
classes: this.helper.getPartClassName('foot'),
footButton: footButton
}
);
},
/**
* 创建搜索框HTML
* @return {string}
*/
getSearchBoxHTML: function () {
return [
// 搜索区
'<div data-ui="type:Panel;childName:searchBoxArea"',
' class="' + this.helper.getPartClassName('search-wrapper') + '">',
' <div',
' data-ui="buttonPosition:right;buttonVariants:bordered icon;',
' type:SearchBox;childName:itemSearch;variants:clear-border',
' hide-searched-button;searchMode:instant;">',
' </div>',
'</div>'
].join('');
},
/**
* @override
*/
initStructure: function () {
var tpl = [
// 标题栏
'${head}',
// 内容
'<div data-ui="type:Panel;childName:body;" class="${bodyClass}">',
// 搜索框
' ${searchInput}',
// 列表区
' <div data-ui="type:Panel;childName:content" class="${contentClass}">',
// 结果为空提示
' <div data-ui="type:Label;childName:emptyText" ',
' class="${emptyTextClass}">${emptyText}</div>',
// 结果列表
' <div data-ui="type:Panel;childName:queryList" class="${queryListClass}"></div>',
' </div>',
'</div>',
// 底部概要信息
'${footInfo}'
];
this.main.innerHTML = lib.format(
tpl.join('\n'),
{
head: this.hasHead ? this.getHeadHTML() : '',
bodyClass: this.helper.getPartClassName('body'),
searchInput: this.hasSearchBox ? this.getSearchBoxHTML() : '',
contentClass: this.helper.getPartClassName('content-wrapper'),
emptyTextClass: this.helper.getPartClassName('empty-text'),
emptyText: this.emptyText,
queryListClass: this.helper.getPartClassName('query-list'),
footInfo: this.hasFoot ? this.getFootHTML() : ''
}
);
this.initChildren();
// 初始化模式状态
this.addState(this.mode || 'delete');
// 绑事件
// 批量操作
if (this.needBatchAction) {
this.helper.addDOMEvent(
this.helper.getPart('batch-action'),
'click',
u.bind(this.batchAction, this)
);
}
// 搜索框
if (this.hasSearchBox) {
this.addState('has-search');
var searchBox = this.getSearchBox();
searchBox.on('search', u.bind(search, this));
searchBox.on('clear', u.bind(this.clearQuery, this));
}
// 为备选区绑定点击事件
var queryList = this.getQueryList().main;
this.helper.addDOMEvent(
queryList,
'click',
u.bind(this.eventDispatcher, this)
);
},
/**
* @override
*/
initEvents: function () {
this.$super(arguments);
var foot = this.getChild('foot');
var button = foot && foot.getChild('button');
if (button) {
button.on(
'click',
function (e) {
e.preventDefault();
this.fire('footclick');
},
this
);
}
},
/**
* 点击行为分发器
* @param {Event} e 事件对象
* @return {boolean}
* @ignore
*/
eventDispatcher: function (e) {
return false;
},
/**
* 按条件搜索
* @param {string | Object} args 搜索参数
*/
search: function (args) {
// filterData中的元素要满足一个标准结构: { keys: [], value: '' }
// 其中数组型的keys代表一种“并集”关系，也可以不提供
// filterData的各个元素代表“交集”关系。
var filterData = [];
var event = this.fire('search', filterData);
// 如果没有外部提供搜索条件
if (!event.isDefaultPrevented()) {
// 取自带搜索框的值
var searchBox = this.getSearchBox();
if (searchBox) {
var defaultFilter = {
value: lib.trim(searchBox.getValue())
};
filterData.push(defaultFilter);
}
}
if (filterData.length) {
// 查询，更新数据源
this.queryItem(filterData);
// 更新腿部总结果
this.refreshFoot();
// 更新头部总结果
this.refreshHead();
// 更新状态
this.addState('queried');
}
// 相当于执行清空操作
else {
this.clearQuery();
}
},
/**
* 清除搜索结果
*
* @param {ui.RichSelector} richSelector 类实例
* @return {boolean}
* @ignore
*/
clearQuery: function () {
// 重置搜索
resetSearchState(this);
// 清空数据
this.clearData();
// 更新备选区
this.refreshContent();
// 更新腿部总结果
this.refreshFoot();
// 更新头部总结果
this.refreshHead();
this.fire('clearquery');
return false;
},
/**
* 获取结果列表承载容器控件，列表在它里面
* @param {ui.RichSelector} richSelector 类实例
* @return {ui.Panel}
* @ignore
*/
getContent: function () {
var body = this.getChild('body');
if (body) {
return body.getChild('content');
}
return null;
},
getKeyword: function () {
var searchBox = this.getSearchBox();
var isQuery = this.isQuery();
if (searchBox && isQuery) {
return lib.trim(searchBox.getValue());
}
return null;
},
/**
* 获取结果列表控件
* @return {ui.TreeForSelector | ui.ListForSelector}
* @ignore
*/
getQueryList: function () {
var content = this.getContent();
if (content) {
return content.getChild('queryList');
}
return null;
},
/**
* 获取搜索控件
* @return {ui.Panel}
* @ignore
*/
getSearchBox: function () {
var searchBoxArea = this.getChild('body').getChild('searchBoxArea');
if (searchBoxArea) {
return searchBoxArea.getChild('itemSearch');
}
},
/**
* 获取腿部总个数容器
* @param {ui.RichSelector} richSelector 类实例
* @return {ui.Panel}
* @ignore
*/
getTotalCountPanel: function () {
var foot = this.getChild('foot');
if (!foot) {
return null;
}
return foot.getChild('totalCount');
},
/**
* 获取头部总个数容器
* @param {ui.RichSelector} richSelector 类实例
* @return {ui.Panel}
* @ignore
*/
getHeadTotalCountPanel: function () {
var head = this.getChild('head');
if (!head) {
return null;
}
return head.getChild('headTotalCount');
},
/**
* 判断是否处于query状态
* @return {boolean}
*/
isQuery: function () {
return this.hasState('queried');
},
/**
* 批量操作事件处理
* 可重写
*
* @return {boolean}
*/
batchAction: function () {
if (this.mode === 'delete') {
this.deleteAll();
this.refreshFoot();
this.refreshHead();
}
else if (this.mode === 'add') {
this.selectAll();
}
return false;
},
deleteAll: function () {
return false;
},
addAll: function () {
return false;
},
/**
* 数据适配
*
* @public
*/
adaptData: function () {},
/**
* 手动刷新
*
* @param {ui.RichSelector} richSelector 类实例
* @ignore
*/
refresh: function () {
// 重建数据，包括索引数据的创建
var adaptedData = this.adaptData();
var needRefreshContent = true;
// 刷新搜索区
if (this.hasSearchBox && this.isQuery()) {
// 有一种场景（一般在删除型控件里）
// 在搜索状态下，删除了某个节点之后，希望还保留在搜索状态下
if (this.holdState) {
// 根据关键字获取结果
this.search(this.getKeyword());
// search方法里面已经执行过了
needRefreshContent = false;
}
// 清空搜索区
else {
resetSearchState(this);
}
}
// 刷新主体
if (needRefreshContent) {
// 重绘视图
this.refreshContent();
// 视图重绘后的一些额外数据处理
this.processDataAfterRefresh(adaptedData);
// 更新底部信息
this.refreshFoot();
// 更新头部总结果
this.refreshHead();
}
},
/**
* 视图刷新后的一些额外处理
*
* @param {Object} adaptedData 适配后的数据
*/
processDataAfterRefresh: function (adaptedData) {},
/**
* 更新腿部信息
*
* @param {ui.RichSelector} richSelector 类实例
* @ignore
*/
refreshFoot: function () {
if (!this.hasFoot) {
return;
}
var count = this.getCurrentStateItemsCount();
// 更新腿部总结果
var totalCountPanel = this.getTotalCountPanel();
if (totalCountPanel) {
var itemName = u.escape(this.itemName);
totalCountPanel.setText('共 ' + count + ' 个' + itemName);
}
},
/**
* 更新头部信息
*
* @ignore
*/
refreshHead: function () {
if (!this.hasHead || !this.needHeadCount) {
return;
}
var count = this.getCurrentStateItemsCount();
// 更新头部总结果
var totalCountPanel = this.getHeadTotalCountPanel();
if (totalCountPanel) {
totalCountPanel.setText('（' + count + '）');
}
},
getCurrentStateItemsCount: function () {
return 0;
},
/**
* 重新渲染视图
* 仅当生命周期处于RENDER时，该方法才重新渲染
*
* @param {Array=} 变更过的属性的集合
* @override
*/
repaint: painters.createRepaint(
InputControl.prototype.repaint,
{
name: 'title',
paint: function (me, title) {
var head = me.getChild('head');
var titleLabel = head && head.getChild('title');
titleLabel && titleLabel.setText(title);
}
},
{
name: 'disabled',
paint: function (me, disabled) {
var serachbox = me.getSearchBox();
if (disabled) {
serachbox && serachbox.disable();
}
else {
serachbox && serachbox.enable();
}
}
},
painters.style('width')
),
/**
* 获取已经选择的数据项
* 就是一个代理，最后从结果列表控件里获取
* @return {Array}
* @public
*/
getSelectedItems: function () {
return [];
},
/**
* 获取已经选择的数据的完整数据结构
* @return {*}
* @public
*/
getSelectedItemsFullStructure: function () {
return {};
},
/**
* 批量更新状态
* @param {Array} items 需要更新的对象集合
* @param {boolean} toBeSelected 要选择还是取消选择
* @public
*/
/**
* 批量更新选择状态
* @param {Array} items 需要更新的对象集合
* @param {boolean} toBeSelected 要选择还是取消选择
* @public
*/
selectItems: function (items, toBeSelected) {},
/**
* 设置元数据
*
* @param {Array | Object} value 置为选择的项.
*/
setRawValue: function (value) {
if (!u.isArray(value)) {
value = [value];
}
if (!this.multi && value.length > 1) {
value = value.slice(0);
}
this.selectItems(value, true);
},
/**
* 获取已经选择的数据项
*
* @return {Array | Object} 多选模式返回数组，单选模式返回单值
*/
getRawValue: function () {
var selectedItems = this.getSelectedItems();
if (!this.multi) {
return selectedItems[0];
}
return selectedItems;
},
/**
* 将value从原始格式转换成string
*
* @param {*} rawValue 原始值
* @return {string}
*/
stringifyValue: function (rawValue) {
var selectedIds = [];
if (!u.isArray(rawValue)) {
selectedIds = [rawValue];
}
else {
u.each(rawValue, function (item) {
selectedIds.push(item.id);
});
}
return selectedIds.join(',');
}
}
);
/**
* 根据关键词搜索结果
* @param {event} e SearchBox的点击事件对象
* @ignore
*/
function search(e) {
this.search();
}
function resetSearchState(control) {
// 删除搜索状态
control.removeState('queried');
// 清空搜索框
var searchBox = control.getSearchBox();
if (searchBox) {
searchBox.set('text', '');
}
}
esui.register(RichSelector);
return RichSelector;
}
function (require) {
require('esui/Button');
require('esui/Link');
require('./ProgressQueue');
require('./FileInput');
var eoo = require('eoo');
var esui = require('esui');
var ui = require('esui/main');
var Control = require('esui/Control');
var painters = require('esui/painters');
var File = require('./File');
var $ = require('jquery');
var u = require('underscore');
var lib = require('esui/lib');
var NORMAL = 'normal';
var LIST = 'list';
var CARD = 'card';
var ALL = 'all';
var supportXHR = (window.File && window.XMLHttpRequest);
var supportXHR2 = (supportXHR && new window.XMLHttpRequest().upload);
var defaultQueue = {
// 所有文件队列
queueList: [],
// 队列中所有文件的大小
queueSize: 0,
// 正在上传的文件
uploadingFiles: [],
// 等待开始的文件
waitingFiles: [],
// 出错的文件
failedFiles: [],
// 遗弃的文件
// 当文件过长时会遗弃多余的文件
abandonedFiles: [],
// 上传完成的文件
completeFiles: []
};
// card视图下模板
var cardTemplate = [
'<div class="${fileClass}">',
' <span class="${nameClass}">${fileName}</span>',
' <span class="${sizeClass}">${fileSize}</span>',
'</div>',
'<div class="${statusClass}">',
' <div class="${statusInfoClass}">',
' <div class="${barContainerClass}">',
' <div class="${barClass}" id="${barId}"></div>',
' </div>',
' </div>',
' <div class="${operationClass}">',
' <esui-button class="${startButtonClass} ui-button-link" data-ui-child-name="start">',
' 开始',
' </esui-button>',
' <div class="${resultClass}" id="${resultId}"></div>',
' <esui-button class="${cancelButtonClass} ui-button-link" data-ui-child-name="cancel">',
' <span class="ui-icon-remove ui-eicons-fw"></span>',
' </esui-button>',
' </div>',
'</div>'
].join('');
// list视图下模板
var listTemplate = [
'<div class="${fileClass}">',
' <span class="${nameClass}">${fileName}</span>',
' <span class="${sizeClass}">${fileSize}</span>',
'</div>',
'<div class="${statusClass}">',
' <div class="${statusInfoClass}">',
' <div class="${barContainerClass}">',
' <div class="${barClass}" id="${barId}"></div>',
' </div>',
' </div>',
' <div class="${operationClass}">',
' <esui-button class="${startButtonClass} ui-button-link" data-ui-child-name="start">',
' 开始',
' </esui-button>',
' <div class="${resultClass}" id="${resultId}"></div>',
' <esui-button class="${cancelButtonClass} ui-button-link" data-ui-child-name="cancel">',
' <span class="ui-icon-remove ui-eicons-fw"></span>',
' </esui-button>',
' </div>',
'</div>'
].join('');
/**
* 控件类
*
* 上传控件有如下结构特点：
*
* - 上传组件 (必须，至少一个)
* -- 文件上传控件
* - 上传列表 (可选，可自定义容器)
* -- 由一个或多个进度条组件构成
*
* 上传控件有两种模式：
*
* - 单文件上传
* - 多文件上传
*
* @class ui.Uploader
* @extends esui.Control
*/
var Uploader = eoo.create(
Control,
{
/**
* 控件类型，始终为`"Uploader"`
*
* @type {string}
* @readonly
* @override
*/
type: 'Uploader',
/**
* @override
*/
initOptions: function (options) {
var properties = {
// 文件上传队列
queue: lib.deepClone(defaultQueue)
};
u.extend(properties, this.$self.defaultProperties, options);
var adaptProperties = ['sequentialUploads', 'multiple'];
u.each(
adaptProperties,
function (propertyName) {
if (properties[propertyName] === 'false') {
properties[propertyName] = false;
}
}
);
this.$super([properties]);
},
/**
* @override
*/
initStructure: function () {
var containerHtml = getContainerHtml.call(this, this.mode);
this.main.innerHTML = lib.format(
containerHtml,
{
uploadComboxClass: this.helper.getPartClassName('combox'),
uploadComboxHeaderClass: this.helper.getPartClassName('combox-header'),
uploadHeaderTag: this.helper.getPartClassName('header-tag'),
uploadHeaderTagOperation: this.helper.getPartClassName('tag-operation'),
uploadHeaderOutline: this.helper.getPartClassName('header-outline'),
totalCount: 0,
uploadTotalCountId: this.helper.getId('total-count'),
totalSize: 0,
uploadTotalSizeId: this.helper.getId('total-size'),
uploadRemoveAll: this.helper.getPartClassName('remove-all'),
uploadComboxBodyClass: this.helper.getPartClassName('combox-body'),
defaultProgressContainerId: this.helper.getId('default-progress-container'),
uploadComboxFooterClass: this.helper.getPartClassName('combox-footer'),
uploadComboxFooterId: this.helper.getId('combox-footer')
}
);
// 创建控件树
this.helper.initChildren();
// 创建主容器
if (this.mode !== NORMAL) {
var queueMode = this.mode === LIST ? LIST : CARD;
var progressContainer = $('#' + this.helper.getId('default-progress-container'))[0];
var progressQueue = ui.create('ProgressQueue', {
main: progressContainer,
progressMode: this.mode,
progressTemplate: this.itemTemplate,
showMode: queueMode
});
progressQueue.render();
this.progressQueue = progressQueue;
var cardTag = this.getChild(queueMode + 'Tag');
var tagClassName = this.helper.getPartClassName('tag-operation');
addedTagClass($(this), tagClassName, cardTag.main);
}
},
/**
* @override
*/
initEvents: function () {
var fileInput = this.getChild('fileInput');
// 伪装button的点击事件
var submitButton = this.getChild('submitButton');
submitButton.on(
'click',
function (e) {
fileInput.triggerUploadOutside();
e.preventDefault();
}
);
// 监听上传input的变化
fileInput.on('change', u.bind(inputChangeHandler, this));
var startAllBtn = this.getChild('startAll');
startAllBtn && startAllBtn.on('click', operationFileQueue, this);
var cancelAllBtn = this.getChild('cancelAll');
cancelAllBtn && cancelAllBtn.on('click', this.clear, this);
var $main = $(this.main);
var cardTag = this.getChild('cardTag');
var tagClassName = this.helper.getPartClassName('tag-operation');
cardTag && cardTag.on('click', function () {
addedTagClass($main, tagClassName, cardTag.main);
this.progressQueue.setProperties({
showMode: 'card'
});
}, this);
var listTag = this.getChild('listTag');
listTag && listTag.on('click', function () {
addedTagClass($main, tagClassName, listTag.main);
this.progressQueue.setProperties({
showMode: 'list'
});
}, this);
var progressQueue = this.progressQueue;
if (progressQueue) {
var me = this;
progressQueue.on('start', function (e) {
// 点击开始上传
chooseProgressFile.call(me, e.file, true);
});
progressQueue.on('restart', function (e) {
// 重新上传
var file = e.file;
e.target.dispose();
// 将文件移出上传队列，然后重新进行上传
removeFileFromUploading.call(me, file);
me.receiveFile([file]);
});
progressQueue.on('cancel', function (e) {
var file = e.file;
if (file.request) {
file.request.abort();
if (me.sequentialUploads) {
operationFileQueue.call(me);
}
}
// 从等待队列中清除
removeFileFromWaiting.call(me, file);
progressQueue.removeProgress(file);
refreshStutas.call(me);
});
$(this.main).on('click', '.state-selector', {
progressQueue: progressQueue
}, switchProgressByState);
}
},
/**
* @override
*/
repaint: painters.createRepaint(
Control.prototype.repaint,
{
name: ['text'],
paint: function (uploader, text) {
var button = uploader.getChild('submitButton');
button.setContent(text);
}
},
{
name: ['disabled', 'readOnly'],
paint: function (uploader, disabled, readOnly) {
var input = uploader.getChild('fileInput');
var button = uploader.getChild('submitButton');
input.setProperties({disabled: disabled});
input.setProperties({readOnly: readOnly});
button.setProperties({disabled: disabled});
button.setProperties({readOnly: readOnly});
}
},
painters.style('width'),
painters.style('height')
),
/**
* 接收文件并做上传前的校验
*
* @param {Array} files 接收到的文件，可以是input中取到的，也可以是drag外部传入的
* @public
*/
receiveFile: function (files) {
var event = this.fire('beforeupload', {files: files});
if (event.isDefaultPrevented()) {
return;
}
this.doUpload(files);
},
/**
* 开始上传
*
* @param {Array} files 接收到的文件
* @protected
*/
doUpload: function (files) {
// 超出最大限制，直接返回
if (files.length > this.maxFileNumber) {
this.notifyFail(this.message.ERROR_FILE_MAX_NUMBER);
return;
}
files = u.map(
files,
function (file, index) {
// 文件格式检查
if (!checkFileFormat.call(this, file)) {
file.status = 'fail';
file.message = this.message.ERROR_FILE_EXTENSIONS;
if (this.multiple === false) {
this.queue.failedFiles = [file];
}
else {
this.queue.failedFiles.push(file);
}
}
else if (!checkFileSize.call(this, file)) {
file.status = 'fail';
file.message = this.message.ERROR_FILE_MAX_SIEZ;
if (this.multiple === false) {
this.queue.failedFiles = [file];
}
else {
this.queue.failedFiles.push(file);
}
}
else {
file.status = 'waiting';
// 单文件上传要覆盖之前的文件
if (this.multiple === false) {
this.queue.waitingFiles = [file];
}
else {
this.queue.waitingFiles.push(file);
}
}
return file;
},
this
);
initFileList.call(this, files);
},
/**
* 获取Uploader中的文件上传组件
*
* @return {DOMElement} 容器中FileInput组件
* @public
*/
getFileInput: function () {
return this.getChild('fileInput');
},
/**
* 解析返回中的错误 TODO 这个的具体解析格式要跟后端商定
*
* @param {Object} response 请求返回的对象
* @return {string}
* @protected
*/
parseError: function (response) {
if (response.success === 'false') {
return {message: response.error};
}
return null;
},
/**
* 通知上传失败
*
* @method ui.Uploader#notifyFail
* @param {string} message 失败消息
* @protected
*/
notifyFail: function (message) {
message = message || '上传失败';
this.fire('fail', {message: message});
},
/**
* 通知上传完成
*
* @protected
* @method ui.Uploader#notifyComplete
*/
notifyComplete: function () {
this.stage = 'COMPLETE';
this.fire('complete', {
completeFiles: this.queue.completeFiles,
failedFiles: this.queue.failedFiles
});
},
/**
* 通知上传完成
*
* @public
* @method ui.Uploader#notifyComplete
*/
clear: function () {
// 等待队列先置空
this.queue.waitingFiles = [];
// 上传队列中都取消
u.each(this.queue.uploadingFiles, function (file) {
if (file.request) {
file.request.abort();
}
});
this.progressQueue.clearAllProgress();
this.queue = lib.deepClone(defaultQueue);
this.stage = 'COMPLETE';
refreshStutas.call(this);
}
}
);
/**
* 默认属性
*
* @type {Object}
* @public
*/
Uploader.defaultProperties = {
// 上传按钮文本
text: '点击上传',
// 文件上传的路径
action: '/uploadFile',
// 后台接收时的key名
paramKey: 'files',
// 接收的文件类型
accept: '.gif,.jpg,.png,.swf,.flv',
// 默认为单文件上传控件
// 单文件上传控件一次只能选择一个文件
multiple: false,
// 单个文件最大大小，单位B，默认2M
maxFileSize: 2147483648,
// 单次最大上传文件数量
maxFileNumber: 20,
// 多文件上传时，请求同时开始还是逐个开始
sequentialUploads: false,
// 提示信息
// 目前支持提供成功提示，文件大小不符
// 文件类型不匹配,
message: {
// 上传成功
SUCCESS_INFO: '已完成',
// 重新上传
RESTART_INFO: '正在重新上传',
// http错误，一般来说就是status返回不是200
ERROR_HTTP: '上传失败，网络连接错误或上传路径无效',
// 文件类型错误
ERROR_FILE_EXTENSIONS: '上传失败，安全因素不支持此类文件',
// 文件超出最大尺寸, 标准浏览器下可以判断
ERROR_FILE_MAX_SIEZ: '超出最大上传尺寸',
// 文件数量超过最大限制了
ERROR_FILE_MAX_NUMBER: '发生错误，上传文件超过限定。',
// 格式错误
ERROR_FILE_FORMAT: '文件格式错误'
},
// 是否显示进度
showProgress: true,
// removed
// 进度模式，seperate和total两种，seperate代表每个文件独立进度；total代表所有文件统一计算进度
// progressMode: 'seperate',
// singleProgressMode: 'detail',
// 文件列表的容器
// 如果没有会添加一个默认容器
progressContainer: null,
// 是否自己开始
autoStart: false,
/**
* @property {string} [mode="all"]
*
* 指定文本框模式，可以有以下值：
*
* - `normal`：表示仅仅只有一个上传按钮，不自带任何预览容器
* - `card`：表示使用card视图进行显示
* - `list`：表示使用list列表进行显示
* - `all`: 表示使用card和list两种视图同时进行展示
*
* 此属性仅能在初始化时设置，运行期不能修改
*
*/
mode: 'all',
// 容器模板
containerTemplate: '',
itemTemplate: {
// card视图下的item的展示模板
card: cardTemplate,
/**
* @property {string|Object} [itemTemplate.list=""]
*
* 指定文本框模式，可以有以下值：
*
* - string：表示仅仅只有一个上传按钮，不自带任何预览容器
* - Object：表示使用card视图进行显示
* - header 表示list需要一个默认的title
* - content 表示content的模板，一般指item的模板
*
* 此属性仅能在初始化时设置，运行期不能修改
*
*/
list: listTemplate
},
// 是否可拖拽
dragable: true,
// 是否分片
chunk: true,
// 默认4M
chunkSize: 4194304
};
/**
* 上传输入组件变化事件处理
*
* @param {mini-event.Event} e 事件对象
*/
function inputChangeHandler(e) {
var files = this.getFileInput().files;
this.receiveFile(files);
}
/**
* 验证文件格式
*
* @param {Object} file file对象
* @return {boolean}
* @protected
*/
function checkFileFormat(file) {
if (this.accept) {
// 这里就是个内置的`Rule`，走的完全是标准的验证流程，
// 主要问题是上传控件不能通过`getValue()`获得验证用的内容，
// 因此把逻辑写在控件内部了
var extension = file.name.split('.');
extension = '.' + extension[extension.length - 1].toLowerCase();
var isValid = false;
if (typeof this.accept === 'string') {
this.accept = lib.splitTokenList(this.accept);
}
for (var i = 0; i < this.accept.length; i++) {
var acceptPattern = this.accept[i].toLowerCase();
if (acceptPattern === extension) {
isValid = true;
break;
}
// image/*之类的，表示一个大类
if (acceptPattern.slice(-1)[0] === '*') {
var mimeType = acceptPattern.split('/')[0];
var targetExtensions = this.mimeTypes[mimeType];
if (targetExtensions && targetExtensions.hasOwnProperty(extension)) {
isValid = true;
break;
}
}
}
return isValid;
}
return true;
}
/**
* 验证文件大小
*
* @param {Object} file file对象
* @return {boolean}
* @protected
*/
function checkFileSize(file) {
// IE9中filechange返回的event只有fileName以及fileId
// 所以如果出现这种情况就放过去，让后端做长度校验
if (this.maxFileSize && file.originalSize) {
var isValid = false;
if (file.originalSize) {
isValid = parseInt(file.originalSize, 10) <= parseInt(this.maxFileSize, 10);
}
return isValid;
}
return true;
}
/**
* 创建上传进度队列
*
* @param {Array} fileList 在队列中的文件
*/
function initFileList(fileList) {
if (this.mode === NORMAL) {
// 不显示进度条的时候自动开始
// TODO 流程
operationFileQueue.call(this);
return;
}
var files = fileList ? fileList : this.queue.waitingFiles;
u.each(files, function (file, index) {
this.progressQueue.addProgress(file);
this.queue.queueList.push(file);
}, this);
refreshStutas.call(this);
}
/**
* 执行上传队列
*
*/
function operationFileQueue() {
// 当队列中
if (this.queue.waitingFiles && this.queue.waitingFiles.length) {
// 一个个上传
if (this.sequentialUploads && this.queue.uploadingFiles.length < 1) {
chooseProgressFile.call(this);
}
else {
chooseProgressFile.call(this);
operationFileQueue.call(this);
}
}
else if (this.queue.uploadingFiles.length === 0) {
this.notifyComplete();
}
}
/**
* 选择一个文件上传
*
* @param {Object|undefined} file 待上传的文件
* @param {boolean} singleFlag 是否单线上传
*/
function chooseProgressFile(file, singleFlag) {
if (!file) {
file = this.queue.waitingFiles.shift();
}
else {
this.queue.waitingFiles = u.filter(this.queue.waitingFiles, function (wFile) {
return file.id !== wFile.id;
});
}
// 等待队列中弹出
// 进入上传队列
this.queue.uploadingFiles.push(file);
// 执行上传
uploadFile.call(this, file, singleFlag);
refreshStutas.call(this);
if (!singleFlag && !this.sequentialUploads) {
operationFileQueue.call(this);
}
}
// function chunkFiles(file, singleFlag) {
// if (file.originalSize) {
// var chunkCount = Math.ceil(file.originalSize);
// if (chunkCount >= 2) {
// for (var i = 0; i < chunkCount; i++) {
// var chunFile;
// }
// }
// else {
// }
// }
// else {
// uploadFile.call(this, file, singleFlag);
// }
// }
/**
* 上传文件
*
* @param {ui.File} file 目标文件
* @param {boolean} singleFlag 是否是one by one上传
*/
function uploadFile(file, singleFlag) {
var me = this;
// 创建请求
var request = getHttpRequest.call(this);
file.request = request;
// 修改文件状态
file.status = File.UPLOADING;
// 创建一个符合后端接口的数据对象
var sendFile = {};
sendFile[this.paramKey] = file.sourceFile;
request.send(
{container: this.main},
sendFile
);
// 正常模式中不包含以下功能
if (this.mode !== NORMAL) {
// 上传中
request.on(
'progress',
function (response) {
var loaded = response.loaded;
var total = response.total;
me.progressQueue.setProgressDetail(file, total, loaded);
}
);
// 传输终止
request.on(
'abort',
function (event) {
removeFileFromUploading.call(me, file, 'abort');
me.fire('abort', {file: file});
}
);
}
// 上传完成
request.on(
'load',
function (event) {
var response = event.target.response;
// 解析一些校验错误
var error = me.parseError(response);
if (error) {
me.fire('error', {file: file});
if (me.mode !== NORMAL) {
// 修改进度状态
me.progressQueue.notifyError({
file: file,
status: 'fail',
message: error.message
});
me.removeFileFromUploading.call(me, file, 'error');
addToErrorQueue.call(me, file);
}
refreshStutas.call(me);
event.preventDefault();
return;
}
file.status = File.COMPLETE;
me.fire(
'onecomplete',
{
file: file,
data: response
}
);
if (me.mode !== NORMAL) {
// 修改进度状态
removeFileFromUploading.call(me, file, 'load');
if ((me.autoStart && me.sequentialUploads) || !singleFlag) {
operationFileQueue.call(me);
}
me.progressQueue.notifyError(file, 'complete', me.message.SUCCESS_INFO);
refreshStutas.call(me);
}
}
);
// 上传出错
request.on(
'error',
function (event) {
me.fire('error', {file: file});
if (me.mode !== NORMAL) {
// 修改进度状态
removeFileFromUploading.call(me, file, 'error');
me.progressQueue.notifyError(file, 'fail', event.message || me.message.ERROR_HTTP);
addToErrorQueue.call(me, file);
if ((me.autoStart && me.sequentialUploads) || !singleFlag) {
operationFileQueue.call(me);
}
refreshStutas.call(me);
}
}
);
}
/**
* 将文件移出等待队列
*
* @param {ui.File} file 目标文件
*/
function removeFileFromWaiting(file) {
// TDDO 优化，移出队列方法
this.queue.waitingFiles = u.without(this.queue.waitingFiles, file);
this.queue.queueList = u.without(this.queue.queueList, file);
this.queue.failedFiles = u.without(this.queue.failedFiles, file);
this.queue.uploadingFiles = u.without(this.queue.uploadingFiles, file);
this.queue.completeFiles = u.without(this.queue.completeFiles, file);
}
/**
* 需要添加的错误文件
*
* @param {ui.File} file 目标文件
*/
function addToErrorQueue(file) {
var sameFile = u.filter(this.queue.failedFiles, function (rawFile) {
return rawFile.id === file.id;
});
sameFile.length ? '' : this.queue.failedFiles.push(file);
}
/**
* 将文件移出上传队列并放入完成队列
*
* @param {ui.File} file 目标文件
* @param {string} operation 操作
* [operation = 'load'] 将该操作放入到完成队列当中
* [operation = 'error'] 将该操作放入到错误队列当中
*/
function removeFileFromUploading(file, operation) {
var queue = this.queue.uploadingFiles;
file = u.find(
queue,
function (rawFile) {
return rawFile.id === file.id;
}
);
this.queue.uploadingFiles = u.without(queue, file);
// 放入到完成队列当中
if ('load' === operation) {
var completeFiles = this.queue.completeFiles;
var sameFile = u.filter(completeFiles, function (rawFile) {
return rawFile.id === file.id;
});
sameFile.length ? '' : completeFiles.push(file);
}
}
/**
* 获取合适的HttpRequest，用于文件上传
* 目前实现了Leve1 XHR、Level2 XHR以及iframe的封装
*
* @return {ui.HttpRequest}
*/
function getHttpRequest() {
var HTTPRequest;
if (supportXHR2) {
HTTPRequest = require('./L2XMLHttpRequest');
}
else if (supportXHR) {
HTTPRequest = require('./XMLHttpRequest');
}
else {
HTTPRequest = require('./IframeHttpRequest');
}
var httpInstance = new HTTPRequest('POST', this.action);
return httpInstance;
}
/**
* 获取容器的string
*
* @param {string} uploaderMode 当前的视图模式
* @return {string}
*/
function getContainerHtml(uploaderMode) {
switch (uploaderMode) {
case NORMAL:
return getNormalTemplate.call(this);
default:
return getContainerTemplate.call(this);
}
}
function getNormalTemplate() {
if (this.containerTemplate) {
return this.containerTemplate;
}
var tpl = [
'<div class="${uploadComboxClass}">',
// 上传input
' <div data-ui-child-name="fileInput"',
' data-ui="type:FileInput;accept:${accept};multiple:${multiple};name:${paramKey};"></div>',
// 伪装ge按钮
' <div data-ui-child-name="submitButton" ',
' data-ui="type:Button;">${text}</div>',
'</div>'
].join('');
return tpl;
}
function getContainerTemplate() {
var cardTagTemplate = '<a class="${uploadHeaderTagOperation}" '
+ 'data-ui="type:Link;childName:cardTag;href:javascript:void(0);">卡片</a>';
var listTagTemplate = '<a class="${uploadHeaderTagOperation}" '
+ 'data-ui="type:Link;childName:listTag;href:javascript:void(0);">列表</a>';
var opTemplate = '';
if (this.mode === ALL) {
opTemplate = cardTagTemplate + listTagTemplate;
}
else if (this.mode === CARD) {
opTemplate = cardTagTemplate;
}
else if (this.mode === LIST) {
opTemplate = listTagTemplate;
}
var tpl = [
'<div class="${uploadComboxClass}">',
' <div class="${uploadComboxHeaderClass}">',
' <div class="${uploadHeaderTag}">',
' ' + opTemplate,
' </div>',
' <div class="${uploadHeaderOutline}">',
' <span id="${uploadTotalCountId}">总个数：${totalCount}</span>',
' <span id="${uploadTotalSizeId}">总大小：${totalSize}KB</span>',
' <esui-button data-ui-child-name="cancelAll" ',
' class="ui-button ui-button-link ${uploadRemoveAll}">',
' 删除全部</esui-button>',
' </div>',
' </div>',
' <div class="${uploadComboxBodyClass}">',
' <div id="${defaultProgressContainerId}"></div>',
' </div>',
' <div class="${uploadComboxFooterClass}" id="${uploadComboxFooterId}">',
' ' + getStatusOperationsHtml.call(this),
' ' + getOperationHtml.call(this),
' </div>',
'</div>'
].join('');
return tpl;
}
// 获取四种状态操作结构
function getStatusOperationsHtml() {
// 完成，上传中，等待中，出错
var statusTpl = [
'<div class="ui-button-group" id="${uploadStatusList}">',
' <button type="button" data-state="complete" class="state-selector ui-button-group-first ',
' ui-button ui-button-primary-inverted">完成: ${completeFiles}个</button>',
' <button type="button" data-state="uploading" class="state-selector ui-button ',
' ui-button-primary-inverted">上传中: ${uploadingFiles}个</button>',
' <button type="button" data-state="waiting" class="state-selector ui-button ',
' ui-button-primary-inverted">等待中: ${waitingFiles}个</button>',
' <button type="button" data-state="fail" class="state-selector ui-button-group-last',
' ui-button ui-button-primary-inverted">出错: ${failedFiles}个</button>',
'</div>'
].join('');
return lib.format(statusTpl, {
uploadStatusList: this.helper.getId('status-list'),
completeFiles: this.queue.completeFiles.length,
uploadingFiles: this.queue.uploadingFiles.length,
waitingFiles: this.queue.waitingFiles.length,
failedFiles: this.queue.failedFiles.length,
totalCount: this.queue.queueList.length,
totalSize: this.queue.queueSize
});
}
// 获取操作项模板
function getOperationHtml() {
var operationHtml = [
'<div class="operation-list">',
' <esui-button data-ui-child-name="startAll" class="ui-button ui-button-link">',
' 全部开始',
' </esui-button>',
// 断点续传没有实现，取消功能先注释掉
// ' <esui-button data-ui-child-name="cancelAll" class="ui-button ui-button-link">',
// ' 全部取消',
// ' </esui-button>',
' <esui-button data-ui-child-name="submitButton" class="ui-button ui-button-primary">',
' <span class="ui-icon-upload"></span>${text}', // 伪装ge按钮
' </esui-button>',
' <div data-ui-child-name="fileInput"', // 上传input
' data-ui="type:FileInput;accept:${accept};multiple:${multiple};name:${paramKey};"></div>',
'</div>'
].join('');
return lib.format(operationHtml, {
text: this.text,
accept: this.accept,
multiple: this.multiple,
paramKey: this.paramKey
});
}
function refreshStutas() {
var totalSize = u.reduce(this.queue.queueList, function (memo, file) {
var size = 0;
if (file.originalSize && u.isNumber(file.originalSize)) {
size = file.originalSize;
}
return memo + size;
}, 0);
this.queue.queueSize = File.formatSize(totalSize);
$('#' + this.helper.getId('total-size')).html('总大小：' + this.queue.queueSize);
$('#' + this.helper.getId('total-count')).html('总个数：' + this.queue.queueList.length);
$('#' + this.helper.getId('status-list')).replaceWith(getStatusOperationsHtml.call(this));
}
function switchProgressByState(e) {
var $this = $(this);
var progressQueue = e.data.progressQueue;
var state = $this.data('state');
$('.state-selector').not($this).removeClass('state-selector-active');
$this.toggleClass('state-selector-active');
progressQueue.showSelectPrgress($this.hasClass('state-selector-active') ? state : 'all');
}
function addedTagClass($container, className, target) {
$container.find('.' + className).removeClass('tag-selected');
$(target).addClass('tag-selected');
}
esui.register(Uploader);
return Uploader;
}
function (require) {
var lib = require('esui/lib');
var InputControl = require('esui/InputControl');
var eoo = require('eoo');
var esui = require('esui');
var painters = require('esui/painters');
var u = require('underscore');
require('./FullColorPicker');
require('esui/Overlay');
require('esui/TextBox');
require('esui/Button');
var ColorPicker = eoo.create(
InputControl,
{
/**
* 控件类型
*
* @override
*/
type: 'ColorPicker',
/**
* 初始化参数
*
* @override
* @protected
*/
initOptions: function (options) {
var properties = {
// 展示模式 'attached' | 'dialog'
displayMode: 'attached',
// 默认拾色器模式，支持 'simple' | 'advanced' | 'full'
featureMode: 'simple',
switchable: false,
hex: '000000',
alpha: 100,
hasAlpha: true
};
u.extend(properties, ColorPicker.defaultProperties, options);
this.setProperties(properties);
},
/**
* 初始化DOM结构
*
* @override
* @protected
*/
initStructure: function () {
var controlHelper = this.helper;
var mainTpl = ''
+ '<div class="${colorBlockFrameClass}" id="${colorBlockFrameId}">'
+ '<div class="${colorBlockClass}" id="${colorBlockId}"></div>'
+ '</div>'
+ '<div class="${colorInputClass}" id="${colorInputId}" data-ui-type="TextBox"'
+ 'data-ui-child-name="colorInput" data-ui-hint="#" data-ui-hint-type="prefix"'
+ 'data-ui-width="auto"></div>';
if (this.hasAlpha) {
mainTpl += ''
+ '<div class="${alphaInputClass}" id="${alphaInputId}" data-ui-type="TextBox"'
+ 'data-ui-child-name="alphaInput" data-ui-hint="%" data-ui-hint-type="suffix"'
+ 'data-ui-width="auto"></div>';
}
this.main.innerHTML = lib.format(
mainTpl,
{
colorBlockFrameClass: controlHelper.getPartClassName('color-block-frame'),
colorBlockFrameId: controlHelper.getId('color-block-frame'),
colorBlockClass: controlHelper.getPartClassName('color-block'),
colorBlockId: controlHelper.getId('color-block'),
colorInputClass: controlHelper.getPartClassName('color-input'),
colorInputId: controlHelper.getId('color-input'),
alphaInputClass: controlHelper.getPartClassName('alpha-input'),
alphaInputId: controlHelper.getId('alpha-input')
}
);
this.initChildren();
},
/**
* @override
*/
initEvents: function () {
this.$super(arguments);
var colorBlock = this.helper.getPart('color-block');
// 点色块走的是toggle，所以阻止冒泡到`document`
this.helper.addDOMEvent(
colorBlock,
'click',
function (e) {
e.stopPropagation();
}
);
this.helper.addDOMEvent(colorBlock, 'click', toggleLayer);
var colorInput = this.getChild('colorInput');
colorInput.on('input', u.bind(onColorInput, this));
var alphaInput = this.getChild('alphaInput');
if (alphaInput) {
alphaInput.on('input', u.bind(onAlphaInput, this));
}
},
/**
* 渲染自身
*
* @override
* @protected
* @fires ColorPicker#change
*/
repaint: painters.createRepaint(
InputControl.prototype.repaint,
{
name: ['hex', 'alpha'],
paint: function (colorPicker, hex, alpha) {
updateColorDisplay.call(colorPicker);
syncValue.call(colorPicker);
colorPicker.fire('change');
}
},
{
name: ['disabled'],
paint: function (colorPicker, disabled) {
if (disabled) {
colorPicker.helper.disableChildren();
}
else {
colorPicker.helper.enableChildren();
}
}
},
{
name: ['readOnly'],
paint: function (colorPicker, readOnly) {
u.each(
colorPicker.children,
function (child) {
if (readOnly) {
child.addState('readOnly');
}
else {
child.removeState('readOnly');
}
}
);
}
}
),
/**
* 批量更新属性并重绘
*
* @override
* @fires ColorPicker#change
*/
setProperties: function (properties) {
var changes = this.$super(arguments);
if (changes.hasOwnProperty('rawValue')) {
this.fire('change');
}
return changes;
},
/**
* @override
* @return {Object}
*/
getRawValue: function () {
var result = {};
result.hex = this.hex;
if (this.hasAlpha) {
result.alpha = this.alpha;
}
return result;
}
}
);
ColorPicker.defaultProperties = {
chooseColorText: '颜色选择',
closeText: '关闭',
okText: '确定',
cancelText: '取消'
};
/**
* 颜色输入框输入事件处理
*
* @param {mini-event.Event} e 事件参数
*/
function onColorInput(e) {
var colorInput = e.target;
var hex = colorInput.getValue();
// 只取输入的前6位
if (hex.length > 6) {
hex = hex.slice(0, 6);
}
hex = new Array(6 - hex.length + 1).join('0') + hex;
// 更新主元素显示
var colorBlock = this.helper.getPart('color-block');
colorBlock.style.background = '#' + hex;
this.hex = hex;
// 修改后需要fire一个事件出去
this.fire('change');
}
/**
* 透明度输入框输入事件处理
*
* @param {mini-event.Event} e 事件参数
*/
function onAlphaInput(e) {
var alpha = e.target.getValue();
this.alpha = alpha;
// 修改后需要fire一个事件出去
this.fire('change');
}
function updateColorDisplay() {
var colorBlock = this.helper.getPart('color-block');
colorBlock.style.backgroundColor = '#' + this.hex;
var colorInput = this.getChild('colorInput');
colorInput.setValue(this.hex);
if (this.hasAlpha) {
var alphaInput = this.getChild('alphaInput');
alphaInput.setValue(this.alpha);
}
}
function syncValue() {
var overlay = this.getChild('layer');
if (overlay) {
var properties = {};
properties.hex = this.getChild('colorInput').getValue();
if (this.hasAlpha) {
properties.alpha = this.getChild('alphaInput').getValue();
}
var colorPicker = overlay.getChild('colorPicker');
if (colorPicker) {
colorPicker.setProperties(properties);
}
}
}
function createLayer() {
var overlayMain = this.helper.createPart('layer', 'div');
lib.addClass(overlayMain, this.helper.getPartClassName('layer'));
var pickerContent = ''
+ this.helper.getPartBeginTag('head', 'div')
+ this.helper.getPartBeginTag('title', 'div') + this.chooseColorText
+ this.helper.getPartEndTag('title', 'div')
+ this.helper.getPartBeginTag('close-btn', 'div') + this.closeText
+ this.helper.getPartEndTag('close-btn', 'div')
+ this.helper.getPartEndTag('head', 'div')
+ '<div data-ui-type="FullColorPicker" data-ui-child-name="colorPicker"'
+ 'data-ui-default-mode="' + this.featureMode + '"'
+ 'data-ui-switchable="' + this.switchable + '"'
+ 'data-ui-has-alpha="' + this.hasAlpha + '">'
+ '</div>'
+ this.helper.getPartBeginTag('foot-frame', 'div')
+ this.helper.getPartBeginTag('foot', 'div')
+ '<div class="' + this.helper.getPartClassName('ok-btn') + '"'
+ 'data-ui="type:Button;childName:btnOk;variants:primary wide">' + this.okText + '</div>'
+ '<div class="' + this.helper.getPartClassName('cancel-btn') + '"'
+ 'data-ui="type:Button;childName:btnCancel;variants:link wide">' + this.cancelText + '</div>'
+ this.helper.getPartEndTag('foot', 'div')
+ this.helper.getPartEndTag('foot-frame', 'div');
var colorPickerOverLay = esui.create(
'Overlay',
{
main: overlayMain,
childName: 'layer',
content: pickerContent
}
);
this.addChild(colorPickerOverLay);
colorPickerOverLay.appendTo(this.main);
colorPickerOverLay.addState(this.displayMode);
var colorPicker = colorPickerOverLay.getChild('colorPicker');
// displayMode决定弹层展示模式
if (this.displayMode === 'attached') {
// 变了即时更新
var control = this;
colorPicker.on(
'change',
function (e) {
var hex = this.getDisplayHex();
var alpha = this.getDisplayAlpha();
if (hex !== control.hex || alpha !== control.alpha) {
control.setProperties({hex: hex, alpha: alpha});
}
}
);
}
else {
// 初始化关闭按钮
var closeBtn = this.helper.getPart('close-btn');
if (closeBtn) {
this.helper.addDOMEvent(closeBtn, 'click', hideOverlay);
}
// 初始化提交和取消按钮
var btnOk = colorPickerOverLay.getChild('btnOk');
var btnCancel = colorPickerOverLay.getChild('btnCancel');
btnOk.on('click', u.bind(submit, this));
btnCancel.on('click', u.bind(hideOverlay, this));
}
return this.getChild('layer');
}
/**
* 确认颜色选择
*
* @fires ColorPicker#submit
*/
function submit() {
var pickerOverlay = this.getChild('layer');
var fullColorPicker = pickerOverlay.getChild('colorPicker');
this.setProperties({hex: fullColorPicker.getDisplayHex(), alpha: fullColorPicker.getDisplayAlpha()});
pickerOverlay.hide();
this.fire('submit');
}
function hideOverlay() {
var pickerOverlay = this.getChild('layer');
pickerOverlay.hide();
}
/**
* 显示下拉弹层
*/
function showLayer() {
var colorPickerOverLay = this.getChild('layer');
// displayMode决定弹层展示模式
var properties = {
hasMask: true,
fixed: false,
autoClose: false
};
if (this.displayMode === 'attached') {
properties = {
attachedDOM: this.helper.getId('color-block-frame'),
attachedLayout: 'bottom,left'
};
}
colorPickerOverLay.setProperties(properties);
colorPickerOverLay.show();
colorPickerOverLay.resize();
}
/**
* 根据当前状态显示或隐藏浮层
*/
function toggleLayer() {
var layer = this.getChild('layer');
if (!layer) {
layer = createLayer.call(this);
}
if (layer.isHidden()) {
syncValue.call(this);
showLayer.call(this);
}
else {
layer.hide();
}
}
esui.register(ColorPicker);
return ColorPicker;
}
function (require) {
var eoo = require('eoo');
var echarts = require('echarts');
var painters = require('esui/painters');
var util = require('../helper/util');
var Control = require('esui/Control');
var $ = require('jquery');
var esui = require('esui');
var u = require('underscore');
/**
* 图表基类控件
*
* @class ui.BaseChart
* @extends esui.Control
*/
var BaseChart = eoo.create(Control, {
/**
* @override
*/
type: 'Chart',
/**
* @override
*/
initOptions: function (options) {
var properties = {
width: 'auto',
height: 300
};
u.extend(properties, BaseChart.defaultProperties, options);
this.setProperties(properties);
},
/**
* 初始化图表数据
*
* @protected
* @method ui.BaseChart#initChartOptions
* @return {Object}
*/
initChartOptions: function () {
return {};
},
/**
* 获得提示层的title
*
* @protected
* @method BaseChart#getTipTitleHtml
* @param {Object} params 相关参数
* @param {boolean} params.isContrast 是否是对比数据
* @param {number} params.pointIndex 坐标点的横坐标索引
* @param {Array} params.pointInfo 坐标点相关信息
* @return {string} 构建完成的title
*/
getTipTitleHtml: function (params) {
return '';
},
/**
* 提示层格式器
*
* @protected
* @method ui.BaseChart#tipFormatter
* @param {Array.<Object>} params 坐标点中的信息，具体数据参见ECHARTS文档
* @param {string} axisIndex 坐标点在x轴上的索引位置信息
* @return {string} 格式化后的弹出层html
* =========================
* 2013-12-04 星期三
* <图例色块> 展现量：42,000
* <图例色块> 点击量：12,000
* 2012-12-04 星期二
* <图例色块> 展现量：42,000
* <图例色块> 点击量：12,000
* =========================
*/
tipFormatter: function (params, axisIndex) {
// 要截取一下才是真实的index
axisIndex = +axisIndex.slice(5);
params = u.map(
params,
function (param, index) {
param.index = index;
return param;
}
);
// 如果是对比图表，那么一个节点中的几个指标值，隔位分成两组
// 按照规定，对比数据，基线数据在前，对比数据在后
// 对应的groups也一样
var paramsGroup;
if (this.isContrast) {
paramsGroup = [[], []];
u.each(
params,
function (param, index) {
paramsGroup[index % 2].push(param);
}
);
}
else {
paramsGroup = [params];
}
var html = [];
u.each(
paramsGroup,
function (params, index) {
var title = this.getTipTitleHtml({
pointInfo: params,
pointIndex: axisIndex,
isContrast: index % 2 !== 0
});
html.push(title);
u.each(
params,
function (param, paramIndex) {
var itemHTML = buildTipItem.call(this, param);
html.push(itemHTML);
},
this
);
},
this
);
return html.join('<br>');
},
/**
* 格式化y轴刻度数据
*
* @protected
* @method ui.BaseChart#formatYAxisData
* @param {Object} serie y轴数据
* @param {Object} index 坐标索引
* @return {Object} 返回格式化后的y轴构建所需数据对象
*/
formatYAxisData: function (serie, index) {
var data = serie.data;
// 如果包含对比数据，要把对比数据也加进来
if (this.isContrast) {
data = data.concat(this.ySeries[index + 1].data);
}
var splitNumber = this.splitNumber;
// index 只可能为0, 1 0为左边坐标 1为右边坐标
var labelAlign = index === 0 ? 'left' : 'right';
// 自动计算比例尺的逻辑先删掉，PM有反应再加上。。。
// 按从小到大排下序
var sortedData = u.sortBy(
[].slice.call(data),
function (item) {
return +item;
}
);
// 把最大刻度转换成符合比例尺规范的值
var maxData = sortedData[data.length - 1];
var average = Math.ceil(maxData / splitNumber);
// 取最接近average的刻度
var scale = getNearestScale(this, average);
var max = scale * splitNumber;
var formatter = function (serie) {
return function (value) {
if (serie.format === 'percent') {
value = value + '%';
}
else if (serie.format === 'money') {
value = util.formatNumber(value, 2);
}
else if (serie.format === 'int') {
value = util.formatNumber(value);
}
return value;
};
};
return {
type: 'value',
name: '',
axisLabel: {
show: true,
interval: 'auto',
// margin和align默认处理的挺好的，如果需要的话，再加上，不需要后续删掉这两个
// margin: this.get('yAxisTextMargin') || 8, // 默认值是8
formatter: formatter(serie)
},
min: 0,
max: max,
splitNumber: splitNumber,
scale: true
};
},
/**
* 绘制图表
*
* @public
* @method ui.BaseChart#draw
*/
draw: function () {
if (!this.chartOptions.series) {
return;
}
// 画图表
var chart = this.chart;
chart.showLoading(
{
text: this.loadingText
}
);
chart.setOption(this.chartOptions);
chart.hideLoading();
},
/**
* 格式化x轴数据
*
* @protected
* @method ui.BaseChart#formatXSeries
* @param {Array.<Object>} xSeries x轴数据系列
* @return {Array.<Object>}
*/
formatXSeries: function (xSeries) {
return xSeries;
},
/**
* 创建Y轴数据
*
* @protected
* @method ui.BaseChart#buildYAxis
* @param {Array} ySeries Y轴数据集合
* @return {Array}
*/
buildYAxis: function (ySeries) {
var yAxis = [];
var gap = 1;
if (this.isContrast) {
gap = 2;
}
for (var i = 0; i < ySeries.length; i += gap) {
var serie = ySeries[i];
// 格式化y轴刻度数据
var formattedYAxisData = this.formatYAxisData(serie, i);
yAxis.push(formattedYAxisData);
}
return yAxis;
},
/**
* 格式化y轴某条连续数据
*
* @protected
* @method BaseChart#formatYSeriesData
* @param {Object} serie y轴数据
* @param {number} index y轴数据索引
* @return {Object} 返回格式化后的y轴显示所需数据对象
*/
formatYSeriesData: function (serie, index) {
return {};
},
/**
* @override
*/
initStructure: function () {
/**
* 这里将chart单独封装在一个层里是考虑，
* 未来可能会在控件中封装其它图表外的操作按钮。
*/
var $main = $(this.main);
this.main.innerHTML = ''
+ this.helper.getPartBeginTag('frame', 'div')
+ this.helper.getPartBeginTag('main', 'div')
+ this.helper.getPartEndTag('main', 'div')
+ this.helper.getPartEndTag('frame', 'div');
$main.find('.' + this.helper.getPartClassName('main')).css({
width: this.width,
height: this.height
});
var chart = echarts.init(this.helper.getPart('main'), this.theme);
this.chart = chart;
// 绑定resize事件
this.helper.addDOMEvent(
window,
'resize',
function () {
chart.resize();
}
);
},
/**
* @override
*/
repaint: painters.createRepaint(
Control.prototype.repaint,
{
name: ['xSeries', 'ySeries'],
paint: function (chart, xSeries, ySeries) {
if (!ySeries) {
return;
}
// 如果chart的option还没初始化，先初始化
if (!chart.chartOptions) {
chart.chartOptions = chart.initChartOptions();
}
// 更新X轴数据
chart.chartOptions.xAxis[0].data = chart.formatXSeries(xSeries);
// 为了美观，当x轴数据只有1条时，数据不顶格，当X轴数据大于1条时，顶格
chart.chartOptions.xAxis[0].boundaryGap = (xSeries.length === 1);
// 跟新Y轴数据
// 1. 构建数据
var formattedYSeries = [];
chart.legend = [];
u.each(
ySeries,
function (serie, index) {
// 格式化y轴坐标数据
var formattedYSeriesData = chart.formatYSeriesData(serie, index);
formattedYSeries.push(formattedYSeriesData);
// 更新图例数据
chart.legend[index] = {
color: serie.color || this.chart._themeConfig.color[index],
format: serie.format
};
},
chart
);
// 2. 构建坐标
var yAxis = chart.buildYAxis(ySeries);
// 开画
chart.chartOptions.yAxis = yAxis;
chart.chartOptions.series = formattedYSeries;
chart.draw();
}
}
),
/**
* @override
*/
dispose: function () {
if (this.helper.isInStage('DISPOSED')) {
return;
}
if (this.chart) {
this.chart.dispose();
this.chart = null;
}
this.$super(arguments);
}
});
BaseChart.defaultProperties = {
scale: '1, 1.5, 2, 5, 10',
splitNumber: 4,
loadingText: '正在努力渲染...',
// 是否是对比图表
isContrast: false,
/**
* @property {string|Object} [theme]
*
* 设置Chart的Theme，可以自行定制。
* http://echarts.baidu.com/doc/example/themeDesigner.html
*
*/
theme: 'macarons'
};
/**
* 创建单行提示信息
*
* @param {Object} param 坐标点中的信息
* @return {string}
*/
function buildTipItem(param) {
var legend = this.legend;
if (legend.length === 0) {
return '';
}
// 图例和节点的对应，通过param的第四个参数
var format = legend[param.index].format;
var legendColor = legend[param.index].color;
var value = param.data;
if (format === 'money') {
value = (value === '-') ? '- -' : util.formatNumber(value, 2, '', '¥');
}
else if (format === 'int') {
value = util.formatNumber(value);
}
else if (format === 'percent') {
value = value + '%';
}
// 有时需要自定义tip信息 所以需要允许自定义
var returnedEvent = this.fire('beforebuildtipitem', {param: param, value: value});
var styles = 'margin-right:5px;display:inline-block;width:10px;height:10px;';
var defaultTip = '<b style="' + styles + 'background:' + legendColor + ';"></b>'
+ param.seriesName + '：' + value;
return returnedEvent.itemValue || defaultTip;
}
/**
* 获取单位刻度值
*
* 控件设置有默认五个基础比例尺 '1, 1.5, 2, 5, 10'
* 根据目标数据的位数对基础比例尺做加权
* 比如 215 是三位数，权值是100，加权后的比例尺是
* '100, 150, 200, 500, 1000'
* 可以涵盖目标数字。
* 然后通过比较，获取目标数字所落比例尺区间的最大值，即为最后的单位刻度
*
* @param {BaseChart} chart 类实例
* @param {Object} average 实际平均刻度
*
* @return {number} scale 获得的单位刻度
*/
function getNearestScale(chart, average) {
var averageStr = average.toString();
// 位数
var bits = averageStr.length;
// 通过平均值的位数计算加权值，比如215的加权就是100
var power = Math.pow(10, bits - 1);
// 基础比例尺格式化为数组，默认[1, 1.5, 2, 5, 10]
var baseScale = chart.scale.split(',');
var scale;
for (var i = 0; i < baseScale.length; i++) {
// 实际比例尺选择范围是基础比例尺乘以加权值
baseScale[i] = parseFloat(baseScale[i]) * power;
// 向上取值
if (average <= baseScale[i]) {
scale = baseScale[i];
break;
}
}
return scale;
}
esui.register(BaseChart);
return BaseChart;
}
define("ub-ria/ui/TableRichSelector",["require","esui/lib","esui/painters","underscore","../util","./RichSelector","esui"],function(require){function e(){f.apply(this,arguments)}function t(e){for(var t=e.helper.getPartClassName("head-table"),i=['<table border=0 class="'+t+'"><tr>'],n=e.fields.length,a=0;n>a;a++){var r=e.fields[a];i.push('<th class="th'+a+'" style="width:'+r.width+'px;">'+r.title||"</th>")}return i.push('<th style="width:30px;"></th>'),i.push("</tr></table>"),i.join(" ")}function i(e,t){var i=e.indexData,a=e.helper,r=a.getPartClassName("content-table"),o=['<table border=0 class="'+r+'">'],s=a.getPartClassName("row"),l=a.getPartClassName("row-selected"),h=a.getPartClassName("row-disabled");return c.each(t,function(t,a){var r=[s];if(t.isSelected)r.push(l);if(t.isDisabled)r.push(h);o.push(m.format(e.rowTpl,{rowId:e.helper.getId("row-"+t.id),rowClass:r.join(" "),index:i[t.id],content:n(e,t,a)}))}),o.push("</table>"),o.join(" ")}function n(e,t,i,n){var a=e.fields,r=[],o=e.helper.getPartClassName("row-field"),s=0;c.each(a,function(a,l){var h=a.content,d="function"==typeof h?h.call(e,t,i,l):t[h];if(n){var m=n.insertCell(l);m.style.width=a.width+"px",m.title=d,m.innerHTML=d}else{var u='<td class="'+o+'" title="'+d+'" style="width:'+a.width+'px;">'+d+"</td>";r.push(u)}s++});var l=e.helper.getPartClassName("row-action-icon"),h='<span class="'+l+'"></span>';if(n){var d=n.insertCell(s);d.style.width="30px",d.innerHTML=h}else return r.push('<td style="width:30px;">'+h+"</td>"),r.join(" ")}function a(e,t,i){var n=e.helper.getPartClassName("row-selected"),a=!1;if(m.hasClass(t,n)){if(!e.multi)r(e,i.id,!1),a=!0}else r(e,i.id,!0),a=!0;if(a)e.fire("add",{item:i}),e.fire("change")}function r(e,t,i){var n=e.indexData,a=e.allData,r=n[t],l=a[r];if(!e.multi)o(e),e.currentSelectedId=i?t:null;s(e,l,i)}function o(e){var t=e.currentSelectedId;if(t){var i=e.indexData[t],n=e.allData[i];s(e,n,!1),e.currentSelectedId=null}}function s(e,t,i){if(t){t.isSelected=i;var n=e.helper.getPart("row-"+t.id),a=i?m.addClass:m.removeClass;a(n,e.helper.getPartClassName("row-selected"))}}function l(e,t,i){h(e,i.id),e.fire("delete",{items:[i]}),e.fire("change")}function h(e,t){var i=e.indexData,n=i[t],a=[].slice.call(e.datasource,0);a.splice(n,1),e.set("datasource",a)}function d(e,t,i){var n=e.helper.getPartClassName("row-selected");if(!m.hasClass(t,n))r(e,i.id,!0),e.fire("load"),e.fire("change")}var m=require("esui/lib"),u=require("esui/painters"),c=require("underscore"),p=require("../util"),f=require("./RichSelector");return m.inherits(e,f),e.prototype.type="TableRichSelector",e.prototype.styleType="RichSelector",e.prototype.initOptions=function(e){var t={hasRowHead:!0,hasIcon:!0,firedOnIcon:!1,datasource:[],selectedData:[],fields:[{field:"name",content:"name",searchScope:"partial",isDefaultSearchField:!0}]};if("false"===e.hasRowHead)e.hasRowHead=!1;if("false"===e.hasIcon)e.hasIcon=!1;if("false"===e.firedOnIcon)e.firedOnIcon=!1;m.extend(t,e),f.prototype.initOptions.call(this,t)},e.prototype.initStructure=function(){f.prototype.initStructure.apply(this,arguments),m.addClass(this.main,"ui-table-richselector")},e.prototype.repaint=u.createRepaint(f.prototype.repaint,{name:["datasource","selectedData","disabledData"],paint:function(e){e.refresh(),e.fire("change")}}),e.prototype.adaptData=function(){var e=p.deepClone(this.datasource),t={};c.each(e,function(e,i){t[e.id]=i}),this.indexData=t;var i=this.selectedData||[];if(!this.multi)if(!c.isArray(i))this.currentSelectedId=i,i=[{id:i}];else if(i.length)this.currentSelectedId=i[0].id;c.each(i,function(i){var n=t[i.id];if(void 0!==n)e[n].isSelected=!0});var n=this.disabledData||[];c.each(n,function(i){var n=t[i.id];if(void 0!==n)e[n].isDisabled=!0}),this.allData=e,this.fieldsIndex={},this.defaultSearchFields=[],c.each(this.fields,function(e){if(this.fieldsIndex[e.field]=e,e.isDefaultSearchField)this.defaultSearchFields.push(e.field)},this)},e.prototype.refreshContent=function(){var e=this.isQuery()?this.queriedData:this.allData;if(!e||0===e.length)this.addState("empty");else this.removeState("empty");var n=[];if(this.hasRowHead)n.push(t(this));n.push(i(this,e));var a=this.getQueryList();a.setContent(n.join(""))},e.prototype.rowTpl='<tr id="${rowId}" class="${rowClass}" index="${index}">${content}</tr>',e.prototype.eventDispatcher=function(e){for(var t=e.target,i=this.helper,n=i.getPartClassName("row"),a=i.getPartClassName("row-action-icon");t&&t!==document.body;){var r;if(this.hasIcon&&this.fireOnIcon&&m.hasClass(t,a))r=t.parentNode;else if(m.hasClass(t,n))r=t;if(r)return void this.operateRow(r);t=t.parentNode}},e.prototype.operateRow=function(e){var t=this.helper.getPartClassName("row-disabled");if(!m.hasClass(e,t)){var i=parseInt(e.getAttribute("index"),10),n=this.allData[i];if(n)if("add"===this.mode)a(this,e,n);else if("delete"===this.mode)l(this,e,n);else if("load"===this.mode)d(this,e,n)}},e.prototype.selectAll=function(){var e=this.isQuery()?this.queriedData:this.allData,t=this;c.each(e,function(e){r(t,e.id,!0)}),this.fire("add"),this.fire("change")},e.prototype.selectItems=function(e,t){var i=this.allData,n=this.indexData,a=this;c.each(e,function(e){var o=void 0!==e.id?e.id:e,s=n[o];if(null!==s&&void 0!==s){var l=i[s];r(a,l.id,t)}})},e.prototype.deleteAll=function(){var e=c.clone(this.datasource);this.set("datasource",[]),this.fire("delete",{items:e}),this.fire("change")},e.prototype.queryItem=function(e){function t(e,t,i){var n=!1;if("string"==typeof t)t=m.trim(t);if("partial"===this.fieldsIndex[e].searchScope){if(-1!==i[e].indexOf(t))n=!0}else if(i[e]===t)n=!0;return n}function i(i){return!c.any(e,function(e){var n=[];if(void 0===e.keys)n=this.defaultSearchFields;else n=e.keys;return!c.any(n,function(n){return t.call(this,n,e.value,i)},this)},this)}e=e||[],this.queriedData=c.filter(this.allData,i,this),this.addState("queried"),this.refreshContent()},e.prototype.clearData=function(){this.queriedData=[]},e.prototype.getSelectedItems=function(){var e=this.datasource,t=this.allData,i=this.mode;if("delete"===i)return t;var n=c.filter(e,function(e,i){return t[i].isSelected});return n},e.prototype.getCurrentStateItemsCount=function(){var e=this.isQuery()?this.queriedData:this.allData;return e=e||[],e.length},require("esui").register(e),e});
function (require) {
var lib = require('esui/lib');
var Control = require('esui/Control');
/**
* Frame控件
*
* @extends Control
* @param {Object} [options] 初始化参数
* @constructor
*/
function Frame(options) {
Control.apply(this, arguments);
}
/**
* 控件类型，始终为`"Frame"`
*
* @type {string}
* @readonly
* @override
*/
Frame.prototype.type = 'Frame';
/**
* 创建主元素
*
* @return {HTMLElement}
* @protected
* @override
*/
Frame.prototype.createMain = function () {
return document.createElement('iframe');
};
/**
* 初始化参数
*
* @param {Object} [options] 构造函数传入的参数
* @protected
* @override
*/
Frame.prototype.initOptions = function (options) {
var properties = {};
lib.extend(properties, options);
if (!properties.src) {
properties.src = this.main.src;
}
this.setProperties(properties);
};
/**
* 初始化DOM结构
*
* @protected
* @override
*/
Frame.prototype.initStructure = function () {
this.main.frameborder = 'no';
this.main.marginHeight = '0';
this.main.marginWeight = '0';
};
/**
* 初始化事件交互
*
* @protected
* @override
*/
Frame.prototype.initEvents = function () {
this.helper.delegateDOMEvent(this.main, 'load');
this.helper.addDOMEvent(
this.main,
'message',
function (e) {
var event = {
origin: e.origin,
data: e.data
};
this.fire('message', event);
}
);
};
var paint = require('esui/painters');
/**
* 渲染自身
*
* @override
* @protected
*/
Frame.prototype.repaint = paint.createRepaint(
Control.prototype.repaint,
{
name: 'src',
paint: function (frame, src) {
// 避免重复加载`<iframe>`的地址，第一次渲染时没有比对功能
if (frame.main.src === src) {
return;
}
frame.main.src = src;
}
},
paint.style('height'),
paint.style('width')
);
/**
* 调用iframe内容窗口的方法
*
* @param {string} methodName 方法名称
* @param {Mixed...} args 调用时的参数
* @return {Mixed}
* @throws {Error} 内容窗口还未加载完毕无法使用
*/
Frame.prototype.callContentMethod = function (methodName) {
var args = [].slice.call(arguments, 1);
var contentWindow = this.main.contentWindow;
if (!contentWindow) {
throw new Error('No content window on this iframe');
}
if (typeof contentWindow[methodName] !== 'function') {
throw new Error('No "' + methodName + '" method on window');
}
return contentWindow[methodName].apply(contentWindow, args);
};
/**
* 向iframe内容窗口发送消息
*
* @param {Mixed} message 发送的消息对象
* @param {string} targetOrigin 目标域
* @throws {Error} 内容窗口还未加载完毕无法使用
* @throws {Error} 当前浏览器不支持`postMessage`方法
*/
Frame.prototype.postMessage = function (message, targetOrigin) {
var contentWindow = this.main.contentWindow;
if (!contentWindow) {
throw new Error('No content window on this iframe');
}
if (typeof contentWindow.postMessage !== 'function') {
throw new Error('Current browser does not support postMessage');
}
contentWindow.postMessage(message, targetOrigin);
};
lib.inherits(Frame, Control);
require('esui').register(Frame);
return Frame;
}
function (require) {
var $ = require('jquery');
var Control = require('esui/Control');
var esui = require('esui');
var eoo = require('eoo');
var painters = require('esui/painters');
var u = require('underscore');
/**
* Drawer类定义。
*
* @class
* @extends Control
*
* @constructor
*
* 创建新的Drawer实例
*
* @param {Object} [options] 组件参数
*/
var Drawer = eoo.create(
Control,
{
/**
* Drawer类型用于注册到ESUI库
*
* @override
*/
type: 'Drawer',
/**
* 初始化传入参数。
*
* @param {Object} options 初始化参数
* @override
*/
initOptions: function (options) {
var properties = {
/**
* @property {Number|string}
*
* Drawer的宽度。可以为百分比或者像素。
*/
width: null
};
u.extend(properties, options);
this.setProperties(properties);
},
/**
* 初始化组件结构
*
* @override
*/
initStructure: function () {
var me = this;
var main = me.main;
me.$super(arguments);
if (main.parentNode
&& main.parentNode.nodeName.toLowerCase() !== 'body') {
document.body.appendChild(main);
}
var roles = parseMainElement(main);
var tempEle;
for (var key in roles) {
if (roles.hasOwnProperty(key)) {
tempEle = roles[key];
tempEle.id = me.helper.getId(key);
me.helper.addPartClasses(key, tempEle);
}
}
this.helper.initChildren();
},
/**
* 组件的重绘属性处理函数。
*
* @override
*/
repaint: painters.createRepaint(
Control.prototype.repaint,
{
name: ['width'],
paint: function (drawer, width) {
var helper = drawer.helper;
var w = 'width';
if (width) {
$(helper.getPart('header')).css(w, width);
$(helper.getPart('content')).css(w, width);
$(helper.getPart('footer')).css(w, width);
}
}
},
{
name: ['title'],
paint: function (drawer, title) {
var titleId = drawer.helper.getId('title');
$('#' + titleId).html(title);
}
}
),
/**
* 事件绑定
*
* @override
*/
initEvents: function () {
this.$super(arguments);
var helper = this.helper;
// 监听main中具有data-role="close"的节点 点击就关闭自己
helper.addDOMEvent(this.main, 'click', '[data-role="close"]', close);
},
/**
* 显示Drawer
*/
show: function () {
$(this.main).addClass(this.helper.getPrimaryClassName('visible'));
$(document.body).addClass(this.helper.getPrimaryClassName('hide-overflow'));
this.fire('show');
},
/**
* 隐藏Drawer
*/
hide: function () {
// 如果直接显示页面滚动，可能会出现content和页面双滚动
// 因此延迟一会儿
var hiddenFlowClass = this.helper.getPrimaryClassName('hide-overflow');
setTimeout(function () {
$(document.body).removeClass(hiddenFlowClass);
}, 200);
$(this.main).removeClass(this.helper.getPrimaryClassName('visible'));
this.fire('hide');
},
/**
* 关闭drawer, 和hide区别是close会fire`hide`事件
*/
close: function () {
close.call(this);
},
/**
* 销毁组件
*
* @override
*/
dispose: function () {
// drawer里面可能存在link触发global redirect，这里手动隐藏一次
$(document.body).removeClass(this.helper.getPrimaryClassName('hide-overflow'));
$(this.main).remove();
this.$super(arguments);
}
}
);
/**
* 关闭按钮的处理函数
*
* @param {Object} e 事件参数
* @return {boolean} 是否关闭成功
* @private
*/
function close(e) {
e && e.preventDefault();
var beforecloseEvent = this.fire('beforeclose');
// 阻止事件，则不继续运行
if (beforecloseEvent.isDefaultPrevented()) {
return false;
}
this.hide();
this.fire('close');
return true;
}
/**
* 递归一个DOM元素，取到组件相关的DOM元素
*
* @param {DOMElement} element 要进行parse的元素
* @return {DOMElement} 需要拷贝到剪切板的内容
* @private
*/
function parseMainElement(element) {
var roles = {};
$(element).find('[data-role]').each(function () {
roles[$(this).data('role')] = this;
});
return roles;
}
esui.register(Drawer);
return Drawer;
}
define(function (require) {
var u = require('underscore');
var esui = require('esui');
var lib = require('esui/lib');
var paint = require('esui/painters');
var Control = require('esui/Control');
var eoo = require('eoo');
var $ = require('jquery');
var MAIN_TPL = [
'<div class="${typeSelector}-main" id="${contentId}">',
'<div class="${typeSelector}-content">',
'<span class="${typeSelector}-pointer ${typeSelector}-pointer-active-l ${iconLeftArrow}"',
' id="${leftId}"></span>',
'<div class="ui-carouse-list-wrap">',
'<ul class="${typeSelector}-list" id="${listId}"></ul>',
'</div>',
'<span class="${typeSelector}-pointer ${typeSelector}-pointer-active-r ${iconRightArrow}"',
' id="${rightId}"></span>',
'</div>',
'<div class="${typeSelector}-toolbar">',
'<ul id="${toolbarId}"></ul>',
'</div>',
'</div>'
].join('');
var ITEM_TPL = [
'<li class="${typeSelector}-item ${itemSelector}" index="${index}" ',
'style="width:${width}px;height:${height}px;margin-right:${spacing}px;">',
'<img class="${typeSelector}-item-img" src="${imgSrc}"/>',
'<span class="${typeSelector}-check ${iconCheck}"></span>',
'</li>'
].join('');
var PAGE_TPL = '<li index="${index}" class="${typeSelector}-page"></li>';
var Carousel = eoo.create(
Control,
{
/**
* 控件类型
*
* @type {string}
* @readonly
* @override
*/
type: 'Carousel',
/**
* 初始化参数
*
* @param {Object} [options] 构造函数传入的参数
* @param {number} option.pageSize 每页显示的个数
* @param {number} option.spacing 每个图片的间隔
* @param {number} option.itemWidth 每项的宽度
* @param {number} option.itemHeight 每项的高度
* @param {Array} option.datasource 所有项的数据数组
* @param {number} option.value 选中的项的id值
* @param {boolean} option.disabled 是否禁用
* @param {boolean} option.emphasizeSelectedItem 是否高亮被选择的
* @protected
* @override
*/
initOptions: function (options) {
var properties = {
pageSize: 8,
spacing: 15,
itemWidth: 80,
itemHeight: 50,
datasource: [],
value: null,
disabled: false,
emphasizeSelectedItem: true
};
u.extend(properties, options);
this.setProperties(properties);
},
/**
* 初始化DOM结构
*
* @protected
*/
initStructure: function () {
this.main.innerHTML = getMainHtml.call(this);
},
/**
* 初始化事件交互
*
* @protected
* @override
*/
initEvents: function () {
// 左右的把手事件绑定
this.helper.addDOMEvent('left-handler', 'click', u.bind(pointerClick, this, -1));
this.helper.addDOMEvent('right-handler', 'click', u.bind(pointerClick, this, 1));
// 列表项切换
this.helper.addDOMEvent('list', 'click', 'li', itemChangeHandler);
// 最下面翻页
this.helper.addDOMEvent('toolbar', 'click', 'li', toolbarHandler);
},
/**
* 重新渲染视图
* 仅当生命周期处于RENDER时，该方法才重新渲染
*
* @param {Array=} 变更过的属性的集合
* @override
*/
repaint: paint.createRepaint(
Control.prototype.repaint,
{
name: ['datasource', 'itemWidth', 'itemHeight'],
paint: function (carousel, datasource, itemWidth, itemHeight) {
var list = carousel.helper.getPart('list');
var toolbar = carousel.helper.getPart('toolbar');
var pageSize = carousel.pageSize;
var spacing = carousel.spacing;
list.innerHTML = getItemHtml.call(
carousel,
datasource,
itemWidth,
itemHeight,
spacing,
pageSize
);
toolbar.innerHTML = getToolbarHtml.call(carousel, datasource);
var wrapWidth = itemWidth * carousel.pageSize + (pageSize - 1) * spacing;
var wrapHeight = itemHeight;
carousel.wrapWidth = wrapWidth;
var wrap = list.parentNode;
wrap.style.width = wrapWidth + 'px';
wrap.style.height = wrapHeight + 'px';
}
},
{
name: 'value',
paint: function (carousel, value) {
carousel.setValue(value);
}
}
),
/**
* 设置选中项
*
* @param {number} value 选中项的值
* @public
*/
setValue: function (value) {
if (u.isNull(value) || u.isUndefined(value)) {
this.setPage();
return;
}
this.value = value;
this.selectedIndex = -1;
u.each(this.datasource, function (item, index) {
if (item.id === this.value) {
this.selectedIndex = index;
return false;
}
}, this);
this.selectedItem = this.getSelectedItem();
if (this.selectedIndex !== -1 && this.emphasizeSelectedItem) {
var selector = this.helper.getPart('list');
var $lis = $(selector).children('li');
var selectedClass = this.helper.getPrimaryClassName('selected-item');
$lis.parent().find('.' + selectedClass).removeClass(selectedClass);
var $li = $lis.eq(this.selectedIndex);
$li.addClass(selectedClass);
}
var page = getPageByIndex.call(this);
this.setPage(page);
},
/**
* 设置page
*
* @param {number} page 获取page的序号
* @public
*/
setPage: function (page) {
page = page || 0;
page = parseInt(page, 10);
var currentPageClass = this.helper.getPrimaryClassName('current-page');
if (this.currentPage === null) {
this.currentPage = 0;
}
if (this.currentPage !== page) {
this.currentPage = page;
}
var $allDom = $(this.helper.getPart('toolbar')).children();
u.each($allDom, function (dom, i) {
var $dom = $(dom);
$dom.removeClass(currentPageClass);
var index = +$dom.attr('index');
if (this.currentPage === index) {
$dom.addClass(currentPageClass);
}
}, this);
setPointerStyle.call(this);
setCarouseListPosition.call(this);
},
/**
* 获取选择项的完整数据
*
* @return {Object}
* @public
*/
getSelectedItem: function () {
return this.datasource[this.selectedIndex];
}
}
);
/**
* 拼接main的dom结构
*
* @return {string} html片段
* @inner
*/
function getMainHtml() {
var controlHelper = this.helper;
return lib.format(
MAIN_TPL,
{
typeSelector: controlHelper.getPrimaryClassName(),
contentId: controlHelper.getId('main'),
leftId: controlHelper.getId('left-handler'),
listId: controlHelper.getId('list'),
rightId: controlHelper.getId('right-handler'),
toolbarId: controlHelper.getId('toolbar'),
iconLeftArrow: controlHelper.getIconClass(),
iconRightArrow: controlHelper.getIconClass()
}
);
}
/**
* 拼接内容项的dom结构
*
* @param {Array} data 渲染数据
* @param {number} itemWidth 单项的宽
* @param {number} itemHeight 单项的高
* @param {number} spacing 图片间距
* @param {number} pageSize 图片间距
* @return {string} html片段
* @inner
*/
function getItemHtml(data, itemWidth, itemHeight, spacing, pageSize) {
var html = [];
u.each(data, function (item, index) {
var index1 = index + 1;
var str = '';
if (this.onRenderItem) {
str = this.onRenderItem(item);
}
else {
str = lib.format(
ITEM_TPL,
{
imgSrc: item.url,
width: itemWidth,
height: itemHeight,
index: index,
typeSelector: this.helper.getPrimaryClassName(),
itemSelector: this.isDisabled() ? this.helper.getPartClassName('disabled') : '',
iconCheck: this.helper.getIconClass(),
spacing: (index1 > 0 && index1 % pageSize === 0) ? 0 : spacing
}
);
}
html.push(str);
}, this);
return html.join('');
}
/**
* 拼接底部分页条的dom结构
*
* @param {Array} data 渲染所需的数据
* @return {string} html片段
* @inner
*/
function getToolbarHtml(data) {
var html = [];
var len = data.length;
var divided = Math.ceil(len / this.pageSize);
this.pageLength = divided;
for (var i = 0; i < divided; i++) {
var str = lib.format(
PAGE_TPL,
{
index: i,
typeSelector: this.helper.getPrimaryClassName()
}
);
html.push(str);
}
return html.join('');
}
/**
* 获取page的序号根据选中项的index
*
* @return {number} page的序号
* @inner
*/
function getPageByIndex() {
if (this.selectedIndex === -1) {
return 0;
}
return Math.floor(this.selectedIndex / this.pageSize);
}
/**
* 设置左右箭头的样式
*
* @inner
*/
function setPointerStyle() {
var controlHelper = this.helper;
var disableClass = controlHelper.getPartClassName('pointer-disable');
var $left = $(controlHelper.getPart('left-handler'));
var $right = $(controlHelper.getPart('right-handler'));
var currentPage = this.currentPage;
$left.removeClass(disableClass);
$right.removeClass(disableClass);
if (currentPage === 0) {
$left.addClass(disableClass);
}
if (currentPage === this.pageLength - 1) {
$right.addClass(disableClass);
}
}
/**
* 设置翻页的滚动位置
*
* @inner
*/
function setCarouseListPosition() {
var pageOffset = -this.wrapWidth;
var left = (pageOffset * this.currentPage) + 'px';
this.helper.getPart('list').style.left = left;
}
/**
* 左右箭头点击后的处理函数
*
* @param {number} n 区别方向 -1=left 1=right
* @inner
*/
function pointerClick(n) {
var nextPage = this.currentPage + n;
if (nextPage >= this.pageLength || nextPage < 0) {
}
else {
this.setPage(nextPage);
}
}
/**
* 单个选项处理handler
*
* @param {number} index 选项的序号
* @param {HTMLElement} $el dom对象
* @inner
*/
function itemClick(index, $el) {
if (this.selectedIndex === index) {
return;
}
if (this.emphasizeSelectedItem) {
var $selector = $(this.helper.getPart('list'));
var selectedClass = this.helper.getPrimaryClassName('selected-item');
$selector.children('.' + selectedClass).removeClass(selectedClass);
$el.addClass(selectedClass);
}
this.selectedIndex = index;
this.selectedItem = this.getSelectedItem();
this.value = this.selectedItem.id;
/**
* @event change
*
* 值发生变化时触发
*
* `Carousel`控件的值变化是以{@link Carousel#selectedIndex}属性为基准
*/
this.fire('change');
}
/**
* 翻页按钮点击处理函数
*
* @param {number} nextPage 目标页的序号
* @inner
*/
function pageClick(nextPage) {
if (this.currentPage !== nextPage) {
this.setPage(nextPage);
}
}
/**
* 选择项切换处理函数，采用事件委托的方式
*
* @param {Event} e 事件对象
* @inner
*/
function itemChangeHandler(e) {
var $target = $(e.currentTarget);
itemClick.call(this, +$target.attr('index'), $target);
}
/**
* 底部工具条处理函数，采用事件委托的方式
*
* @param {Event} e 事件对象
* @inner
*/
function toolbarHandler(e) {
var $target = $(e.currentTarget);
pageClick.call(this, +$target.attr('index'));
}
esui.register(Carousel);
return Carousel;
});
function (require) {
var $ = require('jquery');
var u = require('underscore');
var esui = require('esui');
var Control = require('esui/Control');
var eoo = require('eoo');
var painters = require('esui/painters');
require('./ImagePanel');
require('esui/Pager');
var ImageList = eoo.create(
Control,
{
/**
* 控件类型，始终为 `ImageList`
*
* @type {string}
* @readonly
* @override
*/
type: 'ImageList',
/**
* 初始化参数
*
* @param {Object} options 参数对象
* @override
*/
initOptions: function (options) {
var properties = {
datasource: [], // 数据源
row: 2, // 行数
column: 5, // 列数
width: 0, // 宽度，单位px
async: false, // 是否异步,
needDesc: true, // 是否需要显示图标描述信息
canSelect: true, // 能否选中
operates: '', // 右上角的操作按钮
imageWidth: 100, // 图标长
imageId: 0, // 默认选中的图标ID
noneTip: '' // 没有数据时显示的tip
};
u.extend(properties, options);
// originDatasource 保存一开始传入的datasource
properties.originDatasource = u.clone(properties.datasource);
this.setProperties(properties);
},
/**
* 初始化DOM结构
*
* @override
* @protected
*/
initStructure: function () {
buildDOMStructure.call(this);
this.initChildren();
},
/**
* 初始化事件
*
* @override
* @protected
*/
initEvents: function () {
var pager = this.getPager();
var that = this;
// 翻页事件
pager.onchangepage = function () {
var page = this.get('page');
var pageSize = this.get('pageSize');
that.fire('pagerchange', {page: page, pageSize: pageSize});
// 异步情况下，不执行默认翻页操作
if (that.async) {
return;
}
// 默认翻页事件
var datasource = that.datasource;
var ds = datasource.slice((page - 1) * pageSize, page * pageSize);
that.getImagePanel().setDatasource(ds);
};
// 改变每页大小事件
pager.onchangepagesize = function () {
var pageSize = this.get('pageSize');
that.row = pageSize / that.column;
that.fire('pagerchange', {page: 1, pageSize: pageSize});
// 异步情况下，不执行默认改变页面大小操作
if (that.async) {
return;
}
// 默认改变页面大小事件
var datasource = that.datasource;
this.set('page', 1);
var ds = datasource.slice(0, pageSize);
that.getImagePanel().setDatasource(ds);
};
},
/**
* 获取imagepanel
*
* @return {Object}
*/
getImagePanel: function () {
return this.getChild('imagePanel');
},
/**
* 获取pager
*
* @return {Object}
*/
getPager: function () {
return this.getChild('pager');
},
/**
* datasource重新赋值，并刷新
*
* @param {Array} [datasource] 数据源
* @param {number} [count] 数据总数，异步下有效
* @param {number} [page] 当前页码，异步下有效
*/
setDatasource: function (datasource, count, page) {
this.datasource = u.clone(datasource);
this.originDatasource = u.clone(datasource);
this.count = count;
this.page = page;
buildDOMStructure.call(this);
},
/**
* 默认筛选函数，异步下不要调用
*
* @param {Object} [arg] 对象或函数
*/
filter: function (arg) {
var filteredDS = null;
var ds = u.clone(this.originDatasource);
// arg可以是对象或者函数
// arg是对象时，根据对象包含的属性进行筛选
if (u.isObject(arg)) {
var keys = u.keys(arg);
// 根据filter中的属性和值进行筛选
filteredDS = u.filter(ds, function (icon) {
var value = true;
u.each(keys, function (key) {
if (arg[key] !== '' && icon[key] !== arg[key]) {
value = false;
}
});
return value;
});
}
// arg是函数时，将datasource传给这个函数作为参数，此函数必须返回一个结果
else if (u.isFunction(arg)) {
filteredDS = arg(ds);
}
// 不支持其他类型
else {
return;
}
// 将筛选结构重新赋值给datasource，供翻页操作
this.datasource = filteredDS;
var pager = this.getPager();
var pageSize = pager.get('pageSize');
pager.set('count', filteredDS.length);
pager.set('page', 1);
filteredDS = filteredDS.slice(0, pageSize);
this.getImagePanel().setDatasource(filteredDS);
},
/**
* 默认排序函数，异步下不要调用
*
* @param {Object} [arg] 对象或函数
*/
sort: function (arg) {
var sortedDS = null;
var ds = this.datasource;
// arg可以是对象或者函数
// arg是对象时，根据对象包含的属性进行排序
// arg必须包含'field'、'order'两个属性
if (u.isObject(arg)) {
var field = arg.field;
var order = arg.order.toLowerCase();
// 根据field排序，升序
sortedDS = u.sortBy(ds, field);
// 如果是降序，则反转
if (order === 'desc') {
sortedDS.reverse();
}
}
// arg是函数时，将datasource传给这个函数作为参数，此函数必须返回一个结果
else if (u.isFunction(arg)) {
sortedDS = arg(ds);
}
// 不支持其他类型
else {
return;
}
// 将筛选结构重新赋值给datasource，供翻页操作
this.datasource = sortedDS;
var pager = this.getPager();
var pageSize = pager.get('pageSize');
pager.set('page', 1);
sortedDS = sortedDS.slice(0, pageSize);
this.getImagePanel().setDatasource(sortedDS);
},
/**
* 重渲染
*
* @override
* @protected
*/
repaint: painters.createRepaint(
Control.prototype.repaint,
{
name: 'datasource',
paint: function (iconList, datasource) {
iconList.setDatasource(datasource);
}
}
)
}
);
/**
* 创建DOM节点
*
* @param {string} [part] part名称
* @param {string} [nodeName] 标签名称
* @param {string} [innerHTML] innerHTML
*
* @return {string} html
*/
function create(part, nodeName, innerHTML) {
return this.helper.getPartBeginTag(part, nodeName)
+ innerHTML
+ this.helper.getPartEndTag(part, nodeName);
}
/**
* 构建DOM结构
*/
function buildDOMStructure() {
var imagePanel = this.getImagePanel();
var pager = this.getPager();
var pageSize = this.row * this.column;
var pageSizes = [pageSize, 2 * pageSize, 5 * pageSize, 10 * pageSize];
// 构造main html
if (!imagePanel || !pager) {
imagePanel = null;
pager = null;
var imagePanelWrapper = create.call(this, 'image-panel', 'div', '');
var pagerWrapper = create.call(this, 'pager', 'div', '');
var html = create.call(this, '', 'div', imagePanelWrapper + pagerWrapper);
this.main.innerHTML = html;
}
// ImagePanel appendTo main
var ds = this.datasource.slice(0, pageSize);
if (imagePanel) {
imagePanel.setDatasource(ds);
}
else {
// iconpanel的默认属性
var keys = [
'needDesc', // 是否需要显示图标描述信息
'canSelect', // 能否选中
'operates', // 右上角的操作按钮
'imageWidth', // 图标长
'datasource', // 数据源
'imageId', // 默认选中的图标ID
'noneTip' // 没有数据时显示的tip
];
// 从this取出iconpanel配置
var properties = u.pick(this, keys);
imagePanel = esui.create('ImagePanel', properties);
this.addChild(imagePanel, 'imagePanel');
imagePanel.appendTo($('#' + this.helper.getId('image-panel'))[0]);
}
// Pager appendTo main
var page = this.async ? this.page : 1;
var count = this.async ? this.count : this.datasource.length;
if (pager) {
pager.set('count', count);
pager.set('page', page);
}
else {
// 根据 row 和 column设置pageSize 和 pageSizes
pager = esui.create('Pager', {
page: page,
count: count,
pageSize: pageSize,
pageSizes: pageSizes,
pageType: 'plain',
layout: 'alignRight'
});
this.addChild(pager, 'pager');
pager.appendTo($('#' + this.helper.getId('pager'))[0]);
}
if (this.width > 0) {
$(this.main).css(this.width);
}
}
esui.register(ImageList);
return ImageList;
}