caoww
/
fineui
forked from fanruan/fineui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

columnresizer

es6
guy 8 years ago
parent
559a024908
commit
dd7032324b
10 changed files with 138 additions and 28 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      bi/base.css
  2. 46
      bi/base.js
  3. 6
      docs/base.css
  4. 46
      docs/base.js
  5. 22
      src/base/table/table.resizable.cell.js
  6. 24
      src/base/table/table.resizable.js
  7. 3
      src/css/base/table/table.resizable.cell.css
  8. 3
      src/css/base/table/table.resizable.css
  9. 5
      src/less/base/table/table.resizable.cell.less
  10. 3
      src/less/base/table/table.resizable.less

6
bi/base.css
Unescape View File

@ -1289,6 +1289,9 @@ li.CodeMirror-hint-active {
.bi-resizable-table-cell .resizable-table-cell-resizer-container.dragging .resizable-table-cell-resizer-knob {
background-color: #3f8ce8;
}
.bi-resizable-table-cell .resizable-table-cell-resizer-container.suitable .resizable-table-cell-resizer-knob {
background-color: #58cc7d;
}
/****添加计算宽度的--运算符直接需要space****/
/****** common color(常用颜色,可用于普遍场景) *****/
/**** custom color(自定义颜色,用于特定场景) ****/
@ -1297,6 +1300,9 @@ li.CodeMirror-hint-active {
z-index: 1;
background-color: #3f8ce8;
}
.bi-resizable-table .resizable-table-resizer.suitable {
background-color: #58cc7d;
}
.bi-resizable-table .resizable-table-region-resizer {
cursor: ew-resize;
z-index: 1;

46
bi/base.js
Unescape View File

@ -32403,6 +32403,9 @@ BI.ResizableTableCell = BI.inherit(BI.Widget, {
return BI.extend(BI.ResizableTableCell.superclass._defaultConfig.apply(this, arguments), {
baseCls: "bi-resizable-table-cell",
cell: {},
minSize: 15,
// suitableSize,
maxSize: Number.MAX_VALUE,
start: BI.emptyFn,
resize: BI.emptyFn,
stop: BI.emptyFn
@ -32416,22 +32419,37 @@ BI.ResizableTableCell = BI.inherit(BI.Widget, {
var startDrag = false;
var size = 0, offset = 0, defaultSize = o.width;
function optimizeSize(size) {
size = BI.clamp(size, o.minSize, o.maxSize || Number.MAX_VALUE);
if (o.suitableSize) {
if (Math.abs(o.suitableSize - size) < 5) {
size = o.suitableSize;
self.handler.element.addClass("suitable");
} else {
self.handler.element.removeClass("suitable");
}
}
return size;
}
var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX, deltaY) {
if (mouseMoveTracker.isDragging()) {
startDrag = true;
offset += deltaX;
size = BI.clamp(defaultSize + offset, 15, Number.MAX_VALUE);
size = optimizeSize(defaultSize + offset);
self.handler.element.addClass("dragging");
o.resize(size);
}
}, function () {
if (startDrag === true) {
size = BI.clamp(size, 15, Number.MAX_VALUE);
size = optimizeSize(size);
o.stop(size);
size = 0;
offset = 0;
defaultSize = o.width;
self.handler.element.removeClass("dragging");
self.handler.element.removeClass("suitable");
startDrag = false;
}
mouseMoveTracker.releaseMouseMoves();
@ -32699,14 +32717,20 @@ BI.ResizableTable = BI.inherit(BI.Widget, {
_formatHeader: function (header) {
var self = this, o = this.options;
var result = [];
var resize = function (j, size) {
var resize = function (j, i, size) {
self.resizer.setVisible(true);
var height = o.headerRowSize + self._getRegionRowSize()[1];
self.resizer.setHeight(height);
if (o.minColumnSize[i]) {
if (Math.abs(size - o.minColumnSize[i]) < 5) {
self.resizer.element.addClass("suitable");
} else {
self.resizer.element.removeClass("suitable");
}
}
self._setResizerPosition(self._getResizerLeft(j) + size, (o.header.length - 1) * o.headerRowSize);
};
var stop = function (j, size) {
var stop = function (j, i, size) {
self.resizer.setVisible(false);
var columnSize = o.columnSize.slice();
columnSize[j] = size;
@ -32726,8 +32750,10 @@ BI.ResizableTable = BI.inherit(BI.Widget, {
result[i][j] = {
type: "bi.resizable_table_cell",
cell: col,
resize: BI.bind(resize, null, j),
stop: BI.bind(stop, null, j)
suitableSize: o.minColumnSize[i],
maxSize: o.maxColumnSize[i],
resize: BI.bind(resize, null, j, i),
stop: BI.bind(stop, null, j, i)
};
if (o.isNeedMerge) {
var r = i;
@ -32735,8 +32761,10 @@ BI.ResizableTable = BI.inherit(BI.Widget, {
result[r - 1][j] = {
type: "bi.resizable_table_cell",
cell: result[r - 1][j],
resize: BI.bind(resize, null, j),
stop: BI.bind(stop, null, j)
suitableSize: o.minColumnSize[i],
maxSize: o.maxColumnSize[i],
resize: BI.bind(resize, null, j, i),
stop: BI.bind(stop, null, j, i)
};
r--;
}

6
docs/base.css
Unescape View File

@ -1289,6 +1289,9 @@ li.CodeMirror-hint-active {
.bi-resizable-table-cell .resizable-table-cell-resizer-container.dragging .resizable-table-cell-resizer-knob {
background-color: #3f8ce8;
}
.bi-resizable-table-cell .resizable-table-cell-resizer-container.suitable .resizable-table-cell-resizer-knob {
background-color: #58cc7d;
}
/****添加计算宽度的--运算符直接需要space****/
/****** common color(常用颜色,可用于普遍场景) *****/
/**** custom color(自定义颜色,用于特定场景) ****/
@ -1297,6 +1300,9 @@ li.CodeMirror-hint-active {
z-index: 1;
background-color: #3f8ce8;
}
.bi-resizable-table .resizable-table-resizer.suitable {
background-color: #58cc7d;
}
.bi-resizable-table .resizable-table-region-resizer {
cursor: ew-resize;
z-index: 1;

46
docs/base.js
Unescape View File

@ -32403,6 +32403,9 @@ BI.ResizableTableCell = BI.inherit(BI.Widget, {
return BI.extend(BI.ResizableTableCell.superclass._defaultConfig.apply(this, arguments), {
baseCls: "bi-resizable-table-cell",
cell: {},
minSize: 15,
// suitableSize,
maxSize: Number.MAX_VALUE,
start: BI.emptyFn,
resize: BI.emptyFn,
stop: BI.emptyFn
@ -32416,22 +32419,37 @@ BI.ResizableTableCell = BI.inherit(BI.Widget, {
var startDrag = false;
var size = 0, offset = 0, defaultSize = o.width;
function optimizeSize(size) {
size = BI.clamp(size, o.minSize, o.maxSize || Number.MAX_VALUE);
if (o.suitableSize) {
if (Math.abs(o.suitableSize - size) < 5) {
size = o.suitableSize;
self.handler.element.addClass("suitable");
} else {
self.handler.element.removeClass("suitable");
}
}
return size;
}
var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX, deltaY) {
if (mouseMoveTracker.isDragging()) {
startDrag = true;
offset += deltaX;
size = BI.clamp(defaultSize + offset, 15, Number.MAX_VALUE);
size = optimizeSize(defaultSize + offset);
self.handler.element.addClass("dragging");
o.resize(size);
}
}, function () {
if (startDrag === true) {
size = BI.clamp(size, 15, Number.MAX_VALUE);
size = optimizeSize(size);
o.stop(size);
size = 0;
offset = 0;
defaultSize = o.width;
self.handler.element.removeClass("dragging");
self.handler.element.removeClass("suitable");
startDrag = false;
}
mouseMoveTracker.releaseMouseMoves();
@ -32699,14 +32717,20 @@ BI.ResizableTable = BI.inherit(BI.Widget, {
_formatHeader: function (header) {
var self = this, o = this.options;
var result = [];
var resize = function (j, size) {
var resize = function (j, i, size) {
self.resizer.setVisible(true);
var height = o.headerRowSize + self._getRegionRowSize()[1];
self.resizer.setHeight(height);
if (o.minColumnSize[i]) {
if (Math.abs(size - o.minColumnSize[i]) < 5) {
self.resizer.element.addClass("suitable");
} else {
self.resizer.element.removeClass("suitable");
}
}
self._setResizerPosition(self._getResizerLeft(j) + size, (o.header.length - 1) * o.headerRowSize);
};
var stop = function (j, size) {
var stop = function (j, i, size) {
self.resizer.setVisible(false);
var columnSize = o.columnSize.slice();
columnSize[j] = size;
@ -32726,8 +32750,10 @@ BI.ResizableTable = BI.inherit(BI.Widget, {
result[i][j] = {
type: "bi.resizable_table_cell",
cell: col,
resize: BI.bind(resize, null, j),
stop: BI.bind(stop, null, j)
suitableSize: o.minColumnSize[i],
maxSize: o.maxColumnSize[i],
resize: BI.bind(resize, null, j, i),
stop: BI.bind(stop, null, j, i)
};
if (o.isNeedMerge) {
var r = i;
@ -32735,8 +32761,10 @@ BI.ResizableTable = BI.inherit(BI.Widget, {
result[r - 1][j] = {
type: "bi.resizable_table_cell",
cell: result[r - 1][j],
resize: BI.bind(resize, null, j),
stop: BI.bind(stop, null, j)
suitableSize: o.minColumnSize[i],
maxSize: o.maxColumnSize[i],
resize: BI.bind(resize, null, j, i),
stop: BI.bind(stop, null, j, i)
};
r--;
}

22
src/base/table/table.resizable.cell.js
Unescape View File

@ -11,6 +11,9 @@ BI.ResizableTableCell = BI.inherit(BI.Widget, {
return BI.extend(BI.ResizableTableCell.superclass._defaultConfig.apply(this, arguments), {
baseCls: "bi-resizable-table-cell",
cell: {},
minSize: 15,
// suitableSize,
maxSize: Number.MAX_VALUE,
start: BI.emptyFn,
resize: BI.emptyFn,
stop: BI.emptyFn
@ -24,22 +27,37 @@ BI.ResizableTableCell = BI.inherit(BI.Widget, {
var startDrag = false;
var size = 0, offset = 0, defaultSize = o.width;
function optimizeSize(size) {
size = BI.clamp(size, o.minSize, o.maxSize || Number.MAX_VALUE);
if (o.suitableSize) {
if (Math.abs(o.suitableSize - size) < 5) {
size = o.suitableSize;
self.handler.element.addClass("suitable");
} else {
self.handler.element.removeClass("suitable");
}
}
return size;
}
var mouseMoveTracker = new BI.MouseMoveTracker(function (deltaX, deltaY) {
if (mouseMoveTracker.isDragging()) {
startDrag = true;
offset += deltaX;
size = BI.clamp(defaultSize + offset, 15, Number.MAX_VALUE);
size = optimizeSize(defaultSize + offset);
self.handler.element.addClass("dragging");
o.resize(size);
}
}, function () {
if (startDrag === true) {
size = BI.clamp(size, 15, Number.MAX_VALUE);
size = optimizeSize(size);
o.stop(size);
size = 0;
offset = 0;
defaultSize = o.width;
self.handler.element.removeClass("dragging");
self.handler.element.removeClass("suitable");
startDrag = false;
}
mouseMoveTracker.releaseMouseMoves();

24
src/base/table/table.resizable.js
Unescape View File

@ -212,14 +212,20 @@ BI.ResizableTable = BI.inherit(BI.Widget, {
_formatHeader: function (header) {
var self = this, o = this.options;
var result = [];
var resize = function (j, size) {
var resize = function (j, i, size) {
self.resizer.setVisible(true);
var height = o.headerRowSize + self._getRegionRowSize()[1];
self.resizer.setHeight(height);
if (o.minColumnSize[i]) {
if (Math.abs(size - o.minColumnSize[i]) < 5) {
self.resizer.element.addClass("suitable");
} else {
self.resizer.element.removeClass("suitable");
}
}
self._setResizerPosition(self._getResizerLeft(j) + size, (o.header.length - 1) * o.headerRowSize);
};
var stop = function (j, size) {
var stop = function (j, i, size) {
self.resizer.setVisible(false);
var columnSize = o.columnSize.slice();
columnSize[j] = size;
@ -239,8 +245,10 @@ BI.ResizableTable = BI.inherit(BI.Widget, {
result[i][j] = {
type: "bi.resizable_table_cell",
cell: col,
resize: BI.bind(resize, null, j),
stop: BI.bind(stop, null, j)
suitableSize: o.minColumnSize[i],
maxSize: o.maxColumnSize[i],
resize: BI.bind(resize, null, j, i),
stop: BI.bind(stop, null, j, i)
};
if (o.isNeedMerge) {
var r = i;
@ -248,8 +256,10 @@ BI.ResizableTable = BI.inherit(BI.Widget, {
result[r - 1][j] = {
type: "bi.resizable_table_cell",
cell: result[r - 1][j],
resize: BI.bind(resize, null, j),
stop: BI.bind(stop, null, j)
suitableSize: o.minColumnSize[i],
maxSize: o.maxColumnSize[i],
resize: BI.bind(resize, null, j, i),
stop: BI.bind(stop, null, j, i)
};
r--;
}

3
src/css/base/table/table.resizable.cell.css
Unescape View File

@ -9,3 +9,6 @@
.bi-resizable-table-cell .resizable-table-cell-resizer-container.dragging .resizable-table-cell-resizer-knob {
background-color: #3f8ce8;
}
.bi-resizable-table-cell .resizable-table-cell-resizer-container.suitable .resizable-table-cell-resizer-knob {
background-color: #58cc7d;
}

3
src/css/base/table/table.resizable.css
Unescape View File

@ -6,6 +6,9 @@
z-index: 1;
background-color: #3f8ce8;
}
.bi-resizable-table .resizable-table-resizer.suitable {
background-color: #58cc7d;
}
.bi-resizable-table .resizable-table-region-resizer {
cursor: ew-resize;
z-index: 1;

5
src/less/base/table/table.resizable.cell.less
Unescape View File

@ -9,5 +9,10 @@
background-color: @color-bi-background-highlight;
}
}
&.suitable{
& .resizable-table-cell-resizer-knob {
background-color: @color-bi-background-success;
}
}
}
}

3
src/less/base/table/table.resizable.less
Unescape View File

@ -5,6 +5,9 @@
cursor: ew-resize;
z-index: 1;
background-color: @color-bi-background-highlight;
&.suitable {
background-color: @color-bi-background-success;
}
}
& .resizable-table-region-resizer {
cursor: ew-resize;

Write Preview
Loading…
Cancel
Save